/* ============================================================
   account.css — ویجت‌های دسته‌ی حساب
   (exchange / payment / profile / notifications / listings / backtest)
   مکمل app.css + dashboard.css
   ============================================================ */

/* ---------- صرافی: کارت اتصال ---------- */
.ex-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-4);align-items:start}
.ex-logo{
  width:44px;height:44px;flex-shrink:0;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;direction:ltr;letter-spacing:-.03em;
  background:var(--bg-card-2);border:1px solid var(--line-2);color:var(--ink-1);
}
.ex-logo.on{background:var(--gold-12);border-color:var(--gold-25);color:var(--gold)}
.ex-row{display:flex;align-items:center;gap:12px}
.ex-name{font-size:var(--fs-md);font-weight:800;direction:ltr}
.ex-meta{font-size:var(--fs-2xs);color:var(--ink-4)}
.ex-status{
  display:inline-flex;align-items:center;gap:6px;
  height:26px;padding:0 12px;border-radius:var(--r-full);
  font-size:var(--fs-2xs);font-weight:700;
}
.ex-status.ok{background:var(--up-12);color:var(--up)}
.ex-status.off{background:var(--bg-card-2);color:var(--ink-3);border:1px solid var(--line-1)}
.ex-status .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.ex-status.ok .dot{animation:pulse 2s infinite}
/* راهنمای مرحله‌ای */
.guide{counter-reset:gstep;display:flex;flex-direction:column;gap:10px}
.guide-step{
  display:flex;gap:11px;align-items:flex-start;
  font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7;
  counter-increment:gstep;
}
.guide-step::before{
  content:counter(gstep);
  width:24px;height:24px;flex-shrink:0;border-radius:50%;
  background:var(--gold-12);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-2xs);font-weight:800;direction:ltr;margin-top:1px;
}
.guide-step b{color:var(--ink-1)}

/* ---------- پلن‌های پرداخت ---------- */
.pay-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);align-items:stretch}
.pplan{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 45%),var(--bg-card);
  border:1px solid var(--line-1);border-radius:var(--r-xl);
  padding:var(--sp-6);
  transition:transform var(--t-med),border-color var(--t-med),box-shadow var(--t-med);
}
.pplan:hover{transform:translateY(-3px);border-color:var(--line-2)}
.pplan.hot{
  border-color:var(--gold-45);
  background:linear-gradient(180deg,var(--gold-08),transparent 55%),var(--bg-card);
  box-shadow:0 0 0 1px var(--gold-25),0 24px 64px -24px var(--gold-glow);
}
.pplan-flag{
  position:absolute;top:-12px;inset-inline-start:50%;transform:translateX(50%);
  height:24px;padding:0 12px;display:inline-flex;align-items:center;gap:5px;
  background:var(--gold-grad);color:var(--gold-ink);border-radius:var(--r-full);
  font-size:var(--fs-2xs);font-weight:800;white-space:nowrap;box-shadow:var(--sh-gold);
}
.pplan-name{font-size:var(--fs-lg);font-weight:800}
.pplan-desc{font-size:var(--fs-xs);color:var(--ink-3);margin-bottom:var(--sp-4)}
.pplan-price{display:flex;align-items:baseline;gap:5px;margin-bottom:var(--sp-5)}
.pplan-price b{font-size:var(--fs-4xl);font-weight:900;letter-spacing:-.03em;line-height:1}
.pplan-price span{font-size:var(--fs-xs);color:var(--ink-3)}
.pplan-feats{display:flex;flex-direction:column;gap:9px;margin-bottom:var(--sp-6);flex:1}
.pplan-feat{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-2)}
.pplan-feat i{font-size:15px;color:var(--up);flex-shrink:0}
.pplan-feat.na{color:var(--ink-4)}
.pplan-feat.na i{color:var(--ink-4)}

/* پرداخت USDT در مودال */
.pay-addr{
  display:flex;align-items:center;gap:10px;
  padding:12px var(--sp-4);
  background:var(--bg-inset);border:1px solid var(--line-2);border-radius:var(--r-md);
  direction:ltr;
}
.pay-addr code{flex:1;font-size:var(--fs-xs);color:var(--ink-1);word-break:break-all;font-family:var(--font)}
.pay-qr{
  width:150px;height:150px;margin:0 auto var(--sp-4);border-radius:var(--r-md);
  background:#fff;padding:10px;display:flex;align-items:center;justify-content:center;
}
.pay-qr svg{width:100%;height:100%}
.pay-net{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line-1);font-size:var(--fs-sm)}
.pay-net:last-child{border-bottom:0}
.pay-net .l{color:var(--ink-3)}
.pay-net .v{font-weight:700;direction:ltr}

/* ---------- پروفایل ---------- */
.prof-hero{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap}
.prof-av{
  width:76px;height:76px;flex-shrink:0;border-radius:20px;
  background:var(--gold-grad);color:var(--gold-ink);
  display:flex;align-items:center;justify-content:center;
  font-size:32px;font-weight:900;box-shadow:var(--sh-gold);
}
.prof-name{font-size:var(--fs-2xl);font-weight:800}
.prof-mail{font-size:var(--fs-sm);color:var(--ink-3);direction:ltr}
.info-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:13px 0;border-bottom:1px solid var(--line-1)}
.info-row:last-child{border-bottom:0}
.info-row .l{font-size:var(--fs-sm);color:var(--ink-3);display:flex;align-items:center;gap:9px}
.info-row .l i{font-size:18px;color:var(--ink-4)}
.info-row .v{font-size:var(--fs-sm);font-weight:600;color:var(--ink-1)}

/* ---------- اعلان‌ها ---------- */
.nlist{display:flex;flex-direction:column}
.nitem{
  display:flex;align-items:flex-start;gap:13px;
  padding:var(--sp-4) var(--sp-2);
  border-bottom:1px solid var(--line-1);
  transition:background var(--t-fast);
  position:relative;
}
.nitem:last-child{border-bottom:0}
.nitem:hover{background:rgba(255,255,255,.015)}
.nitem.unread{background:var(--gold-04)}
.nitem.unread::before{content:'';position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);width:3px;height:26px;border-radius:var(--r-full);background:var(--gold)}
.nicon{
  width:40px;height:40px;flex-shrink:0;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:19px;
}
.nicon.tp{background:var(--up-12);color:var(--up)}
.nicon.sl{background:var(--down-12);color:var(--down)}
.nicon.sig{background:var(--gold-12);color:var(--gold)}
.nicon.sys{background:var(--info-12);color:var(--info)}
.nbody{flex:1;min-width:0}
.ntitle{font-size:var(--fs-sm);font-weight:700;color:var(--ink-1)}
.ndesc{font-size:var(--fs-xs);color:var(--ink-3);margin-top:1px}
.ntime{font-size:var(--fs-2xs);color:var(--ink-4);flex-shrink:0;white-space:nowrap}

/* ---------- لیستینگ‌ها ---------- */
.listing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-4)}
.lcard{
  display:flex;flex-direction:column;gap:var(--sp-3);
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 45%),var(--bg-card);
  border:1px solid var(--line-1);border-radius:var(--r-lg);
  padding:var(--sp-5);
  transition:border-color var(--t-med),transform var(--t-med);
}
.lcard:hover{border-color:var(--gold-25);transform:translateY(-2px)}
.lcard-h{display:flex;align-items:center;gap:12px}
.lcoin{
  width:46px;height:46px;flex-shrink:0;border-radius:14px;
  background:var(--bg-card-2);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:900;color:var(--gold);direction:ltr;
}
.lname{font-size:var(--fs-md);font-weight:800;direction:ltr}
.lex{font-size:var(--fs-2xs);color:var(--ink-4)}
.lcountdown{
  display:flex;gap:6px;text-align:center;
}
.lcd{background:var(--bg-inset);border:1px solid var(--line-1);border-radius:var(--r-sm);padding:6px 0;flex:1}
.lcd b{display:block;font-size:var(--fs-lg);font-weight:800;line-height:1;direction:ltr}
.lcd span{font-size:9px;color:var(--ink-4)}

/* ---------- بک‌تست ---------- */
.bt-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-1);border:1px solid var(--line-1);border-radius:var(--r-lg);overflow:hidden}
.bt-metric{background:var(--bg-card);padding:var(--sp-5);text-align:center}
.bt-metric .l{font-size:var(--fs-2xs);color:var(--ink-4);font-weight:600;margin-bottom:6px}
.bt-metric .v{font-size:var(--fs-2xl);font-weight:900;letter-spacing:-.02em;line-height:1.1}
.bt-metric .m{font-size:10px;color:var(--ink-4);margin-top:3px}

@media(max-width:900px){
  .ex-grid{grid-template-columns:1fr}
  .pay-plans{grid-template-columns:1fr}
  .pplan.hot{order:-1}
}
@media(max-width:640px){
  .bt-metrics{grid-template-columns:repeat(2,1fr)}
}