/* «سبد کانال سیگنال», «کانال سیگنال تکی»'s top and the MetaTrader steps (copypacks.js; ctnav release 1: public as a
   preview; ?mtdemo=1 walks the steps with a sample connection): the panes #cpStepsPane (the steps, inline on «اتصال کانال
   به متاتریدر ۴/۵» since 20 October 2026: no popup; since mt-steps-v2, 31 October 2026, the steps of the way chosen —
   no balance step), #cpPane and #cpSinglePane, and one sheet (a centred
   dialog on desktop, a bottom sheet on phones: a pack's details with its members' own list cards and «تعویض», the
   replace list). Built on copytrade.css's tokens (--g-*), light and dark, right to left. html.cp-on is set by
   copypacks.js on every copy-trade page (design §5.4). */
html.cp-on, html.cp-on[data-theme="light"] {
  --cp-red:var(--g-down); --cp-red-soft:var(--g-down-soft); --cp-red-line:#F3B7B7; --cp-red-ink:#B91C1C;
  --cp-amber-ink:var(--g-amber-ink); --cp-amber-soft:var(--g-amber-soft); --cp-amber-line:var(--g-amber-line);
  --cp-up-ink:#15803D; --cp-on-strong:#FFFFFF;
}
html.cp-on[data-theme="dark"] {
  --cp-red:var(--g-down); --cp-red-soft:var(--g-down-soft); --cp-red-line:rgba(248,113,113,.42); --cp-red-ink:var(--g-down);
  --cp-amber-ink:var(--g-amber-ink); --cp-amber-soft:var(--g-amber-soft); --cp-amber-line:var(--g-amber-line);
  --cp-up-ink:var(--g-up); --cp-on-strong:#0B1314;
}

/* (Release 1: the rules that hid the source list, every «کپی» and the floating basket under html.cp-on are gone — the
   list's hosts and modes are copytrade.js's, design §8.3.) */

html.cp-on body.cp-locked { overflow:hidden; }
/* The page's toast («اطلاعات نمونه از پیش پر شده است») shows over the open sheet. */
html.cp-on body.cp-locked .ct-toast { z-index:98; }
.cp-sr {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* ================================================================ the tab */
.cp-pane { gap:16px; }
.cp-pane :where(h2, h3, p, ol, ul, dl, dd) { margin:0; }
.cp-pane bdi { unicode-bidi:isolate; }
.cp-h2 { font-size:18px; font-weight:800; line-height:1.6; color:var(--g-ink); border-radius:6px; }
.cp-h2:focus { outline:none; }
.cp-h2:focus-visible { outline:2px solid var(--g-teal-line); outline-offset:3px; }
.cp-demo-badge {
  flex:none; display:inline-block; padding:0 9px; border-radius:99px; font-size:11.5px; font-weight:800; line-height:1.9;
  background:var(--g-flat-soft); color:var(--g-ink-2); border:1px solid var(--g-line);
}
/* Crowd Clock's label keeps the Persian order around its Latin name. */
.cp-cc { unicode-bidi:isolate; direction:rtl; }

/* ---- A: «کپی خودکار در ۳ قدم» ---- */
.cp-start {
  display:flex; flex-direction:column; gap:16px; padding:18px 16px; border-radius:18px;
  background:var(--g-card); border:1px solid var(--g-line); box-shadow:var(--g-shadow);
}
.cp-start-head { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.cp-steps { list-style:none; padding:0; display:flex; flex-direction:column; gap:10px; }
.cp-steps-i { display:flex; align-items:center; gap:12px; font-size:15px; font-weight:800; line-height:1.7; color:var(--g-ink); }
.cp-steps-n {
  flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  background:var(--g-teal-soft); color:var(--g-teal-ink); border:1px solid var(--g-teal-line); font-size:15px; font-weight:800;
}
.cp-btn.cp-start-go { width:100%; min-height:48px; font-size:15px; }

/* ---- B: the account line ---- */
.cp-acct {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:10px 12px 10px 14px;
  border-radius:14px; background:var(--g-card); border:1px solid var(--g-line);
}
.cp-acct-text { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0; font-size:14px; font-weight:800; line-height:1.8; color:var(--g-ink); }
.cp-btn.cp-acct-btn { flex:none; min-height:44px; padding:0 14px; font-size:13px; border-radius:10px; margin-inline-start:auto; }

/* ---- B: the header: the title (and a word when Crowd Clock is out) ---- */
.cp-phead { display:flex; flex-wrap:wrap; align-items:center; gap:2px 12px; }
.cp-phead > .cp-h2 { flex:1 1 auto; }
.cp-clock-note { flex:1 1 100%; font-size:12px; font-weight:700; line-height:1.85; color:var(--g-ink-3); }
.cp-tip p + p { margin-top:6px; }
.cp-wait { font-size:13px; font-weight:700; color:var(--g-ink-2); line-height:1.8; }

/* ---- B: the cards (nothing under them): name, faces, the growth chart, four figures, two buttons ---- */
.cp-cards { display:flex; flex-direction:column; gap:12px; min-width:0; }
.cp-card {
  position:relative; isolation:isolate;
  display:flex; flex-direction:column; gap:10px; min-width:0; padding:14px 14px 12px; border-radius:18px;
  background:var(--g-card); border:1px solid var(--g-line); box-shadow:var(--g-shadow); cursor:pointer;
  transition:box-shadow .15s, border-color .15s;
}
.cp-card:hover { border-color:var(--g-teal-line); box-shadow:var(--g-lift); }
.cp-card.is-rec { border:2px solid var(--g-teal); background:var(--g-teal-soft); padding:13px 13px 11px; }
.cp-card-top { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0; }
.cp-card-name { font-size:17px; font-weight:800; line-height:1.5; color:var(--g-ink); min-width:0; overflow-wrap:anywhere; }
/* The name is the card's press: its ::after covers the card (a source's page, or a pack's details); the badges and
   the buttons sit above it. */
.cp-card-open {
  display:inline; margin:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:start; text-decoration:none;
  cursor:pointer; unicode-bidi:plaintext; -webkit-tap-highlight-color:transparent;
}
.cp-card-open::after { content:''; position:absolute; inset:0; z-index:1; border-radius:18px; }
.cp-card-open:focus { outline:none; }
.cp-card-open:focus-visible::after { outline:2px solid var(--g-teal); outline-offset:2px; }
.cp-card-acts, .cp-rec, .cp-chosen, .cp-card .cp-chip-custom, .cp-card .cp-chip-own { position:relative; z-index:2; }
/* A pack's faces without names and «میانگین ریسک‌ریوارد» (the owner, 20 October 2026) over the press too, for their titles;
   a press on them is the card's (copypacks.js onPaneClick). */
.cp-card [data-cp-pass] { position:relative; z-index:2; }
/* A card that opens a source's page: the tile holds that link itself, over the press (its title, and the link's middle
   press, menu and address on hover, as the rest of the card; the review of 20 October 2026). */
.cp-card .cp-stat-rr { position:relative; }
.cp-stat-to { position:absolute; inset:0; z-index:2; border-radius:11px; -webkit-tap-highlight-color:transparent; }
.cp-stat-to:focus { outline:none; }
.cp-rec { padding:1px 9px; border-radius:99px; font-size:11.5px; font-weight:800; line-height:1.8; background:var(--g-teal-ink); color:var(--cp-on-strong); }
.cp-chosen { padding:1px 9px; border-radius:99px; font-size:11.5px; font-weight:800; line-height:1.8; background:var(--g-card); color:var(--g-teal-ink); border:1px solid var(--g-teal-line); }
.cp-style { font-size:12.5px; font-weight:600; line-height:1.85; color:var(--g-ink-2); }
/* The members: faces centred side by side, their names under them (each short, an ellipsis past ~11 em). */
.cp-who { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; text-align:center; }
/* Side by side, a small gap between (the owner: «وسط‌چین یکی کنار هم»), each face whole. */
.cp-faces { display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; }
.cp-faces .ct-avatar { width:40px; height:40px; font-size:15px; }
.cp-more-n { font-size:12px; font-weight:800; color:var(--g-ink-3); }
/* Each name its own small chip: a wrapped line never starts or ends on a lone «·» (the review of 19 October 2026). */
.cp-who-names { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 5px; max-width:100%; font-size:12px; font-weight:700; line-height:1.75; color:var(--g-ink-2); }
.cp-who-name {
  max-width:11em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; unicode-bidi:plaintext;
  padding:0 8px; border-radius:99px; background:var(--g-flat-soft); border:1px solid var(--g-line-soft);
}
.cp-who-name .cp-cc { unicode-bidi:isolate; }
/* The growth chart: the source cards' own block (copytrade.html's .ct-perf / .ct-spark), and four figures. */
.cp-perf { padding-bottom:0; }
.cp-perf:not(:has(svg)) { padding-bottom:12px; }
.cp-card.is-rec .cp-perf:not(.up):not(.down) { background:var(--g-card); }
.cp-stats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; margin:0; }
.cp-stat { min-width:0; display:flex; flex-direction:column; align-items:center; gap:1px; padding:7px 4px 6px; border-radius:12px; border:1px solid var(--g-line-soft); text-align:center; }
.cp-card.is-rec .cp-stat { background:var(--g-card); border-color:var(--g-teal-line); }
.cp-stat dt { font-size:11px; font-weight:700; color:var(--g-ink-3); line-height:1.6; white-space:nowrap; }
.cp-stat dd { margin:0; font-size:14px; font-weight:800; line-height:1.6; color:var(--g-ink); white-space:nowrap; }
.cp-card, .cp-dfigs { container-type:inline-size; }
@container (max-width:349.98px) {
  .cp-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
/* A single source's card: three figures in one row at every width (rrcards D2: no «میانگین ریسک‌ریوارد» there). */
.cp-stats.cp-stats-3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.cp-figs-in { display:flex; flex-direction:column; gap:8px; min-width:0; }
.cp-card-acts { display:grid; grid-template-columns:2fr 1fr; gap:8px; margin-top:auto; padding-top:2px; }
.cp-card-acts .cp-btn { min-height:44px; padding:0 10px; }

/* ---- skeletons, states, the honest line ---- */
.cp-skel-card { display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:18px; border:1px solid var(--g-line-soft); background:var(--g-card); }
.cp-skel-card span { display:block; height:12px; border-radius:6px; background:var(--g-skeleton); }
.cp-skel-card span:first-child { width:30%; height:16px; }
.cp-skel-card span:nth-child(2) { width:75%; }
.cp-skel-card span:nth-child(3) { width:100%; height:48px; }
.cp-skel-card span:nth-child(4) { width:100%; height:44px; }
.cp-state { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:12px; background:var(--g-flat-soft); }
.cp-state p { font-size:13px; font-weight:700; line-height:1.9; color:var(--g-ink-2); }
.cp-empty-wrap { display:flex; flex-direction:column; gap:6px; }
.cp-empty-row { min-width:0; }
.cp-empty { font-size:13.5px; font-weight:700; color:var(--g-ink-2); line-height:1.9; padding:10px 12px; border-radius:12px; border:1px dashed var(--g-line); background:var(--g-card); }

/* ================================================================ «کانال سیگنال من»: the moved list */
.cp-sources { display:flex; flex-direction:column; gap:8px; min-width:0; margin-top:8px; }
/* Released by its leaf (mychannel.js syncHost: the other type's leaf of a connected channel): gone, heading and all — the
   display above would otherwise outweigh [hidden] (the review of round 6: «۲. منابع را اضافه کن» left with no list). */
.cp-sources[hidden] { display:none; }
.cp-sources > h2 { margin:0; font-size:17px; font-weight:800; line-height:1.6; color:var(--g-ink); }
.cp-sources > p { margin:0; font-size:13px; font-weight:600; line-height:1.9; color:var(--g-ink-2); }
.cp-sources > #ctListPane { margin-top:8px; }
/* A card that cannot go into the channel says why, in place of its hidden «کپی» (Crowd Clock: copytrade.js; no market
   entry: mychannel.js). */
html.cp-on #cpSources .cp-src-note { margin:10px 0 0; font-size:12.5px; font-weight:600; line-height:1.85; color:var(--g-ink-2); }

/* ================================================================ the sheet */
.cp-scrim {
  position:fixed; inset:0; z-index:97; display:grid; place-items:center; padding:24px 16px;
  background:var(--g-scrim); overscroll-behavior:contain;
}
.cp-scrim[hidden] { display:none; }
.cp-dialog {
  position:relative; width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px);
  display:flex; flex-direction:column; min-height:0; overflow:hidden;
  background:var(--g-card); color:var(--g-ink); border:1px solid var(--g-line); border-radius:18px; box-shadow:var(--g-pop);
  font-family:'Vazirmatn','IRANSans',Tahoma,sans-serif; direction:rtl; text-align:start;
}
.cp-dialog:focus { outline:none; }
.cp-dialog :where(h2, h3, p, ol, ul, dl, dd) { margin:0; }
.cp-dialog :where(button, input, a) { font-family:inherit; }
.cp-dialog bdi { unicode-bidi:isolate; }
.cp-dialog [hidden] { display:none !important; }

.cp-head { flex:none; padding:10px 14px 8px; border-bottom:1px solid var(--g-line-soft); background:var(--g-card); }
.cp-grab { display:none; width:40px; height:4px; margin:0 auto 8px; border-radius:99px; background:var(--g-line); }
.cp-head-row { display:flex; align-items:center; gap:8px; min-width:0; }
.cp-head-fill { flex:1; }
.cp-iconbtn {
  flex:none; width:44px; height:44px; border:0; border-radius:50%; display:grid; place-items:center;
  background:none; color:var(--g-ink-2); cursor:pointer;
}
.cp-iconbtn:hover { background:var(--g-flat-soft); color:var(--g-ink); }
.cp-iconbtn:focus-visible { outline:2px solid var(--g-teal); outline-offset:1px; }
.cp-iconbtn-space { flex:none; width:44px; height:44px; }

/* The connect stepper: «اتصال · حساب». */
.cp-stepper { flex:1; min-width:0; display:flex; justify-content:center; align-items:flex-start; gap:4px; padding:0; list-style:none; }
.cp-stepper-i { flex:0 1 92px; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; position:relative; }
.cp-stepper-i + .cp-stepper-i::before {
  content:''; position:absolute; top:10px; inset-inline-end:calc(50% + 14px); width:calc(100% - 28px + 4px); height:2px; border-radius:2px; background:var(--g-line);
}
.cp-stepper-i.done + .cp-stepper-i::before { background:var(--g-teal-line); }
.cp-dot {
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--g-line); background:var(--g-card); color:var(--cp-on-strong);
}
.cp-stepper-i.now .cp-dot { border-color:var(--g-teal); box-shadow:inset 0 0 0 4px var(--g-card); background:var(--g-teal); }
.cp-stepper-i.done .cp-dot { border-color:var(--g-teal); background:var(--g-teal); }
.cp-dot .ico { width:12px; height:12px; stroke-width:3; }
.cp-stepper-label { font-size:11.5px; font-weight:700; color:var(--g-ink-3); line-height:1.5; white-space:nowrap; }
.cp-stepper-i.now .cp-stepper-label { color:var(--g-teal-ink); font-weight:800; }
.cp-stepper-i.done .cp-stepper-label { color:var(--g-ink-2); }

/* «نسخهٔ نمایشی — …» on the connect steps, under the header. */
.cp-banner {
  flex:none; display:flex; align-items:center; gap:8px; padding:7px 16px; border-bottom:1px solid var(--cp-amber-line);
  background:var(--cp-amber-soft); color:var(--g-ink); font-size:12.5px; font-weight:800; line-height:1.7;
}
.cp-banner .ico { flex:none; color:var(--cp-amber-ink); }

.cp-body {
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:16px 20px 18px; display:flex; flex-direction:column; gap:14px;
}
.cp-foot {
  flex:none; padding:12px 20px; border-top:1px solid var(--g-line-soft); background:var(--g-card);
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
}
.cp-foot:empty { display:none; }

/* ---- text ---- */
.cp-title { font-size:18px; font-weight:800; line-height:1.6; color:var(--g-ink); border-radius:6px; }
.cp-title:focus { outline:none; }
.cp-title:focus-visible { outline:2px solid var(--g-teal-line); outline-offset:3px; }
.cp-title-row { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.cp-lead { font-size:13.5px; font-weight:600; line-height:2; color:var(--g-ink-2); }
.cp-hint, .cp-note-s { font-size:12px; font-weight:600; line-height:1.9; color:var(--g-ink-3); }
/* A Latin name keeps its own order («Xauus*******») and still sits at the start of the RTL line, by its avatar. */
.cp-name { font-weight:800; color:var(--g-ink); unicode-bidi:plaintext; text-align:right; overflow-wrap:anywhere; }
.cp-name.cp-cc { unicode-bidi:isolate; direction:rtl; }
.cp-i {
  flex:none; width:36px; height:36px; margin:-6px 0; border:0; border-radius:50%; display:grid; place-items:center;
  background:none; color:var(--g-ink-3); cursor:pointer;
}
.cp-i:hover, .cp-i[aria-expanded="true"] { color:var(--g-teal-ink); background:var(--g-teal-soft); }
/* At the end of its sentence: it wraps with the text; its 36 px reach the lines around it, not the line's height. */
.cp-i.cp-i-in { display:inline-grid; vertical-align:middle; margin:-10px 0 -8px; margin-inline-start:2px; }
.cp-i:focus-visible { outline:2px solid var(--g-teal); outline-offset:-2px; }
.cp-tip {
  padding:9px 12px; border-radius:10px; font-size:12px; font-weight:600; line-height:1.9; color:var(--g-ink-2);
  background:var(--g-flat-soft); border:1px solid var(--g-line-soft);
}
.cp-tip[hidden] { display:none; }

/* ---- connect: the locked fields ---- */
.cp-fields { display:flex; flex-direction:column; gap:10px; }
.cp-field { display:flex; flex-direction:column; gap:5px; }
.cp-label { font-size:12.5px; font-weight:700; color:var(--g-ink-2); }
.cp-input {
  width:100%; height:44px; padding:0 12px; border:1px dashed var(--g-line); border-radius:11px;
  background:var(--g-flat-soft); color:var(--g-ink-2); font-size:15px; font-weight:700; text-align:left; cursor:not-allowed;
}
.cp-input:focus { outline:none; border-color:var(--g-teal); box-shadow:0 0 0 3px var(--g-teal-soft); }

/* ---- account: the checklist, the account and the sample balances ---- */
.cp-checks { list-style:none; padding:0; display:flex; flex-direction:column; gap:8px; }
.cp-check { display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:700; line-height:1.8; color:var(--g-ink-3); }
.cp-check.active, .cp-check.done { color:var(--g-ink); }
.cp-check-mark {
  flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--g-line); color:var(--cp-on-strong);
}
.cp-check.done .cp-check-mark { background:var(--g-teal); border-color:var(--g-teal); }
.cp-check.active .cp-check-mark { border-color:transparent; }
.cp-check-mark .ico { stroke-width:3; }
.cp-spin {
  width:20px; height:20px; border-radius:50%; border:2.5px solid var(--g-teal-line); border-top-color:var(--g-teal);
  animation:cp-spin .8s linear infinite;
}
@keyframes cp-spin { to { transform:rotate(360deg); } }
.cp-card-flat { padding:14px 16px; border-radius:14px; border:1px solid var(--g-line); background:var(--g-card); display:flex; flex-direction:column; gap:8px; }
.cp-card-flat h3 { font-size:14.5px; font-weight:800; line-height:1.6; color:var(--g-ink); }
.cp-rows { display:flex; flex-direction:column; }
.cp-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:7px 0; border-top:1px solid var(--g-line-soft); }
.cp-row:first-child { border-top:0; padding-top:0; }
.cp-row dt { font-size:12.5px; font-weight:700; color:var(--g-ink-2); }
.cp-row dd { font-size:14px; font-weight:800; color:var(--g-ink); text-align:end; }
.cp-bals { display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:12px; border:1px dashed var(--cp-amber-line); background:var(--cp-amber-soft); }
.cp-bals-t { font-size:12px; font-weight:800; line-height:1.8; color:var(--g-ink-2); }
.cp-bals-row { display:flex; flex-wrap:wrap; gap:6px; }
.cp-bal {
  min-height:44px; padding:0 12px; border-radius:99px; border:1px solid var(--g-line); background:var(--g-card);
  color:var(--g-ink-2); font-size:13px; font-weight:800; cursor:pointer;
}
.cp-bal[aria-pressed="true"] { background:var(--g-teal-soft); border-color:var(--g-teal); color:var(--g-teal-ink); }
.cp-bal:focus-visible { outline:2px solid var(--g-teal); outline-offset:1px; }

/* ---- a pack's details: its figures, its members as the list's own cards, «تعویض» under each ---- */
.cp-dialog[data-step="details"] { width:min(760px, calc(100vw - 32px)); }
.cp-chip-custom { padding:1px 10px; border-radius:99px; font-size:12px; font-weight:800; line-height:1.8; background:var(--cp-amber-soft); color:var(--cp-amber-ink); border:1px solid var(--cp-amber-line); }
/* «ریسک‌ریوارد دستی» (packratio): an option holding a member at the user's own ratio; teal, apart from «سفارشی‌شده». */
.cp-chip-own { padding:1px 10px; border-radius:99px; font-size:12px; font-weight:800; line-height:1.8; background:var(--g-card); color:var(--g-teal-ink); border:1px solid var(--g-teal-line); }
/* A member card's ratio line (copytrade.js's .ct-card-rr), only a pin's or Crowd Clock's (rrcards D1), and the pin's
   «بازگشت به پیشنهادی». */
.cp-rr-by.cp-rr-user, .cp-rr-by.cp-rr-fixed { color:var(--g-teal-ink); }
.cp-unpin { font-size:12px; padding:5px 0; margin:-5px 0; }      /* a taller hit area, the line's height unchanged */
/* A pinned ratio below our own floor for that member (its `own`'s weak): one amber line under its card. */
.cp-weak { margin:0; padding:8px 12px; border-radius:12px; font-size:12.5px; font-weight:700; line-height:1.85; background:var(--cp-amber-soft); color:var(--cp-amber-ink); border:1px solid var(--cp-amber-line); }
.cp-link {
  align-self:flex-start; margin-top:-8px; padding:0 2px; border:0; background:none; color:var(--g-teal-ink); font-size:13px; font-weight:800; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; line-height:2; min-height:32px;
}
.cp-link:disabled { color:var(--g-ink-3); cursor:default; }
.cp-dialog .dim { opacity:.5; transition:opacity .15s; }
.cp-dfigs { gap:10px; }
.cp-mems-t { font-size:15px; font-weight:800; line-height:1.6; color:var(--g-ink); margin-top:2px; }
.cp-mcards { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(296px, 1fr)); gap:14px; }
.cp-mcard { display:flex; flex-direction:column; gap:8px; min-width:0; }
/* A card its own height and «تعویض» at the foot of its column, so a row's buttons line up; the card beside Crowd Clock's
   hours never stretches into an empty frame (the review of 19 October 2026). */
.cp-mcard > .ct-card { flex:0 0 auto; }
/* «ساعت‌های این پک» under Crowd Clock's card: a line an hour (hour, R:R, figures), its rules muted under it. */
.cp-hrs { display:flex; flex-direction:column; gap:6px; padding:10px 12px; border-radius:14px; border:1px solid var(--g-line); background:var(--g-card); }
.cp-hrs-t { margin:0; font-size:12.5px; font-weight:800; line-height:1.6; color:var(--g-ink-2); }
.cp-hrs-basis { margin:-4px 0 0; font-size:12px; font-weight:600; line-height:1.7; color:var(--g-ink-3); }
.cp-hrs-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cp-hr { display:flex; flex-direction:column; gap:2px; min-width:0; }
.cp-hr + .cp-hr { padding-top:8px; border-top:1px solid var(--g-line-soft); }
.cp-hr-main { margin:0; font-size:13px; font-weight:700; line-height:1.8; color:var(--g-ink); }
.cp-hr-main b { font-weight:800; }
.cp-hr-rule { margin:0; font-size:12px; font-weight:600; line-height:1.8; color:var(--g-ink-3); }
.cp-btn.cp-swap { align-self:stretch; margin-top:auto; min-height:44px; gap:6px; }
.cp-btn.cp-swap .ico { flex:none; }
/* A member the list does not hold: its face, its name, its page. */
.cp-mfall { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:12px; border-radius:18px; border:1px solid var(--g-line); background:var(--g-card); }
.cp-mfall > .ct-avatar { width:40px; height:40px; font-size:15px; }
.cp-mem-link {
  display:inline-flex; align-items:center; min-height:44px; padding:0 2px; margin:-6px 0;
  font-size:12.5px; font-weight:800; color:var(--g-teal-ink); text-decoration:underline; text-underline-offset:3px;
}

/* ---- «تعویض»: the replace list, searchable ---- */
.cp-picker { display:flex; flex-direction:column; gap:10px; min-width:0; }
.cp-pick-title { font-size:17px; }
.cp-find-row { position:relative; display:flex; align-items:center; }
.cp-find-ico { position:absolute; inset-inline-start:12px; display:grid; place-items:center; color:var(--g-ink-3); pointer-events:none; }
.cp-find {
  width:100%; height:44px; padding:0 40px 0 12px; padding-inline-start:40px; padding-inline-end:12px; border:1px solid var(--g-line); border-radius:12px;
  background:var(--g-card); color:var(--g-ink); font-family:inherit; font-size:16px; font-weight:700; text-align:start;
}
/* 16px: under it, iPhone Safari zooms the page in when the box takes the focus (and stays zoomed). */
.cp-find::placeholder { color:var(--g-ink-3); font-weight:600; }
.cp-find:focus { outline:none; border-color:var(--g-teal); box-shadow:0 0 0 3px var(--g-teal-soft); }
html.cp-on[data-theme="dark"] .cp-find { color-scheme:dark; }
.cp-pick-list { display:flex; flex-direction:column; gap:8px; min-width:0; }
.cp-pick-count { font-size:12px; font-weight:700; line-height:1.8; color:var(--g-ink-3); }
.cp-cands { list-style:none; padding:0; display:flex; flex-direction:column; gap:8px; }
.cp-cand { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; border:1px solid var(--g-line); min-width:0; }
.cp-cand > .ct-avatar { width:36px; height:36px; font-size:14px; }
.cp-cand-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.cp-cand-main .cp-name { font-size:14px; line-height:1.6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-cand-facts { font-size:12px; font-weight:600; line-height:1.85; color:var(--g-ink-2); }
.cp-cand-act { flex:none; display:flex; justify-content:flex-end; }
.cp-cand-act .cp-btn.small { min-height:40px; }
.cp-picker .cp-empty { font-size:13px; }
.cp-btn.cp-pick-more { align-self:center; min-height:44px; padding:0 18px; }
/* Facts in a row («a · b · c»): each separator is at the start of the fact after it, in its own 1.1em; the row is
   pulled 1.1em past its box's start and clipped there, so a fact that wraps starts its line without a stray «·» and
   no line ends with one. */
.cp-facts { display:block; overflow:hidden; }
.cp-facts-in { display:flex; flex-wrap:wrap; align-items:center; margin-inline-start:-1.1em; }
.cp-facts-in > .cp-fact { position:relative; padding-inline-start:1.1em; }
.cp-sep { position:absolute; inset-inline-start:0; width:1.1em; text-align:center; white-space:pre; color:var(--g-ink-3); }
.cp-fact { white-space:nowrap; }

/* ---- confirm ---- */
.cp-summary { gap:6px; }
.cp-sum-line { font-size:13px; font-weight:700; line-height:1.9; color:var(--g-ink-2); }
.cp-sum-pack { font-size:15px; font-weight:800; color:var(--g-ink); }
.cp-mchips { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.cp-mchip { display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:3px 10px 3px 4px; border-radius:99px; background:var(--g-flat-soft); font-size:12.5px; }
.cp-mchip .ct-avatar { width:24px; height:24px; font-size:11px; }
.cp-mchip .cp-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.cp-rules { padding:12px 14px; border-radius:14px; background:var(--g-flat-soft); display:flex; flex-direction:column; gap:6px; }
.cp-rules h3 { font-size:14px; font-weight:800; color:var(--g-ink); line-height:1.6; }
.cp-rules ol { padding-inline-start:20px; list-style-type:persian; display:flex; flex-direction:column; gap:3px; }
.cp-rules li { font-size:12.5px; line-height:1.9; color:var(--g-ink-2); }
.cp-rules li::marker { color:var(--g-ink-3); font-weight:800; }
.cp-consent { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--g-line); cursor:pointer; }
.cp-consent input { flex:none; width:20px; height:20px; margin:3px 0 0; accent-color:var(--g-teal); cursor:pointer; }
/* The unticked box in the dark theme: dark too (the browser's own box is white otherwise). */
html.cp-on[data-theme="dark"] .cp-consent input { color-scheme:dark; }
.cp-consent span { font-size:13px; font-weight:800; line-height:1.9; color:var(--g-ink); }
.cp-consent:has(input:checked) { border-color:var(--g-teal-line); background:var(--g-teal-soft); }
/* In the footer, by «شروع کپی خودکار»: always in view, never below the fold. */
.cp-consent-foot { padding:8px 10px; gap:8px; }
.cp-consent-foot span { font-size:12.5px; line-height:1.8; }
.cp-consent-hint { font-size:11.5px; font-weight:700; line-height:1.7; color:var(--g-ink-3); }

/* ---- done ---- */
.cp-done { display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 4px 6px; text-align:center; }
.cp-done-mark { width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--g-teal-soft); color:var(--g-teal-ink); border:1px solid var(--g-teal-line); }
.cp-done .cp-title { text-align:center; }

/* ---- buttons ---- */
.cp-foot-btns { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cp-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 16px; border-radius:11px;
  border:1px solid transparent; font-family:inherit; font-size:14px; font-weight:800; line-height:1.3; text-align:center; text-decoration:none; cursor:pointer;
  transition:filter .15s, border-color .15s, background .15s;
}
.cp-btn:focus-visible { outline:2px solid var(--g-teal); outline-offset:2px; }
.cp-btn.small { min-height:36px; padding:0 12px; font-size:13px; border-radius:10px; }
.cp-btn.primary { background:var(--g-teal); color:var(--cp-on-strong); }
.cp-foot-btns .cp-btn.primary { flex:1 1 220px; }
.cp-btn.primary:hover { filter:brightness(.94); }
.cp-btn.primary:disabled { background:var(--g-flat-soft); color:var(--g-ink-3); border-color:var(--g-line); cursor:not-allowed; filter:none; }
.cp-btn.ghost { background:var(--g-card); color:var(--g-ink); border-color:var(--g-line); }
.cp-btn.ghost:hover { border-color:var(--g-teal-line); }
.cp-btn.ghost:disabled { color:var(--g-ink-3); cursor:not-allowed; }
.cp-btn.text { background:none; border-color:transparent; padding:0 8px; }
.cp-btn.text.danger { color:var(--cp-red-ink); }
.cp-btn.text.danger:hover { background:var(--cp-red-soft); }
.cp-btn.text.danger:disabled { color:var(--g-ink-3); background:none; cursor:not-allowed; }
.cp-foot > .cp-btn.primary { flex:none; width:100%; }
.cp-btn.cp-unlink { align-self:center; color:var(--cp-red-ink); }
.cp-escape {
  align-self:center; display:inline-flex; align-items:center; min-height:44px; padding:4px 6px; border-radius:8px; color:var(--g-teal-ink); font-size:13px; font-weight:800; line-height:1.9;
  text-decoration:underline; text-underline-offset:3px; text-align:center;
}
.cp-escape:focus-visible { outline:2px solid var(--g-teal); outline-offset:1px; }

@media (prefers-reduced-motion:reduce) {
  .cp-spin { animation:none; border-color:var(--g-teal); }
  .cp-btn, .cp-dialog .dim { transition:none; }
}

/* ================================================================ wider screens */
@media (min-width:768px) {
  .cp-start { width:100%; max-width:880px; margin-inline:auto; padding:22px 24px; align-items:stretch; }
  .cp-steps { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
  .cp-steps-i { flex-direction:column; text-align:center; gap:6px; padding:12px 8px; border-radius:14px; background:var(--g-flat-soft); }
  .cp-btn.cp-start-go { width:auto; min-width:280px; align-self:center; padding:0 28px; }
  .cp-cards { width:100%; max-width:640px; margin-inline:auto; }
}
@media (min-width:900px) {
  .cp-cards { max-width:none; display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); gap:16px; align-items:stretch; }
  .cp-cards[data-n="1"] { max-width:640px; }
  .cp-card { padding:16px 16px 14px; }
  .cp-card.is-rec { padding:15px 15px 13px; }
  .cp-phead > .cp-h2 { flex:0 1 auto; }
}

/* ================================================================ phones: a bottom sheet */
@media (max-width:767.98px) {
  .cp-pane { gap:12px; }
  .cp-scrim { place-items:end stretch; padding:6dvh 0 0; }
  .cp-dialog, .cp-dialog[data-step="details"] {
    width:100%; max-height:94vh; max-height:94dvh; border-radius:18px 18px 0 0; border-width:1px 0 0;
  }
  .cp-grab { display:block; }
  .cp-head { padding:8px 10px 6px; }
  .cp-banner { padding:6px 14px; font-size:12px; }
  .cp-body { padding:14px 16px 16px; }
  .cp-foot { padding:10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .cp-foot-btns .cp-btn.primary { flex:1 1 100%; }
  .cp-foot-btns .cp-btn.ghost { flex:1 1 100%; min-height:44px; }
  .cp-mcards { grid-template-columns:minmax(0, 1fr); }
  .cp-cand { padding:10px; gap:8px; }
}
@media (max-width:360px) {
  .cp-acct { padding:10px 12px; }
  .cp-stat dt { font-size:10.5px; }
  .cp-stat dd { font-size:13.5px; }
  .cp-card-name { font-size:16px; }
  .cp-title, .cp-h2 { font-size:17px; }
  .cp-stepper-label { font-size:11px; }
}

/* ================================================================ ctnav release 1: the preview's own parts */
/* The balance row (no account yet) and «کانال سیگنال تکی»'s top. */
.cp-balrow {
  display:flex; flex-direction:column; gap:8px; padding:12px 14px; border-radius:14px; background:var(--g-card); border:1px solid var(--g-line);
}
.cp-balrow-head { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; }
.cp-balrow .cp-bals-t { font-size:13px; color:var(--g-ink); }
.cp-bal-field { gap:6px; }
.cp-bal-in { display:flex; gap:8px; align-items:stretch; max-width:360px; }
.cp-bal-in .cp-input { flex:1 1 auto; min-width:0; }
.cp-input:not([readonly]) { border-style:solid; background:var(--g-card); color:var(--g-ink); cursor:text; }
.cp-input[aria-invalid="true"] { border-color:var(--g-down); }
:root[data-theme="dark"] .cp-input:not([readonly]) { color-scheme:dark; }
.cp-err { margin:0; font-size:12.5px; font-weight:700; line-height:1.8; color:var(--cp-red-ink, var(--g-down)); }
.cp-single { gap:12px; }
.cp-single-top:empty { display:none; }
.cp-acct-ask .cp-acct-text { font-weight:700; color:var(--g-ink-2); }
.cp-list-host:empty { display:none; }
/* The steps: «مرحلهٔ n از ۴» over the stepper. */
.cp-step-wrap { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px; }
.cp-step-of { margin:0; font-size:12px; font-weight:800; color:var(--g-teal-ink); line-height:1.6; }
.cp-step-wrap .cp-stepper { width:100%; }
.cp-radios { margin:0; padding:0; border:0; display:flex; flex-direction:column; gap:8px; min-width:0; }
.cp-radios > legend { padding:0; margin-bottom:6px; }
.cp-radio {
  display:flex; align-items:center; gap:10px; min-height:48px; padding:8px 14px; border-radius:12px; border:1px solid var(--g-line);
  background:var(--g-card); color:var(--g-ink); font-size:14.5px; font-weight:700; line-height:1.6; cursor:pointer;
}
.cp-radio:hover { border-color:var(--g-teal-line); }
.cp-radio.on { border-color:var(--g-teal); background:var(--g-teal-soft); color:var(--g-teal-ink); }
.cp-radio input { width:18px; height:18px; margin:0; accent-color:var(--g-teal); flex:none; }
.cp-radio:focus-within { outline:2px solid var(--g-teal); outline-offset:2px; }
.cp-method { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cp-method li { display:flex; align-items:flex-start; gap:8px; font-size:14px; line-height:1.9; color:var(--g-ink); }
.cp-method .ico { margin-top:5px; color:var(--g-up); flex:none; }
.cp-status { margin:0; display:flex; align-items:flex-start; gap:7px; padding:9px 12px; border-radius:12px; background:var(--cp-amber-soft);
  color:var(--g-ink-2); font-size:13px; font-weight:700; line-height:1.9; }
.cp-status .ico { margin-top:4px; color:var(--cp-amber-ink); flex:none; }
.cp-btn.is-off { opacity:.55; }

/* ================================================================ the MetaTrader steps, inline (#cpStepsPane)
   The owner, 20 October 2026, 14:55: «فقط فرایند مرحله به مرحله اتصال حساب … مراحل داخل خود صفحه باشد». One card: the
   stepper ۱ ۲ ۳ ۴ (a step done is a button back to it), the step, «مرحلهٔ قبل» / «مرحلهٔ بعد». 21 October 2026 (mtcompact:
   «از نظر استفاده از فضا این مراحل می‌تونه فضای خیلی کمتری بگیره … فضای بین دکمه‌های مرحلهٔ قبل و بعد با انتخاب روش
   اتصال خیلی زیاده»): the content column's width, its height its content's (no forced height), a compact stepper, the
   buttons right under the step (the card's own 14 px gap, no rule above them); each step about one phone screen. */
.cp-wz-card {
  display:flex; flex-direction:column; gap:14px; width:100%; padding:16px 20px 18px; border-radius:18px;
  background:var(--g-card); border:1px solid var(--g-line); box-shadow:var(--g-shadow); scroll-margin-top:72px;
}
.cp-wz [hidden] { display:none !important; }
.cp-wz-bar { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:4px; }
/* mt-steps-v2: the steps of the way chosen (copypacks.js sets data-n: 5, the EA way or no way yet; 6, the login way). */
.cp-wz-bar[data-n="4"] { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.cp-wz-bar[data-n="6"] { grid-template-columns:repeat(6, minmax(0, 1fr)); gap:2px; }
.cp-wz-i { position:relative; min-width:0; }
/* The line between two numbers (teal once the step before it is done): the 26 px circles' centres, 15 px down. */
.cp-wz-i + .cp-wz-i::before {
  content:''; position:absolute; top:14px; inset-inline-start:calc(-50% + 12px); inset-inline-end:calc(50% + 16px); height:2px;
  border-radius:2px; background:var(--g-line);
}
.cp-wz-i.is-done + .cp-wz-i::before { background:var(--g-teal); }
.cp-wz-go {
  position:relative; width:100%; min-height:44px; display:flex; flex-direction:column; align-items:center; gap:2px; padding:2px;
  border:0; border-radius:10px; background:none; font:inherit; color:var(--g-ink-3); text-align:center;
}
button.cp-wz-go { cursor:pointer; color:var(--g-ink-2); }
button.cp-wz-go:hover .cp-wz-n { box-shadow:0 0 0 3px var(--g-teal-soft); }
button.cp-wz-go:focus-visible { outline:2px solid var(--g-teal); outline-offset:1px; }
.cp-wz-n {
  flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--g-line);
  background:var(--g-card); color:var(--g-ink-3); font-size:13px; font-weight:800; line-height:1;
}
.cp-wz-n .ico { stroke-width:3; width:13px; height:13px; }
.cp-wz-i.is-now .cp-wz-n { border-color:var(--g-teal); background:var(--g-teal); color:var(--cp-on-strong); }
.cp-wz-i.is-done .cp-wz-n { border-color:var(--g-teal); background:var(--g-teal-soft); color:var(--g-teal-ink); }
/* The connection step behind the current one, asked but not connected: seen, not done — its number, no ✓. */
.cp-wz-i.is-seen .cp-wz-n { border-color:var(--g-ink-3); color:var(--g-ink-2); }
/* «اطلاعات حساب» passed over (no connection): dashed, a dash in place of its number. */
.cp-wz-i.is-skip .cp-wz-n { border-style:dashed; border-color:var(--g-ink-3); color:var(--g-ink-3); }
.cp-wz-i.is-skip .cp-wz-t { color:var(--g-ink-3); }
.cp-wz-t { font-size:12px; font-weight:700; line-height:1.45; overflow-wrap:anywhere; }
.cp-wz-i.is-now .cp-wz-t { color:var(--g-teal-ink); font-weight:800; }
.cp-wz-card > .cp-banner { border:1px solid var(--cp-amber-line); border-radius:12px; }
.cp-wz-body { display:flex; flex-direction:column; gap:12px; min-width:0; }
.cp-wz-body:empty { display:none; }
.cp-wz-title { font-size:17.5px; line-height:1.5; }
.cp-wz-nav { display:flex; flex-direction:column; gap:8px; }
.cp-wz-nav:empty { display:none; }
/* «مرحلهٔ قبل» then «مرحلهٔ بعد» side by side, at the step's start (right to left), right under it. */
.cp-wz-btns { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.cp-wz-btns:empty { display:none; }
.cp-wz-btns .cp-btn { min-height:44px; }
.cp-wz-btns .cp-btn.ghost { padding:0 16px; }
.cp-wz-btns .cp-wz-next { min-width:170px; padding:0 22px; }
/* Step 1: the three versions in one row on a wide screen; stacked, tight, on a phone. */
.cp-wz .cp-radios { gap:6px; }
.cp-wz .cp-radio { min-height:44px; padding:6px 12px; font-size:14px; gap:8px; }
.cp-wz-plats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); }
/* (Step 2 «حساب شما», a typed balance, is gone: mt-steps-v2.) Step 2 «روش اتصال»: the two ways side by side, each a
   small radio card with its «به‌زودی» (the sidebar's own badge) while the connection is not live. */
.cp-wz .cp-methods { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.cp-method-opt { display:grid; grid-template-columns:auto minmax(0, max-content) auto; justify-content:start; align-items:center; gap:4px 8px; min-height:48px; padding:8px 12px; }
.cp-method-l { min-width:0; overflow-wrap:anywhere; }
.cp-method-opt .ctn-badge { flex:none; }
.cp-method-s { display:none; }        /* the phone's short name (below 600 px); the full one is step 4's too */
/* mt-steps-v2, the way's own steps. A line under the title (the login step's broker and server); the fields one column
   (the content's width, at most 440 px); the honest «اتصال به‌زودی فعال می‌شود» (the sidebar's «به‌زودی» colours) and
   «حساب وصل شد» (teal); «نمونه» beside each figure of ?mtdemo=1's sample. */
.cp-wz-sub { margin:-6px 0 0; font-size:13px; font-weight:700; line-height:1.8; color:var(--g-ink-2); overflow-wrap:anywhere; }
.cp-wz-lead { margin:0; }
.cp-wz-fields { max-width:440px; }
.cp-wz-fields .cp-input[dir="auto"] { text-align:start; }
.cp-wz-fields .cp-hint { margin:0; }
.cp-wz-soon {
  display:flex; flex-direction:column; gap:4px; padding:10px 14px; border-radius:12px; border:1px dashed var(--ct-soon-line, var(--cp-amber-line));
  background:var(--ct-soon-bg, var(--cp-amber-soft)); color:var(--g-ink); font-size:13.5px; line-height:1.9;
}
.cp-wz-soon b { color:var(--ct-soon-ink, var(--cp-amber-ink)); font-size:14px; font-weight:800; }
.cp-wz-soon p { margin:0; font-weight:600; }
.cp-wz-ok {
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:6px 14px; border-radius:12px; border:1px solid var(--g-teal-line);
  background:var(--g-teal-soft); color:var(--g-teal-ink); font-size:14px; line-height:1.8;
}
.cp-wz-ok b { font-weight:800; }
.cp-wz-ok .cp-wz-link { margin-inline-start:auto; }
.cp-sample {
  display:inline-block; margin-inline-start:6px; padding:0 7px; border-radius:99px; border:1px dashed var(--ct-soon-line, var(--cp-amber-line));
  background:var(--ct-soon-bg, var(--cp-amber-soft)); color:var(--ct-soon-ink, var(--cp-amber-ink)); font-size:11px; font-weight:800; line-height:1.7;
  vertical-align:middle; white-space:nowrap;
}
.cp-wz-card > .cp-banner.cp-wz-demo { border-style:dashed; }
/* The EA's step: the download(s) in a row (disabled with «به‌زودی» until the file exists), the install clip in a 16:9
   frame (a placeholder until EA_VIDEO), the connection code. */
.cp-wz-dls { display:flex; flex-wrap:wrap; gap:8px; }
.cp-wz-dl { gap:8px; }
.cp-wz-dl:disabled { color:var(--g-ink-3); background:var(--g-flat-soft); cursor:not-allowed; }
.cp-wz-dl .ctn-badge { margin-inline-start:2px; }
.cp-wz-video { margin:0; width:100%; max-width:640px; aspect-ratio:16 / 9; border-radius:14px; overflow:hidden; background:var(--g-flat-soft);
  border:1px solid var(--g-line); }
.cp-wz-video-el { display:block; width:100%; height:100%; background:#000; }
.cp-wz-video-soon {
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:12px; text-align:center;
  border:1px dashed var(--g-line); border-radius:14px; color:var(--g-ink-2); font-size:13px; line-height:1.8;
}
.cp-wz-video-soon b { color:var(--g-ink); font-size:14.5px; font-weight:800; }
.cp-wz-video-t { font-weight:600; }
.cp-wz-play { flex:none; width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:var(--g-card); border:1px solid var(--g-line);
  color:var(--g-ink-3); }
.cp-wz-play svg { margin-left:4px; }      /* the triangle's own centre (a play sign points right in either direction) */
/* A phone's narrow card (the review of 31 October 2026: at 320 px the frame is 258×145, the content was taller and the
   circle was squeezed into a half-oval): a smaller circle and tighter lines below 400 px; below 360 px the sentence goes
   (the frame's label still says it, and «به‌زودی» stays). The circle never shrinks (flex:none). */
@media (max-width:399px) {
  .cp-wz-video-soon { gap:3px; padding:8px 10px; line-height:1.6; }
  .cp-wz-video-soon b { font-size:13.5px; }
  .cp-wz-video-t { font-size:12px; }
  .cp-wz-play { width:40px; height:40px; }
  .cp-wz-play svg { width:22px; height:22px; margin-left:3px; }
}
@media (max-width:359px) {
  .cp-wz-video-t { display:none; }
}
.cp-wz-codev { font-weight:800; letter-spacing:.04em; }
.cp-wz-codev.is-soon { font-weight:600; letter-spacing:0; color:var(--g-ink-2); }
/* «اطلاعات حساب» and «خلاصه»'s rows: two columns on a wide card, one on a phone. */
.cp-wz-rows { margin:0; padding:10px 14px; border-radius:14px; border:1px solid var(--g-line-soft); background:var(--g-flat-soft);
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 22px; }
.cp-wz-rows .cp-row { border-top:0; border-bottom:1px solid var(--g-line-soft); padding:7px 0; }
.cp-wz-rows .cp-row:first-child { padding-top:7px; }
.cp-wz-rows dt { flex:none; white-space:nowrap; }
.cp-wz-rows dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.cp-wz-status.is-on { border-color:var(--g-teal-line); background:var(--g-teal-soft); }
.cp-wz-status.is-on b, .cp-wz-status.is-on .cp-wz-k { color:var(--g-teal-ink); }
/* «خلاصه» (the old step 4): the title and «وضعیت حساب» (a pill in words) in a row; the account and the way in a row; what is copied —
   one line with «تغییر», or the three choices in a row and the compact list open under them; the tick. */
.cp-wz-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; }
.cp-wz-lines { display:flex; flex-direction:column; gap:10px; min-width:0; }
.cp-wz-k { font-size:13px; font-weight:700; color:var(--g-ink-3); }
.cp-wz-status {
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:2px 6px; padding:3px 12px; border-radius:99px;
  border:1px solid var(--g-line); background:var(--g-flat-soft); font-size:13.5px; line-height:1.7; color:var(--g-ink);
}
.cp-wz-status b { font-weight:800; }
.cp-wz-status.is-wait { border:1px dashed var(--ct-soon-line, var(--cp-amber-line)); background:var(--ct-soon-bg, var(--cp-amber-soft)); }
.cp-wz-status.is-wait b, .cp-wz-status.is-wait .cp-wz-k { color:var(--ct-soon-ink, var(--cp-amber-ink)); }
.cp-wz-facts { display:flex; flex-wrap:wrap; gap:0 22px; min-width:0; }
.cp-wz-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; font-size:14px; line-height:1.8; color:var(--g-ink); min-width:0; }
.cp-wz-line b { font-weight:800; overflow-wrap:anywhere; }
.cp-wz-target { align-items:center; }
.cp-wz-line .cp-link, .cp-wz-line .cp-wz-link { margin:0; align-self:auto; min-height:44px; min-width:44px; display:inline-flex; align-items:center; justify-content:center; font-size:13.5px; }
.cp-wz-choose { display:flex; flex-direction:column; gap:8px; min-width:0; }
.cp-wz-chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cp-wz-chips-k { flex:none; }
/* 44 px like every other control of the steps (mtcompact2, the review of 21 October 2026: these were 42, «تغییر» 40). */
.cp-wz-chip {
  display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:44px; padding:0 14px; border-radius:99px;
  border:1px solid var(--g-line); background:var(--g-card); color:var(--g-ink); font:inherit; font-size:13.5px; font-weight:800;
  line-height:1.3; text-align:center; text-decoration:none; cursor:pointer;
}
.cp-wz-chip:hover { border-color:var(--g-teal-line); }
.cp-wz-chip:focus-visible { outline:2px solid var(--g-teal); outline-offset:2px; }
.cp-wz-chip[aria-expanded="true"] { background:var(--g-teal-soft); border-color:var(--g-teal); color:var(--g-teal-ink); }
.cp-wz-chip .ico { flex:none; }
.cp-wz-chip .cp-wz-caret { transition:transform .15s ease; }
.cp-wz-chip[aria-expanded="true"] .cp-wz-caret { transform:rotate(180deg); }
.cp-wz-all { color:var(--g-teal-ink); }
/* «بررسی منابع» leads on: its arrow points on, to the left (right to left). */
.cp-wz-go-ico { transform:scaleX(-1); }
@media (prefers-reduced-motion:reduce) { .cp-wz-chip .cp-wz-caret { transition:none; } }
.cp-wz-list { padding:8px; border-radius:14px; background:var(--g-flat-soft); border:1px solid var(--g-line-soft); min-width:0; }
.cp-wz-opts { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:6px; }
.cp-wz-opt {
  width:100%; min-height:48px; display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:12px;
  border:1px solid var(--g-line); background:var(--g-card); color:var(--g-ink); font:inherit; text-align:start; cursor:pointer;
}
.cp-wz-opt:hover { border-color:var(--g-teal-line); }
.cp-wz-opt:focus-visible { outline:2px solid var(--g-teal); outline-offset:1px; }
.cp-wz-opt.on { border-color:var(--g-teal); background:var(--g-teal-soft); }
.cp-wz-faces { flex:none; display:inline-flex; align-items:center; }
.cp-wz-faces .ct-avatar { width:28px; height:28px; font-size:12px; box-shadow:0 0 0 2px var(--g-card); }
.cp-wz-faces .ct-avatar + .ct-avatar { margin-inline-start:-8px; }
.cp-wz-opt-t { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; line-height:1.45; }
.cp-wz-opt-n, .cp-wz-opt-f { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* The name in its own direction (dir="auto", copypacks.js optHtml): cut at its own end, never its start; as wide as it
   is (at most the line), at the line's start beside the faces — not by text-align, which an overflowing line ignores. */
.cp-wz-opt-n { font-size:13.5px; font-weight:800; color:var(--g-ink); align-self:start; max-width:100%; }
.cp-wz-opt-f { font-size:12px; font-weight:700; color:var(--g-ink-3); }
.cp-wz-opt-ok { flex:none; color:var(--g-teal); }
.cp-wz-lstate { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:2px 4px; font-size:13px; font-weight:700; line-height:1.8; color:var(--g-ink-2); }
.cp-wz-lstate .cp-btn.small { min-height:44px; }
/* «منابع سیگنال پیشنهادی» as six cards (round 6 (a), the owner: «کارت‌هاش بیاد نه اینجوری فقط اسمش در حد ۶ تا»): 3×2
   when the column is 700 px or more, two a row at 480–699, and below 480 one row that scrolls sideways with the next card
   peeking, so step 4 stays compact (the owner's MetaTrader rule). The card is the pick (teal and «✓ انتخاب شد» once
   chosen); «کارنامه» sits in its top corner, a link of its own beside the button (44 px), the name's line leaving it room.
   Figures all-time on the $100 account; never a ratio. */
.cp-wz-rcards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; min-width:0; }
@container ctmain (min-width:700px) { .cp-wz-rcards { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@container ctmain (max-width:479.98px) {
  .cp-wz-rcards { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; margin:-2px; padding:2px; }
  .cp-rcard-w { flex:0 0 78%; scroll-snap-align:start; }
}
/* A card (its li holds the button and «کارنامه»): its face beside the name's line and the line under it (win rate and
   trades); the growth with its two words and the curve; the deepest fall and the pick. The two lines at the face leave
   «کارنامه» its corner (--cp-rc-more). A card under 250 px (1024's 3 a row, the phones' row) puts the second line under
   the face, clear of «کارنامه», with the days at its start, so the name keeps its room and the line is not cut.
   --cp-rc-ink: the teal words («انتخاب این منبع», «کارنامه») a shade deeper, 4.5:1 on the picked card's teal ground too. */
.cp-rcard-w { position:relative; display:flex; min-width:0; container:cprc / inline-size; --cp-rc-more:54px; --cp-rc-ink:color-mix(in srgb, var(--g-teal-ink) 80%, var(--g-ink)); }
.cp-rcard {
  flex:1 1 auto; min-width:0; display:grid; grid-template-columns:auto minmax(0, 1fr); grid-template-areas:"face nl" "face sub" "fig fig" "foot foot";
  align-items:center; column-gap:8px; padding:7px 10px; border-radius:12px;
  border:1px solid var(--g-line); background:var(--g-card); color:var(--g-ink); font:inherit; text-align:start; cursor:pointer;
}
.cp-rcard:hover { border-color:var(--g-teal-line); }
.cp-rcard:focus-visible { outline:2px solid var(--g-teal); outline-offset:-2px; }
.cp-rcard.on { border-color:var(--g-teal); background:var(--g-teal-soft); }
.cp-rcard-face { grid-area:face; display:inline-flex; }
.cp-rcard-face .ct-avatar { width:36px; height:36px; font-size:14px; }
.cp-rcard-nl { grid-area:nl; align-self:end; display:flex; align-items:baseline; gap:4px; min-width:0; padding-inline-end:var(--cp-rc-more); line-height:1.4; }
/* The name in its own direction (dir="auto"), cut at its own end (the mask), at the line's start: mtcompact2's rule. */
.cp-rcard-n { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:800; color:var(--g-ink); }
.cp-rcard-d { flex:none; font-size:11.5px; font-weight:700; color:var(--g-ink-3); white-space:nowrap; }
.cp-rcard-d2 { display:none; }
.cp-rcard-sub { grid-area:sub; align-self:start; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-inline-end:var(--cp-rc-more);
  font-size:12px; font-weight:700; line-height:1.4; color:var(--g-ink-2); }
.cp-rcard-fig { grid-area:fig; display:flex; align-items:center; gap:6px; min-width:0; margin-top:3px; }
.cp-rcard-g { flex:none; font-size:16px; font-weight:800; line-height:1.4; color:var(--g-ink); }
.cp-rcard-g.up { color:color-mix(in srgb, var(--g-up) 70%, var(--g-ink)); }
.cp-rcard-g.down { color:color-mix(in srgb, var(--g-down) 70%, var(--g-ink)); }
.cp-rcard-gl { flex:none; display:flex; flex-direction:column; font-size:10.5px; font-weight:700; line-height:1.25; color:var(--g-ink-3); white-space:nowrap; }
.cp-rcard .ct-spark { flex:1 1 auto; min-width:36px; width:auto; height:26px; margin:0; }
.cp-rcard-foot { grid-area:foot; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 8px; margin-top:3px;
  font-size:12px; font-weight:700; line-height:1.5; }
.cp-rcard-dd { color:var(--g-ink-2); white-space:nowrap; }
.cp-rcard-pick { display:inline-flex; align-items:center; gap:3px; margin-inline-start:auto; color:var(--cp-rc-ink); font-weight:800; white-space:nowrap; }
.cp-rcard-pick .ico { stroke-width:3; }
.cp-rcard-more {
  position:absolute; top:0; inset-inline-end:0; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 6px; border-radius:12px; color:var(--cp-rc-ink); font-size:12px; font-weight:800; line-height:1.3; text-decoration:none; white-space:nowrap;
}
.cp-rcard-more:hover { text-decoration:underline; text-underline-offset:3px; }
.cp-rcard-more:focus-visible { outline:2px solid var(--g-teal); outline-offset:-2px; }
@container cprc (max-width:249.98px) {
  .cp-rcard { grid-template-areas:"face nl" "sub sub" "fig fig" "foot foot"; }
  .cp-rcard-face .ct-avatar { width:30px; height:30px; font-size:12.5px; }
  .cp-rcard-nl { align-self:center; min-height:36px; align-items:center; }
  .cp-rcard-sub { padding-inline-end:0; }
  .cp-rcard-d { display:none; }
  .cp-rcard-d2 { display:inline; color:var(--g-ink-3); }
}
.cp-wz .cp-consent { padding:8px 12px; }
.cp-wz-demo-done { display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:12px; background:var(--g-teal-soft); color:var(--g-ink); font-size:13.5px; line-height:1.9; }
@media (max-width:767.98px) {
  .cp-wz-card { padding:14px 14px 16px; gap:12px; border-radius:16px; }
  .cp-wz-t { font-size:11px; }
  .cp-wz-rows { grid-template-columns:minmax(0, 1fr); padding:6px 12px; }
  .cp-wz-title { font-size:16.5px; }
  .cp-wz-line { font-size:13.5px; }
  .cp-wz-btns .cp-wz-next { flex:1 1 auto; min-width:0; }
  .cp-wz-btns .cp-btn.ghost { flex:0 0 auto; }
}
@media (max-width:599.98px) {
  .cp-wz-plats { display:flex; }
  /* Six steps (the login way) on a phone: each name under its number, at most two short lines. */
  .cp-wz-bar[data-n="6"] .cp-wz-t { font-size:10.5px; line-height:1.4; }
  .cp-wz-bar[data-n="6"] .cp-wz-i + .cp-wz-i::before { inset-inline-start:calc(-50% + 10px); inset-inline-end:calc(50% + 14px); }
  /* Step 3 (mtcompact2, the owner: «کنار هم»): the two ways side by side on a phone too — each its short name on one
     line and «به‌زودی» under it (beside it the badge squeezed even a short name into 3–4 lines at 360–375 px), the
     radio beside both: a card 60 px at 360–599 px (81 at 320), the step's card 245 px at 360–412 (stacked: 279). */
  .cp-wz .cp-methods { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px; }
  .cp-wz .cp-method-opt { grid-template-columns:auto minmax(0, 1fr); justify-content:stretch; gap:2px 8px; min-height:44px; padding:6px 12px; font-size:13.5px; line-height:1.55; }
  .cp-method-opt input { grid-row:1 / span 2; }
  .cp-method-opt .ctn-badge { grid-column:2; justify-self:start; margin-inline-start:0; }
  .cp-method-w { display:none; }
  .cp-method-s { display:inline; }
  /* «مرحلهٔ قبل» and the step's button in one row (360 px left 196 px for a 204 px «ورود و ثبت در فهرست انتظار», which
     went to a row of its own): never wrapped; the button's words wrap inside it below ~330 px. */
  .cp-wz-btns { flex-wrap:nowrap; }
  .cp-wz-btns .cp-wz-next { padding:0 14px; }
  .cp-wz-chip { padding:0 10px; font-size:13px; }
  /* The recommended sources two a row (their names are short); the packs one a row (their faces and members' names). */
  .cp-wz-opts { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cp-wz-list[data-list="packs"] .cp-wz-opts { grid-template-columns:minmax(0, 1fr); }
  .cp-wz-opt { gap:6px; padding:6px 8px; }
}

/* ================================================================ mt-ea (1 November 2026; the owner, 31 October 2026 ~23:00
   Tehran: «تو ربات هارو بساز / هم متا ۴ هم متا ۵ و داخل سایت بزار که قابل دانلود باشد»): the EA way live
   (outputs/mt-ea/design.md §6). «نصب اکسپرت»: the zip's note, «کد اتصال» (the code in a monospace box with «کپی», shown
   once; «کد جدید» and its confirm), «آدرس مجاز در متاتریدر», the risk line, «بررسی اتصال»'s wait. «اطلاعات حساب»: the
   real-account line. «خلاصه»: the EA's line and flags, the copy switch, then under the buttons its trades and «قطع
   اتصال». Light and dark through the --g-* and --cp-* tokens; every control 44 px high at least. */
.cp-wz-after { display:flex; flex-direction:column; gap:10px; min-width:0; }
.cp-wz-after:empty { display:none; }
.cp-ea-dlnote { margin:-4px 0 0; }
.cp-ea-sec {
  display:flex; flex-direction:column; gap:8px; min-width:0; padding:12px 14px; border-radius:14px;
  border:1px solid var(--g-line-soft); background:var(--g-flat-soft);
}
.cp-ea-h { margin:0; font-size:14px; font-weight:800; line-height:1.6; color:var(--g-ink); }
.cp-ea-box { display:flex; flex-wrap:wrap; align-items:center; gap:8px; min-width:0; }
.cp-ea-codev, .cp-ea-url {
  direction:ltr; unicode-bidi:isolate; display:inline-flex; align-items:center; min-height:44px; padding:4px 12px; border-radius:10px;
  background:var(--g-card); color:var(--g-ink); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight:700; line-height:1.5; overflow-wrap:anywhere; user-select:all; -webkit-user-select:all;
}
.cp-ea-codev { font-size:16.5px; letter-spacing:.06em; border:1px solid var(--g-teal-line); }
.cp-ea-url { font-size:14.5px; letter-spacing:.01em; border:1px solid var(--g-line); }
.cp-ea-copybtn { min-height:44px; }
.cp-ea-copybtn.is-done { border-color:var(--g-teal); color:var(--g-teal-ink); background:var(--g-teal-soft); }
.cp-ea-copybtn .ico { flex:none; }
.cp-ea-copyx { flex-basis:100%; }
.cp-ea-get { min-height:44px; border-color:var(--g-teal-line); color:var(--g-teal-ink); }
.cp-ea-get .ico { flex:none; }
.cp-ea-once { color:var(--g-ink-2); }
.cp-ea-tools { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; min-width:0; }
.cp-ea-tools .cp-link, .cp-ea-sec .cp-link { margin:0; min-height:44px; display:inline-flex; align-items:center; align-self:auto; }
.cp-ea-path { color:var(--g-ink-2); }
.cp-ea-path bdi { font-weight:800; color:var(--g-ink); }
/* A menu's name never split over two lines (the last, the longest, may wrap on a 320 px phone). */
.cp-ea-path bdi:not(:last-child) { white-space:nowrap; }
/* The risk line (D9) and the real-account line: amber, an «i» at their start. */
.cp-ea-risk, .cp-ea-real {
  margin:0; display:flex; align-items:flex-start; gap:7px; padding:9px 12px; border-radius:12px;
  background:var(--cp-amber-soft); border:1px solid var(--cp-amber-line); color:var(--g-ink); font-size:13px; font-weight:600; line-height:1.9;
}
.cp-ea-risk .ico, .cp-ea-real .ico { flex:none; margin-top:5px; color:var(--cp-amber-ink); }
.cp-ea-real { font-weight:700; }
/* «بررسی اتصال»'s wait: teal, a pulse on its words (none with reduced motion). */
.cp-ea-wait {
  display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:12px; border:1px solid var(--g-teal-line);
  background:var(--g-teal-soft); color:var(--g-ink); font-size:13.5px; line-height:1.9;
}
.cp-ea-wait b { color:var(--g-teal-ink); font-weight:800; animation:cp-ea-pulse 1.6s ease-in-out infinite; }
.cp-ea-wait p { margin:0; font-weight:600; color:var(--g-ink-2); }
@keyframes cp-ea-pulse { 50% { opacity:.55; } }
@media (prefers-reduced-motion:reduce) { .cp-ea-wait b { animation:none; } }
/* An inline confirm («کد جدید», «بستن», «قطع اتصال»): red-tinted, its two buttons under the question. */
.cp-ea-ask {
  display:flex; flex-direction:column; gap:8px; padding:10px 12px; border-radius:12px; border:1px solid var(--cp-red-line);
  background:var(--cp-red-soft); color:var(--g-ink); font-size:13.5px; font-weight:700; line-height:1.9;
}
.cp-ea-ask p { margin:0; }
.cp-ea-ask-btns { display:flex; flex-wrap:wrap; gap:8px; }
.cp-ea-ask .cp-btn { min-height:44px; }
.cp-ea-stale { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; font-size:13px; font-weight:700; line-height:1.8; color:var(--g-ink-2); }
.cp-ea-stale .ico { flex:none; color:var(--g-ink-3); }
.cp-ea-stale .cp-sep { position:static; width:auto; }
.cp-ea-again { margin:0; min-height:44px; display:inline-flex; align-items:center; align-self:auto; }
/* «خلاصه» of a connected EA. */
.cp-ea-state.is-online b { color:var(--g-teal-ink); }
.cp-ea-state.is-offline b { color:var(--cp-red-ink); }
.cp-ea-flag { margin:0; display:flex; align-items:flex-start; gap:7px; font-size:13px; font-weight:700; line-height:1.8; color:var(--cp-red-ink); }
.cp-ea-flag .ico { flex:none; margin-top:4px; }
.cp-ea-go {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 14px; border-radius:12px; border:1px solid var(--g-teal-line);
  background:var(--g-teal-soft); color:var(--g-ink); font-size:13.5px; font-weight:700; line-height:1.9;
}
.cp-ea-go p { margin:0; flex:1 1 240px; }
.cp-ea-go .cp-btn { min-height:44px; }
.cp-ea-copy { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.cp-ea-pill {
  display:inline-flex; align-items:center; padding:3px 12px; border-radius:99px; font-size:13.5px; font-weight:800; line-height:1.7;
  border:1px solid var(--g-line); background:var(--g-flat-soft); color:var(--g-ink-2);
}
.cp-ea-pill.is-on { border-color:var(--g-teal-line); background:var(--g-teal-soft); color:var(--g-teal-ink); }
.cp-ea-stop, .cp-ea-test, .cp-ea-close { min-height:44px; }
.cp-ea-note { color:var(--g-teal-ink); font-weight:700; }
.cp-ea-trades { gap:6px; }
.cp-ea-trlist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.cp-ea-tr { display:flex; flex-direction:column; gap:2px; min-width:0; padding:8px 10px; border-radius:12px; border:1px solid var(--g-line-soft); background:var(--g-card); }
.cp-ea-tr-top { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0; font-size:13.5px; line-height:1.7; }
.cp-ea-side { font-weight:800; }
.cp-ea-side.is-buy { color:var(--cp-up-ink); }
.cp-ea-side.is-sell { color:var(--cp-red-ink); }
.cp-ea-tr-n { min-width:0; max-width:14em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; color:var(--g-ink-2); }
.cp-ea-tr-st { margin-inline-start:auto; padding:0 9px; border-radius:99px; font-size:12px; font-weight:800; line-height:1.9; background:var(--g-flat-soft); color:var(--g-ink-2); }
.cp-ea-tr-st.is-open { background:var(--g-teal-soft); color:var(--g-teal-ink); }
.cp-ea-tr-st.is-skipped, .cp-ea-tr-st.is-failed, .cp-ea-tr-st.is-missed, .cp-ea-tr-st.is-blocked { background:var(--cp-amber-soft); color:var(--cp-amber-ink); }
.cp-ea-tr-f { margin:0; font-size:12.5px; font-weight:700; line-height:1.8; color:var(--g-ink-2); }
.cp-ea-pl.up { color:var(--cp-up-ink); }
.cp-ea-pl.down { color:var(--cp-red-ink); }
.cp-ea-tr .cp-ea-ask { margin-top:4px; }
@media (max-width:599.98px) {
  .cp-ea-sec { padding:10px 12px; }
  .cp-ea-codev { font-size:15.5px; letter-spacing:.04em; padding:4px 10px; }
  .cp-ea-box { gap:6px; }
  .cp-ea-tr-n { max-width:9em; }
  .cp-ea-go .cp-btn { flex:1 1 100%; }
}
/* A 320 px phone: the code on one line (24 characters). */
@media (max-width:359.98px) {
  .cp-ea-codev { font-size:13.5px; letter-spacing:.02em; padding:4px 8px; }
  .cp-ea-url { font-size:13.5px; padding:4px 8px; }
}