/* ============================================================
   COPY TRADING PAGE STYLES
   ------------------------------------------------------------
   The PUBLIC page (the landing page that this stylesheet shapes)
   shares the editorial language used on /membership: black hero,
   white sections, light-gray secondary panels, yellow CTA. The
   trader cards mirror the membership pricing-card pattern with
   one yellow-accented "featured" card for the top performer.
   The modals further down the file remain dark — they are
   functional trading overlays and stay visually distinct from
   the marketing page on purpose.
   ============================================================ */

/* ---- Variables ----
   The dark palette is still used by the modals further down the
   file (trader profile, copy modal, sparkline canvases inside
   modals). Surface tokens for the public page are inlined where
   they are used so the marketing layer reads cleanly without a
   theming layer. */
:root {
    --ct-bg-card: #161b23;
    --ct-bg-deep: #0d0f14;
    --ct-border: #252b35;
    --ct-text-primary: #f0f2f5;
    --ct-text-muted: #8b93a5;
    --ct-accent: #ffc014;
    --ct-accent-hover: #e6ab00;
    --ct-green: #22c55e;
    --ct-red: #ef4444;
    --ct-radius: 12px;
}

/* ============================================================
   PAGE SHELL — light scaffold so all white sections sit on a
   subtle cool gray, identical to /membership.
   ============================================================ */
.ct-page {
    background: #f8f9fa;
    min-height: 100vh;
    font-family: inter, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: #111827;
}

.ct-page .container {
    max-width: 1280px;
    margin: 0 auto;
}

.ct-page .section-header {
    text-align: center;
    margin-bottom: 48px;
}
.ct-page .section-header h2 {
    font-size: 36px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}
.ct-page .section-header p {
    color: #6B7280;
    font-size: 16px;
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ============================================================
   HERO — moody photo background (Bitcoin coin stack on dark wood)
   The original 5806×3266 photo was pre-cropped/compressed to
   1920×1080 (~118 KB). The image is anchored to bottom-center
   so the coin stacks sit in the lower-right of the hero, the
   headline lands on the dark sky area at the top, and the
   wood-floor texture continues into the bottom of the section.
   The dark gradient is intentionally subtle — just enough to
   keep white type crisp without overpowering the photo.
   ============================================================ */
.ct-page .hero {
    /* Two layers only: a soft top-down darkening for headline
       legibility, and the photo underneath. No tinted accent —
       the image stays its natural grayscale tone. */
    background-image:
        linear-gradient(180deg, rgba(8,8,12,0.50) 0%, rgba(8,8,12,0.15) 50%, rgba(8,8,12,0.08) 100%),
        url('../img/ct-hero.jpg');
    background-color: #08080c;
    background-size: cover, cover;
    background-position: center top, center bottom;
    background-repeat: no-repeat, no-repeat;
    padding: 96px 24px 120px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
/* Bottom fade so the hero blends into the white stats strip
   without a hard edge. */
.ct-page .hero::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 120px;
    background: linear-gradient(180deg, transparent 0%, rgba(8,8,12,0.55) 100%);
    pointer-events: none;
}
.ct-page .hero::after {
    content: '';
    position: absolute;
    bottom: -160px;
    left: -120px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
    pointer-events: none;
}
.ct-page .hero-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.ct-page .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 192, 20, 0.12);
    color: #ffc014;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 192, 20, 0.25);
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.ct-page .hero-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffc014;
    box-shadow: 0 0 0 4px rgba(255,192,20,0.2);
    animation: ct-pulse 1.6s ease-in-out infinite;
}
.ct-page .hero h1 {
    color: #fff;
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 18px;
    letter-spacing: -1px;
    line-height: 1.1;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.ct-page .hero p {
    color: #D1D5DB;
    font-size: 18px;
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.6;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
@keyframes ct-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255,192,20,0.18); }
    50%      { box-shadow: 0 0 0 8px rgba(255,192,20,0.04); }
}

/* ============================================================
   STATS STRIP — overlaps the hero/body junction with four white
   tiles. Numbers stream in from /api/copy-trading/stats every
   few seconds; the small "Live" pulse at the bottom makes the
   ticking visible.
   ============================================================ */
.ct-page .stats-strip {
    padding: 0 24px;
    margin-top: -64px;
    position: relative;
    z-index: 2;
}
.ct-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}
.ct-page .stat-tile {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 12px 32px -16px rgba(8, 8, 12, 0.18);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.ct-page .stat-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px -16px rgba(8, 8, 12, 0.25);
}
.ct-page .stat-tile__value {
    font-size: 30px;
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
    transition: color .25s ease;
}
.ct-page .stat-tile[data-flash="true"] .stat-tile__value {
    color: #F5A623;
}
.ct-page .stat-tile__label {
    font-size: 11.5px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.ct-page .stats-strip__pulse {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #6B7280;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
}
.ct-page .stats-strip__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22a06b;
    box-shadow: 0 0 0 4px rgba(34,160,107,0.18);
    animation: ct-pulse-green 1.6s ease-in-out infinite;
}
@keyframes ct-pulse-green {
    0%, 100% { box-shadow: 0 0 0 4px rgba(34,160,107,0.18); }
    50%      { box-shadow: 0 0 0 8px rgba(34,160,107,0.04); }
}

/* ============================================================
   TRADERS SECTION — white background, membership-style header,
   pricing-grid layout with white cards.
   ============================================================ */
.ct-page .traders-section {
    padding: 80px 24px 100px;
    background: #fff;
}

/* ---- Toolbar (filters / sort / search) ---- */
.ct-page .ct-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 12px;
}
.ct-page .ct-toolbar__group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.ct-page .ct-toolbar__group--right { gap: 10px; }
.ct-page .ct-toolbar__label {
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.ct-page .ct-chip-group {
    display: inline-flex;
    background: #F3F4F6;
    border-radius: 999px;
    padding: 4px;
}
.ct-page .ct-chip {
    appearance: none;
    border: none;
    background: transparent;
    color: #4B5563;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .2s, color .2s;
    font-family: inherit;
}
.ct-page .ct-chip:hover { color: #111827; }
.ct-page .ct-chip.is-active {
    background: #08080c;
    color: #fff;
    box-shadow: 0 4px 12px -2px rgba(8, 8, 12, 0.25);
}
.ct-page .ct-chip__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.ct-page .ct-chip__dot--low    { background: #22a06b; }
.ct-page .ct-chip__dot--medium { background: #e0a83e; }
.ct-page .ct-chip__dot--high   { background: #c8442a; }

.ct-page .ct-select {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 12px center;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 9px 36px 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s;
}
.ct-page .ct-select:hover { border-color: #9CA3AF; }
.ct-page .ct-select:focus { outline: none; border-color: #F5A623; }

.ct-page .ct-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.ct-page .ct-search__icon {
    position: absolute;
    left: 12px;
    width: 14px;
    height: 14px;
    color: #9CA3AF;
    pointer-events: none;
}
.ct-page .ct-search input {
    width: 220px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    padding: 9px 16px 9px 34px;
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    transition: border-color .2s, box-shadow .2s;
    font-family: inherit;
}
.ct-page .ct-search input::placeholder { color: #9CA3AF; }
.ct-page .ct-search input:focus {
    outline: none;
    border-color: #F5A623;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15);
}

.ct-page .ct-results-info {
    font-size: 13px;
    color: #6B7280;
    margin: 16px 4px 20px;
}
.ct-page .ct-results-info span {
    color: #111827;
    font-weight: 700;
}

/* ============================================================
   TRADER GRID — pricing-grid layout for parity with membership
   ============================================================ */
.ct-page .ct-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
    /* Leave breathing room for the floating "TOP PERFORMER" badge that
       hangs above the featured card on the first row. */
    padding-top: 14px;
}
.ct-page .pricing-grid {
    /* Override the generic 4-col membership rule on this page:
       trader cards are denser than pricing cards. */
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) {
    .ct-page .ct-grid,
    .ct-page .pricing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .ct-page .ct-grid,
    .ct-page .pricing-grid { grid-template-columns: 1fr; }
}

/* Loading state */
.ct-page .ct-grid__loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: #6B7280;
}
.ct-page .ct-grid__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #F3F4F6;
    border-top-color: #F5A623;
    border-radius: 50%;
    margin: 0 auto 14px;
    animation: ct-spin 0.9s linear infinite;
}
@keyframes ct-spin { to { transform: rotate(360deg); } }

/* ============================================================
   TRADER CARD — white default, one .featured (yellow accent)
   ============================================================ */
.ct-page .ct-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    /* `overflow: visible` lets the .ct-card__featured-badge hang above the
       top edge of the card. The sparkline canvas below clips itself, so
       nothing else needs the card to clip. */
    overflow: visible;
    transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1), border-color .25s, box-shadow .25s;
    display: flex;
    flex-direction: column;
    position: relative;
}
.ct-page .ct-card:hover {
    transform: translateY(-6px);
    border-color: #D1D5DB;
    box-shadow: 0 18px 38px -16px rgba(8, 8, 12, 0.18);
}
.ct-page .ct-card.featured {
    border-color: #F5A623;
    box-shadow: 0 12px 32px -8px rgba(245, 166, 35, 0.25);
}
.ct-page .ct-card.featured:hover {
    box-shadow: 0 24px 48px -12px rgba(245, 166, 35, 0.32);
}
.ct-page .ct-card__featured-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #F5A623;
    color: #1A1A1A;
    padding: 5px 16px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.4);
    z-index: 2;
}

.ct-card__top {
    padding: 24px 22px 18px;
}
.ct-card__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.ct-avatar {
    position: relative;
    flex-shrink: 0;
}
.ct-avatar__circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1f2230 0%, #2d3142 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    border: 2px solid transparent;
    transition: border-color 0.2s;
}
.ct-avatar__circle.level-2 { border-color: #22a06b; }
.ct-avatar__circle.level-3 { border-color: #5b8def; }
.ct-avatar__circle.level-4 { border-color: #9b6dd9; }
.ct-avatar__circle.level-5 { border-color: #F5A623; }

.ct-avatar__flag {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 16px;
    line-height: 1;
}
.ct-avatar__online {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #22a06b;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
}

.ct-card__info { flex: 1; min-width: 0; }
.ct-card__name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 3px;
}
.ct-card__name {
    font-size: 15.5px;
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
}
.ct-verified-icon {
    color: #5b8def;
    font-size: 15px;
    flex-shrink: 0;
}
.ct-card__strategy {
    font-size: 12.5px;
    color: #6B7280;
    margin-bottom: 8px;
    font-weight: 500;
}

.ct-card__badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.ct-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #E5E7EB;
    background: #F9FAFB;
    color: #4B5563;
    line-height: 1.4;
}
.ct-badge--low::before,
.ct-badge--medium::before,
.ct-badge--high::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.ct-badge--low    { color: #1f7a52; background: #ecfdf5; border-color: #c6f0db; }
.ct-badge--low::before    { background: #22a06b; }
.ct-badge--medium { color: #8a5a14; background: #fff8ec; border-color: #f3e2bc; }
.ct-badge--medium::before { background: #e0a83e; }
.ct-badge--high   { color: #952c19; background: #fff0ec; border-color: #f4cfc1; }
.ct-badge--high::before   { background: #c8442a; }

.ct-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}
.ct-star { color: #F5A623; font-size: 13px; }
.ct-card__rating-val { font-size: 12px; color: #111827; font-weight: 700; margin-left: 2px; }
.ct-card__rating-count { font-size: 11px; color: #9CA3AF; }

/* ---- Sparkline canvas ---- */
.ct-sparkline-wrap {
    height: 56px;
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
    background: #F9FAFB;
    border: 1px solid #F3F4F6;
    padding: 6px;
}
.ct-sparkline-canvas {
    width: 100%;
    height: 100%;
}

/* ---- Stats row inside the card ---- */
.ct-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.ct-stat {
    background: #F9FAFB;
    border: 1px solid #F3F4F6;
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
}
.ct-stat__val {
    font-size: 17px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 2px;
    letter-spacing: -0.3px;
    font-variant-numeric: tabular-nums;
}
.ct-stat__val.green  { color: #1f7a52; }
.ct-stat__val.red    { color: #952c19; }
.ct-stat__val.accent { color: #F5A623; }
.ct-stat__label {
    font-size: 10.5px;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}

/* ---- Copiers strip at bottom of card body ---- */
.ct-copiers-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F9FAFB;
    border: 1px solid #F3F4F6;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 13px;
}
.ct-copiers-bar__icon {
    color: #6B7280;
    font-size: 16px;
}
.ct-copiers-bar__count {
    color: #111827;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ct-copiers-bar__label {
    color: #6B7280;
    font-weight: 500;
}
.ct-copiers-bar__online {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 600;
    color: #1f7a52;
    display: flex;
    align-items: center;
    gap: 5px;
}
.ct-copiers-bar__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22a06b;
    box-shadow: 0 0 0 3px rgba(34, 160, 107, 0.18);
}

/* ---- Action buttons in the card footer ---- */
.ct-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 22px 22px;
}
.ct-btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    transition: transform .15s ease, background-color .2s, color .2s, border-color .2s, box-shadow .2s;
    font-family: inherit;
}
.ct-btn:active { transform: translateY(1px); }
.ct-btn--copy {
    background: #08080c;
    color: #fff;
    border-color: #08080c;
}
.ct-btn--copy:hover {
    background: #1F2937;
    box-shadow: 0 6px 18px -6px rgba(8, 8, 12, 0.4);
}
.ct-page .ct-card.featured .ct-btn--copy {
    background: #F5A623;
    color: #1A1A1A;
    border-color: #F5A623;
}
.ct-page .ct-card.featured .ct-btn--copy:hover {
    background: #E09000;
    border-color: #E09000;
    box-shadow: 0 6px 18px -4px rgba(245, 166, 35, 0.4);
}
.ct-btn--copy.already-copying {
    background: #F3F4F6;
    color: #6B7280;
    border-color: #E5E7EB;
    cursor: default;
}
.ct-btn--profile {
    background: #fff;
    color: #111827;
    border-color: #E5E7EB;
}
.ct-btn--profile:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
}

/* ---- No results placeholder ---- */
.ct-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    color: #6B7280;
}
.ct-no-results i {
    font-size: 48px;
    margin-bottom: 12px;
    display: block;
    color: #D1D5DB;
}

/* ---- Risk / info notice (replaces the dark .ct-risk-banner) ---- */
.ct-page .ct-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff8ec;
    border: 1px solid #f3e2bc;
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 32px;
    color: #7a5b1b;
    font-size: 13.5px;
    line-height: 1.6;
}
.ct-page .ct-notice strong { color: #5e4413; }
.ct-page .ct-notice__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #b3863f;
    margin-top: 1px;
}

/* "Already copying? Open dashboard" link */
.ct-page .ct-manage-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    background: #08080c;
    color: #fff;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, transform .15s;
}
.ct-page .ct-manage-link:hover { background: #1F2937; transform: translateY(-1px); }
.ct-page .ct-manage-link svg { width: 14px; height: 14px; }

/* ============================================================
   HOW IT WORKS — light-gray section, three numbered tiles
   ============================================================ */
.ct-page .how-section {
    padding: 80px 24px;
    background: #F9FAFB;
}
.ct-page .how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
.ct-page .how-tile {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 32px 28px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.ct-page .how-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -16px rgba(8, 8, 12, 0.15);
}
.ct-page .how-tile__num {
    font-size: 56px;
    font-weight: 800;
    color: #F5A623;
    line-height: 1;
    margin-bottom: 18px;
    letter-spacing: -2px;
}
.ct-page .how-tile h3 {
    font-size: 19px;
    font-weight: 700;
    color: #111827;
    margin: 0 0 10px;
    letter-spacing: -0.3px;
}
.ct-page .how-tile p {
    font-size: 14px;
    color: #6B7280;
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 900px) {
    .ct-page .how-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FAQ — the .ico-faq-* class set originally lives in membership.css;
   we don't want to load that whole stylesheet here (it would clash
   with the trader-card layout) so the rules are inlined and
   page-scoped. The accordion behaviour is driven by the inline
   toggleFaq() defined in copy-trading.html.
   ============================================================ */
.ct-page .faq-section {
    background: #fff;
    border-top: 1px solid #F3F4F6;
}
.ct-page .questions {
    padding: 60px 24px;
    max-width: 800px;
    margin: 0 auto;
}
.ct-page .questions-earn-title {
    font-size: 32px;
    font-weight: 700;
    color: #08080c;
    text-align: center;
    margin-bottom: 32px;
    letter-spacing: -0.5px;
}
.ct-page .ico-faq-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ct-page .ico-faq-item {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(8, 8, 12, 0.04);
    transition: box-shadow .2s, border-color .2s;
}
.ct-page .ico-faq-item:hover {
    border-color: #D1D5DB;
    box-shadow: 0 6px 16px rgba(8, 8, 12, 0.06);
}
.ct-page .ico-faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    background: #fff;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    text-align: left;
    transition: background .2s, color .2s;
    font-family: inherit;
}
.ct-page .ico-faq-question:hover { background: #FAFAFA; }
.ct-page .ico-faq-question.active {
    color: #08080c;
    background: #FAFAFA;
}
.ct-page .ico-faq-question span {
    flex: 1;
    padding-right: 16px;
}
.ct-page .ico-faq-icon {
    font-size: 18px;
    color: #6B7280;
    transition: transform .25s ease, color .25s;
    flex-shrink: 0;
}
.ct-page .ico-faq-question.active .ico-faq-icon,
.ct-page .ico-faq-item.active .ico-faq-icon {
    transform: rotate(180deg);
    color: #F5A623;
}
.ct-page .ico-faq-answer {
    padding: 0 22px 18px;
    background: #fff;
    border-top: 1px solid #F3F4F6;
    padding-top: 16px;
}
.ct-page .ico-faq-answer p {
    margin: 0;
    color: #4B5563;
    font-size: 14px;
    line-height: 1.7;
}
.ct-page .ico-faq-answer a {
    color: #B3863F;
    text-decoration: underline;
    font-weight: 600;
}
.ct-page .ico-faq-answer a:hover { color: #8a5a14; }

/* ============================================================
   CTA — full-yellow section with rising arrows, identical to
   the close on /membership.
   ============================================================ */
.ct-page .cta-section {
    padding: 100px 24px;
    background-color: #F5A623;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.ct-page .cta-arrows {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.ct-page .arrow-up {
    position: absolute;
    bottom: -40px;
    opacity: 0;
    animation: ctArrowRise 5s ease-out infinite;
}
.ct-page .arrow-up svg {
    width: 24px;
    height: 24px;
    stroke: rgba(213, 149, 20, 0.6);
    stroke-width: 2;
    fill: none;
}
.ct-page .arrow-up:nth-child(1)  { left: 8%;  animation-delay: 0s; }
.ct-page .arrow-up:nth-child(2)  { left: 16%; animation-delay: 0.8s; }
.ct-page .arrow-up:nth-child(3)  { left: 24%; animation-delay: 1.6s; }
.ct-page .arrow-up:nth-child(4)  { left: 32%; animation-delay: 0.4s; }
.ct-page .arrow-up:nth-child(5)  { left: 40%; animation-delay: 2s; }
.ct-page .arrow-up:nth-child(6)  { left: 50%; animation-delay: 1.2s; }
.ct-page .arrow-up:nth-child(7)  { left: 60%; animation-delay: 0.6s; }
.ct-page .arrow-up:nth-child(8)  { left: 68%; animation-delay: 1.8s; }
.ct-page .arrow-up:nth-child(9)  { left: 76%; animation-delay: 0.2s; }
.ct-page .arrow-up:nth-child(10) { left: 84%; animation-delay: 1.4s; }
.ct-page .arrow-up:nth-child(11) { left: 92%; animation-delay: 2.2s; }
@keyframes ctArrowRise {
    0%   { transform: translateY(0);    opacity: 0; }
    10%  { opacity: 0.7; }
    70%  { opacity: 0.5; }
    100% { transform: translateY(-350px); opacity: 0; }
}
.ct-page .cta-content {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.ct-page .cta-section h2 {
    font-size: 36px;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}
.ct-page .cta-section p {
    font-size: 17px;
    color: #1A1A1A;
    opacity: 0.75;
    margin-bottom: 36px;
    line-height: 1.6;
}
.ct-page .cta-btn,
.ct-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 36px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background-color: #1A1A1A;
    color: #fff;
    transition: transform .2s ease, background-color .2s, box-shadow .2s;
}
.ct-page .cta-btn:hover,
.ct-page .btn:hover {
    background-color: #1F2937;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 26, 26, 0.3);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .ct-page .hero h1 { font-size: 40px; }
    .ct-page .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .ct-page .stat-tile__value { font-size: 26px; }
}
@media (max-width: 768px) {
    .ct-page .hero { padding: 64px 24px 90px; }
    .ct-page .hero h1 { font-size: 32px; letter-spacing: -0.5px; }
    .ct-page .hero p { font-size: 15px; }
    .ct-page .section-header h2 { font-size: 26px; }
    .ct-page .traders-section { padding: 60px 20px 80px; }
    .ct-page .ct-toolbar { flex-direction: column; align-items: stretch; }
    .ct-page .ct-toolbar__group { justify-content: flex-start; }
    .ct-page .ct-search input { width: 100%; }
    .ct-page .cta-section h2 { font-size: 26px; }
    .ct-page .cta-section { padding: 70px 20px; }
}
@media (max-width: 600px) {
    .ct-page .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .ct-page .stat-tile { padding: 16px 14px; }
    .ct-page .stat-tile__value { font-size: 22px; }
    .ct-page .stat-tile__label { font-size: 10.5px; }
}

/* ---- Hero section ---- */
.ct-hero {
    background: linear-gradient(135deg, #0d0f14 0%, #161b23 50%, #1a2030 100%);
    border-bottom: 1px solid var(--ct-border);
    padding: 48px 0 36px;
    position: relative;
    overflow: hidden;
}

.ct-hero::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,192,20,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.ct-hero__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.ct-hero__title {
    font-size: 32px;
    font-weight: 700;
    color: var(--ct-text-primary);
    margin: 0 0 8px;
    line-height: 1.2;
}

.ct-hero__title span {
    color: var(--ct-accent);
}

.ct-hero__subtitle {
    font-size: 15px;
    color: var(--ct-text-muted);
    margin: 0;
    max-width: 520px;
    line-height: 1.6;
}

.ct-hero__stats {
    display: flex;
    gap: 32px;
    flex-shrink: 0;
}

.ct-hero__stat {
    text-align: center;
}

.ct-hero__stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--ct-accent);
    line-height: 1.2;
}

.ct-hero__stat-label {
    font-size: 12px;
    color: var(--ct-text-muted);
    margin-top: 2px;
}

/* ---- Main container ---- */
.ct-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* ---- Filters bar ---- */
.ct-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
    background: var(--ct-bg-card);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius);
    padding: 16px 20px;
}

.ct-filters__label {
    font-size: 13px;
    color: var(--ct-text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.ct-filter-group {
    display: flex;
    gap: 6px;
    align-items: center;
}

.ct-filter-btn {
    background: transparent;
    border: 1px solid var(--ct-border);
    border-radius: 8px;
    color: var(--ct-text-muted);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    padding: 7px 14px;
    transition: all 0.2s;
    font-family: inter, sans-serif;
    white-space: nowrap;
}

.ct-filter-btn:hover {
    border-color: rgba(255,192,20,0.4);
    color: var(--ct-text-primary);
}

.ct-filter-btn.active {
    background: rgba(255,192,20,0.12);
    border-color: var(--ct-accent);
    color: var(--ct-accent);
}

.ct-filter-btn.low-risk.active { background: rgba(34,197,94,0.12); border-color: #22c55e; color: #22c55e; }
.ct-filter-btn.medium-risk.active { background: rgba(234,179,8,0.12); border-color: #eab308; color: #eab308; }
.ct-filter-btn.high-risk.active { background: rgba(239,68,68,0.12); border-color: #ef4444; color: #ef4444; }

.ct-filters__divider {
    width: 1px;
    height: 28px;
    background: var(--ct-border);
    flex-shrink: 0;
}

.ct-filter-select {
    background: var(--ct-bg-deep);
    border: 1px solid var(--ct-border);
    border-radius: 8px;
    color: var(--ct-text-primary);
    font-size: 13px;
    font-family: inter, sans-serif;
    padding: 7px 14px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

.ct-filter-select:focus {
    border-color: var(--ct-accent);
}

.ct-search {
    margin-left: auto;
    position: relative;
}

.ct-search input {
    background: var(--ct-bg-deep);
    border: 1px solid var(--ct-border);
    border-radius: 8px;
    color: var(--ct-text-primary);
    font-size: 13px;
    font-family: inter, sans-serif;
    padding: 8px 14px 8px 36px;
    outline: none;
    width: 220px;
    transition: border-color 0.2s;
}

.ct-search input:focus {
    border-color: var(--ct-accent);
}

.ct-search input::placeholder {
    color: var(--ct-text-muted);
}

.ct-search__icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ct-text-muted);
    font-size: 16px;
}

/* ---- Results count ---- */
.ct-results-info {
    font-size: 13px;
    color: var(--ct-text-muted);
    margin-bottom: 16px;
}

.ct-results-info span {
    color: var(--ct-text-primary);
    font-weight: 600;
}

/* ---- Traders grid ---- */
.ct-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 20px;
}

/* ---- Trader Card ---- */
.ct-card {
    background: var(--ct-bg-card);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius);
    overflow: hidden;
    transition: border-color 0.25s, transform 0.2s;
    cursor: default;
    display: flex;
    flex-direction: column;
}

.ct-card:hover {
    border-color: rgba(255,192,20,0.35);
    transform: translateY(-2px);
}

.ct-card__top {
    padding: 20px 20px 16px;
}

.ct-card__header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.ct-avatar {
    position: relative;
    flex-shrink: 0;
}

.ct-avatar__circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--ct-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--ct-text-primary);
    border: 2px solid transparent;
    transition: border-color 0.2s;
}

.ct-avatar__circle.level-4 { border-color: #a78bfa; }
.ct-avatar__circle.level-5 { border-color: #f59e0b; }
.ct-avatar__circle.level-3 { border-color: #60a5fa; }
.ct-avatar__circle.level-2 { border-color: #34d399; }

.ct-avatar__flag {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 16px;
    line-height: 1;
}

.ct-avatar__online {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ct-green);
    border: 2px solid var(--ct-bg-card);
}

.ct-card__info {
    flex: 1;
    min-width: 0;
}

.ct-card__name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.ct-card__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ct-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-verified-icon {
    color: #60a5fa;
    font-size: 15px;
    flex-shrink: 0;
}

.ct-card__strategy {
    font-size: 12px;
    color: var(--ct-text-muted);
    margin-bottom: 6px;
}

.ct-card__badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ct-badge {
    padding: 2px 8px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
}

.ct-badge--low { background: rgba(34,197,94,0.12); color: #22c55e; border-color: rgba(34,197,94,0.25); }
.ct-badge--medium { background: rgba(234,179,8,0.12); color: #eab308; border-color: rgba(234,179,8,0.25); }
.ct-badge--high { background: rgba(239,68,68,0.12); color: #ef4444; border-color: rgba(239,68,68,0.25); }

.ct-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

.ct-star { color: var(--ct-accent); font-size: 13px; }
.ct-card__rating-val { font-size: 12px; color: var(--ct-text-primary); font-weight: 600; }
.ct-card__rating-count { font-size: 11px; color: var(--ct-text-muted); }

/* ---- Sparkline canvas ---- */
.ct-sparkline-wrap {
    height: 56px;
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ct-bg-deep);
    padding: 6px;
}

.ct-sparkline-canvas {
    width: 100%;
    height: 100%;
}

/* ---- Stats row ---- */
.ct-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.ct-stat {
    background: var(--ct-bg-deep);
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
}

.ct-stat__val {
    font-size: 16px;
    font-weight: 700;
    color: var(--ct-text-primary);
    line-height: 1.2;
}

.ct-stat__val.green { color: var(--ct-green); }
.ct-stat__val.red { color: var(--ct-red); }
.ct-stat__val.accent { color: var(--ct-accent); }

.ct-stat__label {
    font-size: 11px;
    color: var(--ct-text-muted);
    margin-top: 2px;
}

/* ---- Copiers bar ---- */
.ct-copiers-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.ct-copiers-bar__icon {
    color: var(--ct-text-muted);
    font-size: 14px;
}

.ct-copiers-bar__count {
    font-size: 13px;
    font-weight: 600;
    color: var(--ct-text-primary);
}

.ct-copiers-bar__label {
    font-size: 12px;
    color: var(--ct-text-muted);
}

.ct-copiers-bar__online {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--ct-green);
    font-weight: 500;
}

.ct-copiers-bar__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ct-green);
}

/* ---- Card actions ---- */
.ct-card__actions {
    padding: 0 20px 20px;
    display: flex;
    gap: 10px;
}

.ct-btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    font-family: inter, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.ct-btn--copy {
    background: var(--ct-accent);
    color: #0d0f14;
    border-color: var(--ct-accent);
}

.ct-btn--copy:hover {
    background: var(--ct-accent-hover);
    border-color: var(--ct-accent-hover);
}

.ct-btn--copy.already-copying {
    background: rgba(34,197,94,0.15);
    color: var(--ct-green);
    border-color: var(--ct-green);
    cursor: default;
}

.ct-btn--profile {
    background: transparent;
    color: var(--ct-text-primary);
    border-color: var(--ct-border);
}

.ct-btn--profile:hover {
    border-color: rgba(255,192,20,0.4);
    color: var(--ct-accent);
}

/* ---- No results ---- */
.ct-no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--ct-text-muted);
    grid-column: 1 / -1;
}

.ct-no-results i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    opacity: 0.4;
}

/* ---- Risk banner ---- */
.ct-risk-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255,192,20,0.05);
    border: 1px solid rgba(255,192,20,0.2);
    border-radius: var(--ct-radius);
    padding: 16px 20px;
    margin-top: 32px;
}

.ct-risk-banner__icon {
    color: var(--ct-accent);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ct-risk-banner__text {
    font-size: 13px;
    color: var(--ct-text-muted);
    line-height: 1.6;
    margin: 0;
}

.ct-risk-banner--spaced { margin-top: 24px; }

/* ================================================================
   MODALS
   ================================================================ */

.ct-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
    font-family: inter, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ct-modal-overlay.hidden { display: none; }

.ct-modal {
    background: var(--ct-bg-card);
    border: 1px solid var(--ct-border);
    border-radius: 16px;
    width: 100%;
    box-shadow: 0 25px 60px rgba(0,0,0,0.6);
    position: relative;
    margin: auto;
}

.ct-modal--copy { max-width: 520px; }
.ct-modal--profile { max-width: 680px; }

.ct-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ct-border);
    border: none;
    color: var(--ct-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: color 0.2s;
    font-family: inherit;
    z-index: 1;
}

.ct-modal__close:hover { color: var(--ct-text-primary); }

.ct-modal__hdr {
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--ct-border);
}

.ct-modal__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ct-text-primary);
    margin: 0 0 3px;
    padding-right: 40px;
}

.ct-modal__subtitle {
    font-size: 13px;
    color: var(--ct-text-muted);
    margin: 0;
}

/* Copy modal stats summary */
.ct-copy-stats {
    display: flex;
    gap: 0;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ct-border);
}

.ct-copy-stat {
    flex: 1;
    text-align: center;
    padding: 0 12px;
    border-right: 1px solid var(--ct-border);
}

.ct-copy-stat:last-child { border-right: none; }

.ct-copy-stat__val {
    font-size: 17px;
    font-weight: 700;
    color: var(--ct-text-primary);
    line-height: 1.2;
}

.ct-copy-stat__val.green { color: var(--ct-green); }

.ct-copy-stat__lbl {
    font-size: 11px;
    color: var(--ct-text-muted);
    margin-top: 2px;
}

/* Copy modal body */
.ct-modal__body {
    padding: 20px;
}

.ct-form-label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 500;
    color: var(--ct-text-primary);
    margin-bottom: 8px;
}

.ct-form-label__hint {
    color: var(--ct-text-muted);
    font-weight: 400;
}

.ct-input-wrap {
    position: relative;
    margin-bottom: 14px;
}

.ct-input-prefix {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ct-text-muted);
    font-size: 14px;
    pointer-events: none;
}

.ct-input {
    width: 100%;
    box-sizing: border-box;
    background: #1e2430;
    border: 1px solid var(--ct-border);
    border-radius: 8px;
    color: var(--ct-text-primary);
    font-size: 14px;
    font-family: inter, sans-serif;
    padding: 10px 14px 10px 28px;
    outline: none;
    transition: border-color 0.2s;
}

.ct-input:focus { border-color: var(--ct-accent); }
.ct-input::placeholder { color: var(--ct-text-muted); }

.ct-input--nopfx {
    padding-left: 14px;
}

.ct-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.ct-preset {
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid var(--ct-border);
    background: transparent;
    color: var(--ct-text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inter, sans-serif;
}

.ct-preset:hover { border-color: rgba(255,192,20,0.4); color: var(--ct-text-primary); }
.ct-preset.active { background: rgba(255,192,20,0.12); border-color: var(--ct-accent); color: var(--ct-accent); }

.ct-estimated {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(34,197,94,0.06);
    border: 1px solid rgba(34,197,94,0.2);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--ct-text-primary);
}

.ct-estimated i { color: var(--ct-green); }
.ct-estimated strong { color: var(--ct-green); }
.ct-estimated__sub { font-size: 11px; color: var(--ct-text-muted); }

.ct-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #1e2430;
    border: 1px solid var(--ct-border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

.ct-toggle-row__text { }
.ct-toggle-row__title { font-size: 13px; font-weight: 500; color: var(--ct-text-primary); }
.ct-toggle-row__sub { font-size: 11px; color: var(--ct-text-muted); margin-top: 2px; }

.ct-toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.ct-toggle input { opacity: 0; width: 0; height: 0; }

.ct-toggle__slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--ct-border);
    border-radius: 24px;
    transition: background 0.2s;
}

.ct-toggle__slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    bottom: 3px;
    left: 3px;
    transition: transform 0.2s;
}

.ct-toggle input:checked + .ct-toggle__slider { background: var(--ct-accent); }
.ct-toggle input:checked + .ct-toggle__slider::before { transform: translateX(20px); }

/* Step indicator */
.ct-steps {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    border-top: 1px solid var(--ct-border);
}

.ct-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ct-border);
    transition: background 0.2s;
}

.ct-step-dot.active { background: var(--ct-accent); }

/* Form actions */
.ct-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.ct-btn--primary {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    background: var(--ct-accent);
    color: #0d0f14;
    border: none;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inter, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ct-btn--primary:hover { background: var(--ct-accent-hover); }
.ct-btn--primary:disabled { opacity: 0.4; cursor: not-allowed; }

.ct-btn--secondary {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    background: transparent;
    color: var(--ct-text-primary);
    border: 1px solid var(--ct-border);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s;
    font-family: inter, sans-serif;
}

.ct-btn--secondary:hover { border-color: rgba(255,192,20,0.4); }

/* Summary box */
.ct-summary {
    background: var(--ct-bg-deep);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 14px;
}

.ct-summary__title {
    font-size: 12px;
    color: var(--ct-text-muted);
    font-weight: 500;
    margin-bottom: 10px;
}

.ct-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
}

.ct-summary__row:last-child { margin-bottom: 0; }
.ct-summary__key { color: var(--ct-text-muted); }
.ct-summary__val { color: var(--ct-text-primary); font-weight: 500; }
.ct-summary__val.red { color: var(--ct-red); }
.ct-summary__val.green { color: var(--ct-green); }

/* Warning */
.ct-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(255,192,20,0.05);
    border: 1px solid rgba(255,192,20,0.25);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--ct-text-muted);
    line-height: 1.6;
}

.ct-warning i { color: var(--ct-accent); flex-shrink: 0; margin-top: 1px; }

/* Checkbox */
.ct-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    cursor: pointer;
}

.ct-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 1px;
    accent-color: var(--ct-accent);
    flex-shrink: 0;
    cursor: pointer;
}

.ct-checkbox-row__text {
    font-size: 12px;
    color: var(--ct-text-muted);
    line-height: 1.5;
}

.ct-checkbox-row__text a { color: var(--ct-accent); text-decoration: none; }
.ct-checkbox-row__text a:hover { text-decoration: underline; }

/* ================================================================
   PROFILE MODAL
   ================================================================ */

.ct-profile-hdr {
    padding: 20px;
    border-bottom: 1px solid var(--ct-border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ct-profile-avatar-section {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

.ct-profile-avatar {
    position: relative;
    flex-shrink: 0;
}

.ct-profile-avatar-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ct-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--ct-text-primary);
    border: 3px solid transparent;
}

.ct-profile-avatar-circle.level-5 { border-color: #f59e0b; }
.ct-profile-avatar-circle.level-4 { border-color: #a78bfa; }
.ct-profile-avatar-circle.level-3 { border-color: #60a5fa; }

.ct-profile-flag {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 20px;
    line-height: 1;
}

.ct-profile-online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ct-green);
    border: 2px solid var(--ct-bg-card);
}

.ct-profile-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--ct-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.ct-profile-id { font-size: 12px; color: var(--ct-text-muted); margin-bottom: 6px; }
.ct-profile-meta { font-size: 12px; color: var(--ct-text-muted); display: flex; gap: 12px; flex-wrap: wrap; }

.ct-profile-meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.ct-profile-meta-tag {
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
}

.ct-profile-stats-hdr {
    display: flex;
    gap: 12px;
    text-align: right;
}

.ct-profile-hdr-stat__val { font-size: 17px; font-weight: 700; color: var(--ct-text-primary); }
.ct-profile-hdr-stat__lbl { font-size: 11px; color: var(--ct-text-muted); }

/* Profile bio */
.ct-profile-bio {
    padding: 14px 20px;
    border-bottom: 1px solid var(--ct-border);
    font-size: 13px;
    color: var(--ct-text-muted);
    line-height: 1.6;
}

/* Profile actions */
.ct-profile-actions {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ct-border);
}

/* Profile tabs */
.ct-profile-tabs {
    display: flex;
    border-bottom: 1px solid var(--ct-border);
}

.ct-profile-tab {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--ct-text-muted);
    cursor: pointer;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    font-family: inter, sans-serif;
}

.ct-profile-tab:hover { color: var(--ct-text-primary); }
.ct-profile-tab.active { color: var(--ct-accent); border-bottom-color: var(--ct-accent); }

/* Profile tab body */
.ct-profile-tab-body {
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.ct-period-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.ct-period-selector label { font-size: 12px; color: var(--ct-text-muted); }

.ct-period-select {
    background: #1e2430;
    border: 1px solid var(--ct-border);
    border-radius: 8px;
    color: var(--ct-text-primary);
    font-size: 13px;
    font-family: inter, sans-serif;
    padding: 6px 12px;
    outline: none;
    cursor: pointer;
}

.ct-period-select:focus { border-color: var(--ct-accent); }

.ct-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.ct-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ct-bg-deep);
    border-radius: 8px;
    padding: 10px 12px;
}

.ct-stat-row__lbl { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ct-text-muted); }
.ct-stat-row__val { font-size: 13px; font-weight: 600; color: var(--ct-text-primary); }
.ct-stat-row__val.green { color: var(--ct-green); }
.ct-stat-row__val.red { color: var(--ct-red); }

.ct-trade-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ct-bg-deep);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
}

.ct-trade-row:last-child { margin-bottom: 0; }

.ct-trade-type {
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.ct-trade-type.buy { background: rgba(34,197,94,0.2); color: var(--ct-green); }
.ct-trade-type.sell { background: rgba(239,68,68,0.2); color: var(--ct-red); }

.ct-trust-bar {
    background: var(--ct-bg-deep);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}

.ct-trust-bar__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ct-trust-bar__label { font-size: 13px; color: var(--ct-text-muted); }
.ct-trust-bar__val { font-size: 22px; font-weight: 700; color: var(--ct-green); }

.ct-progress {
    height: 8px;
    background: var(--ct-border);
    border-radius: 4px;
    overflow: hidden;
}

.ct-progress__fill {
    height: 100%;
    background: var(--ct-green);
    border-radius: 4px;
    transition: width 0.6s ease;
}

.ct-social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.ct-social-card {
    background: var(--ct-bg-deep);
    border-radius: 8px;
    padding: 12px;
}

.ct-social-card__lbl { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ct-text-muted); margin-bottom: 4px; }
.ct-social-card__val { font-size: 18px; font-weight: 700; color: var(--ct-text-primary); }

.ct-achievement {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--ct-bg-deep);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--ct-border);
}

.ct-achievement:last-child { margin-bottom: 0; }

.ct-achievement__icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--ct-bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.ct-achievement__name { font-size: 13px; font-weight: 600; color: var(--ct-text-primary); margin-bottom: 2px; }
.ct-achievement__desc { font-size: 11px; color: var(--ct-text-muted); }
.ct-achievement__rarity { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 50px; border: 1px solid transparent; }
.ct-achievement__rarity.Epic { background: rgba(167,139,250,0.15); color: #a78bfa; border-color: rgba(167,139,250,0.3); }
.ct-achievement__rarity.Legendary { background: rgba(245,158,11,0.15); color: #f59e0b; border-color: rgba(245,158,11,0.3); }
.ct-achievement__rarity.Rare { background: rgba(96,165,250,0.15); color: #60a5fa; border-color: rgba(96,165,250,0.3); }
.ct-achievement__rarity.Common { background: rgba(156,163,175,0.15); color: #9ca3af; border-color: rgba(156,163,175,0.3); }

/* ================================================================
   PROFILE PAGE (My Copy Trading)
   ----------------------------------------------------------------
   The profile page lives inside Vuetify's .v-application, which
   forces a white background and a blue color on every <a> tag
   (root.css lines 1 + 20588). To keep our dark theme consistent
   we wrap the page in .ct-profile-bg for a full-width dark
   backdrop, and use .v-application X !important on interactive
   elements to defeat the framework defaults.
   ================================================================ */

.ct-profile-bg {
    background: var(--ct-bg-deep);
    min-height: calc(100vh - 64px);
    width: 100%;
    font-family: inter, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.ct-profile-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px;
    display: flex;
    gap: 24px;
    font-family: inter, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    color: var(--ct-text-primary);
}

/* Defeat Vuetify's .v-application a { color: #1976d2 } */
.v-application .ct-profile-page a,
.v-application .ct-profile-bg a {
    text-decoration: none;
}

/* Sidebar nav (Wallet / Trading / History / etc.) */
.v-application .ct-sidebar-nav-item {
    color: var(--ct-text-muted) !important;
}
.v-application .ct-sidebar-nav-item:hover {
    color: var(--ct-text-primary) !important;
    background: var(--ct-border);
}
.v-application .ct-sidebar-nav-item.active {
    color: var(--ct-accent) !important;
    background: rgba(255,192,20,0.08);
}

/* Empty-state Discover button + bottom CTA Discover button */
.v-application .ct-empty .ct-btn--primary,
.v-application .ct-cta-box__btn {
    color: #0d0f14 !important;
}
.v-application .ct-empty .ct-btn--primary:hover,
.v-application .ct-cta-box__btn:hover {
    color: #0d0f14 !important;
}

/* "View Trader" action link inside expanded detail */
.v-application .ct-action-btn {
    color: var(--ct-text-primary) !important;
}
.v-application .ct-action-btn--danger {
    color: var(--ct-red) !important;
}

/* Page header */
.ct-profile-page__heading {
    margin-bottom: 24px;
}

.ct-profile-page__title {
    font-family: inter-bold, sans-serif;
    font-size: 24px;
    color: var(--ct-text-primary);
    margin: 0 0 6px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.ct-profile-page__subtitle {
    font-size: 13px;
    color: var(--ct-text-muted);
    margin: 0;
}

/* Quick stats inside sidebar (was inline-styled previously) */
.ct-quick-stats__title {
    font-size: 12px;
    font-family: inter-medium, sans-serif;
    color: var(--ct-text-muted);
    margin: 0 0 12px;
}
.ct-quick-stats__list { display: flex; flex-direction: column; gap: 10px; }
.ct-quick-stats__row { display: flex; justify-content: space-between; font-size: 12px; }
.ct-quick-stats__key { color: var(--ct-text-muted); }
.ct-quick-stats__val { color: var(--ct-text-primary); font-family: inter-bold, sans-serif; }
.ct-quick-stats__val--pos { color: var(--ct-green); }
.ct-quick-stats__val--neg { color: var(--ct-red); }

/* Empty-state Discover button */
.ct-empty .ct-btn--primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-family: inter-bold, sans-serif;
    background: var(--ct-accent);
    color: #0d0f14 !important;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.ct-empty .ct-btn--primary:hover { background: var(--ct-accent-hover); text-decoration: none; }

.ct-sidebar {
    width: 220px;
    flex-shrink: 0;
}

.ct-sidebar-card {
    background: var(--ct-bg-card);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius);
    overflow: hidden;
    margin-bottom: 12px;
}

.ct-sidebar-profile {
    padding: 16px;
}

.ct-sidebar-profile__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ct-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--ct-text-primary);
    margin-bottom: 10px;
    overflow: hidden;
}

.ct-sidebar-profile__avatar img { width: 100%; height: 100%; object-fit: cover; }

.ct-sidebar-profile__email { font-size: 13px; font-weight: 600; color: var(--ct-text-primary); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-sidebar-profile__uid { font-size: 11px; color: var(--ct-text-muted); margin-bottom: 8px; }

.ct-sidebar-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 4px;
    margin-bottom: 4px;
}

.ct-sidebar-badge--vip { background: rgba(255,192,20,0.15); color: var(--ct-accent); }
.ct-sidebar-badge--unverified { background: rgba(239,68,68,0.1); color: var(--ct-red); border: 1px solid rgba(239,68,68,0.3); }
.ct-sidebar-badge--verified { background: rgba(34,197,94,0.1); color: var(--ct-green); border: 1px solid rgba(34,197,94,0.3); }

.ct-sidebar-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ct-border);
    font-size: 13px;
    color: var(--ct-text-muted);
    text-decoration: none;
    transition: all 0.15s;
}

.ct-sidebar-nav-item:last-child { border-bottom: none; }
.ct-sidebar-nav-item:hover { background: var(--ct-border); color: var(--ct-text-primary); text-decoration: none; }
.ct-sidebar-nav-item.active { background: rgba(255,192,20,0.08); color: var(--ct-accent); }
.ct-sidebar-nav-item__left { display: flex; align-items: center; gap: 8px; }

/* Main content area */
.ct-main {
    flex: 1;
    min-width: 0;
}

/* Summary cards */
.ct-summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.ct-summary-card {
    background: var(--ct-bg-card);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius);
    padding: 18px;
}

.ct-summary-card__header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ct-text-muted);
    font-size: 12px;
    margin-bottom: 6px;
}

.ct-summary-card__val {
    font-size: 22px;
    font-weight: 700;
    color: var(--ct-text-primary);
    line-height: 1.2;
    margin-bottom: 2px;
}

.ct-summary-card__sub { font-size: 12px; color: var(--ct-text-muted); }
.ct-summary-card__sub.green { color: var(--ct-green); }
.ct-summary-card__sub.red { color: var(--ct-red); }
.ct-summary-card__sub.accent { color: var(--ct-accent); }

/* Tabs */
.ct-page-tabs {
    display: flex;
    background: var(--ct-bg-card);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius);
    padding: 4px;
    margin-bottom: 20px;
}

.ct-page-tab {
    flex: 1;
    padding: 9px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--ct-text-muted);
    cursor: pointer;
    border: none;
    background: transparent;
    border-radius: 8px;
    transition: all 0.2s;
    font-family: inter, sans-serif;
}

.ct-page-tab:hover { color: var(--ct-text-primary); }
.ct-page-tab.active { background: var(--ct-accent); color: #0d0f14; }

/* Active copy card */
.ct-copy-card {
    background: var(--ct-bg-card);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius);
    overflow: hidden;
    margin-bottom: 14px;
    transition: border-color 0.2s;
}

.ct-copy-card:hover { border-color: rgba(255,192,20,0.3); }

.ct-copy-card__main {
    padding: 18px;
    cursor: pointer;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    justify-content: space-between;
}

.ct-copy-card__trader {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ct-copy-card__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.ct-copy-card__stat-item { text-align: right; }
.ct-copy-card__stat-item .lbl { font-size: 11px; color: var(--ct-text-muted); }
.ct-copy-card__stat-item .val { font-size: 14px; font-weight: 600; color: var(--ct-text-primary); }
.ct-copy-card__stat-item .val.green { color: var(--ct-green); }
.ct-copy-card__stat-item .val.red { color: var(--ct-red); }
.ct-copy-card__stat-item .sub { font-size: 11px; color: var(--ct-text-muted); }

.ct-copy-card__trader-info { min-width: 0; }
.ct-copy-card__trader-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}
.ct-copy-card__trader-name {
    font-family: inter-bold, sans-serif;
    font-weight: 700;
    color: var(--ct-text-primary);
    font-size: 14px;
}
.ct-copy-card__verified-icon { color: #60a5fa; font-size: 14px; }
.ct-copy-card__trader-strategy {
    font-size: 12px;
    color: var(--ct-text-muted);
}
.ct-copy-card__trader-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--ct-text-muted);
}
.ct-copy-card__trader-meta i { font-size: 12px; }
.ct-copy-card__star { color: var(--ct-accent); font-size: 11px; }

.ct-detail-grid__heading {
    font-size: 13px;
    font-family: inter-medium, sans-serif;
    font-weight: 600;
    color: var(--ct-text-primary);
    margin: 0 0 10px;
}

.ct-copy-expand-icon {
    font-size: 18px;
    color: var(--ct-text-muted);
    transition: transform 0.2s;
}

.ct-copy-expand-icon.open { transform: rotate(90deg); }

.ct-copy-card__detail {
    background: rgba(13,15,20,0.5);
    border-top: 1px solid var(--ct-border);
    padding: 18px;
    display: none;
}

.ct-copy-card__detail.open { display: block; }

.ct-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.ct-detail-settings-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ct-bg-card);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 6px;
    font-size: 12px;
}

.ct-detail-settings-row .k { color: var(--ct-text-muted); }
.ct-detail-settings-row .v { color: var(--ct-text-primary); font-weight: 500; }
.ct-detail-settings-row .v.green { color: var(--ct-green); }
.ct-detail-settings-row .v.red { color: var(--ct-red); }

.ct-detail-actions { display: flex; gap: 8px; margin-top: 12px; }

.ct-action-btn {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inter, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    border: 1px solid var(--ct-border);
    background: var(--ct-bg-card);
    color: var(--ct-text-primary);
}

.ct-action-btn:hover { border-color: rgba(255,192,20,0.4); }
.ct-action-btn--danger { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.08); color: var(--ct-red); }
.ct-action-btn--danger:hover { background: rgba(239,68,68,0.15); }

/* History table */
.ct-history-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--ct-bg-card);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius);
    overflow: hidden;
}

.ct-history-table thead { background: rgba(13,15,20,0.6); }
.ct-history-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: var(--ct-text-muted);
    white-space: nowrap;
}

.ct-history-table td {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--ct-text-primary);
    border-top: 1px solid var(--ct-border);
}

.ct-history-table tbody tr:hover { background: rgba(30,36,48,0.5); }

.ct-th-right, .ct-td-right { text-align: right; }
.ct-history-trader { display: flex; align-items: center; gap: 6px; }
.ct-history-trader__name { font-family: inter-medium, sans-serif; font-weight: 500; color: var(--ct-text-primary); }
.ct-history-cell-sub { font-size: 11px; color: var(--ct-text-muted); }
.ct-history-pnl { font-family: inter-bold, sans-serif; font-weight: 600; }
.ct-history-pnl.green, .ct-history-pnl-pct.green { color: var(--ct-green); }
.ct-history-pnl.red, .ct-history-pnl-pct.red { color: var(--ct-red); }
.ct-history-pnl-pct { font-size: 11px; }

.ct-stop-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    padding: 2px 8px;
    font-size: 11px;
    font-family: inter-medium, sans-serif;
    font-weight: 600;
}
.ct-stop-pill i { font-size: 12px; }
.ct-stop-pill--profit { background: rgba(34,197,94,0.12); color: var(--ct-green); }
.ct-stop-pill--loss { background: rgba(239,68,68,0.12); color: var(--ct-red); }
.ct-stop-pill--manual { background: rgba(139,147,165,0.12); color: var(--ct-text-muted); }

/* CTA box */
.ct-cta-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ct-bg-card);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius);
    padding: 20px;
    margin-top: 24px;
}

.ct-cta-box__title { font-size: 15px; font-family: inter-bold, sans-serif; font-weight: 700; color: var(--ct-text-primary); margin-bottom: 4px; }
.ct-cta-box__sub { font-size: 13px; color: var(--ct-text-muted); }
.ct-cta-box__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ct-accent);
    color: #0d0f14;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 13px;
    font-family: inter-bold, sans-serif;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.ct-cta-box__btn:hover { background: var(--ct-accent-hover); text-decoration: none; color: #0d0f14; }

/* Empty state */
.ct-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--ct-text-muted);
}

.ct-empty i { font-size: 48px; display: block; margin-bottom: 12px; opacity: 0.3; }
.ct-empty p { font-size: 14px; margin-bottom: 16px; }

/* Paused badge */
.ct-paused-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,192,20,0.12);
    color: var(--ct-accent);
    border-radius: 50px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
}

/* Toast notification */
.ct-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--ct-bg-card);
    border: 1px solid var(--ct-border);
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 99999;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    transform: translateY(80px);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    min-width: 260px;
    max-width: 380px;
    font-family: inter, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ct-toast.show { transform: translateY(0); opacity: 1; }
.ct-toast.success { border-left: 3px solid var(--ct-green); }
.ct-toast.error { border-left: 3px solid var(--ct-red); }

.ct-toast__icon { font-size: 20px; flex-shrink: 0; }
.ct-toast.success .ct-toast__icon { color: var(--ct-green); }
.ct-toast.error .ct-toast__icon { color: var(--ct-red); }

.ct-toast__text { font-size: 13px; color: var(--ct-text-primary); font-weight: 500; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .ct-summary-cards { grid-template-columns: repeat(2, 1fr); }
    .ct-profile-page { flex-direction: column; }
    .ct-sidebar { width: 100%; }
}

@media (max-width: 768px) {
    .ct-hero__inner { flex-direction: column; gap: 20px; }
    .ct-hero__stats { gap: 20px; }
    .ct-grid { grid-template-columns: 1fr; }
    .ct-filters { flex-direction: column; align-items: flex-start; }
    .ct-search { margin-left: 0; width: 100%; }
    .ct-search input { width: 100%; }
    .ct-summary-cards { grid-template-columns: 1fr 1fr; }
    .ct-stats { grid-template-columns: repeat(3, 1fr); }
    .ct-profile-hdr { flex-direction: column; }
    .ct-detail-grid { grid-template-columns: 1fr; }
    .ct-stats-grid { grid-template-columns: 1fr; }
    .ct-copy-card__stats { gap: 12px; }
    .ct-history-table { display: block; overflow-x: auto; }
}

@media (max-width: 480px) {
    .ct-summary-cards { grid-template-columns: 1fr; }
    .ct-hero__title { font-size: 24px; }
    .ct-hero { padding: 32px 0 24px; }
}

/* ================================================================
   VUETIFY UTILITY OVERRIDES
   The legacy Vuetify rules `.v-application .green` and
   `.v-application .red` (in root.css) apply
   `background-color: #4caf50/#f44336 !important` to every element
   bearing these class names. We use `green` / `red` as text-color
   modifiers throughout copy-trading components, so we neutralize
   the background and border injection inside our scope.
   ================================================================ */
.ct-page .green,
.ct-page .red,
.ct-profile-page .green,
.ct-profile-page .red,
.ct-modal-overlay .green,
.ct-modal-overlay .red,
.ct-toast .green,
.ct-toast .red {
    background-color: transparent !important;
    border-color: transparent !important;
}

/* Re-assert text colors with !important so they beat any
   Vuetify color rules that may target the same names. */
.ct-page .ct-stat__val.green,
.ct-page .ct-copy-stat__val.green,
.ct-page .ct-stat-row__val.green,
.ct-page .ct-summary-card__sub.green,
.ct-modal-overlay .ct-summary__val.green,
.ct-modal-overlay .ct-stat-row__val.green,
.ct-profile-page .ct-summary-card__val.green,
.ct-profile-page .ct-summary-card__sub.green,
.ct-profile-page .ct-copy-card__stat-item .val.green,
.ct-profile-page .ct-copy-card__stat-item .sub.green,
.ct-profile-page .ct-detail-settings-row .v.green,
.ct-profile-page .ct-history-pnl.green,
.ct-profile-page .ct-history-pnl-pct.green,
.ct-profile-page .ct-quick-stats__val.green,
.ct-profile-page .ct-quick-stats__val--pos {
    color: var(--ct-green) !important;
}

.ct-page .ct-stat__val.red,
.ct-page .ct-copy-stat__val.red,
.ct-page .ct-stat-row__val.red,
.ct-page .ct-summary-card__sub.red,
.ct-modal-overlay .ct-summary__val.red,
.ct-modal-overlay .ct-stat-row__val.red,
.ct-profile-page .ct-summary-card__val.red,
.ct-profile-page .ct-summary-card__sub.red,
.ct-profile-page .ct-copy-card__stat-item .val.red,
.ct-profile-page .ct-copy-card__stat-item .sub.red,
.ct-profile-page .ct-detail-settings-row .v.red,
.ct-profile-page .ct-history-pnl.red,
.ct-profile-page .ct-history-pnl-pct.red,
.ct-profile-page .ct-quick-stats__val.red,
.ct-profile-page .ct-quick-stats__val--neg {
    color: var(--ct-red) !important;
}

/* ================================================================
   TYPOGRAPHY POLISH
   Use the actual designed bold/medium font faces (loaded by
   root.css) for headings and key bold elements so they render
   crisply rather than browser-synthesized faux bold.
   ================================================================ */
.ct-hero__title,
.ct-hero__stat-value,
.ct-section-title,
.ct-card__name,
.ct-modal__title,
.ct-stat__val,
.ct-copy-stat__val,
.ct-copy-card__stat-item .val,
.ct-summary-card__val,
.ct-summary-card__title,
.ct-profile-hdr-stat__val,
.ct-stat-row__val,
.ct-btn--primary {
    font-family: inter-bold, sans-serif;
}

.ct-card__rating-val,
.ct-toggle-row__title,
.ct-summary__val,
.ct-summary__title,
.ct-preset,
.ct-toast__text,
.ct-copiers-bar__count {
    font-family: inter-medium, sans-serif;
}

/* ================================================================
   ENHANCEMENTS — DARK "HOW IT WORKS", CUSTOM DROPDOWN, ACTIVITY
   TICKER, SCROLL-IN ANIMATIONS, FILTER TRANSITIONS
   ----------------------------------------------------------------
   These rules are appended after the legacy modal CSS so they
   override the older defaults predictably without depending on
   selector specificity tricks.
   ================================================================ */

/* ----------------------------------------------------------------
   ACTIVITY TICKER — sits between the stats strip and the traders
   section. Faux-live "user just copied trader" lines scroll
   horizontally at a slow constant rate to give the page a pulse.
   ---------------------------------------------------------------- */
.ct-page .activity-ticker {
    background: #fff;
    border-top: 1px solid #F3F4F6;
    border-bottom: 1px solid #F3F4F6;
    overflow: hidden;
    padding: 13px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.ct-page .activity-ticker__track {
    display: flex;
    gap: 56px;
    width: max-content;
    animation: ct-marquee 60s linear infinite;
    color: #4B5563;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    will-change: transform;
}
.ct-page .activity-ticker__track:hover {
    animation-play-state: paused;
}
.ct-page .activity-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #4B5563;
}
.ct-page .activity-ticker__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22a06b;
    box-shadow: 0 0 0 3px rgba(34, 160, 107, 0.18);
    flex-shrink: 0;
}
.ct-page .activity-ticker__item strong {
    color: #111827;
    font-weight: 700;
}
.ct-page .activity-ticker__item .ct-pos { color: #1f7a52; font-weight: 700; }
.ct-page .activity-ticker__item .ct-neg { color: #952c19; font-weight: 700; }
.ct-page .activity-ticker__item .ct-amt { color: #111827; font-weight: 700; }
@keyframes ct-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ----------------------------------------------------------------
   CUSTOM SORT DROPDOWN — replaces the native <select> so we get
   full control over the open menu styling. The hidden mirror
   <select> (.visually-hidden) is what older external code reads.
   ---------------------------------------------------------------- */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.ct-page .ct-dd {
    position: relative;
    display: inline-block;
    font-family: inherit;
}
.ct-page .ct-dd__trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s, background .2s;
    line-height: 1;
}
.ct-page .ct-dd__trigger:hover { border-color: #9CA3AF; }
.ct-page .ct-dd.is-open .ct-dd__trigger {
    border-color: #F5A623;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
    background: #fffaf0;
}
.ct-page .ct-dd__icon {
    width: 14px;
    height: 14px;
    color: #6B7280;
    flex-shrink: 0;
}
.ct-page .ct-dd__chevron {
    width: 12px;
    height: 12px;
    color: #6B7280;
    transition: transform .25s ease, color .2s;
    flex-shrink: 0;
    margin-left: 2px;
}
.ct-page .ct-dd.is-open .ct-dd__chevron {
    transform: rotate(180deg);
    color: #F5A623;
}
.ct-page .ct-dd__current {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-page .ct-dd__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 18px 38px -12px rgba(8, 8, 12, 0.22),
                0 4px 12px -4px rgba(8, 8, 12, 0.08);
    list-style: none;
    margin: 0;
    padding: 6px;
    z-index: 100;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top right;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.ct-page .ct-dd.is-open .ct-dd__menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.ct-page .ct-dd__opt {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    color: #4B5563;
    transition: background .15s, color .15s;
    user-select: none;
}
.ct-page .ct-dd__opt:hover {
    background: #F9FAFB;
    color: #111827;
}
.ct-page .ct-dd__opt-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #F3F4F6;
    color: #6B7280;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.ct-page .ct-dd__opt-icon svg {
    width: 14px;
    height: 14px;
}
.ct-page .ct-dd__opt:hover .ct-dd__opt-icon {
    background: #FFF1D6;
    color: #B3863F;
}
.ct-page .ct-dd__opt.is-active {
    background: #08080c;
    color: #fff;
}
.ct-page .ct-dd__opt.is-active .ct-dd__opt-icon {
    background: rgba(245, 166, 35, 0.2);
    color: #F5A623;
}
.ct-page .ct-dd__opt.is-active::after {
    content: '';
    width: 6px;
    height: 11px;
    margin-left: auto;
    border-right: 2px solid #F5A623;
    border-bottom: 2px solid #F5A623;
    transform: rotate(45deg);
    margin-bottom: 3px;
}

/* ----------------------------------------------------------------
   HOW IT WORKS — DARK SECTION
   The white page needed contrast. This section is a black band
   with a subtle yellow dotted-grid texture, dark cards with
   yellow numerals, and an animated SVG path that draws between
   the three cards on scroll-in.
   ---------------------------------------------------------------- */
.ct-page .how-section {
    padding: 100px 24px;
    background:
        linear-gradient(180deg, #08080c 0%, #11121a 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.ct-page .how-section::before {
    /* faint yellow dot grid for visual texture */
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 192, 20, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: -1px -1px;
    pointer-events: none;
    opacity: 0.6;
}
.ct-page .how-section::after {
    /* radial yellow glow upper-right for warmth */
    content: '';
    position: absolute;
    top: -200px;
    right: -120px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(255, 192, 20, 0.10) 0%, transparent 60%);
    pointer-events: none;
}
.ct-page .how-section .container {
    position: relative;
    z-index: 1;
}
.ct-page .how-section .section-header h2 {
    color: #fff;
}
.ct-page .how-section .section-header h2 em {
    /* allow inline emphasis to be tinted yellow if desired */
    font-style: normal;
    color: #F5A623;
}
.ct-page .how-section .section-header p {
    color: #9CA3AF;
}

.ct-page .how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
    position: relative;
    z-index: 1;
}
.ct-page .how-tile {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 32px 28px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    position: relative;
    /* scroll-in initial state */
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .7s cubic-bezier(0.4, 0, 0.2, 1),
                transform .7s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow .25s ease,
                border-color .25s ease,
                background .25s ease;
}
.ct-page .how-tile.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.ct-page .how-tile:nth-child(1) { transition-delay: 0s,    0s,    0s, 0s, 0s; }
.ct-page .how-tile:nth-child(2) { transition-delay: 0.15s, 0.15s, 0s, 0s, 0s; }
.ct-page .how-tile:nth-child(3) { transition-delay: 0.30s, 0.30s, 0s, 0s, 0s; }
.ct-page .how-tile:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(245, 166, 35, 0.4);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(245, 166, 35, 0.15);
}
.ct-page .how-tile__num {
    font-size: 56px;
    font-weight: 800;
    color: #F5A623;
    line-height: 1;
    margin-bottom: 18px;
    letter-spacing: -2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: rgba(245, 166, 35, 0.10);
    border: 1px solid rgba(245, 166, 35, 0.25);
    text-shadow: 0 0 24px rgba(245, 166, 35, 0.4);
    transition: transform .25s ease, box-shadow .25s ease;
}
.ct-page .how-tile:hover .how-tile__num {
    transform: scale(1.04);
    box-shadow: 0 0 32px rgba(245, 166, 35, 0.25);
}
.ct-page .how-tile h3 {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: -0.3px;
}
.ct-page .how-tile p {
    color: #9CA3AF;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Connector line — runs across the row joining the three numerals.
   It's an SVG path with stroke-dasharray that animates from full
   offset to zero when the parent .how-section becomes visible. */
.ct-page .how-connector {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    height: 4px;
    pointer-events: none;
    z-index: 0;
    margin: 0 16%;
}
.ct-page .how-connector svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.ct-page .how-connector path {
    fill: none;
    stroke: rgba(245, 166, 35, 0.35);
    stroke-width: 2;
    stroke-dasharray: 6 8;
    stroke-linecap: round;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.ct-page .how-section.is-visible .how-connector path {
    stroke-dashoffset: 0;
}
@media (max-width: 900px) {
    .ct-page .how-grid { grid-template-columns: 1fr; }
    .ct-page .how-connector { display: none; }
}

/* ----------------------------------------------------------------
   TRADER GRID — fade/lift transition when filter changes.
   The JS adds .is-fading right before re-rendering and removes
   it on the next frame so the cards animate back in.
   ---------------------------------------------------------------- */
/* Asymmetric transition: parent fades OUT smoothly (.13s) but
   snaps back to opacity:1 instantly when .is-fading is removed.
   This avoids the double-fade where parent opacity multiplied
   with child keyframe opacity made cards appear sluggish.
   The min-height transition lets the grid ease its height down
   so the page below doesn't snap upwards when filters reduce
   the row count. */
.ct-page .ct-grid {
    opacity: 1;
    transition: opacity 0s linear, min-height .35s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity;
}
.ct-page .ct-grid.is-fading {
    opacity: 0;
    pointer-events: none;
    transition: opacity .13s ease-out, min-height .35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* The child keyframe IS the entrance animation. Tighter stagger
   (25ms step) and shorter duration (.35s) so the cascade
   completes in ~520ms total instead of the previous ~950ms. */
.ct-page .ct-grid > .ct-card {
    animation: ct-card-fadeup .35s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    will-change: opacity, transform;
}
.ct-page .ct-grid > .ct-card:nth-child(1)  { animation-delay: 0.000s; }
.ct-page .ct-grid > .ct-card:nth-child(2)  { animation-delay: 0.025s; }
.ct-page .ct-grid > .ct-card:nth-child(3)  { animation-delay: 0.050s; }
.ct-page .ct-grid > .ct-card:nth-child(4)  { animation-delay: 0.075s; }
.ct-page .ct-grid > .ct-card:nth-child(5)  { animation-delay: 0.100s; }
.ct-page .ct-grid > .ct-card:nth-child(6)  { animation-delay: 0.125s; }
.ct-page .ct-grid > .ct-card:nth-child(7)  { animation-delay: 0.150s; }
.ct-page .ct-grid > .ct-card:nth-child(8)  { animation-delay: 0.175s; }
.ct-page .ct-grid > .ct-card:nth-child(9)  { animation-delay: 0.200s; }
@keyframes ct-card-fadeup {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .ct-page .ct-grid,
    .ct-page .ct-grid.is-fading {
        transition: min-height .15s linear;
        opacity: 1;
    }
    .ct-page .ct-grid > .ct-card { animation: none; }
}

/* ----------------------------------------------------------------
   RISK CHIP TRANSITION — sliding active background pill.
   The chip group gets an animated pill that follows the active
   chip via inline left/width set by JS, giving a smooth glide
   instead of an instant background swap.
   ---------------------------------------------------------------- */
.ct-page .ct-chip-group {
    position: relative;
}
.ct-page .ct-chip-group__pill {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 0;
    background: #08080c;
    border-radius: 999px;
    box-shadow: 0 4px 12px -2px rgba(8, 8, 12, 0.25);
    transition: left .35s cubic-bezier(0.65, 0, 0.35, 1),
                width .35s cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
    z-index: 0;
}
.ct-page .ct-chip {
    position: relative;
    z-index: 1;
}
/* override the static black background; the pill handles the
   active visual now. The active chip just becomes white text. */
.ct-page .ct-chip.is-active {
    background: transparent;
    box-shadow: none;
}

/* Reduced motion respect — disable the larger animations for
   users who've asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    .ct-page .activity-ticker__track { animation: none; }
    .ct-page .how-tile { transition: none; opacity: 1; transform: none; }
    .ct-page .how-connector path { transition: none; stroke-dashoffset: 0; }
    .ct-page .ct-grid > .ct-card { animation: none; }
    .ct-page .ct-chip-group__pill { transition: none; }
}

/* ================================================================
   v2 OVERRIDES — DARK TRADER CARDS, FLAG SVGs, MODAL FIXES,
   TICKER PRO ICONS, MONOCHROME HERO BADGE
   ----------------------------------------------------------------
   Appended after every other rule so this is the final word
   when selectors collide (CSS source-order cascade).
   ================================================================ */

/* ----------------------------------------------------------------
   HERO BADGE — black / white only (was yellow)
   ---------------------------------------------------------------- */
.ct-page .hero-badge {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ct-page .hero-badge::before {
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
    animation: ct-pulse-white 1.6s ease-in-out infinite;
}
@keyframes ct-pulse-white {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18); }
    50%      { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.04); }
}

/* ----------------------------------------------------------------
   TRADER CARDS — flip from white to dark
   ----------------------------------------------------------------
   Cards are dark "tiles" sitting on the white traders-section.
   This adds a strong visual rhythm and makes the green sparkline
   colours pop without the harshness of a black page background.
   ---------------------------------------------------------------- */
.ct-page .ct-card {
    background: linear-gradient(180deg, #14161e 0%, #0f1117 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #E5E7EB;
    box-shadow: 0 6px 20px -10px rgba(8, 8, 12, 0.35);
}
.ct-page .ct-card:hover {
    border-color: rgba(245, 166, 35, 0.30);
    box-shadow: 0 18px 38px -16px rgba(8, 8, 12, 0.45),
                0 0 0 1px rgba(245, 166, 35, 0.10);
}
.ct-page .ct-card.featured {
    border-color: rgba(245, 166, 35, 0.65);
    box-shadow: 0 12px 32px -8px rgba(245, 166, 35, 0.28),
                0 0 0 1px rgba(245, 166, 35, 0.15);
}
.ct-page .ct-card.featured:hover {
    box-shadow: 0 24px 48px -12px rgba(245, 166, 35, 0.38),
                0 0 0 1px rgba(245, 166, 35, 0.30);
}

/* Avatar — slightly brighter so it pops against the dark card */
.ct-page .ct-card .ct-avatar__circle {
    background: linear-gradient(135deg, #2a2e3d 0%, #3a3f52 100%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.06);
}
.ct-page .ct-card .ct-avatar__circle.level-2 { border-color: #22a06b; }
.ct-page .ct-card .ct-avatar__circle.level-3 { border-color: #5b8def; }
.ct-page .ct-card .ct-avatar__circle.level-4 { border-color: #9b6dd9; }
.ct-page .ct-card .ct-avatar__circle.level-5 { border-color: #F5A623; }
.ct-page .ct-card .ct-avatar__online {
    background: #22a06b;
    border-color: #14161e;
    box-shadow: 0 0 0 1px rgba(34, 160, 107, 0.4);
}

/* Headline + meta inside the card */
.ct-page .ct-card .ct-card__name { color: #fff; letter-spacing: -0.2px; }
.ct-page .ct-card .ct-card__strategy { color: #9CA3AF; }
.ct-page .ct-card .ct-card__rating-val { color: #fff; }
.ct-page .ct-card .ct-card__rating-count { color: #6B7280; }
.ct-page .ct-card .ct-verified-icon { color: #5b8def; }

/* Risk + asset pills — translucent dark */
.ct-page .ct-card .ct-badge {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.10);
    color: #D1D5DB;
}
.ct-page .ct-card .ct-badge--low {
    color: #6CE9A6;
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.25);
}
.ct-page .ct-card .ct-badge--low::before { background: #22c55e; }
.ct-page .ct-card .ct-badge--medium {
    color: #FFCB6B;
    background: rgba(245, 166, 35, 0.10);
    border-color: rgba(245, 166, 35, 0.30);
}
.ct-page .ct-card .ct-badge--medium::before { background: #F5A623; }
.ct-page .ct-card .ct-badge--high {
    color: #FCA5A5;
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.28);
}
.ct-page .ct-card .ct-badge--high::before { background: #ef4444; }

/* Sparkline panel inside the card */
.ct-page .ct-card .ct-sparkline-wrap {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Stats trio inside the card */
.ct-page .ct-card .ct-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.ct-page .ct-card .ct-stat__val { color: #fff; }
.ct-page .ct-card .ct-stat__val.green  { color: #34D399; }
.ct-page .ct-card .ct-stat__val.red    { color: #F87171; }
.ct-page .ct-card .ct-stat__val.accent { color: #F5A623; }
.ct-page .ct-card .ct-stat__label     { color: #9CA3AF; }

/* Copiers strip */
.ct-page .ct-card .ct-copiers-bar {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.ct-page .ct-card .ct-copiers-bar__icon  { color: #9CA3AF; }
.ct-page .ct-card .ct-copiers-bar__count { color: #fff; }
.ct-page .ct-card .ct-copiers-bar__label { color: #9CA3AF; }
.ct-page .ct-card .ct-copiers-bar__online { color: #34D399; }
.ct-page .ct-card .ct-copiers-bar__dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

/* Action buttons on dark cards */
.ct-page .ct-card .ct-btn--copy {
    background: #F5A623;
    color: #1A1A1A;
    border-color: #F5A623;
}
.ct-page .ct-card .ct-btn--copy:hover {
    background: #FFB73E;
    border-color: #FFB73E;
    box-shadow: 0 6px 18px -4px rgba(245, 166, 35, 0.45);
}
.ct-page .ct-card.featured .ct-btn--copy {
    background: #F5A623;
    color: #1A1A1A;
}
.ct-page .ct-card .ct-btn--copy.already-copying {
    background: rgba(255, 255, 255, 0.06);
    color: #9CA3AF;
    border-color: rgba(255, 255, 255, 0.10);
}
.ct-page .ct-card .ct-btn--profile {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
}
.ct-page .ct-card .ct-btn--profile:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.20);
}

/* ----------------------------------------------------------------
   FLAG BADGE — replace failing emoji flags with a small inline
   SVG that renders identically across every browser/OS. The JS
   builds the SVG inline based on the trader's country.
   ---------------------------------------------------------------- */
.ct-page .ct-flag,
.ct-page .ct-profile-flag {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 22px;
    height: 14px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85),
                0 1px 3px rgba(0, 0, 0, 0.35);
    background: #ddd;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    font-size: 0;
}
.ct-page .ct-flag svg,
.ct-page .ct-profile-flag svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* Profile modal flag is slightly larger */
.ct-page .ct-profile-flag {
    width: 26px;
    height: 18px;
    top: -4px;
    right: -4px;
}

/* ----------------------------------------------------------------
   PROFILE MODAL X-BUTTON OVERLAP FIX
   The Followers/Watchers stats were running underneath the close
   button. We reserve room for the close button by giving the
   header right-padding equal to the button width + breathing.
   ---------------------------------------------------------------- */
.ct-modal--profile .ct-profile-hdr {
    padding-right: 64px; /* 32 (X width) + 16 (gap) + 16 (right offset) */
    position: relative;
}
.ct-modal--profile .ct-profile-stats-hdr {
    flex-shrink: 0;
}
.ct-modal--profile .ct-modal__close {
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.ct-modal--profile .ct-modal__close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}
@media (max-width: 600px) {
    .ct-modal--profile .ct-profile-hdr {
        padding-right: 56px;
    }
    .ct-modal--profile .ct-profile-stats-hdr {
        gap: 8px;
    }
    .ct-modal--profile .ct-profile-hdr-stat__val { font-size: 15px; }
    .ct-modal--profile .ct-profile-hdr-stat__lbl { font-size: 10px; }
}

/* ----------------------------------------------------------------
   ACTIVITY TICKER — pro SVG icons (no emojis), inline timestamps
   ---------------------------------------------------------------- */
.ct-page .activity-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.ct-page .activity-ticker__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(8, 8, 12, 0.04);
    color: #6B7280;
    flex-shrink: 0;
    border: 1px solid rgba(8, 8, 12, 0.06);
}
.ct-page .activity-ticker__icon svg {
    width: 12px;
    height: 12px;
}
/* Per-event tone */
.ct-page .activity-ticker__icon--copy   { color: #1f7a52; background: rgba(34,160,107,0.08); border-color: rgba(34,160,107,0.15); }
.ct-page .activity-ticker__icon--add    { color: #1F2937; background: rgba(31,41,55,0.05);   border-color: rgba(31,41,55,0.10); }
.ct-page .activity-ticker__icon--profit { color: #1f7a52; background: rgba(34,160,107,0.08); border-color: rgba(34,160,107,0.15); }
.ct-page .activity-ticker__icon--trade  { color: #B3863F; background: rgba(245,166,35,0.10); border-color: rgba(245,166,35,0.20); }
.ct-page .activity-ticker__icon--target { color: #9333EA; background: rgba(147,51,234,0.06); border-color: rgba(147,51,234,0.15); }
.ct-page .activity-ticker__time {
    color: #9CA3AF;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-right: 2px;
}
.ct-page .activity-ticker__sep {
    color: #D1D5DB;
    font-weight: 300;
}

/* ================================================================
   v3 OVERRIDES - SOFT GRADIENT PAGE BACKGROUND (matches /earn)
   ----------------------------------------------------------------
   The /earn page uses #f0f2f4 as its base (a cool light gray, not
   pure white) plus subtle peach + magenta radial-glow blobs at the
   very top of the section, fading down to the base via a linear
   gradient. We mirror that exact treatment here so /copy-trading
   feels like part of the same product family rather than a stark
   white sheet.
   ================================================================ */

/* 1) Page shell: cool light gray instead of #f8f9fa */
.ct-page {
    background: #f0f2f4;
}

/* 2) The activity ticker becomes translucent white so it floats
      above the colored gradient without a hard white slab. */
.ct-page .activity-ticker {
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top-color: rgba(8, 8, 12, 0.05);
    border-bottom-color: rgba(8, 8, 12, 0.05);
}

/* 3) Traders section: drop the flat #fff, use the same #f0f2f4 base
      and overlay two soft radial color tints at the top that fade
      out into the base via a linear gradient. The blobs are pinned
      to the top-left and top-right corners so they only colour the
      headline + first row of cards, exactly like /earn's
      .colorful-section-top. */
.ct-page .traders-section {
    position: relative;
    background: #f0f2f4;
    overflow: hidden;
}
.ct-page .traders-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 28.25rem;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 60% at 12% -8%, rgba(240, 163, 72, 0.18) 0%, rgba(240, 163, 72, 0) 65%),
        radial-gradient(ellipse 55% 60% at 88% -8%, rgba(240, 72, 233, 0.10) 0%, rgba(240, 72, 233, 0) 65%),
        linear-gradient(180deg, rgba(240, 242, 244, 0) 42%, #f0f2f4 100%);
}
.ct-page .traders-section > .container {
    position: relative;
    z-index: 1;
}

/* 4) FAQ section: same soft base as the page so we don't get a
      visible seam. The hairline border keeps the section change
      readable without a hard color step. */
.ct-page .faq-section {
    background: #f0f2f4;
    border-top-color: rgba(8, 8, 12, 0.04);
}

/* 5) Stat tiles get a subtle warm shadow on the soft-gray bg so
      they read as elevated rather than washed out. */
.ct-page .stat-tile {
    box-shadow: 0 12px 36px -18px rgba(40, 30, 12, 0.20);
}
.ct-page .stat-tile:hover {
    box-shadow: 0 18px 44px -18px rgba(40, 30, 12, 0.28);
}

/* ================================================================
   v4 OVERRIDE  HOW-IT-WORKS CONNECTOR (no more strike-through)
   ----------------------------------------------------------------
   The old implementation drew ONE dotted SVG that spanned the
   entire row, so it cut through each card's body like a strike-
   through. We now use a per-tile :after pseudo-element that lives
   ONLY in the 24px grid gap between adjacent tiles, terminating
   in a small arrow head that points into the next card. Reads as
   "step 1 -> step 2 -> step 3" without ever touching card bodies.
   ================================================================ */

/* Kill the old spanning line entirely */
.ct-page .how-connector { display: none !important; }

/* The numeral badge already gives each tile a clear anchor point.
   The connector sits at the badge's vertical centre (68px from
   the tile top) and fills the 24px column gap exactly. */
.ct-page .how-tile { position: relative; }
.ct-page .how-tile:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 60px;
    right: -24px;
    width: 24px;
    height: 16px;
    pointer-events: none;
    z-index: 2;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8' preserveAspectRatio='xMidYMid meet'><circle cx='3' cy='4' r='1.2' fill='%23F5A623' opacity='0.4'/><circle cx='8' cy='4' r='1.2' fill='%23F5A623' opacity='0.6'/><circle cx='13' cy='4' r='1.2' fill='%23F5A623' opacity='0.78'/><path d='M 17 1.5 L 20.5 4 L 17 6.5' stroke='%23F5A623' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round' opacity='0.92'/></svg>");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .55s cubic-bezier(0.4, 0, 0.2, 1),
                transform .55s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Connectors fade in AFTER their preceding tile has settled, so
   the eye reads the flow: tile1 -> arrow -> tile2 -> arrow -> tile3. */
.ct-page .how-section.is-visible .how-tile:not(:last-child)::after {
    opacity: 1;
    transform: translateX(0);
}
.ct-page .how-section.is-visible .how-tile:nth-child(1)::after { transition-delay: 0.55s; }
.ct-page .how-section.is-visible .how-tile:nth-child(2)::after { transition-delay: 0.85s; }

/* Respect reduced motion: connectors appear instantly, no slide */
@media (prefers-reduced-motion: reduce) {
    .ct-page .how-tile:not(:last-child)::after {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* Mobile: stack of cards, no horizontal connector makes sense */
@media (max-width: 900px) {
    .ct-page .how-tile:not(:last-child)::after { display: none; }
}

/* ================================================================
   v5 OVERRIDE  PAGINATION CONTROLS
   ----------------------------------------------------------------
   Sits below the trader grid. Hidden when the filtered result set
   fits on a single page (data-visible="false"). Each button is a
   small pill with hover lift; the current page gets the yellow
   accent treatment that matches the rest of the page's pill UI.
   ================================================================ */
.ct-page .ct-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 36px auto 0;
    padding: 0 16px;
    max-width: 920px;
}
.ct-page .ct-pagination[data-visible="false"] { display: none; }

.ct-page .ct-pag__btn {
    appearance: none;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(8, 8, 12, 0.10);
    color: #1F2937;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .18s ease, border-color .18s ease,
                color .18s ease, transform .15s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow .2s ease;
    user-select: none;
}
.ct-page .ct-pag__btn:hover:not([disabled]):not(.is-active) {
    background: #fff;
    border-color: rgba(245, 166, 35, 0.45);
    color: #B3863F;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -8px rgba(40, 30, 12, 0.25);
}
.ct-page .ct-pag__btn:active:not([disabled]):not(.is-active) {
    transform: translateY(0);
}
.ct-page .ct-pag__btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    color: #9CA3AF;
}
.ct-page .ct-pag__btn.is-active {
    background: linear-gradient(180deg, #FFC850 0%, #F5A623 100%);
    border-color: #F5A623;
    color: #1A1A1A;
    box-shadow: 0 6px 16px -6px rgba(245, 166, 35, 0.55),
                0 0 0 1px rgba(245, 166, 35, 0.30);
    cursor: default;
}
.ct-page .ct-pag__nav i.mdi {
    font-size: 18px;
    line-height: 1;
}
.ct-page .ct-pag__ellipsis {
    color: #9CA3AF;
    padding: 0 6px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    user-select: none;
}
.ct-page .ct-pag__summary {
    margin-left: 12px;
    color: #6B7280;
    font-size: 13px;
    font-weight: 500;
    flex-basis: 100%;
    text-align: center;
    margin-top: 8px;
}
.ct-page .ct-pag__summary strong {
    color: #1F2937;
    font-weight: 700;
}

/* Smooth pop-in for the pagination strip itself when it first
   appears (e.g., after the initial trader load). */
.ct-page .ct-pagination[data-visible="true"] {
    animation: ct-pag-fadein .35s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}
@keyframes ct-pag-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    .ct-page .ct-pag__btn { width: 34px; height: 34px; font-size: 13px; }
    .ct-page .ct-pag__summary { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ct-page .ct-pagination[data-visible="true"] { animation: none; }
    .ct-page .ct-pag__btn { transition: background .15s, border-color .15s, color .15s; }
}