/* ════════════════════════════════════════════════════════════════════════
   app.css — کامپوننت‌های پنلِ مدیریتیِ MT5. هم‌سبکِ «کارنامهٔ زنده».
   ════════════════════════════════════════════════════════════════════════ */

.app{max-width:var(--maxw);margin:0 auto;padding:0 14px calc(78px + env(safe-area-inset-bottom));overflow-x:hidden}

/* ── نوارِ بالا ─────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:30;background:linear-gradient(180deg,var(--bg) 74%,rgba(14,17,23,0));
  padding:calc(11px + env(safe-area-inset-top)) 0 9px}
.brand{display:flex;align-items:center;gap:9px}
.brand .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:grid;place-items:center;font-weight:800;color:#0A0A0B;font-size:13px;flex:none;letter-spacing:-.03em}
.brand .tt{font-weight:700;font-size:15.5px;letter-spacing:-.01em}
.brand .sub{font-size:11px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brand>.txt{min-width:0}
.brand .back{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--blue);
  width:34px;height:34px;margin-inline-start:-6px}
.brand .back .ic{font-size:22px;line-height:1}
.brand .back .lbl{font-size:8.5px;font-weight:700}
.live{margin-inline-start:auto;display:flex;align-items:center;gap:7px;background:var(--bg-card);
  border:1px solid var(--border);border-radius:999px;padding:5px 11px;font-size:11.5px;color:var(--fg-dim);flex:none}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(43,182,115,.6);
  animation:pulse 2s infinite;flex:none}
.dot.warn{background:var(--gold);animation:pulseg 2s infinite}
.dot.down{background:var(--red);animation:pulser 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(43,182,115,.55)}70%{box-shadow:0 0 0 7px rgba(43,182,115,0)}100%{box-shadow:0 0 0 0 rgba(43,182,115,0)}}
@keyframes pulseg{0%{box-shadow:0 0 0 0 rgba(232,178,76,.55)}70%{box-shadow:0 0 0 7px rgba(232,178,76,0)}100%{box-shadow:0 0 0 0 rgba(232,178,76,0)}}
@keyframes pulser{0%{box-shadow:0 0 0 0 rgba(232,84,84,.55)}70%{box-shadow:0 0 0 7px rgba(232,84,84,0)}100%{box-shadow:0 0 0 0 rgba(232,84,84,0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── نوارِ سلامتِ سیستم (همیشه دیده می‌شود) ───────────────── */
.hstrip{margin-top:9px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:9px 12px;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--fg-dim);cursor:pointer}
.hstrip.bad{border-color:var(--red);background:linear-gradient(90deg,var(--red-soft),transparent 70%)}
.hstrip b{color:var(--fg);font-weight:600}
.hstrip .hb{margin-inline-start:auto;font-variant-numeric:tabular-nums}
.hlights{display:flex;gap:5px}
.hlight{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none}
.hlight.off{background:var(--red)}

/* ── تب‌بارِ پایین ──────────────────────────────────────── */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;max-width:var(--maxw);margin:0 auto;
  height:64px;background:#0c1424;border-top:1px solid var(--border);display:flex;align-items:stretch;
  padding-bottom:env(safe-area-inset-bottom);backdrop-filter:blur(8px)}
.tb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:none;border:none;color:var(--muted);font-size:10.5px;font-weight:600;position:relative}
.tb .ic{font-size:19px;line-height:1}
.tb.active{color:var(--accent)}
.tb.active::before{content:"";position:absolute;top:0;width:26px;height:2.5px;border-radius:0 0 3px 3px;background:var(--accent)}

/* ── سگمنت‌تب ───────────────────────────────────────────── */
.seg{display:flex;gap:4px;background:var(--bg-card);border:1px solid var(--border);border-radius:13px;padding:4px;margin-top:12px;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:1;min-width:max-content;border:0;background:none;color:var(--fg-dim);font-weight:600;font-size:13.5px;
  padding:9px 10px;border-radius:9px;transition:.15s;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.seg button .em{font-size:14px}
.seg button[aria-selected="true"]{background:var(--accent);color:#0A0A0B}
.seg.sub button[aria-selected="true"]{background:var(--bg-elev);color:var(--fg);box-shadow:inset 0 0 0 1px var(--border-strong)}

/* ── چیپس ──────────────────────────────────────────────── */
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.chip{border:1px solid var(--border-strong);background:var(--bg-elev);color:var(--fg-dim);
  font-weight:600;font-size:13px;padding:7px 13px;border-radius:9px;transition:.12s;white-space:nowrap}
.chip[aria-selected="true"]{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-2)}

/* ── کارت ──────────────────────────────────────────────── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-top:12px}
.card.tight{padding:13px 14px}
.sechd{display:flex;align-items:center;gap:8px;margin:20px 2px 10px}
.sechd .tt{font-weight:700;font-size:16px}
.sechd .cnt{margin-inline-start:auto;font-size:12px;color:var(--muted)}
.sechd .em{font-size:16px}
.subtle{font-size:12.3px;color:var(--fg-dim);line-height:1.8}

/* ── هیرو ──────────────────────────────────────────────── */
.hero{margin-top:13px;background:radial-gradient(120% 120% at 100% 0,rgba(255,122,26,.10),transparent 55%),var(--bg-elev);
  border:1px solid var(--border);border-radius:var(--radius);padding:18px 18px 16px;position:relative;overflow:hidden}
.hero .ey{font-size:12.5px;color:var(--fg-dim);display:flex;align-items:center;gap:7px}
.hero .big{font-size:46px;font-weight:800;letter-spacing:-.02em;line-height:1;margin-top:8px;white-space:nowrap}
.hero .subline{margin-top:8px;font-size:13px;color:var(--fg-dim);display:flex;gap:14px;flex-wrap:wrap}
.hero .subline b{font-weight:700}
.hero .toman{margin-top:7px;font-size:12.5px;font-weight:600}
.winbadge{display:inline-flex;align-items:center;gap:5px;background:var(--green-soft);color:var(--green);
  font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 10px}
.spark{margin-top:12px;height:44px;width:100%;display:block;cursor:pointer}

/* ── گریدِ آمار / KPIها (کلیک‌پذیر) ──────────────────────── */
.stats{margin-top:11px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 13px;
  transition:.13s;position:relative;text-align:start}
.stat.tap{cursor:pointer}
.stat.tap:hover{border-color:var(--border-strong);background:var(--bg-elev)}
.stat.tap:active{transform:scale(.985)}
.stat.tap::after{content:"›";position:absolute;top:10px;inset-inline-end:11px;color:var(--muted);font-size:16px;line-height:1}
.stat .v{font-size:20px;font-weight:700;line-height:1.15}
.stat .l{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.stat .tmn{font-size:10.5px;color:var(--muted);margin-top:2px}
.stat .sub{font-size:11px;color:var(--fg-dim);margin-top:2px}

/* ── یادداشت ────────────────────────────────────────────── */
.note{margin-top:11px;border-radius:var(--radius-sm);padding:12px 14px;font-size:12.8px;line-height:1.85;
  background:var(--bg-card);border:1px solid var(--border);border-right:3px solid var(--accent);color:var(--fg-dim)}
.note.green{border-right-color:var(--green)}
.note.gold{border-right-color:var(--gold)}
.note.blue{border-right-color:var(--blue)}
.note.red{border-right-color:var(--red)}
.note b{color:var(--fg);font-weight:600}

/* ── فیدِ سیگنال‌ها ─────────────────────────────────────── */
.feed{display:flex;flex-direction:column;gap:8px}
.sig{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 11px;
  display:flex;align-items:center;gap:10px;cursor:pointer;transition:.12s}
.sig:hover{border-color:var(--border-strong)}
.sig.run{border-color:var(--accent);background:linear-gradient(90deg,var(--accent-soft),transparent 62%)}
.sig.open{border-color:var(--accent);background:var(--accent-soft)}
.sig.blind{opacity:.92}
.badge{flex:none;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;font-weight:700;
  font-size:10.5px;text-align:center;line-height:1.15}
.b-tp3{background:var(--green-soft);color:var(--green)}
.b-tp{background:var(--gold-soft);color:var(--gold)}
.b-sl{background:var(--red-soft);color:var(--red)}
.b-exp{background:rgba(155,167,190,.12);color:var(--fg-dim)}
.b-run{background:var(--accent-tint);color:var(--accent-2)}
.b-ref{background:rgba(155,167,190,.10);color:var(--muted);border:1px dashed var(--border-strong)}
.b-blind{background:var(--blue-soft);color:var(--blue)}
.sig .mid{flex:1;min-width:0}
.sig .r1{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600}
.sig .r2{font-size:11.5px;color:var(--muted);margin-top:2px;display:flex;gap:9px;flex-wrap:wrap}
.dir-buy{color:var(--green)}.dir-sell{color:var(--red)}
.amtcol{flex:none;text-align:left;min-width:0}
.amtcol .real{font-weight:700;font-size:15px;direction:ltr;unicode-bidi:embed;font-feature-settings:"tnum"}
.amtcol .paper{font-size:11px;color:var(--muted);margin-top:2px;direction:ltr;unicode-bidi:embed}
.amtcol .paper s{text-decoration:none;opacity:.85}
.amtcol .pips{font-size:10.5px;color:var(--fg-dim);margin-top:1px;direction:rtl}
.amtcol .tmn{font-size:10px;color:var(--muted);margin-top:1px;direction:rtl}

/* ── درِیل‌داون (آکاردئون، تک‌باز) ───────────────────────── */
.detail{background:var(--bg-elev);border:1px solid var(--accent);border-radius:var(--radius-sm);
  margin:-2px 0 9px;padding:13px;animation:fade .18s ease}
.detail .dhd{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg);margin-bottom:11px;flex-wrap:wrap}
.detail .dhd .close{margin-inline-start:auto;cursor:pointer;color:var(--muted);font-size:16px;padding:0 6px}
.dlabel{font-size:11.5px;color:var(--muted);margin:12px 0 6px;font-weight:600}

/* نمودارِ نردبانِ قیمت (SVG دستی، بدونِ کتابخانه) */
.candlebox{direction:ltr;width:100%;background:var(--bg-deep);border:1px solid var(--border);border-radius:10px;
  padding:6px 4px;min-height:120px;color:var(--muted);font-size:12px;display:flex;align-items:center;justify-content:center}

/* پله‌ها/دیل‌ها */
.rungrow{display:flex;align-items:center;gap:9px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:9px;padding:9px 11px;font-size:12.5px;cursor:pointer;transition:.12s}
.rungrow:hover{border-color:var(--border-strong)}
.rungrow+.rungrow{margin-top:6px}
.rungrow .rn{flex:none;width:26px;height:26px;border-radius:7px;background:var(--bg-elev);border:1px solid var(--border-strong);
  display:grid;place-items:center;font-weight:700;font-size:12px;color:var(--fg-dim)}
.rungrow .info{flex:1;min-width:0}
.rungrow .info .l1{font-weight:600;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.rungrow .info .l2{font-size:11px;color:var(--muted);margin-top:2px}
.rungrow .amt{flex:none;font-weight:700;direction:ltr;unicode-bidi:embed;font-feature-settings:"tnum"}
.rpill{font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px}
.rp-tp{background:var(--green-soft);color:var(--green)}
.rp-be{background:var(--blue-soft);color:var(--blue)}
.rp-sl{background:var(--red-soft);color:var(--red)}
.rp-lock{background:var(--gold-soft);color:var(--gold)}
.rp-run{background:var(--accent-tint);color:var(--accent-2)}
/* لایهٔ ۳ — جزئیاتِ دیل (تودرتو) */
.deal{background:var(--bg-deep);border:1px solid var(--border);border-radius:9px;margin-top:6px;padding:11px;animation:fade .16s}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:12px}
.kv .k{color:var(--muted)}
.kv .v{text-align:start;direction:ltr;unicode-bidi:plaintext;font-feature-settings:"tnum"}
.trail{display:flex;align-items:center;gap:6px;margin-top:9px;flex-wrap:wrap}
.tstage{font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:7px;background:var(--bg-card);border:1px solid var(--border-strong);color:var(--fg-dim)}
.tstage.on{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.tstage.want{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-2)}
.tarrow{color:var(--muted);font-size:12px}

/* آبشارِ کاغذی-vs-واقعی (waterfall) */
.wf{margin-top:8px;display:flex;flex-direction:column;gap:5px}
.wfrow{display:flex;align-items:center;gap:9px;font-size:12.3px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:9px;padding:8px 11px}
.wfrow .lead{flex:1;min-width:0;color:var(--fg-dim)}
.wfrow .lead small{color:var(--muted);font-size:10.5px;display:block;margin-top:1px}
.wfrow .amt{flex:none;font-weight:700;direction:ltr;unicode-bidi:embed;font-feature-settings:"tnum"}
.wfrow.head{background:var(--bg-elev);border-color:var(--border-strong)}
.wfrow.tot{background:var(--accent-tint);border-color:var(--accent)}
.wfrow.tot .lead{color:var(--fg);font-weight:600}
.wfbar{height:6px;border-radius:99px;background:var(--bg-deep);overflow:hidden;margin-top:3px;display:flex}
.wfbar i{height:100%;display:block}

/* ── لود-مور ────────────────────────────────────────────── */
.more{margin:12px auto 0;display:block;background:var(--bg-card);border:1px solid var(--border-strong);color:var(--fg-dim);
  font-weight:600;font-size:13.5px;border-radius:10px;padding:11px 22px}

/* ── حالتِ خالی / خطا / اسکلت ───────────────────────────── */
.emptybox{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:34px 20px;
  text-align:center;color:var(--fg-dim);margin-top:13px;font-size:13px;line-height:1.9}
.emptybox .em{font-size:30px;display:block;margin-bottom:8px;opacity:.8}
.errbox{margin-top:13px}
.errbox .btn{margin-top:10px}
.btn{border:0;border-radius:var(--radius-sm);padding:11px 18px;font-weight:700;font-size:14px;
  background:var(--accent);color:#0A0A0B;box-shadow:0 8px 22px -12px var(--accent-glow)}
.btn.ghost{background:var(--bg-deep);color:var(--fg-dim);border:1px solid var(--border-strong);box-shadow:none}
.btn:active{transform:scale(.98)}
.skel{border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-elev) 50%,var(--bg-card) 75%);
  background-size:200% 100%;animation:shimmer 1.3s linear infinite}
.skel.line{height:14px;margin:8px 0}
.skel.hero{height:150px;margin-top:13px}
.skel.tile{height:74px}
.skel.row{height:64px;margin-top:8px}

/* ── منحنیِ سرمایه ──────────────────────────────────────── */
.eqbox{direction:ltr;width:100%;background:var(--bg-deep);border:1px solid var(--border);border-radius:12px;padding:8px 6px 4px}
.eqlegend{display:flex;gap:16px;margin-top:10px;font-size:11.5px;color:var(--fg-dim);flex-wrap:wrap;direction:rtl}
.eqlegend i{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-inline-end:5px}

/* ── میله‌های روزانه ────────────────────────────────────── */
.daybars{direction:ltr;display:flex;align-items:flex-end;gap:6px;height:150px;padding:8px 4px 0;overflow-x:auto;scrollbar-width:none}
.daybars::-webkit-scrollbar{display:none}
.daycol{flex:1;min-width:26px;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end;cursor:pointer}
.daycol .bar{width:100%;max-width:30px;border-radius:5px 5px 0 0;min-height:3px;transition:.15s}
.daycol .bar.up{background:linear-gradient(180deg,var(--green),var(--green-soft))}
.daycol .bar.dn{background:linear-gradient(0deg,var(--red),var(--red-soft))}
.daycol:hover .bar{filter:brightness(1.15)}
.daycol .dl{font-size:9px;color:var(--muted);direction:ltr;white-space:nowrap}

/* ── پوزیشن‌ها ──────────────────────────────────────────── */
.posrow{display:flex;align-items:center;gap:10px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:11px 12px;margin-top:8px;cursor:pointer;transition:.12s}
.posrow:hover{border-color:var(--border-strong)}
.posrow .st{flex:none;font-size:10px;font-weight:700;padding:4px 9px;border-radius:7px}
.posrow .flo{flex:none;font-weight:700;direction:ltr;unicode-bidi:embed;font-feature-settings:"tnum"}

/* ── تایم‌لاینِ رویدادها ────────────────────────────────── */
.tl{position:relative;margin-top:6px;padding-inline-start:22px}
.tl::before{content:"";position:absolute;inset-inline-start:6px;top:6px;bottom:6px;width:2px;background:var(--border)}
.tlitem{position:relative;padding:11px 0}
.tlitem .tdot{position:absolute;inset-inline-start:-22px;top:15px;width:12px;height:12px;border-radius:50%;
  background:var(--bg);border:2px solid var(--muted)}
.tlitem.manual .tdot{border-color:var(--blue)}
.tlitem.perm .tdot{border-color:var(--gold)}
.tlitem.pinned .tdot{border-color:var(--red)}
.tlcard{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:11px 12px}
.tlcard .th{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px}
.tlcard .tm{font-size:11px;color:var(--muted);margin-top:3px}
.tlcard .tb{font-size:12.3px;color:var(--fg-dim);margin-top:6px;line-height:1.75}
.evtag{font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;margin-inline-start:auto}
.evtag.safe{background:var(--green-soft);color:var(--green)}
.evtag.info{background:var(--blue-soft);color:var(--blue)}
.evtag.warn{background:var(--gold-soft);color:var(--gold)}

/* ── سلامتِ سیستم ──────────────────────────────────────── */
.permgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
.perm{display:flex;align-items:center;gap:9px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:11px}
.perm.off{border-color:var(--red);background:var(--red-soft)}
.perm .lt{width:11px;height:11px;border-radius:50%;background:var(--green);flex:none;box-shadow:0 0 8px var(--green)}
.perm.off .lt{background:var(--red);box-shadow:0 0 8px var(--red)}
.perm .pl{font-size:12.5px;font-weight:600}
.perm .ps{font-size:10.5px;color:var(--muted)}
.halt{margin-top:12px;background:var(--red-soft);border:1px solid var(--red);border-radius:var(--radius);padding:16px;
  text-align:center;color:var(--red);font-weight:700;font-size:15px;animation:pulser 2s infinite}
.badge2{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.badge2.demo{background:var(--blue-soft);color:var(--blue)}
.badge2.live{background:var(--red-soft);color:var(--red)}
.badge2.up{background:var(--green-soft);color:var(--green)}

/* ── هابِ «بیشتر» ──────────────────────────────────────── */
.hubcard{display:flex;align-items:center;gap:13px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:15px 16px;margin-top:10px;transition:.12s}
.hubcard:hover{border-color:var(--border-strong);background:var(--bg-elev)}
.hubcard .hi{flex:none;width:44px;height:44px;border-radius:12px;background:var(--bg-elev);border:1px solid var(--border-strong);
  display:grid;place-items:center;font-size:22px}
.hubcard .ht{font-weight:700;font-size:14.5px}
.hubcard .hs{font-size:11.5px;color:var(--fg-dim);margin-top:2px}
.hubcard .ha{margin-inline-start:auto;color:var(--muted);font-size:20px}

.foot{margin-top:22px;text-align:center;font-size:11px;color:var(--muted);line-height:1.9}
.ev{flex:none;font-size:11px;color:var(--accent);border:1px solid var(--border-strong);border-radius:8px;
  padding:6px 9px;background:var(--bg-elev);white-space:nowrap;margin-top:9px;display:inline-block}

/* ── دسکتاپ: دو ستونه ──────────────────────────────────── */
@media(min-width:760px){.app{max-width:720px}}
@media(min-width:1060px){
  .app{max-width:1120px}
  body{font-size:15.5px}
  .grid2{display:grid;grid-template-columns:minmax(360px,5fr) 7fr;gap:22px;align-items:start}
  .col-b{position:sticky;top:8px}
  .hero .big{font-size:56px}
  .tabbar{max-width:1120px}
}