/* ==========================================================================
   NiceVPN Operations Console
   یک سیستم طراحی واحد. بدون لایه‌های روی‌هم.

   1. توکن‌ها      5. جدول            9.  داشبورد
   2. پایه         6. فرم             10. رسیدها
   3. اسکلت        7. مودال           11. API
   4. دکمه         8. کارت و پنل      12. ریسپانسیو
   ========================================================================== */

/* ==========================================================================
   1. توکن‌ها
   ========================================================================== */
:root {
  /* خنثی — تیره */
  --c0:#0a0d16; --c1:#111624; --c2:#171d2f; --c3:#1f273c; --c4:#2a3350;
  --line:#232b40; --line-2:#303a55;

  --tx:#eef1f9; --tx-2:#a8b2ca; --tx-3:#7b869f;

  /* اکسنت */
  --ac:#7d6cf5; --ac-2:#9b8dfa; --ac-ink:#fff;
  --ac-bg:rgba(125,108,245,.13); --ac-br:rgba(125,108,245,.32);

  --ok:#3ecf8e;  --ok-bg:rgba(62,207,142,.12);  --ok-br:rgba(62,207,142,.28);
  --wr:#f0b429;  --wr-bg:rgba(240,180,41,.12);  --wr-br:rgba(240,180,41,.28);
  --dg:#f4677a;  --dg-bg:rgba(244,103,122,.12); --dg-br:rgba(244,103,122,.28);
  --in:#4d9bf5;  --in-bg:rgba(77,155,245,.12);  --in-br:rgba(77,155,245,.28);
  --pu:#b07cf7;  --pu-bg:rgba(176,124,247,.12); --pu-br:rgba(176,124,247,.28);

  /* شعاع — یک مقیاس */
  --r1:8px; --r2:12px; --r3:16px; --r4:22px;

  /* سایه */
  --sh1:0 1px 2px rgba(0,0,0,.28);
  --sh2:0 6px 20px -8px rgba(0,0,0,.6);
  --sh3:0 20px 48px -16px rgba(0,0,0,.72);

  /* فاصله */
  --gap:16px; --pad:20px;

  --side:264px; --head:62px;
  --font:"Vazirmatn",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.9,.32,1);
}

body[data-theme="light"] {
  --c0:#f5f7fc; --c1:#fff; --c2:#f7f9fd; --c3:#eef2f9; --c4:#e3e9f4;
  --line:#e4e9f2; --line-2:#d3dbe9;

  --tx:#131828; --tx-2:#515c75; --tx-3:#7e8899;

  --ac:#6152ea; --ac-2:#7b6cf0;
  --ac-bg:rgba(97,82,234,.08); --ac-br:rgba(97,82,234,.22);

  --ok:#0f9d63;  --ok-bg:rgba(15,157,99,.08);  --ok-br:rgba(15,157,99,.2);
  --wr:#a86a00;  --wr-bg:rgba(168,106,0,.08);  --wr-br:rgba(168,106,0,.2);
  --dg:#d6394f;  --dg-bg:rgba(214,57,79,.08); --dg-br:rgba(214,57,79,.2);
  --in:#1f6fd0;  --in-bg:rgba(31,111,208,.08); --in-br:rgba(31,111,208,.2);
  --pu:#7c3aed;  --pu-bg:rgba(124,58,237,.08); --pu-br:rgba(124,58,237,.2);

  --sh1:0 1px 2px rgba(19,24,40,.05);
  --sh2:0 6px 20px -10px rgba(19,24,40,.16);
  --sh3:0 20px 48px -18px rgba(19,24,40,.22);
}

/* ==========================================================================
   2. پایه
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;
  font-family:var(--font);font-size:14px;line-height:1.7;
  color:var(--tx);background:var(--c0);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.45;letter-spacing:-.2px}
h1{font-size:24px}h2{font-size:17px}h3{font-size:15px}h4{font-size:13px}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px;border-radius:var(--r1)}
code,.mono,.mono-id,.api-code{font-family:var(--mono);font-size:12px;direction:ltr;unicode-bidi:embed}
.hidden{display:none!important}
.muted{color:var(--tx-3)}
.muted2{color:var(--tx-2)}
.money,.money-big,.value,.data-count{font-variant-numeric:tabular-nums}
.mt10{margin-top:10px}.mt12{margin-top:12px}.mt14{margin-top:14px}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid var(--c0)}
::-webkit-scrollbar-thumb:hover{background:var(--tx-3)}

/* ==========================================================================
   3. اسکلت
   ========================================================================== */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}

/* --- سایدبار --- */
.side{
  position:sticky;top:0;align-self:start;
  height:100vh;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:2px;
  padding:18px 12px 16px;
  background:var(--c1);border-inline-start:1px solid var(--line);
}
.side .brand{
  display:flex;align-items:center;gap:11px;
  padding:6px 8px 18px;margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.side .mark{
  width:38px;height:38px;flex:none;border-radius:var(--r2);
  display:grid;place-items:center;font-size:17px;font-weight:700;
  color:var(--ac-ink);background:linear-gradient(140deg,var(--ac),var(--ac-2));
}
.side .brand b{display:block;font-size:13.5px;line-height:1.4}
.side .brand span{font-size:11px;color:var(--tx-3)}

.nav-label{
  padding:14px 10px 6px;font-size:10.5px;font-weight:700;
  letter-spacing:.6px;color:var(--tx-3);text-transform:uppercase;
}
.nav{
  position:relative;display:flex;align-items:center;gap:11px;
  padding:9px 11px;border-radius:var(--r2);
  font-size:13px;font-weight:500;color:var(--tx-2);
  transition:color .15s,background .15s;
}
.nav i{width:17px;font-size:14px;text-align:center;flex:none}
.nav span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav small{
  flex:none;min-width:20px;padding:1px 7px;border-radius:99px;
  font-size:10.5px;font-weight:700;text-align:center;
  color:var(--tx-3);background:var(--c3);
}
.nav:hover{color:var(--tx);background:var(--c2)}
.nav.active{color:var(--ac);background:var(--ac-bg);font-weight:600}
.nav.active small{color:var(--ac-ink);background:var(--ac)}
.nav.active::before{
  content:"";position:absolute;inset-block:9px;inset-inline-start:0;
  width:3px;border-radius:99px;background:var(--ac);
}
.nav.sub{padding-inline-start:38px;font-size:12.5px}

.nav-group{margin:0}
.nav-group>summary{
  display:flex;align-items:center;gap:11px;cursor:pointer;list-style:none;
  padding:9px 11px;border-radius:var(--r2);
  font-size:13px;font-weight:500;color:var(--tx-2);
  transition:color .15s,background .15s;
}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary i:first-child{width:17px;font-size:14px;text-align:center;flex:none}
.nav-group>summary span{flex:1}
.nav-group>summary .caret{font-size:10px;color:var(--tx-3);transition:transform .2s var(--ease)}
.nav-group[open]>summary .caret{transform:rotate(180deg)}
.nav-group>summary:hover{color:var(--tx);background:var(--c2)}

.logout{
  display:flex;align-items:center;gap:10px;margin-top:auto;
  padding:10px 12px;border-radius:var(--r2);
  font-size:12.5px;font-weight:600;color:var(--dg);
  border:1px solid transparent;transition:background .15s,border-color .15s;
}
.logout:hover{background:var(--dg-bg);border-color:var(--dg-br)}

/* --- ناحیه اصلی --- */
.main{min-width:0;padding:26px 30px 60px}

/* --- نوار ابزار شناور --- */
.admin-toolbar{
  position:fixed;inset-block-start:16px;inset-inline-start:16px;z-index:60;
  display:flex;gap:8px;
}
.icon-tool{
  width:38px;height:38px;border-radius:var(--r2);cursor:pointer;
  display:grid;place-items:center;font-size:14px;
  color:var(--tx-2);background:var(--c1);
  border:1px solid var(--line);box-shadow:var(--sh1);
  transition:color .15s,border-color .15s;
}
.icon-tool:hover{color:var(--ac);border-color:var(--ac-br)}
.mobile-menu-btn{display:none}
.sidebar-backdrop{
  position:fixed;inset:0;z-index:49;background:rgba(5,8,16,.6);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;
}
.sidebar-backdrop.show{opacity:1;visibility:visible}

/* --- فقط تب فعال --- */
.tab{display:none}
.tab.active{display:block;animation:tabIn .26s var(--ease) both}
@keyframes tabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* --- سرصفحه صفحه — یکی، فقط یکی --- */
.page-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding:0 0 18px;margin-bottom:24px;
  border-bottom:1px solid var(--line);
}
.page-header__main{min-width:0;flex:1 1 320px}
.page-header__side{display:flex;align-items:center;gap:9px;flex:none;flex-wrap:wrap}
.crumb{
  display:flex;align-items:center;gap:7px;margin-bottom:7px;
  font-size:11.5px;font-weight:600;color:var(--tx-3);
}
.crumb i:first-child{color:var(--ac)}
.crumb .sep{font-size:9px;opacity:.6}
.crumb span{color:var(--tx-2)}
.page-header h1{font-size:24px;margin-bottom:5px;color:var(--tx)}
.page-header p{font-size:13px;color:var(--tx-3);max-width:74ch}

/* میان‌بر صندوق بررسی */
.inbox-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:99px;
  font-size:12px;font-weight:600;
  color:var(--dg);background:var(--dg-bg);border:1px solid var(--dg-br);
  transition:filter .15s;
}
.inbox-chip:hover{filter:brightness(1.12)}

.page-badges{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}

/* سازگاری با هر سرصفحه‌ی قدیمی که باقی مانده باشد */
.page-heading,.hero{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding:0 0 18px;margin-bottom:22px;
  border-bottom:1px solid var(--line);
}
.page-heading>div:first-child,.hero>div:first-child{min-width:0;flex:1 1 320px}
.section-kicker{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;
  padding:3px 11px;border-radius:99px;font-size:11px;font-weight:600;
  color:var(--ac);background:var(--ac-bg);border:1px solid var(--ac-br);
}
.page-title,.hero h1{font-size:23px;margin-bottom:5px;color:var(--tx)}
.page-heading p,.hero p{font-size:13px;color:var(--tx-3);max-width:70ch}

.hero-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hero-action{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:var(--r2);
  font-size:12.5px;font-weight:600;color:var(--tx-2);
  background:var(--c2);border:1px solid var(--line);
  transition:color .15s,border-color .15s,background .15s;
}
.hero-action i{font-size:13px;color:var(--tx-3);transition:color .15s}
.hero-action:hover{color:var(--ac);background:var(--ac-bg);border-color:var(--ac-br)}
.hero-action:hover i{color:var(--ac)}

.online{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:6px 13px;border-radius:99px;font-size:11.5px;font-weight:600;
  color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-br);
}
.online .dot{width:7px;height:7px;border-radius:50%;background:currentColor}

/* --- زیرتب‌ها --- */
.settings-tabs{
  display:flex;gap:4px;flex-wrap:wrap;margin-bottom:22px;
  padding:4px;border-radius:var(--r2);
  background:var(--c2);border:1px solid var(--line);width:max-content;max-width:100%;
}
.settings-tabs a{
  padding:7px 15px;border-radius:var(--r1);
  font-size:12.5px;font-weight:600;color:var(--tx-3);
  transition:color .15s,background .15s;
}
.settings-tabs a:hover{color:var(--tx)}
.settings-tabs a.active{color:var(--ac);background:var(--c1);box-shadow:var(--sh1)}

/* ==========================================================================
   4. دکمه — یک سیستم واحد
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  cursor:pointer;white-space:nowrap;vertical-align:middle;
  min-height:38px;padding:8px 16px;border-radius:var(--r2);
  font-size:12.5px;font-weight:600;line-height:1.4;
  color:var(--tx);background:var(--c2);
  border:1px solid var(--line-2);
  transition:background .15s,border-color .15s,color .15s,transform .1s,box-shadow .15s;
}
.btn i{font-size:13px}
.btn:hover{background:var(--c3);border-color:var(--tx-3)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn.off{opacity:.45;pointer-events:none}

/* واریانت‌های رنگی — همه از یک الگو */
.btn.brand { color:var(--ac-ink); background:var(--ac);  border-color:transparent }
.btn.green { color:#fff;          background:var(--ok);  border-color:transparent }
.btn.red,
.btn.danger{ color:#fff;          background:var(--dg);  border-color:transparent }
.btn.blue  { color:#fff;          background:var(--in);  border-color:transparent }
.btn.purple{ color:#fff;          background:var(--pu);  border-color:transparent }
.btn.brand:hover{background:var(--ac-2);border-color:transparent}
.btn.green:hover,.btn.red:hover,.btn.danger:hover,.btn.blue:hover,.btn.purple:hover{
  filter:brightness(1.08);border-color:transparent;
}

/* واریانت‌های ملایم */
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.ghost:hover{background:var(--c2);border-color:var(--line-2)}
.btn.soft{color:var(--ac);background:var(--ac-bg);border-color:var(--ac-br)}
.btn.soft:hover{background:var(--ac-bg);border-color:var(--ac);filter:none}

/* اندازه‌ها */
.btn.mini,.btn.tiny{min-height:30px;padding:5px 11px;font-size:11.5px;border-radius:var(--r1)}
.btn.wide,.btn.full{width:100%}
.btn.icon{width:38px;padding:0;flex:none}
.btn.icon.mini{width:30px}

.btn.loading{position:relative;color:transparent!important;pointer-events:none}
.btn.loading::after{
  content:"";position:absolute;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:currentColor;
  color:var(--tx);animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.actions form{display:contents}

/* ==========================================================================
   5. جدول — یک استایل برای همه جدول‌های پنل
   ========================================================================== */
.table,.clean-table,.api-compact-table,.api-plan-table,.churn-table,.campaign-price-table{
  width:100%;overflow-x:auto;
  border-radius:var(--r3);
  background:var(--c1);border:1px solid var(--line);
}
.table table,.clean-table table,.api-compact-table table,
.api-plan-table table,.churn-table table,.campaign-price-table table,
table.table,table.clean-table{
  width:100%;border-collapse:collapse;font-size:12.5px;
}
/* وقتی خود <table> کلاس را دارد، لبه از خودش گرفته می‌شود */
table.table,table.clean-table{display:table;border-radius:0;border:0;background:transparent}

thead th{
  position:sticky;top:0;z-index:2;
  padding:11px 14px;
  font-size:11px;font-weight:700;letter-spacing:.3px;text-align:start;
  color:var(--tx-3);background:var(--c2);
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
tbody td{
  padding:12px 14px;
  color:var(--tx-2);border-bottom:1px solid var(--line);
  vertical-align:middle;
}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--c2)}
tbody td b{color:var(--tx);font-weight:600}
tbody td small{display:block;font-size:11px;color:var(--tx-3);margin-top:1px}

/* ردیف‌های جمع‌شونده */
tr.summary-row{cursor:pointer}
tr.summary-row.open{background:var(--c2)}
tr.detail-row{display:none}
tr.detail-row.show{display:table-row}
tr.detail-row>td{padding:0;background:var(--c2);border-bottom:1px solid var(--line)}
tr.detail-row .grid-detail{padding:16px}
.row-toggle{
  width:26px;height:26px;border-radius:var(--r1);cursor:pointer;
  display:inline-grid;place-items:center;font-size:10px;
  color:var(--tx-3);background:var(--c3);border:1px solid var(--line);
  transition:transform .2s var(--ease),color .15s;
}
tr.summary-row.open .row-toggle{transform:rotate(180deg);color:var(--ac)}

/* حالت خالی */
.empty,.empty-state,.compact-empty,.software-empty{
  display:grid;place-items:center;gap:8px;
  padding:44px 22px;text-align:center;
  font-size:13px;color:var(--tx-3);
  border-radius:var(--r3);background:var(--c1);border:1px dashed var(--line-2);
}
tbody td.empty,tbody .empty{border:0;background:transparent;padding:34px 16px}

/* نوار ابزار بالای جدول */
.search{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px;
}
.search input,.search select{
  min-width:0;padding:9px 13px;border-radius:var(--r2);
  font-size:12.5px;color:var(--tx);background:var(--c1);
  border:1px solid var(--line);
}
.search input{flex:1 1 220px}
.search input:focus,.search select:focus{outline:0;border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-bg)}

/* ==========================================================================
   6. فرم — بر پایه ساختار واقعی مارکاپ
   .field-card   = <label><span>برچسب</span><input></label>
   .switch-card  = <label><input type=checkbox><span><b/><small/></span></label>
   .checkline    = <label><input type=checkbox> متن</label>
   label خالی    = <label>متن<input></label>  (داخل ردیف‌های کارت و لینک)
   ========================================================================== */

/* ---- برچسب + ورودی: همیشه دو ردیف، هرگز کنار هم ---- */
.field,.api-field,.field-wrap,.field-card,
.paycard-row>label,.software-link-row>label,.detail-box>label,
.grid-detail>label,.campaign-detail>label,.form-detail>label,
.modal-card>label,.pro-form>label,.two-col>label{
  display:grid;gap:6px;min-width:0;
  font-size:11.5px;font-weight:600;color:var(--tx-2);
}
/* پشتیبان عمومی: هر برچسبی که کنترل فرم دارد */
.main label:has(>input),.main label:has(>select),.main label:has(>textarea),
.modal-card label:has(>input),.modal-card label:has(>textarea){
  display:grid;gap:6px;min-width:0;
}
.field>span,.field-card>span,.api-field>span,.field>label,.api-field>label{
  font-size:11.5px;font-weight:600;color:var(--tx-2);line-height:1.6;
}
/* ورودی داخل برچسب، اندازه متن خودش را دارد نه اندازه برچسب */
label>input,label>select,label>textarea{font-size:13px;font-weight:400;color:var(--tx)}
/* هر عنصری با .full یا .wide داخل هر گرید فرمی، تمام‌عرض می‌شود.
   نسخه قبلی فقط برچسب‌ها را پوشش می‌داد و بخش‌هایی مثل CubePay
   و کارت‌های بانکی در یک ستون باریک فشرده می‌شدند. */
.full,.wide,.form-submit,.sticky-save,.subhead{grid-column:1/-1}
/* .wide روی کارت نمودار یک معنی دیگر دارد و نباید ستون‌بندی را عوض کند */
.chart-card.wide{grid-column:auto}

/* ---- کنترل‌ها ---- */
input[type=text],input[type=number],input[type=password],input[type=url],
input[type=email],input[type=date],input[type=search],input:not([type]),
select,textarea{
  width:100%;padding:10px 13px;border-radius:var(--r2);
  font-size:13px;font-weight:400;color:var(--tx);background:var(--c2);
  border:1px solid var(--line);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
input::placeholder,textarea::placeholder{color:var(--tx-3);font-weight:400}
input:focus,select:focus,textarea:focus{
  outline:0;background:var(--c1);border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-bg);
}
textarea{min-height:96px;resize:vertical;line-height:1.75}
textarea.code-textarea,.code-textarea{font-family:var(--mono);font-size:12px;direction:ltr;text-align:left}
textarea.tall{min-height:150px}
select{cursor:pointer}
input[type=color]{padding:4px;height:40px;cursor:pointer}
input[disabled],select[disabled],textarea[disabled]{opacity:.55;cursor:not-allowed}
input[type=checkbox],input[type=radio]{
  width:17px;height:17px;flex:none;margin:1px 0 0;accent-color:var(--ac);cursor:pointer;
}

/* ---- گریدهای فرم ---- */
.form-grid,.api-form-grid,.pro-form,.settings-grid,.mini-form,.campaign-form,
.software-platform-form,.api-clean-form,.cubepay-settings,.detail-box,
.grid-detail,.campaign-detail,.form-detail,.software-link-row,.api-grid-2{
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.form-grid.two-col,.two-col{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.settings-single,.form-detail{grid-template-columns:1fr}
.settings-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.inline-form{display:flex;flex-wrap:wrap;gap:9px;align-items:flex-end}
.inline-form .field,.inline-form>input{flex:1 1 180px}
.inline-form .btn{flex:none}

/* ---- سوییچ: چک‌باکس + عنوان و توضیح ---- */
.switch-card,.api-toggle,.minimal-toggle{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  padding:14px 15px;border-radius:var(--r2);
  background:var(--c2);border:1px solid var(--line);
  transition:border-color .15s,background .15s;
}
.switch-card:hover,.api-toggle:hover,.minimal-toggle:hover{border-color:var(--line-2)}
.switch-card:has(input:checked),.api-toggle:has(input:checked){
  border-color:var(--ac-br);background:var(--ac-bg);
}
.switch-card>span,.api-toggle>span,.minimal-toggle>span{display:grid;gap:3px;min-width:0}
.switch-card b,.api-toggle b,.minimal-toggle b{
  font-size:12.5px;font-weight:700;color:var(--tx);line-height:1.6;
}
.switch-card small,.api-toggle small,.minimal-toggle small{
  font-size:11px;font-weight:400;color:var(--tx-3);line-height:1.7;
}
.switch-card.compact{padding:11px 13px}

/* ---- چک‌باکس ساده با متن ---- */
.checkline,.danger-check{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:11px 13px;border-radius:var(--r2);
  font-size:12.5px;font-weight:500;color:var(--tx-2);
  background:var(--c2);border:1px solid var(--line);
  transition:border-color .15s;
}
.checkline:hover,.danger-check:hover{border-color:var(--line-2)}
.checkline.mini{padding:7px 11px;font-size:11.5px}
.danger-check{color:var(--dg);border-color:var(--dg-br);background:var(--dg-bg)}
.danger-check input{accent-color:var(--dg)}

/* ---- ردیف کارت بانکی و لینک نرم‌افزار ---- */
.paycard-row,.software-link-row{
  display:grid;gap:12px;align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  padding:15px;border-radius:var(--r2);
  background:var(--c2);border:1px solid var(--line);
}
.paycard-row+.paycard-row,.software-link-row+.software-link-row{margin-top:10px}
.paycard-row .checkline,.software-link-row .checkline{background:var(--c1)}
.paycard-row>.actions,.software-link-row>.actions{align-items:end}

/* ---- نوار ذخیره چسبان ---- */
.sticky-save{
  position:sticky;bottom:0;z-index:5;
  display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;
  margin:18px calc(var(--pad) * -1) calc(var(--pad) * -1);
  padding:14px var(--pad);
  background:var(--c1);border-top:1px solid var(--line);
  border-radius:0 0 var(--r3) var(--r3);
}
.sticky-save span{font-size:11.5px;color:var(--tx-3);margin-inline-end:auto}

/* ==========================================================================
   7. مودال
   ========================================================================== */
.modal-backdrop{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(5,8,16,.68);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;
}
.modal-backdrop.show{opacity:1;visibility:visible}
.modal-card{
  width:min(500px,100%);max-height:86vh;overflow-y:auto;
  padding:24px;border-radius:var(--r4);
  background:var(--c1);border:1px solid var(--line-2);box-shadow:var(--sh3);
  transform:translateY(14px) scale(.98);
  transition:transform .24s var(--ease);
}
.modal-backdrop.show .modal-card{transform:none}
.modal-card h3{font-size:17px;margin-bottom:6px}
.modal-card>p{font-size:12.5px;color:var(--tx-3);margin-bottom:18px}
.modal-row{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
.modal-row .btn{min-width:104px}
.link-modal-text{
  padding:12px 14px;margin-bottom:16px;border-radius:var(--r2);
  font-family:var(--mono);font-size:12px;line-height:1.8;
  direction:ltr;text-align:left;word-break:break-all;max-height:190px;overflow:auto;
  color:var(--tx-2);background:var(--c2);border:1px solid var(--line);
}

/* ==========================================================================
   8. کارت و پنل
   ========================================================================== */
.panel,.chart-card,.chart-panel,.api-live-card,
.api-clean-panel,.api-log-panel,.signal-panel,.priority-panel,
.campaign-global-box,.campaign-per-plan-box,.software-platform-card,
.download-preview-card,.mini-preview,.pay-card,.add-plan-card{
  padding:var(--pad);border-radius:var(--r3);
  background:var(--c1);border:1px solid var(--line);box-shadow:var(--sh1);
}
.panel{margin-bottom:18px}
.panel.no-pad{padding:0;overflow:hidden}
.panel.no-pad .panel-head{padding:var(--pad) var(--pad) 0}
.panel.no-pad .table{border:0;border-radius:0;background:transparent}

.panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:16px;
}
.panel-head h2{font-size:15.5px}
.panel-head p,.panel-sub{font-size:12px;color:var(--tx-3);margin-top:2px}
.head-tools{display:flex;gap:7px;flex-wrap:wrap;flex:none}
.heading-badge,.api-section-title{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:700;color:var(--tx);
}
.api-section-title i{color:var(--ac)}

/* گرید عمومی */
.grid,.ops-grid,.chart-grid,.churn-chart-grid,.churn-bottom-grid,
.api-live-grid,.cubepay-grid,.downloads-admin-grid,.churn-action-grid,
.software-platforms,.payment-cards-admin,.mini-stats,.miniapp-stats{
  display:grid;gap:var(--gap);margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.grid{grid-template-columns:1fr}

/* --- نشان و برچسب — یک الگو --- */
.badge,.pill,.tag,.chip,.status-pill,.live-chip,.reason-chip,.lock,.mark{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:99px;
  font-size:11px;font-weight:600;white-space:nowrap;
  color:var(--tx-2);background:var(--c3);border:1px solid transparent;
}
.badge.green,.pill.green,.tag.green,.status-pill.ok,.ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-br)}
.badge.red,.pill.red,.tag.red,.status-pill.failed,.failed,.urgent{color:var(--dg);background:var(--dg-bg);border-color:var(--dg-br)}
.badge.amber,.pill.amber,.tag.amber,.warning,.priority{color:var(--wr);background:var(--wr-bg);border-color:var(--wr-br)}
.badge.blue,.pill.blue,.tag.blue,.info{color:var(--in);background:var(--in-bg);border-color:var(--in-br)}
.badge.purple,.pill.purple,.tag.purple{color:var(--pu);background:var(--pu-bg);border-color:var(--pu-br)}
.badge.slate,.pill.slate,.neutral,.dormant{color:var(--tx-3);background:var(--c3)}
.status-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* --- توست و خطا --- */
.toast,.err{
  display:flex;align-items:center;gap:10px;
  padding:13px 16px;margin-bottom:18px;border-radius:var(--r2);
  font-size:13px;font-weight:500;
  animation:tabIn .3s var(--ease) both;
}
.toast{color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-br)}
.err{color:var(--dg);background:var(--dg-bg);border:1px solid var(--dg-br)}

/* --- بازشونده درجا --- */
.fold{display:none;margin-top:12px}
.fold.show{display:block;animation:tabIn .22s var(--ease) both}

/* ==========================================================================
   9. داشبورد
   ========================================================================== */
.cards{
  display:grid;gap:var(--gap);margin-bottom:22px;
  grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
}
.metric,.report-pill,.churn-kpi{
  position:relative;overflow:hidden;
  display:grid;gap:3px;align-content:start;
  padding:18px;border-radius:var(--r3);
  background:var(--c1);border:1px solid var(--line);box-shadow:var(--sh1);
  transition:border-color .18s,box-shadow .2s,transform .16s;
}
.metric:hover,.report-pill:hover,.churn-kpi:hover{
  transform:translateY(-2px);border-color:var(--ac-br);box-shadow:var(--sh2);
}
.metric>i,.churn-icon{
  width:36px;height:36px;margin-bottom:9px;border-radius:var(--r2);
  display:grid;place-items:center;font-size:15px;
  color:var(--ac);background:var(--ac-bg);
}
/* تنالیته آیکون متریک */
.tone-blue  {color:var(--in)!important;background:var(--in-bg)!important}
.tone-green {color:var(--ok)!important;background:var(--ok-bg)!important}
.tone-amber {color:var(--wr)!important;background:var(--wr-bg)!important}
.tone-red   {color:var(--dg)!important;background:var(--dg-bg)!important}
.tone-purple{color:var(--pu)!important;background:var(--pu-bg)!important}

/* واحد کنار عدد */
.metric b em{font-size:12px;font-weight:500;font-style:normal;color:var(--tx-3);margin-inline-start:3px}

/* کارت شاخص با نوار اکسنت */
.metric.accent{border-color:var(--ac-br)}
.metric.accent::before{
  content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,var(--ac),transparent);
}
.metric.compact b{font-size:19px}

/* کارت قابل کلیک */
.metric.clickable{position:relative;padding-inline-end:44px}
.metric.clickable .go{
  position:absolute;inset-block-start:50%;inset-inline-end:16px;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;
  color:var(--tx-3);background:var(--c3);transition:color .15s,background .15s;
}
.metric.clickable:hover .go{color:var(--ac-ink);background:var(--ac)}
.metric.attention{border-color:var(--dg-br)}
.metric.attention b{color:var(--dg)}

/* شاخص در ابعاد بزرگ‌تر */
.metric .delta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.metric .delta .positive,.metric .delta .minus{font-weight:700}

/* نمودار پهن در گرید داشبورد */
.ops-grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
@media (min-width:1100px){
  .ops-grid{grid-template-columns:1.6fr 1fr}
}
.metric small,.report-pill small,.churn-kpi small{
  font-size:11.5px;font-weight:500;color:var(--tx-3);
}
.metric b,.report-pill b,.churn-kpi b,.money-big{
  font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--tx);
  font-variant-numeric:tabular-nums;
}
.metric .delta,.metric .sub{font-size:11px;color:var(--tx-3)}
.plus,.positive{color:var(--ok)}
.minus{color:var(--dg)}

.report-pills{display:grid;gap:var(--gap);margin-bottom:22px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.churn-kpis{display:grid;gap:var(--gap);margin-bottom:22px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

/* --- نمودار --- */
.chart-card,.chart-panel{display:flex;flex-direction:column}
.chart-card>h3{
  display:flex;align-items:center;gap:8px;
  margin:0 0 14px;font-size:14px;
}
.chart-card>h3::before{
  content:"";width:3px;height:14px;border-radius:99px;background:var(--ac);flex:none;
}
/* Chart.js با maintainAspectRatio:false ارتفاع canvas را برابر ارتفاع والد می‌گذارد.
   اگر والد ارتفاع ثابت نداشته باشد هر resize والد را بزرگ‌تر می‌کند و نمودار
   بی‌نهایت کش می‌آید. position:absolute این حلقه بازخورد را قطع می‌کند. */
.chart-wrap{position:relative;width:100%;height:282px;min-height:282px}
.chart-wrap.tall{height:356px;min-height:356px}
.chart-wrap>canvas{
  position:absolute!important;inset:0;
  width:100%!important;height:100%!important;
  max-width:100%!important;max-height:100%!important;display:block;
}

/* --- نوار پیشرفت --- */
.progress-list{display:grid;gap:12px}
.progress-row{display:grid;gap:6px}
.progress-row b{font-size:12.5px;color:var(--tx)}
.progress-row span{font-size:11px;color:var(--tx-3)}
.rate-cell{display:flex;align-items:center;gap:9px;min-width:130px}
.rate-cell span{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
progress,.progress-meter,.rate-meter{
  appearance:none;width:100%;height:6px;border:0;border-radius:99px;
  background:var(--c3);overflow:hidden;
}
progress::-webkit-progress-bar{background:var(--c3);border-radius:99px}
progress::-webkit-progress-value{background:var(--ac);border-radius:99px}
progress::-moz-progress-bar{background:var(--ac);border-radius:99px}
.risk-meter{display:flex;align-items:baseline;gap:7px}
.risk-meter .risk-score{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--dg)}
.risk-meter small{font-size:11px;color:var(--tx-3)}

/* ==========================================================================
   10. رسیدهای در انتظار — لیست مرتب
   ========================================================================== */
#pending .grid{grid-template-columns:1fr;gap:12px}

.order{
  display:grid;gap:16px;align-items:start;
  grid-template-columns:132px minmax(0,1fr) auto;
  padding:16px;border-radius:var(--r3);
  background:var(--c1);border:1px solid var(--line);box-shadow:var(--sh1);
  transition:border-color .18s,box-shadow .2s;
}
.order:hover{border-color:var(--line-2);box-shadow:var(--sh2)}
.order.renew{border-inline-start:3px solid var(--pu)}
.order.wallet{border-inline-start:3px solid var(--ok)}
.order.new{border-inline-start:3px solid var(--ac)}

/* ستون رسید */
.receipt{display:grid;gap:7px;min-width:0}
.receipt img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  border-radius:var(--r2);background:var(--c3);border:1px solid var(--line);
  cursor:zoom-in;transition:opacity .15s;
}
.receipt img:hover{opacity:.85}
.receipt>a{
  display:block;padding:5px;border-radius:var(--r1);
  font-size:11px;font-weight:600;text-align:center;
  color:var(--ac);background:var(--ac-bg);
}
.receipt span{display:block;font-size:11px;color:var(--tx-3);line-height:1.6}
.receipt span b{display:block;font-size:12.5px;font-weight:600;color:var(--tx)}
.receipt span small{font-size:10.5px;color:var(--tx-3)}
.receipt .cubepay-paid{
  display:inline-block;margin-top:3px;padding:2px 9px;border-radius:99px;
  font-size:10.5px;font-weight:600;font-style:normal;
  color:var(--ok);background:var(--ok-bg);border:1px solid var(--ok-br);
}

/* ستون اطلاعات */
.order-summary{display:grid;gap:5px;min-width:0;align-content:start}
.order-heading{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:5px}
.order-heading h3{font-size:14.5px}
.order-summary p{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:12px;color:var(--tx-3);
}
.order-summary p b{font-size:12.5px;font-weight:600;color:var(--tx);font-variant-numeric:tabular-nums}
.order-summary code{
  padding:1px 8px;border-radius:var(--r1);
  font-size:11.5px;color:var(--tx-2);background:var(--c3);
}

/* ستون اکشن */
.order .actions{
  display:grid;gap:7px;align-content:start;
  grid-auto-flow:row;min-width:172px;
}
.order .actions .btn{width:100%;justify-content:flex-start}

/* ==========================================================================
   11. API / LabEx
   ========================================================================== */
.api-live-grid{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.api-live-card{
  position:relative;display:grid;gap:4px;align-content:start;
  transition:border-color .18s,box-shadow .2s,transform .16s;
}
.api-live-card:hover{transform:translateY(-2px);border-color:var(--ac-br);box-shadow:var(--sh2)}
.api-live-card small{font-size:11.5px;color:var(--tx-3)}
.api-live-card b,.api-live-card .value{
  font-size:19px;font-weight:700;color:var(--tx);
  letter-spacing:-.4px;font-variant-numeric:tabular-nums;
}
.live-chip{align-self:start;margin-bottom:6px}

/* نتیجه فراخوانی API — کارت، نه بلوک کد */
.api-result{
  padding:16px;margin-top:14px;border-radius:var(--r3);
  background:var(--c2);border:1px solid var(--line);
}
.api-result h3{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13.5px;
}
.api-result h3::before{
  content:"";width:3px;height:13px;border-radius:99px;background:var(--ac);flex:none;
}
.api-result>p{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12px;color:var(--tx-2);
}
.api-result>p code{padding:2px 9px;border-radius:var(--r1);background:var(--c3);color:var(--tx-2)}

/* پاسخ خام — جمع‌شونده */
details.api-raw{margin-top:12px}
details.api-raw>summary{
  cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:99px;
  font-size:11.5px;font-weight:600;
  color:var(--tx-2);background:var(--c3);border:1px solid var(--line);
  transition:color .15s,border-color .15s;
}
details.api-raw>summary::-webkit-details-marker{display:none}
details.api-raw>summary::before{content:"▾";font-size:10px;color:var(--tx-3)}
details.api-raw[open]>summary::before{content:"▴"}
details.api-raw>summary:hover{color:var(--ac);border-color:var(--ac-br)}
details.api-raw[open]>summary{margin-bottom:10px;color:var(--ac);border-color:var(--ac-br)}
details.api-raw>*:not(summary),.api-code{
  padding:13px 15px;border-radius:var(--r2);
  font-family:var(--mono);font-size:11.5px;line-height:1.85;
  direction:ltr;text-align:left;white-space:pre-wrap;word-break:break-word;
  max-height:300px;overflow:auto;
  color:var(--tx-2);background:var(--c1);border:1px solid var(--line);
}
.api-warning{
  display:flex;align-items:flex-start;gap:9px;
  padding:12px 14px;margin-bottom:14px;border-radius:var(--r2);
  font-size:12px;color:var(--wr);background:var(--wr-bg);border:1px solid var(--wr-br);
}
.api-advanced{margin-top:16px}
.api-advanced>summary{
  cursor:pointer;list-style:none;
  padding:10px 14px;border-radius:var(--r2);
  font-size:12.5px;font-weight:600;color:var(--tx-2);
  background:var(--c2);border:1px solid var(--line);
}
.api-advanced>summary::-webkit-details-marker{display:none}
.api-advanced>summary:hover{color:var(--tx);border-color:var(--line-2)}
.api-advanced[open]>summary{margin-bottom:14px;color:var(--ac);border-color:var(--ac-br)}
.api-clean-actions,.churn-actions,.wallet-actions,.bank-actions,.api-actions{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;
}
.secure-url,.mono-id{
  font-family:var(--mono);font-size:11.5px;direction:ltr;
  word-break:break-all;color:var(--tx-2);
}

/* ==========================================================================
   12. بخش‌های باقی‌مانده
   ========================================================================== */
/* کارت پرداخت */
.pay-card{display:grid;gap:9px}
.paycard-row .mono{font-size:14px;letter-spacing:1.5px}

/* کمپین */
.campaign-price-row{display:grid;gap:12px;grid-template-columns:1fr auto auto;align-items:end}
.campaign-mode{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.campaign-mode-note,.signal-note,.churn-action p,.download-preview-note{font-size:11.5px;color:var(--tx-3)}
.campaign-detail{display:grid;gap:9px}

/* نرم‌افزارها */
.software-platform-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.software-platform-icon{
  width:40px;height:40px;flex:none;border-radius:var(--r2);
  display:grid;place-items:center;font-size:17px;
  color:var(--ac);background:var(--ac-bg);
}
.software-links-admin,.new-software-links{display:grid;gap:9px}
.software-link-row{
  display:grid;gap:9px;align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  padding:13px;border-radius:var(--r2);
  background:var(--c2);border:1px solid var(--line);
}

/* ریزش */
.churn-action{
  display:grid;gap:7px;padding:16px;border-radius:var(--r3);
  background:var(--c1);border:1px solid var(--line);
}
.signal-list{display:grid;gap:9px}
.risk-score{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}

/* پیش‌نمایش دانلود */
.download-preview-link{
  display:flex;align-items:center;gap:9px;
  padding:10px 13px;border-radius:var(--r2);font-size:12.5px;
  background:var(--c2);border:1px solid var(--line);
}

/* جزئیات کلید/مقدار */
.kv{display:grid;gap:8px}
.kv>div,.detail-box>div{display:flex;justify-content:space-between;gap:12px;font-size:12.5px}
.kv span,.detail-box span{color:var(--tx-3)}
.kv b,.detail-box b{font-weight:600;color:var(--tx)}

.copy-ok{color:var(--ok);font-size:11.5px;font-weight:600}
.jalali-date{font-variant-numeric:tabular-nums;white-space:nowrap}
.danger-note,.safe-note{font-size:11.5px;line-height:1.7}
.danger-note{color:var(--dg)}

/* ==========================================================================
   13. صفحه ورود
   ========================================================================== */
.login-screen{display:block}
.login-page{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.login-visual{
  position:relative;overflow:hidden;
  display:grid;align-content:center;gap:14px;padding:56px;
  color:#fff;background:linear-gradient(150deg,var(--ac) 0%,#4f46e5 55%,#0ea5e9 100%);
}
.login-visual::after{
  content:"";position:absolute;inset:auto -20% -40% 20%;
  height:420px;border-radius:50%;background:rgba(255,255,255,.14);filter:blur(60px);
}
.login-visual>*{position:relative;z-index:1}
.visual-mark{
  width:52px;height:52px;border-radius:var(--r3);
  display:grid;place-items:center;font-size:23px;font-weight:700;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);
}
.visual-brand{font-size:26px;font-weight:700}
.visual-card{
  padding:16px;margin-top:10px;border-radius:var(--r3);font-size:13px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);
}
.login-side{display:grid;align-content:center;padding:56px}
.login-card{width:min(400px,100%);margin:0 auto;display:grid;gap:16px}
.login-card .brand,.login-card .mark{
  width:46px;height:46px;border-radius:var(--r3);
  display:grid;place-items:center;font-size:20px;font-weight:700;
  color:var(--ac-ink);background:linear-gradient(140deg,var(--ac),var(--ac-2));
}
.login-btn{width:100%;min-height:44px}

/* ==========================================================================
   14. ریسپانسیو
   ========================================================================== */
@media (max-width:1180px){
  .main{padding:24px 22px 56px}
  .order{grid-template-columns:118px minmax(0,1fr)}
  .order .actions{grid-column:1/-1;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);min-width:0}
  .order .actions .btn{justify-content:center}
}
@media (max-width:1024px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .mobile-menu-btn{display:grid}
  /* پنل کشویی از لبه inline-start می‌آید (در RTL یعنی سمت راست).
     مهم: عنصر fixed که با transform بیرون از صفحه می‌رود، سرریز افقی
     می‌سازد و کل چیدمان را جابه‌جا می‌کند؛ برای همین صفحه clip می‌شود. */
  html,body{overflow-x:clip}
  .side{
    position:fixed;top:0;bottom:0;left:auto;right:0;z-index:50;
    width:min(288px,86vw);
    transform:translateX(100%);
    transition:transform .26s var(--ease);box-shadow:var(--sh3);
  }
  [dir="ltr"] .side{right:auto;left:0;transform:translateX(-100%)}
  .side.open{transform:none}
  .main{padding:66px 18px 56px}
}
@media (max-width:720px){
  body{font-size:13.5px}
  .main{padding:64px 14px 48px}
  .panel{padding:16px}
  .sticky-save{margin:16px -16px -16px;padding:12px 16px}
  .page-title,.hero h1{font-size:20px}
  .cards,.report-pills,.churn-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .metric b,.report-pill b,.churn-kpi b{font-size:19px}
  .chart-wrap,.chart-wrap.tall{height:238px;min-height:238px}
  .order{grid-template-columns:1fr;gap:13px}
  .receipt{grid-template-columns:88px 1fr;display:grid;align-items:start}
  .receipt img{aspect-ratio:1;grid-row:span 4}
  .order .actions{grid-auto-flow:row}
  .campaign-price-row{grid-template-columns:1fr}
  .inline-form{flex-direction:column;align-items:stretch}
  .login-page{grid-template-columns:1fr}
  .login-visual{display:none}
  .login-side{padding:34px 22px}
  .modal-card{padding:20px}
  .settings-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap}
  thead th,tbody td{padding:10px 11px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
  .side,.admin-toolbar,.sidebar-backdrop,.sticky-save,.btn,.modal-backdrop{display:none!important}
  .shell{grid-template-columns:1fr}
  .panel,.order{break-inside:avoid;box-shadow:none;border-color:#ddd}
}

/* ==========================================================================
   15. اجزای باقی‌مانده
   ========================================================================== */

/* انتخاب آیکون نرم‌افزار */
.icon-picker{position:relative}
.icon-picker-trigger{
  display:flex;align-items:center;gap:9px;width:100%;cursor:pointer;
  padding:9px 13px;border-radius:var(--r2);
  font-size:12.5px;font-weight:500;text-align:start;
  color:var(--tx);background:var(--c2);border:1px solid var(--line);
  transition:border-color .15s;
}
.icon-picker-trigger span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-picker-trigger i:first-child{color:var(--ac);font-size:14px;flex:none}
.icon-picker-trigger i:last-child{font-size:10px;color:var(--tx-3);transition:transform .2s var(--ease)}
.icon-picker.open .icon-picker-trigger{border-color:var(--ac)}
.icon-picker.open .icon-picker-trigger i:last-child{transform:rotate(180deg)}
.icon-picker-menu{
  position:absolute;inset-block-start:calc(100% + 5px);inset-inline:0;z-index:30;
  display:none;grid-template-columns:1fr 1fr;gap:3px;
  max-height:250px;overflow-y:auto;padding:6px;border-radius:var(--r2);
  background:var(--c1);border:1px solid var(--line-2);box-shadow:var(--sh3);
}
.icon-picker.open .icon-picker-menu{display:grid}
.icon-picker-menu button{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  padding:8px 10px;border-radius:var(--r1);
  font-size:11.5px;text-align:start;
  color:var(--tx-2);background:transparent;border:0;
  transition:color .12s,background .12s;
}
.icon-picker-menu button:hover{color:var(--ac);background:var(--ac-bg)}
.icon-picker-menu button i{width:15px;text-align:center;flex:none}
.icon-picker-menu button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* نمودار بدون داده */
.chart-empty{
  position:absolute;inset:0;display:grid;place-items:center;
  padding:20px;text-align:center;font-size:12.5px;color:var(--tx-3);
  border-radius:var(--r2);background:var(--c2);border:1px dashed var(--line-2);
}

/* افزودن لینک نرم‌افزار */
.add-software-link{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:9px 15px;margin-top:10px;border-radius:var(--r2);
  font-size:12.5px;font-weight:600;
  color:var(--ac);background:var(--ac-bg);border:1px dashed var(--ac-br);
  transition:background .15s,border-color .15s;
}
.add-software-link:hover{border-color:var(--ac)}

/* دکمه نمایش لینک داخل جدول */
.link-btn{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:4px 11px;border-radius:99px;
  font-size:11px;font-weight:600;
  color:var(--in);background:var(--in-bg);border:1px solid var(--in-br);
  transition:filter .15s;
}
.link-btn:hover{filter:brightness(1.15)}

/* درصد تخفیف خودکار */
.auto-pct{
  display:inline-flex;align-items:center;padding:4px 11px;border-radius:99px;
  font-size:11px;font-weight:600;white-space:nowrap;
  color:var(--wr);background:var(--wr-bg);border:1px solid var(--wr-br);
}

/* لاگ مدیریتی */
.log-action{
  display:inline-flex;padding:2px 10px;border-radius:99px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;
  color:var(--pu);background:var(--pu-bg);border:1px solid var(--pu-br);
}

/* مدیریت پلن */
.plan-manager{display:grid;gap:var(--gap)}
.plan-manager .panel{margin-bottom:0}

/* عنوان فرعی و متادیتا */
.subhead{
  display:flex;align-items:center;gap:8px;
  margin:22px 0 12px;font-size:13px;font-weight:700;color:var(--tx);
}
.subhead::after{content:"";flex:1;height:1px;background:var(--line)}
.meta{display:flex;flex-wrap:wrap;gap:8px;font-size:11.5px;color:var(--tx-3)}
.meta>span{display:inline-flex;align-items:center;gap:5px}

/* مصرف ترافیک */
.traffic-box{
  display:grid;gap:7px;padding:13px;border-radius:var(--r2);
  background:var(--c2);border:1px solid var(--line);
}
.traffic-box b{font-variant-numeric:tabular-nums}

/* حالت‌های کمکی */
.nested{padding-inline-start:16px;border-inline-start:2px solid var(--line)}
.top{align-items:flex-start}
.first{margin-top:0}
.base{color:var(--tx-3);text-decoration:line-through}
.churn-page .panel{margin-bottom:18px}

/* آیکون کارت‌های وضعیت API */
.api-card-icon{
  width:36px;height:36px;margin-bottom:10px;border-radius:var(--r2);
  display:grid;place-items:center;font-size:15px;
  color:var(--ac);background:var(--ac-bg);
}
.api-card-icon.ok{color:var(--ok);background:var(--ok-bg)}
.api-card-icon.failed{color:var(--dg);background:var(--dg-bg)}
.api-card-icon.wallet{color:var(--wr);background:var(--wr-bg)}
.api-card-icon.clock{color:var(--in);background:var(--in-bg)}

/* ==========================================================================
   16. اصلاح ساختارهایی که با رندر واقعی مارکاپ مشخص شدند
   ========================================================================== */

/* سرتیتر بخش API: عنوان یک طرف، وضعیت طرف دیگر */
.api-section-title{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;flex-wrap:wrap;width:100%;margin-bottom:16px;
}
.api-section-title>div{min-width:0}
.api-section-title h2{display:flex;align-items:center;gap:8px;font-size:15.5px}
.api-section-title p{font-size:12px;color:var(--tx-3);margin-top:2px}

/* هشدار API: b و code پشت سر هم با فاصله درست */
.api-warning{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px 14px;margin-bottom:14px;border-radius:var(--r2);
  font-size:12px;line-height:1.9;
  color:var(--wr);background:var(--wr-bg);border:1px solid var(--wr-br);
}
.api-warning b{font-weight:700}
.api-warning code{padding:2px 9px;border-radius:var(--r1);background:var(--c1);color:var(--tx-2)}

/* آدرس امن: کد + دکمه کپی در یک ردیف */
.secure-url{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:10px 13px;border-radius:var(--r2);
  background:var(--c2);border:1px solid var(--line);
}
.secure-url code{flex:1;min-width:0;word-break:break-all;direction:ltr;text-align:left}

/* یادداشت سیگنال: آیکون + متن */
.signal-note{
  display:flex;align-items:flex-start;gap:9px;margin-top:12px;
  padding:12px 14px;border-radius:var(--r2);font-size:11.5px;line-height:1.8;
  color:var(--tx-3);background:var(--c2);border:1px solid var(--line);
}
.signal-note i{color:var(--ac);margin-top:3px;flex:none}
.signal-list>div{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 13px;border-radius:var(--r2);font-size:12.5px;
  background:var(--c2);border:1px solid var(--line);
}

/* KPI ریزش: آیکون کنار، متن‌ها زیر هم */
.churn-kpi{
  display:flex;align-items:flex-start;gap:13px;
  padding:18px;border-radius:var(--r3);
  background:var(--c1);border:1px solid var(--line);box-shadow:var(--sh1);
}
.churn-kpi>div:last-child{display:grid;gap:2px;min-width:0}
.churn-kpi span{font-size:11.5px;color:var(--tx-3)}
.churn-kpi b{font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--tx);font-variant-numeric:tabular-nums}
.churn-kpi small{font-size:11px;color:var(--tx-3)}
.churn-kpi.positive .churn-icon{color:var(--ok);background:var(--ok-bg)}
.churn-kpi.danger  .churn-icon{color:var(--dg);background:var(--dg-bg)}
.churn-kpi.warning .churn-icon{color:var(--wr);background:var(--wr-bg)}
.churn-kpi.info    .churn-icon{color:var(--in);background:var(--in-bg)}
.churn-kpi.money   .churn-icon{color:var(--pu);background:var(--pu-bg)}
.churn-icon{margin-bottom:0;flex:none}

/* اقدام ریزش: آیکون + عنوان و توضیح */
.churn-action{
  display:flex;align-items:flex-start;gap:11px;
  padding:15px;border-radius:var(--r3);
  background:var(--c1);border:1px solid var(--line);
}
.churn-action>i{
  width:34px;height:34px;flex:none;border-radius:var(--r2);
  display:grid;place-items:center;font-size:14px;
  color:var(--ac);background:var(--ac-bg);
}
.churn-action>div{display:grid;gap:2px;min-width:0}
.churn-action b{font-size:12.5px;color:var(--tx)}
.churn-action p{font-size:11.5px;color:var(--tx-3);line-height:1.7}
.churn-action.urgent>i{color:var(--dg);background:var(--dg-bg)}
.churn-action.priority>i{color:var(--wr);background:var(--wr-bg)}
.churn-action.dormant>i,.churn-action.neutral>i{color:var(--tx-3);background:var(--c3)}
.churn-actions{display:block}
.churn-action-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:0}

/* عنوان فرعی: متن + خط جداکننده */
.subhead{
  display:flex;align-items:center;gap:9px;
  margin:22px 0 12px;font-size:13px;font-weight:700;color:var(--tx);
}
.subhead>div{flex:none}
.subhead::after{content:"";flex:1;height:1px;background:var(--line)}
.subhead .status-dot{flex:none}

/* page-title در مارکاپ یک div پوشاننده است، نه عنوان */
.page-title{display:block;font-size:inherit;margin:0}
.page-title>div{min-width:0}

/* پیش‌نمایش مینی‌اپ */
.mini-preview{padding:0;overflow:hidden}
.mini-preview iframe{display:block;width:100%;height:520px;border:0;background:var(--c2)}

/* کارت پیش‌نمایش دانلود */
.download-preview-card{display:grid;gap:8px}
.download-preview-card>i{
  width:38px;height:38px;border-radius:var(--r2);
  display:grid;place-items:center;font-size:16px;
  color:var(--ac);background:var(--ac-bg);
}
.download-preview-card h3{font-size:14px}
.download-preview-card p{font-size:12px;color:var(--tx-3)}

/* سر کارت نرم‌افزار */
.software-platform-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.software-platform-head>div{min-width:0;flex:1}
.software-platform-head b{display:block;font-size:14px}
.software-platform-head small{font-size:11.5px;color:var(--tx-3)}
.mini-state{
  flex:none;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:600;
  color:var(--tx-3);background:var(--c3);
}

/* کلید/مقدار */
.kv{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12.5px}
.kv+.kv{margin-top:7px;padding-top:7px;border-top:1px dashed var(--line)}
.kv span{color:var(--tx-3)}
.kv b{font-weight:600;color:var(--tx);text-align:end;word-break:break-word}

/* ردیف قیمت کمپین */
.campaign-price-row{
  display:grid;gap:11px;align-items:end;
  grid-template-columns:minmax(0,1.4fr) auto minmax(120px,.8fr) auto;
  padding:13px;border-radius:var(--r2);
  background:var(--c2);border:1px solid var(--line);
}
.campaign-price-row+.campaign-price-row{margin-top:9px}
.campaign-price-row>div:first-child{font-size:12.5px;font-weight:600;color:var(--tx);min-width:0}
.campaign-price-row .base{font-size:11.5px;color:var(--tx-3);text-decoration:line-through;white-space:nowrap}

/* حالت خالی با آیکون */
.empty-state,.software-empty,.compact-empty{
  display:grid;place-items:center;gap:7px;
  padding:40px 20px;text-align:center;font-size:12.5px;color:var(--tx-3);
  border-radius:var(--r3);background:var(--c1);border:1px dashed var(--line-2);
}
.empty-state i,.software-empty i{font-size:24px;color:var(--tx-3)}
.empty-state b{font-size:13.5px;color:var(--tx-2)}

/* مودال: فاصله بین ورودی‌های مستقیم */
.modal-card>input,.modal-card>select,.modal-card>textarea,.modal-card>label{margin-bottom:12px}
.modal-card>p{margin-bottom:16px}

/* details پنل لاگ */
.api-log-panel>summary,.api-advanced>summary{list-style:none}
.api-log-panel>summary::-webkit-details-marker{display:none}
.api-log-panel>summary{
  cursor:pointer;padding:12px 14px;border-radius:var(--r2);
  font-size:13px;font-weight:600;color:var(--tx-2);
  background:var(--c2);border:1px solid var(--line);
}
.api-log-panel[open]>summary{margin-bottom:14px;color:var(--ac);border-color:var(--ac-br)}

/* جعبه‌های کمپین */
.campaign-global-box,.campaign-per-plan-box{padding:16px;border-radius:var(--r2);background:var(--c2);border:1px solid var(--line)}
.campaign-mode-note{font-size:11.5px;color:var(--tx-3);margin-bottom:12px}

/* گرید تنظیمات دانلود */
.downloads-admin-grid{grid-template-columns:minmax(0,1fr)}
.software-platforms{grid-template-columns:minmax(0,1fr);gap:14px}

/* ==========================================================================
   17. جلوگیری از سرریز افقی در چیدمان‌های فلکس
   پیش‌فرض min-width:auto باعث می‌شود فرزند فلکس کوچک‌تر از محتوایش نشود
   و روی صفحه باریک از کادر بیرون بزند.
   ========================================================================== */
.panel-head>div,.head-tools,.search,.subhead>div,
.api-section-title>div,.software-platform-head>div,
.page-header__main,.order-summary,.receipt,.kv>*,
.churn-kpi>div,.churn-action>div,.switch-card>span,
.signal-list>div>*,.secure-url>code,.paycard-row>*,.software-link-row>*{
  min-width:0;
}
.subhead>div{flex:0 1 auto}
.head-tools,.search{flex:1 1 auto;flex-wrap:wrap}
.head-tools>form{display:flex;gap:8px;flex-wrap:wrap;min-width:0;flex:1 1 auto}
.search>input,.search>select{min-width:0}

/* متن‌های طولانی بشکنند، نه اینکه کادر را پهن کنند */
.panel-head h2,.panel-head p,.panel-sub,.subhead small,
.switch-card small,.churn-action p,.api-live-card .muted2{
  overflow-wrap:anywhere;
}

@media (max-width:720px){
  /* روی موبایل، سرتیترها و ابزارها زیر هم بچینند */
  .panel-head{flex-direction:column;align-items:stretch}
  .head-tools{width:100%}
  .head-tools .btn,.head-tools form{width:100%}
  .head-tools .btn{justify-content:center}
  .search{flex-direction:column;align-items:stretch}
  .search input,.search select{width:100%}
  .subhead{flex-wrap:wrap}
  .subhead::after{display:none}
  .api-section-title{flex-direction:column;align-items:stretch}
  .sticky-save{flex-direction:column;align-items:stretch}
  .sticky-save .btn{width:100%}
  .sticky-save span{margin:0 0 4px}
  .campaign-price-row{grid-template-columns:1fr}
  .modal-row{flex-direction:column-reverse}
  .modal-row .btn{width:100%}
}

/* ==========================================================================
   18. گزارش‌ها — نوار فیلتر دوره
   ========================================================================== */
.period-bar{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  padding:var(--pad);margin-bottom:16px;border-radius:var(--r3);
  background:var(--c1);border:1px solid var(--line);box-shadow:var(--sh1);
}
.period-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 420px;min-width:0}
.period-chip{
  padding:7px 14px;border-radius:99px;
  font-size:12px;font-weight:600;white-space:nowrap;
  color:var(--tx-2);background:var(--c2);border:1px solid var(--line);
  transition:color .15s,background .15s,border-color .15s;
}
.period-chip:hover{color:var(--tx);border-color:var(--line-2)}
.period-chip.active{
  color:var(--ac-ink);background:var(--ac);border-color:transparent;
  box-shadow:0 6px 16px -8px var(--ac);
}
.period-custom{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap;flex:none}
.period-custom .field{min-width:0}
.period-custom input[type=date]{min-width:150px;font-size:12.5px}
.period-custom .btn{flex:none}

.range-note{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:11px 15px;margin-bottom:18px;border-radius:var(--r2);
  font-size:12.5px;color:var(--tx-2);
  background:var(--ac-bg);border:1px solid var(--ac-br);
}
.range-note i{color:var(--ac)}
.range-note code{padding:2px 10px;border-radius:var(--r1);background:var(--c1);color:var(--tx-2)}

@media (max-width:720px){
  .period-bar{padding:15px}
  .period-custom{width:100%}
  .period-custom .field{flex:1 1 130px}
  .period-custom .btn{width:100%}
}