/* ============================================================
   NEBULA — پایه مشترک طراحی برای همه صفحات پنل مشتریان WHMCS
   ============================================================ */
:root{
  --bg:#F5F6FB; --card:#FFFFFF; --cardh:#FFFFFF; --line:#E3E5F0;
  --text:#14141C; --muted:#5A5A72; --v:#7C3AED; --c:#0891B2; --pink:#DB2777; --green:#059669; --amber:#B45309; --red:#E11D48;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
body.nebula-body{font-family:'Vazirmatn',Tahoma,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden;}
body.nebula-body a{color:inherit;}

/* all.min.css (بارگذاری‌شده قبل از این فایل) فونت Estedad را با !important
   روی body,h1-h6,p,a,ul,li,input,button,select,option اعمال می‌کند. برای
   اینکه فونت واقعی نبولا (Vazirmatn) روی صفحات این قالب برنده شود، همان
   فهرست عناصر اینجا با اختصاصیت بالاتر (body.nebula-body + عنصر) و
   !important بازنویسی می‌شود — بدون دست‌زدن به all.min.css، پس صفحات
   دیگری که از آن فایل استفاده می‌کنند (مثل store/*.tpl و oauth/*.tpl که
   nebula.css را اصلاً لود نمی‌کنند) دست‌نخورده می‌مانند. */
body.nebula-body,
body.nebula-body h1, body.nebula-body h2, body.nebula-body h3,
body.nebula-body h4, body.nebula-body h5, body.nebula-body h6,
body.nebula-body p, body.nebula-body a, body.nebula-body ul, body.nebula-body li,
body.nebula-body input, body.nebula-body button, body.nebula-body select, body.nebula-body option{
  font-family:'Vazirmatn',Tahoma,sans-serif !important;
}

/* این قالب فرزندِ Twenty-One است و اسکریپت/CSS پایه از والد به ارث می‌رسد؛
   برای جلوگیری از هرگونه تداخل کلاس‌های همنام (.sidebar/.container و...)
   بین CSS والد و نبولا، ساختار اصلی صفحه با اولویت بالا (!important) و
   دامنه‌بندی‌شده به body.nebula-body قفل می‌شود. */
body.nebula-body .layout{display:flex !important; min-height:100vh; width:100%;}

/* ===== SIDEBAR ===== */
body.nebula-body .nebula-aside{width:252px !important; max-width:252px; background:rgba(255,255,255,.02); border-left:1px solid var(--line); padding:24px 14px; display:flex !important; flex-direction:column !important; gap:4px; backdrop-filter:blur(14px); position:relative; z-index:5; flex-shrink:0 !important; float:none !important;}
.brand{display:flex; align-items:center; gap:10px; margin-bottom:24px; padding:0 8px;}
.brand .mark{width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,#8B5CF6,#22D3EE) !important; display:flex; align-items:center; justify-content:center; font-weight:800; color:#06060A; font-size:16px; box-shadow:0 0 20px rgba(139,92,246,.5);}
.brand .name{font-weight:700; font-size:16px;}
.brand .name span{display:block; font-size:11px; font-weight:400; color:var(--muted);}
.nav a{display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:10px 12px; border-radius:10px; color:var(--muted); text-decoration:none; font-size:13.5px; margin-bottom:2px; transition:.2s;}
.nav a .l{display:flex; align-items:center; gap:10px; min-width:0; white-space:nowrap;}
.nav a:hover{background:rgba(255,255,255,.04); color:var(--text);}
.nav a.active{background:linear-gradient(90deg, rgba(139,92,246,.2), rgba(34,211,238,.05)); color:#fff; box-shadow:inset 2px 0 0 #8B5CF6 !important;}
.nav a .pill{background:#F43F5E !important; color:#fff !important; font-size:9.5px !important; font-weight:700 !important; padding:1px 6px !important; border-radius:10px !important; margin-inline-start:auto; margin-inline-end:0; flex-shrink:0;}
.nav-group-label{font-size:10.5px; color:var(--muted); margin:14px 10px 6px;}

/* ===== سایدبار آکاردئونی (منوی کشویی) ===== */
/* منوی سایدبار همیشه عمودی باشد — والدِ Twenty-One (.nav بوت‌استرپ)
   آن را به‌صورت ردیفِ wrap چیده که در دسکتاپ موجب به‌هم‌ریختگی می‌شود.
   این قاعده با اختصاصیت بالا (body.nebula-body) بر آن غلبه می‌کند. */
body.nebula-body .nav.neb-accordion{display:flex !important; flex-direction:column !important; flex-wrap:nowrap !important; width:100%; gap:2px;}
.nav .nav-group{position:relative; overflow:hidden;}


.nav .nav-toggle{
  display:flex; align-items:center; justify-content:flex-start; gap:10px;
  width:100%; padding:10px 12px; border:none; border-radius:10px;
  background:transparent; color:var(--muted); font-size:13.5px; font-family:inherit;
  text-align:start; cursor:pointer; margin-bottom:2px; transition:background .2s, color .2s;
}
.nav .nav-toggle:hover{background:rgba(255,255,255,.04); color:var(--text);}
.nav .nav-toggle .l{display:flex; align-items:center; gap:10px; min-width:0; white-space:nowrap; flex:0 0 auto;}
.nav .nav-toggle .pill{background:#F43F5E !important; color:#fff !important; font-size:9.5px !important; font-weight:700 !important; padding:1px 6px !important; border-radius:10px !important; flex-shrink:0;}
.nav .nav-toggle .caret{font-size:10px; line-height:1; color:var(--muted); flex-shrink:0; transition:transform .25s; margin-inline-start:auto;}
.nav .nav-group.open .nav-toggle{color:var(--text); background:rgba(255,255,255,.05);}
.nav .nav-group.open .nav-toggle:hover{background:rgba(255,255,255,.08);}
.nav .nav-group.open .nav-toggle .caret{transform:rotate(180deg); color:var(--c);}
.nav .nav-sub{max-height:0; opacity:0; overflow:hidden; transition:max-height .32s ease, opacity .25s ease, padding .32s ease; padding-inline-start:10px;}
.nav .nav-group.open .nav-sub{max-height:420px; opacity:1;}
.nav .nav-sub a{margin-bottom:1px; padding:8px 12px; font-size:13px;}
.nav .nav-sub a .l{gap:8px;}
.nav .nav-logout{border-top:1px solid var(--line); margin-top:10px; padding-top:12px;}
.nav .nav-logout:hover{background:rgba(248,113,113,.08); color:#F87171;}
.promo-card{margin:14px 4px; padding:14px; border-radius:14px;

 background:linear-gradient(135deg, rgba(139,92,246,.18), rgba(34,211,238,.1)); border:1px solid rgba(139,92,246,.3); position:relative; overflow:hidden;}
.promo-card .glow{position:absolute; width:80px; height:80px; background:var(--v); border-radius:50%; filter:blur(30px); top:-30px; left:-20px; opacity:.5;}
.promo-card p{font-size:11.5px; position:relative; z-index:2; line-height:1.6; color:#E8E5FF;}
.promo-card a{display:block; margin-top:8px; font-size:11px; color:var(--c); text-decoration:none; font-weight:700; position:relative; z-index:2;}
.user-box{margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--card); border:1px solid var(--line); order:10;}
.promo-card{order:9;}
.brand{order:0;}
.nav{order:1;}
.neb-sidebar-slot{order:2;}
.avatar{width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,var(--v),var(--pink)); flex-shrink:0; position:relative;}
.avatar::after{content:''; width:9px; height:9px; background:#34D399 !important; border:2px solid #0E0E14; border-radius:50%; position:absolute; bottom:-2px; left:-2px;}
.user-box .u{font-size:12.5px;}
.user-box .u span{display:block; color:var(--muted); font-size:11px;}

/* ===== MAIN ===== */
body.nebula-body .main{flex:1 1 auto !important; width:auto !important; padding:22px 30px 30px; max-width:1280px; position:relative; min-width:0;}
.main::before{content:''; position:fixed; width:500px; height:500px; background:radial-gradient(circle, rgba(139,92,246,.18), transparent 70%); top:-150px; left:15%; border-radius:50%; filter:blur(40px); z-index:0; pointer-events:none;}
.main::after{content:''; position:fixed; width:400px; height:400px; background:radial-gradient(circle, rgba(34,211,238,.14), transparent 70%); bottom:-100px; left:40%; border-radius:50%; filter:blur(40px); z-index:0; pointer-events:none;}

.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; position:relative; z-index:2;}
.topbar h1{font-size:19px; font-weight:800;}
.topbar .date{font-size:11.5px; color:var(--muted); margin-top:4px;}
.actions{display:flex; gap:10px; align-items:center;}
.search{background:var(--card); border:1px solid var(--line); border-radius:11px; padding:9px 14px; color:var(--muted); font-size:13px; width:190px; backdrop-filter:blur(8px);}
.icon-btn{width:38px; height:38px; border-radius:11px; background:var(--card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer;}
.icon-btn .dot{width:7px; height:7px; background:var(--pink); border-radius:50%; position:absolute; top:7px; left:9px; box-shadow:0 0 6px var(--pink);}

/* breadcrumb */
.crumb{display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); margin-bottom:10px; position:relative; z-index:2;}
.crumb a{color:var(--muted); text-decoration:none;}
.crumb a:hover{color:var(--c);}
.crumb .sep{opacity:.5;}
.crumb .cur{color:var(--text);}

/* خروجی خام ویجت‌های واقعی WHMCS (پنل‌های خانه) و ماژول سرویس/ثبت‌کننده،
   که HTML آن‌ها از PHP می‌آید و باید با تم تیره نبولا هماهنگ شود */
.panel-body-html, .module-client-area{font-size:12.5px; line-height:1.9; color:var(--text);}
.panel-body-html table, .module-client-area table{width:100%; border-collapse:collapse;}
.panel-body-html td, .panel-body-html th, .module-client-area td, .module-client-area th{padding:8px 6px; border-bottom:1px solid var(--line); text-align:right;}
.panel-body-html a, .module-client-area a{color:var(--c);}
.panel-body-html .btn, .module-client-area .btn, .module-client-area .modulebutton, .module-client-area input[type="submit"]{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 16px; border-radius:10px;
  font-size:12px; font-weight:700; text-decoration:none; border:1px solid var(--line); cursor:pointer;
  background:var(--card); color:var(--text); margin:3px;
}
.module-client-area .btn-primary, .module-client-area input[type="submit"]{background:linear-gradient(135deg,var(--v),var(--c)); color:#06060A; border:none;}
.module-client-area select, .module-client-area input[type="text"], .module-client-area input[type="password"]{
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:9px; padding:8px 12px; color:var(--text); font-family:inherit;
}
.nebula-panel-list{display:flex; flex-direction:column;}

/* ===== GENERIC CARD ===== */
.card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; backdrop-filter:blur(10px); position:relative; z-index:2;}
.card h3{font-size:14px; font-weight:700; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center;}
.card h3 a{font-size:11.5px; color:var(--c); text-decoration:none; font-weight:400;}
.card p.hint{font-size:11.5px; color:var(--muted); line-height:1.8;}

.grid{display:grid; gap:14px; position:relative; z-index:2;}
.g-2{grid-template-columns:1fr 1fr;}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}

/* ===== BUTTONS ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 18px; border-radius:11px; font-size:12.5px; font-weight:700; text-decoration:none; border:none; cursor:pointer; transition:.2s;}
.btn-grad{background:linear-gradient(135deg,var(--v),var(--c)); color:#06060A;}
.btn-grad:hover{filter:brightness(1.08);}
.btn-ghost{background:var(--card); border:1px solid var(--line); color:var(--text);}
.btn-ghost:hover{background:rgba(255,255,255,.07);}
.btn-danger{background:rgba(251,113,133,.12); color:var(--red); border:1px solid rgba(251,113,133,.25);}
.btn-sm{padding:7px 13px; font-size:11.5px; border-radius:9px;}
.btn-block{width:100%;}

/* ===== BADGES / STATUS ===== */
/* border:none لازم است: در theme.min.css ۱px حاشیه‌ی سیاه برای تمام badgeها
   تعریف شده (برای Bootstrap) که باید خنثی شود تا رنگ‌های وضعیت درست دیده شوند */
/* رنگ ثابت (هگز) + !important — متغیرهای CSS (var(--green) و...) در برخی
   سرورها resolve نمی‌شوند و بج خاکستری دیده می‌شد؛ با رنگ ثابت دیگر وابسته
   به هیچ متغیری نیستیم. */
.badge{border:none !important; font-size:9.5px !important; padding:3px 9px !important; border-radius:20px !important; white-space:nowrap !important; font-weight:700 !important; display:inline-flex !important; align-items:center !important; gap:4px !important;}
.badge.green{background:rgba(52,211,153,.14) !important; color:#34D399 !important;}
.badge.amber{background:rgba(251,191,36,.14) !important; color:#FBBF24 !important;}
.badge.red{background:rgba(251,113,133,.14) !important; color:#FB7185 !important;}
.badge.grey{background:rgba(255,255,255,.08) !important; color:#83839A !important;}
.badge.violet{background:rgba(139,92,246,.15) !important; color:#C4B5FD !important;}
.badge b{width:6px !important; height:6px !important; border-radius:50% !important; display:inline-block !important; background:currentColor !important; box-shadow:0 0 6px currentColor !important;}

/* بج‌های وضعیت سرویس در ویجت «خدمات فعال» سایدبار — کلاس‌های Bootstrap
   (.label / .label-success و...) کاملاً جدا از .badge هستند و پیش از این
   رنگ‌گرفته نمی‌شدند. رنگ ثابت (هگز) + !important تا روی همهٔ سرورها یکسان باشد. */
.label{display:inline-flex !important; align-items:center !important; gap:4px !important; font-size:9.5px !important; font-weight:700 !important; padding:3px 9px !important; border-radius:20px !important; white-space:nowrap !important;}
.label-placeholder{background:rgba(255,255,255,.08) !important; color:#83839A !important;}
.label-success{background:rgba(52,211,153,.14) !important; color:#34D399 !important;}
.label-info{background:rgba(139,92,246,.15) !important; color:#C4B5FD !important;}
.label-warning{background:rgba(251,191,36,.14) !important; color:#FBBF24 !important;}
.label-danger{background:rgba(251,113,133,.14) !important; color:#FB7185 !important;}
.label-default{background:rgba(255,255,255,.08) !important; color:#83839A !important;}

/* ===== FORMS ===== */
.field{margin-bottom:16px;}
.field label{display:block; font-size:12px; color:var(--muted); margin-bottom:7px;}
.field .req{color:var(--red);}
.input, select.input, textarea.input,
.form-control{width:100%; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:11px; padding:11px 14px; color:var(--text); font-size:13px; font-family:inherit;}
.input:focus, select.input:focus, textarea.input:focus,
.form-control:focus{outline:none; border-color:var(--v); background:rgba(139,92,246,.06);}
textarea.input{resize:vertical; min-height:100px;}
.input-hint{font-size:10.5px; color:var(--muted); margin-top:6px; line-height:1.7;}
.input-icon-wrap{position:relative;}
.input-icon-wrap .ic{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:14px;}
.input-icon-wrap .input{padding-left:38px;}
.toggle{width:42px; height:24px; border-radius:20px; background:rgba(255,255,255,.1); position:relative; cursor:pointer; flex-shrink:0; border:1px solid var(--line);}
.toggle::after{content:''; width:18px; height:18px; background:#fff; border-radius:50%; position:absolute; top:2px; right:2px; transition:.2s;}
.toggle.on{background:linear-gradient(135deg,var(--v),var(--c)); border-color:transparent;}
.toggle.on::after{right:20px;}
.row-between{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.checkbox-row{display:flex; align-items:flex-start; gap:9px; font-size:12px; color:var(--muted); line-height:1.7;}
.checkbox-row input{margin-top:3px;}

/* ===== TABLE ===== */
.tbl{width:100%; border-collapse:collapse; font-size:12.5px;}
.tbl th{text-align:right; font-size:11px; color:var(--muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line);}
.tbl td{padding:13px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:rgba(255,255,255,.02);}
.tbl .muted{color:var(--muted); font-size:11px;}

/* ===== TABS ===== */
.tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin-bottom:18px; position:relative; z-index:2; flex-wrap:wrap;}
.tabs a{padding:10px 16px; font-size:12.5px; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px;}
.tabs a.active{color:var(--text); border-color:var(--v);}

/* ===== LEGAL (قوانین و حریم خصوصی) — بدنهٔ متن حقوقی ===== */
.legal-body{font-size:12.5px; line-height:2.15; color:var(--muted); max-width:820px; direction:rtl; text-align:right;}
.legal-body h3{font-size:13.5px; font-weight:800; color:var(--text); margin:22px 0 8px; direction:rtl; text-align:right;}
.legal-body h3::before{content:''; width:5px; height:5px; border-radius:50%; background:var(--v); flex-shrink:0; display:inline-block;}
.legal-body p{font-size:12.5px; line-height:2.15; color:var(--muted); margin:0 0 8px;}
.legal-body strong{color:var(--text);}
.legal-body .legal-foot{margin-top:20px; padding-top:14px; border-top:1px solid var(--line); font-size:11px; color:var(--muted);}
.legal-date{direction:ltr; unicode-bidi:embed; display:inline-block; color:inherit; font-feature-settings:'tnum';}

/* ===== STAT CARD ===== */
.stat-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; position:relative; z-index:2; overflow:hidden;}
.stat-card .sl{font-size:11.5px; color:var(--muted); margin-bottom:8px; display:flex; align-items:center; gap:8px;}
.stat-card .sn{font-size:22px; font-weight:800;}
.stat-card .ss{font-size:10.5px; color:var(--muted); margin-top:4px;}
.stat-ic{width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:15px;}

/* ===== STAT CARD — نسخه‌های رنگی (هر کادر یک رنگ خاص) ===== */
.stat-card.sc-green{background:linear-gradient(135deg, rgba(52,211,153,.20), rgba(52,211,153,.05)); border-color:rgba(52,211,153,.38); box-shadow:inset 0 0 0 1px rgba(52,211,153,.06), 0 6px 20px -8px rgba(52,211,153,.35);}
.stat-card.sc-green .sl{color:#34D399;}
.stat-card.sc-green .sn{color:#34D399;}
.stat-card.sc-green .stat-ic{background:rgba(52,211,153,.22); border:1px solid rgba(52,211,153,.45);}
.stat-card.sc-green .ss{color:var(--muted);}
.stat-card.sc-amber{background:linear-gradient(135deg, rgba(251,191,36,.20), rgba(251,191,36,.05)); border-color:rgba(251,191,36,.38); box-shadow:inset 0 0 0 1px rgba(251,191,36,.06), 0 6px 20px -8px rgba(251,191,36,.35);}
.stat-card.sc-amber .sl{color:#FBBF24;}
.stat-card.sc-amber .sn{color:#FBBF24;}
.stat-card.sc-amber .stat-ic{background:rgba(251,191,36,.22); border:1px solid rgba(251,191,36,.45);}
.stat-card.sc-amber .ss{color:var(--muted);}
.stat-card.sc-red{background:linear-gradient(135deg, rgba(251,113,133,.20), rgba(251,113,133,.05)); border-color:rgba(251,113,133,.38); box-shadow:inset 0 0 0 1px rgba(251,113,133,.06), 0 6px 20px -8px rgba(251,113,133,.35);}
.stat-card.sc-red .sl{color:#FB7185;}
.stat-card.sc-red .sn{color:#FB7185;}
.stat-card.sc-red .stat-ic{background:rgba(251,113,133,.22); border:1px solid rgba(251,113,133,.45);}
.stat-card.sc-red .ss{color:var(--muted);}
.stat-card.sc-violet{background:linear-gradient(135deg, rgba(139,92,246,.20), rgba(139,92,246,.05)); border-color:rgba(139,92,246,.38); box-shadow:inset 0 0 0 1px rgba(139,92,246,.06), 0 6px 20px -8px rgba(139,92,246,.35);}
.stat-card.sc-violet .sl{color:#A78BFA;}
.stat-card.sc-violet .sn{color:#A78BFA;}
.stat-card.sc-violet .stat-ic{background:rgba(139,92,246,.22); border:1px solid rgba(139,92,246,.45);}
.stat-card.sc-violet .ss{color:var(--muted);}
.stat-card.sc-cyan{background:linear-gradient(135deg, rgba(34,211,238,.20), rgba(34,211,238,.05)); border-color:rgba(34,211,238,.38); box-shadow:inset 0 0 0 1px rgba(34,211,238,.06), 0 6px 20px -8px rgba(34,211,238,.35);}
.stat-card.sc-cyan .sl{color:#22D3EE;}
.stat-card.sc-cyan .sn{color:#22D3EE;}
.stat-card.sc-cyan .stat-ic{background:rgba(34,211,238,.22); border:1px solid rgba(34,211,238,.45);}
.stat-card.sc-cyan .ss{color:var(--muted);}
html[data-theme="light"] .stat-card.sc-green{box-shadow:0 4px 14px -8px rgba(52,211,153,.35);}
html[data-theme="light"] .stat-card.sc-amber{box-shadow:0 4px 14px -8px rgba(251,191,36,.35);}
html[data-theme="light"] .stat-card.sc-red{box-shadow:0 4px 14px -8px rgba(251,113,133,.35);}
html[data-theme="light"] .stat-card.sc-violet{box-shadow:0 4px 14px -8px rgba(139,92,246,.35);}
html[data-theme="light"] .stat-card.sc-cyan{box-shadow:0 4px 14px -8px rgba(34,211,238,.35);}

/* ===== ALERT / NOTICE ===== */
.notice{padding:13px 16px; border-radius:13px; font-size:12px; line-height:1.8; display:flex; gap:10px; align-items:flex-start;}
.notice.info{background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.22); color:#B9F3FF;}
.notice.warn{background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.22); color:#FFE7AE;}
.notice.danger{background:rgba(251,113,133,.08); border:1px solid rgba(251,113,133,.22); color:#FFC9D3;}
.notice.ok{background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.22); color:#C6FFE8;}

/* ===== PAGINATION ===== */
.pager{display:flex; justify-content:center; gap:6px; margin-top:16px;}
.pager a{width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--card); border:1px solid var(--line); color:var(--muted); text-decoration:none; font-size:12px;}
.pager a.active{background:linear-gradient(135deg,var(--v),var(--c)); color:#06060A; font-weight:800; border-color:transparent;}

/* ===== MISC ===== */
.divider{height:1px; background:var(--line); margin:18px 0;}
.pulse{animation:pulse 1.8s infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}
.section-title{font-size:15px; font-weight:800; margin:26px 0 14px; position:relative; z-index:2;}
.section-title:first-child{margin-top:0;}

@media (max-width:1100px){
  .g-4{grid-template-columns:repeat(2,1fr);}
  .g-3{grid-template-columns:repeat(2,1fr);}
}

/* ============================================================
   واکنش‌گرا برای موبایل — سایدبار به‌صورت پنل کشویی از بغل (مثل دسکتاپ) باز می‌شود
   ============================================================ */

/* نوار بالای موبایل و overlay: در دسکتاپ کاملاً مخفی */
.mobile-topbar{display:none;}
.sidebar-overlay{display:none;}
.sidebar-close-btn{display:none;}

@media (max-width:860px){
  body.nebula-body .layout{flex-direction:column !important; min-height:auto;}

  /* نوار بالای موبایل (ثابت) — پس‌زمینه با تم (تیره/روشن) بروز می‌شود */
  .mobile-topbar{
    display:flex; align-items:center; gap:12px; padding:12px 16px;
    position:sticky; top:0; z-index:30; background:var(--bg);
    backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
  }
  .mobile-menu-btn{
    width:38px; height:38px; border-radius:10px; background:var(--card); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; padding:0;
  }
  .mobile-menu-btn .burger{display:flex; flex-direction:column; gap:4px; width:16px;}
  .mobile-menu-btn .burger i{display:block; height:2px; width:100%; background:var(--text); border-radius:2px;}
  .mobile-topbar-brand{display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px;}
  .mobile-topbar-brand .mark{
    width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--v),var(--c));
    display:flex; align-items:center; justify-content:center; font-weight:800; color:#06060A; font-size:13px; flex-shrink:0;
  }

  /* overlay تیره پشت سایدبار باز شده */
  .sidebar-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:90;
    opacity:0; visibility:hidden; transition:opacity .25s ease;
  }
  body.sidebar-open .sidebar-overlay{display:block; opacity:1; visibility:visible;}

  /* خودِ سایدبار: پنل عمودیِ ثابت که از بغل (راست، هم‌جهت با چیدمانِ دسکتاپ) داخل می‌آید */
  body.nebula-body .nebula-aside{
    position:fixed !important; top:0; right:0; height:100vh; z-index:100;
    width:82vw !important; max-width:300px !important;
    flex-direction:column !important; align-items:stretch; gap:4px;
    padding:20px 14px; border-left:none; border-inline-start:1px solid var(--line);
    background:var(--bg); backdrop-filter:blur(18px);
    overflow-y:auto; white-space:normal;
    transform:translateX(100%); transition:transform .3s ease;
    box-shadow:-16px 0 40px rgba(0,0,0,.45);
  }
  body.sidebar-open .nebula-aside{transform:translateX(0);}
  body.sidebar-open{overflow:hidden;}

  .sidebar-close-btn{
    display:flex; align-items:center; justify-content:center; margin-inline-start:auto; margin-bottom:10px;
    width:32px; height:32px; border-radius:9px; background:var(--card); border:1px solid var(--line);
    color:var(--text); font-size:18px; cursor:pointer; flex-shrink:0;
  }

  .brand{margin-bottom:18px; padding:0 8px;}
  .brand .name span{display:block;}

  .nav{display:flex; flex-direction:column; gap:2px;}
  .nav a{padding:10px 12px; margin-bottom:2px; white-space:nowrap; justify-content:flex-start; overflow:hidden;}
  .nav a .l{font-size:13.5px;}
  .nav-group-label{display:block;}

  /* نام کاربر + باکس معرفی به بالای کشو می‌روند و هنگام اسکرول هم ثابت می‌مانند */
  .user-box{order:-2; margin-top:0; flex:0 0 auto; padding:10px 12px; position:sticky; top:0; z-index:5; background:var(--bg);}
  .user-box .u span{display:block; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .promo-card{order:-1; flex:0 0 auto; margin:0 0 14px; padding:16px 18px; width:100%; box-sizing:border-box;}
  .promo-card p{font-size:12.5px; line-height:1.8;}
  .promo-card a{font-size:12px;}
  .brand{order:0;}
  .nav{order:1;}
  .neb-sidebar-slot{order:2;}

  .main{padding:16px 14px 26px; max-width:100%;}
  .topbar{flex-wrap:wrap; gap:10px;}
  .topbar .search{width:140px;}

  .g-4, .g-3, .g-2{grid-template-columns:1fr;}
  .bento{grid-template-columns:1fr !important;}
  .row-rings{grid-template-columns:1fr !important;}
  .hero{height:auto; padding:24px 18px;}
  .hero-content{flex-direction:column; align-items:flex-start; gap:16px; padding:0;}
}


/* ============================================================
   کامپوننت‌های افزوده — مشترک بین صفحات داخلی
   ============================================================ */

/* ring usage card (resource meters) */
.ring-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px; display:flex; align-items:center; gap:14px; backdrop-filter:blur(10px); position:relative; z-index:2;}
.ring-card svg{transform:rotate(-90deg); flex-shrink:0;}
.ring-card .rl{font-size:12px; color:var(--muted); margin-bottom:4px;}
.ring-card .rn{font-size:19px; font-weight:800;}
.ring-card .rs{font-size:10.5px; color:var(--muted);}

/* pricing / plan card */
.pricing-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:20px; position:relative; z-index:2; display:flex; flex-direction:column; gap:12px; transition:.2s;}
.pricing-card:hover{border-color:rgba(139,92,246,.4);}
.pricing-card.featured{border-color:var(--v); background:linear-gradient(160deg, rgba(139,92,246,.12), rgba(34,211,238,.04));}
.pricing-card .tag{position:absolute; top:-11px; right:16px; background:linear-gradient(135deg,var(--v),var(--c)); color:#06060A; font-size:10px; font-weight:800; padding:4px 12px; border-radius:20px;}
.pricing-card .pn{font-size:15px; font-weight:800;}
.pricing-card .pd{font-size:11px; color:var(--muted);}
.pricing-card .pp{font-size:24px; font-weight:800; margin:6px 0 0;}
.pricing-card .pp span{font-size:11px; color:var(--muted); font-weight:400;}
.pricing-card ul{list-style:none; display:flex; flex-direction:column; gap:8px; margin:4px 0;}
.pricing-card ul li{font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:8px;}
.pricing-card ul li b{color:var(--green); font-size:12px;}

/* pill radio group (billing cycle etc.) */
.pill-group{display:flex; gap:8px; flex-wrap:wrap;}
.pill-opt{padding:9px 16px; border-radius:11px; background:rgba(255,255,255,.03); border:1px solid var(--line); font-size:12px; cursor:pointer; color:var(--muted);}
.pill-opt.sel{background:linear-gradient(135deg, rgba(139,92,246,.25), rgba(34,211,238,.1)); border-color:var(--v); color:#fff; font-weight:700;}
.pill-opt .save{color:var(--green); font-size:10px; margin-right:4px;}

/* chat / ticket thread bubble */
.msg{display:flex; gap:10px; margin-bottom:18px; max-width:78%;}
.msg .av{width:32px; height:32px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--v),var(--pink));}
.msg .bubble{background:var(--card); border:1px solid var(--line); border-radius:14px 14px 14px 4px; padding:13px 15px;}
.msg .who{font-size:11.5px; font-weight:700; margin-bottom:4px; display:flex; gap:8px; align-items:center;}
.msg .who .when{font-weight:400; color:var(--muted); font-size:10px;}
.msg .txt{font-size:12.5px; line-height:1.9; color:#DADAE6;}
.msg.staff{margin-right:auto; flex-direction:row-reverse;}
.msg.staff .av{background:linear-gradient(135deg,var(--c),var(--green));}
.msg.staff .bubble{border-radius:14px 14px 4px 14px; background:rgba(34,211,238,.06); border-color:rgba(34,211,238,.2);}

/* payment method card */
.pay-method{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; display:flex; align-items:center; gap:12px; position:relative; z-index:2;}
.pay-method .pm-ic{width:42px; height:28px; border-radius:6px; background:linear-gradient(135deg,var(--v),var(--c)); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#06060A;}
.pay-method .pm-t{font-size:12.5px; font-weight:600;}
.pay-method .pm-s{font-size:10.5px; color:var(--muted); margin-top:2px;}

/* download card */
.dl-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; display:flex; align-items:center; gap:12px; position:relative; z-index:2;}
.dl-card .dl-ic{width:40px; height:40px; border-radius:11px; background:rgba(139,92,246,.15); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;}
.dl-card .dl-t{font-size:12.5px; font-weight:700;}
.dl-card .dl-s{font-size:10.5px; color:var(--muted); margin-top:3px;}

/* department card */
.dept-card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; text-align:center; position:relative; z-index:2;}
.dept-card .di{font-size:22px; margin-bottom:8px;}
.dept-card .dt{font-size:12.5px; font-weight:700; margin-bottom:4px;}
.dept-card .ds{font-size:10.5px; color:var(--muted);}

/* chip filter */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.chip{padding:7px 14px; border-radius:20px; background:rgba(255,255,255,.03); border:1px solid var(--line); font-size:11.5px; color:var(--muted); cursor:pointer;}
.chip.sel{background:var(--v); color:#fff; border-color:transparent;}

/* invoice print look */
.invoice-sheet{background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:20px; padding:34px; position:relative; z-index:2;}
.invoice-sheet .ihead{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:26px; padding-bottom:20px; border-bottom:1px solid var(--line);}
.invoice-sheet .ihead .ttl{font-size:20px; font-weight:800;}
.invoice-sheet .ihead .num{font-size:11.5px; color:var(--muted); margin-top:4px;}
.invoice-sheet .cols{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:22px;}
.invoice-sheet .cols .lbl{font-size:10.5px; color:var(--muted); margin-bottom:6px;}
.invoice-sheet .cols .val{font-size:12.5px; line-height:1.9;}
.invoice-totals{margin-top:14px; margin-right:auto; max-width:280px; margin-left:0;}
.invoice-totals .tr{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); padding:7px 0;}
.invoice-totals .tr.grand{color:var(--text); font-weight:800; font-size:15px; border-top:1px solid var(--line); margin-top:6px; padding-top:12px;}

/* department/queue small stat */
.mini-stat{display:flex; align-items:center; gap:10px;}
.mini-stat .dot{width:9px; height:9px; border-radius:50%;}

/* ============================================================
   AUTH PAGES (login / register / password reset)
   ============================================================ */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:30px 16px; position:relative; overflow:hidden;}
.auth-wrap::before{content:''; position:fixed; width:520px; height:520px; background:radial-gradient(circle, rgba(139,92,246,.22), transparent 70%); top:-160px; right:10%; border-radius:50%; filter:blur(50px); z-index:0;}
.auth-wrap::after{content:''; position:fixed; width:420px; height:420px; background:radial-gradient(circle, rgba(34,211,238,.16), transparent 70%); bottom:-120px; left:8%; border-radius:50%; filter:blur(50px); z-index:0;}
.auth-card{width:100%; max-width:440px; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:36px 34px; backdrop-filter:blur(16px); position:relative; z-index:2; box-shadow:0 20px 60px rgba(0,0,0,.4);}
.auth-card.wide{max-width:560px;}
.auth-brand{display:flex; align-items:center; gap:10px; justify-content:center; margin-bottom:22px;}
.auth-brand .mark{width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg,var(--v),var(--c)); display:flex; align-items:center; justify-content:center; font-weight:800; color:#06060A; font-size:18px; box-shadow:0 0 24px rgba(139,92,246,.5);}
.auth-brand .name{font-weight:700; font-size:17px;}
.auth-title{text-align:center; font-size:19px; font-weight:800; margin-bottom:6px;}
.auth-sub{text-align:center; font-size:12.5px; color:var(--muted); margin-bottom:26px;}
.auth-field{margin-bottom:16px;}
.auth-field label{display:block; font-size:12px; color:var(--muted); margin-bottom:7px;}
.auth-field .input-wrap{position:relative; display:flex; align-items:center;}
.auth-field .input-wrap .ic{position:absolute; right:14px; color:var(--muted); font-size:13px; pointer-events:none;}
.auth-field input,
.auth-field select{width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:11px; padding:12px 40px 12px 14px; color:var(--text); font-family:inherit; font-size:13.5px; transition:.2s;}
.auth-field input::placeholder{color:#5C5C72;}
.auth-field input:focus,
.auth-field select:focus{outline:none; border-color:var(--v); background:rgba(139,92,246,.06); box-shadow:0 0 0 3px rgba(139,92,246,.15);}
.auth-field .toggle-pw{position:absolute; left:12px; background:none; border:none; color:var(--muted); cursor:pointer; font-size:13px;}
.auth-row-between{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; font-size:12px;}
.auth-check{display:flex; align-items:center; gap:7px; color:var(--muted);}
.auth-link{color:var(--c); text-decoration:none; font-weight:600;}
.auth-link:hover{text-decoration:underline;}
.auth-btn{width:100%; background:linear-gradient(135deg,var(--v),var(--c)); color:#06060A; border:none; border-radius:12px; padding:13px; font-size:14px; font-weight:800; cursor:pointer; font-family:inherit; box-shadow:0 8px 24px rgba(139,92,246,.3);}
.auth-btn:hover{filter:brightness(1.07);}
.auth-divider{display:flex; align-items:center; gap:12px; margin:22px 0; color:var(--muted); font-size:11px;}
.auth-divider::before,.auth-divider::after{content:''; flex:1; height:1px; background:var(--line);}
.auth-foot{text-align:center; font-size:12.5px; color:var(--muted); margin-top:20px;}
.auth-steps{display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:24px;}
.auth-steps .st{width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--muted); font-weight:700;}
.auth-steps .st.on{background:linear-gradient(135deg,var(--v),var(--c)); color:#06060A; border-color:transparent;}
.auth-steps .ln{width:24px; height:1px; background:var(--line);}
.auth-grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:560px){.auth-grid2{grid-template-columns:1fr;} .auth-card{padding:26px 20px;}}

/* ---------- بهبود طراحی حرفه‌ای صفحات ورود/ثبت‌نام ---------- */
.auth-card{animation:nebAuthIn .4s ease both;}
@keyframes nebAuthIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
.auth-inner{display:flex; flex-direction:column; gap:8px;}
.auth-sub{margin-bottom:20px;}
.auth-field label{font-weight:600;}
.auth-field input,
.auth-field select{background:rgba(255,255,255,.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.03);}
.field.is-invalid{border-color:var(--red) !important; box-shadow:0 0 0 3px rgba(251,113,133,.15) !important;}
.field.is-valid{border-color:var(--green) !important;}
.field.is-warning{border-color:var(--amber) !important;}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible{outline:none;}
.auth-section{display:flex; align-items:center; gap:10px;}
.auth-section::after{content:''; flex:1; height:1px; background:var(--line);}
.badge-dot{width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,#8B5CF6,#22D3EE) !important; display:inline-block; box-shadow:0 0 8px #8B5CF6 !important;}
.auth-btn{position:relative; overflow:hidden; transition:transform .15s, box-shadow .2s, filter .2s;}
.auth-btn:active{transform:scale(.98);}
.auth-btn:hover{box-shadow:0 10px 30px rgba(139,92,246,.45);}
.auth-btn .spin{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:inherit; border-radius:inherit; opacity:0; pointer-events:none; transition:opacity .2s;}
.auth-btn.is-loading .spin{opacity:1;}
.auth-btn.is-loading > *:not(.spin){opacity:0;}
.social-btns{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin-bottom:14px;}
.social-btns a{display:flex; align-items:center; justify-content:center; gap:8px; padding:10px; border-radius:11px; background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--text); font-size:12.5px; font-weight:600; text-decoration:none; transition:.2s;}
.social-btns a:hover{background:rgba(255,255,255,.1); border-color:var(--v); transform:translateY(-1px);}
.auth-security-row{display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:12px; background:rgba(52,211,153,.06); border:1px solid rgba(52,211,153,.18); font-size:12px; color:var(--green); margin-bottom:16px;}
.auth-security-row b{display:block; font-weight:700; color:var(--green); font-size:12.5px;}
.auth-security-row.info{background:rgba(34,211,238,.06); border-color:rgba(34,211,238,.18); color:var(--c);}
.auth-security-row.info b{color:var(--c);}
html[data-theme="light"] .auth-field input,
html[data-theme="light"] .auth-field select{box-shadow:inset 0 1px 0 rgba(20,20,40,.03);}
.auth-card.wide{max-width:640px;}
@media (max-width:560px){.social-btns{grid-template-columns:1fr 1fr;}}

/* آیکون حالت‌ تأیید ایمیل */
.auth-icon-circle{width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:800; margin:6px auto 16px;}
.auth-icon-circle.ok{background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.35); color:var(--green); box-shadow:0 0 26px rgba(52,211,153,.25);}
.auth-icon-circle.warn{background:rgba(251,191,36,.10); border:1px solid rgba(251,191,36,.35); color:var(--amber); box-shadow:0 0 26px rgba(251,191,36,.2);}
.auth-icon-circle.bad{background:rgba(251,113,133,.10); border:1px solid rgba(251,113,133,.35); color:var(--red); box-shadow:0 0 26px rgba(251,113,133,.2);}

/* WHMCS system alerts / validation, restyled to match Nebula */
.alert{border-radius:12px; padding:12px 16px; font-size:12.5px; margin-bottom:16px; border:1px solid transparent;}
.alert-danger{background:rgba(251,113,133,.1); border-color:rgba(251,113,133,.3); color:#FCA5B4;}
.alert-warning{background:rgba(251,191,36,.1); border-color:rgba(251,191,36,.3); color:var(--amber);}
.alert-success{background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.3); color:var(--green);}
.alert-info{background:rgba(34,211,238,.1); border-color:rgba(34,211,238,.3); color:var(--c);}
.text-danger{color:var(--red) !important;}
.form-control-label{display:block; font-size:12px; color:var(--muted); margin-bottom:7px;}
.card-footer{border-top:1px solid var(--line); padding:16px 34px; text-align:center; font-size:12.5px; color:var(--muted); background:transparent;}
.card-footer a{margin-right:6px;}

/* ============================================================
   DASHBOARD — بخش‌های اختصاصی صفحه اصلی (که در موکاپ dashboard.html
   جدا از base.css تعریف شده بودند و اینجا ادغام شدند)
   ============================================================ */
.avatars-stack{display:flex;}
.avatars-stack .a{width:30px; height:30px; border-radius:50%; border:2px solid #06060A; margin-right:-10px; background:linear-gradient(135deg,var(--v),var(--c));}
.avatars-stack .a:nth-child(2){background:linear-gradient(135deg,var(--pink),var(--amber));}
.avatars-stack .a:nth-child(3){background:linear-gradient(135deg,var(--green),var(--c));}

/* Hero slider content (structure already has .hero from base; these add the inner pieces) */
.dash-today{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-size:14px; color:var(--muted);}
.dash-today span:first-child{color:var(--text); font-weight:700;}
.dash-today-date{color:var(--muted);}
.hero{position:relative; border-radius:22px; overflow:hidden; height:200px; margin-bottom:16px; background:linear-gradient(120deg,#15102B,#0A0E1F); border:1px solid var(--line); z-index:2;}
.hero .blob{position:absolute; border-radius:50%; filter:blur(50px); opacity:.55;}
.hero .hb1{width:260px; height:260px; background:var(--v); top:-100px; right:-40px;}
.hero .hb2{width:200px; height:200px; background:var(--c); bottom:-90px; right:220px;}
.hero-content{position:relative; z-index:3; height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 38px;}
.hero-content .txt .tag{display:inline-flex; align-items:center; gap:6px; background:rgba(244,114,182,.15); color:var(--pink); font-size:11px; padding:5px 12px; border-radius:20px; margin-bottom:10px; border:1px solid rgba(244,114,182,.3);}
.hero-content .txt .tag b{width:6px; height:6px; background:var(--pink); border-radius:50%; display:inline-block; animation:pulse 1.5s infinite;}
.hero-content .txt h2{font-size:25px; font-weight:800; margin-bottom:6px;}
.hero-content .txt p{font-size:12.5px; color:var(--muted); max-width:320px; margin-bottom:14px;}
.hero-content .txt .btn{background:linear-gradient(135deg,var(--v),var(--c)); color:#06060A; padding:10px 22px; border-radius:11px; font-size:13px; font-weight:800; text-decoration:none; display:inline-block;}
.countdown{display:flex; gap:8px; position:relative; z-index:3;}
.countdown .box{background:rgba(255,255,255,.06); border:1px solid var(--line); border-radius:10px; padding:10px 12px; text-align:center; min-width:48px; backdrop-filter:blur(8px);}
.countdown .box .n{font-size:17px; font-weight:800;}
.countdown .box .l{font-size:9px; color:var(--muted); margin-top:2px;}
.dots{position:absolute; bottom:14px; left:38px; display:flex; gap:6px; z-index:4;}
.dots i{width:18px; height:4px; border-radius:4px; background:rgba(255,255,255,.2);}
.dots i.on{background:linear-gradient(90deg,var(--v),var(--c));}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.3;}}
@keyframes float1{0%,100%{transform:translate(0,0);} 50%{transform:translate(-40px,30px);}}
@keyframes float2{0%,100%{transform:translate(0,0);} 50%{transform:translate(30px,-40px);}}
.main::before{content:''; position:fixed; width:500px; height:500px; background:radial-gradient(circle, rgba(139,92,246,.18), transparent 70%); top:-150px; left:15%; border-radius:50%; filter:blur(40px); animation:float1 14s ease-in-out infinite; z-index:0;}
.main::after{content:''; position:fixed; width:400px; height:400px; background:radial-gradient(circle, rgba(34,211,238,.14), transparent 70%); bottom:-100px; left:40%; border-radius:50%; filter:blur(40px); animation:float2 18s ease-in-out infinite; z-index:0;}

/* Resource rings row */
.row-rings{display:grid; grid-template-columns:repeat(3,1fr) 1.6fr; gap:14px; margin-bottom:14px; position:relative; z-index:2;}
.uptime-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px 20px; backdrop-filter:blur(10px); display:flex; flex-direction:column; justify-content:space-between;}
.uptime-card .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.uptime-card .top .t{font-size:12.5px; color:var(--muted);}
.uptime-card .top .badge-up{background:rgba(52,211,153,.12) !important; color:#34D399 !important; font-size:10.5px !important; padding:3px 10px !important; border-radius:20px !important; display:flex !important; align-items:center !important; gap:5px !important;}
.uptime-card .top .badge-up b{width:6px; height:6px; background:#34D399 !important; border-radius:50%; display:inline-block; box-shadow:0 0 6px #34D399 !important;}
.uptime-card .n{font-size:26px; font-weight:800; background:linear-gradient(90deg,#8B5CF6,#22D3EE) !important; -webkit-background-clip:text; background-clip:text; color:transparent;}

/* Bento grid main dashboard cards */
.bento{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; position:relative; z-index:2;}

.servers-card{grid-column:span 2; grid-row:span 2;}
.server-row{display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line);}
.server-row:last-child{border:none;}
.server-row .l{display:flex; align-items:center; gap:10px;}
.server-row .live{width:8px; height:8px; border-radius:50%; background:#34D399 !important; box-shadow:0 0 8px #34D399 !important; animation:pulse 2s infinite;}
.server-row .live.warn{background:#FBBF24 !important; box-shadow:0 0 8px #FBBF24 !important;}
.server-row .name{font-size:13px; font-weight:600;}
.server-row .spec{font-size:10.5px; color:var(--muted); margin-top:2px;}
.server-row .pct{font-size:12px; color:var(--muted); font-weight:700;}

.news-card{grid-column:span 2;}
.news-item{display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line);}
.news-item:last-child{border:none;}
.news-item .ic{width:32px; height:32px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:14px;}
.news-item .ic.i1{background:rgba(139,92,246,.15);}
.news-item .ic.i2{background:rgba(34,211,238,.15);}
.news-item .ic.i3{background:rgba(251,191,36,.15);}
.news-item .t{font-size:12.5px; font-weight:600; margin-bottom:3px;}
.news-item .d{font-size:10.5px; color:var(--muted);}

.tickets-card{grid-column:span 2;}
.ticket-item{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line);}
.ticket-item:last-child{border:none;}
.ticket-item .av{width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,var(--v),var(--pink)); flex-shrink:0;}
.ticket-item .t{font-size:12.5px; font-weight:600; margin-bottom:2px;}
.ticket-item .d{font-size:10.5px; color:var(--muted);}
.badge.open{background:rgba(52,211,153,.12) !important; color:#34D399 !important; border:none !important; display:inline-flex !important; align-items:center !important; gap:4px !important; font-size:9.5px !important; padding:3px 9px !important; border-radius:20px !important; font-weight:700 !important; white-space:nowrap !important;}
.badge.pending{background:rgba(251,191,36,.12) !important; color:#FBBF24 !important; border:none !important; display:inline-flex !important; align-items:center !important; gap:4px !important; font-size:9.5px !important; padding:3px 9px !important; border-radius:20px !important; font-weight:700 !important; white-space:nowrap !important;}
.badge.closed{background:rgba(255,255,255,.06) !important; color:#83839A !important; border:none !important; display:inline-flex !important; align-items:center !important; gap:4px !important; font-size:9.5px !important; padding:3px 9px !important; border-radius:20px !important; font-weight:700 !important; white-space:nowrap !important;}

.calendar-card{grid-column:span 1; grid-row:span 2;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:6px;}
.cal-grid .dh{font-size:9px; color:var(--muted); text-align:center; padding-bottom:4px;}
.cal-grid .dd{font-size:11px; text-align:center; padding:6px 0; border-radius:6px; color:var(--muted);}
.cal-grid .dd.today{background:linear-gradient(135deg,var(--v),var(--c)); color:#06060A; font-weight:800;}
.cal-grid .dd.event{background:rgba(251,191,36,.15) !important; color:#FBBF24 !important; font-weight:700; position:relative;}
.cal-grid .dd.empty{visibility:hidden;}
.renewal{margin-top:14px; padding:10px; border-radius:10px; background:rgba(251,191,36,.08); border:1px solid rgba(251,191,36,.2);}
.renewal .t{font-size:11.5px; font-weight:600; color:#FBBF24 !important; margin-bottom:2px;}
.renewal .d{font-size:10px; color:var(--muted);}

.quick-card{grid-column:span 1;}
.quick-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.quick-grid a{background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:12px 8px; text-align:center; text-decoration:none; color:var(--text); font-size:11px; display:flex; flex-direction:column; align-items:center; gap:6px;}
.quick-grid a .qi{font-size:17px;}
.quick-grid a:hover{background:rgba(255,255,255,.06);}

.traffic-card{grid-column:span 4;}
.traffic-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;}
.traffic-legend{display:flex; gap:16px;}
.traffic-legend span{font-size:11px; color:var(--muted); display:flex; align-items:center; gap:6px;}
.traffic-legend i{width:8px; height:8px; border-radius:50%; display:inline-block;}
.pay-bars{display:flex; align-items:flex-end; gap:8px; height:80px; margin-top:6px;}
.pb{flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; gap:6px;}
.pb i{width:100%; background:linear-gradient(180deg,#8B5CF6,#22D3EE); border-radius:6px 6px 3px 3px; opacity:.55; display:block;}
.pb.hi i{background:linear-gradient(180deg,#FBBF24,#F472B6); opacity:1;}
.pb span{font-size:9.5px; color:var(--muted);}
.pb.hi span{color:#FBBF24 !important; font-weight:700;}

@media (max-width:1100px){
  .servers-card, .news-card, .tickets-card{grid-column:span 2;}
  .calendar-card, .quick-card{grid-column:span 2; grid-row:auto;}
  .traffic-card{grid-column:span 2;}
}

/* ============================================================
   TAB PANELS — همه‌ی بخش‌های صفحه‌ی جزئیات سرویس پشت‌سرهم و
   بدون نیاز به کلیک نمایش داده می‌شوند؛ فقط کمی فاصله بین‌شان
   ============================================================ */
.tab-panel{margin-top:16px; scroll-margin-top:90px; display:none;}
.tab-panel:first-child{margin-top:0;}
.tab-panel.active{display:block;}

/* جداول و خروجی خام ماژول‌ها: به‌جای شکستن کلمات (که با ستون‌های باریک باعث می‌شد
   هر حرف زیر هم بیفتد)، جدول عرض طبیعی خودش را حفظ می‌کند و در صورت لزوم
   فقط به‌صورت افقی داخل همان کادر اسکرول می‌خورد؛ صفحه از حالت اصلی خارج نمی‌شود. */
.table-responsive{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.table-responsive .tbl{min-width:480px;}
.tbl td, .tbl th{white-space:nowrap;}
.panel-body-html, .module-client-area, .module-overview-replacement{max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.panel-body-html td, .panel-body-html th, .module-client-area td, .module-client-area th{white-space:nowrap;}
.module-overview-replacement img, .module-overview-replacement svg, .module-overview-replacement canvas,
.module-client-area img, .module-client-area svg, .module-client-area canvas{max-width:100%; height:auto;}

/* ============================================================
   NEBULA v16 — افزوده‌ها
   ۱) حالت روشن / تیره
   ۲) چیدمان دو ستونی برای سایدبار فرعی WHMCS
   ۳) استایل پنل‌های سایدبار WHMCS (پنل مدیریت سرویس و…)
   ۴) پل استایل Bootstrap → نبولا برای صفحاتی که هنوز از
      قالب والد به ارث می‌رسند، تا ظاهر خام WHMCS دیده نشود
   ============================================================ */

/* ---------- ۱) تم‌ها ---------- */
/* تم همیشه روشن و ثابت است (data-theme="light" روی <html> در header.tpl).
   مقادیر روشن مستقیماً در :root تعریف شده‌اند تا وابسته به هیچ attribute نباشند. */
:root{
  --bg:#F5F6FB; --card:#FFFFFF; --cardh:#FFFFFF; --line:#E3E5F0;
  --text:#14141C; --muted:#5A5A72;
  --v:#7C3AED; --c:#0891B2; --pink:#DB2777; --green:#059669; --amber:#B45309; --red:#E11D48;
  --input-bg:#FFFFFF; --shadow:0 6px 22px rgba(20,20,40,.08);
  --aside-bg:#FFFFFF; --ring-track:rgba(20,20,40,.10);
}
body.nebula-body .main::before,
body.nebula-body .main::after{opacity:.45;}
.card,
.stat-card,
.ring-card,
.uptime-card{box-shadow:var(--shadow); border:1px solid var(--line);}
body.nebula-body .nebula-aside{background:var(--aside-bg); box-shadow:var(--shadow);}
.avatar::after{border-color:#fff;}
.brand .mark{color:#fff;}

/* ---------- ۲) چیدمان دو ستونی ---------- */
.neb-split{display:grid; grid-template-columns:minmax(0,1fr) 288px; gap:20px; align-items:start; position:relative; z-index:2;}
.neb-split-main, .neb-split-single{min-width:0; position:relative; z-index:2;}
.neb-split-side{min-width:0; position:sticky; top:18px;}
@media (max-width:1100px){
  .neb-split{grid-template-columns:1fr;}
  .neb-split-side{position:static; order:2;}
}

.neb-footer{margin-top:36px; padding-top:18px; border-top:1px solid var(--line); position:relative; z-index:2;}
.neb-footer-links{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:8px;}
.neb-footer-links a, .btn-linkish{color:var(--muted); text-decoration:none; font-size:12px; background:none; border:none; padding:0; cursor:pointer; font-family:inherit;}
.neb-footer-links a:hover, .btn-linkish:hover{color:var(--c);}
.neb-footer-copy{font-size:11px; color:var(--muted);}

/* ---------- ۳) پنل‌های سایدبار WHMCS ---------- */
.neb-sidebar-slot{margin-top:16px; display:flex; flex-direction:column; gap:12px;}
.neb-panel{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:12px; backdrop-filter:blur(10px);}
.neb-panel-head{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 14px; border-bottom:1px solid var(--line); cursor:pointer; user-select:none;}
.neb-panel-head.static{cursor:default;}
.neb-panel-head h3{font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:8px; margin:0;}
.neb-panel-head h3 i{color:var(--v); font-size:12px;}
.neb-panel-caret{font-size:10px; color:var(--muted); transition:transform .2s;}
.neb-panel.is-collapsed .neb-panel-caret{transform:rotate(180deg);}
.neb-panel.is-collapsed .neb-panel-body, .neb-panel.is-collapsed .neb-panel-foot{display:none;}
.neb-panel-html{padding:12px 14px; font-size:12px; color:var(--muted); line-height:1.8;}
.neb-panel-list{display:flex; flex-direction:column;}
.neb-panel-link{display:block; padding:10px 14px; font-size:12.5px; color:var(--muted); text-decoration:none;
  border-bottom:1px solid var(--line); background:none; transition:.15s;}
.neb-panel-link:last-child{border-bottom:none;}
.neb-panel-link:hover{background:var(--cardh); color:var(--text); text-decoration:none;}
.neb-panel-link.active{background:linear-gradient(90deg, rgba(139,92,246,.22), rgba(34,211,238,.06)); color:var(--text); box-shadow:inset 2px 0 0 var(--v);}
.neb-panel-link.disabled{opacity:.45; pointer-events:none;}
.neb-panel-link.is-static{cursor:default;}
.neb-panel-link .sidebar-menu-item-wrapper{display:flex; align-items:center; gap:9px;}
.neb-panel-link .sidebar-menu-item-icon-wrapper{width:16px; text-align:center; flex-shrink:0;}
.neb-panel-link .sidebar-menu-item-label{flex:1; min-width:0;}
.neb-panel-link .sidebar-menu-item-badge .badge{background:rgba(139,92,246,.2) !important; color:#C4B5FD !important; font-size:10px !important; padding:2px 7px !important; border-radius:8px !important;}
.neb-panel-foot{padding:12px 14px; border-top:1px solid var(--line); font-size:12px;}
.neb-panel-foot .btn, .neb-panel-html .btn{width:100%;}

/* ---------- ۴) پل Bootstrap → نبولا (صفحات ارث‌بری‌شده) ---------- */
body.nebula-body .card{background:var(--card); border:1px solid var(--line); border-radius:16px; color:var(--text); box-shadow:none;}
body.nebula-body .card-header{background:transparent; border-bottom:1px solid var(--line); font-weight:700; font-size:13px;}
body.nebula-body .card-footer{background:transparent; border-top:1px solid var(--line);}
body.nebula-body .card-title{color:var(--text);}
body.nebula-body .bg-white, body.nebula-body .bg-light, body.nebula-body .bg-default{background:var(--card) !important; color:var(--text) !important;}
body.nebula-body .text-dark, body.nebula-body .text-body{color:var(--text) !important;}
body.nebula-body .text-muted{color:var(--muted) !important;}

body.nebula-body .btn{border-radius:11px; font-family:inherit; font-size:12.5px; font-weight:600; padding:9px 16px; border:1px solid var(--line); transition:.2s;}
body.nebula-body .btn-primary, body.nebula-body .btn-success{background:linear-gradient(135deg,var(--v),var(--c)); border:none; color:#fff;}
body.nebula-body .btn-primary:hover, body.nebula-body .btn-success:hover{filter:brightness(1.12); color:#fff;}
body.nebula-body .btn-default, body.nebula-body .btn-secondary, body.nebula-body .btn-light{background:var(--card); color:var(--text);}
body.nebula-body .btn-default:hover, body.nebula-body .btn-secondary:hover{background:var(--cardh); color:var(--text);}
body.nebula-body .btn-danger{background:var(--red); border:none; color:#fff;}
body.nebula-body .btn-warning{background:var(--amber); border:none; color:#1a1a22;}
body.nebula-body .btn-info{background:var(--c); border:none; color:#06060A;}
body.nebula-body .btn-block{width:100%;}

body.nebula-body .form-control, body.nebula-body .custom-select, body.nebula-body select, body.nebula-body textarea{
  background:var(--input-bg); border:1px solid var(--line); color:var(--text); border-radius:11px;
  font-family:inherit; font-size:13px; padding:10px 12px; height:auto;}
body.nebula-body .form-control:focus{background:var(--input-bg); color:var(--text); border-color:var(--v); box-shadow:0 0 0 3px rgba(139,92,246,.18);}
body.nebula-body .form-control::placeholder{color:var(--muted);}
body.nebula-body .input-group-text{background:var(--card); border:1px solid var(--line); color:var(--muted);}
body.nebula-body label, body.nebula-body .col-form-label{font-size:12.5px; color:var(--muted); font-weight:500;}

body.nebula-body .table{color:var(--text); font-size:12.5px;}
body.nebula-body .table th{border-color:var(--line); color:var(--muted); font-weight:600; font-size:11.5px; text-transform:none;}
body.nebula-body .table td{border-color:var(--line); vertical-align:middle;}
body.nebula-body .table-striped tbody tr:nth-of-type(odd){background:rgba(255,255,255,.02);}
html[data-theme="light"] body.nebula-body .table-striped tbody tr:nth-of-type(odd){background:rgba(20,20,40,.02);}
body.nebula-body .table-hover tbody tr:hover{background:var(--cardh); color:var(--text);}
body.nebula-body .table-responsive{-webkit-overflow-scrolling:touch;}

body.nebula-body .nav-tabs{border-bottom:1px solid var(--line);}
body.nebula-body .nav-tabs .nav-link{border:none; color:var(--muted); font-size:12.5px; padding:10px 14px; border-radius:10px 10px 0 0;}
body.nebula-body .nav-tabs .nav-link:hover{color:var(--text); background:var(--cardh);}
body.nebula-body .nav-tabs .nav-link.active{background:var(--card); color:var(--text); border-bottom:2px solid var(--v);}
body.nebula-body .list-group-item{background:var(--card); border-color:var(--line); color:var(--text);}

body.nebula-body .alert{border-radius:13px; border:1px solid var(--line); font-size:12.5px; padding:12px 14px;}
body.nebula-body .alert-success{background:rgba(52,211,153,.12); color:var(--green); border-color:rgba(52,211,153,.3);}
body.nebula-body .alert-danger, body.nebula-body .alert-error{background:rgba(251,113,133,.12); color:var(--red); border-color:rgba(251,113,133,.3);}
body.nebula-body .alert-warning{background:rgba(251,191,36,.12); color:var(--amber); border-color:rgba(251,191,36,.3);}
body.nebula-body .alert-info{background:rgba(34,211,238,.12); color:var(--c); border-color:rgba(34,211,238,.3);}

body.nebula-body .modal-content{background:var(--bg); border:1px solid var(--line); border-radius:18px; color:var(--text);}
body.nebula-body .modal-header, body.nebula-body .modal-footer{border-color:var(--line);}
body.nebula-body .modal-backdrop{background:#000;}
body.nebula-body .close{color:var(--text); text-shadow:none; opacity:.7;}
body.nebula-body .popover, body.nebula-body .dropdown-menu{background:var(--bg); border:1px solid var(--line); color:var(--text);}
body.nebula-body .dropdown-item{color:var(--text);}
body.nebula-body .dropdown-item:hover{background:var(--cardh); color:var(--text);}
body.nebula-body .pagination .page-link{background:var(--card); border-color:var(--line); color:var(--text);}
body.nebula-body .pagination .page-item.active .page-link{background:var(--v); border-color:var(--v); color:#fff;}
body.nebula-body .breadcrumb{background:transparent; padding:0; font-size:11.5px;}
body.nebula-body .progress{background:var(--ring-track);}
body.nebula-body .progress-bar{background:linear-gradient(90deg,var(--v),var(--c));}
body.nebula-body hr{border-color:var(--line);}

/* ---------- RTL: اصلاح utilityهای جهت‌دار Bootstrap 4 ---------- */
body.nebula-body[dir="rtl"] .float-right, html[dir="rtl"] body.nebula-body .float-right{float:left !important;}
html[dir="rtl"] body.nebula-body .float-left{float:right !important;}
html[dir="rtl"] body.nebula-body .text-right{text-align:left !important;}
html[dir="rtl"] body.nebula-body .text-left{text-align:right !important;}
html[dir="rtl"] body.nebula-body .mr-1,html[dir="rtl"] body.nebula-body .mr-2,html[dir="rtl"] body.nebula-body .mr-3{margin-right:0 !important;}
html[dir="rtl"] body.nebula-body .mr-1{margin-left:.25rem !important;}
html[dir="rtl"] body.nebula-body .mr-2{margin-left:.5rem !important;}
html[dir="rtl"] body.nebula-body .mr-3{margin-left:1rem !important;}
html[dir="rtl"] body.nebula-body .ml-1,html[dir="rtl"] body.nebula-body .ml-2,html[dir="rtl"] body.nebula-body .ml-3{margin-left:0 !important;}
html[dir="rtl"] body.nebula-body .ml-1{margin-right:.25rem !important;}
html[dir="rtl"] body.nebula-body .ml-2{margin-right:.5rem !important;}
html[dir="rtl"] body.nebula-body .ml-3{margin-right:1rem !important;}
html[dir="rtl"] body.nebula-body .offset-sm-1,html[dir="rtl"] body.nebula-body .offset-xl-4{margin-left:0;}

/* جلوگیری از سرریز افقی در همه صفحات ارث‌بری‌شده */
body.nebula-body .main .row{margin-right:0; margin-left:0;}
body.nebula-body .main img{max-width:100%; height:auto;}
body.nebula-body pre, body.nebula-body code{white-space:pre-wrap; word-break:break-word;}

/* دسترس‌پذیری: فوکوس قابل مشاهده + احترام به کاهش انیمیشن */
body.nebula-body a:focus-visible, body.nebula-body button:focus-visible,
body.nebula-body input:focus-visible, body.nebula-body select:focus-visible,
body.nebula-body textarea:focus-visible{outline:2px solid var(--c); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  body.nebula-body *, body.nebula-body *::before, body.nebula-body *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}

/* لیست اعلان‌های داخل popover نوار بالا */
.client-alerts{list-style:none; margin:0; padding:0; min-width:230px; max-width:320px;}
.client-alerts li{border-bottom:1px solid var(--line);}
.client-alerts li:last-child{border-bottom:none;}
.client-alerts li a{display:flex; gap:9px; align-items:flex-start; padding:10px 4px; font-size:12.5px; color:var(--text); text-decoration:none;}
.client-alerts li a:hover{color:var(--c);}
.client-alerts li.none{padding:12px 4px; font-size:12px; color:var(--muted);}
.client-alerts .message{flex:1; min-width:0; line-height:1.7;}

/* فرم جستجوی نوار بالا: در موبایل پنهان تا سرریز نکند */
.topbar-search-form{display:inline-block;}
@media (max-width:860px){ .topbar-search-form{display:none;} .topbar{flex-wrap:wrap; gap:10px;} }

/* ============================================================
   NEBULA v17 — ویجت‌های داشبورد مطابق طرح
   ============================================================ */

/* اسلایدر بنر */
.hero{height:auto; min-height:210px;}
.hero-slide{display:none;}
.hero-slide.is-active{display:block; animation:nebFade .5s ease;}
@keyframes nebFade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.hero-content{padding:30px 38px 44px;}
.dots i{cursor:pointer; transition:.2s;}
.dots i:hover{background:rgba(255,255,255,.45);}
html[data-theme="light"] .hero{background:linear-gradient(120deg,#EDE9FE,#E0F2FE);}
html[data-theme="light"] .hero-content .txt h2{color:#1B1233;}
html[data-theme="light"] .hero-content .txt p{color:#4B4B63;}
html[data-theme="light"] .dots i{background:rgba(20,20,40,.15);}
html[data-theme="light"] .countdown .box{background:rgba(255,255,255,.75);}

/* کارت کیف پول */
.wallet-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px;
  display:flex; flex-direction:column; justify-content:space-between; backdrop-filter:blur(10px); position:relative; z-index:2; overflow:hidden;}
.wallet-card .wl{font-size:12px; color:var(--muted);}
.wallet-card .wn{font-size:21px; font-weight:800; margin-top:4px; background:linear-gradient(90deg,#8B5CF6,#22D3EE) !important;
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.wallet-card .spark{width:100%; height:36px; margin:6px 0 2px; display:block;}
.wallet-card .wa{font-size:10.5px; color:#67E8F9 !important; text-decoration:none; font-weight:700;}

/* ردیف آمار: چیدمان یکنواخت ۴ ستونه */
.row-rings{grid-template-columns:repeat(4,1fr);}
@media (max-width:1100px){ .row-rings{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .row-rings{grid-template-columns:1fr;} }

/* عنوان کارت‌ها با لینک سمت مقابل */
.card h3{display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-size:13.5px; font-weight:700; margin-bottom:12px;}
.card h3 a{font-size:11.5px; color:var(--c); text-decoration:none; font-weight:400;}
.card h3 a:hover{text-decoration:underline;}

/* ردیف سرویس‌ها */
.server-row .live.down{background:#FB7185 !important; box-shadow:0 0 8px #FB7185 !important;}
.server-row .pct{text-align:left; display:flex; flex-direction:column; align-items:flex-end; gap:2px;}
.pct-sub{display:block; font-size:9.5px; color:var(--muted); font-weight:400;}

/* دسترسی سریع — ۴ ستونه مطابق طرح */
.quick-grid.quick-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:860px){ .quick-grid.quick-4{grid-template-columns:repeat(2,1fr);} }

/* نمودار پرداختی */
.pay-bars{height:110px;}
.traffic-head h3{margin:0;}

/* سلام کاربر در نوار بالا */
.topbar .greet{font-size:20px; font-weight:800; display:flex; align-items:center; gap:8px;}
.topbar .greet .wave{display:inline-block; animation:nebWave 2.4s ease-in-out infinite; transform-origin:70% 70%;}
@keyframes nebWave{0%,60%,100%{transform:rotate(0);} 10%,30%{transform:rotate(14deg);} 20%,40%{transform:rotate(-8deg);}}

/* چیدمان دو ستونی بنتو در موبایل */
@media (max-width:900px){
  .bento{grid-template-columns:1fr !important;}
}

/* ============================================================
   NEBULA v18 — صفحات افزوده‌شده
   ============================================================ */

/* بخش‌بندی فرم ثبت‌نام */
.auth-section{font-size:12.5px; font-weight:700; color:var(--text); margin:18px 0 10px;
  padding-bottom:8px; border-bottom:1px solid var(--line);}
.auth-section:first-of-type{margin-top:4px;}
.auth-field .opt{color:var(--muted); font-weight:400; font-size:10.5px;}
.auth-grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
@media (max-width:560px){ .auth-grid3, .auth-grid2{grid-template-columns:1fr;} }

/* انتخابگر پیش‌شمارهٔ بین‌المللی تلفن (intl-tel-input در RTL) */
.phone-wrap .iti{width:100%; direction:ltr;}
.phone-wrap .iti input, .phone-wrap input.field{width:100%; direction:ltr; text-align:left;
  background:var(--input-bg); border:1px solid var(--line); color:var(--text);
  border-radius:11px; padding:11px 12px; font-family:inherit; font-size:13px;}
.phone-wrap .iti__country-list{background:var(--bg); border:1px solid var(--line); color:var(--text); direction:ltr; text-align:left;}
.phone-wrap .iti__country.iti__highlight{background:var(--cardh);}
.phone-wrap .iti__country-name, .phone-wrap .iti__dial-code{color:var(--text);}

/* سنجهٔ قدرت رمز */
.pw-meter-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:4px;}
.password-strength-meter{flex:1; min-width:180px;}
.password-strength-meter .progress{height:6px; border-radius:6px; overflow:hidden; background:var(--ring-track);}
.password-strength-meter .progress-bar{height:100%; background:linear-gradient(90deg,var(--v),var(--c)); transition:width .3s;}
#passwordStrengthTextLabel{font-size:10.5px; color:var(--muted); margin-top:5px;}
#inputNewPassword2Msg{font-size:11px; margin-top:5px;}

/* مراحل بازیابی رمز */
.auth-steps .ln.on{background:linear-gradient(90deg,var(--v),var(--c));}

/* چالش دو مرحله‌ای */
.twofa-challenge input[type="text"], .twofa-challenge input[type="number"], .twofa-challenge .form-control{
  width:100%; background:var(--input-bg); border:1px solid var(--line); color:var(--text);
  border-radius:11px; padding:11px 12px; font-size:15px; letter-spacing:3px; text-align:center;}
.twofa-challenge .btn, .twofa-challenge input[type="submit"]{width:100%; margin-top:12px;}

/* کارت دسته‌های پایگاه دانش */
.kb-cat{display:flex; gap:12px; align-items:flex-start; text-decoration:none; color:inherit; transition:.2s;}
.kb-cat:hover{background:var(--cardh); transform:translateY(-2px);}
.kb-cat-ic{width:40px; height:40px; border-radius:12px; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; font-size:18px; background:rgba(139,92,246,.15);}
.kb-cat-t{font-size:13.5px; font-weight:700; margin-bottom:3px;}
.kb-cat-d{font-size:11.5px; color:var(--muted); line-height:1.8;}

/* متن مقاله و اطلاعیه */
.rich-text{font-size:13.5px; line-height:2.1; color:var(--text);}
.rich-text p{margin-bottom:12px;}
.rich-text h1,.rich-text h2,.rich-text h3,.rich-text h4{margin:18px 0 8px; font-weight:700;}
.rich-text h1{font-size:18px;} .rich-text h2{font-size:16px;} .rich-text h3{font-size:14.5px;}
.rich-text ul,.rich-text ol{margin:0 22px 12px 0; padding:0;}
.rich-text li{margin-bottom:6px;}
.rich-text a{color:var(--c);}
.rich-text img{max-width:100%; height:auto; border-radius:10px; margin:10px 0;}
.rich-text pre,.rich-text code{background:var(--input-bg); border:1px solid var(--line); border-radius:8px;
  padding:2px 6px; font-size:12px; direction:ltr; display:inline-block; max-width:100%; overflow-x:auto;}
.rich-text pre{display:block; padding:12px; white-space:pre-wrap;}
.rich-text table{width:100%; border-collapse:collapse; margin:12px 0; font-size:12.5px;}
.rich-text th,.rich-text td{border:1px solid var(--line); padding:8px;}
.rich-text blockquote{border-right:3px solid var(--v); padding:6px 14px; margin:12px 0; color:var(--muted);}
.article-body{max-width:860px;}

.grid.g-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:900px){ .grid.g-3{grid-template-columns:1fr;} }

/* ============================================================
   NEBULA v19 — صفحهٔ «سرویس‌های من» کارتی
   ============================================================ */
.svc-toolbar{display:flex; justify-content:space-between; align-items:center; gap:12px;
  flex-wrap:wrap; margin-bottom:14px; position:relative; z-index:2;}
.svc-filters{display:flex; gap:6px; flex-wrap:wrap;}
.svc-chip{background:var(--card); border:1px solid var(--line); color:var(--muted); font-family:inherit;
  font-size:12px; padding:8px 14px; border-radius:999px; cursor:pointer; display:flex; align-items:center; gap:6px; transition:.2s;}
.svc-chip:hover{background:var(--cardh); color:var(--text);}
.svc-chip span{background:rgba(255,255,255,.08); border-radius:999px; padding:1px 7px; font-size:10.5px; font-weight:700;}
html[data-theme="light"] .svc-chip span{background:rgba(20,20,40,.07);}
.svc-chip.is-on{background:linear-gradient(90deg, rgba(139,92,246,.25), rgba(34,211,238,.08));
  color:var(--text); border-color:rgba(139,92,246,.4);}
.svc-chip.is-on span{background:rgba(139,92,246,.3); color:#fff;}
.svc-tools{display:flex; gap:8px; align-items:center;}
.svc-tools .input{width:210px;}
@media (max-width:620px){ .svc-toolbar{flex-direction:column; align-items:stretch;} .svc-tools .input{width:100%;} }

.svc-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(310px,1fr)); gap:14px;
  position:relative; z-index:2;}
.svc-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px;
  backdrop-filter:blur(10px); display:flex; flex-direction:column; gap:12px; transition:.2s;}
.svc-card:hover{background:var(--cardh); transform:translateY(-2px); box-shadow:var(--shadow);}
.svc-card-top{display:flex; align-items:center; gap:11px;}
.svc-ic{width:42px; height:42px; border-radius:13px; flex-shrink:0; display:flex; align-items:center;
  justify-content:center; font-size:19px; background:linear-gradient(135deg, rgba(139,92,246,.22), rgba(34,211,238,.12));}
.svc-id{flex:1; min-width:0;}
.svc-name{font-size:13.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.svc-domain{font-size:11px; color:var(--muted); margin-top:2px; direction:ltr; text-align:right;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.svc-meta{display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; padding:12px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.svc-meta > div{display:flex; flex-direction:column; gap:3px; min-width:0;}
.svc-meta .k{font-size:10px; color:var(--muted);}
.svc-meta .v{font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.svc-due{font-size:11.5px; padding:8px 12px; border-radius:10px; font-weight:600;
  background:rgba(52,211,153,.1) !important; color:#34D399 !important; border:1px solid rgba(52,211,153,.22) !important;}
.svc-due.is-soon{background:rgba(251,191,36,.1) !important; color:#FBBF24 !important; border-color:rgba(251,191,36,.25) !important;}
.svc-due.is-over{background:rgba(251,113,133,.1) !important; color:#FB7185 !important; border-color:rgba(251,113,133,.25) !important;}

.svc-actions{display:flex; gap:8px; margin-top:auto;}
.svc-actions .btn{flex:1; justify-content:center; text-align:center;}

.svc-empty{grid-column:1 / -1; text-align:center; padding:36px 20px;}
.svc-empty-ic{font-size:38px; opacity:.35; margin-bottom:10px;}
.svc-table-wrap[hidden], .svc-grid[hidden]{display:none !important;}

/* ============================================================
   NEBULA PRO — تضمین تیره‌بودن پنل‌های سایدبار محتوایی WHMCS
   (مالی، پشتیبانی، مدیریت دامنه/سرویس و...) و فوتر
   این بلوک عمداً در انتهای فایل و با body.nebula-body آمده تا
   با بالاترین اولویتِ ممکن، هر رنگ روشن/سفیدِ باقی‌مانده از
   استایل پیش‌فرض بوت‌استرپ WHMCS را در همه‌جای سایت بپوشاند —
   نه فقط صفحاتی که تا امروز تست شده‌اند.
   ============================================================ */
body.nebula-body{background:var(--bg) !important;}
body.nebula-body .main,
body.nebula-body .neb-split,
body.nebula-body .neb-split-main,
body.nebula-body .neb-split-single,
body.nebula-body .neb-split-side,
body.nebula-body .neb-footer{background:transparent !important;}

body.nebula-body .neb-panel,
body.nebula-body .card,
body.nebula-body .panel,
body.nebula-body .list-group{
  background:var(--card) !important; border-color:var(--line) !important; color:var(--text) !important;
}
body.nebula-body .neb-panel-head,
body.nebula-body .neb-panel-body,
body.nebula-body .collapsable-card-body,
body.nebula-body .panel-heading,
body.nebula-body .panel-body{background:transparent !important; color:inherit !important;}

body.nebula-body .list-group-item,
body.nebula-body .neb-panel-link,
body.nebula-body .list-group-item-action{
  background:transparent !important; color:var(--muted) !important; border-color:var(--line) !important;
}
body.nebula-body .list-group-item:hover,
body.nebula-body .neb-panel-link:hover,
body.nebula-body .list-group-item-action:hover{background:var(--cardh) !important; color:var(--text) !important;}
body.nebula-body .list-group-item.active,
body.nebula-body .neb-panel-link.active{
  background:linear-gradient(90deg, rgba(139,92,246,.22), rgba(34,211,238,.06)) !important;
  color:var(--text) !important; border-color:var(--v) !important;
}

body.nebula-body .neb-footer-links a, body.nebula-body .btn-linkish{color:var(--muted) !important;}
body.nebula-body .neb-footer-links a:hover{color:var(--c) !important;}
body.nebula-body .neb-footer-copy{color:var(--muted) !important;}

/* دراپ‌داون‌های بالای صفحه (زنگ، مالی، پشتیبانی...) نیز از همین قانون پیروی کنند */
body.nebula-body .dropdown-menu{background:var(--bg) !important; border-color:var(--line) !important; color:var(--text) !important; box-shadow:0 12px 32px rgba(0,0,0,.35);}
body.nebula-body .dropdown-item{color:var(--text) !important; background:transparent !important;}
body.nebula-body .dropdown-item:hover, body.nebula-body .dropdown-item:focus{background:var(--cardh) !important; color:var(--text) !important;}
body.nebula-body .dropdown-divider{border-color:var(--line) !important;}

/* ============================================================
   حالت روشن — رفع کنتراست متن‌هایی که روی پس‌زمینهٔ روشن دیده نمی‌شدند
   (رنگ‌های نئونیِ سخت‌کدشده برای حالت تیره، روی کارت سفید از بین می‌رفتند)
   ============================================================ */
html[data-theme="light"] .notice.info{background:rgba(8,145,178,.08); border-color:rgba(8,145,178,.25); color:#0B5E77;}
html[data-theme="light"] .notice.warn{background:rgba(180,83,9,.08); border-color:rgba(180,83,9,.28); color:#7A4A02;}
html[data-theme="light"] .notice.danger{background:rgba(225,29,72,.07); border-color:rgba(225,29,72,.25); color:#9B1C31;}
html[data-theme="light"] .notice.ok{background:rgba(5,150,105,.08); border-color:rgba(5,150,105,.28); color:#0B5C44;}
html[data-theme="light"] .notice b{color:inherit;}
html[data-theme="light"] .svc-chip.is-on span{background:rgba(124,58,237,.14); color:#5B21B6;}
html[data-theme="light"] .promo-card{background:linear-gradient(135deg, rgba(124,58,237,.10), rgba(8,145,178,.08)); border-color:rgba(124,58,237,.25);}
html[data-theme="light"] .promo-card p{color:#3B2A63;}
html[data-theme="light"] .pill-opt.sel{color:#fff;}
html[data-theme="light"] .chip.sel{color:#fff;}
html[data-theme="light"] .nav a.active{color:#fff;}
html[data-theme="light"] .nav .nav-toggle:hover,
html[data-theme="light"] .nav .nav-group.open .nav-toggle,
html[data-theme="light"] .nav .nav-group.open .nav-toggle:hover{background:rgba(124,58,237,.08);}
html[data-theme="light"] .nav .nav-toggle .caret{color:#6B6B84;}
html[data-theme="light"] .nav .nav-group.open .nav-toggle .caret{color:var(--c);}
html[data-theme="light"] .nav .nav-sub a:hover{background:rgba(124,58,237,.06);}
html[data-theme="light"] body.nebula-body .btn-primary,
html[data-theme="light"] body.nebula-body .btn-success,
html[data-theme="light"] body.nebula-body .btn-danger{color:#fff;}
html[data-theme="light"] .pager a.active{color:#fff;}
html[data-theme="light"] .tabs a.active{color:var(--text);}
html[data-theme="light"] .badge.grey{color:#5A5A72;}
html[data-theme="light"] .badge.grey{background:rgba(20,20,40,.06); color:#5A5A72;}
html[data-theme="light"] .badge.red{background:rgba(225,29,72,.10); color:#BE123C;}
html[data-theme="light"] .badge.green{background:rgba(5,150,105,.10); color:#047857;}
html[data-theme="light"] .badge.amber{background:rgba(180,83,9,.10); color:#B45309;}
html[data-theme="light"] .badge.violet{background:rgba(124,58,237,.10); color:#5B21B6;}
html[data-theme="light"] .legal-body h3::before{background:var(--v);}
html[data-theme="light"] .legal-date{color:inherit;}

/* ============================================================
   لایهٔ حرکات نبولا — ورود نرم، hover، اسپینر‌ها
   همه‌جا با کلاس‌های موجود کار می‌کند و مورد احترام prefers-reduced-motion است
   ============================================================ */
@keyframes nebIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

body.nebula-body .card,
body.nebula-body .stat-card,
body.nebula-body .dl-card,
body.nebula-body .ring-card,
body.nebula-body .kb-cat,
body.nebula-body .article-body{
  animation:nebIn .35s ease both;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.nebula-body .grid .card:nth-child(1){animation-delay:.02s;}
body.nebula-body .grid .card:nth-child(2){animation-delay:.05s;}
body.nebula-body .grid .card:nth-child(3){animation-delay:.08s;}
body.nebula-body .grid .card:nth-child(4){animation-delay:.11s;}
body.nebula-body .grid .card:nth-child(5){animation-delay:.14s;}
body.nebula-body .grid .card:nth-child(6){animation-delay:.17s;}
body.nebula-body .grid .card:nth-child(7){animation-delay:.20s;}
body.nebula-body .grid .card:nth-child(8){animation-delay:.23s;}
body.nebula-body .grid .card:nth-child(9){animation-delay:.26s;}

body.nebula-body .card:hover,
body.nebula-body .stat-card:hover,
body.nebula-body .dl-card:hover{transform:translateY(-2px); border-color:rgba(139,92,246,.45); box-shadow:0 12px 32px rgba(0,0,0,.28);}
html[data-theme="light"] body.nebula-body .card:hover,
html[data-theme="light"] body.nebula-body .stat-card:hover,
html[data-theme="light"] body.nebula-body .dl-card:hover{box-shadow:0 10px 26px rgba(20,20,40,.14); border-color:rgba(124,58,237,.35);}

body.nebula-body .btn, body.nebula-body .btn-grad, body.nebula-body .btn-ghost,
body.nebula-body .btn-danger:active{transition:transform .12s ease, filter .2s ease, box-shadow .2s ease;}
body.nebula-body .btn:active, body.nebula-body .btn-grad:active,
body.nebula-body .btn-ghost:active, body.nebula-body .btn-danger:active{transform:scale(.97);}
body.nebula-body .btn-grad{position:relative; overflow:hidden;}
body.nebula-body .btn-grad::after{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform:translateX(-100%); transition:transform .5s ease; pointer-events:none;}
body.nebula-body .btn-grad:hover::after{transform:translateX(100%);}
html[data-theme="light"] body.nebula-body .btn-grad::after{background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);}

body.nebula-body .tbl tbody tr, body.nebula-body .dl-card, body.nebula-body .kb-cat,
body.nebula-body .list-group-item, body.nebula-body .notice{transition:background .2s ease, color .2s ease, border-color .2s ease;}
body.nebula-body .tbl tbody tr:hover{background:rgba(139,92,246,.05);}

.nebula-spin{display:inline-block; width:13px; height:13px; border:2px solid var(--line); border-top-color:var(--v); border-radius:50%; animation:nebSpin .7s linear infinite; vertical-align:-2px;}
@keyframes nebSpin{to{transform:rotate(360deg);}}

/* باگ سایدبار: پیکسل‌دقیق برای ریختگی دکمه‌ها در RTL */
body.nebula-body .nav a .l{flex:0 0 auto;}
body.nebula-body .nav a .pill{margin-inline-start:auto;}
/* =====================================================================
   ═══ NEBULA PRO — SUPPORT / TICKETS (بخش پشتیبانی و تیکت)
   اسکین روشن و خوانا. همه رنگ‌ها HEX ثابت.
   ===================================================================== */

/* ---------- ۱) لیست تیکت‌ها ---------- */
.tk-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;}
.tk-stat{background:#FFFFFF; border:1px solid #E3E5F0; border-radius:18px; padding:18px 16px; position:relative; overflow:hidden;
  box-shadow:0 4px 16px -10px rgba(30,41,59,.14); transition:transform .15s, box-shadow .15s;}
.tk-stat:hover{transform:translateY(-2px); box-shadow:0 12px 26px -14px rgba(124,58,237,.3);}
.tk-stat .tk-stat-ic{width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:12px;}
.tk-stat .tk-stat-num{font-size:26px; font-weight:900; line-height:1; color:#14141C;}
.tk-stat .tk-stat-lb{font-size:12.5px; font-weight:800; color:#14141C; margin-top:6px;}
.tk-stat .tk-stat-sub{font-size:10.5px; color:#64748B; margin-top:2px;}
.tk-stat.sc-open .tk-stat-ic{background:#ECFEFF; color:#0E7490;}
.tk-stat.sc-answered .tk-stat-ic{background:#FFFBEB; color:#B45309;}
.tk-stat.sc-closed .tk-stat-ic{background:#ECFDF5; color:#047857;}
.tk-stat.sc-total .tk-stat-ic{background:#F5F3FF; color:#6D28D9;}
.tk-stat.sc-open{border-top:3px solid #0891B2;}
.tk-stat.sc-answered{border-top:3px solid #D97706;}
.tk-stat.sc-closed{border-top:3px solid #059669;}
.tk-stat.sc-total{border-top:3px solid #7C3AED;}

.ticket-list-card{background:#FFFFFF; border:1px solid #E3E5F0; border-radius:20px; padding:20px;
  box-shadow:0 6px 22px -16px rgba(30,41,59,.18);}
.ticket-list-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px;}
.ticket-list-head h3{margin:0; font-size:17px; font-weight:800; color:#14141C;}
.ticket-list-sub{margin:4px 0 0; font-size:12px; color:#64748B;}
.ticket-list{display:flex; flex-direction:column; gap:10px;}
.ticket-row{display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid #E9ECF4; border-radius:14px;
  background:#FAFBFF; text-decoration:none; transition:all .18s;
  box-shadow:0 2px 6px -6px rgba(30,41,59,.1);}
.ticket-row:hover{border-color:#C4B5FD; background:#FAF7FF; transform:translateY(-1px); box-shadow:0 6px 16px -10px rgba(124,58,237,.35);}
.ticket-row-av .av-tag{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; background:#F1F5F9;}
.ticket-row-body{flex:1; min-width:0;}
.ticket-row-title{font-size:13.5px; font-weight:800; color:#14141C; margin-bottom:5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.ticket-row-meta{font-size:11px; color:#64748B; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.ticket-row-meta .dot-sep{color:#CBD5E1;}
.ticket-row-side{display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.ticket-row-go{color:#CBD5E1; font-size:15px; transition:color .15s, transform .15s;}
.ticket-row:hover .ticket-row-go{color:#7C3AED; transform:translateX(-3px);}
.ticket-list-empty{text-align:center; padding:30px 10px;}
.ticket-list-empty .empty-ic{font-size:34px; margin-bottom:8px;}
.ticket-list-empty p{color:#64748B; margin-bottom:14px;}

/* ---------- بج‌ها ---------- */
.tk-badge{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:800; padding:4px 11px; border-radius:999px; white-space:nowrap;}
.tk-badge i{width:6px; height:6px; border-radius:50%; background:currentColor; display:inline-block;}
.tk-badge-green{background:#ECFDF5; color:#047857;}
.tk-badge-amber{background:#FFFBEB; color:#B45309;}
.tk-badge-violet{background:#F5F3FF; color:#6D28D9;}
.tk-badge-grey{background:#F1F5F9; color:#64748B;}
.tk-badge-red{background:#FEF2F2; color:#B91C1C;}

/* ---------- ۲) مشاهده تیکت ---------- */
.ticket-head{background:linear-gradient(135deg,#EEF1FB,#FCFDFF); border:1px solid #E3E5F0; border-radius:20px;
  padding:20px 22px; display:flex; align-items:center; gap:16px; box-shadow:0 6px 22px -18px rgba(30,41,59,.25); margin-bottom:18px;}
.ticket-head-av{width:54px; height:54px; border-radius:16px; background:linear-gradient(135deg,#7C3AED,#0891B2); color:#fff; font-size:25px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 6px 18px -8px rgba(124,58,237,.5);}
.ticket-head-info{flex:1; min-width:0;}
.ticket-head-title{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px;}
.ticket-head-title h2{margin:0; font-size:17px; font-weight:800; color:#14141C;}
.ticket-head-meta{display:flex; gap:8px; flex-wrap:wrap;}
.meta-chip{display:inline-flex; align-items:center; gap:6px; background:#FFFFFF; border:1px solid #E7EAF2; border-radius:10px;
  padding:6px 12px; font-size:11px; color:#334155; font-weight:600;}
.meta-chip b{color:#14141C;}
.meta-chip .m-ic{font-size:12px;}
.meta-chip.tk-priority.pk-high{border-color:#FECACA; background:#FEF2F2; color:#B91C1C;}
.meta-chip.tk-priority.pk-medium{border-color:#FDE68A; background:#FFFBEB; color:#B45309;}
.meta-chip.tk-priority.pk-low{border-color:#A7F3D0; background:#ECFDF5; color:#047857;}

/* ---------- گفتگو ---------- */
.ticket-thread{max-width:820px; display:flex; flex-direction:column; gap:14px; margin-bottom:22px;}
.ticket-msg{display:flex; gap:12px; align-items:flex-start;}
.ticket-av{flex-shrink:0; padding-top:2px;}
.av-core{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; color:#fff; box-shadow:0 4px 12px -6px rgba(30,41,59,.3);}
.av-client{background:linear-gradient(135deg,#7C3AED,#DB2777);}
.av-staff{background:linear-gradient(135deg,#0891B2,#059669);}
.ticket-msg.is-staff{flex-direction:row-reverse;}
.ticket-bubble{max-width:78%; padding:14px 18px; border-radius:16px 16px 16px 4px; background:#FFFFFF; border:1px solid #E7EAF2;
  box-shadow:0 4px 14px -10px rgba(30,41,59,.16);}
.ticket-msg.is-staff .ticket-bubble{border-radius:16px 16px 4px 16px; background:#F0FDFA; border-color:#CCFBF1;}
.ticket-who{display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap;}
.tk-name{font-size:12px; font-weight:800; color:#14141C;}
.tk-staff-chip{font-size:9.5px; font-weight:800; background:#CCFBF1; color:#047857; padding:2px 8px; border-radius:999px;}
.tk-when{font-size:10.5px; color:#94A3B8; font-weight:500;}
.ticket-txt{font-size:13.5px; line-height:2; color:#1E293B; word-break:break-word;}
.ticket-files{margin-top:10px; padding-top:10px; border-top:1px dashed #E7EAF2; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.files-title{font-size:10.5px; color:#94A3B8; font-weight:600;}
.file-chip{display:inline-flex; align-items:center; gap:5px; font-size:11px; color:#6D28D9; background:#F5F3FF; border:1px solid #DDD6FE;
  padding:4px 10px; border-radius:8px; text-decoration:none;}
.file-chip:hover{background:#EDE9FE;}

/* ---------- فرم پاسخ ---------- */
.ticket-reply-card{max-width:820px; background:#FFFFFF; border:1px solid #E3E5F0; border-radius:20px; padding:20px;
  box-shadow:0 6px 22px -18px rgba(30,41,59,.2);}
.reply-head{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.reply-ic{width:34px; height:34px; border-radius:11px; background:#F5F3FF; color:#6D28D9; display:flex; align-items:center; justify-content:center; font-size:16px;}
.reply-head h3{margin:0; font-size:15px; font-weight:800; color:#14141C;}
.ticket-reply-card .tk-grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;}
.reply-actions{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:6px;}
.attach-btn{display:inline-flex; align-items:center; gap:5px;}
.reply-actions-main{display:flex; gap:8px; flex-wrap:wrap;}
.tk-reopen-wrap{max-width:820px; margin-top:8px; text-align:left;}

/* ---------- ۳) تیکت جدید / انتخاب بخش ---------- */
.ticket-intro{display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,#EEF1FB,#FCFDFF); border:1px solid #E3E5F0;
  border-radius:20px; padding:20px 22px; margin-bottom:20px; box-shadow:0 6px 22px -18px rgba(30,41,59,.25);}
.intro-av{width:54px; height:54px; border-radius:16px; background:linear-gradient(135deg,#7C3AED,#0891B2); color:#fff; font-size:25px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 6px 18px -8px rgba(124,58,237,.5);}
.intro-txt h2{margin:0 0 4px; font-size:16px; font-weight:800; color:#14141C;}
.intro-txt p{margin:0; font-size:12.5px; color:#64748B;}

.tk-dept-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.tk-dept-card{background:#FFFFFF; border:1px solid #E7EAF2; border-radius:18px; padding:22px 18px; text-align:center; text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:4px; box-shadow:0 4px 14px -12px rgba(30,41,59,.14);
  transition:all .18s;}
.tk-dept-card:hover{border-color:#C4B5FD; background:#FAF7FF; transform:translateY(-3px); box-shadow:0 14px 28px -16px rgba(124,58,237,.4);}
.tk-dept-ic{width:50px; height:50px; border-radius:15px; background:linear-gradient(135deg,#F5F3FF,#FDF4FF); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:8px;}
.tk-dept-name{font-size:14px; font-weight:800; color:#14141C;}
.tk-dept-desc{font-size:11px; color:#64748B; line-height:1.8;}
.tk-dept-arrow{font-size:11px; font-weight:800; color:#7C3AED; margin-top:8px; opacity:0; transform:translateX(-8px); transition:all .18s;}
.tk-dept-card:hover .tk-dept-arrow{opacity:1; transform:translateX(0);}

/* ---------- ۴) فرم تیکت جدید (مرحله ۲) ---------- */
.tk-form-head{display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,#EEF1FB,#FCFDFF); border:1px solid #E3E5F0;
  border-radius:20px; padding:20px 22px; margin-bottom:20px; box-shadow:0 6px 22px -18px rgba(30,41,59,.25);}
.tk-form-head-av{width:54px; height:54px; border-radius:16px; background:linear-gradient(135deg,#7C3AED,#0891B2); color:#fff; font-size:25px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 6px 18px -8px rgba(124,58,237,.5);}
.tk-form-head h2{margin:0 0 4px; font-size:16px; font-weight:800; color:#14141C;}
.tk-form-head p{margin:0; font-size:12.5px; color:#64748B;}

.tk-form-section{background:#FFFFFF; border:1px solid #E3E5F0; border-radius:18px; padding:20px; margin-bottom:16px;
  box-shadow:0 4px 14px -16px rgba(30,41,59,.16);}
.tk-section-title{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:800; color:#14141C; margin-bottom:14px; padding-bottom:10px; border-bottom:1px dashed #E7EAF2;}
.ts-ic{width:30px; height:30px; border-radius:9px; background:#F5F3FF; color:#6D28D9; display:flex; align-items:center; justify-content:center; font-size:14px;}

.upload-dropzone{position:relative; border:2px dashed #CBD5E1; border-radius:14px; background:#FAFBFF; padding:26px 14px; text-align:center; transition:border-color .2s, background .2s;}
.upload-dropzone:hover{border-color:#7C3AED; background:#F5F3FF;}
.upload-dropzone .dz-ic{font-size:26px; margin-bottom:6px;}
.upload-dropzone p{font-size:12px; color:#64748B; margin:0;}
.upload-dropzone .dz-input{position:absolute; inset:0; opacity:0; cursor:pointer;}

.tk-form-footer{background:#FFFFFF; border:1px solid #E3E5F0; border-radius:18px; padding:18px 20px;
  box-shadow:0 6px 22px -18px rgba(30,41,59,.2);}
.tk-form-actions{display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap;}

/* ---------- ۵) تأیید ثبت ---------- */
.ticket-success-card{max-width:560px; margin:20px auto; text-align:center; padding:44px 30px; background:#FFFFFF;
  border:1px solid #E3E5F0; border-radius:24px; box-shadow:0 14px 40px -24px rgba(30,41,59,.3);}
.success-ic{width:76px; height:76px; border-radius:50%; background:linear-gradient(135deg,#ECFDF5,#D1FAE5); margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center; font-size:34px; box-shadow:0 10px 24px -12px rgba(5,150,105,.5);}
.ticket-success-card h2{font-size:18px; font-weight:800; color:#14141C; margin-bottom:10px;}
.ticket-success-card h2 a{color:#6D28D9; text-decoration:none;}
.ticket-success-card p{color:#64748B; font-size:12.5px; margin-bottom:22px;}
.success-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}

/* ---------- ۶) پیشنهاد مقالات ---------- */
.tk-kb-card{background:#FFFFFF; border:1px solid #E3E5F0; border-radius:18px; padding:18px 20px; margin-top:16px;}
.tk-kb-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.kb-head-ic{width:38px; height:38px; border-radius:12px; background:#F5F3FF; color:#6D28D9; font-size:18px; display:flex; align-items:center; justify-content:center;}
.tk-kb-head h3{margin:0; font-size:14px; font-weight:800; color:#14141C;}
.tk-kb-head p{margin:2px 0 0; font-size:11px; color:#64748B;}
.tk-kb-list{display:flex; flex-direction:column; gap:8px;}
.tk-kb-item{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid #E9ECF4; border-radius:12px;
  background:#FAFBFF; text-decoration:none; transition:all .18s;}
.tk-kb-item:hover{border-color:#C4B5FD; background:#FAF7FF; transform:translateX(-2px);}
.tk-kb-item-ic{width:34px; height:34px; border-radius:10px; background:#F1F5F9; font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.tk-kb-item-txt{flex:1; min-width:0;}
.tk-kb-item-txt b{display:block; font-size:12.5px; color:#14141C; margin-bottom:2px;}
.tk-kb-item-txt i{display:block; font-size:10.5px; color:#64748B; font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tk-kb-item-go{color:#CBD5E1; font-size:14px; transition:color .15s, transform .15s;}
.tk-kb-item:hover .tk-kb-item-go{color:#7C3AED; transform:translateX(-3px);}

/* ---------- موبایل ---------- */
@media (max-width:900px){
  .tk-stats{grid-template-columns:repeat(2,1fr);}
  .tk-dept-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .tk-stats{grid-template-columns:1fr 1fr; gap:10px;}
  .tk-dept-grid{grid-template-columns:1fr;}
  .ticket-reply-card .tk-grid-2{grid-template-columns:1fr;}
  .ticket-msg .ticket-bubble{max-width:100%;}
  .ticket-head{flex-direction:column; align-items:flex-start; text-align:center;}
  .ticket-head-av{margin:0 auto;}
  .ticket-head-meta{justify-content:center;}
}