:root {
  --bg-base: #030305;
  --glass-bg: rgba(255, 255, 255, 0.02);
  --glass-border: rgba(255, 255, 255, 0.06);
  --accent-cyan: #00f0ff;
  --accent-purple: #8a2be2;
  --text-main: #ffffff;
  --text-muted: #888899;
  --positive: #00ff9d;
  --negative: #ff3366;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Legal footer, checkout acknowledgement and privacy choices ───────── */
.app-legal-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    margin: 38px 0 4px;
    padding: 20px 2px 8px;
    border-top: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 11px;
}
.app-legal-company { display: grid; gap: 4px; }
.app-legal-company strong { color: var(--text-main); font-size: 12px; }
.app-legal-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px 15px; }
.app-legal-footer a,
.app-legal-footer button {
    border: 0;
    padding: 0;
    color: var(--text-muted);
    background: none;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.app-legal-footer a:hover,
.app-legal-footer button:hover { color: var(--accent-cyan); }

.pro-legal-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 13px;
    color: var(--text-muted);
    font-size: 10.5px;
    line-height: 1.45;
}
.pro-legal-consent input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--accent-purple); }
.pro-legal-consent a,
.partner-legal-note a { color: var(--accent-cyan); }
.partner-legal-note { margin: 10px 0; color: var(--text-muted); font-size: 10.5px; line-height: 1.45; }
.checkout-provider-note {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 9.5px;
    line-height: 1.4;
    text-align: center;
}
.checkout-provider-note a { color: var(--accent-cyan); }

.cookie-notice {
    position: fixed;
    z-index: 5000;
    right: 18px;
    bottom: 18px;
    display: flex;
    align-items: center;
    gap: 18px;
    width: min(660px, calc(100vw - 36px));
    padding: 16px 17px;
    border: 1px solid rgba(138, 43, 226, .35);
    border-radius: 16px;
    background: rgba(10, 8, 16, .97);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .55);
}
.cookie-notice.hidden { display: none; }
.cookie-notice strong { display: block; margin-bottom: 3px; color: var(--text-main); font-size: 13px; }
.cookie-notice p { margin: 0; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.cookie-notice a,
.cookie-notice a:visited { color: #b98aff; text-decoration: underline; text-underline-offset: 2px; }
.cookie-notice a:hover { color: #d1b3ff; }
.cookie-notice-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.cookie-notice-actions button { width: auto; min-width: 105px; border: 1px solid var(--glass-border); border-radius: 9px; padding: 9px 11px; color: var(--text-main); background: rgba(255,255,255,.05); font-size: 11px; font-weight: 700; cursor: pointer; }
.cookie-notice-actions .primary-btn { border: 0; background: var(--accent-purple); }
.cookie-preferences-modal {
    width: min(560px, calc(100vw - 32px));
    max-width: 560px;
    padding: 26px 28px 24px;
    border-radius: 22px;
}
.cookie-preferences-modal .modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.cookie-preferences-modal h2 { margin-top: 6px; font-size: 25px; }
.cookie-preferences-lead { margin: 0 0 16px; color: var(--text-muted); font-size: 12px; line-height: 1.55; }
.cookie-preference-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
    border-top: 1px solid rgba(255,255,255,.08);
    cursor: pointer;
}
.cookie-preference-row span { display: grid; gap: 4px; min-width: 0; }
.cookie-preference-row strong { color: var(--text-main); font-size: 13px; }
.cookie-preference-row small { color: var(--text-muted); font-size: 11px; line-height: 1.4; }
.cookie-preference-row input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--accent-purple); }
.cookie-preferences-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.cookie-preferences-actions button { width: auto; min-width: 132px; }
.cookie-secondary-btn { border: 1px solid var(--glass-border) !important; background: rgba(255,255,255,.06) !important; }

.app-confirm-actions {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    gap: 10px;
}
.app-confirm-modal {
    width: min(680px, calc(100vw - 32px));
    max-width: 680px;
    padding: 34px 38px 36px;
    border-radius: 24px;
}
.app-confirm-modal .modal-header { margin-bottom: 16px !important; }
.app-confirm-modal .modal-header h2 { font-size: 23px !important; line-height: 1.2; }
.app-confirm-modal #appConfirmModalMessage {
    margin-bottom: 26px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}
.app-confirm-actions button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 58px;
    padding: 13px 20px !important;
    font-size: 14px;
    line-height: 1.25;
    white-space: normal;
}

.external-media-consent {
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 260px;
    padding: 48px 22px;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    text-align: center;
    background: rgba(255,255,255,.018);
}
.external-media-consent.hidden { display: none; }
.external-media-consent strong { color: var(--text-main); }
.external-media-consent span { max-width: 480px; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.external-media-consent .primary-btn { width: auto; margin-top: 5px; padding: 10px 17px; background: var(--accent-purple); }

@media (max-width: 700px) {
    .app-legal-footer { flex-direction: column; margin-top: 26px; padding-inline: 4px; }
    .app-legal-footer nav { justify-content: flex-start; }
    .cookie-notice { right: 10px; bottom: 10px; flex-direction: column; align-items: stretch; width: calc(100vw - 20px); }
    .cookie-notice-actions { width: 100%; }
    .cookie-notice-actions button { flex: 1; }
    .cookie-preferences-modal { padding: 22px 20px 20px; }
    .cookie-preferences-actions { flex-direction: column-reverse; }
    .cookie-preferences-actions button { width: 100%; }
    .app-confirm-actions { flex-direction: column-reverse; }
    .app-confirm-actions button { width: 100% !important; min-width: 0; }
    .app-confirm-modal { padding: 26px 20px 22px; }
}

/* ── AI Insights tabs + redistribution-safe Market Intelligence ─────────── */
.ai-view-tabs {
    display: inline-flex;
    gap: 6px;
    margin: 22px 0 18px;
    padding: 5px;
    max-width: 100%;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: rgba(7, 5, 13, .72);
}
.ai-view-tab {
    border: 0;
    border-radius: 10px;
    padding: 10px 16px;
    color: var(--text-muted);
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.ai-view-tab.active {
    color: #fff;
    background: rgba(138, 43, 226, .24);
    box-shadow: inset 0 0 0 1px rgba(160, 86, 255, .32);
}
.ai-tab-panel.hidden { display: none !important; }
#aiMarketTabPanel { display: flex; flex-direction: column; }
#aiMarketTabPanel .market-intelligence-shell { order: -1; }

.market-intelligence-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
}
.market-intelligence-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding: 4px 4px 2px;
}
.market-intelligence-hero h2 { margin: 7px 0 8px; font-size: clamp(24px, 3vw, 34px); }
.market-intelligence-hero p { max-width: 720px; color: var(--text-muted); font-size: 13px; line-height: 1.65; }
.market-eyebrow,
.market-card-label {
    color: var(--accent-cyan);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}
.market-source-block { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.market-source-block span { color: var(--text-muted); font-size: 11px; }
.market-source-block a { color: var(--accent-cyan); font-size: 11px; text-decoration: none; }

.market-overview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 18px;
}
.market-flow-score-card {
    min-width: 0;
    display: block;
    padding: 26px;
    border: 1px solid rgba(140, 73, 230, .35);
    border-radius: 22px;
    background: radial-gradient(circle at 8% 10%, rgba(138, 43, 226, .2), transparent 45%), rgba(10, 8, 16, .82);
}
.market-regime-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.market-flow-score-card h3 { margin: 7px 0 8px; font-size: 22px; }
.market-flow-score-card p { color: var(--text-muted); font-size: 12.5px; line-height: 1.55; }
.market-regime-score {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 8px 11px;
    border: 1px solid rgba(0,240,255,.22);
    border-radius: 11px;
    color: var(--accent-cyan);
    background: rgba(0,240,255,.055);
}
.market-regime-score strong { font-size: 20px; line-height: 1; }
.market-regime-score small { color: var(--text-muted); font-size: 9px; }
.market-pressure-scale {
    --market-score: 50;
    margin-top: 22px;
}
.market-pressure-track {
    position: relative;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,51,102,.95), rgba(138,43,226,.75) 42%, rgba(0,240,255,.85) 50%, rgba(0,255,157,.92));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 18px rgba(0,240,255,.06);
}
.market-pressure-marker {
    position: absolute;
    top: 50%;
    left: calc(var(--market-score) * 1%);
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    border: 3px solid #fff;
    border-radius: 50%;
    background: #0b0811;
    box-shadow: 0 0 0 3px rgba(255,255,255,.09), 0 0 16px rgba(0,240,255,.35);
}
.market-pressure-labels { display: flex; justify-content: space-between; margin-top: 9px; color: var(--text-muted); font-size: 9.5px; }
.market-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.market-metric-card {
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    background: rgba(11, 10, 16, .78);
}
.market-metric-card span,
.market-metric-card small { display: block; color: var(--text-muted); font-size: 10.5px; }
.market-metric-card strong { display: block; margin: 8px 0 5px; font-size: 20px; overflow-wrap: anywhere; }

.market-content-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, .72fr); gap: 18px; align-items: start; }
.market-radar-panel,
.market-portfolio-panel,
.market-trades-panel { min-width: 0; padding: 22px; }
.market-panel-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 16px; }
.market-panel-heading h3,
.market-portfolio-panel h3 { margin-top: 6px; font-size: 17px; }
.market-panel-note { color: var(--text-muted); font-size: 10.5px; white-space: nowrap; }
.market-dex-heading-tools { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.market-dex-timeframes { display: inline-flex; padding: 3px; border: 1px solid var(--glass-border); border-radius: 10px; background: rgba(255,255,255,.018); }
.market-dex-timeframes button { min-width: 42px; padding: 6px 9px; border: 0; border-radius: 7px; color: var(--text-muted); background: transparent; font: inherit; font-size: 9.5px; font-weight: 800; cursor: pointer; }
.market-dex-timeframes button:hover { color: #fff; }
.market-dex-timeframes button.active { color: #fff; background: #7928ca; box-shadow: 0 4px 14px rgba(121,40,202,.24); }
.market-chain-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.market-chain-btn {
    border: 1px solid var(--glass-border);
    border-radius: 999px;
    padding: 6px 10px;
    color: var(--text-muted);
    background: rgba(255,255,255,.025);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    text-transform: capitalize;
}
.market-chain-btn.active { color: #fff; border-color: rgba(138,43,226,.5); background: rgba(138,43,226,.18); }
.market-table-wrap { width: 100%; overflow-x: auto; }
.market-table { width: 100%; min-width: 660px; border-collapse: collapse; }
.market-table th { padding: 10px 12px; color: var(--text-muted); font-size: 9.5px; letter-spacing: .7px; text-align: left; text-transform: uppercase; border-bottom: 1px solid var(--glass-border); }
.market-table td { padding: 13px 12px; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.04); }
.market-table tbody tr { cursor: pointer; transition: background .15s ease; }
.market-table tbody tr:hover { background: rgba(138,43,226,.07); }
.market-table-empty { color: var(--text-muted); text-align: center; cursor: default; }
.market-token-cell { display: flex; align-items: center; gap: 9px; }
.market-token-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--accent-cyan); background: rgba(0,240,255,.08); font-size: 10px; font-weight: 800; }
.market-token-cell small { display: block; margin-top: 2px; color: var(--text-muted); text-transform: capitalize; }
.market-flow-chip { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.market-flow-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.market-positive { color: var(--positive); }
.market-negative { color: var(--negative); }
.market-neutral { color: var(--accent-cyan); }
.market-portfolio-panel { display: block; }
.market-portfolio-content { margin: 14px 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.6; }
.market-portfolio-match { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.market-connect-btn { width: 100%; margin-top: 0; }
.market-portfolio-panel > small { margin-top: 10px; color: var(--text-muted); font-size: 9.5px; line-height: 1.45; }
.market-trade-explainer {
    margin: -4px 0 12px;
    max-width: 920px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.55;
}
.market-trade-age { color: var(--text-muted); white-space: nowrap; }
.market-radar-panel .market-table { min-width: 760px; }
.market-analyze-btn {
    border: 1px solid rgba(138,43,226,.52);
    border-radius: 8px;
    padding: 6px 9px;
    color: #e8d9ff;
    background: rgba(138,43,226,.16);
    font-size: 9.5px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.market-analyze-btn:hover { border-color: rgba(176,107,255,.9); background: rgba(138,43,226,.3); transform: translateY(-1px); }
.market-analyze-btn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

/* Social sources stay separate from the private AI Agent conversation. */
.market-sentiment-panel { min-width: 0; padding: 22px; }
.market-sentiment-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 16px; }
.market-sentiment-heading h3 { margin-top: 6px; font-size: 17px; }
.market-sentiment-window-tabs {
    display: inline-flex;
    flex-shrink: 0;
    gap: 3px;
    padding: 4px;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    background: rgba(0,0,0,.22);
}
.market-sentiment-window-tabs button {
    min-width: 44px;
    padding: 7px 10px;
    border: 0;
    border-radius: 7px;
    color: var(--text-muted);
    background: transparent;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}
.market-sentiment-window-tabs button.active { color: #fff; background: rgba(138,43,226,.38); }
.market-sentiment-analysis {
    min-width: 0;
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid rgba(0,240,255,.12);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(138,43,226,.08), rgba(0,240,255,.035));
}
.market-sentiment-analysis-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.market-sentiment-analysis-head > div { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.market-sentiment-direction { font-size: 12px; font-weight: 850; color: var(--accent-cyan); }
.market-sentiment-direction.bullish { color: var(--positive); }
.market-sentiment-direction.bearish { color: var(--negative); }
.market-sentiment-confidence { color: var(--text-muted); font-size: 9px; }
.market-sentiment-score-wrap { display: grid !important; justify-items: end; gap: 4px !important; flex-shrink: 0; }
.market-sentiment-score-wrap > span { color: var(--text-muted); font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.market-sentiment-score { font-size: 20px; line-height: 1; }
.market-sentiment-score small { margin-left: 2px; color: var(--text-muted); font-size: 9px; font-weight: 500; }
.market-sentiment-score.positive { color: var(--positive); }
.market-sentiment-score.negative { color: var(--negative); }
.market-sentiment-score.neutral { color: var(--accent-cyan); }
.market-sentiment-analysis > p { margin-top: 10px; color: rgba(255,255,255,.78); font-size: 11px; line-height: 1.58; }
.market-sentiment-analysis > small { display: block; margin-top: 11px; color: rgba(255,255,255,.36); font-size: 8.8px; }
.market-sentiment-analysis-loading { color: var(--text-muted); font-size: 10.5px; }
.market-sentiment-themes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.market-sentiment-themes span { padding: 5px 8px; border-radius: 7px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.045); font-size: 8.8px; }
.market-sentiment-feed-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.market-sentiment-feed-heading strong { font-size: 11px; }
.market-sentiment-feed-heading span { color: var(--text-muted); font-size: 9px; }
.market-fng-inline {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,.07);
}
.market-fng-inline > div:first-child { display: grid; gap: 5px; }
.market-fng-inline > div:first-child > strong { color: rgba(255,255,255,.86); font-size: 12px; }
.market-fng-reading { display: flex; align-items: baseline; gap: 8px; }
.market-fng-reading strong { color: var(--accent-cyan); font-size: 22px; line-height: 1; }
.market-fng-reading small { color: var(--text-muted); font-size: 10px; }
.market-fng-inline[data-zone="fear"] .market-fng-reading strong { color: var(--negative); }
.market-fng-inline[data-zone="greed"] .market-fng-reading strong { color: var(--positive); }
.market-sentiment-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.market-sentiment-post {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 12px;
    background: rgba(255,255,255,.018);
}
.market-sentiment-post > div { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.market-sentiment-post a { min-width: 0; text-decoration: none; }
.market-sentiment-post strong { color: var(--accent-cyan); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; }
.market-sentiment-post span { color: var(--text-muted); font-size: 9px; white-space: nowrap; }
.market-sentiment-post p { color: rgba(255,255,255,.78); font-size: 10.5px; line-height: 1.5; overflow-wrap: anywhere; }
.market-sentiment-empty { grid-column: 1 / -1; padding: 22px; color: var(--text-muted); font-size: 11px; text-align: center; }
.market-sentiment-status { margin-top: 11px; color: rgba(255,255,255,.34); font-size: 9px; }
.market-sentiment-more { display: block; min-width: 130px; margin: 14px auto 0; }
.market-sentiment-more[hidden] { display: none !important; }

@keyframes settings-card-focus-pulse {
    0% { border-color: rgba(0,240,255,.5); box-shadow: 0 0 0 0 rgba(0,240,255,.18); }
    100% { border-color: var(--glass-border); box-shadow: 0 0 0 12px rgba(0,240,255,0); }
}
.settings-card.settings-card-focus { animation: settings-card-focus-pulse .8s ease-out; }

.market-dex-pulse-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.market-dex-pulse-card { min-width: 0; padding: 16px; border: 1px solid rgba(255,255,255,.055); border-radius: 15px; background: rgba(4,4,8,.35); }
.market-dex-pulse-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.market-dex-pressure { font-size: 10px; font-weight: 800; text-align: right; }
.market-dex-balance { position: relative; height: 7px; margin-top: 15px; border-radius: 99px; overflow: hidden; background: var(--negative); }
.market-dex-balance span { position: absolute; inset: 0 0 0 auto; width: var(--buy-share); background: var(--positive); }
.market-dex-share-labels { display: flex; justify-content: space-between; margin-top: 6px; color: var(--text-muted); font-size: 8.5px; }
.market-dex-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.market-dex-metrics > div { min-width: 0; padding: 9px; border-radius: 9px; background: rgba(255,255,255,.022); }
.market-dex-metrics span,.market-dex-metrics small { display: block; color: var(--text-muted); font-size: 8.5px; }
.market-dex-metrics strong { display: block; margin-top: 4px; font-size: 12px; overflow-wrap: anywhere; }
.market-dex-context { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--text-muted); font-size: 8.8px; }
.market-dex-context span:last-child { flex-shrink: 0; font-weight: 700; }
.market-dex-pulse-empty { grid-column: 1 / -1; padding: 28px; color: var(--text-muted); font-size: 11px; text-align: center; }

@media (max-width: 680px) {
    .market-trades-panel .market-panel-heading { align-items: flex-start; flex-direction: column; }
    .market-dex-heading-tools { width: 100%; align-items: flex-start; }
    .market-dex-heading-tools .market-panel-note { white-space: normal; }
}

/* On-demand professional research tools -------------------------------- */
.research-lab-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 28px;
}
.research-lab-hero { padding-top: 4px; }
.research-tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}
.research-tool-card {
    min-width: 0;
    padding: 24px;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(18, 10, 30, .84), rgba(7, 14, 18, .82));
}
.research-tool-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 12px;
}
.research-tool-heading h3 { margin-top: 5px; font-size: 19px; }
.research-tool-card > p {
    min-height: 62px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.6;
}
.research-field-label {
    display: block;
    margin: 17px 0 7px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}
.research-control-row,
.research-wallet-controls {
    display: grid;
    gap: 9px;
}
.research-control-row { grid-template-columns: minmax(0, 1fr) auto; }
.research-wallet-controls { grid-template-columns: 130px minmax(0, 1fr) auto; }
.research-control-row .glass-select,
.research-wallet-controls .glass-select { min-width: 0; width: 100%; }
.research-control-row .primary-btn,
.research-wallet-controls .primary-btn {
    width: auto;
    min-width: 126px;
    margin: 0;
    padding-inline: 17px;
    white-space: nowrap;
}
.research-result {
    margin-top: 18px;
    min-height: 214px;
    padding: 17px;
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    background: rgba(3, 3, 7, .36);
}
.research-result.research-empty,
.research-result.research-loading,
.research-result.research-error {
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.6;
}
.research-result.research-loading { color: var(--accent-cyan); }
.research-result.research-error { color: var(--negative); }
.research-result-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}
.research-result-heading h4 { margin-top: 5px; font-size: 17px; }
.research-score {
    flex-shrink: 0;
    padding: 7px 10px;
    border: 1px solid currentColor;
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    font-size: 12px;
    font-weight: 800;
}
.research-metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.research-metric {
    min-width: 0;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.045);
    border-radius: 11px;
    background: rgba(255,255,255,.02);
}
.research-metric span,
.research-metric small { display: block; color: var(--text-muted); font-size: 9.5px; }
.research-metric strong { display: block; margin: 6px 0 4px; font-size: 15px; overflow-wrap: anywhere; }
.research-detail-line { margin-top: 11px; color: var(--text-muted); font-size: 10.5px; line-height: 1.5; }
.research-detail-line strong { display: block; margin-bottom: 3px; color: #fff; font-size: 10px; }
.research-footnote { margin-top: 12px; color: var(--text-muted); font-size: 9.5px; line-height: 1.55; }

@media (max-width: 980px) {
    .market-overview-grid,
    .market-content-grid,
    .research-tool-grid { grid-template-columns: 1fr; }
    .market-sentiment-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .market-portfolio-panel { min-height: 0; }
}
@media (max-width: 680px) {
    .ai-view-tabs { display: flex; width: 100%; overflow-x: auto; }
    .ai-view-tab { flex: 1 0 auto; }
    .market-intelligence-hero { align-items: flex-start; flex-direction: column; }
    .market-source-block { align-items: flex-start; }
    .market-regime-heading { align-items: center; }
    .market-metric-grid { grid-template-columns: 1fr; }
    .market-panel-heading { align-items: flex-start; flex-direction: column; }
    .market-chain-filters { justify-content: flex-start; }
    .market-radar-panel,
    .market-portfolio-panel,
    .market-trades-panel { padding: 16px; }
    .research-tool-card { padding: 17px; }
    .research-tool-card > p { min-height: 0; }
    .research-control-row,
    .research-wallet-controls { grid-template-columns: 1fr; }
    .research-control-row .primary-btn,
    .research-wallet-controls .primary-btn { width: 100%; }
    .research-metric-grid { grid-template-columns: 1fr; }
    .market-sentiment-heading { align-items: flex-start; flex-direction: column; }
    .market-sentiment-feed-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
    .market-sentiment-posts,
    .market-dex-pulse-grid { grid-template-columns: 1fr; }
    .market-dex-context { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 420px) {
    .market-sentiment-analysis-head { align-items: flex-start; flex-direction: column; }
    .market-sentiment-score-wrap { justify-items: start; }
    .market-sentiment-panel { padding: 16px; }
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  background-color: var(--bg-base);
  color: var(--text-main);
  height: 100vh;
  overflow: hidden;
  position: relative;
}

body::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at 50% 50%, rgba(138, 43, 226, 0.12), transparent 40%), radial-gradient(circle at 80% 20%, rgba(0, 240, 255, 0.08), transparent 30%);
  z-index: -1;
  filter: blur(80px);
  animation: drift 25s infinite alternate ease-in-out;
}

@keyframes drift {
  0% { transform: rotate(0deg) scale(1); }
  100% { transform: rotate(15deg) scale(1.1); }
}

.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  transition: border-color 0.3s ease;
}

.glass-panel:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.app-container {
  display: flex;
  height: 100vh;
  padding: 24px;
  gap: 24px;
  flex-direction: row;
}

/* Sidebar Styling */
.sidebar {
  width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 250;
  transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 48px;
  background: linear-gradient(90deg, #fff, var(--text-muted));
  -webkit-background-clip: text;
  background-clip: text; 
  -webkit-text-fill-color: transparent;
  color: transparent; 
}

.nav-links {
  list-style: none;
}

.online-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--positive);
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(0, 255, 150, 0.6);
  animation: online-pulse 2s infinite;
}

.online-dot.offline {
  background: var(--negative);
  box-shadow: 0 0 0 0 rgba(255, 51, 102, 0.6);
  animation: offline-pulse 2s infinite;
}

.status-text {
  font-size: 11px;
  font-weight: 600;
  margin-left: 2px;
  vertical-align: middle;
}

.online-text { color: var(--positive); }
.offline-text { color: var(--negative); }

@keyframes online-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 255, 150, 0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(0, 255, 150, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 255, 150, 0); }
}

@keyframes offline-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(255, 51, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0); }
}

.loading-dot {
  opacity: 0.2;
  animation: loading-dot-fade 1.4s infinite;
}

.loading-dot:nth-child(1) { animation-delay: 0s; }
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes loading-dot-fade {
  0%, 80%, 100% { opacity: 0.2; }
  40%           { opacity: 1; }
}

.nav-links li {
  padding: 16px 20px;
  margin-bottom: 8px;
  border-radius: 16px;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nav-links li:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(4px);
}

/* Replace the existing .nav-links li.active block with this */
.nav-links li.active {
  color: var(--text-main); /* Keeps text white */
  background: rgba(0, 240, 255, 0.08); /* Very subtle cyan background */
  border-left: 4px solid var(--accent-cyan); /* A nice teal accent line on the left */
  box-shadow: inset 15px 0 20px -15px rgba(0, 240, 255, 0.2); /* Soft inner glow */
  border-radius: 4px 16px 16px 4px; /* Squares off the left edge to match the border */
}

/* Optional: Make the hover effect slightly more noticeable to match */
.nav-links li:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(6px);
}

/* RESTORED: Locked AI Menu Link */
.locked-nav {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: auto; /* Allows clicking to trigger the upgrade modal */
}
.locked-nav:hover {
  background: transparent !important;
  transform: none !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
}

.pro-badge {
  background: var(--accent-purple);
  color: #fff;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 8px;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;
}

.pro-upsell {
  background: rgba(138, 43, 226, 0.1);
  border: 1px solid rgba(138, 43, 226, 0.3);
  padding: 20px;
  border-radius: 20px;
  text-align: center;
}

.pro-upsell p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 12px 0;
}

.pro-upsell button {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: none;
  background: var(--accent-purple);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.pro-upsell button:hover {
  background: #9d4edd;
  box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
}

/* Main Content Area */
.main-content {
  flex-grow: 1;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

.main-content::-webkit-scrollbar { width: 10px; }
.main-content::-webkit-scrollbar-track { background: transparent; }
.main-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
.main-content::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.3); }

.view {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  min-height: 0;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.hidden-view {
  display: none !important;
  opacity: 0;
}

/* Dashboard Header Widgets */
.header-row {
  display: flex;
  gap: 24px;
  flex-direction: column;
}

.balance-container {
  flex: 1;
}

.pnl-widget {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pnl-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.pnl-timeframes {
  display: flex;
  background: rgba(0,0,0,0.3);
  padding: 4px;
  border-radius: 12px;
}

.pnl-tf-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: 0.2s;
}

.pnl-tf-btn.active, .pnl-tf-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.label {
  font-size: 14px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.balance {
  font-size: 48px;
  font-weight: 800;
  margin: 8px 0;
  letter-spacing: -1px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.change {
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.positive { color: var(--positive); }
.negative { color: var(--negative); }

.pnl-value { font-size: 32px; font-weight: 800; margin-bottom: 4px; overflow-wrap: break-word; word-break: break-word; }
.pnl-perc { font-size: 16px; font-weight: 600; }

/* Dashboard Grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  flex-grow: 1;
  min-height: 0; 
}

/* Chart Area */
.chart-container {
  display: flex;
  flex-direction: column;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.timeframe-selector {
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);
  padding: 6px;
  border-radius: 16px;
}

.tf-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
}

.tf-btn:hover, .tf-btn.active {
  background: var(--glass-border);
  color: var(--text-main);
}

/* Chart mode toggle (Net Worth / PnL) — sits next to the timeframe selector,
   same pill styling so it reads as a matched pair of controls rather than two
   unrelated widgets. */
.chart-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chart-mode-selector {
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);
  padding: 6px;
  border-radius: 16px;
}

.mode-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 8px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: inherit;
  font-family: inherit;
  transition: all 0.2s ease;
}

.mode-btn:hover, .mode-btn.active {
  background: var(--glass-border);
  color: var(--text-main);
}

/* Assets List */
.assets-container {
  display: flex;
  flex-direction: column;
  overflow: hidden; 
}

.assets-container h2 {
  margin-bottom: 20px;
  flex-shrink: 0;
}

.asset-list {
  list-style: none;
  overflow-y: auto; 
  padding-right: 8px;
  flex-grow: 1;
}

.asset-list::-webkit-scrollbar { width: 6px; }
.asset-list::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 10px; }
.asset-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
.asset-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

.asset-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  margin-bottom: 12px;
  transition: transform 0.2s ease, background 0.2s ease;
}

.asset-item:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.05);
}

.asset-info { display: flex; flex-direction: column; }
.asset-symbol { font-weight: 800; font-size: 18px; }
.asset-symbol.position-long { color: var(--positive); }
.asset-symbol.position-short { color: var(--negative); }
.asset-name { color: var(--text-muted); font-size: 14px; margin-top: 4px; }
.asset-values { text-align: right; }
.asset-price { font-weight: 600; font-size: 16px; }

/* Tables */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; color: var(--text-muted); padding: 16px; border-bottom: 1px solid var(--glass-border); font-weight: 600; }
.data-table td { padding: 16px; border-bottom: 1px solid rgba(255,255,255,0.02); }

.tx-type { font-weight: 800; }
.tx-type.buy { color: var(--positive); }
.tx-type.sell { color: var(--negative); }

/* Common UI Elements */
.primary-btn {
  background: var(--accent-purple);
  color: #fff;
  border: 1px solid rgba(184, 116, 255, 0.28);
  padding: 16px 24px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, filter 0.2s ease;
  width: 100%;
}

.primary-btn:hover {
  transform: translateY(-2px);
  background: #9d4edd;
  box-shadow: 0 10px 24px rgba(138, 43, 226, 0.32);
}

.primary-btn:focus-visible {
  outline: 2px solid rgba(190, 128, 255, 0.9);
  outline-offset: 3px;
}

.primary-btn:active {
  transform: translateY(0);
}



/* Toggle Switch */
.switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.1); transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: var(--accent-cyan); }
input:checked + .slider:before { transform: translateX(22px); background-color: #000;}

/* Drawer & Modal Styling */
.modal-overlay, .drawer-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
  z-index: 1000; display: flex; justify-content: center; align-items: center;
}

/* Dialogs stay above off-canvas navigation. Openers also close the menu,
   but this prevents any late mobile transition from covering a modal. */
.modal-overlay {
  z-index: 1100;
  box-sizing: border-box;
  padding: 12px;
  overflow-y: auto;
}

.hidden { display: none !important; }

/* RESTORED: Connect Wallet & Quick Trade Modal Backgrounds */
.modal {
  background: rgba(10, 10, 15, 0.98) !important; 
  border: 1px solid var(--glass-border);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.8);
  border-radius: 24px;
  padding: 32px;
  width: 100%; 
  max-width: 420px;
  max-height: calc(100dvh - 24px);
  margin: auto;
  overflow-y: auto;
  box-sizing: border-box;
  transform: translateY(0); 
  transition: transform 0.3s ease;
}

.modal-header, .drawer-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;
}

/* RESTORED: Modal Close Buttons (✕) */
.icon-btn {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.icon-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #fff !important;
  transform: scale(1.05);
}

.side-drawer {
  position: fixed; top: 0; height: 100%; height: 100dvh;
  width: min(480px, calc(100vw - 24px)); box-sizing: border-box;
  z-index: 1001; transition: transform 0.35s ease;
  background: rgba(3,3,5,0.98); padding: 30px;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  border-left: 1px solid var(--glass-border);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.right-drawer { right: 0; transform: translateX(calc(100% + 24px)); border-radius: 28px 0 0 28px; }
.right-drawer.open { transform: translateX(0); }

.setting-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }

.drawer-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings-kicker,
.settings-section-label {
  display: block;
  color: var(--accent-cyan);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.settings-kicker { margin-bottom: 5px; }

.settings-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 18px;
  background: rgba(255,255,255,0.022);
}

.settings-card-featured {
  border-color: rgba(138,43,226,0.3);
  background: linear-gradient(135deg, rgba(138,43,226,0.085), rgba(0,240,255,0.025));
}

.settings-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.settings-card h3,
.setting-info h3 {
  margin: 4px 0 0;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.3;
}

.settings-card .setting-info p,
.settings-explainer,
.recovery-method-row p,
.recovery-modal-copy {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.settings-card .setting-item {
  padding: 4px 0 13px;
}

.settings-card .setting-item:last-child { border-bottom: 0; padding-bottom: 0; }
.setting-item-stack { flex-direction: column; align-items: stretch; gap: 10px; }

.account-access-badge,
.connection-status-badge {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  font-size: 9.5px;
  font-weight: 800;
  white-space: nowrap;
}

.account-access-badge.is-safe,
.connection-status-badge.is-connected {
  border-color: rgba(0,255,157,0.25);
  color: #76f6ae;
  background: rgba(0,255,157,0.075);
}

.account-access-badge.is-warning {
  border-color: rgba(255,184,77,0.3);
  color: #ffc56a;
  background: rgba(255,184,77,0.075);
}

.access-warning {
  display: none;
  padding: 11px 12px;
  border: 1px solid rgba(255,184,77,0.24);
  border-radius: 12px;
  background: rgba(255,184,77,0.065);
  color: #e9c891;
  font-size: 11.5px;
  line-height: 1.5;
}

.access-warning.is-warning { display: block; }

.access-method-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.access-method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
}

.access-method-copy { min-width: 0; }
.access-method-copy strong { display: block; font-size: 12px; }
.access-method-copy span { display: block; overflow: hidden; color: var(--text-muted); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }

.settings-secondary-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}
.session-current-badge {
  display: inline-flex !important;
  margin-left: 6px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #76f6ae !important;
  background: rgba(0,255,157,0.09);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.settings-button-row {
  display: flex;
  gap: 8px;
  width: 100%;
}

.settings-secondary-btn,
.settings-danger-btn,
.text-action-btn,
.settings-link-btn {
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--text-primary);
  background: rgba(255,255,255,0.045);
  font: inherit;
  cursor: pointer;
}

.settings-secondary-btn,
.settings-danger-btn {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 700;
}

.settings-danger-btn,
.text-action-btn.danger { color: #ff7e9a; border-color: rgba(255,51,102,0.2); }
.settings-full-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none; }

.recovery-method-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.recovery-method-row strong { font-size: 12px; }
.recovery-method-actions { display: flex; gap: 6px; }
.text-action-btn { padding: 6px 9px; border-radius: 8px; font-size: 10.5px; font-weight: 700; }
.settings-link-btn { padding: 2px 0; border: 0; color: var(--accent-cyan); background: transparent; font-size: 11px; text-align: left; }

.remove-wallet-btn {
  flex: 0 0 auto;
  border: 0;
  color: #ff7e9a;
  background: transparent;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
}

.recovery-modal { max-width: 480px; }
.recovery-modal-copy { margin-bottom: 16px; }
.recovery-key-input { margin-bottom: 12px; font-family: 'Courier New', monospace; letter-spacing: .02em; }
.recovery-key-output { margin: 8px 0 12px; min-height: 80px; resize: none; font-family: 'Courier New', monospace; line-height: 1.5; word-break: break-all; }

.device-link-modal { max-width: 520px; }
.device-link-view { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.device-link-lead,
.mobile-wallet-action-modal p { color: var(--text-muted); font-size: 13.5px; line-height: 1.6; }
.device-link-qr-shell {
    width: min(300px, 82vw);
    aspect-ratio: 1;
    margin: 2px auto;
    padding: 14px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .35), 0 0 0 1px rgba(118, 227, 244, .18);
}
.device-link-qr-shell img { display: block; width: 100%; height: 100%; object-fit: contain; }
.device-link-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 700;
}
.device-link-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 0 0 rgba(118, 227, 244, .45);
    animation: device-link-pulse 1.8s infinite;
}
@keyframes device-link-pulse {
    70% { box-shadow: 0 0 0 8px rgba(118, 227, 244, 0); }
    100% { box-shadow: 0 0 0 0 rgba(118, 227, 244, 0); }
}
.device-link-security {
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.55;
    text-align: center;
}
.device-link-target {
    padding: 16px;
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
}
.device-link-target span { display: block; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.device-link-target strong { display: block; color: var(--text-primary); font-size: 17px; }
.device-link-actions { display: flex; flex-direction: column; gap: 9px; }
.device-link-actions p { color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }
.device-link-direction { color: var(--text-primary); font-size: 14px; margin: 2px 0 -4px; }
.device-link-steps { display: grid; gap: 12px; padding-left: 24px; color: var(--text-muted); font-size: 13.5px; line-height: 1.55; }
.device-link-steps strong { color: var(--text-primary); }
#accountSessionsSection > .settings-full-btn + .settings-full-btn { margin-top: 8px; }
.mobile-wallet-action-modal { max-width: 460px; }
.mobile-wallet-mark {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    margin: 16px auto;
    border-radius: 20px;
    border: 1px solid rgba(118, 227, 244, .24);
    background: rgba(118, 227, 244, .07);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 800;
}
.mobile-wallet-action-modal > p { margin-bottom: 16px; text-align: center; }

@media (max-width: 520px) {
    .device-link-modal,
    .mobile-wallet-action-modal { width: calc(100vw - 24px); padding: 20px; }
    .device-link-qr-shell { width: min(260px, 76vw); padding: 10px; border-radius: 18px; }
}

/* Forms & Selects */
.glass-select {
  background: rgba(0,0,0,0.3); border: 1px solid var(--glass-border); color: #fff;
  padding: 10px; border-radius: 8px; width: 100%; outline: none; font-family: inherit;
}
.glass-select option { background: var(--bg-base); color: #fff; }

/* AI Title Animation */
.ai-title {
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; 
  animation: pulseColor 4s infinite alternate;
}
@keyframes pulseColor {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(30deg); }
}

/* Pair Buttons (Charts view) */
.page-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.pair-btn {
  background: transparent; border: 1px solid var(--glass-border); color: var(--text-muted);
  padding: 8px 16px; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: 0.2s;
}
.pair-btn.active, .pair-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Exchange picker (Connect Account modal) — MEXC / Coinbase / Kraken */
.exchange-pick-btn {
  /* Row wraps (see #exchangePickerRow) so 5 exchange buttons in a 320px
     drawer settle into 3-then-2 instead of squeezing onto one cramped line. */
  flex: 1 1 calc(33.333% - 6px);
  min-width: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  padding: 10px 8px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: 0.15s;
}
.exchange-pick-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.exchange-pick-btn.active {
  background: rgba(138, 43, 226, 0.15);
  border-color: var(--accent-purple);
  color: #fff;
}
.exchange-pick-region {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
}
.exchange-pick-btn.active .exchange-pick-region { color: var(--accent-cyan); }

/* Plan picker (PRO upgrade modal) — Monthly / Quarterly / Annual, same
   visual language as the exchange picker above for consistency. */
.plan-pick-btn {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  padding: 14px 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.15s;
}
.plan-pick-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.plan-pick-btn.active {
  background: rgba(138, 43, 226, 0.15);
  border-color: var(--accent-purple);
  color: #fff;
}
.plan-pick-name {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.plan-pick-price {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
}
.plan-pick-period {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 1px;
}
.plan-pick-badge {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* ==========================================
   AI Market Sentiment Dashboard
========================================== */
.ai-dashboard-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 32px;
    align-items: stretch;
}

#view-ai {
    position: relative;
    height: auto;
}

.gauge-container {
    position: relative;
    width: 120px;
    height: 64px;
    flex-shrink: 0;
}
.gauge-svg { width: 100%; height: 100%; overflow: visible; }
.gauge-bg { fill: none; stroke: var(--glass-border); stroke-width: 10; stroke-linecap: round; }
.gauge-fill {
    fill: none;
    stroke: var(--accent-cyan);
    stroke-width: 10;
    stroke-linecap: round;
}
.gauge-value-text {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}
.gauge-sublabel {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}

.narrative-box {
    margin-top: 24px;
    padding: 16px;
    background: rgba(0, 240, 255, 0.05);
    border-left: 4px solid var(--accent-cyan);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #e0e0e0;
}

.signal-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.signal-pill {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,0.03);
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}

.signal-pill-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-circle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.signal-pill .indicator { font-weight: 600; color: var(--text-muted); font-size: 14px;}
.signal-pill .value { font-weight: 800; font-size: 14px;}

.signal-pill.bullish .status-circle { background-color: var(--positive); box-shadow: 0 0 8px var(--positive); }
.signal-pill.bullish .value { color: var(--positive); }

.signal-pill.bearish .status-circle { background-color: var(--negative); box-shadow: 0 0 8px var(--negative); }
.signal-pill.bearish .value { color: var(--negative); }

.signal-pill.neutral .status-circle { background-color: #f39c12; box-shadow: 0 0 8px #f39c12; }
.signal-pill.neutral .value { color: #f39c12; }

.trade-section.hidden { display: none; }

/* RESTORED: Quick Trade Modal Tabs */
.trade-tab {
    transition: background 0.2s ease, color 0.2s ease;
}
.trade-tab:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
}
.trade-tab.active { background: rgba(255,255,255,0.1) !important; color: #fff !important; }

/* Ensure CEX and Modal buttons match the "Upgrade" style */
.cex-btn {
    background: var(--accent-purple) !important;
    color: #ffffff !important; /* Forces white text */
    border: none !important;
    font-weight: 800;
}

.cex-btn:hover {
    background: #9d4edd !important;
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.4);
}

/* Unified Modal Style */
.modal.glass-panel {
    background: rgba(10, 10, 15, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.9);
}

/* Pro modal gets the purple border specifically */
#proModal .modal.glass-panel {
    border: 1px solid rgba(138, 43, 226, 0.4) !important;
    /* Feature list grew (full PRO benefits, not just a 4-line teaser) —
       cap the height and let it scroll instead of overflowing short viewports. */
    max-height: 90vh;
    overflow-y: auto;
}

.modal h2 {
    background: linear-gradient(90deg, #fff, var(--accent-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}



/* =========================================
   DESKTOP & GLOBAL OVERRIDES
   (These apply to large screens)
   ========================================= */
html {
    height: 100%;
}

body {
    overflow: hidden; /* Keep locked on desktop — main-content scrolls internally */
    overflow-x: hidden;
}

/* A short desktop window can contain more navigation than the sidebar's
   available height. Keep the lower actions reachable instead of clipping
   them below the viewport. Mobile returns to normal document scrolling. */
@media screen and (min-width: 769px) {
    .sidebar {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
    }
}

.app-container {
    display: flex !important;
    flex-direction: row !important; /* Forces desktop to side-by-side */
    height: 100vh;
}

.header-widgets {
    justify-content: space-between !important;
    align-items: stretch;
    flex-direction: row !important;
}

/* Ensure Desktop Chart Header & Timeframes remain horizontal */
.chart-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.timeframe-selector {
    display: flex !important;
    flex-direction: row !important;
    overflow: visible !important;
}

.chart-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

.hide-desktop {
    display: none !important;
}

/* =========================================
   MOBILE VIEW ONLY (Max Width 768px)
   ========================================= */
@media screen and (max-width: 768px) {

    /* 0. Allow page scrolling on mobile */
    html, body {
        height: auto !important;
        overflow: visible !important;
        overflow-y: auto !important;
        /* Off-canvas drawers (settings, etc.) sit past the right edge via
           `right: -350px` on a fixed element — without clipping X here,
           that still expands the page's horizontal scroll range, letting
           the whole layout drift sideways and cut off content on mobile. */
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* 1. Unlock layout constraints for mobile scrolling */
    .app-container, .main-content {
        height: auto !important;
        overflow: visible !important;
        overflow-x: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        gap: 16px !important;
    }

    .app-container {
        padding: 12px !important;
    }

    /* 🚨 CRITICAL FIX: Hide inactive views completely so they leave ZERO empty space 🚨 */
    .view {
        height: auto !important;
        overflow: visible !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        padding: 0 !important;
    }

    .view.hidden-view {
        display: none !important;
    }

    .view:not(.hidden-view) {
        display: flex !important;
    }

    #mobileMenuBtn {
        display: flex !important;
        flex: 0 0 auto;
    }

    /* 2. Compact off-canvas navigation. The previous mobile rule rendered
       the entire desktop sidebar above every page, consuming most of the
       screen before the actual content and making a narrowed desktop window
       look as if content had disappeared. */
    .sidebar {
        position: fixed !important;
        top: 12px !important;
        bottom: 12px !important;
        left: 0 !important;
        width: min(330px, calc(100vw - 24px)) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 20px !important;
        display: flex !important;
        box-sizing: border-box;
        z-index: 1002;
        overflow-y: auto;
        transform: translateX(calc(-100% - 24px));
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .sidebar.open {
        transform: translateX(12px);
    }

    .sidebar .logo {
        display: block !important;
        text-align: center;
        margin-bottom: 20px;
        font-size: 22px;
    }

    .pro-upsell:not(.hidden) {
        display: block !important;
        margin-top: 24px;
        width: 100%;
        text-align: center;
    }

    /* 3. Main Dashboard Header & PnL */
    .header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-bottom: 24px;
    }

    .header-widgets {
        flex-direction: column !important;
        width: 100% !important;
        align-items: stretch !important;
        gap: 16px !important;
    }

    .balance-container, .pnl-widget, .health-widget {
        width: 100% !important;
        margin-right: 0 !important;
        min-height: 108px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Real balances/PnL can be long numbers ($XXX,XXX.XX) — at their desktop
       font sizes those can render wider than a narrow screen and push the
       whole page sideways. Shrink them here instead of letting them overflow. */
    .balance {
        font-size: 32px !important;
    }

    .pnl-value {
        font-size: 24px !important;
    }

    .health-widget {
        padding: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    /* 4. Dashboard Chart & Assets */
    .dashboard-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    .bento-large {
        min-height: auto !important;
        width: 100% !important;
        padding: 15px !important;
        box-sizing: border-box;
    }

    /* Only the dashboard performance chart needs a tall fixed area to render into */
    .chart-container.bento-large {
        min-height: 480px !important;
    }

    .chart-container {
        height: 400px !important;
        min-height: 400px !important;
        width: 100% !important;
    }

    .chart-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .chart-controls {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
    }

    .timeframe-selector, .chart-mode-selector {
        width: 100% !important;
        overflow-x: auto !important;
        justify-content: space-between !important;
        padding: 4px !important;
    }

    .tf-btn, .mode-btn {
        padding: 6px 10px !important;
        font-size: 13px !important;
        flex: 1;
        text-align: center;
    }

    .assets-container, .asset-list {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .bento-medium {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
    }

    /* =========================================
       PAGE-SPECIFIC MOBILE FIXES
       ========================================= */

    /* AI Insights Page Fixes */
    .ai-dashboard-top {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        margin-bottom: 16px !important;
    }
    
    .ai-title {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    /* First pass trimmed the desktop 32px down to 14px, which was the right
       call — second pass over-corrected to 8px, which felt too tight and
       out of sync with the rest of the app. Back to 14px. */
    #view-ai .ai-roadmap-banner {
        padding: 14px !important;
    }

    /* Safety net: clamp every panel in the PRO AI Insights page to the
       screen width. Chart.js canvases and the YouTube iframe can briefly
       report a desktop-sized box while the page is still settling, which
       is enough to widen the whole document on mobile. */
    .ai-roadmap-banner,
    .ai-roadmap-split,
    .ai-roadmap-col,
    .media-panel,
    .media-panel-body,
    .media-panel-video-wrap,
    .divergence-panel,
    .divergence-chart-area,
    .sentiment-panel,
    .ai-terminal-panel,
    .ai-flows-panel,
    .ai-sentiment-panel {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Trading AI Agent roadmap banner — everything stacked, fixed heights */
    .ai-roadmap-split {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
    }

    /* display:contents drops the column wrapper out of the box tree (its two
       children become direct flex items of .ai-roadmap-split above) so the
       4 panels can be freely reordered with `order` below — desktop's two-
       column grid doesn't use this rule at all, so it's untouched. */
    .ai-roadmap-col {
        display: contents !important;
    }

    /* Divergence and the merged AI Agent Terminal chat swap places on
       mobile (media panel stays first, the heatmap stays last) — desktop's
       side-by-side column order is correct as-is and unaffected by this. */
    .media-panel { order: 1; }
    .ai-terminal-panel:not(.liquidity-compact-panel) { order: 2; }
    .divergence-panel { order: 3; }
    .liquidity-compact-panel { order: 4; }

    .media-panel {
        height: 480px !important;
        flex: none !important;
        width: 100% !important;
    }

    .media-panel-body {
        flex-direction: column !important;
    }

    /* This row switches to horizontal-scrolling on mobile, but with 8 creator
       buttons at their natural (unwrapped) width it was never capped to the
       panel's own width — flex: 0 0 auto lets it grow to its full content
       size (~2000px+) instead of respecting the container. overflow-x:auto
       only creates a LOCAL scrollbar once the box's own size is already
       decided, so an uncapped box like this can still widen the whole page
       during layout/first paint, which is exactly what was letting the
       entire mobile view zoom/pan out and get stuck not scrolling fully to
       either edge. max-width forces it back inside the panel; the row still
       scrolls horizontally within that bound same as before. */
    .media-creator-list {
        flex: 0 0 auto !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(138, 43, 226, 0.15) !important;
    }

    .media-creator-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .divergence-panel {
        height: 460px !important;
        flex: none !important;
        width: 100% !important;
    }

    .sentiment-panel {
        height: 320px !important;
        flex: none !important;
        width: 100% !important;
    }

    /* Terminal chat was capped at 340px — barely 3-4 lines visible before
       scrolling. Given real height so more of the feed is readable at once. */
    .ai-terminal-panel {
        height: 520px !important;
        flex: none !important;
        width: 100% !important;
    }

    /* The compact Liquidity Heatmap panel has more internal rows (header,
       pair tabs, chart, AI-read strip) than the plain terminal above it, so
       it gets even more height — enough for the chart plus the AI-read
       strip's text to actually be visible instead of clipped. */
    .liquidity-compact-panel {
        height: 620px !important;
    }

    /* Desktop's chart-66%/AI-read-33% side-by-side split is too cramped on a
       phone screen — back to stacked (chart on top, AI read strip below). */
    .liquidity-compact-row {
        flex-direction: column !important;
    }

    .liquidity-heatmap-body-compact {
        flex: 1 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(138, 43, 226, 0.15) !important;
    }

    .liquidity-ai-feed-compact {
        flex: 0 0 auto !important;
        max-height: 110px !important;
    }

    /* Liquidity Heatmap (BETA) — stack the 66/33 split into two full-width panels */
    .liquidity-split {
        flex-direction: column !important;
        height: auto !important;
    }

    .liquidity-heatmap-panel,
    .liquidity-ai-panel {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 340px !important;
        box-sizing: border-box !important;
    }

    .liquidity-pair-row {
        width: 100% !important;
    }

    .whale-flow-bars, .trade-section {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Smart Money gauge, centered — no longer needs to share the row with a
       Fear & Greed bar (that moved to the AI terminal header instead), so it
       just gets a mobile-appropriate size here rather than the desktop-sized
       .gauge-container-lg. */
    .sentiment-gauge-row {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .gauge-container-lg {
        width: 160px !important;
        height: 84px !important;
    }

    .gauge-container-lg .gauge-value-text {
        font-size: 30px !important;
    }

    /* Allocation donut chart — Chart.js sets an inline canvas height that can
       run much taller than the visible ring on narrow screens; force it back down */
    .donut-wrapper {
        max-height: 180px !important;
        height: 180px !important;
        overflow: hidden !important;
    }

    .donut-wrapper canvas {
        max-height: 180px !important;
        height: 180px !important;
    }

    /* Settings drawer should use the same width as other page columns on mobile */
    .side-drawer {
        width: calc(100% - 24px) !important;
        max-width: 420px !important;
        box-sizing: border-box !important;
    }

    /* This was `right: -100%` before — a fixed-position element offset via
       `right` still contributes to the page's scrollable width even while
       sitting visually off-screen (confirmed: document.body.scrollWidth
       measured ~200px wider than the viewport with the drawer closed).
       On mobile Safari in particular that extra width is exactly what can
       make the whole page render zoomed-out to "fit" it, which reads as
       black void down the side and the page never quite scrolling to its
       real top/bottom. A transform doesn't participate in that calculation
       the same way, so the drawer now always sits at its normal right:0
       layout position and slides on/off screen visually instead. */
    .right-drawer {
        right: 0 !important;
        transform: translateX(100%) !important;
        transition: transform 0.4s ease !important;
    }

    .right-drawer.open {
        transform: translateX(0) !important;
    }

    /* Market Charts Page Fixes */
    #view-charts .glass-panel {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    #view-charts .glass-panel[style*="flex-grow"] {
        height: 600px !important; /* Increased by 1/3 for taller mobile chart */
        min-height: 600px !important;
    }

    /* Transactions Page Fixes */
    .data-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    .hide-mobile {
        display: none !important;
    }
}
/* ── Health Score Widget ───────────────────────────────────────────────── */
.health-widget {
  min-width: 130px;
  flex-shrink: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
}
.health-body {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex: 1;
}
.health-score {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}
.health-label {
  font-size: 12px;
  font-weight: 600;
}

/* ── Performers Panel ──────────────────────────────────────────────────── */
.performers-panel {
  overflow: hidden;
}
.performers-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.performer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  border-radius: 10px;
  font-size: 13px;
}
.performer-symbol { font-weight: 700; }
.performer-change { font-weight: 600; }

/* ── Donut Chart Panel ──────────────────────────────────────────────────── */
.donut-panel {
  display: flex;
  flex-direction: column;
}
.donut-wrapper {
  position: relative;
  max-height: 180px;
  display: flex;
  justify-content: center;
}
.donut-wrapper canvas {
  max-height: 180px;
}
.allocation-legend {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
}
.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Fear & Greed Bar ──────────────────────────────────────────────────── */
.fg-section {
  padding: 10px 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}
/* ── Whale Signal Bullets ─────────────────────────────────────────────── */
.whale-signals-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.whale-signal {
  padding: 14px 16px;
  border-radius: 10px;
  border-left: 4px solid transparent;
  background: rgba(255,255,255,0.02);
  transition: background .2s;
}
.whale-signal.bullish  { border-color: var(--positive); background: rgba(0,255,157,0.05); }
.whale-signal.bearish  { border-color: var(--negative); background: rgba(255,51,102,0.05); }
.whale-signal.neutral  { border-color: var(--accent-cyan); background: rgba(0,240,255,0.05); }
.whale-signal-label {
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 5px;
}
.whale-signal.bullish .whale-signal-label { color: var(--positive); }
.whale-signal.bearish .whale-signal-label { color: var(--negative); }
.whale-signal.neutral .whale-signal-label { color: var(--accent-cyan); }
.whale-signal-detail {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ── Token Deep-Dive Modal ─────────────────────────────────────────────── */
.deep-dive-modal {
  max-width: 480px;
  width: 90%;
}
.deep-dive-content {
  margin-top: 16px;
}

/* ── Explicit account merge chooser ───────────────────────────────────── */
.account-merge-modal { width: min(720px, 92vw); max-width: 720px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.account-merge-intro { margin: 14px 0 18px; color: var(--text-muted); font-size: 13px; line-height: 1.6; }
.account-merge-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-merge-choice { position: relative; display: block; padding: 16px; border: 1px solid var(--glass-border); border-radius: 14px; background: rgba(255,255,255,.025); cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.account-merge-choice:hover { transform: translateY(-1px); border-color: rgba(121,40,202,.58); }
.account-merge-choice.is-selected { border-color: #8a3ffc; background: rgba(121,40,202,.12); box-shadow: 0 0 0 1px rgba(138,63,252,.2); }
.account-merge-choice input { position: absolute; opacity: 0; pointer-events: none; }
.account-merge-choice-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.account-merge-choice-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.account-merge-signed-in { flex-shrink: 0; padding: 4px 8px; border-radius: 999px; color: #80ffb0; background: rgba(35,210,110,.1); border: 1px solid rgba(35,210,110,.28); font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.account-merge-feature-list { display: flex; flex-wrap: wrap; gap: 6px; }
.account-merge-feature { padding: 5px 8px; border-radius: 8px; color: var(--text-muted); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); font-size: 10px; }
.account-merge-feature.is-important { color: #fff; border-color: rgba(121,40,202,.38); background: rgba(121,40,202,.11); }
.account-merge-pro-confirm { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 13px 14px; border: 1px solid rgba(255,183,77,.28); border-radius: 12px; background: rgba(255,183,77,.07); color: var(--text-muted); font-size: 11.5px; line-height: 1.5; }
.account-merge-pro-confirm input { margin-top: 3px; accent-color: #7928ca; }
.account-merge-pro-confirm strong { color: #fff; }
.account-merge-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.account-merge-actions .primary-btn { width: auto; padding: 10px 18px; }
.affiliate-protection-grid .connect-preview-card { justify-content: center; }
.account-merge-cancel { color: var(--text-main) !important; background: rgba(255,255,255,.055) !important; border: 1px solid var(--glass-border) !important; }
.trader-name-picker { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border: 1px solid var(--glass-border); border-radius: 12px; background: rgba(255,255,255,.025); }
.trader-name-picker > div { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.trader-name-picker strong { overflow: hidden; color: #fff; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.trader-name-randomize { flex-shrink: 0; padding: 7px 11px; border: 1px solid rgba(121,40,202,.45); border-radius: 9px; color: #fff; background: rgba(121,40,202,.14); font: inherit; font-size: 10.5px; font-weight: 750; cursor: pointer; }
.trader-name-randomize:hover { background: rgba(121,40,202,.24); }
.trader-name-randomize:disabled { opacity: .55; cursor: wait; }
.trader-name-help { margin: -4px 0 0 !important; font-size: 10.5px !important; line-height: 1.55 !important; text-transform: none !important; }
@media (max-width: 620px) {
  .account-merge-choices { grid-template-columns: 1fr; }
  .account-merge-actions { flex-direction: column-reverse; }
  .account-merge-actions .primary-btn { width: 100%; }
}
.deep-dive-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: 14px;
  gap: 12px;
}
.deep-dive-stat:last-child { border-bottom: none; }
.deep-dive-stat-label { color: var(--text-muted); flex-shrink: 0; }
.deep-dive-stat-value { font-weight: 600; text-align: right; }

/* ── Signal pill clickable ─────────────────────────────────────────────── */
.signal-pill { cursor: pointer; }
.signal-pill:hover {
  transform: translateX(3px);
  background: rgba(255,255,255,0.04);
  transition: transform .15s, background .15s;
}
/* ── AI Core redesign ──────────────────────────────────────────────────────── */
#view-ai .ai-dashboard-top {
    grid-template-columns: 30fr 60fr;
}
.ai-sentiment-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ai-flows-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ai-flows-panel .signal-grid {
    flex: 1;
    overflow-y: auto;
    max-height: 480px;
    padding-right: 4px;
}
/* Smart Money gauge — now the sole focus of this row since Fear & Greed
   moved out (it's already live in the AI terminal header), so it's centered
   and sized up instead of sharing the row with a second meter. */
.sentiment-gauge-row {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
    padding-top: 4px;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 20px;
}
.gauge-container-lg {
    width: 200px;
    height: 106px;
}
.gauge-container-lg .gauge-value-text { font-size: 36px; }
.gauge-container-lg .gauge-sublabel { font-size: 11px; bottom: -24px; }

/* 0 / 50 / 100 scale labels on the smart-money gauge. Panic/Fomo sit at the
   arc's two feet (bottom-left/bottom-right corners of the container) — far
   enough from center not to collide with the big value number. Neutral sits
   in the empty headroom above the arc's peak instead of at the bottom, so it
   doesn't have to compete with the value number for the same center spot. */
.gauge-scale-label {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}
.gauge-scale-tick {
    width: 1px;
    height: 5px;
    background: var(--glass-border);
}
.gauge-scale-panic .gauge-scale-tick { margin-bottom: 3px; }
.gauge-scale-fomo .gauge-scale-tick { margin-bottom: 3px; }
.gauge-scale-tick-down { margin-top: 3px; }

.gauge-scale-panic {
    left: -20px;
    bottom: 4px;
}
.gauge-scale-fomo {
    right: -20px;
    bottom: 4px;
}
.gauge-scale-neutral {
    left: 50%;
    top: 2px;
    transform: translateX(-50%);
}

/* Portfolio pulse bottom row */
.portfolio-pulse-row {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--glass-border);
}
.portfolio-pulse-row #portfolioPulseContent {
    font-size: 12.5px;
    line-height: 1.55;
}
/* Signal pills more compact */
.signal-pill {
    padding: 10px 14px;
}
/* ── Trading AI Agent roadmap banner: two equal columns ──────────────────── */
/* Left column: Crypto Rover video on top, divergence panel below, equal height.
   Right column: Social Sentiment panel on top, AI terminal below, equal height. */
.ai-roadmap-split {
    display: flex;
    gap: 16px;
    height: 900px;
}

.ai-roadmap-col {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Top crypto YouTubers video panel: 25% creator list / 75% video ─────── */
.media-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(rgba(3,8,5,0.94), rgba(3,8,5,0.94)) padding-box,
                linear-gradient(135deg, rgba(138, 43, 226, 0.16), rgba(0, 240, 255, 0.16)) border-box;
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid transparent;
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 16px rgba(138, 43, 226, 0.03);
    overflow: hidden;
}

.media-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(138, 43, 226, 0.15);
    background: rgba(138, 43, 226, 0.03);
    flex-shrink: 0;
}

.media-panel-title {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: .2px;
}

.media-panel-body {
    flex: 1;
    min-height: 0;
    display: flex;
}

.media-creator-list {
    flex: 0 0 25%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    overflow-y: auto;
    border-right: 1px solid rgba(138, 43, 226, 0.15);
}

.media-creator-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 600;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background .15s, border-color .15s, color .15s;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
}

.media-creator-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.media-creator-btn.active {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3), rgba(0, 240, 255, 0.3));
    color: #fff;
    border-color: rgba(138, 43, 226, 0.5);
}

.media-creator-btn .creator-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vote-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background .15s, transform .1s;
}

.vote-btn:hover {
    background: rgba(0, 240, 255, 0.18);
    transform: scale(1.1);
}

.vote-btn.voted {
    cursor: default;
    pointer-events: none;
}

.vote-btn.voted:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: none;
}

.vote-btn.my-vote {
    background: rgba(0, 255, 157, 0.18);
}

@keyframes vote-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.5) rotate(-8deg); }
    60%  { transform: scale(0.95) rotate(4deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.vote-btn.just-voted {
    animation: vote-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes vote-count-in {
    from { opacity: 0; transform: translateY(-4px) scale(0.6); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.vote-count {
    display: inline-block;
    animation: vote-count-in 0.3s ease-out;
}

.vote-count {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--accent-cyan);
}

/* ─── Terminal Watchlist ────────────────────────────────────────────────── */
.watchlist-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
}

.watchlist-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 12px;
    border-radius: 20px;
    background: rgba(0, 240, 255, 0.08);
    border: 1px solid rgba(0, 240, 255, 0.2);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.watchlist-chip-remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px;
}

.watchlist-chip-remove:hover {
    color: var(--negative);
}

.media-video-col {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.media-panel-video-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
    background: #000;
}

.media-panel-video-wrap iframe,
.media-panel-video-wrap #mediaVideoPlayer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.media-panel-caption {
    padding: 8px 16px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Social Sentiment panel (full size, matches terminal below it) ──────── */
.sentiment-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(rgba(3,8,5,0.94), rgba(3,8,5,0.94)) padding-box,
                linear-gradient(135deg, rgba(138, 43, 226, 0.16), rgba(0, 240, 255, 0.16)) border-box;
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid transparent;
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 16px rgba(138, 43, 226, 0.03);
    overflow: hidden;
}

.sentiment-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(138, 43, 226, 0.15);
    background: rgba(138, 43, 226, 0.03);
    flex-shrink: 0;
}

.sentiment-panel-title {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: .2px;
}

.sentiment-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
}

.sentiment-panel-body::-webkit-scrollbar { width: 6px; }
.sentiment-panel-body::-webkit-scrollbar-thumb {
    background: rgba(51, 255, 102, 0.25);
    border-radius: 3px;
}

/* ── Daily Trade / Market Analysis + Social Sentiment cards ─────────────── */
.roadmap-bias-chip {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 8px;
}

.roadmap-bias-chip.bullish { background: rgba(0, 255, 157, 0.14); color: var(--positive); }
.roadmap-bias-chip.bearish { background: rgba(255, 71, 87, 0.14); color: #ff4757; }
.roadmap-bias-chip.mixed { background: rgba(0, 240, 255, 0.14); color: var(--accent-cyan); }

.roadmap-updated {
    display: block;
    margin-top: 8px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.35);
}

/* ── Multi-timeframe RSI divergence signals ────────────────────────────── */
.divergence-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(rgba(3,8,5,0.94), rgba(3,8,5,0.94)) padding-box,
                linear-gradient(135deg, rgba(138, 43, 226, 0.16), rgba(0, 240, 255, 0.16)) border-box;
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid transparent;
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 16px rgba(138, 43, 226, 0.03);
    overflow: hidden;
}

.divergence-chart-area {
    flex: 0 0 66%;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 14px 8px;
    border-bottom: 1px solid rgba(138, 43, 226, 0.15);
}

.divergence-price-chart-wrap {
    flex: 0 0 64%;
    min-height: 0;
    position: relative;
}

.divergence-rsi-chart-wrap {
    flex: 0 0 36%;
    min-height: 0;
    position: relative;
}

.divergence-price-chart-wrap canvas,
.divergence-rsi-chart-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}

.divergence-chart-label {
    position: absolute;
    top: 8px;
    left: 14px;
    font-family: 'Courier New', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    z-index: 2;
    letter-spacing: .3px;
}

.divergence-chart-label.bullish {
    background: rgba(51, 255, 102, 0.14);
    color: #33ff66;
}

.divergence-chart-label.bearish {
    background: rgba(255, 107, 107, 0.14);
    color: #ff6b6b;
}

.divergence-chart-label.flash {
    animation: divergence-flash .7s ease-out;
}

@keyframes divergence-flash {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
    100% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
}

.divergence-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 11.5px;
    font-family: 'Courier New', monospace;
    text-align: center;
    padding: 24px;
    background: #030805;
}

.divergence-feed-panel {
    flex: 0 0 34%;
    min-height: 0;
    display: flex;
    font-family: 'Courier New', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.6;
}

.divergence-feed-col {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.divergence-feed-divider {
    flex: 0 0 1px;
    background: rgba(255, 255, 255, 0.08);
}

.divergence-feed-col-header {
    flex-shrink: 0;
    padding: 8px 16px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    opacity: 0.85;
}

.divergence-feed-col-header.bullish { color: #33ff66; }
.divergence-feed-col-header.bearish { color: #ff6b6b; }

.divergence-feed-col-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 16px 10px;
}

.divergence-feed-col-list::-webkit-scrollbar { width: 6px; }
.divergence-feed-col-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
}

.divergence-feed-line {
    display: block;
    margin-bottom: 4px;
    animation: ai-terminal-line-in .25s ease-out;
}

.divergence-feed-line .ts {
    color: rgba(255, 255, 255, 0.35);
    margin-right: 6px;
}

.divergence-feed-line.bullish { color: #33ff66; }
.divergence-feed-line.bearish { color: #ff6b6b; }

/* Most recent confirmed signal in each column pulses like the terminal's "● LIVE" text */
.divergence-feed-line.latest {
    animation: ai-terminal-line-in .25s ease-out, ai-terminal-pulse 1.6s ease-in-out infinite;
}

/* Higher-timeframe signals with a pronounced RSI/price spread — the more reliable reads —
   pulse with a glow so they stand out from routine, lower-confidence confirmations. */
.divergence-feed-line.strong {
    font-weight: 700;
    animation: ai-terminal-line-in .25s ease-out, divergence-strong-pulse 1.4s ease-in-out infinite;
}

.divergence-feed-line.strong .ts::before {
    content: '★ ';
    color: #ffd60a;
}

@keyframes divergence-strong-pulse {
    0%, 100% { opacity: 1; text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
    50% { opacity: .55; text-shadow: 0 0 8px currentColor; }
}

/* ── Live AI Market Reporter — hacker terminal theme ───────────────────── */
.ai-terminal-panel {
    flex: 1;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(rgba(3,8,5,0.94), rgba(3,8,5,0.94)) padding-box,
                linear-gradient(135deg, rgba(138, 43, 226, 0.16), rgba(0, 240, 255, 0.16)) border-box;
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid transparent;
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 16px rgba(138, 43, 226, 0.03);
    overflow: hidden;
    font-family: 'Courier New', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.ai-terminal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(138, 43, 226, 0.15);
    background: rgba(138, 43, 226, 0.03);
    flex-shrink: 0;
}

.ai-terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.85;
}

.ai-terminal-title {
    flex: 1;
    font-size: 11px;
    color: #33ff66;
    letter-spacing: .5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-terminal-live {
    font-size: 10px;
    color: #33ff66;
    font-weight: 700;
    letter-spacing: .5px;
    animation: ai-terminal-pulse 1.6s ease-in-out infinite;
    flex-shrink: 0;
}

/* Liquidity Heatmap chart is still sandbox/modeled data (leverage-tier math, not a raw
   harvested-liquidation feed) — flagged orange instead of the green "LIVE" used elsewhere. */
.liquidity-sandbox-live {
    color: #ff9f40;
}

@keyframes ai-terminal-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.ai-terminal-feed {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px;
    font-size: 12.5px;
    line-height: 1.7;
    color: #33ff66;
    scrollbar-width: thin;
    scrollbar-color: rgba(51,255,102,0.3) transparent;
}

.ai-terminal-feed::-webkit-scrollbar {
    width: 6px;
}
.ai-terminal-feed::-webkit-scrollbar-thumb {
    background: rgba(51, 255, 102, 0.25);
    border-radius: 3px;
}

.ai-terminal-line {
    display: block;
    margin-bottom: 5px;
    white-space: pre-wrap;
    word-break: break-word;
    animation: ai-terminal-line-in .25s ease-out;
}

@keyframes ai-terminal-line-in {
    from { opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

.ai-terminal-line .ts {
    color: rgba(255, 255, 255, 0.35);
    margin-right: 6px;
}

.ai-terminal-line.user {
    color: #ffffff;
}

.ai-terminal-line.ai-reply {
    color: #ffffff;
    font-weight: 600;
}

/* [AI AGENT] lines are tagged with a solid brand purple — distinct from the
   green system tags ([ORDERBOOK], [FUNDING], etc.) and on-brand rather than
   an arbitrary accent color. Previously this faded into --accent-cyan via a
   gradient, which visually collided with the cyan used for X/tweet handles
   in the merged sentiment feed lines right above/below it — solid purple
   avoids that mixup. Message body after the tag stays white. */
.ai-agent-body {
    color: #ffffff;
}

.ai-agent-tag {
    font-weight: 700;
    color: var(--accent-purple);
}

@keyframes ai-terminal-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.ai-terminal-input-row {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid rgba(138, 43, 226, 0.15);
    background: rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.ai-terminal-input-row .ai-terminal-prompt {
    margin-right: 8px;
}

.ai-terminal-prompt {
    color: #33ff66;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.ai-terminal-input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

.ai-terminal-input {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font-family: inherit;
    font-size: 12.5px;
    caret-color: #ffffff;
}

/* Real DOM element instead of ::placeholder — Chrome/Safari silently ignore
   `animation`/`transition` on the native placeholder pseudo-element, so it
   never actually pulsed. This overlay does, and app.js toggles it on input. */
.ai-terminal-input-placeholder {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    font-family: inherit;
    font-size: 12.5px;
    white-space: nowrap;
    pointer-events: none;
    animation: ai-terminal-pulse 1.6s ease-in-out infinite;
}

.ai-terminal-input-placeholder.hidden {
    display: none;
}

/* Chain filter smaller */
.chain-filter-row .chain-btn {
    padding: 4px 10px;
    font-size: 11px;
}

/* ── Liquidity Heatmap (BETA) — 66/33 split: heatmap chart / Live AI read ── */
.liquidity-pair-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.liquidity-pair-btn {
    padding: 6px 14px;
    font-size: 12px;
}

.liquidity-split {
    display: flex;
    gap: 16px;
    height: 460px;
}

.liquidity-heatmap-panel {
    flex: 0 0 66%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(rgba(3,8,5,0.94), rgba(3,8,5,0.94)) padding-box,
                linear-gradient(135deg, rgba(138, 43, 226, 0.16), rgba(0, 240, 255, 0.16)) border-box;
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid transparent;
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 16px rgba(138, 43, 226, 0.03);
    overflow: hidden;
}

.liquidity-ai-panel {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(rgba(3,8,5,0.94), rgba(3,8,5,0.94)) padding-box,
                linear-gradient(135deg, rgba(138, 43, 226, 0.16), rgba(0, 240, 255, 0.16)) border-box;
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    border: 1px solid transparent;
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 16px rgba(138, 43, 226, 0.03);
    overflow: hidden;
}

.liquidity-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(138, 43, 226, 0.15);
    background: rgba(138, 43, 226, 0.03);
    flex-shrink: 0;
    gap: 8px;
}

.liquidity-panel-title {
    font-size: 12px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.liquidity-updated-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

#liquidityUpdatedText {
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.35);
    font-family: 'Courier New', monospace;
    white-space: nowrap;
}

.liquidity-methodology-note {
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(138, 43, 226, 0.12);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.4) !important;
}

.liquidity-methodology-note strong {
    color: rgba(255, 255, 255, 0.6);
}

.liquidity-heatmap-body {
    flex: 1;
    min-height: 0;
    position: relative;
    padding: 16px;
}

.liquidity-heatmap-body canvas {
    width: 100% !important;
    height: 100% !important;
}

.liquidity-heatmap-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 11.5px;
    font-family: 'Courier New', monospace;
    text-align: center;
    padding: 24px;
}

.liquidity-heatmap-legend {
    position: absolute;
    top: 14px;
    left: 18px;
    right: 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 6px;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.45);
    font-family: 'Courier New', monospace;
    letter-spacing: .3px;
    pointer-events: none;
}

.liquidity-heatmap-legend-swatch {
    display: inline-block;
    width: 20px;
    height: 0;
    border-top: 2px dashed #ffd23f;
}

.liquidity-heatmap-legend-swatch.live {
    border-top: 2px dotted #00f0ff;
    margin-left: 4px;
}

.liquidity-ai-feed {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #e0e0e0;
}

.liquidity-ai-feed::-webkit-scrollbar { width: 6px; }
.liquidity-ai-feed::-webkit-scrollbar-thumb {
    background: rgba(0, 240, 255, 0.2);
    border-radius: 3px;
}

.liquidity-ai-note {
    display: inline;
    white-space: nowrap;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-left: 2px;
}

/* ── Compact Liquidity Heatmap, embedded in the "Trading AI Agent" 2x2 grid
   (replaces the old full-width Liquidity Heatmap section + its 66/33 split).
   Reuses .ai-terminal-panel for the outer glass/border so it visually
   matches the merged chat panel above it in the same column. ── */
.liquidity-compact-panel {
    font-family: inherit;
}

.liquidity-pair-row-compact {
    padding: 8px 16px;
    border-bottom: 1px solid rgba(138, 43, 226, 0.15);
    flex-shrink: 0;
}

/* Row wrapper for the chart (66%) / AI read (33%) split below the header
   and pair-row tabs, which stay full-width above this. */
.liquidity-compact-row {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-height: 0;
}

.liquidity-heatmap-body-compact {
    flex: 0 0 66%;
    min-width: 0;
    min-height: 0;
    position: relative;
    padding: 10px 14px 4px;
    border-right: 1px solid rgba(138, 43, 226, 0.15);
}

.liquidity-ai-feed-compact {
    flex: 1;
    min-width: 0;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: 12px 16px;
    border-top: none;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    display: block;
}

.liquidity-ai-feed-compact::-webkit-scrollbar { width: 6px; }
.liquidity-ai-feed-compact::-webkit-scrollbar-thumb {
    background: rgba(0, 240, 255, 0.2);
    border-radius: 3px;
}

/* Ranked Traders table (Copy Trading view) — Followers/7d/30d/Win Rate/Follow
   columns were getting silently cut off on narrow screens with no way to
   reach them, since the bare <table> had no scroll container of its own and
   just overflowed its panel. width:100% + max-width:100% here (not just on
   the inner table) keeps this wrapper itself from being what widens the
   page — same "uncapped flexible box" bug documented above on
   .media-creator-list, avoided the same way. min-width on the table keeps
   columns legible (scroll rather than crush) instead of squeezing five
   columns + a button into an unreadable sliver. */
.leaderboard-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.leaderboard-table-wrap table {
    min-width: 560px;
}

/* Trade-alert delivery buttons (Enable Browser Alerts / Link Telegram
   Alerts) — these were previously borrowing .icon-btn, a class built for a
   round 36px icon-only button (border-radius:50%), not a labeled pill. On a
   wider auto-width button that produced a squashed, over-rounded blob with
   no explicit text color, so the label inherited a low-contrast default and
   was barely legible. This is a proper labeled-pill style: readable text
   color, sane border-radius, room for the emoji + label to breathe. The
   [data-subscribed="1"]/[data-linked="1"] variants pick up the "on" state
   app.js already tracks on these buttons (see refreshPushButtonState /
   refreshTelegramLinkButtonState) without any JS changes needed. */
.notify-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}
.notify-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.18);
}
.notify-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Was .icon-btn — a class built for a round 36px icon-only button
   (border-radius:50%, fixed width/height), which squashed a labeled text
   button like this one (Your Trader Dashboard's "Opt out") into a lopsided
   blob with no readable hover state. Rectangular and glass-bordered to match
   the rest of the app's secondary/muted actions. */
.trader-optout-btn {
    width: auto;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}
.trader-optout-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Stripe Connect onboarding — make the value visible before asking users to
   leave WickSync for Stripe, while keeping the next required action obvious. */
.connect-unlock-panel,
.trader-join-panel {
    position: relative;
    overflow: hidden;
    border-color: rgba(137, 94, 255, 0.3);
    background:
        radial-gradient(circle at 92% 8%, rgba(0, 224, 255, 0.12), transparent 35%),
        radial-gradient(circle at 8% 92%, rgba(137, 94, 255, 0.1), transparent 38%),
        var(--glass-bg);
}

.connect-eyebrow {
    margin-bottom: 8px;
    color: var(--accent-cyan);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.connect-unlock-header,
.trader-join-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.connect-lead {
    max-width: 680px;
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.connect-reward-pill {
    flex: none;
    padding: 7px 11px;
    border: 1px solid rgba(0, 255, 150, 0.28);
    border-radius: 999px;
    background: rgba(0, 255, 150, 0.08);
    color: var(--positive);
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.locked-link-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 16px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.35);
}

.locked-link-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.locked-link-label {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.locked-link-value {
    overflow: hidden;
    color: #fff;
    font-family: monospace;
    font-size: 13px;
    filter: blur(5px);
    opacity: 0.55;
    user-select: none;
    white-space: nowrap;
}

.locked-link-badge {
    flex: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

.connect-unlock-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 18px;
}

.connect-unlock-action > div,
.trader-step-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.connect-unlock-action strong,
.trader-step-content strong,
.trader-step-heading strong {
    color: #fff;
    font-size: 13px;
}

.connect-unlock-action span,
.trader-step-content span,
.trader-step-heading span:not(.trader-step-number) {
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.45;
}

.connect-primary-btn {
    width: auto;
    padding: 11px 22px;
    background: var(--accent-purple);
    color: #fff;
    white-space: nowrap;
}

.trader-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.trader-benefit-grid > div {
    display: flex;
    min-height: 76px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.24);
}

.trader-benefit-grid strong {
    color: #fff;
    font-size: 17px;
}

.trader-benefit-grid span {
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

.trader-step-card,
.trader-profile-form {
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
}

.trader-step-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.trader-step-number {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: none;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 224, 255, 0.35);
    border-radius: 50%;
    background: rgba(0, 224, 255, 0.1);
    color: var(--accent-cyan);
    font-size: 12px;
    font-weight: 800;
}

.trader-step-content .connect-primary-btn {
    align-self: flex-start;
    margin-top: 9px;
}

.trader-step-content small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 10.5px;
}

.trader-profile-form {
    flex-direction: column;
    gap: 12px;
    max-width: 520px;
}

.trader-step-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 2px;
}

.trader-step-heading > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

@media (max-width: 680px) {
    .connect-unlock-header,
    .trader-join-header,
    .connect-unlock-action {
        align-items: stretch;
        flex-direction: column;
    }

    .connect-reward-pill {
        align-self: flex-start;
    }

    .connect-primary-btn {
        width: 100%;
        white-space: normal;
    }

    .trader-benefit-grid {
        grid-template-columns: 1fr;
    }
}

/* Final Connect layout pass. These rules intentionally sit after the first
   component pass so page rhythm, equal columns and responsive behavior stay
   consistent with the rest of the dashboard. */
.program-page-header {
    max-width: 820px;
}

.program-page-header .page-title {
    font-size: clamp(25px, 2.4vw, 32px);
    letter-spacing: -0.04em;
}

.program-page-subtitle {
    max-width: 760px;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.connect-unlock-panel,
.trader-join-panel {
    padding: clamp(24px, 3vw, 36px);
    border-radius: 24px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.connect-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
    align-items: center;
    gap: clamp(28px, 4vw, 54px);
}

.connect-hero-copy h2,
.trader-join-header h2 {
    max-width: 620px;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.connect-hero-copy .connect-lead,
.trader-join-header .connect-lead {
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.7;
}

.connect-benefit-list {
    display: grid;
    gap: 11px;
    margin-top: 24px;
}

.connect-benefit-list span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d8d8e3;
    font-size: 12px;
    font-weight: 600;
}

.connect-benefit-list i {
    display: inline-flex;
    width: 21px;
    height: 21px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 255, 157, 0.24);
    border-radius: 50%;
    background: rgba(0, 255, 157, 0.09);
    color: var(--positive);
    font-size: 11px;
    font-style: normal;
}

.connect-preview-card {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(15, 15, 25, 0.9), rgba(5, 7, 14, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 40px rgba(0, 0, 0, 0.25);
}

.connect-preview-topline,
.trader-eyebrow-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.connect-preview-topline > span:first-child {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.connect-preview-card .locked-link-preview {
    min-height: 58px;
    margin: 18px 0 17px;
    padding: 0 15px;
    border-radius: 11px;
    background: rgba(0, 0, 0, 0.44);
}

.connect-preview-card .locked-link-value {
    min-width: 0;
    flex: 1;
    text-overflow: clip;
}

.connect-preview-title {
    color: #fff;
    font-size: 13px;
    line-height: 1.45;
}

.connect-preview-note {
    min-height: 34px;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.5;
}

.connect-preview-card .connect-primary-btn {
    width: 100%;
    min-height: 44px;
    margin-top: 17px;
    border-radius: 11px;
}

.affiliate-link-panel {
    padding: clamp(24px, 3vw, 32px);
    border-radius: 22px;
    border-color: rgba(0, 240, 255, 0.2);
    background:
        radial-gradient(circle at 94% 0%, rgba(0, 240, 255, 0.1), transparent 34%),
        var(--glass-bg);
}

.affiliate-link-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 19px;
}

.affiliate-link-header .connect-eyebrow {
    margin-bottom: 6px;
}

.referral-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.3);
}

.referral-link-input {
    min-width: 0;
    border: 0;
    background: transparent;
    font-family: monospace;
    font-size: 12.5px;
}

.referral-copy-btn {
    width: auto;
    min-height: 40px;
    padding: 9px 18px;
    border-radius: 9px;
}

.affiliate-link-note {
    margin-top: 13px;
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.55;
}

.affiliate-link-note strong {
    color: var(--positive);
}

.payout-status-strip {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 18px;
    border: 1px solid rgba(0, 255, 157, 0.18);
    border-radius: 15px;
    background: rgba(0, 255, 157, 0.045);
}

.payout-status-icon {
    display: inline-flex;
    width: 31px;
    height: 31px;
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0, 255, 157, 0.12);
    color: var(--positive);
    font-size: 15px;
    font-weight: 800;
}

.payout-status-strip h2 {
    font-size: 13px;
}

.payout-status-strip p {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11px;
}

.payout-manage-btn {
    width: auto;
    margin-left: auto;
    white-space: nowrap;
}

.trader-dashboard-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trader-dashboard-actions .settings-secondary-btn {
    width: auto;
}

.affiliate-stats-grid,
.trader-stats-grid {
    display: grid;
    gap: 14px;
}

.affiliate-stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trader-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 18px;
}

.affiliate-stat-card,
.trader-stat-card {
    position: relative;
    min-width: 0;
    min-height: 112px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.affiliate-stat-card .label,
.trader-stat-card .label {
    max-width: calc(100% - 38px);
    font-size: 10px;
    letter-spacing: 0.09em;
}

.affiliate-stat-card h3,
.trader-stat-card h3 {
    margin-top: 17px;
    color: #fff;
    font-size: 25px;
    letter-spacing: -0.03em;
}

#affActiveSubs,
#affTotalEarned,
#traderTotalEarned {
    color: var(--positive);
}

.affiliate-history-panel {
    padding: 0;
    overflow: hidden;
    border-radius: 22px;
}

.affiliate-history-header {
    margin: 0;
    padding: 23px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.affiliate-history-header p {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

.affiliate-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.affiliate-history-table {
    width: 100%;
    min-width: 620px;
    border-collapse: collapse;
    font-size: 13px;
}

.affiliate-history-table th {
    padding: 13px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    color: var(--text-muted);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: left;
    text-transform: uppercase;
}

.affiliate-history-table td:first-child {
    padding-left: 24px !important;
}

.affiliate-history-table td:last-child {
    padding-right: 24px !important;
}

.affiliate-history-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.035);
}

.affiliate-history-row:last-child {
    border-bottom: 0;
}

.affiliate-history-row td,
.affiliate-empty-row td {
    padding: 15px 24px;
}

.affiliate-referral-label {
    color: #dedee8;
    font-family: monospace;
}

.affiliate-commission-value {
    color: var(--positive);
    font-weight: 700;
}

.affiliate-empty-row td {
    height: 76px;
    color: var(--text-muted);
    text-align: center;
}

.trader-eyebrow-row {
    margin-bottom: 10px;
}

.trader-eyebrow-row .connect-eyebrow {
    margin-bottom: 0;
}

.trader-join-header {
    margin-bottom: 22px;
}

.trader-join-header > div {
    max-width: 720px;
}

.trader-benefit-grid {
    gap: 12px;
    margin-bottom: 18px;
}

.trader-benefit-grid > div {
    min-height: 88px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.2));
}

.trader-benefit-grid strong {
    font-size: 20px;
    letter-spacing: -0.025em;
}

.trader-step-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.32);
}

.trader-step-card .connect-primary-btn {
    min-height: 42px;
    border-radius: 10px;
}

.trader-step-content small {
    margin-top: 4px;
    line-height: 1.45;
}

.trader-profile-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    max-width: none;
    padding: 20px;
    border-radius: 14px;
}

.trader-profile-form > .trader-step-heading,
.trader-profile-form > p,
.trader-profile-form > button {
    grid-column: 1 / -1;
}

@media (max-width: 980px) {
    .connect-hero-grid {
        grid-template-columns: 1fr;
    }

    .connect-preview-card {
        max-width: 680px;
    }

    .trader-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .connect-unlock-panel,
    .trader-join-panel {
        padding: 20px;
        border-radius: 19px;
    }

    .connect-hero-grid {
        gap: 24px;
    }

    .connect-preview-card {
        padding: 17px;
    }

    .connect-preview-topline,
    .trader-eyebrow-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .affiliate-link-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .referral-link-row {
        grid-template-columns: 1fr;
    }

    .referral-copy-btn {
        width: 100%;
    }

    .affiliate-stats-grid,
    .trader-stats-grid {
        grid-template-columns: 1fr;
    }

    .affiliate-stat-card,
    .trader-stat-card {
        min-height: 98px;
    }

    .trader-step-card {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .trader-step-card .connect-primary-btn {
        width: 100%;
        grid-column: 1 / -1;
    }

    .trader-profile-form {
        grid-template-columns: 1fr;
    }

    .trader-profile-form > .trader-step-heading,
    .trader-profile-form > p,
    .trader-profile-form > button {
        grid-column: auto;
    }
}
.notify-btn[data-subscribed="1"],
.notify-btn[data-linked="1"] {
    background: rgba(0, 240, 255, 0.08);
    border-color: rgba(0, 240, 255, 0.35);
    color: var(--accent-cyan);
}

/* Copy Trading is a marketplace first: alerts and traders stay above the
   optional seller onboarding card regardless of account state. */
#view-leaderboard > .program-page-header { order: 0; }
#view-leaderboard > #notifyRow { order: 1; }
#view-leaderboard > #copytradePanel { order: 2; }
#view-leaderboard > .ranked-traders-panel { order: 3; }
#view-leaderboard > #traderOptInPanel,
#view-leaderboard > #traderDashboardPanel { order: 4; }

/* These two pages contain more than one viewport of content. A generic
   `.view { height: 100% }` rule made their flex children shrink until every
   card fit inside that fixed height; panels with overflow:hidden then
   visibly cut off empty states, buttons and lower rows. Let the pages take
   their natural height and keep every direct section at its content height.
   Scrolling belongs to .main-content on desktop and the document on mobile. */
#view-affiliate,
#view-leaderboard {
    width: 100%;
    height: auto;
    min-height: 100%;
    flex: 0 0 auto;
    container-name: program-page;
    container-type: inline-size;
}

#view-affiliate > *,
#view-leaderboard > * {
    min-width: 0;
    flex-shrink: 0;
}

/* Dashboard has multiple rows and must be allowed to become taller than the
   viewport. The old generic .view height forced its grid rows to shrink and
   clip as soon as the window got shorter. Container queries react to the real
   content width after the desktop sidebar, instead of waiting for the entire
   browser window to cross the 768px mobile breakpoint. */
#view-dashboard {
    width: 100%;
    height: auto;
    min-height: 100%;
    padding: 0 12px 24px 0;
    flex: 0 0 auto;
    container-name: dashboard-page;
    container-type: inline-size;
}

#view-dashboard > * {
    min-width: 0;
    flex-shrink: 0;
}

#view-dashboard .dashboard-grid > *,
#view-dashboard .header-widgets > * {
    min-width: 0;
}

.dashboard-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 2px;
}

.dashboard-title-copy { flex: 1; min-width: 0; }

.dashboard-connect-btn {
    flex: 0 0 auto;
    align-self: flex-end;
    margin-bottom: 2px;
    min-height: 44px;
    padding: 11px 19px;
    border: 1px solid rgba(184, 116, 255, 0.3);
    border-radius: 11px;
    color: #fff;
    background: var(--accent-purple);
    box-shadow: 0 10px 24px rgba(138, 43, 226, 0.22);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.dashboard-connect-btn:hover,
.transaction-connect-btn:hover {
    transform: translateY(-1px);
    background: #9d4edd;
    box-shadow: 0 12px 28px rgba(138, 43, 226, 0.32);
}

.dashboard-connect-btn:active,
.transaction-connect-btn:active {
    transform: translateY(0);
}

.dashboard-connect-btn:focus-visible,
.transaction-connect-btn:focus-visible {
    outline: 2px solid rgba(121, 238, 255, 0.9);
    outline-offset: 3px;
}

.dashboard-connect-btn.is-connected {
    border-color: rgba(255,255,255,0.1);
    color: var(--text-muted);
    background: rgba(255,255,255,0.035);
    box-shadow: none;
}

.dashboard-title-copy h1 {
    margin-top: 5px;
    font-size: clamp(26px, 2.4vw, 36px);
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.dashboard-title-copy p {
    max-width: 680px;
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.55;
}

.dashboard-kicker {
    color: var(--accent-cyan);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

#view-dashboard .glass-panel {
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.035), rgba(0, 240, 255, 0.018));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

#view-dashboard .balance-container,
#view-dashboard .pnl-widget,
#view-dashboard .health-widget {
    position: relative;
    min-height: 148px;
    overflow: hidden;
}

#view-dashboard .balance-container::before,
#view-dashboard .pnl-widget::before,
#view-dashboard .health-widget::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: linear-gradient(180deg, transparent, rgba(0, 240, 255, 0.65), transparent);
    opacity: 0.7;
}

#view-dashboard .balance-container::before { background: linear-gradient(180deg, transparent, rgba(138, 43, 226, 0.9), transparent); }
#view-dashboard .health-widget::before { background: linear-gradient(180deg, transparent, rgba(0, 255, 157, 0.7), transparent); }

#view-dashboard .asset-list:has(.asset-item:only-child) .asset-item {
    min-height: 92px;
}

#view-dashboard .performers-grid.is-empty {
    min-height: 112px;
    display: grid;
    place-items: center;
}

#view-dashboard .donut-panel.is-empty .donut-wrapper {
    display: none;
}

#view-dashboard .donut-panel.is-empty .allocation-legend {
    min-height: 140px;
    flex: 1;
    align-items: center;
    justify-content: center;
    margin-top: 0;
    text-align: center;
}

@container dashboard-page (max-width: 980px) {
    #view-dashboard .header-widgets {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px !important;
    }

    #view-dashboard .health-widget {
        width: auto !important;
        min-height: 112px;
        grid-column: 1 / -1;
    }

    #view-dashboard .dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        flex-grow: 0;
    }

    #view-dashboard .chart-container,
    #view-dashboard .assets-container {
        grid-column: 1 / -1;
    }

    #view-dashboard .chart-container,
    #view-dashboard .assets-container,
    #view-dashboard .performers-panel,
    #view-dashboard .donut-panel {
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    #view-dashboard .chart-container {
        min-height: 430px;
    }

    #view-dashboard .asset-list {
        max-height: none;
        overflow: visible;
    }

    #view-dashboard .performers-panel,
    #view-dashboard .donut-panel {
        min-height: 220px;
    }
}

@container dashboard-page (max-width: 620px) {
    .dashboard-title-row { flex-wrap: wrap; }
    .dashboard-title-copy { flex-basis: calc(100% - 64px); }
    .dashboard-connect-btn { width: 100%; margin-left: 0; }

    #view-dashboard .header-widgets {
        grid-template-columns: minmax(0, 1fr);
    }

    #view-dashboard .health-widget {
        grid-column: auto;
    }

    #view-dashboard .dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #view-dashboard .chart-container,
    #view-dashboard .assets-container {
        grid-column: auto;
    }

    #view-dashboard .chart-header,
    #view-dashboard .chart-controls {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px;
    }

    #view-dashboard .chart-mode-selector,
    #view-dashboard .timeframe-selector {
        width: 100%;
        box-sizing: border-box;
        justify-content: space-between;
        overflow-x: auto !important;
    }

    #view-dashboard .mode-btn,
    #view-dashboard .tf-btn {
        flex: 1;
        min-width: max-content;
        text-align: center;
    }

    .dashboard-title-copy p {
        font-size: 12px;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.copytrade-watch-panel {
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(115deg, rgba(138, 43, 226, 0.045), rgba(0, 240, 255, 0.025));
}

.copytrade-watch-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
}

.copytrade-watch-copy h2 {
    color: #fff;
    font-size: 14px;
    line-height: 1.3;
}

.copytrade-watch-copy p {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

.copytrade-empty-state {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}

.copytrade-empty-state > span {
    color: rgba(255, 255, 255, 0.28);
    font-size: 19px;
}

.copytrade-empty-state strong,
.copytrade-empty-state small {
    display: block;
}

.copytrade-empty-state strong {
    color: #c7c7d1;
    font-size: 11.5px;
    font-weight: 600;
}

.copytrade-empty-state small {
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.45;
}

.ranked-traders-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.022), rgba(138, 43, 226, 0.025));
}

.ranked-traders-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 23px 24px 18px;
}

.ranked-traders-header .connect-eyebrow {
    margin-bottom: 7px;
}

.ranked-traders-header h2 {
    color: #fff;
    font-size: 21px;
    letter-spacing: -0.025em;
}

.ranked-traders-header p {
    max-width: 620px;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

.ranked-market-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 24px 16px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, 0.045);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.018);
    color: var(--text-muted);
    font-size: 10.5px;
    line-height: 1.45;
}

.ranked-market-note span {
    color: var(--accent-cyan);
    font-size: 12px;
}

.ranked-trader-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 24px 18px;
}

.ranked-search-field {
    position: relative;
    display: block;
    width: min(320px, 100%);
}

.ranked-search-field > span {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 1;
    color: var(--text-muted);
    font-size: 18px;
    transform: translateY(-53%);
    pointer-events: none;
}

.ranked-search-field .glass-select {
    width: 100%;
    padding-left: 38px;
}

.ranked-style-filter {
    width: 220px;
}

.ranked-traders-panel .leaderboard-table-wrap {
    border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.leaderboard-table {
    width: 100%;
    min-width: 760px !important;
    border-collapse: collapse;
    font-size: 12.5px;
}

.leaderboard-table th {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    color: #6f6f80;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.085em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.leaderboard-table th:first-child,
.leaderboard-table td:first-child {
    padding-left: 24px;
}

.leaderboard-table th:last-child,
.leaderboard-table td:last-child {
    padding-right: 24px;
}

.leaderboard-sort-th {
    cursor: pointer;
    user-select: none;
}

.leaderboard-sort-th:hover {
    color: #bdbdca;
}

.leaderboard-sort-arrow {
    margin-left: 4px;
    opacity: 0.28;
    font-size: 7px;
}

.leaderboard-trader-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.035);
    transition: background 0.2s ease;
}

.leaderboard-trader-row:last-child {
    border-bottom: 0;
}

.leaderboard-trader-row:hover {
    background: rgba(255, 255, 255, 0.018);
}

.leaderboard-trader-row td {
    padding: 15px 16px;
    color: #c9c9d3;
    white-space: nowrap;
}

.leaderboard-trader-identity {
    display: flex;
    min-width: 210px;
    align-items: center;
    gap: 11px;
}

.leaderboard-rank {
    display: inline-flex;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
}

.leaderboard-trader-identity strong,
.leaderboard-trader-identity small {
    display: block;
}

.leaderboard-trader-identity strong {
    color: #f2f2f7;
    font-size: 12.5px;
}

.leaderboard-trader-identity small {
    max-width: 260px;
    margin-top: 3px;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 10.5px;
    text-overflow: ellipsis;
}

.leaderboard-performance {
    font-weight: 700;
}

.leaderboard-sample-size {
    color: var(--text-muted);
    font-size: 9.5px;
}

.leaderboard-actions {
    text-align: right;
}

.trader-follow-btn,
.trader-unfollow-btn {
    border-radius: 9px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.trader-follow-btn {
    padding: 8px 12px;
    border: 1px solid rgba(0, 240, 255, 0.25);
    background: rgba(0, 240, 255, 0.075);
    color: #dcfbff;
}

.trader-follow-btn:hover:not(:disabled) {
    border-color: rgba(0, 240, 255, 0.48);
    background: rgba(0, 240, 255, 0.13);
    transform: translateY(-1px);
}

.trader-follow-btn.is-following {
    border-color: rgba(0, 255, 157, 0.25);
    background: rgba(0, 255, 157, 0.07);
    color: var(--positive);
}

.trader-follow-btn:disabled {
    border-color: rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.65;
}

.trader-unfollow-btn {
    margin-left: 6px;
    padding: 8px 10px;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-muted);
}

.trader-unfollow-btn:hover {
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.leaderboard-empty-row td {
    padding: 0 !important;
}

.leaderboard-empty-state {
    display: flex;
    min-height: 112px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 24px;
    color: var(--text-muted);
    text-align: center;
}

.leaderboard-empty-state > span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin-bottom: 9px;
    border: 1px solid rgba(0, 240, 255, 0.12);
    border-radius: 11px;
    background: rgba(0, 240, 255, 0.04);
    color: rgba(0, 240, 255, 0.55);
    font-size: 17px;
}

.leaderboard-empty-state strong {
    color: #c9c9d4;
    font-size: 12px;
}

.leaderboard-empty-state small {
    max-width: 520px;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 10.5px;
    line-height: 1.5;
}

.trader-upgrade-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    padding: 16px 18px;
    border: 1px solid rgba(138, 43, 226, 0.22);
    border-radius: 14px;
    background: linear-gradient(100deg, rgba(138, 43, 226, 0.1), rgba(0, 240, 255, 0.035));
}

.trader-gate-icon {
    display: inline-flex;
    width: 35px;
    height: 35px;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(138, 43, 226, 0.13);
    font-size: 15px;
}

.trader-gate-copy strong,
.trader-gate-copy span {
    display: block;
}

.trader-gate-copy strong {
    color: #fff;
    font-size: 12.5px;
}

.trader-gate-copy span {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 10.5px;
    line-height: 1.45;
}

.trader-upgrade-btn {
    display: inline-flex !important;
    width: auto !important;
    min-width: 132px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 9px 18px !important;
    white-space: nowrap;
}

@media (max-width: 680px) {
    .copytrade-watch-header {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 16px;
    }

    .copytrade-empty-state {
        padding: 12px 16px 15px;
    }

    .ranked-traders-header {
        flex-direction: column;
        padding: 20px 18px 15px;
    }

    .ranked-market-note {
        margin: 0 18px 14px;
    }

    .ranked-trader-controls {
        align-items: stretch;
        flex-direction: column;
        padding: 0 18px 16px;
    }

    .ranked-search-field,
    .ranked-style-filter {
        width: 100%;
    }

    .trader-upgrade-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .trader-upgrade-btn {
        width: 100% !important;
        grid-column: 1 / -1;
    }
}

/* Responsive decisions must follow the available content column, not the
   browser width. On desktop the 300px sidebar means a 1050px browser can
   leave these pages only ~700px wide, even though viewport media queries
   still think the two-column layouts fit. */
@container program-page (max-width: 820px) {
    .connect-hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .connect-preview-card {
        width: 100%;
        max-width: none;
    }

    .trader-benefit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .affiliate-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .affiliate-stat-card:last-child {
        grid-column: 1 / -1;
    }

    .trader-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trader-step-card {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .trader-step-card .connect-primary-btn {
        width: 100%;
        grid-column: 1 / -1;
        white-space: normal;
    }

    .trader-profile-form {
        grid-template-columns: 1fr;
    }

    .trader-profile-form > .trader-step-heading,
    .trader-profile-form > p,
    .trader-profile-form > button {
        grid-column: auto;
    }
}

@container program-page (max-width: 560px) {
    .connect-unlock-panel,
    .trader-join-panel,
    .affiliate-link-panel {
        padding: 20px;
        border-radius: 19px;
    }

    .connect-preview-topline,
    .trader-eyebrow-row,
    .affiliate-link-header,
    .ranked-traders-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .connect-reward-pill {
        align-self: flex-start;
    }

    .referral-link-row,
    .affiliate-stats-grid,
    .trader-stats-grid,
    .trader-benefit-grid {
        grid-template-columns: 1fr;
    }

    .affiliate-stat-card:last-child {
        grid-column: auto;
    }

    .referral-copy-btn,
    .connect-primary-btn {
        width: 100%;
        white-space: normal;
    }

    .copytrade-watch-header {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 16px;
    }

    .ranked-traders-header {
        padding: 20px 18px 15px;
    }

    .ranked-market-note {
        margin: 0 18px 14px;
    }

    .ranked-trader-controls {
        align-items: stretch;
        flex-direction: column;
        padding: 0 18px 16px;
    }

    .ranked-search-field,
    .ranked-style-filter {
        width: 100%;
    }

    .trader-upgrade-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .trader-upgrade-btn {
        width: 100% !important;
        grid-column: 1 / -1;
    }
}

/* One page, one scroll surface.
   Keeping desktop scroll inside .main-content while mobile used the document
   caused Opera to expose a second scrollbar/gutter after resizing. The app now
   always uses the document scrollbar; the desktop sidebar stays in place with
   sticky positioning. This also prevents content from sitting beneath an
   internal scrollbar track. */
html {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.24) var(--bg-base);
}

html::-webkit-scrollbar {
    display: block;
    width: 8px;
    height: 0;
}

html::-webkit-scrollbar-track {
    background: var(--bg-base);
}

html::-webkit-scrollbar-thumb {
    border: 2px solid var(--bg-base);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
}

html::-webkit-scrollbar-button,
.sidebar::-webkit-scrollbar-button,
.leaderboard-table-wrap::-webkit-scrollbar-button,
.affiliate-table-wrap::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

body {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
}

body::before {
    position: fixed;
    inset: -30%;
    width: auto;
    height: auto;
    pointer-events: none;
}

.app-container {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: flex-start;
    overflow-x: clip;
}

.main-content {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: 100%;
    overflow: visible;
    scrollbar-width: none;
}

.main-content::-webkit-scrollbar,
.sidebar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

@media screen and (min-width: 769px) {
    .sidebar {
        position: sticky;
        top: 24px;
        height: calc(100dvh - 48px);
        flex: 0 0 300px;
        overflow-x: clip;
        scrollbar-width: none;
    }

    .nav-links li:hover {
        transform: none;
    }
}

@media screen and (max-width: 768px) {
    html {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    body {
        height: auto !important;
        min-height: 100dvh !important;
        overflow: visible !important;
    }

    .app-container,
    .main-content {
        width: 100% !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .app-container {
        overflow-x: clip !important;
    }
}

/* ── Media Hub --------------------------------------------------------- */
.media-hub-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
    padding: 24px;
    border: 1px solid rgba(138, 43, 226, .22);
    border-radius: 20px;
    background: radial-gradient(circle at 92% 20%, rgba(0, 240, 255, .09), transparent 35%),
                linear-gradient(135deg, rgba(138, 43, 226, .11), rgba(7, 10, 14, .62));
}

.media-hub-hero h2 { margin: 8px 0 7px; font-size: clamp(22px, 2vw, 30px); }
.media-hub-hero p { max-width: 700px; color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.media-learning-progress { width: 190px; flex: 0 0 190px; }
.media-learning-progress > span { display: block; color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .7px; }
.media-learning-progress strong { display: block; margin: 5px 0 8px; color: var(--accent-cyan); font-size: 20px; }
.media-learning-progress > div { height: 6px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.media-learning-progress > div > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan)); transition: width .25s ease; }
.academy-jump-nav { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.academy-jump-nav button {
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid rgba(138,43,226,.32);
    border-radius: 8px;
    color: rgba(255,255,255,.82);
    background: rgba(138,43,226,.08);
    font: inherit;
    font-size: 9.5px;
    font-weight: 800;
    cursor: pointer;
}
.academy-jump-nav button:hover { color: #fff; border-color: rgba(0,240,255,.35); background: rgba(0,240,255,.07); }

.ai-tools-tab-panel.show-academy #aiAcademyContent {
    display: flex !important;
    flex-direction: column;
}
.ai-tools-tab-panel.show-academy #aiAcademyContent > .media-hub-hero { order: 0; }
.ai-tools-tab-panel.show-academy #aiAcademyContent > .media-learning-section { order: 1; }
.ai-tools-tab-panel.show-academy #aiAcademyContent > .academy-quiz-section { order: 2; }
.ai-tools-tab-panel.show-academy #aiAcademyContent > .media-reference-section { order: 3; }
.ai-tools-tab-panel.show-academy #aiAcademyContent > .media-panel { order: 4; margin-top: 18px; }
.ai-tools-tab-panel.show-academy #aiAcademyContent > .divergence-panel { order: 6; }

.ai-tools-tab-panel.show-academy #aiAcademyContent > .media-panel {
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 18px;
}

.ai-tools-tab-panel.show-academy .media-panel-header { padding: 17px 20px; }
.ai-tools-tab-panel.show-academy .media-panel-header h3 { margin-top: 5px; font-size: 16px; }
.ai-tools-tab-panel.show-academy .media-panel-header p { max-width: 680px; margin-top: 5px; color: var(--text-muted); font-size: 10.5px; line-height: 1.5; }
.ai-tools-tab-panel.show-academy .media-panel-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    min-height: 0;
}
.ai-tools-tab-panel.show-academy .media-video-col { order: 1; min-width: 0; }
.ai-tools-tab-panel.show-academy .media-creator-list {
    order: 2;
    flex: none;
    max-height: 620px;
    padding: 14px;
    border-right: 0;
    border-left: 1px solid rgba(138, 43, 226, .15);
}
.ai-tools-tab-panel.show-academy .media-panel-video-wrap {
    flex: none;
    min-height: 0;
    aspect-ratio: 16 / 9;
}
.ai-tools-tab-panel.show-academy .media-creator-btn { min-height: 39px; }

.media-now-playing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px 10px;
}
.media-now-playing > div { min-width: 0; }
.media-now-playing h3 { margin: 5px 0 3px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.media-now-playing p { color: var(--text-muted); font-size: 10px; }
.media-youtube-link {
    flex: 0 0 auto;
    padding: 8px 10px;
    border: 1px solid rgba(138,43,226,.42);
    border-radius: 8px;
    color: #e9ddff;
    background: rgba(138,43,226,.13);
    font-size: 9.5px;
    font-weight: 800;
    text-decoration: none;
}
.media-youtube-link:hover { background: rgba(138,43,226,.25); }
.media-player-controls { display: flex; gap: 7px; padding: 0 16px 10px; }
.media-player-controls button {
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-muted);
    background: rgba(255,255,255,.028);
    font: inherit;
    font-size: 9.5px;
    font-weight: 750;
    cursor: pointer;
}
.media-player-controls button:hover,
.media-player-controls button[aria-pressed="true"] { color: #fff; border-color: rgba(138,43,226,.48); background: rgba(138,43,226,.14); }
.ai-tools-tab-panel.show-academy .media-panel-caption { padding: 0 16px 12px; font-size: 9px; }

.media-learning-section,
.media-reference-section,
.academy-quiz-section {
    margin-top: 18px;
    padding: 22px;
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    background: rgba(8, 7, 13, .64);
}
.media-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.media-section-heading h3 { margin-top: 5px; font-size: 18px; }
.media-section-heading p { margin-top: 5px; color: var(--text-muted); font-size: 10.5px; }
.media-lesson-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.media-lesson-filter {
    padding: 7px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 99px;
    color: var(--text-muted);
    background: rgba(255,255,255,.02);
    font: inherit;
    font-size: 9px;
    font-weight: 750;
    cursor: pointer;
}
.media-lesson-filter.active { color: #fff; border-color: rgba(138,43,226,.5); background: rgba(138,43,226,.19); }
.media-tutorial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.media-tutorial-card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 176px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,.055);
    border-radius: 14px;
    background: rgba(255,255,255,.018);
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.media-tutorial-card:hover { transform: translateY(-2px); border-color: rgba(138,43,226,.34); background: rgba(138,43,226,.045); }
.media-tutorial-card.selected { border-color: rgba(0,240,255,.32); }
.media-tutorial-card.completed::after { content: '✓ Completed'; margin-top: 8px; color: var(--positive); font-size: 9px; font-weight: 800; }
.media-tutorial-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--text-muted); font-size: 8.5px; text-transform: uppercase; letter-spacing: .45px; }
.media-tutorial-card h4 { margin: 13px 0 7px; font-size: 14px; line-height: 1.3; }
.media-tutorial-card p { flex: 1; color: var(--text-muted); font-size: 10px; line-height: 1.5; }
.media-tutorial-card button { align-self: flex-start; margin-top: 12px; padding: 0; border: 0; color: var(--accent-cyan); background: transparent; font: inherit; font-size: 9.5px; font-weight: 800; cursor: pointer; }
.media-lesson-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
    gap: 22px;
    margin-top: 12px;
    padding: 20px;
    border: 1px solid rgba(0,240,255,.16);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0,240,255,.035), rgba(138,43,226,.05));
}
.media-lesson-panel h3 { margin: 6px 0 8px; font-size: 18px; }
.media-lesson-panel p { color: var(--text-muted); font-size: 10.5px; line-height: 1.55; }
.media-lesson-rule { margin-top: 13px; padding: 11px 12px; border-left: 2px solid var(--accent-cyan); border-radius: 0 9px 9px 0; background: rgba(0,240,255,.045); }
.media-lesson-rule span { display: block; margin-bottom: 4px; color: var(--accent-cyan); font-size: 8px; font-weight: 850; letter-spacing: .7px; text-transform: uppercase; }
.media-lesson-rule strong { display: block; color: rgba(255,255,255,.84); font-size: 10px; font-weight: 650; line-height: 1.5; }
.media-lesson-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: media-step; }
.media-lesson-steps li { position: relative; padding: 9px 10px 9px 35px; border-radius: 9px; color: rgba(255,255,255,.78); background: rgba(255,255,255,.025); font-size: 10px; line-height: 1.45; counter-increment: media-step; }
.media-lesson-steps li::before { content: counter(media-step); position: absolute; left: 10px; top: 9px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; color: var(--accent-cyan); background: rgba(0,240,255,.09); font-size: 8px; font-weight: 800; }
.media-lesson-actions { display: flex; align-items: center; gap: 12px; margin-top: 15px; }
.media-lesson-complete { min-height: 34px; padding: 0 13px; border: 1px solid rgba(138,43,226,.48); border-radius: 8px; color: #fff; background: #7928ca; font: inherit; font-size: 9.5px; font-weight: 800; cursor: pointer; }
.media-lesson-complete.completed { color: var(--positive); border-color: rgba(0,255,157,.28); background: rgba(0,255,157,.08); }
.media-lesson-jump { padding: 0; border: 0; color: var(--accent-cyan); background: transparent; font: inherit; font-size: 9.5px; font-weight: 800; text-decoration: none; cursor: pointer; }
.media-reference-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.media-reference-card { min-width: 0; padding: 15px; border: 1px solid rgba(255,255,255,.055); border-radius: 12px; background: rgba(255,255,255,.018); }
.media-reference-card > span { display: block; margin-bottom: 8px; color: var(--accent-cyan); font-size: 8px; font-weight: 850; letter-spacing: .7px; }
.media-reference-card h4 { color: rgba(255,255,255,.9); font-size: 11px; line-height: 1.35; }
.media-reference-card p { margin-top: 8px; color: var(--text-muted); font-size: 9.5px; line-height: 1.55; }

.academy-quiz-best {
    flex: 0 0 auto;
    min-width: 130px;
    padding: 11px 14px;
    border: 1px solid rgba(0,240,255,.2);
    border-radius: 12px;
    background: rgba(0,240,255,.045);
}
.academy-quiz-best span { display: block; color: var(--text-muted); font-size: 9px; text-transform: uppercase; letter-spacing: .65px; }
.academy-quiz-best strong { display: block; margin-top: 4px; color: var(--accent-cyan); font-size: 14px; }
.academy-quiz-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 14px; }
.academy-quiz-tracks { display: grid; align-content: start; gap: 8px; }
.academy-quiz-track {
    width: 100%;
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 13px;
    color: inherit;
    background: rgba(255,255,255,.018);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.academy-quiz-track:hover { transform: translateX(2px); border-color: rgba(138,43,226,.32); }
.academy-quiz-track.active { border-color: rgba(0,240,255,.34); background: linear-gradient(135deg, rgba(0,240,255,.07), rgba(138,43,226,.08)); }
.academy-quiz-track span { display: block; color: var(--accent-cyan); font-size: 8px; font-weight: 850; letter-spacing: .55px; text-transform: uppercase; }
.academy-quiz-track strong { display: block; margin-top: 6px; color: #fff; font-size: 12px; }
.academy-quiz-track small { display: block; margin-top: 4px; color: var(--text-muted); font-size: 9px; line-height: 1.4; }
.academy-quiz-stage {
    min-width: 0;
    min-height: 330px;
    padding: 22px;
    border: 1px solid rgba(0,240,255,.14);
    border-radius: 15px;
    background: radial-gradient(circle at 100% 0, rgba(0,240,255,.06), transparent 35%), rgba(255,255,255,.018);
}
.academy-quiz-stage-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: 9px; font-weight: 800; letter-spacing: .55px; text-transform: uppercase; }
.academy-quiz-stage-meta span:first-child { color: var(--accent-cyan); }
.academy-quiz-meter { height: 4px; margin: 11px 0 20px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.academy-quiz-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan)); transition: width .2s ease; }
.academy-quiz-stage h4 { max-width: 720px; color: #fff; font-size: 17px; line-height: 1.45; }
.academy-quiz-answers { display: grid; gap: 8px; margin-top: 17px; }
.academy-quiz-answer {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 10px;
    color: rgba(255,255,255,.76);
    background: rgba(0,0,0,.18);
    font: inherit;
    font-size: 10.5px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
}
.academy-quiz-answer > span { flex: 0 0 25px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: var(--text-muted); background: rgba(255,255,255,.05); font-size: 9px; font-weight: 850; }
.academy-quiz-answer:hover:not(:disabled), .academy-quiz-answer.selected { color: #fff; border-color: rgba(138,43,226,.48); background: rgba(138,43,226,.1); }
.academy-quiz-answer.correct { color: #d9ffed; border-color: rgba(0,255,157,.35); background: rgba(0,255,157,.07); }
.academy-quiz-answer.incorrect { color: #ffdbe2; border-color: rgba(255,84,112,.38); background: rgba(255,84,112,.07); }
.academy-quiz-answer:disabled { cursor: default; }
.academy-quiz-feedback { margin-top: 13px; padding: 11px 13px; border-radius: 9px; color: var(--text-muted); background: rgba(255,255,255,.03); font-size: 10px; line-height: 1.5; }
.academy-quiz-feedback.correct { color: var(--positive); background: rgba(0,255,157,.055); }
.academy-quiz-feedback.incorrect, .academy-quiz-feedback.warning { color: #ffb2c0; background: rgba(255,84,112,.06); }
.academy-quiz-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.academy-quiz-actions .primary-btn,
.academy-quiz-actions .secondary-btn { width: auto; min-height: 40px; padding: 0 17px; }
.academy-quiz-actions .secondary-btn { border: 1px solid var(--glass-border); border-radius: 9px; color: #fff; background: rgba(255,255,255,.035); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }

@media (max-width: 980px) {
    .ai-tools-tab-panel.show-academy .media-panel-body { grid-template-columns: minmax(0, 1fr) 240px; }
    .media-tutorial-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .media-reference-grid { grid-template-columns: 1fr; }
    .academy-quiz-layout { grid-template-columns: 220px minmax(0, 1fr); }
}

@media (max-width: 680px) {
    .media-hub-hero { align-items: flex-start; flex-direction: column; padding: 18px; }
    .media-learning-progress { width: 100%; flex-basis: auto; }
    .ai-tools-tab-panel.show-academy #aiAcademyContent > .media-panel { height: auto !important; }
    .ai-tools-tab-panel.show-academy .media-panel-body { display: flex !important; flex-direction: column !important; }
    .ai-tools-tab-panel.show-academy .media-video-col { order: 1; }
    .ai-tools-tab-panel.show-academy .media-creator-list {
        order: 2;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 100% !important;
        max-height: none;
        overflow: visible !important;
        border-left: 0;
        border-top: 1px solid rgba(138,43,226,.15);
        border-bottom: 0 !important;
    }
    .ai-tools-tab-panel.show-academy .media-creator-list > .label { grid-column: 1 / -1; }
    .ai-tools-tab-panel.show-academy .media-creator-btn { width: 100%; white-space: normal !important; }
    .media-now-playing { align-items: flex-start; flex-direction: column; }
    .media-youtube-link { width: 100%; text-align: center; }
    .media-player-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .media-section-heading { align-items: flex-start; flex-direction: column; }
    .media-lesson-filters { justify-content: flex-start; }
    .media-tutorial-grid { grid-template-columns: 1fr; }
    .media-lesson-panel { grid-template-columns: 1fr; }
    .media-learning-section,
    .media-reference-section,
    .academy-quiz-section { padding: 16px; }
    .academy-quiz-layout { grid-template-columns: 1fr; }
    .academy-quiz-tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .academy-quiz-track { padding: 12px; }
    .academy-quiz-track small { display: none; }
    .academy-quiz-stage { min-height: 0; padding: 17px; }
}

/* ── AI Insights workspace: focused tabs + reusable AI Agent ───────────── */
.ai-tools-tab-panel .ai-roadmap-banner {
    margin-bottom: 28px !important;
    padding: 24px !important;
}

.ai-tools-tab-panel .ai-roadmap-split {
    display: block;
    height: auto;
    min-height: 0;
}

.ai-tools-tab-panel .ai-roadmap-col {
    width: 100%;
    min-width: 0;
    min-height: 0;
}

.ai-tools-tab-panel #aiAgentContent.hidden,
.ai-tools-tab-panel #aiAcademyContent.hidden {
    display: none !important;
}

.ai-tools-tab-panel.show-agent #aiAgentContent {
    display: block !important;
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
}
.ai-tools-tab-panel.show-academy #aiAcademyContent {
    display: flex !important;
}

.ai-tools-tab-panel.show-agent #aiAgentContent > .ai-terminal-panel {
    width: 100%;
    height: min(660px, calc(100vh - 265px));
    min-height: 480px;
}

.ai-tools-tab-panel.show-academy #aiAcademyContent > .media-panel {
    width: 100%;
    height: min(680px, calc(100vh - 250px));
    min-height: 540px;
}

.market-analysis-section {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(14, 10, 23, .78), rgba(6, 13, 17, .78));
    box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
}

.market-analysis-heading {
    margin-bottom: 18px;
}

.market-analysis-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 18px;
    align-items: stretch;
}

.market-analysis-slot {
    min-width: 0;
    height: 540px;
}

.market-analysis-slot > .liquidity-compact-panel,
.market-analysis-slot > .divergence-panel {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

.market-analysis-slot > .divergence-panel,
.market-analysis-slot > .liquidity-compact-panel {
    border-radius: 18px;
    box-shadow: none;
}

.ai-agent-launcher {
    position: fixed;
    right: 26px;
    bottom: 24px;
    z-index: 740;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid rgba(170, 99, 255, .48);
    border-radius: 999px;
    color: #fff;
    background: #7928ca;
    box-shadow: 0 12px 32px rgba(72, 20, 124, .38);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.ai-agent-launcher:hover,
.ai-agent-launcher:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 16px 38px rgba(102, 38, 168, .48);
}

.ai-agent-launcher::after {
    content: 'Open the same private chat in a compact window';
    position: absolute;
    right: 0;
    bottom: calc(100% + 9px);
    width: max-content;
    max-width: 240px;
    padding: 8px 10px;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-muted);
    background: rgba(8, 7, 13, .96);
    font-size: 10px;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .16s ease, transform .16s ease;
}

.ai-agent-launcher:hover::after,
.ai-agent-launcher:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

.ai-agent-launcher-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--positive);
    box-shadow: 0 0 10px var(--positive);
}

.ai-agent-popup {
    position: fixed;
    right: 24px;
    bottom: 82px;
    z-index: 750;
    display: flex;
    flex-direction: column;
    width: min(460px, calc(100vw - 40px));
    height: min(650px, calc(100vh - 118px));
    min-height: 420px;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(138, 43, 226, .38);
    border-radius: 20px;
    background: rgba(7, 6, 12, .97);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .62), 0 0 34px rgba(138, 43, 226, .12);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.ai-agent-popup-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.ai-agent-popup-header h2 {
    margin-top: 4px;
    font-size: 18px;
}

.ai-agent-close-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid var(--glass-border);
    border-radius: 9px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, .035);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.ai-agent-popup-intro {
    margin: 9px 0 14px;
    color: var(--text-muted);
    font-size: 10.5px;
    line-height: 1.5;
}

.ai-agent-popup-slot {
    flex: 1;
    min-height: 0;
}

.ai-agent-popup-slot > .ai-terminal-panel {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    border-radius: 14px;
    box-shadow: none;
}

@media (max-width: 1100px) {
    .market-analysis-grid {
        grid-template-columns: 1fr;
    }

    .market-analysis-slot {
        height: 520px;
    }
}

@media (max-width: 768px) {
    .ai-view-tabs {
        scrollbar-width: none;
    }

    .ai-view-tabs::-webkit-scrollbar {
        display: none;
    }

    .market-analysis-section {
        padding: 14px;
    }

    .market-analysis-slot {
        height: 540px;
    }

    .ai-tools-tab-panel.show-agent #aiAgentContent > .ai-terminal-panel,
    .ai-tools-tab-panel.show-academy #aiAcademyContent > .media-panel {
        height: 560px !important;
        min-height: 0 !important;
    }

    .ai-agent-launcher {
        right: 14px;
        bottom: 14px;
    }

    .ai-agent-launcher::after {
        display: none;
    }

    .ai-agent-popup {
        right: 10px;
        bottom: 70px;
        width: calc(100vw - 20px);
        height: calc(100dvh - 90px);
        min-height: 0;
        padding: 14px;
        border-radius: 16px;
    }

    .ai-agent-popup-slot > .ai-terminal-panel {
        height: 100% !important;
    }
}

/* Button hierarchy -------------------------------------------------------
   Purple is the normal primary action. The purple-to-cyan treatment is
   reserved exclusively for starting the free trial. */
.primary-btn.trial-gradient-btn,
.pro-upsell .trial-gradient-btn {
    border: 1px solid rgba(0, 240, 255, 0.3) !important;
    background: linear-gradient(135deg, #8a2be2 0%, #7762ed 50%, #66d8e8 100%) !important;
    color: #07070b !important;
    box-shadow: 0 10px 28px rgba(74, 70, 229, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

.primary-btn.trial-gradient-btn:hover,
.pro-upsell .trial-gradient-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.07);
    box-shadow: 0 13px 32px rgba(74, 70, 229, 0.3), 0 0 22px rgba(0, 240, 255, 0.09);
}

.primary-btn.trial-gradient-btn:active,
.pro-upsell .trial-gradient-btn:active {
    transform: translateY(0);
}

.trader-follow-btn {
    border-color: rgba(184, 116, 255, 0.34);
    background: rgba(138, 43, 226, 0.82);
    color: #fff;
}

.trader-follow-btn:hover:not(:disabled) {
    border-color: rgba(200, 148, 255, 0.56);
    background: #9d4edd;
    box-shadow: 0 8px 20px rgba(138, 43, 226, 0.24);
}

/* PRO upgrade modal ----------------------------------------------------- */
#proModal {
    align-items: center;
    padding: 24px;
    overflow-y: auto;
    background: rgba(2, 2, 5, 0.76);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

#proModal .pro-upgrade-modal {
    width: min(920px, 100%);
    max-width: 920px;
    max-height: calc(100dvh - 48px);
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(148, 77, 232, 0.42) !important;
    border-radius: 26px;
    background:
        radial-gradient(circle at 8% 0%, rgba(138, 43, 226, 0.16), transparent 38%),
        radial-gradient(circle at 100% 100%, rgba(0, 240, 255, 0.07), transparent 34%),
        rgba(8, 8, 13, 0.985) !important;
    box-shadow: 0 34px 100px rgba(0, 0, 0, 0.78), 0 0 60px rgba(77, 40, 140, 0.12);
}

.pro-modal-top {
    padding: 30px 32px 0;
}

.pro-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.pro-modal-header > div {
    min-width: 0;
}

.pro-modal-kicker,
.pro-modal-section-label {
    display: block;
    color: #83eaf5;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pro-modal-header h2 {
    margin-top: 7px;
    font-size: clamp(27px, 3vw, 38px);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.pro-modal-header p {
    max-width: 610px;
    margin-top: 10px;
    color: #9b9bab;
    font-size: 13px;
    line-height: 1.6;
}

.pro-modal-close {
    flex: 0 0 auto;
    color: var(--text-muted);
    cursor: pointer;
}

.pro-modal-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.78fr);
    gap: 22px;
    padding: 26px 32px 32px;
}

.pro-benefits-panel,
.pro-offer-card {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 20px;
}

.pro-benefits-panel {
    padding: 21px;
    background: rgba(255, 255, 255, 0.018);
}

.pro-benefit-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 17px 0 0;
    padding: 0;
    list-style: none;
}

.pro-benefit-list li {
    position: relative;
    min-width: 0;
    padding-left: 22px;
    color: #b7b7c4;
    font-size: 11.5px;
    line-height: 1.45;
}

.pro-benefit-list li::before {
    content: '✓';
    position: absolute;
    top: 0;
    left: 0;
    color: #70efbd;
    font-weight: 800;
}

.pro-offer-card {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    padding: 23px;
    background: linear-gradient(145deg, rgba(138, 43, 226, 0.105), rgba(0, 240, 255, 0.025));
}

.pro-trial-badge {
    align-self: flex-start;
    padding: 6px 9px;
    border: 1px solid rgba(0, 255, 157, 0.22);
    border-radius: 8px;
    background: rgba(0, 255, 157, 0.075);
    color: #76f6ae;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pro-offer-card h3 {
    margin-top: 15px;
    color: #fff;
    font-size: 23px;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

.pro-offer-subtitle {
    margin-top: 8px;
    color: #9b9bab;
    font-size: 11.5px;
    line-height: 1.55;
}

.pro-plan-picker {
    display: flex;
    gap: 9px;
    margin: 20px 0 18px;
}

.pro-offer-card .plan-pick-btn {
    min-height: 76px;
    padding: 15px 8px 11px;
    background: rgba(0, 0, 0, 0.2);
}

.pro-offer-card .plan-pick-btn.active {
    border-color: rgba(176, 102, 255, 0.72);
    background: rgba(138, 43, 226, 0.2);
    box-shadow: inset 0 0 24px rgba(138, 43, 226, 0.08);
}

.pro-offer-card #processPaymentBtn {
    min-height: 47px;
    margin-top: auto;
}

.pro-offer-card .plan-fine-print {
    margin-top: 12px;
    color: #7f7f8f;
    font-size: 10px;
    line-height: 1.5;
    text-align: center;
}

@media screen and (max-width: 820px) {
    #proModal {
        align-items: flex-start;
        padding: 14px;
    }

    #proModal .pro-upgrade-modal {
        max-height: calc(100dvh - 28px);
        border-radius: 22px;
    }

    .pro-modal-top {
        padding: 24px 22px 0;
    }

    .pro-modal-layout {
        grid-template-columns: minmax(0, 1fr);
        padding: 21px 22px 24px;
    }

    .pro-benefit-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 520px) {
    .pro-modal-header h2 {
        padding-right: 4px;
        font-size: 26px;
    }

    .pro-modal-header p {
        font-size: 12px;
    }

    .pro-benefit-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .pro-benefits-panel,
    .pro-offer-card {
        padding: 18px;
        border-radius: 17px;
    }

    .pro-plan-picker {
        flex-direction: column;
    }

    .pro-offer-card .plan-pick-btn {
        min-height: 68px;
    }
}

/* Decorative icon boxes and repeated status pills made the program pages
   busier without adding information. Keep status/data in the copy itself and
   reserve boxed icons for real controls. */
.copytrade-watch-header {
    grid-template-columns: minmax(0, 1fr);
}

.affiliate-stat-card .label,
.trader-stat-card .label {
    max-width: 100%;
}

.payout-status-icon,
.trader-gate-icon,
.trader-step-number {
    line-height: 1;
    text-align: center;
}

.leaderboard-empty-state {
    grid-template-columns: minmax(0, 1fr);
}

/* Trade history ----------------------------------------------------------- */
#view-transactions {
    width: 100%;
    height: auto;
    min-height: 100%;
    flex: 0 0 auto;
    container-name: transaction-page;
    container-type: inline-size;
}

.global-mobile-menu {
    display: none;
}

.transaction-page-header .connect-eyebrow {
    margin-bottom: 7px;
}

.transaction-title-row,
.transaction-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.transaction-title-row > div,
.transaction-panel-header > div {
    min-width: 0;
}

.transaction-title-row .program-page-subtitle {
    max-width: 760px;
}

.transaction-range-label {
    flex: none;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.transaction-history-panel {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(138, 43, 226, 0.035), rgba(0, 240, 255, 0.018));
}

.transaction-panel-header {
    align-items: center;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.transaction-panel-header h2 {
    color: #fff;
    font-size: 18px;
    letter-spacing: -0.02em;
}

.transaction-panel-header p {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 11.5px;
    line-height: 1.5;
}

.transaction-range-label {
    padding: 0;
}

.transaction-table-stage {
    position: relative;
    min-height: 405px;
}

.transaction-table-wrap {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.transaction-table-wrap::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.transaction-history-table {
    display: table !important;
    width: 100% !important;
    min-width: 760px;
    table-layout: auto;
    white-space: nowrap;
}

.transaction-history-table th {
    padding: 13px 20px;
    color: #717182;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.transaction-history-table td {
    padding: 16px 20px;
    color: #d1d1da;
    font-size: 12px;
}

.transaction-history-table th:first-child,
.transaction-history-table td:first-child {
    padding-left: 24px;
}

.transaction-history-table th:last-child,
.transaction-history-table td:last-child {
    padding-right: 24px;
}

.transaction-history-table tbody tr:last-child td {
    border-bottom: 0;
}

.transaction-history-panel.is-preview .transaction-table-wrap {
    filter: blur(1.5px);
    opacity: 0.2;
    pointer-events: none;
    user-select: none;
}

.transaction-preview-gate,
.transaction-empty-state {
    display: grid;
    place-items: center;
    text-align: center;
}

.transaction-preview-gate {
    position: absolute;
    inset: 0;
    padding: 32px 22px;
    background: radial-gradient(circle at 50% 50%, rgba(12, 12, 22, 0.55), rgba(3, 3, 5, 0.72) 72%, rgba(3, 3, 5, 0.2));
}

.transaction-preview-copy {
    width: min(470px, 100%);
}

.transaction-preview-label,
.transaction-empty-label {
    color: var(--accent-cyan);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.transaction-preview-copy h2,
.transaction-empty-state h2 {
    margin-top: 9px;
    color: #fff;
    font-size: 20px;
    letter-spacing: -0.025em;
}

.transaction-preview-copy p,
.transaction-empty-state p {
    margin: 8px auto 0;
    color: #9a9aaa;
    font-size: 11.5px;
    line-height: 1.6;
}

.transaction-connect-btn {
    width: auto;
    min-width: 180px;
    min-height: 44px;
    margin-top: 18px;
    padding: 11px 20px;
    border: 1px solid rgba(184, 116, 255, 0.3);
    border-radius: 10px;
    background: var(--accent-purple);
    color: #fff;
    font-size: 12px;
    box-shadow: 0 10px 24px rgba(138, 43, 226, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.transaction-preview-copy small {
    display: block;
    margin-top: 11px;
    color: #717180;
    font-size: 9.5px;
    line-height: 1.45;
}

.transaction-empty-state {
    min-height: 310px;
    padding: 36px 22px;
}

.transaction-empty-state > * {
    max-width: 480px;
}

@container transaction-page (max-width: 620px) {
    .transaction-title-row,
    .transaction-panel-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .transaction-panel-header {
        padding: 19px 18px 16px;
    }

    .transaction-table-stage {
        min-height: 390px;
    }

    .transaction-preview-gate {
        padding: 28px 18px;
    }

    .transaction-connect-btn {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .global-mobile-menu {
        position: fixed;
        top: 14px;
        right: 14px;
        z-index: 900;
        width: 42px;
        height: 42px;
        padding: 0;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 11px;
        background: rgba(10, 10, 16, 0.9);
        color: #fff;
        font: inherit;
        font-size: 19px;
        line-height: 1;
        cursor: pointer;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .program-page-header,
    .transaction-page-header,
    .dashboard-title-row {
        padding-right: 54px;
    }
}

/* Keep the expanded Media Hub content-driven. Earlier fixed player heights
   were for the old single-widget tab and would clip the academy sections. */
.ai-tools-tab-panel.show-academy #aiAcademyContent > .media-panel {
    height: auto !important;
    min-height: 0 !important;
}

@media screen and (max-width: 680px) {
    .ai-tools-tab-panel.show-academy #aiAcademyContent > .media-panel {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* Stripe-hosted payment and Connect surfaces, mounted inside WickSync. */
body.stripe-flow-open {
    overflow: hidden;
}

.stripe-flow-overlay {
    align-items: flex-start;
    padding: clamp(10px, 2vw, 24px);
    background: rgba(2, 2, 6, 0.82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.stripe-flow-modal {
    width: min(860px, 100%);
    max-width: 860px;
    max-height: calc(100dvh - clamp(20px, 4vw, 48px));
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-color: rgba(148, 77, 232, 0.42) !important;
    background:
        radial-gradient(circle at 0 0, rgba(138, 43, 226, 0.14), transparent 34%),
        radial-gradient(circle at 100% 100%, rgba(0, 240, 255, 0.055), transparent 30%),
        #08080d !important;
    box-shadow: 0 34px 100px rgba(0, 0, 0, 0.82);
}

.stripe-checkout-modal {
    width: min(760px, 100%);
    max-width: 760px;
}

.stripe-flow-header {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 23px 26px 19px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
    background: rgba(8, 8, 13, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.stripe-flow-header > div {
    min-width: 0;
}

.stripe-flow-kicker {
    display: block;
    color: #83eaf5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.stripe-flow-header h2 {
    margin-top: 6px;
    font-size: clamp(22px, 3vw, 29px);
    line-height: 1.12;
}

.stripe-flow-header p {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

.stripe-flow-close {
    flex: 0 0 auto;
    color: var(--text-muted);
    cursor: pointer;
}

.stripe-flow-loading {
    min-height: 240px;
    display: grid;
    place-items: center;
    padding: 28px;
    color: var(--text-muted);
    font-size: 13px;
}

.stripe-checkout-mount,
.stripe-connect-mount {
    min-width: 0;
    padding: 14px 18px 24px;
}

.stripe-checkout-mount:empty,
.stripe-connect-mount:empty {
    display: none;
}

.stripe-connect-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 26px 0;
    background: rgba(8, 8, 13, 0.94);
}

.stripe-connect-tab {
    min-height: 39px;
    padding: 9px 15px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.stripe-connect-tab.active {
    border-color: rgba(176, 102, 255, 0.6);
    background: rgba(138, 43, 226, 0.22);
    color: #fff;
}

@media screen and (max-width: 680px) {
    .payout-status-strip {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .payout-manage-btn {
        flex-basis: 100%;
        margin: 4px 0 0;
    }

    .trader-dashboard-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .stripe-flow-overlay {
        padding: 8px;
    }

    .stripe-flow-modal {
        max-height: calc(100dvh - 16px);
        border-radius: 19px;
    }

    .stripe-flow-header {
        padding: 19px 17px 15px;
    }

    .stripe-flow-header p {
        max-width: 270px;
    }

    .stripe-checkout-mount,
    .stripe-connect-mount {
        padding: 8px 6px 18px;
    }

    .stripe-connect-tabs {
        padding: 11px 17px 0;
    }

    #traderDashboardPanel > .panel-header {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 12px;
    }
}

/* ── Trader Academy v2: independent learning page ─────────────────────── */
.ai-tools-tab-panel.show-academy > .ai-roadmap-banner {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ai-tools-tab-panel.show-academy .ai-roadmap-header {
    display: none !important;
}

.ai-tools-tab-panel.show-academy #aiAcademyContent {
    gap: 18px;
}

.ai-tools-tab-panel.show-academy #aiAcademyContent > * {
    margin-top: 0;
    margin-bottom: 0;
}

.ai-tools-tab-panel.show-academy .media-hub-hero {
    min-height: 210px;
    align-items: center;
    padding: clamp(22px, 3vw, 34px);
    border-radius: 24px;
    background:
        radial-gradient(circle at 86% 25%, rgba(0, 240, 255, .11), transparent 28%),
        radial-gradient(circle at 8% 100%, rgba(138, 43, 226, .15), transparent 36%),
        linear-gradient(145deg, rgba(16, 11, 28, .95), rgba(6, 13, 17, .9));
}

.ai-tools-tab-panel.show-academy .media-hub-hero h2 {
    max-width: 760px;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.1;
}

.ai-tools-tab-panel.show-academy .media-hub-hero p {
    max-width: 720px;
    font-size: 12px;
}

.ai-tools-tab-panel.show-academy .media-learning-section,
.ai-tools-tab-panel.show-academy .academy-quiz-section,
.ai-tools-tab-panel.show-academy .media-reference-section {
    padding: clamp(18px, 2.3vw, 28px);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(12, 9, 20, .82), rgba(6, 11, 15, .76));
}

.ai-tools-tab-panel.show-academy .media-tutorial-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
}

.ai-tools-tab-panel.show-academy .media-tutorial-card {
    min-height: 165px;
    padding: 17px;
}

.ai-tools-tab-panel.show-academy .media-lesson-panel {
    margin-top: 16px;
    padding: 22px;
}

.ai-tools-tab-panel.show-academy .media-panel {
    overflow: hidden;
    border: 1px solid var(--glass-border);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(12, 9, 20, .82), rgba(6, 11, 15, .76));
}

/* Academy is long-form learning content, so it needs normal reading sizes
   rather than the compact dashboard-label typography used by data widgets. */
.ai-tools-tab-panel.show-academy .media-hub-hero p {
    font-size: 14px;
    line-height: 1.65;
}

.ai-tools-tab-panel.show-academy .media-learning-progress > span,
.ai-tools-tab-panel.show-academy .market-card-label,
.ai-tools-tab-panel.show-academy .media-tutorial-meta,
.ai-tools-tab-panel.show-academy .media-reference-card > span,
.ai-tools-tab-panel.show-academy .academy-quiz-track span,
.ai-tools-tab-panel.show-academy .academy-quiz-stage-meta {
    font-size: 10.5px;
}

.ai-tools-tab-panel.show-academy .academy-jump-nav button,
.ai-tools-tab-panel.show-academy .media-lesson-filter,
.ai-tools-tab-panel.show-academy .media-tutorial-card button,
.ai-tools-tab-panel.show-academy .media-lesson-complete,
.ai-tools-tab-panel.show-academy .media-lesson-jump,
.ai-tools-tab-panel.show-academy .media-player-controls button,
.ai-tools-tab-panel.show-academy .media-youtube-link {
    font-size: 12px;
}

.ai-tools-tab-panel.show-academy .media-section-heading h3 {
    font-size: 21px;
}

.ai-tools-tab-panel.show-academy .media-section-heading p,
.ai-tools-tab-panel.show-academy .media-panel-header p,
.ai-tools-tab-panel.show-academy .media-tutorial-card p,
.ai-tools-tab-panel.show-academy .media-lesson-panel p,
.ai-tools-tab-panel.show-academy .media-lesson-rule strong,
.ai-tools-tab-panel.show-academy .media-lesson-steps li,
.ai-tools-tab-panel.show-academy .media-reference-card p,
.ai-tools-tab-panel.show-academy .academy-quiz-answer,
.ai-tools-tab-panel.show-academy .academy-quiz-feedback {
    font-size: 12.5px;
    line-height: 1.55;
}

.ai-tools-tab-panel.show-academy .media-tutorial-card h4 {
    font-size: 16px;
}

.ai-tools-tab-panel.show-academy .media-lesson-panel h3,
.ai-tools-tab-panel.show-academy .academy-quiz-stage h4 {
    font-size: 19px;
}

.ai-tools-tab-panel.show-academy .media-reference-card h4,
.ai-tools-tab-panel.show-academy .academy-quiz-track strong {
    font-size: 14px;
}

.ai-tools-tab-panel.show-academy .academy-quiz-track small,
.ai-tools-tab-panel.show-academy .media-now-playing p,
.ai-tools-tab-panel.show-academy .media-panel-caption,
.ai-tools-tab-panel.show-academy .media-creator-list > .label {
    font-size: 11.5px !important;
    line-height: 1.5;
}

.ai-tools-tab-panel.show-academy .media-now-playing h3,
.ai-tools-tab-panel.show-academy .media-panel-header h3 {
    font-size: 17px;
}

@media screen and (max-width: 1180px) {
    .ai-tools-tab-panel.show-academy .media-tutorial-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 680px) {
    .ai-tools-tab-panel.show-academy #aiAcademyContent { gap: 14px; }
    .ai-tools-tab-panel.show-academy .media-hub-hero { min-height: 0; }
    .ai-tools-tab-panel.show-academy .media-tutorial-grid { grid-template-columns: 1fr; }
    .academy-jump-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .academy-jump-nav button { width: 100%; }
    .academy-quiz-tracks { grid-template-columns: 1fr; }
    .academy-quiz-track small { display: block; }
    .academy-quiz-track:hover { transform: none; }
    .academy-quiz-stage h4 { font-size: 17px; }
    .academy-quiz-stage-meta { align-items: flex-start; flex-direction: column; gap: 5px; }
}

/* ── Verified Trader gate: stable at every content width ──────────────── */
.trader-step-card {
    grid-template-columns: 32px minmax(0, 1fr) minmax(220px, auto);
    grid-template-areas:
        "step copy action"
        "step legal legal";
    align-items: start;
}

.trader-step-card > .trader-step-number {
    grid-area: step;
    align-self: start;
}

.trader-step-card > .trader-step-content {
    grid-area: copy;
    min-width: 0;
}

.trader-step-content > * {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.trader-step-action {
    display: flex;
    grid-area: action;
    min-width: 0;
    justify-content: flex-end;
}

.trader-step-action .connect-primary-btn {
    width: 100%;
    max-width: 280px;
    margin: 0;
}

.trader-step-legal {
    grid-area: legal;
    min-width: 0;
    max-width: 760px;
    margin: 5px 0 0;
    overflow-wrap: anywhere;
}

@container program-page (max-width: 820px) {
    .trader-step-card {
        grid-template-columns: 32px minmax(0, 1fr);
        grid-template-areas:
            "step copy"
            "step action"
            "step legal";
        column-gap: 12px;
        row-gap: 11px;
    }

    .trader-step-action {
        justify-content: flex-start;
    }

    .trader-step-action .connect-primary-btn {
        max-width: 320px;
    }
}

@container program-page (max-width: 480px) {
    .trader-join-panel {
        padding: 16px;
    }

    .trader-step-card {
        width: 100%;
        min-width: 0;
        padding: 14px;
        grid-template-columns: 28px minmax(0, 1fr);
        column-gap: 10px;
    }

    .trader-step-number {
        width: 28px;
        height: 28px;
    }

    .trader-step-action,
    .trader-step-action .connect-primary-btn {
        width: 100%;
        max-width: none;
    }

    .trader-upgrade-card {
        width: 100%;
        min-width: 0;
        padding: 15px;
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
    }

    .trader-upgrade-card .trader-gate-icon {
        display: none;
    }

    .trader-upgrade-card .trader-gate-copy {
        min-width: 0;
    }

    .trader-upgrade-card .trader-gate-copy span {
        overflow-wrap: anywhere;
    }

    .trader-upgrade-card .trader-upgrade-btn {
        width: 100% !important;
        min-width: 0;
        grid-column: auto;
        white-space: normal;
    }
}