/* ctnav.css: the copy-trade pages' frame (design ctnav/design-final.md §5, §6, release 1): the sidebar (≥ 1024 px),
   the two phone rows (< 1024 px), the section heroes and ctnav.js's own panes. Loaded right after copytrade.css,
   before the modules' stylesheets. The theme is the site's (site.js writes data-theme before the first paint).
   Every class here is new; the ones that would collide with copytrade.css carry «ctn-». */

:root, :root[data-theme="light"] {
  --ct-hero-bg:#F7FBFB;
  --ct-soon-bg:#FFF4DB; --ct-soon-ink:#7A4B00; --ct-soon-line:#C98A1B;
  --ct-new-bg:#E6F4FF; --ct-new-ink:#0B4A7A;
  --ct-honest-bg:#FFF8E8;
  --ct-ok-bg:#EBF8F0; --ct-ok-ink:#11743A;
}
:root[data-theme="dark"] {
  --ct-hero-bg:#121C1D;
  --ct-soon-bg:#3A2A0A; --ct-soon-ink:#F5C26B; --ct-soon-line:#B98A3A;
  --ct-new-bg:#0E2A3D; --ct-new-ink:#8CCBFF;
  --ct-honest-bg:#2A2110;
  --ct-ok-bg:rgba(52,211,153,.12); --ct-ok-ink:#5EE0AE;
}

/* ---- the frame: the sidebar beside the column (≥ 1024), the column alone below ---- */
.ct-shell {
  display:grid; grid-template-columns:264px minmax(0, 1fr); gap:20px; align-items:start;
  max-width:1440px; margin:0 auto; padding:20px 20px 56px;
}
.ct-col { min-width:0; display:flex; flex-direction:column; gap:16px; container-type:inline-size; container-name:ctmain; }
/* #copyTrade lives in the column now: the column gives its width and gutters. */
.ct-col > .ct-page { max-width:none; margin:0; padding:0; }
/* The MetaTrader steps on a phone: the current step's name under «مرحلهٔ n از ۴», the others as dots. */
@media (max-width:479.98px) { .cp-step-wrap .cp-stepper-i:not(.now) .cp-stepper-label { visibility:hidden; } }
@media (min-width:1024px) and (max-width:1199.98px) { .ct-shell { grid-template-columns:236px minmax(0, 1fr); } }
@media (max-width:1023.98px) {
  .ct-shell { display:block; padding:12px 16px 40px; }
  .ct-col { gap:12px; }
  .ctn-side { display:none !important; }
}
@media (max-width:760px) { .ct-col > .ct-page { padding:0; } }

/* Parked above the page until focused; its shadow only then (mtcompact2, the review of 21 October 2026: parked at
   -60 px, its 40 px blur reached ~37 px into the sticky header, a grey haze behind the logo on a light phone). */
.ct-skip {
  position:absolute; inset-inline-start:12px; top:-60px; z-index:80; padding:10px 16px; border-radius:10px;
  background:var(--g-card); color:var(--g-teal-ink); font-weight:800; font-size:14px; text-decoration:none; box-shadow:none;
}
.ct-skip:focus { top:72px; box-shadow:var(--g-pop); }
:where(.ctn-side, .ctn-rows, .ct-hero, .ct-land) :where(a, button, summary):focus-visible { outline:2px solid var(--g-teal); outline-offset:2px; }

/* ---- the sidebar (education's look: a card, the current item teal-soft with a 3 px edge) ---- */
.ctn-side {
  position:sticky; top:84px; max-height:calc(100vh - 104px); overflow:auto; overscroll-behavior:contain;
  background:var(--g-card); border:1px solid var(--g-line); border-radius:18px; padding:14px 10px; box-shadow:var(--g-shadow);
}
.ctn-side-nav { display:flex; flex-direction:column; gap:6px; }
.ctn-side-head { display:flex; align-items:center; gap:10px; margin:0; padding:2px 8px 10px; font-size:13px; font-weight:800; color:var(--g-ink-3); }
.ctn-side-head .ico { color:var(--g-teal); }
.ctn-side-sec + .ctn-side-sec { margin-top:6px; padding-top:10px; border-top:1px solid var(--g-line-soft); }
/* Round 6 (b): «رتبه‌بندی کانال‌های سیگنال», a tab of its own above «بخش‌های کپی ترید». */
.ctn-side-sec.is-above { margin:0 0 8px; padding-bottom:10px; border-bottom:1px solid var(--g-line-soft); }
.ctn-side-top {
  display:flex; align-items:center; gap:10px; min-height:44px; padding:7px 9px; border-radius:12px;
  border:1px solid transparent; color:var(--g-ink); font-size:14px; font-weight:700; line-height:1.6; text-decoration:none;
}
.ctn-side-top:hover { background:var(--g-flat-soft); }
/* Round 6 (c): «کانال سیگنال من» is a title only (owner: «اصلاً اجازه کلیک کردن نباشد»): its two leaves are the links. */
/* A <p> since round 6 (c): none of the browser's paragraph margins (the review of round 6: 14 px above and below it). */
.ctn-side-top.is-label { cursor:default; margin:0; }
.ctn-side-top.is-label:hover { background:none; }
.ctn-side-ico { flex:none; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--g-flat-soft); color:var(--g-ink-2); }
.ctn-side-name { flex:1 1 auto; min-width:0; }
.ctn-side-slogan { margin:2px 12px 2px 0; padding-inline-start:44px; font-size:12px; font-weight:700; line-height:1.8; color:var(--g-teal-ink); }
.ctn-side-sub { list-style:none; margin:2px 0 0; padding:0 0 0 0; padding-inline-start:30px; display:flex; flex-direction:column; gap:1px; }
.ctn-side-link {
  display:flex; align-items:center; gap:8px; width:100%; min-height:40px; padding:7px 12px; border-radius:10px; border:0;
  border-inline-start:3px solid transparent; background:none; color:var(--g-ink-2); font:inherit; font-size:14px; font-weight:600;
  line-height:1.6; text-align:start; text-decoration:none; cursor:pointer;
}
.ctn-side-link:hover { background:var(--g-flat-soft); color:var(--g-ink); }
.ctn-side-lname { flex:1 1 auto; min-width:0; }
.ctn-side-link.is-ext { color:var(--g-ink-3); font-size:13px; }
.ctn-side-foot { margin-top:6px; padding-top:8px; border-top:1px solid var(--g-line-soft); }
/* The current item: painted from html[data-ct-route] / [data-ct-sec] alone (the boot sets them before the first paint,
   ctnav.js moves them), never from aria-current — the served file's static aria-current would otherwise light a second
   section until ctnav.js runs (the review of 20 October 2026). aria-current stays for assistive technology. */
html[data-ct-sec="mt"] .ctn-side-top[data-ct-id="mt"], html[data-ct-sec="ch"] [data-ct-box="ch"] > .ctn-side-top, html[data-ct-sec="an"] .ctn-side-top[data-ct-id="an"],
html[data-ct-sec="an-rank"] .ctn-side-top[data-ct-id="an-rank"] { color:var(--g-teal-ink); }
html[data-ct-sec="mt"] .ctn-side-top[data-ct-id="mt"] .ctn-side-ico, html[data-ct-sec="ch"] [data-ct-box="ch"] > .ctn-side-top .ctn-side-ico, html[data-ct-sec="an"] .ctn-side-top[data-ct-id="an"] .ctn-side-ico,
html[data-ct-sec="an-rank"] .ctn-side-top[data-ct-id="an-rank"] .ctn-side-ico { background:var(--g-card); color:var(--g-teal); }
html[data-ct-route="mt"] .ctn-side-top[data-ct-id="mt"],
html[data-ct-route="an"] .ctn-side-top[data-ct-id="an"], html[data-ct-route="an-rank"] .ctn-side-top[data-ct-id="an-rank"],
html[data-ct-route="mt-packs"] .ctn-side-link[data-ct-id="mt-packs"], html[data-ct-route="mt-single"] .ctn-side-link[data-ct-id="mt-single"],
html[data-ct-route="ch-personal"] .ctn-side-link[data-ct-id="ch-personal"], html[data-ct-route="ch-org"] .ctn-side-link[data-ct-id="ch-org"] {
  background:var(--g-teal-soft); color:var(--g-teal-ink); border-inline-start:3px solid var(--g-teal); font-weight:800;
}

/* Badges: always words (never a colour alone); «به‌زودی» dashed. */
.ctn-badge {
  flex:none; display:inline-flex; vertical-align:1px; margin-inline-start:2px; align-items:center; gap:4px; padding:1px 8px; border-radius:99px; border:1px solid transparent;
  font-size:11.5px; font-weight:800; line-height:1.7; white-space:nowrap;
}
.ctn-badge.is-soon { background:var(--ct-soon-bg); color:var(--ct-soon-ink); border:1px dashed var(--ct-soon-line); }
.ctn-badge.is-new { background:var(--ct-new-bg); color:var(--ct-new-ink); }
.ctn-badge.is-ok { background:var(--ct-ok-bg); color:var(--ct-ok-ink); }
.ctn-badge[hidden], [data-ct-basket-row][hidden], .ct-count[hidden] { display:none !important; }

/* ---- the phone rows (< 1024): the three sections, then the current section's items; links, not sticky ---- */
.ctn-rows { display:none; }
@media (max-width:1023.98px) {
  .ctn-rows { display:flex; flex-direction:column; gap:8px; }
}
.ctn-rows-1 { list-style:none; margin:0; padding:3px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:3px;
  background:var(--g-flat-soft); border:1px solid var(--g-line-soft); border-radius:14px; }
/* Round 6 (b): row 0, the ranking alone, full width over the three section pills. */
.ctn-rows-0 { list-style:none; margin:0; padding:3px; background:var(--g-flat-soft); border:1px solid var(--g-line-soft); border-radius:14px; }
.ctn-row0 { min-height:48px; gap:6px; }
.ctn-row1 {
  display:flex; align-items:center; justify-content:center; min-height:48px; padding:4px 6px; border-radius:11px;
  color:var(--g-ink-2); font-size:13px; font-weight:800; line-height:1.45; text-align:center; text-decoration:none;
}
.ctn-row1:hover { color:var(--g-ink); }
.ctn-rows-2 {
  list-style:none; margin:0; padding:0 0 2px; display:none; gap:6px; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain;
}
.ctn-rows-2::-webkit-scrollbar { display:none; }
.ctn-rows-2 > li { flex:none; }
.ctn-row2 {
  display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 14px; border-radius:99px; border:1px solid var(--g-line);
  background:var(--g-card); color:var(--g-ink-2); font:inherit; font-size:13px; font-weight:700; white-space:nowrap; text-decoration:none; cursor:pointer;
}
.ctn-row2.is-ext { color:var(--g-ink-3); }
html[data-ct-sec="mt"] .ctn-rows-2[data-ct-sub="mt"], html[data-ct-sec="ch"] .ctn-rows-2[data-ct-sub="ch"] { display:flex; }
html[data-ct-sec="mt"] .ctn-row1[data-ct-id="mt"], html[data-ct-sec="ch"] .ctn-row1[data-ct-id="ch"],
html[data-ct-sec="an"] .ctn-row1[data-ct-id="an"], html[data-ct-route="an-rank"] .ctn-row0[data-ct-id="an-rank"] {
  background:var(--g-card); color:var(--g-teal-ink); box-shadow:0 1px 3px rgba(15,27,45,.10);
}
:root[data-theme="dark"][data-ct-sec="mt"] .ctn-row1[data-ct-id="mt"], :root[data-theme="dark"][data-ct-sec="ch"] .ctn-row1[data-ct-id="ch"], :root[data-theme="dark"][data-ct-sec="an"] .ctn-row1[data-ct-id="an"],
:root[data-theme="dark"][data-ct-route="an-rank"] .ctn-row0[data-ct-id="an-rank"] { box-shadow:none; background:var(--g-teal-soft); }
html[data-ct-route="mt-packs"] .ctn-row2[data-ct-id="mt-packs"], html[data-ct-route="mt-single"] .ctn-row2[data-ct-id="mt-single"],
html[data-ct-route="ch-personal"] .ctn-row2[data-ct-id="ch-personal"], html[data-ct-route="ch-org"] .ctn-row2[data-ct-id="ch-org"] {
  background:var(--g-teal); border-color:var(--g-teal); color:#fff;
}
:root[data-theme="dark"][data-ct-route="mt-packs"] .ctn-row2[data-ct-id="mt-packs"], :root[data-theme="dark"][data-ct-route="mt-single"] .ctn-row2[data-ct-id="mt-single"],
:root[data-theme="dark"][data-ct-route="ch-personal"] .ctn-row2[data-ct-id="ch-personal"], :root[data-theme="dark"][data-ct-route="ch-org"] .ctn-row2[data-ct-id="ch-org"] {
  color:#0B1314;
}
.ctn-row2 .ctn-badge.is-new { font-size:11px; padding:0 6px; }
/* mhdr (the owner, 27 October 2026: «ایناهم مشخص بشه دکمه هستند … طراحی خوبه و جایگذاری فقط معلوم بشه دکمه فشاری هستند»):
   the same rows in the same places, each pill a raised button (border, light fill, shadow), pressed on :active; the
   current one teal-tinted with a teal border. */
.ctn-rows-0, .ctn-rows-1 { padding:4px; }
.ctn-rows-1 { gap:5px; }
.ctn-row1 {
  border:1px solid var(--g-line); background:var(--g-card); color:var(--g-ink);
  box-shadow:0 1px 0 rgba(15,27,45,.05), 0 2px 5px -1px rgba(15,27,45,.12);
  cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:transform .08s ease, box-shadow .08s ease, background-color .12s ease, border-color .12s ease;
}
.ctn-row1:hover { border-color:var(--g-teal-line); }
.ctn-row1:active, .ctn-row2:active { transform:translateY(1px); box-shadow:inset 0 1px 3px rgba(15,27,45,.16); }
.ctn-row2 { box-shadow:0 1px 3px -1px rgba(15,27,45,.12); transition:transform .08s ease, box-shadow .08s ease; -webkit-tap-highlight-color:transparent; }
html[data-ct-sec="mt"] .ctn-row1[data-ct-id="mt"], html[data-ct-sec="ch"] .ctn-row1[data-ct-id="ch"],
html[data-ct-sec="an"] .ctn-row1[data-ct-id="an"], html[data-ct-route="an-rank"] .ctn-row0[data-ct-id="an-rank"] {
  background:var(--g-teal-soft); border-color:var(--g-teal); color:var(--g-teal-ink); box-shadow:inset 0 0 0 1px var(--g-teal);
}
:root[data-theme="dark"] .ctn-row1 { box-shadow:0 1px 0 rgba(0,0,0,.35), 0 2px 6px -1px rgba(0,0,0,.45); }
:root[data-theme="dark"] .ctn-row1:active, :root[data-theme="dark"] .ctn-row2:active { box-shadow:inset 0 1px 3px rgba(0,0,0,.5); }
:root[data-theme="dark"][data-ct-sec="mt"] .ctn-row1[data-ct-id="mt"], :root[data-theme="dark"][data-ct-sec="ch"] .ctn-row1[data-ct-id="ch"], :root[data-theme="dark"][data-ct-sec="an"] .ctn-row1[data-ct-id="an"],
:root[data-theme="dark"][data-ct-route="an-rank"] .ctn-row0[data-ct-id="an-rank"] { background:var(--g-teal-soft); box-shadow:inset 0 0 0 1px var(--g-teal); }
@media (prefers-reduced-motion:reduce) { .ctn-row1, .ctn-row2 { transition:none; } .ctn-row1:active, .ctn-row2:active { transform:none; } }

/* ---- the hero ---- */
.ct-hero {
  display:grid; grid-template-columns:minmax(0, 1fr); gap:0; min-width:0; overflow:hidden;
  background:var(--ct-hero-bg); border:1px solid var(--g-line); border-radius:20px; box-shadow:var(--g-shadow);
}
.ct-hero-text { min-width:0; padding:24px 28px; display:flex; flex-direction:column; gap:10px; }
.ct-hero-eyebrow { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; font-size:13px; font-weight:700; color:var(--g-ink-3); line-height:1.7; }
.ct-hero-sec { color:var(--g-teal-ink); }
.ct-chip-s {
  display:inline-flex; align-items:center; padding:1px 9px; border-radius:99px; border:1px solid transparent;
  font-size:12px; font-weight:800; line-height:1.75; white-space:nowrap;
}
.ct-chip-s.is-soon { background:var(--ct-soon-bg); color:var(--ct-soon-ink); border:1px dashed var(--ct-soon-line); }
.ct-chip-s.is-new { background:var(--ct-new-bg); color:var(--ct-new-ink); }
.ct-chip-s.is-live { background:var(--ct-ok-bg); color:var(--ct-ok-ink); }
.ct-chip-s.is-free { background:var(--g-teal-soft); color:var(--g-teal-ink); }
.ct-chip-s.is-guide { background:var(--g-flat-soft); color:var(--g-ink-2); border-color:var(--g-line); }
.ct-hero h1 { margin:0; font-size:24px; font-weight:800; line-height:1.55; color:var(--g-ink); }
.ct-hero h1:focus { outline:none; }
.ct-hero h1:focus-visible { outline:2px solid var(--g-teal); outline-offset:3px; border-radius:6px; }
/* «اتصال کانال به متاتریدر ۴/۵»: copypacks.js's inline steps alone in sight (owner, 2026-10-20: «فقط مراحل … هیچ چیز
   دیگه نیاد»); the page's H1 stays for screen readers, the skip link and search, visually hidden (the review of 20
   October 2026). The same since ~20:40 for «کانال سیگنال شخصی» and «سازمانی» (owner: «این باکس رو کلا حذف کن — در قسمت
   سازمانی نیز همینطور»): mychannel.js's pane is their first box. */
.ct-hero.is-bare {
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; white-space:nowrap;
  clip:rect(0 0 0 0); clip-path:inset(50%); background:none; box-shadow:none;
}
/* Round 7 (owner, 22 October 2026: «این قسمت رو هم خیلی جمع و جور کن»): «آنالیز منبع سیگنال»'s hero is tight
   (build.py): the title with «فعال» on one line, one sentence, the field beside «دیدن کارنامه» (phones too) and its hint.
   The requests and their live steps stay in the pane under it, as before. */
.ct-hero.is-tight .ct-hero-text { padding:16px 22px 14px; gap:6px; }
.ct-hero-head { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-width:0; }
.ct-hero.is-tight h1 { font-size:20px; line-height:1.6; }
.ct-hero.is-tight .ct-hero-sub { font-size:14px; line-height:1.9; }
.ct-hero.is-tight .ct-hero-act { margin-top:2px; }
.ct-hero.is-tight .ct-hero-form { min-height:0; }
.ct-hero.is-tight .ct-add-form { gap:6px; max-width:720px; }
@media (max-width:1023.98px) {
  .ct-hero.is-tight .ct-hero-text { padding:14px 16px 12px; gap:6px; }
  .ct-hero.is-tight h1 { font-size:18px; }
  .ct-hero.is-tight .ct-hero-sub { font-size:13.5px; line-height:1.85; }
}
@media (max-width:480px) {
  .ct-hero.is-tight .ct-add-row { flex-direction:row; }
  .ct-hero.is-tight .ct-add-row > .ct-add-input { flex:1 1 auto; min-width:0; height:44px; }
  .ct-hero.is-tight .ct-add-submit { width:auto; padding:0 14px; }
}
.ct-hero-more { display:flex; flex-direction:column; gap:10px; }
.ct-hero-more > summary { display:none; }
.ct-hero-more:not([open]) > *:not(summary) { display:none; }
.ct-hero-sub { margin:0; font-size:15px; font-weight:600; line-height:2; color:var(--g-ink-2); }
.ct-hero-points { list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ct-hero-points li { display:flex; align-items:flex-start; gap:8px; font-size:14px; line-height:1.9; color:var(--g-ink); }
.ct-hero-points .ico { margin-top:5px; color:var(--g-up); }
.ct-hero-act { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:4px; min-width:0; }
.ct-hero-act:empty { display:none; }
.ct-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px; border-radius:12px;
  border:1px solid transparent; font:inherit; font-size:14.5px; font-weight:800; line-height:1.5; text-decoration:none; cursor:pointer;
  white-space:nowrap;
}
.ct-btn.primary { background:var(--g-teal-ink); color:#fff; }
.ct-btn.primary:hover { background:#066B78; }
:root[data-theme="dark"] .ct-btn.primary { background:var(--g-teal); color:#0B1314; }
:root[data-theme="dark"] .ct-btn.primary:hover { background:#5AEDED; }
.ct-btn.ghost { background:var(--g-card); color:var(--g-teal-ink); border-color:var(--g-teal-line); }
.ct-btn[disabled], .ct-btn[aria-disabled="true"] { background:var(--g-flat-soft); color:var(--g-ink-3); border-color:var(--g-line); cursor:not-allowed; }
.ct-link2 { display:inline-flex; align-items:center; min-height:44px; color:var(--g-teal-ink); font-size:14px; font-weight:800; text-decoration:none; }
.ct-link2:hover { text-decoration:underline; text-underline-offset:3px; }
.ct-hero-honest {
  margin:4px 0 0; display:flex; align-items:flex-start; gap:7px; padding:9px 12px; border-radius:12px;
  background:var(--ct-honest-bg); color:var(--g-ink-2); font-size:12.5px; font-weight:600; line-height:1.95;
}
.ct-hero-honest .ico { margin-top:4px; color:var(--g-amber-ink); }
.ct-hero-form { min-height:48px; min-width:0; flex:1 1 100%; }
.ct-hero-form .ct-add-form { max-width:640px; }
/* A dynamic action's place: its button is the row's own item (full width on phones, as the static ones). */
.ct-slot { display:contents; }

/* The analysis hero with requests on its list: its sentence folds away, the form stays (design §7.11). */
.ct-hero.is-busy .ct-hero-sub { display:none; }

/* The folded hero: one row, H1 + chip + «دربارهٔ این بخش ▾»; the action is the tool's. */
.ct-hero.is-folded { grid-template-columns:minmax(0, 1fr); }
.ct-hero.is-folded .ct-hero-text { padding:10px 18px; flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 12px; }
.ct-hero.is-folded .ct-hero-eyebrow { order:2; }
.ct-hero.is-folded .ct-hero-sec { display:none; }
.ct-hero.is-folded h1 { order:1; font-size:18px; }
.ct-hero.is-folded .ct-hero-more { order:3; flex:0 1 auto; margin-inline-start:auto; }
.ct-hero.is-folded .ct-hero-more[open] { flex:1 1 100%; margin-inline-start:0; }
.ct-hero.is-folded .ct-hero-more > summary {
  display:inline-flex; align-items:center; gap:4px; width:max-content; min-height:32px; list-style:none; cursor:pointer;
  color:var(--g-teal-ink); font-size:13px; font-weight:800;
}
.ct-hero.is-folded .ct-hero-more > summary::-webkit-details-marker { display:none; }
.ct-hero.is-folded .ct-hero-more[open] > summary .ico { transform:rotate(180deg); }
.ct-hero.is-folded .ct-hero-act, .ct-hero.is-folded > .ct-hero-text > .ct-hero-honest { display:none; }

/* A phone's leaf (ctnav.js and the inline script after the hero: < 768 px, not folded): the subtitle and points in a
   closed «دربارهٔ این بخش», so the tool starts on the first screen (design §5.3's budget; the review of 20 October
   2026: the ranking's channels were a screen and a half down). */
.ct-hero.is-compact .ct-hero-text { gap:8px; }
.ct-hero.is-compact .ct-hero-more > summary {
  display:inline-flex; align-items:center; gap:4px; width:max-content; min-height:36px; list-style:none; cursor:pointer;
  color:var(--g-teal-ink); font-size:13px; font-weight:800;
}
.ct-hero.is-compact .ct-hero-more > summary::-webkit-details-marker { display:none; }
.ct-hero.is-compact .ct-hero-more[open] > summary .ico { transform:rotate(180deg); }
.ct-hero.is-compact .ct-hero-act { margin-top:0; }
.ct-hero.is-compact .ct-hero-more { gap:0; }
/* Its quiet second link and the ranking's slogan are the rows' own chips and the section's tag line: not repeated here. */
.ct-hero.is-compact .ct-hero-act .ct-link2, .ct-hero.is-compact .ct-hero-sec-more { display:none; }

/* Before ctnav.js has drawn the right hero (an address that is not this file's own section), and while a source's page
   is on its way or open: no wrong hero or row is ever seen. */
html.ct-swap #ctHero { visibility:hidden; }
html.ct-src .ct-hero, html.ct-src .ctn-rows, .ct-shell.is-source .ct-hero, .ct-shell.is-source .ctn-rows { display:none; }

@media (max-width:1023.98px) {
  .ct-hero-text { padding:18px 16px; gap:8px; }
  .ct-hero h1 { font-size:20px; }
  .ct-hero-sub { font-size:14px; line-height:1.95; }
  .ct-hero-points li { font-size:13.5px; line-height:1.85; }
  .ct-hero-act .ct-btn.primary { width:100%; min-height:48px; }
  .ct-hero.is-folded .ct-hero-text { padding:10px 14px; }
}

/* ---- ctnav.js's own panes ---- */
.ct-land { display:flex; flex-direction:column; gap:14px; min-width:0; }
.ct-escape { margin:0; font-size:13.5px; font-weight:700; }
.ct-escape a { display:inline-flex; align-items:center; min-height:44px; color:var(--g-teal-ink); text-decoration:none; }
.ct-escape a:hover { text-decoration:underline; text-underline-offset:3px; }
.ct-how-blk { padding:18px 20px; background:var(--g-card); border:1px solid var(--g-line); border-radius:18px; box-shadow:var(--g-shadow); }
.ct-how-blk h2 { margin:0 0 10px; font-size:16px; font-weight:800; line-height:1.6; color:var(--g-ink); }
.ct-ready, .ct-bul { margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.ct-ready { list-style:none; }
.ct-ready li { display:flex; align-items:flex-start; gap:8px; font-size:14px; line-height:1.9; color:var(--g-ink); }
.ct-ready li .ico { margin-top:5px; }
.ct-ready li.is-ok .ico { color:var(--g-up); }
.ct-ready li.is-no { color:var(--g-ink-2); }
.ct-ready li.is-no .ico { color:var(--g-ink-3); }
.ct-bul { padding-inline-start:20px; }
.ct-bul li { font-size:14px; line-height:1.9; color:var(--g-ink); }

/* Round 7 (owner, 22 October 2026: «موارد زیر های تب هارو مثل این کام اندازه ضفحه کن», the heatmap page's block):
   #pageInfo (about, FAQ, risk) is no card in the column any more but backtest.html's own band — after the sidebar and
   the column (copytrade.template.html: div.ct-info-band, a plain wrapper ctnav.js swaps #pageInfo inside), full page
   width, site.css's .site-info rules alone (.inner 1200 px centred, an 860 px text column, its FAQ and risk box). Its
   title is an H2 here (the page's one H1 is the hero's), drawn as backtest.html's H1. */
.ct-info-band .site-info #pageInfoTitle { margin:0 0 12px; font-size:24px; line-height:1.65; }
@media (max-width:640px) { .ct-info-band .site-info #pageInfoTitle { font-size:20px; } }

/* «آنالیز منبع سیگنال»: a finished analysis is a source card (copytrade.js analysisCardHtml). */
.ct-an-card .ct-an-basis { margin-top:-4px; font-size:12px; color:var(--g-ink-3); }

/* The source page beside the sidebar: its two columns become one when the column is narrow (the viewport rule stays the fallback). */
@container ctmain (max-width:920px) {
  .ct-pf-body { grid-template-columns:minmax(0, 1fr); }
  .ct-pf-main, .ct-pf-aside { grid-column:1; grid-row:auto; }
  .ct-result-body.has-card { grid-template-columns:minmax(0, 1fr); }
}
/* «آنالیز منبع سیگنال»'s field at ≤ 480 px, where its row is a column (copytrade.css): its own 44 px height, not
   flex:1's zero basis (the review of 20 October 2026: about 20 px, its placeholder clipped). */
@media (max-width:480px) {
  .ct-add-row > .ct-add-input { flex:none; height:44px; }
}

/* ---- «برترین‌های ۷ روز اخیر» over the ranking's filters (copytrade.js renderHl; round 6 (b)). Round 7 (owner, 22
   October 2026: «در این قسمت دیگه نمودار رو نمیخواد بیاری … این دوتارو هم بردار … حالت خیلی جمع و جور»): no curve and no
   buttons on the items; one header row (title, the days, the choices), one muted paragraph, six small tiles — 3 a row
   on a wide column (≥ 940 px), 2 from 640 px, one a row below, so every name is whole beside its numbers — each a button
   that opens the source's page (as the list's rows). ---- */
.ct-hl {
  display:flex; flex-direction:column; gap:6px; min-width:0; padding:12px 16px 12px;
  background:var(--g-card); border:1px solid var(--g-line); border-radius:18px; box-shadow:var(--g-shadow);
}
.ct-hl-head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; min-width:0; }
.ct-hl-head h2 { margin:0; font-size:16px; font-weight:800; line-height:1.6; color:var(--g-ink); }
.ct-hl-range { font-size:12.5px; font-weight:700; color:var(--g-ink-3); }
.ct-hl-tabs {
  display:flex; gap:3px; padding:3px; margin-inline-start:auto; min-width:0; max-width:100%; overflow-x:auto; scrollbar-width:none;
  overscroll-behavior-x:contain; background:var(--g-flat-soft); border:1px solid var(--g-line-soft); border-radius:12px;
}
.ct-hl-tabs::-webkit-scrollbar { display:none; }
/* ct-basket: the span switch («۷ روز اخیر / امروز») takes the free space before it; the groups sit right after it. */
.ct-hl-spans + .ct-hl-tabs { margin-inline-start:0; }
.ct-hl-tab {
  flex:1 0 auto; min-height:44px; padding:0 12px; border:0; border-radius:9px; background:none; color:var(--g-ink-2);
  font:inherit; font-size:13px; font-weight:800; line-height:1.4; white-space:nowrap; cursor:pointer;
}
.ct-hl-tab:hover { color:var(--g-ink); }
.ct-hl-tab:focus-visible { outline:2px solid var(--g-teal); outline-offset:-2px; }
.ct-hl-tab[aria-pressed="true"] { background:var(--g-card); color:var(--g-teal-ink); box-shadow:0 1px 3px rgba(15,27,45,.10); }
:root[data-theme="dark"] .ct-hl-tab[aria-pressed="true"] { background:var(--g-teal-soft); box-shadow:none; }
/* A mouse: 40 px, the site's desktop floor; a touch screen keeps 44 px (the review of round 7: 36 px was too small on a tablet). */
@media (hover:hover) and (pointer:fine) { .ct-hl-tab { min-height:40px; } }
/* The choice's order and the list's terms (HL_FINE) in one muted paragraph, always in sight (the review of round 7). */
.ct-hl-sub { min-width:0; margin:0; font-size:12.5px; font-weight:600; line-height:1.75; color:var(--g-ink-3); }
.ct-hl-sub .ct-hl-dot { margin:0 2px; }
.ct-hl-fine { font-size:12px; font-weight:500; }
.ct-hl-tiles { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0, 1fr); gap:6px; min-width:0; }
@container ctmain (min-width:640px) { .ct-hl-tiles { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@container ctmain (min-width:940px) { .ct-hl-tiles { grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; } }
.ct-hl-tiles > li { display:flex; min-width:0; }
.ct-hl-tile {
  flex:1 1 auto; display:flex; align-items:center; gap:6px; min-width:0; height:50px; margin:0; padding:0 8px;
  border:1px solid var(--g-line); border-radius:12px; background:var(--g-card); color:var(--g-ink);
  font:inherit; text-align:start; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.ct-hl-tile:hover { border-color:var(--g-teal-line); background:var(--g-flat-soft); }
.ct-hl-tile:hover .ct-name-text { text-decoration:underline; text-underline-offset:3px; }
.ct-hl-tile:focus-visible { outline:2px solid var(--g-teal); outline-offset:2px; }
.ct-hl-n {
  flex:none; min-width:22px; height:22px; padding:0 6px; border-radius:99px; display:grid; place-items:center;
  background:var(--g-ink); color:var(--g-card); font-size:11.5px; font-weight:800; line-height:1;
}
.ct-hl-tile .ct-avatar { width:32px; height:32px; font-size:13px; }
/* The name on its own line (as wide as the tile allows), its days under it. */
.ct-hl-who { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; align-items:flex-start; font-size:14px; font-weight:800; line-height:1.4; unicode-bidi:isolate; }
.ct-hl-who .ct-name-text { max-width:100%; }
.ct-hl-who .ct-days { max-width:100%; overflow:hidden; text-overflow:ellipsis; font-size:11px; font-weight:700; line-height:1.4; }
.ct-hl-nums { flex:none; display:flex; flex-direction:column; align-items:flex-end; line-height:1.4; white-space:nowrap; }
.ct-hl-nums b { font-size:14px; font-weight:800; color:var(--g-ink); }
.ct-hl-nums b.up { color:var(--g-up); } .ct-hl-nums b.down { color:var(--g-down); }
.ct-hl-nums small { font-size:11px; font-weight:700; color:var(--g-ink-3); }
@container ctmain (max-width:479.98px) {
  .ct-hl { padding:12px 12px 12px; }
  .ct-hl-head h2 { font-size:15px; }
  /* Every choice in sight on a phone, its own row under the title: they share it, a long label wraps inside its 44 px button. */
  .ct-hl-tabs { flex:1 1 100%; margin-inline-start:0; }
  .ct-hl-tab { flex:1 1 0; min-height:44px; padding:2px 4px; white-space:normal; line-height:1.3; text-align:center; }
}
.ct-hl-state {
  margin:0; padding:12px 14px; border-radius:14px; background:var(--g-flat-soft); color:var(--g-ink-2);
  font-size:13.5px; font-weight:700; line-height:1.9;
}
.ct-hl-state .ct-link-inline { min-height:44px; }
/* Loading (copytrade.js hlSkeletonHtml): the ready box's rows at their own heights, so nothing under it moves. */
.ct-hl-tabs.ct-skel .ct-hl-tab { display:flex; align-items:center; justify-content:center; border-radius:9px; color:transparent; cursor:default; }
.ct-hl-tile.ct-skel { cursor:default; }
.ct-hl-tile.ct-skel .ct-avatar { background:var(--g-skeleton); }
.ct-hl-tile.ct-skel .ct-hl-who .bar { display:block; height:12px; width:70%; }
.ct-hl-tile.ct-skel .ct-hl-nums .bar { display:block; width:52px; height:30px; }

@media (prefers-reduced-motion:reduce) {
  .ct-hero.is-folded .ct-hero-more > summary .ico { transition:none; }
  html { scroll-behavior:auto; }
}

/* ---- ct-mobile-cards (the owner, 27 October 2026: «کلمه انگلیسی/فارسی/عربی رو از روی کارت‌ها بردار در حالت موبایل …
   تعداد اعضای کانال … مدت منبع جلوی اسمش داخل پرانتز فقط عدد … سیگنال در روز … ریسک به ریوارد هم در حالت موبایل نباشه
   … در حالت موبایل برترین‌ها ۳ تای برتر»). Phones only: the copy-trade pages' own phone width (copytrade.css «Phones»,
   copytrade.js wideScreen = min-width 761 px). A source card (copytrade.js cardHtml) keeps its name, avatar, rank, last
   signal, «فارکس · طلا», growth, chart, win rate, trades and buttons; it drops the language tag, the members line,
   «روز» after the days («(۹۲)»), «سیگنال در روز» (the two tiles left share the row) and any ratio on it (a pin's
   «دستی ۱:x», Crowd Clock's «ریسک‌ریوارد ثابت», a label line). A pack member's label line (copypacks.js
   memberLabelHtml) keeps its «بازگشت به …» button alone, so a pin can still be freed from the pack's details. The list
   layout (☰, copytrade.js lineHtml) the same: its line under the name without the language, «سیگنال در روز» and the
   members (.ct-sub-phone), no pin / fixed tag (its days and figure columns are hidden on phones already, copytrade.css).
   «برترین‌ها» shows its first three tiles, one a row, their days «(۱۵)» as the cards'. Wider screens: unchanged. ---- */
.ct-line .sub.ct-sub-phone { display:none; }
@media (max-width:760px) {
  .ct-card .ct-tags .ct-tag.ct-origin,
  .ct-card .ct-tags .ct-tag.ct-pin-tag,
  .ct-card .ct-tags .ct-tag.ct-fixed-tag,
  .ct-card .ct-card-rr,
  .ct-card .ct-card-id .ct-members-line,
  .ct-card .ct-days .ct-days-unit,
  .ct-hl .ct-days .ct-days-unit,
  .ct-card .ct-stats .ct-stat-daily,
  .ct-line .sub:not(.ct-sub-phone),
  .ct-line .ct-name-row .ct-tag.ct-pin-tag,
  .ct-line .ct-name-row .ct-tag.ct-fixed-tag { display:none; }
  .ct-line .sub.ct-sub-phone { display:block; }
  .ct-card .ct-stats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .ct-hl .ct-hl-tiles { grid-template-columns:minmax(0, 1fr); }
  .ct-hl .ct-hl-tiles > li:nth-child(n + 4) { display:none; }
  /* The unpin button alone (its own rules: a browser without :has keeps the whole line hidden, as above). */
  .ct-card .ct-card-rr:has(> .cp-unpin) { display:flex; }
  .ct-card .ct-card-rr:has(> .cp-unpin) > :not(.cp-unpin) { display:none; }
}