/* ==========================================================================
   HP UI — hamipardakht.com
   1) فونت  2) توکن  3) پایه  4) کامپوننت
   این فایل باید بعد از همه استایل های قالب صف بندی شود.
   ========================================================================== */

/* ---------- 1. تایپوگرافی ---------- */
/* Font faces and typography tokens are centralized in hp-typography.css. */

/* ---------- 2. توکن ها ---------- */
:root{
  --hp-brand:#3F5AEF;
  --hp-brand-hover:#3149C9;
  --hp-brand-active:#2A3EAE;
  --hp-brand-deep:#22337E;
  --hp-brand-soft:#8FA0F7;
  --hp-brand-tint:#E8ECFE;
  --hp-brand-wash:#F3F5FF;

  --hp-app-bg:#F4F6FB;
  --hp-surface:#FFFFFF;
  --hp-surface-2:#F9FAFB;
  --hp-surface-3:#F3F5FF;
  --hp-ink:#090621;
  --hp-ink-soft:#1C262F;

  --hp-text:#2B2F38;
  --hp-text-strong:#14172B;
  --hp-muted:#6E7176;
  --hp-placeholder:#9BA1AC;
  --hp-on-brand:#FFFFFF;
  --hp-on-dark:#B9BCD0;

  --hp-line:#E2E9F1;
  --hp-line-strong:#CBD6E4;
  --hp-line-brand:#D9E0FD;

  --hp-success:#17A67B; --hp-success-bg:#E4F5EE; --hp-success-line:#C9EADE; --hp-success-text:#0F7A5A;
  --hp-danger:#E14B4B;  --hp-danger-bg:#FDEFEF;  --hp-danger-line:#F5CFCF;  --hp-danger-text:#C13A3A;
  --hp-warning:#E9A23B; --hp-warning-bg:#FDF6EA; --hp-warning-line:#F3DCB4; --hp-warning-text:#B97A17;
  --hp-info:#3F5AEF;    --hp-info-bg:#F3F5FF;    --hp-info-line:#D9E0FD;    --hp-info-text:#3149C9;
  --hp-neutral:#6E7176; --hp-neutral-bg:#F1F3F6; --hp-neutral-line:#E2E9F1; --hp-neutral-text:#4B4F57;

  --hp-chart-1:#3F5AEF; --hp-chart-2:#17A67B; --hp-chart-3:#E9A23B; --hp-chart-4:#8FA0F7;
  --hp-chart-grid:#E2E9F1;

  --hp-usdt:#26A17B; --hp-btc:#F7931A; --hp-eth:#627EEA; --hp-trx:#EF0027; --hp-bnb:#F3BA2F;

  /* Typography is centralized in hp-typography.css. These aliases keep older components compatible. */
  --hp-font:var(--hp-type-family);
  --hp-fs-display:var(--hp-type-display-size); --hp-fs-h1:var(--hp-type-size-28); --hp-fs-h2:var(--hp-type-page-title-size); --hp-fs-h3:var(--hp-type-section-title-size); --hp-fs-h4:var(--hp-type-card-title-size);
  --hp-fs-lg:var(--hp-type-body-lg-size); --hp-fs-base:var(--hp-type-body-size); --hp-fs-sm:var(--hp-type-label-size); --hp-fs-xs:var(--hp-type-meta-size);
  --hp-lh-tight:var(--hp-type-heading-leading); --hp-lh-ui:var(--hp-type-ui-leading); --hp-lh-read:var(--hp-type-readable-leading);
  --hp-fw-regular:var(--hp-type-weight-regular); --hp-fw-medium:var(--hp-type-weight-medium); --hp-fw-bold:var(--hp-type-weight-bold); --hp-fw-black:var(--hp-type-weight-extrabold);

  --hp-s-1:4px; --hp-s-2:8px; --hp-s-3:12px; --hp-s-4:16px; --hp-s-5:20px;
  --hp-s-6:24px; --hp-s-8:32px; --hp-s-10:40px; --hp-s-12:48px; --hp-s-16:64px;

  --hp-r-xs:6px; --hp-r-sm:8px; --hp-r-md:12px; --hp-r-lg:16px; --hp-r-xl:20px; --hp-r-pill:999px;
  --hp-bw:1px;

  --hp-shadow-xs:0 1px 2px rgba(9,6,33,.05);
  --hp-shadow-sm:0 4px 24px rgba(9,6,33,.06);
  --hp-shadow-md:0 8px 32px rgba(9,6,33,.10);
  --hp-shadow-lg:0 24px 60px rgba(9,6,33,.16);
  --hp-ring:0 0 0 3px rgba(63,90,239,.25);

  --hp-t-fast:120ms; --hp-t-base:180ms; --hp-t-slow:260ms;
  --hp-ease:cubic-bezier(.2,.7,.3,1);

  --hp-z-dropdown:1000; --hp-z-sticky:1020; --hp-z-fixed:1030; --hp-z-backdrop:1040;
  --hp-z-modal:1050; --hp-z-popover:1060; --hp-z-toast:1070;

  --hp-container:1180px; --hp-container-narrow:860px;
  --hp-sidebar:264px; --hp-sidebar-collapsed:76px; --hp-topbar:64px;
  --hp-control-h:44px; --hp-control-h-sm:36px; --hp-control-h-lg:52px;
}

/* حالت تیره: بازتعریف همان متغیرها */
[data-theme="dark"]{
  --hp-brand:#6C82F5;
  --hp-brand-hover:#8298FF;
  --hp-brand-active:#5A70E6;
  --hp-brand-deep:#C3CCFF;
  --hp-brand-soft:#41477F;
  --hp-brand-tint:#1E2350;
  --hp-brand-wash:#161334;

  --hp-app-bg:#06040F;
  --hp-surface:#0F0B24;
  --hp-surface-2:#171232;
  --hp-surface-3:#1E1940;
  --hp-ink:#04030C;
  --hp-ink-soft:#120E2B;

  --hp-text:#ECEDF5;
  --hp-text-strong:#FFFFFF;
  --hp-muted:#A5A8BE;
  --hp-placeholder:#6D7090;
  --hp-on-brand:#FFFFFF;
  --hp-on-dark:#A5A8BE;

  --hp-line:#2A2550;
  --hp-line-strong:#3A3468;
  --hp-line-brand:#3A3F86;

  --hp-success:#2ED19C; --hp-success-bg:#10301F; --hp-success-line:#1D5A3E; --hp-success-text:#5FE0B6;
  --hp-danger:#FF6B6B;  --hp-danger-bg:#351520;  --hp-danger-line:#5E2436;  --hp-danger-text:#FF9A9A;
  --hp-warning:#F5B95C; --hp-warning-bg:#332414; --hp-warning-line:#5C4222; --hp-warning-text:#FFD08A;
  --hp-info:#6C82F5;    --hp-info-bg:#1A1C3F;    --hp-info-line:#343A75;    --hp-info-text:#A7B4FF;
  --hp-neutral:#A5A8BE; --hp-neutral-bg:#1C1A38; --hp-neutral-line:#2A2550; --hp-neutral-text:#C3C5D8;

  --hp-chart-grid:#2A2550;
  --hp-shadow-xs:0 1px 2px rgba(0,0,0,.4);
  --hp-shadow-sm:0 4px 24px rgba(0,0,0,.45);
  --hp-shadow-md:0 8px 32px rgba(0,0,0,.5);
  --hp-shadow-lg:0 24px 60px rgba(0,0,0,.6);
  --hp-ring:0 0 0 3px rgba(108,130,245,.35);
}

/* ---------- 3. پایه ---------- */
html.hp-root,body.hp-panel{font-family:var(--hp-font)}
body.hp-panel{
  margin:0;font-size:var(--hp-fs-base);line-height:var(--hp-lh-ui);
  color:var(--hp-text);background:var(--hp-app-bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
/* فونت دانا روی همه اجزای رابط، بدون دست زدن به فونت آیکون ها */
body.hp-panel,
body.hp-panel h1,body.hp-panel h2,body.hp-panel h3,body.hp-panel h4,body.hp-panel h5,body.hp-panel h6,
body.hp-panel p,body.hp-panel a,body.hp-panel span,body.hp-panel div,body.hp-panel li,body.hp-panel td,
body.hp-panel th,body.hp-panel label,body.hp-panel strong,body.hp-panel small,body.hp-panel legend,
body.hp-panel input,body.hp-panel select,body.hp-panel textarea,body.hp-panel button,
body.hp-panel .btn,body.hp-panel .table,body.hp-panel .form-control,body.hp-panel .badge,
body.hp-panel .swal-modal,body.hp-panel .swal-modal *,body.hp-panel .selectric,
body.hp-panel .selectric *,body.hp-panel .note-editor,body.hp-panel .dropdown-menu{
  font-family:var(--hp-font);
}
body.hp-panel [class^="ti-"],body.hp-panel [class*=" ti-"],
body.hp-panel [class^="fa-"],body.hp-panel [class*=" fa-"],
body.hp-panel .fa,body.hp-panel .note-icon{font-family:themify,FontAwesome,inherit}
body.hp-panel [class^="fa-"],body.hp-panel [class*=" fa-"],body.hp-panel .fa{font-family:FontAwesome}
body.hp-panel [class^="ti-"],body.hp-panel [class*=" ti-"]{font-family:themify}

.hp-panel *,.hp-panel *::before,.hp-panel *::after{box-sizing:border-box}
.hp-panel a{color:var(--hp-brand);text-decoration:none}
.hp-panel a:hover{color:var(--hp-brand-hover)}
.hp-panel button,.hp-panel input,.hp-panel select,.hp-panel textarea{font:inherit;color:inherit}
.hp-panel ::placeholder{color:var(--hp-placeholder)}
.hp-panel :focus-visible{outline:none;box-shadow:var(--hp-ring);border-radius:var(--hp-r-sm)}
@media (prefers-reduced-motion:reduce){.hp-panel *{transition:none!important;animation:none!important}}

.hp-h1{font-size:var(--hp-fs-h1);font-weight:var(--hp-fw-black);line-height:var(--hp-lh-tight);color:var(--hp-text-strong);margin:0}
.hp-h2{font-size:var(--hp-fs-h2);font-weight:var(--hp-fw-bold);line-height:var(--hp-type-leading-unit-1-6);color:var(--hp-text-strong);margin:0}
.hp-h3{font-size:var(--hp-fs-h3);font-weight:var(--hp-fw-bold);line-height:var(--hp-type-leading-unit-1-7);color:var(--hp-text);margin:0}
.hp-h4{font-size:var(--hp-fs-h4);font-weight:var(--hp-fw-bold);line-height:var(--hp-lh-ui);color:var(--hp-text);margin:0}
.hp-lead{font-size:var(--hp-fs-lg);color:var(--hp-muted);line-height:var(--hp-lh-read)}
.hp-muted{color:var(--hp-muted)}
.hp-sm{font-size:var(--hp-fs-sm)}
.hp-xs{font-size:var(--hp-fs-xs)}
.hp-label{display:block;font-size:var(--hp-fs-sm);font-weight:var(--hp-fw-bold);margin-bottom:var(--hp-s-2)}
.hp-num{direction:ltr;unicode-bidi:embed;font-variant-numeric:tabular-nums;display:inline-block}
.hp-up{color:var(--hp-success);font-weight:var(--hp-fw-bold)}
.hp-down{color:var(--hp-danger);font-weight:var(--hp-fw-bold)}

/* ---------- لایه بندی کمکی ---------- */
.hp-stack>*+*{margin-top:var(--hp-s-4)}
.hp-row{display:flex;flex-wrap:wrap;gap:var(--hp-s-4)}
.hp-grid{display:grid;gap:var(--hp-s-4)}
.hp-grid--2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.hp-grid--3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.hp-grid--4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.hp-between{display:flex;align-items:center;justify-content:space-between;gap:var(--hp-s-3);flex-wrap:wrap}
.hp-inline{display:flex;align-items:center;gap:var(--hp-s-2);flex-wrap:wrap}

/* ---------- 4. دکمه ---------- */
.hp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--hp-s-2);
  height:var(--hp-control-h);padding-inline:var(--hp-s-6);border-radius:var(--hp-r-sm);
  font-size:var(--hp-fs-base);font-weight:var(--hp-fw-bold);line-height:var(--hp-type-leading-unit-1);
  border:var(--hp-bw) solid transparent;cursor:pointer;user-select:none;
  transition:background var(--hp-t-base) var(--hp-ease),border-color var(--hp-t-base) var(--hp-ease),color var(--hp-t-base) var(--hp-ease),transform var(--hp-t-fast) var(--hp-ease);
  background:transparent;color:var(--hp-text);text-decoration:none;
}
.hp-btn:active{transform:translateY(1px)}
.hp-btn[disabled],.hp-btn.is-disabled{opacity:.5;pointer-events:none}
.hp-btn--primary{background:var(--hp-brand);color:var(--hp-on-brand)}
.hp-btn--primary:hover{background:var(--hp-brand-hover);color:var(--hp-on-brand)}
.hp-btn--secondary{background:var(--hp-surface);color:var(--hp-brand);border-color:var(--hp-brand)}
.hp-btn--secondary:hover{background:var(--hp-brand-wash);color:var(--hp-brand-hover)}
.hp-btn--ghost{background:transparent;color:var(--hp-muted);border-color:var(--hp-line)}
.hp-btn--ghost:hover{background:var(--hp-surface-2);color:var(--hp-text)}
.hp-btn--success{background:var(--hp-success);color:#fff}
.hp-btn--danger{background:var(--hp-danger);color:#fff}
.hp-btn--link{background:none;border:0;color:var(--hp-brand);padding-inline:0;height:auto}
.hp-btn--sm{height:var(--hp-control-h-sm);padding-inline:var(--hp-s-4);font-size:var(--hp-fs-sm)}
.hp-btn--lg{height:var(--hp-control-h-lg);padding-inline:var(--hp-s-8);font-size:var(--hp-fs-lg)}
.hp-btn--block{width:100%}
.hp-btn--icon{width:var(--hp-control-h);padding:0}
.hp-btn.is-loading{position:relative;color:transparent!important;pointer-events:none}
.hp-btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:hp-spin .7s linear infinite}
@keyframes hp-spin{to{transform:rotate(360deg)}}

/* ---------- فرم ---------- */
.hp-field{margin-bottom:var(--hp-s-4)}
.hp-input,.hp-select,.hp-textarea{
  width:100%;height:var(--hp-control-h);padding-inline:var(--hp-s-3);
  background:var(--hp-surface);color:var(--hp-text);
  border:var(--hp-bw) solid var(--hp-line);border-radius:var(--hp-r-sm);
  transition:border-color var(--hp-t-base) var(--hp-ease),box-shadow var(--hp-t-base) var(--hp-ease);
}
.hp-textarea{height:auto;min-height:110px;padding-block:var(--hp-s-3);line-height:var(--hp-lh-ui);resize:vertical}
.hp-input:hover,.hp-select:hover,.hp-textarea:hover{border-color:var(--hp-line-strong)}
.hp-input:focus,.hp-select:focus,.hp-textarea:focus{border-color:var(--hp-brand);box-shadow:var(--hp-ring);outline:none}
.hp-input[disabled],.hp-select[disabled]{background:var(--hp-surface-2);color:var(--hp-placeholder);cursor:not-allowed}
.hp-input.is-invalid{border-color:var(--hp-danger)}
.hp-input.is-invalid:focus{box-shadow:0 0 0 3px rgba(225,75,75,.22)}
.hp-help{display:block;font-size:var(--hp-fs-xs);color:var(--hp-muted);margin-top:var(--hp-s-2)}
.hp-error{display:block;font-size:var(--hp-fs-xs);color:var(--hp-danger-text);margin-top:var(--hp-s-2);font-weight:var(--hp-fw-bold)}
.hp-inputgroup{display:flex;align-items:stretch;border:var(--hp-bw) solid var(--hp-line);border-radius:var(--hp-r-sm);background:var(--hp-surface);overflow:hidden}
.hp-inputgroup:focus-within{border-color:var(--hp-brand);box-shadow:var(--hp-ring)}
.hp-inputgroup .hp-input{border:0;box-shadow:none;background:transparent}
.hp-affix{display:flex;align-items:center;padding-inline:var(--hp-s-3);background:var(--hp-surface-2);color:var(--hp-muted);font-size:var(--hp-fs-sm);font-weight:var(--hp-fw-bold);border-inline-start:var(--hp-bw) solid var(--hp-line);white-space:nowrap}
.hp-check{display:flex;align-items:center;gap:var(--hp-s-2);font-size:var(--hp-fs-sm);cursor:pointer}
.hp-check input{width:18px;height:18px;accent-color:var(--hp-brand)}
.hp-switch{position:relative;display:inline-flex;align-items:center;gap:var(--hp-s-2);cursor:pointer;font-size:var(--hp-fs-sm)}
.hp-switch input{position:absolute;opacity:0}
.hp-switch__track{width:44px;height:24px;border-radius:var(--hp-r-pill);background:var(--hp-line-strong);position:relative;transition:background var(--hp-t-base) var(--hp-ease);flex:none}
.hp-switch__track::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform var(--hp-t-base) var(--hp-ease)}
.hp-switch input:checked + .hp-switch__track{background:var(--hp-brand)}
.hp-switch input:checked + .hp-switch__track::after{transform:translateX(-20px)}
.hp-otp{display:flex;gap:var(--hp-s-2);direction:ltr}
.hp-otp input{width:48px;height:52px;text-align:center;font-size:var(--hp-type-size-18);font-weight:var(--hp-fw-bold);border:var(--hp-bw) solid var(--hp-line);border-radius:var(--hp-r-sm);background:var(--hp-surface)}
.hp-dropzone{border:2px dashed var(--hp-line-strong);border-radius:var(--hp-r-md);background:var(--hp-surface-2);padding:var(--hp-s-8);text-align:center;color:var(--hp-muted);cursor:pointer;transition:border-color var(--hp-t-base) var(--hp-ease),background var(--hp-t-base) var(--hp-ease)}
.hp-dropzone:hover{border-color:var(--hp-brand);background:var(--hp-brand-wash)}

/* ---------- بج، چیپ، آواتار ---------- */
.hp-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--hp-r-pill);font-size:var(--hp-fs-xs);font-weight:var(--hp-fw-bold);line-height:var(--hp-type-leading-unit-1-7);border:var(--hp-bw) solid transparent}
.hp-badge--brand{background:var(--hp-brand-tint);color:var(--hp-info-text);border-color:var(--hp-line-brand)}
.hp-badge--success{background:var(--hp-success-bg);color:var(--hp-success-text);border-color:var(--hp-success-line)}
.hp-badge--danger{background:var(--hp-danger-bg);color:var(--hp-danger-text);border-color:var(--hp-danger-line)}
.hp-badge--warning{background:var(--hp-warning-bg);color:var(--hp-warning-text);border-color:var(--hp-warning-line)}
.hp-badge--neutral{background:var(--hp-neutral-bg);color:var(--hp-neutral-text);border-color:var(--hp-neutral-line)}
.hp-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.hp-chip{display:inline-flex;align-items:center;gap:var(--hp-s-2);padding:6px 12px;border-radius:var(--hp-r-pill);background:var(--hp-surface);border:var(--hp-bw) solid var(--hp-line);font-size:var(--hp-fs-sm);cursor:pointer;color:var(--hp-text)}
.hp-chip.is-active{background:var(--hp-brand-tint);border-color:var(--hp-brand);color:var(--hp-info-text);font-weight:var(--hp-fw-bold)}
.hp-avatar{width:40px;height:40px;border-radius:50%;background:var(--hp-brand-tint);color:var(--hp-brand);display:inline-flex;align-items:center;justify-content:center;font-weight:var(--hp-fw-bold);font-size:var(--hp-fs-sm);flex:none}

/* ---------- هشدار ---------- */
.hp-alert{display:flex;gap:var(--hp-s-3);padding:var(--hp-s-4) var(--hp-s-5);border-radius:var(--hp-r-md);border:var(--hp-bw) solid;border-inline-start-width:4px;font-size:var(--hp-fs-base);line-height:var(--hp-lh-read)}
.hp-alert--info{background:var(--hp-info-bg);border-color:var(--hp-info-line);border-inline-start-color:var(--hp-info)}
.hp-alert--success{background:var(--hp-success-bg);border-color:var(--hp-success-line);border-inline-start-color:var(--hp-success)}
.hp-alert--warning{background:var(--hp-warning-bg);border-color:var(--hp-warning-line);border-inline-start-color:var(--hp-warning)}
.hp-alert--danger{background:var(--hp-danger-bg);border-color:var(--hp-danger-line);border-inline-start-color:var(--hp-danger)}
.hp-alert__title{font-weight:var(--hp-fw-bold);display:block;margin-bottom:var(--hp-s-1)}
.hp-alert__icon{flex:none;font-size:var(--hp-type-size-18);line-height:var(--hp-type-leading-unit-1-6)}

/* ---------- کارت ---------- */
.hp-card{background:var(--hp-surface);border:var(--hp-bw) solid var(--hp-line);border-radius:var(--hp-r-md);box-shadow:var(--hp-shadow-xs)}
.hp-card--raised{box-shadow:var(--hp-shadow-sm)}
.hp-card--hover{transition:box-shadow var(--hp-t-base) var(--hp-ease),transform var(--hp-t-base) var(--hp-ease)}
.hp-card--hover:hover{box-shadow:var(--hp-shadow-md);transform:translateY(-2px)}
.hp-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--hp-s-3);padding:var(--hp-s-4) var(--hp-s-5);border-bottom:var(--hp-bw) solid var(--hp-line)}
.hp-card__title{font-size:var(--hp-fs-h4);font-weight:var(--hp-fw-bold);color:var(--hp-text-strong);margin:0}
.hp-card__body{padding:var(--hp-s-5)}
.hp-card__foot{padding:var(--hp-s-4) var(--hp-s-5);border-top:var(--hp-bw) solid var(--hp-line);background:var(--hp-surface-2);border-radius:0 0 var(--hp-r-md) var(--hp-r-md)}

/* ---------- جدول ---------- */
.hp-table-wrap{border:var(--hp-bw) solid var(--hp-line);border-radius:var(--hp-r-md);overflow:hidden;background:var(--hp-surface)}
.hp-table-scroll{overflow-x:auto}
.hp-table{width:100%;border-collapse:collapse;font-size:var(--hp-fs-base);margin:0}
.hp-table th{background:var(--hp-brand-tint);color:var(--hp-text-strong);font-weight:var(--hp-fw-bold);text-align:right;padding:13px 14px;white-space:nowrap;font-size:var(--hp-fs-sm);border:0}
.hp-table td{padding:13px 14px;border-top:var(--hp-bw) solid var(--hp-line);vertical-align:middle;border-bottom:0;color:var(--hp-text)}
.hp-table tbody tr:nth-child(even){background:var(--hp-surface-2)}
.hp-table tbody tr:hover{background:var(--hp-brand-wash)}
.hp-table--plain th{background:var(--hp-surface-2);color:var(--hp-muted)}
.hp-td-num{direction:ltr;unicode-bidi:embed;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- تب، سگمنت، ناوبری ---------- */
.hp-tabs{display:flex;gap:var(--hp-s-1);border-bottom:var(--hp-bw) solid var(--hp-line);overflow-x:auto}
.hp-tab{padding:var(--hp-s-3) var(--hp-s-4);font-size:var(--hp-fs-base);font-weight:var(--hp-fw-bold);color:var(--hp-muted);border:0;background:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.hp-tab:hover{color:var(--hp-text)}
.hp-tab.is-active{color:var(--hp-brand);border-bottom-color:var(--hp-brand)}
.hp-segment{display:inline-flex;padding:4px;background:var(--hp-surface-2);border:var(--hp-bw) solid var(--hp-line);border-radius:var(--hp-r-sm)}
.hp-segment button{border:0;background:none;padding:8px 20px;border-radius:var(--hp-r-xs);font-weight:var(--hp-fw-bold);font-size:var(--hp-fs-sm);color:var(--hp-muted);cursor:pointer}
.hp-segment button.is-buy{color:var(--hp-success-text)}
.hp-segment button.is-active{background:var(--hp-surface);color:var(--hp-text);box-shadow:var(--hp-shadow-xs)}
.hp-segment button.is-active.is-buy{background:var(--hp-success);color:#fff}
.hp-segment button.is-active.is-sell{background:var(--hp-danger);color:#fff}
.hp-breadcrumb{display:flex;gap:var(--hp-s-2);font-size:var(--hp-fs-sm);color:var(--hp-muted);flex-wrap:wrap;margin:0;padding:0;list-style:none}
.hp-breadcrumb span::after,.hp-breadcrumb a::after{content:"/";margin-inline-start:var(--hp-s-2);color:var(--hp-line-strong)}
.hp-breadcrumb span:last-child::after,.hp-breadcrumb a:last-child::after{content:""}
.hp-pagination{display:flex;gap:var(--hp-s-2);align-items:center}
.hp-page{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:var(--hp-bw) solid var(--hp-line);border-radius:var(--hp-r-sm);background:var(--hp-surface);font-size:var(--hp-fs-sm);cursor:pointer;color:var(--hp-text)}
.hp-page.is-active{background:var(--hp-brand);border-color:var(--hp-brand);color:#fff;font-weight:var(--hp-fw-bold)}
.hp-page.is-disabled{opacity:.45;pointer-events:none}

/* ---------- بازخورد ---------- */
.hp-modal{max-width:480px;background:var(--hp-surface);border:var(--hp-bw) solid var(--hp-line);border-radius:var(--hp-r-lg);box-shadow:var(--hp-shadow-lg);overflow:hidden}
.hp-modal__head{padding:var(--hp-s-5);border-bottom:var(--hp-bw) solid var(--hp-line);display:flex;justify-content:space-between;align-items:center}
.hp-modal__body{padding:var(--hp-s-5)}
.hp-modal__foot{padding:var(--hp-s-4) var(--hp-s-5);background:var(--hp-surface-2);display:flex;gap:var(--hp-s-3);justify-content:flex-start}
.hp-toast{display:flex;align-items:flex-start;gap:var(--hp-s-3);max-width:380px;padding:var(--hp-s-4);background:var(--hp-surface);border:var(--hp-bw) solid var(--hp-line);border-inline-start:4px solid var(--hp-brand);border-radius:var(--hp-r-md);box-shadow:var(--hp-shadow-md)}
.hp-toast--success{border-inline-start-color:var(--hp-success)}
.hp-toast--danger{border-inline-start-color:var(--hp-danger)}
.hp-skeleton{background:linear-gradient(90deg,var(--hp-surface-2) 25%,var(--hp-line) 37%,var(--hp-surface-2) 63%);background-size:400% 100%;animation:hp-shimmer 1.4s ease infinite;border-radius:var(--hp-r-xs);height:14px}
@keyframes hp-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.hp-progress{height:8px;background:var(--hp-surface-2);border-radius:var(--hp-r-pill);overflow:hidden}
.hp-progress__bar{height:100%;background:var(--hp-brand);border-radius:var(--hp-r-pill)}
.hp-empty{text-align:center;padding:var(--hp-s-12) var(--hp-s-5);color:var(--hp-muted)}
.hp-empty__icon{width:64px;height:64px;margin-inline:auto;margin-bottom:var(--hp-s-4);border-radius:var(--hp-r-lg);background:var(--hp-brand-tint);display:flex;align-items:center;justify-content:center;color:var(--hp-brand);font-size:var(--hp-type-size-28)}
.hp-tooltip{display:inline-block;background:var(--hp-ink-soft);color:#fff;font-size:var(--hp-fs-xs);padding:6px 10px;border-radius:var(--hp-r-xs)}

/* ---------- مرحله و زمان بند ---------- */
.hp-steps{display:flex;gap:var(--hp-s-2)}
.hp-step{flex:1;text-align:center;font-size:var(--hp-fs-sm);color:var(--hp-muted)}
.hp-step__dot{width:32px;height:32px;border-radius:50%;margin-inline:auto;margin-bottom:var(--hp-s-2);display:flex;align-items:center;justify-content:center;background:var(--hp-surface-2);border:var(--hp-bw) solid var(--hp-line);font-weight:var(--hp-fw-bold)}
.hp-step.is-done .hp-step__dot{background:var(--hp-success);border-color:var(--hp-success);color:#fff}
.hp-step.is-active .hp-step__dot{background:var(--hp-brand);border-color:var(--hp-brand);color:#fff}
.hp-step.is-active{color:var(--hp-text);font-weight:var(--hp-fw-bold)}
.hp-timeline{position:relative;padding-inline-start:var(--hp-s-6)}
.hp-timeline::before{content:"";position:absolute;inset-inline-start:7px;top:6px;bottom:6px;width:2px;background:var(--hp-line)}
.hp-timeline__item{position:relative;padding-bottom:var(--hp-s-5)}
.hp-timeline__item::before{content:"";position:absolute;inset-inline-start:calc(-1 * var(--hp-s-6) + 2px);top:6px;width:12px;height:12px;border-radius:50%;background:var(--hp-surface);border:2px solid var(--hp-line-strong)}
.hp-timeline__item.is-done::before{background:var(--hp-success);border-color:var(--hp-success)}
.hp-timeline__item.is-current::before{background:var(--hp-brand);border-color:var(--hp-brand)}

/* ---------- ابزار ---------- */
.hp-hidden{display:none!important}
.hp-nowrap{white-space:nowrap}
.hp-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-divider{height:1px;background:var(--hp-line);border:0;margin-block:var(--hp-s-5)}
.hp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 5. پنجره هشدار sweetalert ---------- */
/* نسخه 1 است و کلاس های sweet-alert دارد. بدون این بخش، در حالت تیره سفید می ماند. */
.sweet-overlay{background-color:rgba(9,6,33,.55)!important}
[data-theme="dark"] .sweet-overlay{background-color:rgba(0,0,0,.7)!important}
.sweet-alert{
  background-color:var(--hp-surface)!important;
  border:var(--hp-bw) solid var(--hp-line);
  border-radius:var(--hp-r-lg)!important;
  box-shadow:var(--hp-shadow-lg);
  font-family:var(--hp-font);padding:var(--hp-s-6)!important;direction:rtl;
}
.sweet-alert h2{color:var(--hp-text-strong)!important;font-size:var(--hp-fs-h3);font-weight:var(--hp-fw-bold);margin:var(--hp-s-3) 0}
.sweet-alert p{color:var(--hp-muted)!important;font-size:var(--hp-fs-base);line-height:var(--hp-lh-ui)}
.sweet-alert button{
  border-radius:var(--hp-r-sm)!important;font-family:var(--hp-font);
  font-size:var(--hp-fs-base)!important;font-weight:var(--hp-fw-bold)!important;
  padding:0 var(--hp-s-6)!important;height:var(--hp-control-h);box-shadow:none!important;
}
.sweet-alert button.confirm{background-color:var(--hp-brand)!important;color:var(--hp-on-brand)!important}
.sweet-alert button.confirm:hover{background-color:var(--hp-brand-hover)!important}
.sweet-alert button.cancel{background-color:var(--hp-surface-2)!important;color:var(--hp-text)!important;border:var(--hp-bw) solid var(--hp-line)}
.sweet-alert .sa-icon.sa-success{border-color:var(--hp-success)!important}
.sweet-alert .sa-icon.sa-success .sa-line{background-color:var(--hp-success)!important}
.sweet-alert .sa-icon.sa-success .sa-fix,
.sweet-alert .sa-icon.sa-success::before,
.sweet-alert .sa-icon.sa-success::after,
.sweet-alert .sa-icon.sa-success .sa-placeholder{background-color:var(--hp-surface)!important;border-color:transparent}
.sweet-alert .sa-icon.sa-warning{border-color:var(--hp-warning)!important;color:var(--hp-warning)!important}
.sweet-alert .sa-icon.sa-warning .sa-body,.sweet-alert .sa-icon.sa-warning .sa-dot{background-color:var(--hp-warning)!important}
.sweet-alert .sa-icon.sa-error{border-color:var(--hp-danger)!important}
.sweet-alert .sa-icon.sa-error .sa-line{background-color:var(--hp-danger)!important}
.sweet-alert .sa-icon.sa-info{border-color:var(--hp-info)!important;color:var(--hp-info)!important}
.sweet-alert .sa-icon.sa-info::before,.sweet-alert .sa-icon.sa-info::after{background-color:var(--hp-info)!important}
/* نام گذاری نسخه دوم، اگر روزی جایگزین شد */
.swal-overlay{background-color:rgba(9,6,33,.55)!important}
.swal-modal{background:var(--hp-surface)!important;border-radius:var(--hp-r-lg)!important;font-family:var(--hp-font)}
.swal-title{color:var(--hp-text-strong)!important}
.swal-text{color:var(--hp-muted)!important}
.swal-button{background:var(--hp-brand)!important;border-radius:var(--hp-r-sm)!important;font-family:var(--hp-font)}

/* ---------- 6. توست سبک، جایگزین پنجره های مزاحم ---------- */
.hp-toaster{position:fixed;inset-block-start:auto;bottom:var(--hp-s-5);inset-inline-start:var(--hp-s-5);
  z-index:var(--hp-z-toast);display:flex;flex-direction:column;gap:var(--hp-s-2)}
.hp-toaster .hp-toast{animation:hp-toast-in var(--hp-t-slow) var(--hp-ease)}
@keyframes hp-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ========================================================================== 
   v10 — لینک ها و breadcrumb
   ========================================================================== */
/* Bootstrap قدیمی روی hover به لینک ها underline می دهد؛ در کل پنل حذف شود. */
body.hp-panel a:hover,
body.hp-panel a:focus,
body.hp-panel a:active,
body.hp-auth a:hover,
body.hp-auth a:focus,
body.hp-auth a:active{
  text-decoration:none!important;
}

/* قالب قدیمی روی li های breadcrumb هاله سفید داشت. */
body.hp-panel .breadcrumb li,
body.hp-panel .breadcrumbs li,
body.hp-panel .breadcrumb li a,
body.hp-panel .breadcrumbs li a,
body.hp-panel .breadcrumb li span,
body.hp-panel .breadcrumbs li span{
  text-shadow:none!important;
  filter:none!important;
}

/* ========================================================================== 
   v13 — دیالوگ های تایید و خوانایی متن دکمه ها
   SweetAlert موجود در پروژه نسخه 2 است، اما فایل sweetalert.min.css قدیمی با کلاس های
   نسخه 1 بسته بندی شده است. این لایه، هر دو نام گذاری را کامل و مستقل استایل می کند تا
   متن هیچ دکمه ای در پنل کاربر/مدیریت/ورود محو نشود.
   ========================================================================== */
.swal-overlay{
  position:fixed!important;inset:0!important;z-index:20000!important;
  background:rgba(9,6,33,.58)!important;
}
[data-theme="dark"] .swal-overlay{background:rgba(0,0,0,.72)!important}
.swal-modal{
  width:min(460px,calc(100vw - 32px))!important;
  max-width:calc(100vw - 32px)!important;
  margin:0 auto!important;padding:var(--hp-s-6)!important;
  background:var(--hp-surface)!important;color:var(--hp-text)!important;
  border:var(--hp-bw) solid var(--hp-line)!important;
  border-radius:var(--hp-r-lg)!important;box-shadow:var(--hp-shadow-lg)!important;
  direction:rtl!important;text-align:center!important;font-family:var(--hp-font)!important;
}
.swal-modal *{box-sizing:border-box}
.swal-title{
  margin:0 0 var(--hp-s-3)!important;padding:0!important;
  color:var(--hp-text-strong)!important;font-family:var(--hp-font)!important;
  font-size:var(--hp-fs-h3)!important;font-weight:var(--hp-fw-bold)!important;
  line-height:var(--hp-lh-ui)!important;text-align:center!important;
}
.swal-text{
  display:block!important;max-width:none!important;margin:0 auto!important;padding:0!important;
  color:var(--hp-muted)!important;font-family:var(--hp-font)!important;
  font-size:var(--hp-fs-base)!important;line-height:var(--hp-type-leading-unit-2)!important;text-align:center!important;
}
.swal-footer{
  display:flex!important;align-items:center!important;justify-content:center!important;
  flex-wrap:wrap!important;gap:var(--hp-s-3)!important;
  margin:var(--hp-s-5) 0 0!important;padding:0!important;
  direction:rtl!important;text-align:center!important;
}
.swal-button-container{display:inline-flex!important;margin:0!important;padding:0!important}
.swal-button{
  -webkit-appearance:none!important;appearance:none!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-width:88px!important;min-height:40px!important;height:40px!important;
  margin:0!important;padding:0 20px!important;
  border:var(--hp-bw) solid var(--hp-brand)!important;border-radius:var(--hp-r-sm)!important;
  background:var(--hp-brand)!important;color:#fff!important;
  font-family:var(--hp-font)!important;font-size:var(--hp-fs-base)!important;
  font-weight:var(--hp-fw-bold)!important;line-height:var(--hp-type-leading-unit-1-2)!important;
  text-align:center!important;text-indent:0!important;white-space:nowrap!important;
  opacity:1!important;visibility:visible!important;overflow:visible!important;
  box-shadow:none!important;text-shadow:none!important;cursor:pointer!important;
}
.swal-button:hover,.swal-button:active{
  background:var(--hp-brand-hover)!important;border-color:var(--hp-brand-hover)!important;color:#fff!important;
}
.swal-button:focus{outline:none!important;box-shadow:var(--hp-ring)!important;color:#fff!important}
.swal-button--cancel{
  background:var(--hp-surface-2)!important;border-color:var(--hp-line)!important;color:var(--hp-text)!important;
}
.swal-button--cancel:hover,.swal-button--cancel:active,.swal-button--cancel:focus{
  background:var(--hp-surface-3,var(--hp-surface-2))!important;border-color:var(--hp-line-strong)!important;color:var(--hp-text-strong)!important;
}
.swal-button--danger{
  background:var(--hp-danger)!important;border-color:var(--hp-danger)!important;color:#fff!important;
}
.swal-button--danger:hover,.swal-button--danger:active{
  filter:brightness(.94);color:#fff!important;
}
/* اکشن های سفارشی SweetAlert مثل catch در تایید مدارک نیز باید ظاهر دکمه اصلی را بگیرند. */
.swal-button:not(.swal-button--cancel):not(.swal-button--danger){color:#fff!important}

/* SweetAlert قدیمی: تثبیت متن دکمه ها برای صفحه هایی که هنوز از کلاس sweet-alert استفاده می کنند. */
.sweet-alert button{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  min-width:88px!important;min-height:40px!important;height:40px!important;
  padding:0 20px!important;color:#fff!important;line-height:var(--hp-type-leading-unit-1-2)!important;
  text-align:center!important;text-indent:0!important;white-space:nowrap!important;
  opacity:1!important;visibility:visible!important;text-shadow:none!important;
}
.sweet-alert button.confirm{background:var(--hp-brand)!important;border-color:var(--hp-brand)!important;color:#fff!important}
.sweet-alert button.cancel{background:var(--hp-surface-2)!important;border-color:var(--hp-line)!important;color:var(--hp-text)!important}

/* حفاظت تکمیلی برای دکمه های مودال Bootstrap در همه بخش های پنل. */
.hp-panel .modal-footer .btn-primary,
.hp-panel .modal-footer .btn-success,
.hp-panel .modal-footer .btn-danger{color:#fff!important;text-shadow:none!important}
.hp-panel .modal-footer .btn-secondary,
.hp-panel .modal-footer .btn-default{color:var(--hp-text)!important;text-shadow:none!important}


/* ==========================================================================
   v14 — اکشن تایید/رد حساب بانکی مدیریت
   فرم واقعی POST + دکمه استاندارد برای اینکه اکشن حتی با اختلال handler قدیمی
   قابل اتکا باشد و وضعیت درحال انجام برای کاربر مشخص بماند.
   ========================================================================== */
.hp-card-actions{
  display:flex;
  align-items:center;
  gap:var(--hp-s-2);
  flex-wrap:wrap;
}
.hp-card-action-form{
  display:inline-flex;
  margin:0;
  padding:0;
}
.hp-card-action-btn{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  cursor:pointer;
  font-family:var(--hp-font);
  line-height:var(--hp-type-leading-unit-1-5);
}
.hp-card-action-btn:disabled,
.hp-card-action-btn[aria-busy="true"]{
  opacity:.7;
  cursor:wait;
  pointer-events:none;
}

/* v24 - Two-factor authentication manager */
.hp-2fa-manager{direction:rtl;text-align:right}
.hp-2fa-manager .hp-2fa-panel{border:1px solid var(--hp-border, #dfe5ef);border-radius:16px;padding:18px;background:var(--hp-surface, #fff)}
.hp-2fa-manager .hp-2fa-setup,.hp-2fa-manager .hp-2fa-enabled-actions,.hp-2fa-manager .hp-2fa-recovery-box{display:none}
.hp-2fa-qr{display:flex;align-items:center;justify-content:center;min-height:210px;margin:14px 0}
.hp-2fa-qr img,.hp-2fa-qr canvas{background:#fff;padding:10px;border-radius:12px;max-width:210px;height:auto!important}
.hp-2fa-secret{display:inline-block;direction:ltr;unicode-bidi:isolate;font-family:monospace;letter-spacing:.08em;word-break:break-all;padding:8px 10px;border:1px dashed var(--hp-border, #cfd6e4);border-radius:10px}
.hp-recovery-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.hp-recovery-code{direction:ltr;text-align:center;padding:8px;border:1px solid var(--hp-border, #dfe5ef);border-radius:9px;background:rgba(90,105,140,.08);font-size:var(--hp-type-size-13)}
.hp-2fa-manager input[type="text"],.hp-2fa-manager input[type="password"]{font-family:inherit}
.hp-2fa-manager .hp-code-input{direction:ltr;text-align:center;font-variant-numeric:tabular-nums}
@media(max-width:575px){.hp-recovery-codes{grid-template-columns:1fr}}

/* Secure same-page image preview */
.hp-image-preview{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(9,13,25,.78);backdrop-filter:blur(5px)}
.hp-image-preview.is-open{display:flex}
.hp-image-preview__dialog{position:relative;width:min(1100px,96vw);max-height:92vh;overflow:auto;border-radius:18px;background:var(--hp-surface,#fff);box-shadow:0 24px 80px rgba(0,0,0,.35);padding:18px}
.hp-image-preview__title{text-align:center;font-weight:var(--hp-type-weight-bold);margin:2px 44px 14px}
.hp-image-preview__close{position:absolute;top:10px;left:12px;width:36px;height:36px;border:0;border-radius:50%;font-size:var(--hp-type-size-28);line-height:var(--hp-type-leading-px-32);cursor:pointer;background:rgba(127,127,127,.12);color:inherit}
.hp-image-preview__loading{text-align:center;padding:60px 20px;color:var(--hp-muted,#7b8190)}
.hp-image-preview__image{display:none;width:auto;max-width:100%;max-height:78vh;margin:0 auto;border-radius:12px;object-fit:contain}
.hp-image-preview-open{overflow:hidden}
[data-hp-image-preview]{cursor:zoom-in}

/* v56: polished close button for same-page image preview */
.hp-image-preview__close{
  position:absolute!important;
  top:12px!important;
  left:12px!important;
  z-index:3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:42px!important;
  height:42px!important;
  padding:0!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:12px!important;
  background:#202638!important;
  color:#fff!important;
  box-shadow:0 8px 22px rgba(0,0,0,.22)!important;
  font-family:var(--hp-type-family);
  font-size:var(--hp-type-size-28)!important;
  font-weight:var(--hp-type-weight-regular)!important;
  line-height:var(--hp-type-leading-unit-1)!important;
  text-align:center!important;
  text-indent:0!important;
  opacity:1!important;
  cursor:pointer!important;
  transition:transform .16s ease,background .16s ease,box-shadow .16s ease!important;
}
.hp-image-preview__close:hover{
  background:#111625!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.28)!important;
}
.hp-image-preview__close:active{transform:translateY(0) scale(.96)!important}
.hp-image-preview__close:focus,
.hp-image-preview__close:focus-visible{
  outline:0!important;
  box-shadow:0 0 0 4px rgba(63,90,239,.25),0 8px 22px rgba(0,0,0,.22)!important;
}
@media(max-width:575px){
  .hp-image-preview{padding:12px!important}
  .hp-image-preview__dialog{padding:14px!important;border-radius:14px!important}
  .hp-image-preview__title{margin:4px 48px 14px!important;font-size:var(--hp-type-size-14)!important}
  .hp-image-preview__close{top:9px!important;left:9px!important;width:38px!important;height:38px!important;border-radius:10px!important;font-size:var(--hp-type-size-28)!important}
}

/* v135: clean legacy SweetAlert success icon; eliminate animated masking artifacts.
   Scoped to admin dark mode, other alerts and light mode remain unchanged. */
html[data-theme="dark"] body.hp-admin-panel .sweet-alert .sa-icon.sa-success {
  width:76px!important;height:76px!important;
  border:3px solid var(--hp-success,#34b87a)!important;
  border-radius:50%!important;
  background:rgba(52,184,122,.10)!important;
  box-sizing:border-box!important;
  margin:16px auto 20px!important;
  animation:none!important;
}
html[data-theme="dark"] body.hp-admin-panel .sweet-alert .sa-icon.sa-success .sa-line,
html[data-theme="dark"] body.hp-admin-panel .sweet-alert .sa-icon.sa-success .sa-fix,
html[data-theme="dark"] body.hp-admin-panel .sweet-alert .sa-icon.sa-success .sa-placeholder,
html[data-theme="dark"] body.hp-admin-panel .sweet-alert .sa-icon.sa-success::after {
  display:none!important;animation:none!important;
}
html[data-theme="dark"] body.hp-admin-panel .sweet-alert .sa-icon.sa-success::before {
  content:""!important;
  display:block!important;
  position:absolute!important;
  width:35px!important;height:19px!important;
  left:19px!important;top:20px!important;
  background:transparent!important;
  border:solid var(--hp-success,#34b87a)!important;
  border-width:0 0 5px 5px!important;
  border-radius:0!important;
  transform:rotate(-45deg)!important;
  transform-origin:center!important;
  animation:none!important;
}