/* ============================================================================
   weesa-next — پوستهٔ ناحیهٔ کاربری، پیاده‌سازی کانسپت.

   جایگزین weesa-skin.css است، نه افزوده بر آن. هیچ‌کدام از دو فایل نباید هم‌زمان
   بار شوند: توکن‌ها هم‌نام‌اند و مقادیرشان متضاد است.

   سه تفاوت بنیادی با پوستهٔ قبلی، که بقیهٔ فایل از آن‌ها نتیجه می‌شود:

   ۱. سایه‌ای در کار نیست. کانسپت در کل طراحی چهار بار سایه دارد و هر بار
      rgba(11,13,26,.05). کارِ جداسازی سطح‌ها را خط موییِ ۱px می‌کند. پوستهٔ قبلی
      سه لایه سایه و یک --sh-brand رنگی داشت؛ هیچ‌کدام اینجا نیست.

   ۲. شعاع‌ها تقریباً نصف شده‌اند: ۶px برای کنترل و ۸px برای کارت، در برابر
      ۱۰/۱۴/۱۸/۲۴ قبلی. بیشترین سهم را در «حس متفاوت» همین دارد.

   ۳. رنگِ برند مرکب است نه فیروزه‌ای. #0b0d1a برای هر چیزِ کنش‌پذیر، و رنگ فقط
      برای وضعیت به کار می‌رود.

   اعداد شمارش‌شده از کانسپت در concept/tokens.md هستند؛ مقداری که یک‌بار آمده
   تصمیم نبوده و اینجا نیامده.
   ============================================================================ */

/* ---------------------------------------------------------------- ۱. فونت --
   Vazirmatn نسخهٔ FD — «ارقام فارسی». اعداد فارسی از خودِ فونت می‌آیند، نه از
   جاوااسکریپتی که متن صفحه را بگردد و رقم‌ها را جایگزین کند.

   چرا این‌طور: مبلغ و تاریخ و شمارهٔ فاکتور از WHMCS با رقم لاتین می‌رسند. تبدیل
   سمت کلاینت یعنی هر صفحه یک بار پیمایش DOM، و هر چیزی که بعداً با ajax بیاید
   جا می‌ماند. با FD، رقم لاتینی که مرورگر می‌گیرد با شکل فارسی کشیده می‌شود و
   مقدارِ زیرین دست‌نخورده می‌ماند — انتخاب و کپی کاربر هنوز عدد واقعی است.

   قالب فعلی هم دقیقاً همین کار را می‌کند؛ فایل‌هایش «fanum» نام دارند.

   جایی که رقم باید لاتین بماند — دامنه، IP، کد پیگیری — کلاس wz-mono می‌گیرد و
   با JetBrains Mono کشیده می‌شود. همان تفکیکی که کانسپت دارد.

   سه وزن، چون کانسپت فقط از ۴۰۰ و ۵۰۰ و ۶۰۰ استفاده می‌کند و هیچ ۷۰۰ای ندارد.
   نسخهٔ متغیر این فونت ارقام لاتین دارد، پس به کار نمی‌آید.

   توجه: css/vahabonline.css در پوستهٔ قبلی خانواده‌ای به نام 'Vazirmatn' تعریف
   می‌کند ولی فایل‌های IRANYekan را بار می‌کند. اسم یکی است، شکل حروف نیست. اینجا
   نام دیگری گرفته تا اگر هر دو فایل جایی کنار هم افتادند، یکی دیگری را ندزدد.  */
@font-face{
  font-family:'Vazirmatn FD';
  src:url('../fonts/vazirmatn/Vazirmatn-FD-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Vazirmatn FD';
  src:url('../fonts/vazirmatn/Vazirmatn-FD-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Vazirmatn FD';
  src:url('../fonts/vazirmatn/Vazirmatn-FD-SemiBold.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
/* فقط زیرمجموعهٔ لاتین: این فونت جایی جز شناسه، کد پیگیری و عدد لاتین نمی‌رود. */
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/jetbrains-mono/JetBrainsMono-latin.woff2') format('woff2');
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* -------------------------------------------------------------- ۲. توکن‌ها -- */
:root{
  /* مرکب و متن */
  --ink:#0b0d1a;            /* برند: دکمهٔ اصلی، نشان، تب فعال */
  --ink-hover:#2a2e48;
  --text:#0f1330;
  --muted:#5d6283;          /* پرکاربردترین رنگ کل طراحی */
  --muted-2:#6b7090;
  --faint:#8a8fad;

  /* سطح و خط */
  --bg:#f7f7f9;
  --surface:#ffffff;
  --surface-2:#fafafb;
  --line:#e9eaef;           /* خط کارت و جدول */
  --line-strong:#e2e3ea;    /* خط ورودی و دکمهٔ ثانویه */
  --line-soft:#f0f1f4;      /* جداکنندهٔ داخلی، زمینهٔ برچسب */

  /* تأکید */
  --link:#2b4de0;
  --link-hover:#1f3bb8;
  --lav:#b7b9f7;            /* فقط روی زمینهٔ تیره */
  --night:#0a0e27;          /* پنل تیرهٔ صفحهٔ ورود */
  --avatar:#dcdcf9;
  --ring:#c9cde3;

  /* وضعیت — جفتِ متن/زمینه، همان‌طور که کانسپت به کار می‌برد */
  --ok:#0f7a55;    --ok-bg:#e3f5ec;
  --warn:#9a5b00;  --warn-bg:#fff1d6;
  --bad:#b3261e;   --bad-bg:#fdeceb;
  --neutral:#5d6283; --neutral-bg:#f0f1f4;
  --info:#2b4de0;  --info-bg:#f2f3f6;
  /* هشدار سراسری بالای صفحه، تنها جایی که کهربایی پررنگ‌تر می‌شود */
  --notice-bg:#fff8e8; --notice-line:#f5dfa6; --notice-ic:#b26b00;

  /* شعاع */
  --r-xs:3px; --r-sm:5px; --r:6px; --r-lg:8px; --r-pill:99px;

  /* تنها سایهٔ طراحی */
  --sh:0 1px 2px rgba(11,13,26,.05);

  /* چیدمان */
  --header-h:56px;
  --tabs-h:36px;
  --page-max:1480px;
  --page-x:28px;

  --ease:cubic-bezier(.22,.7,.3,1);

  --font:'Vazirmatn FD','Vazirmatn',Tahoma,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------------------------------------------------------------- ۳. پایه -- */
.weesa-next,
.weesa-next body{background:var(--bg);}

body.weesa-next{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:13px;              /* اندازهٔ پایهٔ رابط در کانسپت */
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.weesa-next *{box-sizing:border-box;}

/*
   این بلوک داخل :where() است و آن عمدی است.

   بدون آن، `.weesa-next a` وزن (۰،۱،۱) دارد و `.wz-btn` وزن (۰،۱،۰) — یعنی قاعدهٔ
   پایه بر کامپوننت غالب می‌شود. نتیجه‌اش در مرورگر این بود: هر دکمهٔ اصلی که <a>
   یا <button> بود متن تیره روی زمینهٔ تیره داشت و عملاً نامرئی بود
   (rgb(15,19,48) روی rgb(11,13,26))، و تیتر پنل تیرهٔ صفحهٔ ورود هم همین‌طور.

   :where() وزن را صفر می‌کند، پس هر کلاسِ کامپوننت بر پایه غالب می‌شود — که همان
   ترتیبی است که باید باشد. این را با دیدن صفحه در مرورگر پیدا کردم، نه با خواندن
   HTML؛ با خواندن مارک‌آپ اصلاً دیده نمی‌شد.
*/
:where(.weesa-next) a{color:var(--link);text-decoration:none;}
:where(.weesa-next) a:hover{color:var(--link-hover);text-decoration:none;}

:where(.weesa-next) :is(h1,h2,h3,h4){
  margin:0;
  font-weight:600;
  line-height:1.6;
  letter-spacing:-.2px;
  color:var(--text);
}
:where(.weesa-next) h1{font-size:20px;}
:where(.weesa-next) h2{font-size:15px;}
:where(.weesa-next) h3{font-size:14px;}
:where(.weesa-next) p{margin:0;}

/* هیچ وزن ۷۰۰ای در کانسپت نیست؛ <strong> به ۶۰۰ می‌رود نه bold مرورگر. */
:where(.weesa-next) :is(strong,b){font-weight:600;}

/* color:inherit عمداً اینجا نیست: روی <button> باعث می‌شد دکمه رنگ متنِ والد را
   بگیرد و رنگ خودش را از دست بدهد. */
:where(.weesa-next) :is(input,textarea,select,button){
  font-family:inherit;font-size:inherit;
}

/*
   حلقهٔ فوکوس فقط برای صفحه‌کلید.

   theme.css به هر a و button در :focus یک outline آبیِ ۲ پیکسلی می‌دهد و به .btn
   یک box-shadow. :focus بعد از کلیک با موس هم برقرار می‌ماند، پس هر دکمه یا لینکی
   که کلیک می‌شد تا کلیکِ بعدی قاب آبی داشت. :focus-visible همان جایی است که
   مرورگر خودش تشخیص می‌دهد حلقه لازم است (Tab)، پس آن یکی دست‌نخورده می‌ماند.
   فیلدهای فرم اینجا نیستند: آن‌جا فوکوس نشان می‌دهد کجا تایپ می‌شود.
*/
:where(.weesa-next) :is(a,button,summary,[role="button"],.btn):focus:not(:focus-visible){
  outline:0;box-shadow:none;
}

/* بازخوردِ کلیک: فقط تا وقتی دکمه پایین است. دکمه‌ها کمی کوچک می‌شوند و بقیه
   (لینک، کاشی، ردیف) کمی کم‌رنگ — scale روی کارتِ تمام‌عرض جابه‌جاییِ چندپیکسلیِ
   لبه‌ها می‌شد، و روی دکمه‌هایی مثل .wz-pw__eye که با transform وسط‌چین شده‌اند
   همان transform را پاک می‌کرد. */
:where(.weesa-next) :is(.btn,.wz-btn):not(:disabled):active{transform:scale(.97);}
:where(.weesa-next) :is(a,button,summary,[role="button"]):not(.btn):not(.wz-btn):not(:disabled):active{opacity:.7;}
@media (prefers-reduced-motion:reduce){
  :where(.weesa-next) :is(.btn,.wz-btn):active{transform:none;}
}

.weesa-next ::placeholder{color:var(--faint);opacity:1;}

/* عدد و شناسهٔ لاتین. متن فارسی هرگز این کلاس را نمی‌گیرد. */
.wz-mono{font-family:var(--mono);font-variant-numeric:tabular-nums;}
/* ردیف‌هایی که باید چپ‌به‌راست خوانده شوند — دامنه، ایمیل، IP، اسلاگ. */
.wz-ltr{direction:ltr;text-align:left;unicode-bidi:isolate;}

/* -------------------------------------------------------------- ۴. آیکون -- */
/* اندازه از font-size والد می‌آید، رنگ از currentColor — مثل یک حرف رفتار می‌کند. */
.wz-i{
  width:1em;height:1em;
  display:inline-block;
  vertical-align:-.125em;
  flex-shrink:0;
  fill:none;
  stroke-width:2;
}
.wz-i--16{font-size:16px;}
.wz-i--15{font-size:15px;}
.wz-i--20{font-size:20px;}

/* ------------------------------------------------------- ۵. پوستهٔ برنامه -- */
/* دو هالهٔ محو پشت همه‌چیز. pointer-events:none چون صرفاً تزئین است. */
.wz-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
.wz-orbs::before,.wz-orbs::after{
  content:'';position:absolute;border-radius:50%;
}
.wz-orbs::before{
  top:-220px;inset-inline-end:-120px;width:620px;height:620px;
  background:radial-gradient(circle,rgba(183,185,247,.16),rgba(183,185,247,0) 65%);
  filter:blur(30px);
}
.wz-orbs::after{
  top:30%;inset-inline-start:-200px;width:560px;height:560px;
  background:radial-gradient(circle,rgba(43,77,224,.04),rgba(43,77,224,0) 65%);
  filter:blur(40px);
}

.wz-app{display:flex;min-height:100vh;position:relative;z-index:1;}
.wz-main{flex:1;min-width:0;display:flex;flex-direction:column;}

/* ---- نوار بالا --------------------------------------------------------- */
/* شیشه‌ای: پس‌زمینهٔ نیمه‌شفاف روی محتوایی که زیرش رد می‌شود. مرورگری که
   backdrop-filter ندارد همان سفیدِ نیمه‌شفاف را می‌بیند که خواناست. */
.wz-header{
  position:sticky;top:0;z-index:5;
  background:rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid rgba(11,13,26,.07);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wz-header{background:rgba(255,255,255,.92);}
}

.wz-bar{
  height:var(--header-h);
  display:flex;align-items:center;gap:14px;
  padding:0 var(--page-x);
}

.wz-brand{display:flex;align-items:center;gap:8px;flex-shrink:0;color:var(--text);}
.wz-brand:hover{color:var(--text);}
.wz-brand__mark{
  width:24px;height:24px;border-radius:var(--r-sm);
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:13px;overflow:hidden;
}
.wz-brand__mark img{width:100%;height:100%;object-fit:contain;}
.wz-brand__name{font-weight:600;font-size:16px;letter-spacing:-.2px;}

.wz-slash{color:#d5d7e0;font-size:20px;font-weight:300;line-height:1;}

/* تراشهٔ حساب: نام مشتری و — وقتی چند حساب دارد — امکان جابه‌جایی. */
.wz-account{
  display:flex;align-items:center;gap:8px;
  height:32px;padding:0 8px;border-radius:var(--r-sm);
  color:var(--text);flex-shrink:0;min-width:0;
}
a.wz-account:hover,.wz-account:hover{background:#f4f4f7;color:var(--text);}
.wz-account__av{
  width:20px;height:20px;border-radius:50%;
  background:var(--avatar);color:var(--ink);
  font-size:10px;font-weight:600;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.wz-account__name{
  font-size:13px;font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.wz-account__tag{
  font-family:var(--mono);font-size:10px;color:var(--muted-2);
  border:1px solid var(--line-strong);border-radius:var(--r-xs);
  padding:0 5px;white-space:nowrap;
}

.wz-spacer{flex:1;}

/* تراشهٔ کیف پول در نوار بالا */
.wz-chip{
  height:34px;display:flex;align-items:center;gap:6px;
  padding:0 10px;border:1px solid var(--line);border-radius:var(--r);
  font-size:12px;white-space:nowrap;flex-shrink:0;color:var(--text);
  background:transparent;
}
.wz-chip:hover{border-color:#cfd1db;color:var(--text);}
.wz-chip__val{font-weight:600;}
.wz-chip__unit{color:var(--muted-2);}

/* دکمهٔ مربعی نوار بالا (زنگ، منو) */
.wz-iconbtn{
  width:34px;height:34px;flex-shrink:0;
  border:1px solid var(--line);border-radius:var(--r);
  background:transparent;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  position:relative;cursor:pointer;padding:0;
}
.wz-iconbtn:hover{color:var(--ink);}
.wz-iconbtn__dot{
  position:absolute;top:7px;inset-inline-start:8px;
  width:6px;height:6px;border-radius:50%;background:var(--ink);
}

/* .wz-avatar رفت: تنها جایی که به کار می‌رفت دکمهٔ خروج نوار بالا بود، و آن حالا
   آیکون خروج است نه حرف اول نام. توکن --avatar می‌ماند — .wz-account__av هنوز
   از آن استفاده می‌کند. */

/* ---- تب‌های افقی ------------------------------------------------------- */
/* سایدبار رفته. ناوبری اصلی همین ردیف است. */
.wz-tabs{
  display:flex;gap:4px;padding:0 20px;
  overflow-x:auto;
  scrollbar-width:none;
}
.wz-tabs::-webkit-scrollbar{display:none;}

.wz-tab{
  height:var(--tabs-h);
  padding:0 10px;
  display:flex;align-items:center;gap:7px;
  font-size:13px;font-weight:500;white-space:nowrap;
  color:var(--muted);
  margin-bottom:-1px;                 /* خط تب روی خط هدر می‌نشیند */
  border-bottom:2px solid transparent;
}
.wz-tab:hover{color:var(--ink);}
.wz-tab .wz-i{color:var(--faint);}
.wz-tab.is-active{color:var(--ink);font-weight:600;border-bottom-color:var(--ink);}
.wz-tab.is-active .wz-i{color:var(--ink);}
.wz-tab__badge{
  min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-xs);
  background:#f1f2f5;color:var(--muted);
  font-size:11px;font-weight:500;
  display:flex;align-items:center;justify-content:center;
}

/* ---- ناحیهٔ محتوا ------------------------------------------------------ */
/* flex:1 یعنی این ناحیه فضای خالیِ باقی‌مانده را می‌گیرد، پس روی صفحه‌های کوتاه
   پاورقی به پایینِ پنجره می‌چسبد به‌جای اینکه وسط صفحه رها بماند. والدش
   .wz-main از قبل ستونی و کشیده تا ۱۰۰vh است. */
.wz-page{
  width:100%;max-width:var(--page-max);margin:0 auto;
  padding:32px var(--page-x) 64px;
  display:flex;flex-direction:column;gap:24px;
  flex:1;
}

/* .wz-page همیشه یک فرزند بیشتر ندارد (.wz-body)، پس gap بالا هیچ‌وقت بین
   بلوک‌های صفحه نمی‌افتاد — هشدار، سرصفحه، آمار و کارت‌ها همه به هم چسبیده
   بودند. فاصله باید همین‌جا باشد، جایی که بلوک‌های واقعی کنار هم می‌نشینند. */
.wz-body{display:flex;flex-direction:column;gap:24px;min-width:0;}

/* سر صفحه: عنوان سمت راست، کنش‌ها سمت چپ */
.wz-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.wz-head__t{display:flex;flex-direction:column;gap:6px;min-width:0;}
.wz-head__sub{font-size:13px;color:var(--muted);}
.wz-head__actions{display:flex;gap:8px;flex-wrap:wrap;}

/* ------------------------------------------------------------- ۶. دکمه‌ها -- */
.wz-btn{
  height:36px;padding:0 16px;
  border:0;border-radius:var(--r);
  background:var(--ink);color:#fff;
  font-size:13px;font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;white-space:nowrap;
  transition:background .15s var(--ease);
}
.wz-btn:hover{background:var(--ink-hover);color:#fff;}
.wz-btn:disabled{opacity:.5;cursor:default;}

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

.wz-btn--sm{height:34px;padding:0 12px;}
.wz-btn--xs{height:30px;padding:0 10px;font-size:12px;}
.wz-btn--block{width:100%;}

/* ------------------------------------------------------------- ۷. کارت‌ها -- */
.wz-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.wz-card__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--line-soft);
}
.wz-card__body{padding:20px;}
.wz-card__foot{
  padding:14px 20px;
  border-top:1px solid var(--line-soft);
}
/* «همهٔ …» کنار عنوان کارت */
.wz-more{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);}
.wz-more:hover{color:var(--ink);}

/* شبکهٔ آمار: کارت‌های چسبیده با خط جداکننده، نه کارت‌های جدا */
.wz-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.wz-stat{
  padding:18px 20px;
  display:flex;flex-direction:column;gap:10px;
  color:var(--text);
}
.wz-stat + .wz-stat{border-inline-start:1px solid var(--line-soft);}
.wz-stat:hover{background:var(--surface-2);color:var(--text);}
.wz-stat__k{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
.wz-stat__k .wz-i{color:var(--muted-2);font-size:17px;}
.wz-stat__v{display:flex;align-items:baseline;gap:6px;}
.wz-stat__n{font-size:28px;font-weight:600;line-height:1;}
.wz-stat__u{font-size:12px;color:var(--muted);}

/* ------------------------------------------------- ۸. برچسب وضعیت (chip) -- */
.wz-st{
  display:inline-flex;align-items:center;gap:6px;
  height:22px;padding:0 8px;
  border-radius:var(--r-xs);
  font-size:12px;font-weight:500;white-space:nowrap;
  color:var(--neutral);background:var(--neutral-bg);
}
.wz-st::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:currentColor;flex-shrink:0;
}
.wz-st--ok{color:var(--ok);background:var(--ok-bg);}
.wz-st--warn{color:var(--warn);background:var(--warn-bg);}
.wz-st--bad{color:var(--bad);background:var(--bad-bg);}
.wz-st--info{color:var(--info);background:var(--info-bg);}
/* بدون نقطه، برای جایی که فقط یک برچسب متنی می‌خواهیم */
.wz-st--plain::before{display:none;}

/* --------------------------------------------------------- ۹. جدول/فهرست -- */
/* جدول‌ها grid هستند نه <table>: در عرض موبایل باید بتوانند بشکنند. */
.wz-list{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.wz-row{
  display:grid;align-items:center;gap:12px;
  padding:14px 20px;
  color:var(--text);
}
.wz-row + .wz-row{border-top:1px solid var(--line-soft);}
.wz-row--head{
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
  font-size:12px;color:var(--muted);font-weight:500;
  padding-top:11px;padding-bottom:11px;
}
a.wz-row:hover,.wz-row--link:hover{background:var(--surface-2);color:var(--text);}
.wz-row__chev{color:var(--faint);}

/* دو خطی داخل یک سلول: عنوان + زیرنویس */
.wz-cell{display:flex;flex-direction:column;gap:2px;min-width:0;}
.wz-cell__t{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wz-cell__s{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* -------------------------------------------------------------- ۱۰. فرم -- */
.wz-field{display:flex;flex-direction:column;gap:8px;}
.wz-label{font-size:13px;font-weight:600;color:var(--text);}
.wz-hint{font-size:12px;color:var(--muted);}

.wz-input,
.wz-next-select,
.wz-textarea{
  width:100%;
  border:1px solid var(--line-strong);
  border-radius:var(--r);
  background:var(--surface);
  color:var(--text);
  font-size:14px;
  padding:0 14px;
  height:40px;
  outline:none;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.wz-textarea{height:auto;min-height:120px;padding:12px 14px;line-height:2;resize:vertical;}
.wz-input:focus,
.wz-next-select:focus,
.wz-textarea:focus{
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(11,13,26,.08);
}
.wz-input[disabled],.wz-textarea[disabled]{background:var(--surface-2);color:var(--muted);}

.wz-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
.wz-check input{accent-color:var(--link);}

/* گزینهٔ کارتی با حلقهٔ رادیو — روش انتخاب پلن، روش پرداخت، نوع دامنه */
.wz-opt{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);cursor:pointer;
}
.wz-opt.is-on{border-color:var(--ink);background:var(--surface-2);}
.wz-opt__ring{
  width:16px;height:16px;border-radius:50%;flex-shrink:0;
  border:1.5px solid var(--ring);
}
.wz-opt.is-on .wz-opt__ring{border:5px solid var(--ink);}

/* کلید دوحالته */
.wz-toggle{
  width:38px;height:22px;border-radius:var(--r-pill);
  background:#d5d8e6;padding:3px;cursor:pointer;
  display:flex;align-items:center;justify-content:flex-end;
  border:0;transition:background .15s var(--ease);
}
.wz-toggle.is-on{background:var(--link);justify-content:flex-start;}
.wz-toggle__dot{width:16px;height:16px;border-radius:50%;background:#fff;}

/* بخش‌بندی قطعه‌ای (ماهانه/سالانه، فیلتر وضعیت) */
.wz-seg{
  display:inline-flex;gap:2px;padding:3px;
  background:var(--line-soft);border-radius:var(--r);
}
.wz-seg__i{
  height:28px;padding:0 12px;border:0;border-radius:var(--r-sm);
  background:transparent;color:var(--muted);
  font-size:13px;font-weight:500;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
}
.wz-seg__i.is-on{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 0 0 1px var(--line-strong);}

/* ------------------------------------------------------------ ۱۱. هشدار -- */
.wz-notice{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;
  background:var(--notice-bg);
  border:1px solid var(--notice-line);
  border-radius:var(--r);
  font-size:13px;
}
.wz-notice .wz-i{color:var(--notice-ic);font-size:20px;}
.wz-notice__body{flex:1;line-height:1.8;min-width:0;}

.wz-alert{
  padding:12px 16px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface);
  font-size:13px;line-height:1.9;
}
.wz-alert--ok{color:var(--ok);background:var(--ok-bg);border-color:transparent;}
.wz-alert--warn{color:var(--warn);background:var(--warn-bg);border-color:transparent;}
.wz-alert--bad{color:var(--bad);background:var(--bad-bg);border-color:transparent;}
.wz-alert--info{color:var(--info);background:var(--info-bg);border-color:transparent;}

/* -------------------------------------------------------------- ۱۲. نوار -- */
.wz-meter{height:6px;border-radius:var(--r-pill);background:var(--line-soft);overflow:hidden;}
.wz-meter__fill{height:100%;border-radius:var(--r-pill);background:var(--link);}
.wz-meter__fill--warn{background:var(--warn);}
.wz-meter__fill--bad{background:var(--bad);}

/* ------------------------------------------------------------- ۱۳. خالی -- */
.wz-empty{
  padding:48px 24px;text-align:center;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.wz-empty .wz-i{font-size:32px;color:var(--faint);}

/* ------------------------------------------------------------ ۱۴. موبایل -- */
@media (max-width:900px){
  :root{--page-x:16px;}
  .wz-page{padding-top:20px;}
  /* جستجو و تراشهٔ کیف پول اول از نوار بالا حذف می‌شوند، نه نام حساب. */
  .wz-bar{gap:10px;}
  .wz-chip{display:none;}
}
@media (max-width:640px){
  .wz-account__tag{display:none;}
  .wz-account__name{max-width:96px;}
  .wz-head{align-items:stretch;}
  .wz-head__actions{width:100%;}
  .wz-head__actions .wz-btn{flex:1;}
  /* جدول‌های گریدی در موبایل تک‌ستونی می‌شوند؛ سطر عنوان معنایی ندارد. */
  .wz-row--head{display:none;}
  .wz-row{grid-template-columns:1fr !important;gap:8px;}
}

/* -------------------------------------------------------------- ۱۵. چاپ -- */
@media print{
  .wz-orbs,.wz-header,.wz-head__actions{display:none !important;}
  body.weesa-next{background:#fff;}
  .wz-page{max-width:none;padding:0;}
  .wz-card,.wz-list,.wz-stats{border-color:#ddd;}
}

/* ------------------------------------------------- ۱۶. بدنه، کناره، پاورقی -- */
.wz-body{min-width:0;}

/* صفحاتی که WHMCS برایشان سایدبار می‌دهد. کانسپت سایدبار ندارد؛ این چیدمان
   گذراست تا فازهای بعد این منوها را به تب درون‌صفحه‌ای تبدیل کنند. */
.wz-with-aside{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:20px;
  align-items:start;
}
@media (max-width:900px){
  .wz-with-aside{grid-template-columns:minmax(0,1fr);}
  /* سایدبار زیر محتوا، نه رویش.

     در یک ستون، سایدبار چون در DOM اول می‌آید بالای صفحه می‌نشست و روی تلفن
     پنج فیلتر و دو لینکِ عملیات، تمام صفحهٔ اول را می‌گرفتند — کاربر باید از
     کنار آن‌ها رد می‌شد تا به فهرست سایت‌هایش برسد. ترتیب DOM عمداً دست‌نخورده
     می‌ماند چون در دسکتاپ درست است و خواندن با صفحه‌کلید هم همان را می‌خواهد؛
     فقط ترتیبِ دیداری عوض می‌شود. */
  .wz-with-aside > .wz-aside{order:2;}
  .wz-with-aside > .wz-body{order:1;}
}
.wz-aside{display:flex;flex-direction:column;gap:12px;min-width:0;}


.wz-footer{
  width:100%;max-width:var(--page-max);margin:0 auto;
  padding:20px var(--page-x) 40px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  font-size:12px;color:var(--faint);
  border-top:1px solid var(--line);
}
.wz-footer p{margin:0;}
.wz-footer__links{display:flex;gap:18px;flex-wrap:wrap;}
.wz-footer__links a{color:var(--muted);}
.wz-footer__links a:hover{color:var(--ink);}

/* --------------------------------------------------------- ۱۷. صفحهٔ مهمان -- */
/* چیدمان دوستونی کانسپت در فاز صفحهٔ ورود می‌آید؛ فعلاً فقط وسط‌چین. */
.wz-guest{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:40px 16px;
  position:relative;z-index:1;
}
.wz-guest .primary-content{width:100%;max-width:420px;}

/* ------------------------------------------------- ۱۸. نوار ابزار فهرست‌ها -- */
.wz-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.wz-seg__n{
  min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-xs);
  background:var(--line-soft);color:var(--muted);
  font-size:11px;font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;
}
.wz-seg__i.is-on .wz-seg__n{background:var(--line);color:var(--text);}

.wz-search{
  display:flex;align-items:center;gap:8px;
  height:34px;padding:0 10px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface-2);
  color:var(--faint);
  width:100%;max-width:280px;min-width:0;
}
.wz-search:focus-within{border-color:var(--line-strong);background:var(--surface);}
.wz-search input{
  flex:1;min-width:0;border:0;background:transparent;outline:none;
  font-size:13px;color:var(--text);
}
/* مرورگرها روی type=search یک ضربدر بومی می‌گذارند که با این طراحی نمی‌خواند. */
.wz-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}

/* ------------------------------------------------------- ۱۹. ردیف سایت‌ها -- */
/* عرض ثابت، نه auto/fr.
   با auto هر ردیف ستون‌هایش را از محتوای خودش می‌گرفت و چون ستون آخر گاهی یک
   دکمه دارد و گاهی دو تا، هیچ دو ردیفی روی هم نمی‌افتادند (اندازه‌گیری شد:
   سربرگ ۴۱۷/۱۹۰/۳۸/۲۰۹/۰ در برابر ردیف ۳۳۴/۱۵۲/۵۱/۱۶۷/۱۵۰). عددها به اندازهٔ
   طولانی‌ترین محتوای هر ستون انتخاب شده‌اند: «سررسید بعدی» دو خط تاریخ و مبلغ
   دارد و ستون کنش دو دکمهٔ «مشاهده» و «مدیریت». */
.wz-siterow{
  grid-template-columns:minmax(0,1fr) 148px 92px 184px 184px;
}
.wz-siterow__main{
  display:flex;align-items:center;gap:12px;min-width:0;color:var(--text);
}
.wz-siterow__main:hover{color:var(--text);}
.wz-siterow__thumb{
  width:34px;height:34px;flex-shrink:0;
  border-radius:var(--r);
  background:var(--line-soft);color:var(--muted-2);
  display:flex;align-items:center;justify-content:center;
}
.wz-siterow__plan{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wz-siterow__act{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap;}

@media (max-width:640px){
  .wz-siterow__act{justify-content:flex-start;}
  .wz-siterow__plan{color:var(--muted);}
}

/* ----------------------------------------------------- ۲۰. چیدمان داشبورد -- */
.wz-dash{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:20px;
  /* stretch نه start: ستون کناری تا ته ردیف کشیده می‌شود تا پایین کارت
     «پشتیبانی» با پایین «صورتحساب‌های اخیر» یکی شود. فاصله را کارت بنرها
     می‌بلعد (پایین‌تر، flex:1)، چون تنها کارتی است که ارتفاعش معنا ندارد. */
  align-items:stretch;
}
.wz-dash__main,.wz-dash__side{display:flex;flex-direction:column;gap:20px;min-width:0;}
@media (max-width:1000px){
  .wz-dash{grid-template-columns:minmax(0,1fr);align-items:start;}
}

/* ---- بنرهای اطلاع‌رسانی (استوری) ---------------------------------------- */
/* تصویرها از assets/weesa-banners/ می‌آیند و خودِ کارت فقط قاب و نوار است. */
.wz-stories{
  position:relative;overflow:hidden;padding:0;
  /* فاصلهٔ باقی‌ماندهٔ ستون را این کارت می‌گیرد؛ min-height کف را نگه می‌دارد تا
     در صفحه‌های کوتاه به یک نوار باریک تبدیل نشود. */
  flex:1 1 auto;min-height:190px;
}
@media (max-width:1000px){
  .wz-stories{flex:0 0 auto;min-height:160px;}
}

.wz-stories__track{position:absolute;inset:0;}
.wz-stories__slide{
  position:absolute;inset:0;display:block;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease);
}
.wz-stories__slide.is-on{opacity:1;visibility:visible;}
.wz-stories__slide img{
  width:100%;height:100%;object-fit:cover;display:block;
}

/* نوار بالا، به سبک استوری: یک قطعه به ازای هر بنر. */
.wz-stories__bars{
  position:absolute;inset-inline:10px;top:10px;z-index:2;
  display:flex;gap:4px;
}
.wz-stories__bar{
  flex:1;height:3px;border-radius:2px;
  background:rgba(255,255,255,.38);
  overflow:hidden;
}
.wz-stories__bar > i{
  display:block;height:100%;width:0;
  background:#fff;border-radius:2px;
}
/* قطعهٔ گذشته پر می‌ماند، قطعهٔ جاری پر می‌شود، بعدی‌ها خالی. */
.wz-stories__bar.is-done > i{width:100%;}
.wz-stories__bar.is-now > i{
  width:100%;
  transition:width var(--wz-stories-dur,6s) linear;
}
/* بی انیمیشن، نوار هنوز می‌گوید کجای مجموعه‌ایم. */
@media (prefers-reduced-motion:reduce){
  .wz-stories__slide{transition:none;}
  .wz-stories__bar.is-now > i{transition:none;width:100%;}
}

.wz-sitecard__meta{
  display:flex;gap:14px;flex-wrap:wrap;
  font-size:12px;color:var(--muted);
}

/* فهرست صورتحساب در داشبورد */
.wz-invlist .wz-invrow{
  grid-template-columns:auto minmax(0,1fr) auto auto;
  padding-inline:20px;
}

/* ---------------------------------------------------- ۲۱. کارت‌های ستون کنار -- */
.wz-wallet{display:flex;flex-direction:column;gap:10px;}
.wz-wallet__top{
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--muted);
}
.wz-wallet__n{font-size:24px;font-weight:600;line-height:1.2;}
.wz-wallet__note{font-size:12px;color:var(--muted);line-height:1.8;}

.wz-support{display:flex;flex-direction:column;gap:12px;}
.wz-support p{font-size:13px;color:var(--muted);line-height:1.9;}

/* --------------------------------------------------- ۲۲. ردیف‌های فهرست‌ها -- */
/* هر صفحه ستون‌های خودش را دارد؛ بقیهٔ رفتار از wz-row می‌آید. */
.wz-invrow-full{
  grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto auto;
}
.wz-domainrow{
  grid-template-columns:minmax(0,2fr) auto minmax(0,1fr) minmax(0,1.1fr) auto auto;
}
.wz-ticketrow{
  grid-template-columns:auto minmax(0,2.4fr) minmax(0,1fr) auto minmax(0,1fr) auto;
}

/* ------------------------------------------------------- ۲۳. منوهای کناری -- */
/* includes/sidebar.tpl اینها را می‌سازد — منوهای خود WHMCS، با زبان این پوسته. */
.wz-side{overflow:hidden;}
.wz-side__head{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;
  border-bottom:1px solid var(--line-soft);
  font-size:13px;font-weight:600;color:var(--text);
}
.wz-side__title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wz-side__ic{font-size:13px;color:var(--faint);width:1em;text-align:center;flex-shrink:0;}
.wz-side__body{padding:14px 16px;font-size:13px;color:var(--muted);line-height:1.9;}
.wz-side__foot{
  padding:12px 16px;border-top:1px solid var(--line-soft);
  font-size:12px;color:var(--muted);
}
.wz-side__list{display:flex;flex-direction:column;}
.wz-side__item{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;
  font-size:13px;color:var(--muted);
  border-top:1px solid var(--line-soft);
}
.wz-side__item:first-child{border-top:0;}
a.wz-side__item:hover{background:var(--surface-2);color:var(--ink);}
.wz-side__item.is-current,
.wz-side__item.active{background:var(--surface-2);color:var(--ink);font-weight:600;}
.wz-side__item.is-disabled{opacity:.5;pointer-events:none;}
.wz-side__label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wz-side__badge{
  min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-xs);
  background:var(--line-soft);color:var(--muted);
  font-size:11px;font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;
}

/* WHMCS گاهی HTML خام داخل بدنه یا پاورقی منو می‌گذارد (دکمه، فرم کوچک).
   حداقلِ لازم تا با بقیهٔ صفحه یکدست بماند. */
.wz-side__body .btn,
.wz-side__foot .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;padding:0 12px;
  border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);color:var(--text);
  font-size:13px;font-weight:500;
}
.wz-side__body .btn:hover,
.wz-side__foot .btn:hover{background:var(--surface-2);color:var(--text);}
.wz-side__body .btn-primary,
.wz-side__foot .btn-primary{background:var(--ink);border-color:var(--ink);color:#fff;}
.wz-side__body .btn-primary:hover,
.wz-side__foot .btn-primary:hover{background:var(--ink-hover);color:#fff;}

/* ------------------------------------------------ ۲۴. صفحات ورود و ثبت‌نام -- */
/* دوستونی: فرم سمت راست (شروع خط در RTL)، پنل تیره سمت چپ. */
.wz-auth{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:var(--surface);
  position:relative;z-index:1;
}
.wz-auth__left{
  display:flex;flex-direction:column;justify-content:space-between;
  gap:32px;
  padding:40px 56px;
  min-width:0;
}
.wz-auth__brand{display:flex;align-items:center;gap:10px;color:var(--text);flex-shrink:0;}
.wz-auth__brand:hover{color:var(--text);}
.wz-auth__brand .wz-brand__mark{width:34px;height:34px;border-radius:var(--r);font-size:17px;}
.wz-auth__brand .wz-brand__name{font-size:20px;}

.wz-auth__mid{
  display:flex;flex-direction:column;justify-content:center;
  flex:1;min-width:0;
}
.wz-auth__mid .primary-content{width:100%;}
.wz-auth__form{
  max-width:380px;width:100%;margin:0 auto;
  display:flex;flex-direction:column;gap:20px;
}
.wz-auth__head{display:flex;flex-direction:column;gap:8px;}
.wz-auth__head h1{font-size:28px;}
.wz-auth__head p{color:var(--muted);font-size:14px;line-height:1.9;}
.wz-authform{display:flex;flex-direction:column;gap:20px;}
.wz-label--row{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.wz-label--row a{font-weight:500;font-size:13px;}

/* ورودی رمز با دکمهٔ چشم داخلش */
.wz-pw{position:relative;display:block;}
.wz-pw .wz-input{padding-inline-end:42px;}
.wz-pw__eye{
  position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;padding:0;
  border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--faint);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.wz-pw__eye:hover{color:var(--ink);}

.wz-auth__alt{font-size:13px;color:var(--muted);text-align:center;}
.wz-auth__alt a{font-weight:600;}
.wz-auth__foot{font-size:12px;color:var(--faint);flex-shrink:0;}

/* ستون تیره */
.wz-auth__right{
  background:var(--night);
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:48px 48px;
  display:flex;flex-direction:column;justify-content:center;
  gap:20px;padding:56px;
  position:relative;overflow:hidden;
  color:#fff;
}
.wz-auth__orb{
  position:absolute;top:-160px;inset-inline-start:-120px;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(183,185,247,.12),transparent 65%);
  filter:blur(30px);pointer-events:none;
}
.wz-auth__eyebrow{font-size:13px;color:var(--lav);font-weight:600;position:relative;}
.wz-auth__h{
  margin:0;font-size:44px;line-height:1.35;font-weight:600;color:#fff;
  position:relative;text-wrap:pretty;
}
.wz-auth__h span{color:var(--lav);}
.wz-auth__p{
  color:#c3c6e4;font-size:15px;line-height:2;max-width:420px;position:relative;
}

/* زیر ۹۰۰px ستون تیره می‌رود: در موبایل فقط جا می‌گیرد و چیزی اضافه نمی‌کند. */
@media (max-width:900px){
  .wz-auth{grid-template-columns:minmax(0,1fr);}
  .wz-auth__right{display:none;}
  .wz-auth__left{padding:32px 20px;}
}

/* WHMCS و افزونه‌هایش داخل فرم‌های مهمان مارک‌آپ خودشان را می‌گذارند (کپچا،
   حساب‌های پیوندی، هشدارها). این حداقلِ لازم است تا در این قاب جا بیفتند. */
.wz-auth__form .form-group{margin:0;}
.wz-auth__form .alert{
  padding:12px 16px;border-radius:var(--r);border:1px solid var(--line);
  background:var(--surface-2);font-size:13px;line-height:1.9;color:var(--text);
}
.wz-auth__form .alert-danger{color:var(--bad);background:var(--bad-bg);border-color:transparent;}
.wz-auth__form .alert-success{color:var(--ok);background:var(--ok-bg);border-color:transparent;}
.wz-auth__form .alert-info{color:var(--info);background:var(--info-bg);border-color:transparent;}
.wz-auth__form .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:40px;padding:0 16px;
  border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);color:var(--text);
  font-size:13px;font-weight:500;
}
.wz-auth__form .btn:hover{background:var(--surface-2);color:var(--text);}

/* پوشش‌های بیرونیِ صفحات مهمان. قاب واقعی در header.tpl است؛ اینها فقط
   باقی‌ماندهٔ ساختار قبلی‌اند و نباید چیزی به چیدمان اضافه کنند. */
.wz-authwrap,.wz-authwide{width:100%;}
.wz-auth__form--wide{max-width:560px;}
.wz-auth__section{
  font-size:13px;font-weight:600;color:var(--text);
  padding-top:4px;
  border-top:1px solid var(--line-soft);
  padding-block-start:16px;
}
.wz-row2{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:16px;
}

/* WHMCS و افزونه‌هایش .form-control می‌دهند؛ ظاهرش باید همان wz-input باشد. */
.wz-auth__form .form-group{display:flex;flex-direction:column;gap:8px;}
.wz-auth__form .wz-label{font-size:13px;font-weight:600;color:var(--text);}
.wz-inputwrap{position:relative;display:block;}
.wz-auth__form .form-control,
.wz-auth__form select.form-control,
.wz-auth__form textarea.form-control{
  width:100%;
  border:1px solid var(--line-strong);
  border-radius:var(--r);
  background:var(--surface);
  color:var(--text);
  font-size:14px;
  height:40px;padding:0 14px;
  outline:none;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.wz-auth__form textarea.form-control{height:auto;min-height:100px;padding:12px 14px;line-height:2;}
.wz-auth__form .form-control:focus{
  border-color:var(--ink);box-shadow:0 0 0 3px rgba(11,13,26,.08);
}
.wz-inputwrap.wz-pw .form-control{padding-inline-end:42px;}

/* نوار قدرت رمز که PasswordStrength.js پر می‌کند */
.wz-pwmeter{display:flex;flex-direction:column;gap:8px;}
.wz-pwmeter .progress{
  height:6px;border-radius:var(--r-pill);
  background:var(--line-soft);overflow:hidden;
}
.wz-pwmeter .progress-bar{height:100%;background:var(--ok);transition:width .2s var(--ease);}
.wz-pwmeter p{font-size:12px;color:var(--muted);}

/* ------------------------------------------ ۲۵. اسناد مستقل (فاکتور، پیش‌فاکتور) -- */
/* بدون قاب اپ: WHMCS این صفحه‌ها را سند کامل رندر می‌کند. */
body.weesa-next--doc{background:var(--bg);}
.wz-doc{
  width:100%;max-width:900px;margin:0 auto;
  padding:32px 20px 64px;
  display:flex;flex-direction:column;gap:20px;
}
.wz-doc__bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.wz-doc__back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);}
.wz-doc__back:hover{color:var(--ink);}
.wz-doc__tools{display:flex;gap:8px;flex-wrap:wrap;}

.wz-doc__head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:24px;
}
.wz-doc__brand{display:flex;flex-direction:column;gap:10px;min-width:0;}
.wz-doc__brand img{max-height:40px;width:auto;}
.wz-doc__brandname{font-size:18px;font-weight:600;}
.wz-doc__head h1{font-size:20px;}
.wz-doc__state{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
.wz-doc__due{font-size:13px;color:var(--muted);}
.wz-doc__pay{margin-top:4px;}
/* دکمهٔ پرداخت را ماژول درگاه می‌سازد و هیچ کلاسی روی آن نمی‌گذارد — زیبال یک
   <input type="submit"> خام می‌دهد. پس به‌جای کلاس، به خود عنصر استایل داده شده. */
.weesa-next .wz-doc__pay input[type="submit"],
.weesa-next .wz-doc__pay button[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:36px;padding:0 16px;
  border:0;border-radius:var(--r);
  background:var(--ink);color:#fff;
  font-family:inherit;font-size:13px;font-weight:500;
  cursor:pointer;
}
.weesa-next .wz-doc__pay input[type="submit"]:hover,
.weesa-next .wz-doc__pay button[type="submit"]:hover{background:var(--ink-2,#2a2e48);}

/* جداکننده‌ها خط واقعی‌اند، نه زمینهٔ ظرف که از لای gap دیده شود.
   آن ترفند تا وقتی ردیف پر است کار می‌کند؛ روی فاکتوری که چهار جعبه دارد و سه
   ستون، خانهٔ خالیِ ردیف دوم یک بلوک خاکستری توپر می‌شد. */
.wz-doc__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.wz-doc__box{
  background:var(--surface);padding:18px 20px;min-width:0;
  border-inline-start:1px solid var(--line);
  border-top:1px solid var(--line);
}
/* اولین ستون هر ردیف و اولین ردیف، خط بیرونی ندارند. auto-fit یعنی تعداد ستون
   با عرض عوض می‌شود، پس هر حالت جدا نوشته شده. */
.wz-doc__grid > .wz-doc__box:first-child{border-top:0;}
@media (min-width:calc(220px * 2)){
  .wz-doc__grid > .wz-doc__box:nth-child(-n+2){border-top:0;}
}
@media (min-width:calc(220px * 3)){
  .wz-doc__grid > .wz-doc__box:nth-child(-n+3){border-top:0;}
}
.wz-doc__boxtitle{
  font-size:12px;color:var(--muted);font-weight:500;
  margin-bottom:8px;
}
.wz-doc__box address{margin:0;font-style:normal;font-size:13px;line-height:2;}

/* اقلام */
.wz-doc__items{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.wz-doc__items table{width:100%;border-collapse:collapse;}
.wz-doc__items th{
  text-align:start;font-size:12px;font-weight:500;color:var(--muted);
  background:var(--surface-2);
  padding:11px 20px;
  border-bottom:1px solid var(--line);
}
.wz-doc__items td{
  padding:14px 20px;font-size:13px;
  border-top:1px solid var(--line-soft);
  vertical-align:top;
}
.wz-doc__items tbody tr:first-child td{border-top:0;}
.wz-doc__items th:last-child,
.wz-doc__items td:last-child{text-align:end;white-space:nowrap;}

/* جمع‌ها */
.wz-doc__total{
  display:flex;flex-direction:column;gap:8px;
  margin-inline-start:auto;
  width:100%;max-width:340px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:18px 20px;
}
.wz-doc__total > div,
.wz-doc__amount{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;}
.wz-doc__amount{
  padding-top:10px;margin-top:2px;
  border-top:1px solid var(--line);
  font-size:15px;font-weight:600;
}
.wz-doc__credit{color:var(--ok);}
.wz-doc__note{font-size:12px;color:var(--muted);line-height:1.9;}
.wz-doc__empty{padding:32px;text-align:center;color:var(--muted);}

@media print{
  body.weesa-next--doc{background:#fff;}
  .wz-doc{max-width:none;padding:0;}
  .wz-doc__bar,.wz-doc__pay,.d-print-none{display:none !important;}
  .wz-doc__head,.wz-doc__grid,.wz-doc__items,.wz-doc__total{border-color:#ddd;}
}

/* ============================================================================
   ۲۶. اجزای استوک WHMCS

   بیشتر صفحه‌های ناحیهٔ کاربری هنوز مارک‌آپ خود WHMCS را دارند: .card، .table،
   .btn، .form-control، .nav-tabs. بازنویسی هر هشتاد قالب برای رسیدن به یک ظاهر
   یکدست نه لازم است نه عاقلانه — این بخش همان کلاس‌ها را به زبان این طراحی
   ترجمه می‌کند، پس صفحه‌ای که هنوز مهاجرت نکرده هم بومی دیده می‌شود.

   قاعده: فقط داخل .weesa-next اثر می‌کند، و جز چند مورد ناگزیر !important ندارد
   تا قالبی که واقعاً مهاجرت کرده بتواند بدون جنگ روی آن بنویسد.

   اینها bootstrap را جایگزین نمی‌کنند؛ رویش می‌نشینند. all.css و theme.css هنوز
   بار می‌شوند چون اجزای تعاملی WHMCS (modal، popover، tab، datatable) به آن‌ها
   وابسته‌اند.
   ============================================================================ */

/* ---- کارت ---- */
.weesa-next .card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:none;
  margin-bottom:20px;
}
.weesa-next .card-header{
  background:transparent;
  border-bottom:1px solid var(--line-soft);
  padding:14px 20px;
  font-weight:600;font-size:13px;color:var(--text);
}
.weesa-next .card-title{margin:0;font-size:13px;font-weight:600;color:var(--text);}
.weesa-next .card-body{padding:20px;}
.weesa-next .card-footer{
  background:transparent;
  border-top:1px solid var(--line-soft);
  padding:14px 20px;
}

/* ---- دکمه ---- */
.weesa-next .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:36px;padding:0 16px;
  border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);color:var(--text);
  font-size:13px;font-weight:500;
  box-shadow:none;
  transition:background .15s var(--ease),border-color .15s var(--ease);
}
.weesa-next .btn:hover{background:var(--surface-2);color:var(--text);}
.weesa-next .btn-primary,
.weesa-next .btn-success{background:var(--ink);border-color:var(--ink);color:#fff;}
.weesa-next .btn-primary:hover,
.weesa-next .btn-success:hover{background:var(--ink-hover);border-color:var(--ink-hover);color:#fff;}
.weesa-next .btn-danger{background:var(--bad);border-color:var(--bad);color:#fff;}
.weesa-next .btn-danger:hover{background:#9a1f19;border-color:#9a1f19;color:#fff;}
.weesa-next .btn-link{border-color:transparent;background:transparent;color:var(--link);}
.weesa-next .btn-link:hover{background:transparent;color:var(--link-hover);}
.weesa-next .btn-sm{height:30px;padding:0 10px;font-size:12px;}
.weesa-next .btn-lg{height:42px;padding:0 20px;font-size:14px;}
.weesa-next .btn-block{width:100%;}
.weesa-next .btn:disabled,.weesa-next .btn.disabled{opacity:.5;}

/* ---- فرم ---- */
.weesa-next .form-group{margin-bottom:16px;}
.weesa-next label,
.weesa-next .col-form-label,
.weesa-next .form-control-label{
  font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px;
}
.weesa-next .form-control,
.weesa-next select.form-control,
.weesa-next textarea.form-control{
  width:100%;height:40px;padding:0 14px;
  border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);color:var(--text);
  font-size:14px;box-shadow:none;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.weesa-next textarea.form-control{height:auto;min-height:110px;padding:12px 14px;line-height:2;}
.weesa-next select.form-control{padding-inline-end:32px;}
.weesa-next .form-control:focus{
  border-color:var(--ink);box-shadow:0 0 0 3px rgba(11,13,26,.08);
}
.weesa-next .form-control[readonly],
.weesa-next .form-control:disabled{background:var(--surface-2);color:var(--muted);}
.weesa-next .form-check-input{accent-color:var(--link);}
.weesa-next .form-text,.weesa-next .help-block,.weesa-next small.text-muted{
  font-size:12px;color:var(--muted);
}
.weesa-next .input-group-text{
  border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface-2);color:var(--muted);font-size:13px;
}

/* ---- جدول ---- */
.weesa-next .table{
  width:100%;margin:0;
  background:var(--surface);
  border-collapse:collapse;
  color:var(--text);
}
.weesa-next .table th{
  background:var(--surface-2);
  border:0;border-bottom:1px solid var(--line);
  padding:11px 16px;
  font-size:12px;font-weight:500;color:var(--muted);
  text-align:start;
}
.weesa-next .table td{
  border:0;border-top:1px solid var(--line-soft);
  padding:13px 16px;font-size:13px;vertical-align:middle;
}
.weesa-next .table tbody tr:first-child td{border-top:0;}
.weesa-next .table-hover tbody tr:hover,
.weesa-next .table tbody tr[onclick]:hover{background:var(--surface-2);cursor:pointer;}
.weesa-next .table-container,
.weesa-next .table-responsive{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}

/* ---- هشدار ---- */
.weesa-next .alert{
  padding:12px 16px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--surface-2);
  color:var(--text);font-size:13px;line-height:1.9;
}
.weesa-next .alert-success{color:var(--ok);background:var(--ok-bg);border-color:transparent;}
.weesa-next .alert-danger,.weesa-next .alert-error{color:var(--bad);background:var(--bad-bg);border-color:transparent;}
.weesa-next .alert-warning{color:var(--warn);background:var(--warn-bg);border-color:transparent;}
.weesa-next .alert-info{color:var(--info);background:var(--info-bg);border-color:transparent;}

/* هشدارِ متن‌وَدکمه، مثل «فاکتور پرداخت‌نشده». قبلاً دکمه float بود و ۳۶ پیکسل
   بلندی داشت در برابرِ خطِ ۲۵ پیکسلیِ متن، پس متن بالای ردیف می‌نشست و دکمه
   پایین‌تر. با flex هر دو روی یک محورِ عمودی‌اند؛ در عرضِ کم دکمه زیرِ متن می‌رود. */
.weesa-next .alert.wz-alert-row{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px 16px;
  padding-block:8px;padding-inline-end:8px;
}
.wz-alert-row > .btn{flex-shrink:0;}

/* ---- برچسب و نشان ---- */
.weesa-next .badge,
.weesa-next .label{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:20px;padding:0 7px;
  border-radius:var(--r-xs);
  background:var(--line-soft);color:var(--muted);
  font-size:11px;font-weight:500;
}
.weesa-next .status-active,.weesa-next .badge-success,.weesa-next .label-success{color:var(--ok);background:var(--ok-bg);}
.weesa-next .status-pending,.weesa-next .badge-warning,.weesa-next .label-warning{color:var(--warn);background:var(--warn-bg);}
.weesa-next .status-suspended,.weesa-next .status-terminated,
.weesa-next .badge-danger,.weesa-next .label-danger{color:var(--bad);background:var(--bad-bg);}
.weesa-next .badge-info,.weesa-next .label-info{color:var(--info);background:var(--info-bg);}

/* ---- تب‌های درون‌صفحه‌ای ---- */
.weesa-next .nav-tabs{
  border-bottom:1px solid var(--line);
  gap:4px;margin-bottom:20px;
}
.weesa-next .nav-tabs .nav-link{
  border:0;border-bottom:2px solid transparent;
  border-radius:0;
  padding:0 10px;height:36px;
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:500;color:var(--muted);
  background:transparent;
}
.weesa-next .nav-tabs .nav-link:hover{color:var(--ink);border-bottom-color:transparent;}
.weesa-next .nav-tabs .nav-link.active{
  color:var(--ink);font-weight:600;
  background:transparent;border-bottom-color:var(--ink);
}
.weesa-next .nav-pills .nav-link.active{background:var(--ink);color:#fff;border-radius:var(--r);}

/* ---- list-group ---- */
.weesa-next .list-group{border-radius:var(--r-lg);overflow:hidden;}
.weesa-next .list-group-item{
  border:0;border-top:1px solid var(--line-soft);
  padding:12px 16px;font-size:13px;
  background:var(--surface);color:var(--text);
}
.weesa-next .list-group-item:first-child{border-top:0;}
.weesa-next .list-group-item-action:hover{background:var(--surface-2);color:var(--ink);}
.weesa-next .list-group-item.active{background:var(--surface-2);color:var(--ink);font-weight:600;border-color:var(--line-soft);}

/* ---- نوار پیشرفت و متفرقه ---- */
.weesa-next .progress{height:6px;border-radius:var(--r-pill);background:var(--line-soft);box-shadow:none;}
.weesa-next .progress-bar{background:var(--link);}
.weesa-next hr{border-color:var(--line-soft);}
.weesa-next .text-muted{color:var(--muted);}
.weesa-next .text-success{color:var(--ok);}
.weesa-next .text-danger{color:var(--bad);}
.weesa-next .text-warning{color:var(--warn);}
.weesa-next .modal-content{
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);
}
.weesa-next .modal-header,.weesa-next .modal-footer{border-color:var(--line-soft);}
.weesa-next .popover{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);}
.weesa-next .tooltip-inner{background:var(--ink);border-radius:var(--r-sm);font-size:12px;}

/* بوت‌استرپ ۴ در RTL: text-right و text-left معنای فیزیکی دارند و اینجا وارونه
   می‌افتند. WHMCS آن‌ها را به معنای «سمت مقابل» به کار می‌برد، پس به معادل
   منطقی‌شان ترجمه می‌شوند. !important لازم است چون خود بوت‌استرپ هم دارد. */
.weesa-next .text-right{text-align:end !important;}
.weesa-next .text-left{text-align:start !important;}

/* --------------------------------------------------- ۲۷. گفتگوی تیکت -- */
/* کانسپت پیام‌ها را حباب‌وار نشان می‌دهد: پاسخ مشتری روی سطح سفید، پاسخ پشتیبانی
   روی سطح دوم، هر کدام با نام و زمان بالای خودش.

   مارک‌آپ همان چیزی است که WHMCS می‌دهد (.ticket-reply و .staff). بازنویسی این
   قالب یعنی دوباره‌نویسی امتیازدهی، پیوست‌ها و رندر markdown — که همه کار
   می‌کنند. پس فقط زبان بصری‌اش عوض می‌شود. */
.weesa-next .view-ticket .card-title{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;font-size:15px;
}
.weesa-next .ticket-actions{float:none !important;margin:0 !important;display:flex;gap:8px;}

.weesa-next .ticket-reply{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--surface);
  overflow:hidden;
}
.weesa-next .ticket-reply.staff{background:var(--surface-2);}

.weesa-next .ticket-reply .posted-by{
  padding:12px 16px;
  border-bottom:1px solid var(--line-soft);
  font-size:12px;color:var(--muted);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.weesa-next .ticket-reply .posted-by-name{font-weight:600;color:var(--text);}
.weesa-next .ticket-reply .posted-on{color:var(--faint);}
/* پاسخ پشتیبانی یک نشانهٔ کوچک می‌گیرد تا در نگاه اول از پیام مشتری جدا شود. */
.weesa-next .ticket-reply.staff .posted-by::before{
  content:'پشتیبانی';
  height:20px;padding:0 7px;
  border-radius:var(--r-xs);
  background:var(--info-bg);color:var(--info);
  font-size:11px;font-weight:500;
  display:inline-flex;align-items:center;
}

.weesa-next .ticket-reply .message{
  padding:16px !important;
  font-size:13px;line-height:2;color:var(--text);
}
.weesa-next .ticket-reply .message img{max-width:100%;height:auto;}
.weesa-next .ticket-reply .message pre,
.weesa-next .ticket-reply .message code{
  font-family:var(--mono);font-size:12px;
  background:var(--line-soft);border-radius:var(--r-sm);
  padding:2px 6px;direction:ltr;
}
.weesa-next .ticket-reply .message pre{padding:12px;overflow-x:auto;}
.weesa-next .ticket-reply .message blockquote{
  margin:0;padding-inline-start:12px;
  border-inline-start:2px solid var(--line);
  color:var(--muted);
}
.weesa-next .ticket-reply hr{border-color:var(--line-soft);margin:12px 0;}

/* پیوست‌ها */
.weesa-next .ticket-reply .attachments,
.weesa-next .ticket-reply .attachments-list{
  padding:12px 16px;border-top:1px solid var(--line-soft);
  font-size:12px;color:var(--muted);
}

/* امتیازدهی به پاسخ */
.weesa-next .rating,.weesa-next .rating-done{display:inline-flex;gap:4px;align-items:center;}
.weesa-next .star{
  width:16px;height:16px;border-radius:2px;
  background:var(--line);display:inline-block;
}
.weesa-next .star.active{background:var(--warn);}

/* جعبهٔ پاسخ */
.weesa-next #ticketReplyContainer .card-title{font-size:13px;}
.weesa-next #ticketReplyContainer textarea.form-control{min-height:140px;}

/* ------------------------------------------------------- ۲۸. صفحهٔ سایت -- */
/* چهار تب کانسپت. مارک‌آپ از ماژول weesa می‌آید (templates/overview-next.tpl). */
.wz-sitetabs{
  display:flex;gap:4px;
  border-bottom:1px solid var(--line);
  margin-bottom:20px;
  overflow-x:auto;scrollbar-width:none;
}
.wz-sitetabs::-webkit-scrollbar{display:none;}
.wz-sitetabs .wz-tab{
  border:0;background:transparent;cursor:pointer;
  font-family:inherit;
}

.wz-pane{display:none;}
.wz-pane.is-active{display:block;}

.wz-sitegrid{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:20px;align-items:start;
}
.wz-sitegrid__main,.wz-sitegrid__side{display:flex;flex-direction:column;gap:20px;min-width:0;}
@media (max-width:1000px){
  .wz-sitegrid{grid-template-columns:minmax(0,1fr);}
}

/* نوارهای مصرف */
/* چهار نوار در ستون اصلی سه‌تایی می‌شدند و یک خانهٔ خالی کنارشان می‌ماند.
   ۳۰۰px یعنی دو ستون در این عرض، پس چهار تا ۲×۲ می‌نشینند. */
/* چهار سنجه، پس ستون باریک‌تر تا هر چهار تا در یک ردیف جا شوند؛ و جداکننده
   خط واقعی است نه زمینهٔ ظرف که از لای gap دیده شود. با آن ترفند، ردیفِ ناقص
   یک بلوک خاکستری توپر می‌شد — همان چیزی که روی جعبه‌های فاکتور هم بود. */
.wz-usage{
  display:grid;gap:0;
  /* ۳۲۰ یعنی روی ستون ~۹۰۰ پیکسلیِ این صفحه دو ستون در می‌آید، نه چهار:
     با چهار ستونِ ۲۲۶ پیکسلی «۴۹۷ مگابایت از ۱٫۵ گیگابایت» دو خط می‌شکست. */
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.wz-usage__item{
  background:var(--surface);
  padding:16px 20px;
  display:flex;flex-direction:column;gap:10px;
  border-inline-start:1px solid var(--line-soft);
  border-top:1px solid var(--line-soft);
}
.wz-usage__item:first-child{border-top:0;}
@media (min-width:calc(320px * 2)){ .wz-usage__item:nth-child(-n+2){border-top:0;} }
@media (min-width:calc(320px * 3)){ .wz-usage__item:nth-child(-n+3){border-top:0;} }
@media (min-width:calc(320px * 4)){ .wz-usage__item:nth-child(-n+4){border-top:0;} }
.wz-usage__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.wz-usage__label{font-size:13px;color:var(--muted);}
.wz-usage__pct{font-size:18px;font-weight:600;color:var(--text);}
.wz-usage__foot{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);}

/* عملیات سریع */
.wz-ops{
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  background:var(--line-soft);
  border-top:1px solid var(--line-soft);
}
/* یکی از این کاشی‌ها <button> است و بقیه <a> — «تغییر رمز پیشخوان» کاری در همین
   صفحه می‌کند، نه رفتن به جای دیگر.

   border-radius:0 مهم‌ترین خطِ این بلوک است و با DevTools پیدا شد نه با حدس:
   theme.css خط ۴۳۹ به هر <button> خالی شعاع var(--radius-md) یعنی ۱۲ پیکسل
   می‌دهد. چون فاصلهٔ کاشی‌ها از gap روی گرید می‌آید و خطِ خاکستری خودِ پس‌زمینهٔ
   گرید است، آن گوشه‌های گرد خاکستری را از پشت نشان می‌دادند و دور همان یک کاشی
   قابی می‌کشیدند که بقیه نداشتند.

   بقیهٔ خط‌ها همان ارث‌های مرورگر و بوت‌استرپ‌اند: حاشیه، پس‌زمینه، فونت، و
   transition ی که theme.css روی دکمه‌ها می‌گذارد و هاورِ این یکی را ۰٫۳ ثانیه
   کندتر از چهارتای دیگر می‌کرد. */
.wz-op{
  background:var(--surface);color:var(--text);
  padding:18px 16px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;font-size:13px;
  border:0;border-radius:0;width:100%;font-family:inherit;cursor:pointer;
  transition:none;
  -webkit-appearance:none;appearance:none;
}
.wz-op:hover{background:var(--surface-2);color:var(--ink);}
.wz-op .wz-i{color:var(--muted-2);}
.wz-op:hover .wz-i{color:var(--ink);}

/* فهرست کلید/مقدار */
.wz-kv{display:flex;flex-direction:column;}
.wz-kv__row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:11px 20px;
  font-size:13px;
  border-top:1px solid var(--line-soft);
}
.wz-kv__row:first-child{border-top:0;}
.wz-kv__row > span:first-child{color:var(--muted);flex-shrink:0;}
.wz-kv__row > span:last-child,
.wz-kv__row > a:last-child{text-align:end;min-width:0;overflow:hidden;text-overflow:ellipsis;}

.wz-card__sub{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:4px;}
.wz-card__head > div{min-width:0;}

/* ردیف‌های دامنه و بکاپ داخل صفحهٔ سایت */
/* ردیف دامنه: آیکون، نام و نوع، وضعیت گواهی، و کنش‌ها.
   ستون آخر برای ردیفی که کنشی ندارد خالی می‌ماند و عرض نمی‌گیرد. */
.wz-domrow{grid-template-columns:auto minmax(0,1fr) auto auto;}
.wz-domrow__ops{display:flex;align-items:center;gap:6px;}

/* ---- افزودن دامنهٔ اختصاصی ---------------------------------------------- */
/* فیلد و دکمه در یک خط، و برچسب بالای فیلد — همان شکلی که بقیهٔ فرم‌های این
   پوسته دارند. روی عرض کم، دکمه زیر فیلد می‌رود؛ دکمه‌ای که به ۶۰ پیکسل فشرده
   شود عملاً هدف قابل زدنی نیست. */
.wz-domadd{
  display:flex;align-items:flex-end;gap:10px;
  padding:14px 16px 4px;
}
.wz-domadd__field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0;}
.wz-domadd__field .wz-input{width:100%;}
.wz-domadd .wz-btn{flex-shrink:0;}
.wz-domadd__hint{
  margin:0;padding:0 16px 16px;
  font-size:12px;line-height:2;color:var(--muted);
}
@media (max-width:560px){
  .wz-domadd{flex-direction:column;align-items:stretch;}
  .wz-domadd .wz-btn{width:100%;justify-content:center;}
}
.wz-bkrow{grid-template-columns:auto minmax(0,1fr) auto auto;}

.wz-upgrade{display:flex;flex-direction:column;gap:14px;align-items:flex-start;}
.wz-upgrade p{font-size:13px;line-height:2;color:var(--muted);}
.wz-upgrade strong{color:var(--text);}

/* ------------------------------------------- ۲۹. اصلاح کارت سایت داشبورد -- */
/* auto-fill به‌جای auto-fit یک ستون خالی کنار دو کارت می‌گذاشت که مثل جای خالیِ
   یک کارتِ گم‌شده دیده می‌شد. auto-fit ستون خالی را جمع می‌کند. */
/* کروسل: سه کارت در دید، بقیه با اسکرول افقی.
   grid-auto-flow:column یعنی کارت‌ها در یک ردیف می‌مانند و auto-columns عرض هر
   کدام را دقیقاً یک‌سومِ دید می‌کند (منهای دو خط جداکننده). */
.wz-sitecards{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2px) / 3);
  gap:1px;
  background:var(--line-soft);   /* خط بین کارت‌ها از gap ساخته می‌شود */
}
.wz-carous{
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.wz-carous::-webkit-scrollbar{display:none;}
.wz-carous > .wz-sitecard{scroll-snap-align:start;}

@media (max-width:900px){
  .wz-sitecards{grid-auto-columns:calc((100% - 1px) / 2);}
}
@media (max-width:620px){
  .wz-sitecards{grid-auto-columns:88%;}
}

/* ---- دکمه‌های ورق‌زدن ---------------------------------------------------- */
.wz-card__headact{display:flex;align-items:center;gap:12px;}
.wz-carous__nav{display:flex;gap:4px;}
.wz-carous__btn{
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:var(--r-xs);
  background:var(--surface);color:var(--muted);
  cursor:pointer;
  transition:border-color .15s var(--ease),color .15s var(--ease);
}
.wz-carous__btn:hover{border-color:var(--ink);color:var(--text);}

/* ---- قاب پیش‌نمایش سایت ------------------------------------------------- */
/* سایت با عرض دسکتاپ رندر می‌شود و بعد کوچک می‌شود، وگرنه چیدمان موبایلِ
   سایت را می‌دیدیم که نمای درستی از سایت نیست.
   
   ۴۰۰٪ و scale(.25) به‌جای عدد ثابت: قاب دقیقاً چهار برابر کارت می‌شود و بعد
   دقیقاً به اندازهٔ کارت کوچک، هر عرضی که کارت داشته باشد. با عدد ثابت باید
   عرض کارت را می‌دانستیم که با کروسل و رسپانسیو عوض می‌شود.
   مبدأ بالا-راست است چون صفحه RTL است. */
.wz-sitecard__frame{
  position:absolute;inset:0;
  width:400%;height:400%;
  border:0;
  transform-origin:top right;
  transform:scale(.25);
  pointer-events:none;          /* کارت قابل کلیک بماند، نه قاب */
  opacity:0;
  transition:opacity .25s var(--ease);
  background:var(--surface);
}
.wz-sitecard__frame.is-ready{opacity:1;}
/* وقتی قاب آمد، راه‌راهِ جای‌نگه‌دار زیرش دیده نشود. */
.wz-sitecard__shot:has(.wz-sitecard__frame.is-ready)::before{display:none;}
.wz-sitecard{
  display:flex;flex-direction:column;align-items:stretch;gap:0;
  padding:0;
}
/* ناحیهٔ پیش‌نمایش. تصویر واقعی سایت را ماژول می‌تواند بدهد (weesa_ca_thumb) ولی
   هوک داشبورد هنوز آن را نمی‌آورد؛ تا آن‌وقت یک سطح خنثی با نوار مرورگر است، نه
   یک آیکون وسطِ خالی. */
/* ارتفاع ثابت است نه aspect-ratio: با auto-fit عرض کارت به تعداد سایت‌ها بستگی
   دارد و ۱۶:۹ روی کارتِ ۴۰۰ پیکسلی یک تختهٔ خاکستری ۲۲۵ پیکسلی می‌ساخت. */
.wz-sitecard__shot{
  position:relative;
  display:block;
  height:132px;
  background:
    repeating-linear-gradient(135deg,transparent,transparent 7px,rgba(11,13,26,.012) 7px,rgba(11,13,26,.012) 14px),
    linear-gradient(160deg,var(--surface-2),var(--line-soft));
  border-bottom:1px solid var(--line-soft);
}
/* نوار مرورگر جعلی: جای خالی را عمدی نشان می‌دهد نه ناتمام. وقتی ماژول تصویر
   واقعی بدهد (docs/module-gaps.md، ردیف ۱) این جایش را می‌دهد. */
.wz-sitecard__shot::before{
  content:'';position:absolute;top:12px;inset-inline-start:14px;
  width:6px;height:6px;border-radius:50%;
  background:var(--line);
  box-shadow:10px 0 0 var(--line),20px 0 0 var(--line);
}
.wz-sitecard__shot .wz-st{
  position:absolute;top:10px;inset-inline-end:10px;
}
.wz-sitecard__body{
  display:flex;flex-direction:column;gap:10px;
  padding:14px 16px;min-width:0;
}
.wz-sitecard__title{display:flex;flex-direction:column;gap:2px;min-width:0;color:var(--text);}
.wz-sitecard__title:hover{color:var(--ink);}
.wz-sitecard__name{
  font-weight:600;font-size:14px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* دامنه چپ‌به‌راست خوانده می‌شود ولی باید زیر نام و هم‌تراز با آن بنشیند. کلاس
   عمومی wz-ltr هم جهت و هم چینش را چپ می‌کند و اینجا دامنه را به لبهٔ مخالف
   کارت می‌انداخت. */
.wz-sitecard__dom{
  font-size:12px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  direction:ltr;text-align:right;unicode-bidi:isolate;
}
.wz-sitecard__act{display:flex;gap:6px;}
.wz-sitecard__act .wz-btn{flex:1;}

/* مبلغ در ردیف صورتحساب داشبورد */
.wz-invlist .wz-invrow{grid-template-columns:auto minmax(0,1fr) auto auto auto;}
.wz-invrow__amt{font-weight:600;white-space:nowrap;}

/* دو تیکت آخر در کارت پشتیبانی */
.wz-ticketlist{display:flex;flex-direction:column;}
.wz-ticketrow2{
  display:flex;flex-direction:column;gap:4px;
  padding:12px 20px;color:var(--text);
  border-top:1px solid var(--line-soft);
}
.wz-ticketrow2:first-child{border-top:0;}
.wz-ticketrow2:hover{background:var(--surface-2);color:var(--text);}
.wz-ticketrow2__top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;
}
.wz-ticketrow2__top .wz-cell__t{font-size:13px;}

/* تاریخ در خانهٔ آمار جای عدد را می‌گیرد و ۲۲px برایش خیلی بزرگ است. */
.wz-stat__n--date{font-size:15px;line-height:1.6;}

/* --------------------------------------------- ۳۰. تیکت جدید و انتخاب بخش -- */
.wz-deptgrid{
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  background:var(--line-soft);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.wz-dept{
  display:flex;align-items:center;gap:12px;
  padding:18px 20px;
  background:var(--surface);color:var(--text);
  min-width:0;
}
.wz-dept:hover{background:var(--surface-2);color:var(--text);}
.wz-dept__ic{
  width:38px;height:38px;flex-shrink:0;
  border-radius:var(--r);
  background:var(--line-soft);color:var(--muted-2);
  display:flex;align-items:center;justify-content:center;
}
.wz-dept:hover .wz-dept__ic{color:var(--ink);}
.wz-dept__body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.wz-dept__name{font-size:14px;font-weight:600;}
.wz-dept__sub{font-size:12px;color:var(--muted);line-height:1.8;}

.wz-ticketform{display:flex;flex-direction:column;gap:18px;}
.wz-ticketform__act{
  display:flex;gap:8px;justify-content:flex-end;
  padding-top:4px;
}
/* ورودی فایل استوکِ بوت‌استرپ در RTL سمت اشتباه می‌افتد و ارتفاعش با فرم نمی‌خواند. */
.weesa-next .custom-file{height:40px;}
.weesa-next .custom-file-label{
  height:40px;padding:0 14px;line-height:38px;
  border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);color:var(--muted);font-size:13px;font-weight:400;
}
.weesa-next .custom-file-label::after{display:none;}
.weesa-next .attachment-group{display:flex;gap:8px;align-items:stretch;}
.weesa-next .attachment-group .custom-file{flex:1;min-width:0;}

/* ------------------------------------------------------ ۳۱. حساب کاربری -- */
/* شبکه، نه ستون.
   روی عرض ۱۴۸۰ یک ستونِ تک‌تایی یعنی ورودی‌هایی به پهنای هزار پیکسل برای «نام
   تجاری» یا «کد پستی». حالا فیلدهای تکی خودشان دوتادوتا کنار هم می‌نشینند و
   ردیف‌های wz-row2 و عنوان بخش‌ها تمام‌عرض می‌مانند. */
.wz-acct{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:16px;align-items:start;
}
.wz-acct > .wz-row2,
.wz-acct > .wz-acct__sep,
.wz-acct > .wz-check{grid-column:1/-1;}
.wz-acct__sep{
  font-size:13px;font-weight:600;color:var(--text);
  padding-top:14px;margin-top:2px;
  border-top:1px solid var(--line-soft);
}
.wz-acct__act{display:flex;gap:8px;justify-content:flex-end;}
/* کشوی کشور را خود WHMCS می‌سازد و کلاس wz-input نمی‌گیرد. */
.weesa-next .wz-field select:not(.wz-input),
.weesa-next .wz-field .form-control{
  width:100%;height:40px;padding:0 14px;
  border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);color:var(--text);font-size:14px;
}
/* ---- پنهان‌کننده‌های استوک ------------------------------------------------
   WHMCS برای پنهان‌کردن روی کلاس تکیه می‌کند، نه روی صفت hidden: دکمهٔ «قبلاً
   ثبت‌نام کرده‌اید؟» در تسویه، بخش‌های اعتبار، و نتایج استعلام دامنه همه با
   w-hidden سر جایشان می‌مانند.

   ولی .w-hidden وزنِ (0,1,0) دارد و قواعد این پوسته مثل `.weesa-next .btn`
   وزن (0,2,0). پس دکمه‌ای که WHMCS پنهان کرده بود در تسویه دیده می‌شد و مشتریِ
   واردشده دو دکمهٔ «ایجاد حساب جدید» و «قبلاً ثبت‌نام کرده‌اید؟» جلویش بود.
   !important اینجا همان کاری را می‌کند که نیت WHMCS بوده: پنهان یعنی پنهان.

   d-none عمداً اینجا نیست: بوت‌استرپ آن را جفتِ d-md-block به کار می‌برد و
   !important روی آن یعنی چیزی که باید در دسکتاپ دیده شود هرگز دیده نشود. */
.weesa-next .w-hidden,
.weesa-next [hidden]{display:none !important;}

/* ============================================================================
   ۲۷. اصلاحات بازبینی — موارد بازخورد روی نسخهٔ لایو
   ============================================================================ */

/* ---- کارت شیشه‌ای ------------------------------------------------------- */
/* کانسپت «کیف پول» را مثل خلاصهٔ سفارش شیشه‌ای می‌خواست، نه کارت سفید توپر.
   همان جنسِ هدر چسبان و پنل خلاصهٔ سفارش. */
.wz-card--glass{
  background:rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border-color:rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px rgba(11,13,26,.05);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wz-card--glass{background:rgba(255,255,255,.75);}
}

/* ---- لوگو --------------------------------------------------------------- */
/* تا امروز اگر تنظیمات لوگویی نداشت، حرف اول نام شرکت داخل یک مربع مشکی
   می‌نشست. حالا لوگوی واقعی در خود قالب هست و همان پیش‌فرض است. */
.wz-brand__mark img,
.weesa-login__logo .mk img{
  width:100%;height:100%;object-fit:contain;border-radius:inherit;display:block;
}
.wz-brand__mark:has(img){background:transparent;}

/* ---- کنش خطرناک --------------------------------------------------------- */
/* «درخواست لغو» با بقیهٔ عملیات یک شکل بود. هاور قرمزِ کمرنگ می‌گوید این یکی
   برگشت‌ناپذیر است، بی‌آنکه دکمه همیشه قرمز و ترسناک باشد. */
.wz-op--danger:hover{
  background:var(--bad-bg);color:var(--bad);
}
.wz-op--danger:hover .wz-i{color:var(--bad);}

/* ---- ستون آدرس سایت در کارت داشبورد ------------------------------------- */
.wz-sitecard__dom{display:block;}
a.wz-sitecard__dom:hover{color:var(--link);text-decoration:underline;}

/* ---- صفحه‌های تک‌ستونی ---------------------------------------------------
   حساب کاربری و هم‌خانواده‌هایش یک ستون باریک وسط صفحه بودند و دو طرفشان
   خالی. دو ستونی که کارت‌ها را کنار هم می‌چیند آن فضا را پر می‌کند بی‌آنکه
   هیچ کارتی بازنویسی شود. */
.wz-cols2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  gap:16px;align-items:start;
}
.wz-cols2 > .wz-span2{grid-column:1/-1;}
@media (max-width:760px){
  .wz-cols2{grid-template-columns:minmax(0,1fr);}
}

/* ---- فهرست ویژگی‌ها در ستون تیرهٔ ورود ------------------------------- */
.wz-auth__points{
  list-style:none;margin:18px 0 0;padding:0;
  display:flex;flex-direction:column;gap:9px;
}
.wz-auth__points li{
  display:flex;align-items:center;gap:9px;
  font-size:13px;color:rgba(255,255,255,.72);
}
.wz-auth__points .wz-i{color:rgba(255,255,255,.45);flex-shrink:0;}

/* ---- تنفس فرم ثبت‌نام ---------------------------------------------------- */
/* دکمهٔ «ایجاد گذرواژه» به سنجهٔ قدرت رمز چسبیده بود، و شرط «قوانین خدمات» به
   دکمهٔ ثبت‌نام. چک‌باکسِ چندخطی هم وسط‌چین بود، پس مربع وسطِ متن می‌افتاد. */
.wz-authform .wz-pwmeter{gap:12px;}
.wz-authform .wz-pwmeter .generate-password{align-self:flex-start;margin-top:2px;}
.wz-authform .wz-check{align-items:flex-start;line-height:1.9;}
.wz-authform .wz-check input{margin-top:6px;flex-shrink:0;}
.wz-authform > .wz-btn{margin-top:6px;}
/* نام و دامنه یک جفت‌اند و باید نزدیک هم بمانند؛ .wz-sitecard__body فاصلهٔ ۱۰
   پیکسلی بین بلوک‌هایش دارد که برای این دو زیاد است. */
.wz-sitecard__id{display:flex;flex-direction:column;gap:2px;min-width:0;}

/* ---- رمز مدیر با دکمهٔ چشم ----------------------------------------------- */
.wz-pwcell{display:inline-flex;align-items:center;gap:6px;min-width:0;}
.wz-pwcell__v{overflow-wrap:anywhere;}
.wz-pwcell__eye{
  border:0;background:none;padding:2px;cursor:pointer;
  color:var(--faint);line-height:0;flex-shrink:0;
  border-radius:var(--r-xs);
}
.wz-pwcell__eye:hover{color:var(--text);background:var(--surface-2);}

/* ---- سنجهٔ گزارش‌نشده ---------------------------------------------------- */
/* نوار خالی با «۰٪» شبیه «مصرف صفر» بود؛ حالا نوار راه‌راهِ خنثی می‌گوید عددی
   در کار نیست. دلیلش در weesa.php نوشته شده. */
.wz-usage__item.is-unreported .wz-usage__pct{color:var(--faint);}
.wz-usage__item.is-unreported .wz-meter{
  background:repeating-linear-gradient(135deg,var(--line-soft) 0 6px,var(--surface-2) 6px 12px);
}

/* پوشش دوستونی وقتی سایدبار ندارد: یک ستون، بدون فاصلهٔ اضافه. */
.wz-with-aside--solo{grid-template-columns:minmax(0,1fr);gap:0;}
/* پاورقی ته صفحه. .wz-page با flex:1 کشیده می‌شود و این margin آخرین فرزند را
   به پایین می‌راند — چه پاورقی فرزند مستقیمش باشد چه بعد از آن بیاید. */
.wz-page > .wz-footer{margin-top:auto;}

/* آیتم فعالِ سایدبار — همان نشانه‌ای که نوار فیلتر بالای فهرست می‌دهد. */
.wz-side__item.is-on{background:var(--surface-2);color:var(--text);font-weight:600;}
.wz-side__item.is-on .wz-side__ic{color:var(--ink);}

/* ============================================================================
   ۲۸. صفحهٔ تیکت و صفحهٔ فاکتور — چیدمان دوستونی کانسپت
   ============================================================================ */

/* ---- پنل چسبانِ شیشه‌ای --------------------------------------------------
   کانسپت کنار هر دو صفحه یک پنل دارد با همان جنسِ خلاصهٔ سفارش. اینجا تعریف
   می‌شود نه در order.css، چون order.css فقط روی صفحه‌های سبد بار می‌شود. */
.wz-panel{
  background:rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 0 0 1px rgba(11,13,26,.05);
  border-radius:var(--r-lg);
  overflow:hidden;
  position:sticky;top:calc(var(--header-h) + var(--tabs-h) + 16px);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wz-panel{background:rgba(255,255,255,.75);}
}
.wz-panel__head{padding:14px 20px;font-size:15px;font-weight:600;color:var(--text);}
.wz-panel__row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 20px;border-top:1px solid var(--line-soft);
  font-size:13px;color:var(--muted);
}
.wz-panel__row strong{font-weight:600;color:var(--text);text-align:left;min-width:0;}
.wz-panel__foot{padding:14px 20px;border-top:1px solid var(--line-soft);}

/* دکمهٔ خطرناک در حالت ثانویه — «بستن تیکت» همیشه قرمز نیست، فقط روی هاور. */
.wz-btn--danger:hover{
  background:var(--bad-bg);color:var(--bad);border-color:transparent;
}
.wz-btn--danger:hover .wz-i{color:var(--bad);}

/* ---- چیدمان ------------------------------------------------------------- */
.wz-ticket,
.wz-inv{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;}
.wz-ticket__main{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:16px;}
.wz-ticket__side{flex:1 1 260px;}

.wz-ticket__head{display:flex;flex-direction:column;gap:6px;}
.wz-ticket__num{font-size:12px;color:var(--muted);}
.wz-ticket__head h1{margin:0;font-size:20px;font-weight:600;letter-spacing:-.2px;color:var(--text);}

/* ---- پیام‌های گفت‌وگو ---------------------------------------------------- */
.wz-msg{
  border-radius:var(--r-lg);
  padding:18px 20px;
  display:flex;flex-direction:column;gap:10px;
  background:var(--surface);
  border:1px solid var(--line);
}
/* پیام پشتیبانی کمی متمایز، تا نگاه بفهمد کدام طرف حرف زده. */
.wz-msg.is-staff{background:var(--surface-2);border-color:var(--line-strong);}

.wz-msg__head{display:flex;align-items:center;gap:10px;}
.wz-msg__av{
  width:32px;height:32px;flex-shrink:0;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:600;
  background:var(--neutral-bg);color:var(--muted);
}
.wz-msg.is-staff .wz-msg__av{background:var(--ink);color:#fff;}
.wz-msg__who{flex:1;display:flex;flex-direction:column;min-width:0;}
.wz-msg__name{font-size:13px;font-weight:600;color:var(--text);}
.wz-msg__role{font-size:11px;color:var(--muted);}
.wz-msg__time{font-size:12px;color:var(--faint);white-space:nowrap;}

.wz-msg__body{font-size:14px;line-height:2;color:var(--text);overflow-wrap:anywhere;}
.wz-msg__body p:last-child{margin-bottom:0;}
.wz-msg__body img{max-width:100%;height:auto;border-radius:var(--r);}

.wz-msg__files{display:flex;flex-wrap:wrap;gap:8px;padding-top:4px;}
.wz-file{
  display:inline-flex;align-items:center;gap:6px;
  max-width:100%;
  padding:6px 10px;
  border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);color:var(--text);
  font-size:12px;text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.wz-file:hover{border-color:var(--ink);color:var(--text);}
.wz-file .wz-i{color:var(--muted-2);flex-shrink:0;}
.wz-file.is-gone{color:var(--faint);text-decoration:line-through;}

/* ---- جعبهٔ پاسخ ---------------------------------------------------------- */
.wz-reply{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.wz-reply:focus-within{border-color:var(--ink);}
.wz-reply__text{
  width:100%;min-height:120px;
  border:0;outline:none;resize:vertical;
  padding:16px 20px;
  background:transparent;color:var(--text);
  font-family:inherit;font-size:14px;line-height:1.9;
}
.wz-reply__bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;
  border-top:1px solid var(--line-soft);
  background:var(--surface-2);
}
.wz-reply__clip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--muted);cursor:pointer;
}
.wz-reply__clip:hover{color:var(--text);}
.wz-reply__clip input[type="file"]{
  /* پنهان ولی قابل فوکوس با کیبورد — display:none آن را از دسترس خارج می‌کرد. */
  position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
}
.wz-reply__hint{margin:0;font-size:12px;color:var(--faint);line-height:1.9;}
.wz-reply__who{margin-bottom:-4px;}

@media (max-width:900px){
  .wz-ticket__side,
  .wz-inv__side{position:static;}
}

/* ---- صفحهٔ صورتحساب ------------------------------------------------------ */
.wz-inv__doc{
  flex:1 1 520px;min-width:0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.wz-inv__side{flex:1 1 300px;}

.wz-inv__head{
  padding:24px;
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--line-soft);
}
.wz-inv__ident{display:flex;flex-direction:column;gap:8px;min-width:0;}
.wz-inv__title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.wz-inv__title h1{margin:0;font-size:20px;font-weight:600;letter-spacing:-.2px;color:var(--text);}
.wz-inv__dates{font-size:13px;color:var(--muted);}
.wz-inv__tools{display:flex;gap:8px;flex-shrink:0;}

.wz-inv__parties{
  padding:20px 24px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:24px;
  border-bottom:1px solid var(--line-soft);
  font-size:13px;line-height:1.9;
}
.wz-inv__party{display:flex;flex-direction:column;min-width:0;}
.wz-inv__party strong{color:var(--text);font-weight:600;}
.wz-inv__party span{color:var(--muted);overflow-wrap:anywhere;}
.wz-inv__partyk{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:2px;}
.wz-inv__payto{color:var(--muted);}
.wz-inv__payto strong,.wz-inv__payto b{color:var(--text);}

/* اقلام: همان دو ستونِ کانسپت — شرح کشسان، مبلغ ثابت. */
.wz-inv__itemshead,
.wz-inv__item{
  display:grid;grid-template-columns:minmax(0,1fr) 160px;gap:12px;
}
.wz-inv__itemshead{
  padding:12px 24px;background:var(--surface-2);
  font-size:12px;color:var(--muted);font-weight:600;
}
.wz-inv__itemshead span:last-child,
.wz-inv__itema{text-align:left;}
.wz-inv__item{
  padding:16px 24px;border-bottom:1px solid var(--line-soft);
  font-size:13px;color:var(--text);
}
.wz-inv__itemd{white-space:pre-line;overflow-wrap:anywhere;}
.wz-inv__itema{font-weight:600;white-space:nowrap;}

.wz-inv__totals{
  padding:16px 24px;
  display:flex;flex-direction:column;gap:10px;align-items:flex-end;
  font-size:13px;
}
.wz-inv__trow{display:flex;gap:40px;}
.wz-inv__trow > span:first-child{color:var(--muted);}
.wz-inv__trow > span:last-child{min-width:120px;text-align:left;white-space:nowrap;}
.wz-inv__trow--total{
  font-size:16px;font-weight:600;color:var(--text);
  padding-top:10px;border-top:1px solid var(--line-soft);
}
.wz-inv__trow--total > span:first-child{color:var(--text);}

.wz-inv__note{margin:0;padding:0 24px 16px;font-size:12px;color:var(--faint);}
.wz-inv__notes,
.wz-inv__tx{
  padding:16px 24px;border-top:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:8px;font-size:13px;
}
.wz-inv__txrow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:8px 0;border-bottom:1px solid var(--line-soft);
}
.wz-inv__txrow:last-child{border-bottom:0;}
.wz-inv__txrow > div{display:flex;flex-direction:column;gap:2px;min-width:0;}
.wz-inv__txrow .wz-mono{font-size:12px;color:var(--muted);}
.wz-inv__txright{align-items:flex-end;text-align:left;}
.wz-inv__txdate{font-size:12px;color:var(--muted);}

/* ---- پنل پرداخت ---------------------------------------------------------- */
.wz-paylist{display:flex;flex-direction:column;gap:8px;padding:0 20px 4px;}
.wz-pay{
  display:flex;align-items:center;gap:12px;
  padding:14px;border-radius:var(--r);cursor:pointer;
  border:1px solid var(--line-strong);background:var(--surface);
  transition:border-color .15s var(--ease);
}
.wz-pay:hover{border-color:var(--ink);}
.wz-pay.is-on{border-color:var(--ink);}
.wz-pay input{position:absolute;opacity:0;width:1px;height:1px;}
.wz-pay__ring{
  width:18px;height:18px;border-radius:50%;flex-shrink:0;
  border:1.5px solid var(--ring);
}
.wz-pay.is-on .wz-pay__ring{border:5px solid var(--ink);}
.wz-pay__name{flex:1;font-size:13px;font-weight:600;color:var(--text);}
.wz-pay .wz-i{color:var(--muted-2);}

.wz-inv__paybox{
  padding:16px 20px;border-top:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:12px;
}
.wz-inv__amount{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:13px;color:var(--muted);
}
.wz-inv__amount strong{font-size:18px;font-weight:600;color:var(--text);}

/* دکمهٔ پرداخت را ماژول درگاه می‌سازد و کلاسی روی آن نمی‌گذارد. */
.weesa-next .wz-inv__paybtn form{margin:0;}
.weesa-next .wz-inv__paybtn input[type="submit"],
.weesa-next .wz-inv__paybtn button[type="submit"]{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:40px;
  border:0;border-radius:var(--r);
  background:var(--ink);color:#fff;
  font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;
}
.weesa-next .wz-inv__paybtn input[type="submit"]:hover,
.weesa-next .wz-inv__paybtn button[type="submit"]:hover{background:#2a2e48;}
.wz-inv__secure{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12px;color:var(--muted);
}
.wz-inv__secure .wz-i{color:var(--faint);}

.wz-inv__credit{display:flex;flex-direction:column;gap:8px;}
.wz-inv__creditnote{font-size:12px;color:var(--muted);line-height:1.9;}
.wz-inv__creditrow{display:flex;gap:8px;}
.wz-inv__creditrow .wz-input{flex:1;min-width:0;}

/* حالت پرداخت‌شده */
.wz-inv__done{
  padding:24px 20px;
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
}
.wz-inv__doneic{
  width:52px;height:52px;border-radius:50%;
  background:var(--ok-bg);color:var(--ok);
  display:flex;align-items:center;justify-content:center;
}
.wz-inv__doneic.is-neutral{background:var(--neutral-bg);color:var(--muted);}
.wz-inv__done strong{font-size:16px;font-weight:600;color:var(--text);}
.wz-inv__doneamt{font-size:13px;color:var(--muted);}

.wz-inv__back{
  display:inline-flex;align-items:center;gap:6px;
  align-self:flex-start;
  font-size:13px;color:var(--muted);text-decoration:none;
}
.wz-inv__back:hover{color:var(--text);}

/* چاپ: فقط سند. */
@media print{
  .wz-inv{display:block;}
  .wz-inv__doc{border:1px solid #ddd;}
  .wz-inv__side,.wz-inv__back{display:none !important;}
}

/* ============================================================================
   ۲۹. پاپ‌اورها — جعبه‌ای که سمت راست صفحه باز می‌شد
   ============================================================================ */

/* پاپ‌اور نوتیفیکیشن زیرِ دکمه‌اش باز نمی‌شد؛ می‌رفت گوشهٔ راستِ صفحه. علتش
   یک خط در theme.css است:

       .popover{ position:absolute; top:0; right:0; }

   که ترجمهٔ راست‌به‌چپِ «left:0»ِ بوت‌استرپ است — و همان‌جا می‌شکند. بوت‌استرپ ۴
   جای پاپ‌اور را با Popper و یک transform حساب می‌کند، و Popper همیشه از گوشهٔ
   چپ-بالا شروع می‌کند: خودش inline می‌نویسد top:0;left:0 و بعد translate3d.

   حالا هم left:0 داریم هم right:0 هم عرض مشخص. این یعنی جعبه over-constrained
   است، و CSS در این حالت یکی را دور می‌اندازد — در ظرفِ راست‌به‌چپ، left را.
   پس مبدأ می‌شد لبهٔ راستِ body و transformِ Popper هم از همان‌جا جلو می‌رفت.
   اندازه‌گیری شد: دکمه در ۱۹۳ و جعبه در ۱۱۸۵.

   برگرداندنِ مبدأ به چپ کافی است؛ transform دست‌نخورده می‌ماند و خودش کار را
   درست انجام می‌دهد (دوباره اندازه‌گیری شد: مرکز جعبه و مرکز دکمه هر دو ۲۱۰).
   این برای همهٔ پاپ‌اورهاست نه فقط نوتیف — پاپ‌اورِ CVV در صفحهٔ روش پرداخت
   هم همین اشکال را داشت. */
.weesa-next .popover{ right:auto; left:0; }

/* شمارهٔ مشتری کنار نام. رنگ و اندازه‌اش عمداً از نام کم‌تر است — شناسه است،
   نه عنوان؛ باید در دسترس باشد و چشم را نگیرد. برچسب شرکت هم همین وزن را
   دارد و این دو کنار هم می‌نشینند. */
.wz-account__id{
  font-size:11px;color:var(--muted-2);
  letter-spacing:.02em;white-space:nowrap;flex-shrink:0;
}

/* روی موبایل، مثل برچسب شرکت، جا برای اسم باز می‌کند. */
@media (max-width:640px){
  .wz-account__id{display:none;}
}

/* فونتِ پاپ‌اور. theme.css برای این دو یکی `var(--font-family-sans-serif)`ِ
   بوت‌استرپ را می‌گذارد و دیگری صریحاً 'Open Sans' — هر دو لاتین‌اند، پس متن
   فارسیِ داخل جعبه با فونتِ پیش‌فرضِ سیستم رندر می‌شد و کنارِ بقیهٔ صفحه
   ناجور بود. body فونت درست را دارد؛ فقط باید ارث برسد. */
.weesa-next .popover,
.weesa-next .popover-user-notifications{ font-family:var(--font); }

/* ============================================================================
   ۳۰. صفحهٔ سایت — داده‌هایی که پنل تازه می‌دهد
   ============================================================================ */

/* ردیف بکاپ یک ستون بیشتر گرفت: دانلود و بازگردانی. */
.wz-bkrow{grid-template-columns:auto minmax(0,1fr) auto auto auto;}

.wz-bkops{display:flex;align-items:center;gap:4px;}
/* بکاپ دستی ۴۸ ساعت بعد پاک می‌شود؛ زیر ردیفش تاریخ و درخواست دانلود. */
.wz-bkwarn{display:block;margin-top:4px;font-size:12px;line-height:1.8;color:var(--warn);}

/* ---- کارِ در جریان ------------------------------------------------------ */
/* بکاپ در پس‌زمینهٔ سرور می‌رود، پس صفحه باید بگوید چیزی در جریان است بی آنکه
   مشتری را منتظر نگه دارد. */
.wz-note{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;margin:0 16px 12px;
  border:1px solid var(--line);border-radius:var(--r);
  font-size:13px;color:var(--muted);
}
.wz-note--busy{background:var(--surface-2,#f7f7fa);}

@keyframes wz-spin{to{transform:rotate(360deg);}}
.wz-spin{animation:wz-spin 1s linear infinite;transform-origin:50% 50%;}
/* چرخشِ بی‌پایان برای کسی که حرکت برایش آزاردهنده است، آزاردهنده‌تر است. */
@media (prefers-reduced-motion:reduce){
  .wz-spin{animation:none;}
}

/* دکمه‌ای که فعلاً کاری نمی‌کند باید هم شبیه آن باشد و هم کلیک را نگیرد. */
.wz-btn.is-disabled{opacity:.6;pointer-events:none;cursor:default;}

/* دکمهٔ آیکونیِ ردیف. اندازه‌اش عمداً ۳۲ است نه کمتر: روی لمس، هرچه کوچک‌تر از
   این یعنی خطای کلیک — و یکی از این سه دکمه بازگردانی است. */
.wz-ibtn{
  width:32px;height:32px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--muted);
  transition:border-color .15s var(--ease),color .15s var(--ease);
}
.wz-ibtn:hover{border-color:var(--line-strong);color:var(--text);}
.wz-ibtn--danger:hover{border-color:var(--bad);color:var(--bad);}

/* رکوردهای DNS: نوع، نام، مقدار. */
.wz-dnsrow{grid-template-columns:auto minmax(0,1fr) minmax(0,1.6fr);}

.wz-badge{
  display:inline-flex;align-items:center;
  height:22px;padding:0 8px;border-radius:var(--r-xs);
  background:var(--neutral-bg);color:var(--muted-2);
  font-size:11px;font-weight:600;letter-spacing:.04em;
}

/* فرم تغییر رمز. */
.wz-pwform{display:flex;flex-direction:column;gap:14px;padding:16px 20px;}
.wz-pwform__foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}

@media (max-width:720px){
  /* روی موبایل ستون‌های دانلود زیر ردیف می‌روند، وگرنه نام فایل له می‌شود. */
  .wz-bkrow{grid-template-columns:auto minmax(0,1fr) auto;}
  .wz-bkops{grid-column:1 / -1;justify-content:flex-end;}
  .wz-dnsrow{grid-template-columns:auto minmax(0,1fr);}
}

/* اسکرین‌شاتِ ذخیره‌شدهٔ کارت سایت.
   قابِ زندهٔ <iframe> باید مقیاس بخورد چون صفحهٔ کامل را رندر می‌کند؛ این یکی
   از قبل در همان نسبت ذخیره شده، پس فقط باید جا را پر کند. */
.wz-sitecard__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  border:0;
}

/* ===================================================== ۲۶. نمای تلفن ====== */
/*
   این پوسته تا امروز کوچک‌ترین نقطهٔ شکستش ۶۲۰ پیکسل بود، یعنی روی تلفن همان
   چیدمان تبلت فشرده می‌شد. نتیجه‌اش را می‌شد شمرد: ردیف‌های گریدی با قاعدهٔ
   `grid-template-columns:1fr !important` به پنج سطر پشت سر هم تبدیل می‌شدند و
   یک فاکتور، نیم صفحه ارتفاع می‌گرفت — شماره، عنوان، تاریخ، مبلغ، وضعیت و یک
   فلشِ تنها، هر کدام روی خط خودش.

   این بلوک برای تلفن است، نه برای «کوچک». دو ستون کافی است: متن از یک طرف و
   عدد و وضعیت از طرف دیگر.
*/
@media (max-width:480px){

  /* حاشیهٔ صفحه: ۲۰ پیکسل از هر طرف روی ۳۹۰ یعنی ۱۰ درصد عرض صرف حاشیه. */
  .wz-card__head,.wz-row,.wz-card__body{padding-inline:14px;}

  /* ---- ردیف فاکتور: دو خط، نه پنج ---- */
  .wz-invrow{
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "num    status"
      "title  amount";
    align-items:center;
    gap:4px 10px;
  }
  .wz-invrow > :nth-child(1){grid-area:num;}
  .wz-invrow > :nth-child(2){grid-area:title;min-width:0;}
  .wz-invrow > :nth-child(3){grid-area:amount;text-align:end;white-space:nowrap;}
  .wz-invrow > :nth-child(4){grid-area:status;justify-self:end;}
  /* فلش تزئین است و کل ردیف لینک است؛ روی تلفن فقط یک سطر خالی می‌شد. */
  .wz-invrow .wz-row__chev{display:none;}

  /* ---- ردیف سایت در «سایت‌های من» ---- */
  .wz-siterow{
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "main   status"
      "plan   due"
      "act    act";
    gap:6px 10px;align-items:center;
  }
  .wz-siterow > :nth-child(1){grid-area:main;min-width:0;}
  .wz-siterow__plan{grid-area:plan;}
  .wz-siterow > :nth-child(3){grid-area:status;justify-self:end;}
  .wz-siterow > :nth-child(4){grid-area:due;justify-self:end;text-align:end;}
  .wz-siterow__act{grid-area:act;justify-content:stretch;gap:8px;margin-top:4px;}
  .wz-siterow__act .wz-btn{flex:1;justify-content:center;}

  /* ---- نوار بالا ---- */
  /* تب‌ها افقی اسکرول می‌شوند (overflow-x:auto از قبل هست). حاشیهٔ داخلی کم
     می‌شود تا تب اول از لبه شروع نشود ولی جا هم هدر نرود. */
  .wz-tabs{padding-inline:14px;gap:2px;}
  .wz-tab{padding-inline:10px;}

  /* ---- کارت‌های سایت در داشبورد ----
     یک کارت، تمام عرض. با ۹۲٪ لبهٔ کارت بعدی پیدا بود و چون متنِ داخل کارت تا
     همان لبه می‌آید، آنچه دیده می‌شد تکه‌های بریدهٔ نام و دامنه بود — شبیه
     چیزی خراب، نه شبیه «کارت بعدی هست». دکمه‌های ورق‌زدن بالای کارت همان
     نشانه را بی ابهام می‌دهند. */
  .wz-sitecards{grid-auto-columns:100%;}

  /* ---- بنرها ---- */
  /* روی تلفن ستون‌ها زیر هم‌اند، پس بنر دیگر فاصله‌ای برای پرکردن ندارد و
     ارتفاعش باید از نسبت تصویر بیاید نه از کشیدگی ستون. */
  .wz-stories{min-height:0;aspect-ratio:16 / 9;}

  /* ---- سرصفحهٔ صفحه ---- */
  .wz-head__actions{flex-wrap:wrap;}
  .wz-head__actions .wz-btn{flex:1 1 140px;justify-content:center;}

  /* ---- هشدار بالای داشبورد ---- */
  /* متن و دکمه زیر هم؛ کنار هم، متن به سه کلمه در هر خط می‌رسید. */
  .wz-alert,.wz-notice{flex-direction:column;align-items:stretch;gap:10px;}
  .wz-alert .wz-btn,.wz-notice .wz-btn{width:100%;justify-content:center;}
}

/* ============================================================================
   ۳۲. صفحهٔ سایت، «سایت‌های من» و صورتحساب‌ها — بازخورد ۲۰۲۶-۱۰-۰۵
   ============================================================================ */

/* ---- افزودن دامنه: دکمه هم‌تراز فیلد ------------------------------------
   فیلد یک <label> است و بوت‌استرپ به هر label فاصلهٔ پایینی ۸ پیکسلی می‌دهد.
   با align-items:flex-end لبهٔ پایینِ آن فاصله با لبهٔ پایینِ دکمه یکی می‌شد، نه
   خودِ ورودی؛ پس دکمه ۸ پیکسل پایین‌تر از ورودی می‌نشست. ارتفاع هم دو تا بود:
   ورودی ۴۰ و دکمه ۳۶. */
.wz-domadd__field{margin:0;}
.wz-domadd .wz-btn{height:40px;}

/* ---- دامنه‌های متصل: نام دامنه کنار آیکون --------------------------------
   wz-ltr هم جهت را چپ‌به‌راست می‌کند و هم چینش را چپ؛ در ستونِ کنار آیکون یعنی
   دامنه به لبهٔ دورِ ستون می‌رفت. جهت می‌ماند (دامنه لاتین است)، چینش راست. */
.wz-domrow .wz-cell .wz-ltr,
.wz-dnsrow .wz-cell .wz-ltr{text-align:right;}

/* ---- وضعیت وردپرس: کاشی‌ها زیر «عملیات سریع» ---------------------------- */
.wz-wpst{
  display:grid;gap:1px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
  background:var(--line-soft);
}
.wz-wpst__i{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  background:var(--surface);
  min-width:0;
}
.wz-wpst__ic{
  width:34px;height:34px;flex-shrink:0;
  border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  background:var(--neutral-bg);color:var(--muted-2);
}
.wz-wpst__i.is-ok .wz-wpst__ic{background:var(--ok-bg);color:var(--ok);}
.wz-wpst__i.is-warn .wz-wpst__ic{background:var(--warn-bg);color:var(--warn);}
.wz-wpst__i.is-bad .wz-wpst__ic{background:var(--bad-bg);color:var(--bad);}
.wz-wpst__body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.wz-wpst__k{font-size:12px;color:var(--muted);}
.wz-wpst__v{font-size:13px;font-weight:500;color:var(--text);line-height:1.7;overflow-wrap:anywhere;}
.wz-wpst__i.is-warn .wz-wpst__v{color:var(--warn);}
.wz-wpst__i.is-bad .wz-wpst__v{color:var(--bad);}
.wz-wpst__note{
  display:flex;align-items:flex-start;gap:8px;
  padding:12px 18px;
  border-top:1px solid var(--line-soft);
  font-size:12px;line-height:1.9;color:var(--warn);
}
.wz-wpst__note .wz-i{margin-top:4px;}

/* ---- «سایت‌های من»: کارت برای فعال و معلق، ردیف برای بقیه ---------------- */
.wz-sechead{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:4px 0 -4px;
}
.wz-sechead h2{font-size:14px;}
.wz-sechead__n{font-size:12px;color:var(--muted);}

.wz-scards{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));
}
.wz-scards > .wz-sitecard{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.wz-scards > .wz-sitecard:hover{border-color:var(--line-strong);box-shadow:0 4px 18px rgba(11,13,26,.06);}
.wz-scards .wz-sitecard__shot{height:158px;overflow:hidden;}
/* سایت معلق: تصویرِ آخرین حالتِ فعالش، کم‌رنگ — تا اشتباه گرفته نشود. */
.wz-sitecard.is-suspended .wz-sitecard__img{filter:grayscale(1);opacity:.55;}
.wz-sitecard__meta strong{font-weight:500;color:var(--text);}
.wz-scards .wz-sitecard__act .wz-btn{flex:1;}

/* ---- صفحه‌بندی ------------------------------------------------------------- */
.wz-pager{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 20px;
  border-top:1px solid var(--line);
  background:var(--surface-2);
  font-size:12px;color:var(--muted);
}
.wz-pager__pages{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.wz-pager__b{
  min-width:30px;height:30px;padding:0 8px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);
  font-family:inherit;font-size:12px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.wz-pager__b:hover:not(:disabled){border-color:var(--ink);}
.wz-pager__b.is-on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600;}
.wz-pager__b:disabled{opacity:.4;cursor:default;}
.wz-pager__gap{padding:0 2px;color:var(--faint);}
/* جای تصویرِ کارتی که هنوز اسکرین‌شات ندارد. تصویر، اگر بیاید، رویش می‌نشیند. */
.wz-sitecard__ph{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--faint);font-size:30px;
}

/* ---- ویرایشگر مارک‌داونِ تیکت --------------------------------------------- */
/* WHMCS textarea ی تیکت را با bootstrap-markdown می‌پوشاند و all.css برایش
   Menlo/Consolas (مونواسپیس) و پس‌زمینهٔ خاکستری می‌گذارد؛ فارسی در آن فونتِ
   جداگانه‌ای می‌گرفت و با بقیهٔ پنل نمی‌خواند. اینجا به فونت و فرمِ بقیهٔ
   فیلدها برمی‌گردد. */
.weesa-next .md-editor{
  border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);overflow:hidden;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.weesa-next .md-editor.active{
  border-color:var(--ink);box-shadow:0 0 0 3px rgba(11,13,26,.08);
}
.weesa-next .md-editor>.md-header,
.weesa-next .md-editor .md-footer{background:var(--surface-2);padding:6px 8px;}
.weesa-next .md-editor>textarea,
.weesa-next .md-editor>.md-preview{
  font-family:var(--font);font-size:14px;line-height:2;color:var(--text);
}
.weesa-next .md-editor>textarea{
  background:var(--surface);padding:12px 14px;border-color:var(--line);
}
.weesa-next .md-editor>textarea:focus{background:var(--surface);}
.weesa-next .md-editor>.md-preview{background:var(--surface);padding:12px 14px;border-color:var(--line);}
/* بلوک کد داخل پیش‌نمایش هنوز مونواسپیس می‌ماند — آنجا درست است. */
.weesa-next .md-editor>.md-preview code,
.weesa-next .md-editor>.md-preview pre{font-family:var(--mono);}

/* ---- جعبهٔ نیم‌سرورها (صفحهٔ دامنه) ---------------------------------------- */
.wz-nslist{display:flex;flex-direction:column;}
.wz-nsrow{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 20px;border-top:1px solid var(--line);
}
.wz-nsrow:first-child{border-top:0;}
.wz-nsrow .wz-mono{font-size:13px;direction:ltr;unicode-bidi:plaintext;min-width:0;overflow-wrap:anywhere;}