/**
 * BrighterTrading marketplace + creator pages.
 *
 * Phase 3.4 lane B: same shape of cleanup as ui/huds.css (a55c810).
 * Each marketplace page used to carry its own embedded <style> block
 * with hundreds of lines of card / search / badge / earnings-table
 * rules duplicated across templates. They all rendered the same
 * fixed dark chrome with the same brand purple accents.
 * Consolidated into one stylesheet loaded once per marketplace page.
 *
 * Pages covered (each <link>s tokens.css + components.css + this):
 *   - marketplace.html               -- strategy browse grid + filters
 *   - marketplace_strategy.html      -- single-strategy detail page
 *   - marketplace_earnings.html      -- creator earnings dashboard
 *   - creator_directory.html         -- creator browse grid + filters
 *   - creator_profile.html           -- creator profile + posts/guides
 *   - creator_guide.html             -- creator guide article view
 *   - creator_guide_editor.html      -- creator guide write/edit form
 *   - signal_marketplace.html        -- signal browse grid + filters
 *   - signal_marketplace_detail.html -- single-signal detail page
 *
 * These pages render outside the main /app shell, so they don't
 * conflict with app-shell.css / huds.css. The classes here
 * are flat-scope (not prefixed) to match the original embedded
 * CSS, which preserves the existing visual contract per page.
 *
 * Tokenization notes:
 *   - The standalone marketplace pages use the same --bt-* surface,
 *     text, accent, and status tokens as the app shell so saved user
 *     themes apply outside /app too.
 *   - Creator "official" uses --bt-verified because it is semantic
 *     badge color, not a warning state.
 *
 * No new bt-* primitives added; existing components.css covers
 * what we need. Marketplace's non-interactive .tag chips are
 * intentionally distinct from components.css's .bt-tag-pill
 * (which is the toggleable selection chip).
 */


/* ============================================================ */
/* Page reset + body                                            */
/* ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--bt-bg);
    color: var(--bt-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* ============================================================ */
/* Page header (top nav)                                        */
/* ============================================================ */

.header {
    background: var(--bt-surface);
    padding: var(--bt-space-5) var(--bt-space-7);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--bt-border);
    box-shadow: var(--bt-shadow-sm);
}

.header h1 {
    font-size: 20px;
    color: var(--bt-text-strong);
}

.header h1 a {
    color: var(--bt-text-strong);
    text-decoration: none;
}

.header nav a {
    color: var(--bt-accent-link);
    text-decoration: none;
    margin-left: 20px;
    font-size: var(--bt-font-size-lg);
}

.header nav a:hover {
    color: var(--bt-text-strong);
}


/* ============================================================ */
/* Page container (responsive width tiers)                      */
/* ============================================================ */

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--bt-space-6);
}

/* Detail/profile pages use a tighter container (900px). The
   creator-profile-page, strategy-detail-page, and earnings-page
   body classes scope this. */
.creator-profile-page .container,
.strategy-detail-page .container,
.earnings-page .container {
    max-width: 900px;
}

/* The signal-detail-page and the guide pages use 800px. */
.signal-detail-page .container,
.guide-page .container,
.guide-editor-page .container {
    max-width: 800px;
}


/* ============================================================ */
/* Page title / subtitle / breadcrumb                           */
/* ============================================================ */

.page-title {
    font-size: var(--bt-font-size-2xl);
    margin-bottom: var(--bt-space-3);
    color: var(--bt-text-strong);
}

.page-subtitle {
    font-size: var(--bt-font-size-lg);
    color: var(--bt-text-faint);
    margin-bottom: var(--bt-space-6);
}

.breadcrumb {
    font-size: var(--bt-font-size-md);
    color: var(--bt-text-muted);
    margin-bottom: 20px;
}

.breadcrumb a {
    color: var(--bt-accent-link);
    text-decoration: none;
}

.text-link {
    color: var(--bt-accent-link);
    text-decoration: none;
}


/* ============================================================ */
/* Tabs (Strategies / Signals / Creators)                       */
/* ============================================================ */

.tabs {
    display: flex;
    gap: var(--bt-space-2);
    margin-bottom: var(--bt-space-6);
}

.tab {
    padding: var(--bt-space-3) 20px;
    border-radius: var(--bt-radius-md) var(--bt-radius-md) 0 0;
    font-size: var(--bt-font-size-lg);
    text-decoration: none;
    color: var(--bt-text-faint);
    background: var(--bt-surface-2);
    border: 1px solid var(--bt-border);
    border-bottom: none;
}

.tab:hover {
    color: var(--bt-text);
}

.tab.active {
    color: var(--bt-text-strong);
    background: var(--bt-surface);
    border-color: var(--bt-accent);
}


/* ============================================================ */
/* Filters / search bar                                         */
/* ============================================================ */

.filters {
    display: flex;
    gap: var(--bt-space-4);
    margin-bottom: var(--bt-space-6);
    flex-wrap: wrap;
}

.filters select,
.filters input {
    background: var(--bt-surface);
    color: var(--bt-text);
    border: 1px solid var(--bt-border);
    padding: var(--bt-space-2) var(--bt-space-4);
    border-radius: var(--bt-radius-sm);
    font-size: var(--bt-font-size-md);
}

/* The wrapping <form> uses display:contents so its children flow as
   direct children of .filters (otherwise the form would form a
   layout box and the gap/flex sizing would not apply to its
   inputs). */
.filters form {
    display: contents;
}

.filter-search {
    background: var(--bt-surface);
    color: var(--bt-text);
    border: 1px solid var(--bt-border);
    padding: var(--bt-space-2) var(--bt-space-4);
    border-radius: var(--bt-radius-sm);
    font-size: var(--bt-font-size-md);
    width: 200px;
}

.search-button {
    background: var(--bt-accent);
    color: var(--bt-accent-fg);
    border: none;
    padding: var(--bt-space-2) var(--bt-space-4);
    border-radius: var(--bt-radius-sm);
    font-size: var(--bt-font-size-md);
    cursor: pointer;
}


/* ============================================================ */
/* Card grids (strategy / creator / signal)                     */
/* ============================================================ */
/* The marketplace.html and signal_marketplace.html browse grids
   share the 320px minmax. The creator_directory and creator_profile
   sub-grids share the 280px minmax. Two distinct rules. */

.strategy-grid,
.signal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--bt-space-5);
}

.creator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--bt-space-5);
}

/* creator_profile.html uses .strategy-grid for its own (smaller) cards */
.creator-profile-page .strategy-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}


/* ============================================================ */
/* Card chrome (shared border / hover / radius)                 */
/* ============================================================ */

.strategy-card,
.signal-card,
.creator-card {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    padding: 20px;
    transition: border-color var(--bt-transition-med);
}

.strategy-card:hover,
.signal-card:hover,
.creator-card:hover {
    border-color: var(--bt-accent);
}

.creator-card a {
    text-decoration: none;
}

.creator-profile-page .strategy-card {
    padding: var(--bt-space-5);
}


/* ============================================================ */
/* Card header / name / creator byline / headline / footer      */
/* ============================================================ */

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--bt-space-4);
}

.card-topline {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* creator_directory.html: card-top is the avatar + name+tagline row. */
.card-top {
    display: flex;
    gap: var(--bt-space-4);
    align-items: flex-start;
    margin-bottom: var(--bt-space-4);
}

.card-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bt-accent), var(--bt-accent-link));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--bt-accent-fg);
    flex-shrink: 0;
}

.card-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

/* directory cards have a small tagline under the name */
.card-tagline {
    font-size: 12px;
    color: var(--bt-text-faint);
    margin-top: 2px;
}

.card-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--bt-text-strong);
}

.card-name a {
    color: var(--bt-text-strong);
    text-decoration: none;
}

.card-name a:hover {
    color: var(--bt-accent-link);
}

.creator-profile-page .card-name {
    font-size: 15px;
    margin-bottom: var(--bt-space-2);
}

.card-creator,
.creator-byline {
    font-size: 12px;
    color: var(--bt-text-faint);
    margin-top: 2px;
}

.creator-byline a {
    color: var(--bt-accent-link);
    text-decoration: none;
}

.card-headline {
    font-size: var(--bt-font-size-md);
    color: var(--bt-text-muted);
    margin-bottom: var(--bt-space-4);
    line-height: 1.4;
}

.creator-profile-page .card-headline {
    font-size: 12px;
    color: var(--bt-text-faint);
    margin-bottom: var(--bt-space-3);
}

.card-headline.is-muted {
    color: var(--bt-text-faint);
}

.card-tags {
    display: flex;
    gap: var(--bt-space-2);
    flex-wrap: wrap;
    margin-bottom: var(--bt-space-4);
}

/* Display-only tag chip used on cards. Distinct from
   bt-tag-pill (toggleable selection chip in components.css). */
.tag {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--bt-surface-2);
    border-radius: 3px;
    color: var(--bt-text-muted);
}

/* Larger tag size used on the detail pages (strategy + signal). */
.strategy-detail-page .tag,
.signal-detail-page .tag {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: var(--bt-radius-sm);
}

.tag-live {
    background: var(--bt-success-soft);
    color: var(--bt-success);
}

.tag-paper {
    background: var(--bt-info-soft);
    color: var(--bt-info);
}

.tag-default {
    background: var(--bt-surface-2);
    color: var(--bt-text-muted);
}

.tag-external {
    background: var(--bt-warning-soft);
    color: var(--bt-warning);
}

.card-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--bt-space-3);
    padding: 10px;
    background: var(--bt-surface-2);
    border-radius: var(--bt-radius-sm);
    margin-bottom: var(--bt-space-4);
}

/* creator_profile inline card metrics flex instead of grid */
.creator-profile-page .card-metrics {
    display: flex;
    gap: var(--bt-space-5);
    font-size: 12px;
    padding: 0;
    background: transparent;
    margin-bottom: 0;
    border-radius: 0;
}

.metric {
    text-align: center;
}

.card-metric {
    color: var(--bt-text-muted);
}

.card-metric span {
    color: var(--bt-text-strong);
    font-weight: 600;
}

.card-metric.is-positive {
    color: var(--bt-success);
}

.metric-value {
    font-size: var(--bt-font-size-lg);
    font-weight: 600;
    color: var(--bt-text-strong);
}

.metric-label {
    font-size: 10px;
    color: var(--bt-text-muted);
}

.metric-positive {
    color: var(--bt-success);
}

.metric-negative {
    color: var(--bt-danger);
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-footer .subscribers,
.card-footer .backtests {
    font-size: 11px;
    color: var(--bt-text-muted);
}

.card-stats {
    font-size: 12px;
    color: var(--bt-text-muted);
}

.card-price {
    font-size: var(--bt-font-size-lg);
    font-weight: 600;
    color: var(--bt-success);
}

.card-price.free {
    color: var(--bt-text-faint);
}

.card-subscribers {
    font-size: 11px;
    color: var(--bt-text-muted);
}


/* ============================================================ */
/* Empty / no-results states                                    */
/* ============================================================ */

.no-strategies,
.no-signals,
.no-creators {
    text-align: center;
    padding: 60px 20px;
    color: var(--bt-text-muted);
}

.no-strategies h3,
.no-signals h3,
.no-creators h3 {
    color: var(--bt-text-strong);
    margin-bottom: var(--bt-space-3);
}

.no-benchmarks {
    font-size: 11px;
    color: var(--bt-text-faint);
    text-align: center;
    padding: 10px;
}

.error-msg {
    text-align: center;
    padding: 40px;
    color: var(--bt-danger);
}

.empty-message {
    color: var(--bt-text-muted);
    text-align: center;
    padding: 20px;
    font-size: var(--bt-font-size-md);
}

.empty-message.is-compact {
    padding: var(--bt-space-5);
}

.empty-intro {
    max-width: 760px;
    margin: var(--bt-space-6) auto;
    color: var(--bt-text);
    line-height: 1.6;
}

.empty-intro h3 {
    color: var(--bt-text-strong);
    margin-bottom: var(--bt-space-4);
}

.empty-intro p {
    margin-bottom: 14px;
}

.empty-intro a {
    color: var(--bt-accent-link);
    text-decoration: none;
}

/* marketplace.html-only "no public strategies yet" empty state. Same
   shape as .empty-intro but the page wires up its own copy block. */
.empty-marketplace {
    max-width: 760px;
    margin: var(--bt-space-6) auto;
    color: var(--bt-text);
    line-height: 1.6;
}

.empty-marketplace h3 {
    color: var(--bt-text-strong);
    margin-bottom: var(--bt-space-4);
}

.empty-marketplace p {
    margin-bottom: 14px;
}

.empty-marketplace a {
    color: var(--bt-accent-link);
    text-decoration: none;
}

.empty-note {
    font-size: 12px;
    color: var(--bt-text-faint);
}


/* ============================================================ */
/* Risk + category badges (low / medium / high)                 */
/* ============================================================ */
/* The risk-{low,medium,high} pairs use a "soft dark" palette
   (deep saturated bg + bright pastel text). Mapping them to the
   generic --bt-success / --bt-warning / --bt-danger soft tokens
   would shift the visual contrast (those tokens are tuned for
   light-theme dialogs). Kept raw and flagged for a later
   risk-specific token pass. */

.risk-badge {
    font-size: 11px;
    padding: 2px var(--bt-space-3);
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Strategy detail page uses slightly bigger risk badges. */
.strategy-header .risk-badge {
    font-size: 12px;
    padding: 3px 10px;
    text-transform: none;
}

.risk-low {
    background: var(--bt-success-soft);
    color: var(--bt-success);
}

.risk-medium {
    background: var(--bt-warning-soft);
    color: var(--bt-warning);
}

.risk-high {
    background: var(--bt-danger-soft);
    color: var(--bt-danger);
}

.card-category,
.category-badge {
    font-size: 11px;
    padding: 2px var(--bt-space-3);
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--bt-surface-2);
    color: var(--bt-text-muted);
}

.signal-detail-page .category-badge {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
}

.external-badge {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--bt-warning-soft);
    color: var(--bt-warning);
}

.draft-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--bt-radius-sm);
    background: var(--bt-warning-soft);
    color: var(--bt-warning);
    margin-left: 6px;
}

/* creator_guide.html uses a slightly larger draft badge */
.guide-header .draft-badge {
    font-size: 11px;
    padding: 2px var(--bt-space-3);
    margin-left: var(--bt-space-3);
}


/* ============================================================ */
/* Buttons (browse-card View, primary, secondary, success)      */
/* ============================================================ */

.btn-view {
    background: var(--bt-accent);
    color: var(--bt-accent-fg);
    border: none;
    padding: var(--bt-space-2) 14px;
    border-radius: var(--bt-radius-sm);
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn-view:hover {
    background: var(--bt-accent-hover);
}

.creator-card .btn-view {
    margin-top: 10px;
}

.btn {
    padding: 10px 20px;
    border-radius: var(--bt-radius-md);
    font-size: var(--bt-font-size-lg);
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    text-align: center;
}

.btn-primary {
    background: var(--bt-accent);
    color: var(--bt-accent-fg);
}

.btn-primary:hover {
    background: var(--bt-accent-hover);
}

.btn-secondary {
    background: var(--bt-surface-2);
    color: var(--bt-text);
}

.btn-secondary:hover {
    background: var(--bt-surface);
}

.btn-success {
    background: var(--bt-success);
    color: var(--bt-success-fg);
}

.btn-success:hover {
    background: var(--bt-success-hover);
}

.btn-static {
    cursor: default;
}

.btn-tight {
    margin-top: var(--bt-space-2);
    padding: var(--bt-space-2) var(--bt-space-4);
    font-size: 11px;
}

/* signal_marketplace_detail subscribe variants */
.btn-subscribe {
    background: var(--bt-accent);
    color: var(--bt-accent-fg);
    padding: 10px 24px;
    border-radius: var(--bt-radius-md);
    font-size: var(--bt-font-size-lg);
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.btn-subscribe:hover {
    background: var(--bt-accent-hover);
}

.btn-subscribed {
    background: var(--bt-success-soft);
    color: var(--bt-success);
    cursor: default;
    padding: 10px 24px;
    border-radius: var(--bt-radius-md);
    font-size: var(--bt-font-size-lg);
    font-weight: 600;
    border: none;
}

.btn-unsubscribe {
    background: var(--bt-danger-soft);
    color: var(--bt-danger);
    padding: 10px 24px;
    border-radius: var(--bt-radius-md);
    font-size: var(--bt-font-size-lg);
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.btn-unsubscribe:hover {
    background: var(--bt-danger-hover);
    color: var(--bt-danger-fg);
}

.btn-cancelling {
    background: var(--bt-warning-soft);
    color: var(--bt-warning);
    padding: 10px 24px;
    border-radius: var(--bt-radius-md);
    font-size: var(--bt-font-size-lg);
    font-weight: 600;
    border: none;
}


/* ============================================================ */
/* Pagination                                                   */
/* ============================================================ */

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--bt-space-5);
    margin-top: var(--bt-space-6);
    padding: var(--bt-space-5);
}

.page-link {
    color: var(--bt-accent-link);
    text-decoration: none;
    font-size: var(--bt-font-size-lg);
}

.page-link:hover {
    color: var(--bt-text-strong);
}

.page-info {
    color: var(--bt-text-faint);
    font-size: var(--bt-font-size-md);
}

.page-current {
    color: var(--bt-text-muted);
}

/* marketplace.html (browse) pagination uses a "Page X of Y" inline
   span instead of the .page-info span used by signal_marketplace. */
.page-count {
    padding: 6px 14px;
    font-size: 12px;
    color: var(--bt-text-faint);
}


/* ============================================================ */
/* Featured creators strip (marketplace.html only)              */
/* ============================================================ */
/* Distinct from the .creator-card used in creator_directory.html.
   The featured strip is a horizontal scroller above the strategy
   grid; the directory page is a separate browse grid. */

.featured-creators {
    margin-bottom: var(--bt-space-6);
}

.featured-title {
    font-size: var(--bt-font-size-lg);
    font-weight: 600;
    color: var(--bt-text-strong);
    margin-bottom: var(--bt-space-4);
}

.featured-strip {
    display: flex;
    gap: var(--bt-space-4);
    overflow-x: auto;
}

.featured-link {
    text-decoration: none;
    flex-shrink: 0;
}

.featured-card {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    padding: var(--bt-space-4);
    width: 200px;
    text-align: center;
}

.featured-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.featured-avatar-fallback {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bt-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--bt-accent-fg);
    margin: 0 auto var(--bt-space-3);
}

.featured-name {
    font-size: var(--bt-font-size-md);
    font-weight: 600;
    color: var(--bt-text-strong);
}

.featured-badge {
    color: var(--bt-success);
    font-size: 10px;
}

.featured-tagline {
    font-size: 11px;
    color: var(--bt-text-faint);
    margin-top: 2px;
}

.featured-subscribers {
    font-size: 11px;
    color: var(--bt-text-faint);
    margin-top: var(--bt-space-2);
}


/* Inline rating star color used in browse-card metadata. */
.rating-inline {
    color: var(--bt-warning);
}


/* ============================================================ */
/* Strategy detail header + info (marketplace_strategy.html)    */
/* ============================================================ */

.strategy-header {
    margin-bottom: var(--bt-space-6);
}

.strategy-name {
    font-size: 28px;
    font-weight: 700;
    color: var(--bt-text-strong);
}

.strategy-creator {
    font-size: var(--bt-font-size-lg);
    color: var(--bt-text-faint);
    margin-top: var(--bt-space-2);
}

.strategy-headline {
    font-size: 15px;
    color: var(--bt-text-muted);
    margin-top: var(--bt-space-3);
    line-height: 1.5;
}

.tags-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: var(--bt-space-4);
}

.section {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    padding: 20px;
    margin-bottom: var(--bt-space-5);
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bt-text-strong);
    margin-bottom: var(--bt-space-4);
}

.creator-profile-page .section-title {
    font-size: var(--bt-font-size-xl);
    margin-bottom: var(--bt-space-5);
}

.section-title.has-top-gap {
    margin-top: var(--bt-space-6);
}

.section-title.has-large-gap {
    margin-top: var(--bt-space-7);
}

.section-count {
    font-size: var(--bt-font-size-lg);
    font-weight: normal;
    color: var(--bt-text-faint);
}

.section p {
    font-size: var(--bt-font-size-lg);
    line-height: 1.6;
    color: var(--bt-text);
}

.actions {
    display: flex;
    gap: var(--bt-space-4);
    margin-bottom: var(--bt-space-6);
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--bt-space-4);
    margin-bottom: var(--bt-space-5);
}

.metric-card {
    background: var(--bt-surface-2);
    padding: var(--bt-space-4);
    border-radius: var(--bt-radius-md);
    text-align: center;
}

.metric-card .metric-value {
    font-size: 18px;
    font-weight: 700;
}

.metric-card .metric-label {
    font-size: 11px;
    margin-top: 2px;
}

.benchmark-context {
    font-size: 11px;
    color: var(--bt-text-faint);
    margin-top: var(--bt-space-3);
    text-align: center;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bt-space-4);
}

.info-item {
    padding: 10px;
    background: var(--bt-surface-2);
    border-radius: var(--bt-radius-sm);
}

.info-label {
    font-size: 11px;
    color: var(--bt-text-muted);
}

.info-value {
    font-size: var(--bt-font-size-lg);
    color: var(--bt-text-strong);
    margin-top: 2px;
}


/* ============================================================ */
/* Version history list                                         */
/* ============================================================ */

.version-list {
    list-style: none;
}

.version-item {
    padding: var(--bt-space-3) 0;
    border-bottom: 1px solid var(--bt-border);
    font-size: var(--bt-font-size-md);
}

.version-item:last-child {
    border-bottom: none;
}

.version-label {
    color: var(--bt-text-strong);
    font-weight: 600;
}

.version-date {
    color: var(--bt-text-muted);
    font-size: 11px;
    margin-left: var(--bt-space-3);
}

.version-summary {
    color: var(--bt-text-faint);
    font-size: 12px;
    margin-top: 2px;
}

.version-row {
    border-bottom: 1px solid var(--bt-border);
    padding: var(--bt-space-3) 0;
}

.version-head {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--bt-space-2);
}

.signal-detail-page .version-summary {
    font-size: var(--bt-font-size-md);
    color: var(--bt-text-muted);
    margin: 0;
}


/* ============================================================ */
/* Backtest run list                                            */
/* ============================================================ */

.run-list {
    list-style: none;
}

.run-item {
    padding: var(--bt-space-3);
    background: var(--bt-surface-2);
    border-radius: var(--bt-radius-sm);
    margin-bottom: 6px;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
}

.run-spec {
    color: var(--bt-text-faint);
}

.run-return {
    font-weight: 600;
}

.runner-creator {
    color: var(--bt-accent-link);
}

.runner-subscriber {
    color: var(--bt-success);
}

.run-list-spaced {
    margin-top: var(--bt-space-3);
}

.details-summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--bt-text-faint);
    margin-top: var(--bt-space-3);
}


/* ============================================================ */
/* Warning / disclosure boxes                                   */
/* ============================================================ */

.warning-box {
    background: var(--bt-warning-soft);
    border: 1px solid var(--bt-warning);
    border-radius: var(--bt-radius-md);
    padding: var(--bt-space-4) var(--bt-space-5);
    font-size: 12px;
    color: var(--bt-warning);
    margin-bottom: var(--bt-space-5);
}

.disclosure {
    font-size: 12px;
    color: var(--bt-warning);
    margin-top: var(--bt-space-5);
    padding: 10px;
    background: var(--bt-warning-soft);
    border-radius: var(--bt-radius-sm);
    border: 1px solid var(--bt-warning);
}


/* ============================================================ */
/* Reviews (strategy detail)                                    */
/* ============================================================ */

.review-summary {
    display: flex;
    gap: var(--bt-space-5);
    margin-bottom: var(--bt-space-5);
    padding: 10px;
    background: var(--bt-surface-2);
    border-radius: var(--bt-radius-md);
}

.review-summary-item {
    text-align: center;
    flex: 1;
}

.review-score-large {
    font-size: var(--bt-font-size-2xl);
    font-weight: 700;
    color: var(--bt-warning);
}

.review-score {
    font-size: 16px;
    font-weight: 600;
    color: var(--bt-text-strong);
}

.review-label {
    font-size: 10px;
    color: var(--bt-text-muted);
}

.review-item {
    padding: var(--bt-space-4);
    border-bottom: 1px solid var(--bt-border);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--bt-space-2);
}

.review-stars {
    color: var(--bt-warning);
    font-weight: 600;
}

.review-title {
    color: var(--bt-text-strong);
    margin-left: var(--bt-space-3);
    font-weight: 600;
}

.review-meta {
    font-size: 11px;
    color: var(--bt-text-muted);
}

.review-body {
    font-size: var(--bt-font-size-md);
    color: var(--bt-text);
    margin: var(--bt-space-2) 0 0 0;
    line-height: 1.4;
}


/* ============================================================ */
/* Q&A section (strategy + signal detail)                       */
/* ============================================================ */

.qa-form,
.qa-composer {
    margin-bottom: var(--bt-space-5);
}

.qa-textarea,
.qa-input {
    width: 100%;
    padding: var(--bt-space-3);
    background: var(--bt-surface);
    color: var(--bt-text);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-sm);
    font-size: var(--bt-font-size-md);
    resize: vertical;
    box-sizing: border-box;
}

.qa-textarea-small,
.qa-input.is-answer {
    padding: 6px;
    font-size: 12px;
}

.qa-button {
    margin-top: var(--bt-space-2);
    background: var(--bt-accent);
    color: var(--bt-accent-fg);
    border: none;
    padding: 6px 14px;
    border-radius: var(--bt-radius-sm);
    font-size: 12px;
    cursor: pointer;
}

.qa-button.is-small {
    padding: var(--bt-space-2) var(--bt-space-4);
    font-size: 11px;
}

.qa-item {
    border-bottom: 1px solid var(--bt-border);
    padding: var(--bt-space-4) 0;
}

.qa-content,
.qa-question {
    font-size: var(--bt-font-size-md);
    color: var(--bt-text);
}

.qa-meta {
    font-size: 11px;
    color: var(--bt-text-faint);
    margin-top: var(--bt-space-2);
}

.signal-detail-page .qa-meta {
    font-size: 12px;
    color: var(--bt-text-muted);
}

.qa-answer {
    margin-top: var(--bt-space-3);
    margin-left: 20px;
    padding: var(--bt-space-3);
    background: var(--bt-surface-2);
    border-left: 3px solid var(--bt-accent);
    border-radius: var(--bt-radius-sm);
}

.qa-answer-form {
    margin-top: var(--bt-space-3);
    margin-left: 20px;
}

.qa-answer-label {
    font-size: 11px;
    color: var(--bt-accent-link);
    margin-bottom: var(--bt-space-2);
}

.qa-answer-content {
    font-size: var(--bt-font-size-md);
    color: var(--bt-text);
}

.qa-answer-date {
    font-size: 12px;
    color: var(--bt-text-muted);
    margin-top: var(--bt-space-2);
}

.qa-delete,
.link-danger {
    background: none;
    border: none;
    color: var(--bt-danger);
    font-size: 11px;
    cursor: pointer;
    margin-left: var(--bt-space-3);
}

.empty-qa {
    color: var(--bt-text-muted);
    text-align: center;
    padding: 20px;
}


/* ============================================================ */
/* Earnings page (marketplace_earnings.html)                    */
/* ============================================================ */

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--bt-space-5);
    margin-bottom: var(--bt-space-7);
}

.stat-card {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    padding: 20px;
    text-align: center;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--bt-text-strong);
}

.stat-value.highlight {
    color: var(--bt-success);
}

.stat-label {
    font-size: 12px;
    color: var(--bt-text-faint);
    margin-top: var(--bt-space-2);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    text-align: left;
    font-size: 12px;
    color: var(--bt-text-faint);
    padding: var(--bt-space-3);
    border-bottom: 1px solid var(--bt-border);
}

td {
    padding: 10px var(--bt-space-3);
    border-bottom: 1px solid var(--bt-border-soft);
    font-size: var(--bt-font-size-md);
}

.strategy-name {
    color: var(--bt-text-strong);
    font-weight: 600;
}

.sat-value {
    color: var(--bt-success);
    font-weight: 600;
}

.zero-state {
    text-align: center;
    padding: 40px;
    color: var(--bt-text-muted);
}

.zero-state h3 {
    color: var(--bt-text-faint);
    margin-bottom: var(--bt-space-3);
}

.link {
    color: var(--bt-accent-link);
    text-decoration: none;
}

.link:hover {
    color: var(--bt-text-strong);
}

.fee-note {
    font-size: var(--bt-font-size-md);
    color: var(--bt-text);
    line-height: 1.6;
}


/* ============================================================ */
/* Creator profile page                                         */
/* ============================================================ */

.profile-header {
    display: flex;
    gap: var(--bt-space-6);
    align-items: flex-start;
    margin-bottom: var(--bt-space-7);
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bt-accent), var(--bt-accent-link));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: var(--bt-accent-fg);
    flex-shrink: 0;
}

.profile-banner img,
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info h2 {
    font-size: var(--bt-font-size-2xl);
    color: var(--bt-text-strong);
    margin-bottom: var(--bt-space-2);
}

.profile-meta {
    font-size: var(--bt-font-size-md);
    color: var(--bt-text-faint);
    margin-bottom: var(--bt-space-3);
}

.profile-bio {
    font-size: var(--bt-font-size-lg);
    color: var(--bt-text);
    line-height: 1.5;
}

.profile-tagline {
    font-size: var(--bt-font-size-lg);
    color: var(--bt-text-muted);
    font-style: italic;
    margin-bottom: var(--bt-space-2);
}

.profile-banner {
    width: 100%;
    height: 200px;
    border-radius: var(--bt-radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
}

.profile-title {
    display: flex;
    align-items: center;
    gap: var(--bt-space-3);
}

/* Creator badge level color tiers. */
.creator-badge {
    font-size: var(--bt-font-size-lg);
}

.creator-badge.is-official {
    color: var(--bt-verified);
}

.creator-badge.is-trusted {
    color: var(--bt-warning);
}

.creator-badge.is-established {
    color: var(--bt-accent-link);
}

.creator-badge.is-emerging {
    color: var(--bt-success);
}

.badge-icon {
    color: var(--bt-success);
    font-size: 12px;
    margin-left: var(--bt-space-2);
}

.badge-icon.established {
    color: var(--bt-accent-link);
}

.badge-icon.trusted {
    color: var(--bt-warning);
}

.badge-icon.official {
    color: var(--bt-verified);
}

.follow-btn {
    font-size: 12px;
    padding: var(--bt-space-2) var(--bt-space-4);
    border-radius: var(--bt-radius-sm);
    cursor: pointer;
    margin-left: var(--bt-space-3);
    border: 1px solid var(--bt-border);
    background: transparent;
    color: var(--bt-text-faint);
}

.follow-btn.is-following {
    border-color: var(--bt-accent);
    background: var(--bt-accent);
    color: var(--bt-accent-fg);
}

/* creator profile uses a flex stats row (not the earnings page grid). */
.creator-profile-page .stats-row {
    display: flex;
    gap: var(--bt-space-6);
    margin-bottom: var(--bt-space-7);
}

.stat {
    text-align: center;
    padding: var(--bt-space-5) var(--bt-space-6);
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    flex: 1;
}

.stat .stat-value {
    font-size: var(--bt-font-size-2xl);
}

.tag-list {
    display: flex;
    gap: var(--bt-space-2);
    flex-wrap: wrap;
    margin: var(--bt-space-3) 0;
}

/* On creator profile the .tag-pill is non-interactive (display only),
   so we don't want bt-tag-pill's hover/active states. Static muted
   look. */
.creator-profile-page .tag-pill {
    padding: 2px var(--bt-space-3);
    font-size: 10px;
    border-radius: 10px;
    background: var(--bt-surface-2);
    color: var(--bt-text-muted);
}

.social-links {
    display: flex;
    gap: var(--bt-space-4);
    margin-top: 10px;
    font-size: 18px;
}

.social-links a {
    color: var(--bt-accent-link);
    text-decoration: none;
}

.is-positive {
    color: var(--bt-success);
}

.is-muted {
    color: var(--bt-text-faint);
}

.composer-card,
.creator-post {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
}

.composer-card {
    padding: var(--bt-space-5);
    margin-bottom: var(--bt-space-5);
}

.composer-input {
    width: 100%;
    background: var(--bt-surface);
    color: var(--bt-text);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-sm);
    padding: var(--bt-space-3);
    font-size: var(--bt-font-size-md);
    resize: vertical;
    box-sizing: border-box;
}

.composer-actions,
.post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--bt-space-3);
}

.char-count,
.post-date,
.post-action {
    font-size: 11px;
    color: var(--bt-text-muted);
}

.post-button {
    background: var(--bt-accent);
    color: var(--bt-accent-fg);
    border: none;
    padding: 6px 16px;
    border-radius: var(--bt-radius-sm);
    font-size: var(--bt-font-size-md);
    cursor: pointer;
}

.creator-post {
    padding: 14px;
    margin-bottom: var(--bt-space-3);
}

.creator-post.is-pinned {
    border-color: var(--bt-accent);
    border-left: 3px solid var(--bt-accent);
}

.pinned-label {
    font-size: 11px;
    color: var(--bt-accent-link);
    margin-bottom: 6px;
}

.creator-post-content {
    font-size: var(--bt-font-size-md);
    color: var(--bt-text);
    line-height: 1.5;
}

.post-actions,
.guide-actions {
    display: flex;
    gap: var(--bt-space-3);
}

.post-action {
    background: none;
    border: none;
    cursor: pointer;
}

.post-action.is-accent {
    color: var(--bt-accent-link);
}

.post-action.is-danger {
    color: var(--bt-danger);
}

.guide-link {
    font-size: 12px;
    font-weight: 400;
    margin-left: var(--bt-space-4);
}

.edit-link {
    font-size: 11px;
    color: var(--bt-accent-link);
    text-decoration: none;
    margin-left: var(--bt-space-4);
}


/* ============================================================ */
/* Creator guide reader (creator_guide.html)                    */
/* ============================================================ */

.guide-header {
    margin-bottom: var(--bt-space-6);
}

.guide-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--bt-text-strong);
    margin-bottom: var(--bt-space-3);
}

.guide-meta {
    font-size: var(--bt-font-size-md);
    color: var(--bt-text-faint);
}

.guide-meta a {
    color: var(--bt-accent-link);
    text-decoration: none;
}

.guide-content {
    font-size: 15px;
    color: var(--bt-text);
    line-height: 1.7;
}


/* ============================================================ */
/* Creator guide editor (creator_guide_editor.html)             */
/* ============================================================ */

.form-group {
    margin-bottom: var(--bt-space-5);
}

.form-group label {
    display: block;
    font-size: var(--bt-font-size-md);
    color: var(--bt-text-muted);
    margin-bottom: var(--bt-space-2);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    background: var(--bt-surface);
    color: var(--bt-text);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-sm);
    font-size: var(--bt-font-size-lg);
    font-family: inherit;
    box-sizing: border-box;
}

.form-group textarea {
    resize: vertical;
    min-height: 400px;
    line-height: 1.6;
}

.char-count {
    font-size: 11px;
    color: var(--bt-text-faint);
    text-align: right;
    margin-top: var(--bt-space-2);
}

.btn-row {
    display: flex;
    gap: var(--bt-space-3);
    margin-top: var(--bt-space-5);
}

.guide-editor-page .btn {
    padding: var(--bt-space-3) 20px;
    border: none;
    border-radius: var(--bt-radius-sm);
    font-size: var(--bt-font-size-md);
    cursor: pointer;
    font-weight: 400;
}

.guide-editor-page .btn-secondary {
    background: var(--bt-surface-2);
    color: var(--bt-text);
}

.btn-danger {
    background: var(--bt-danger);
    color: var(--bt-danger-fg);
}

.status-msg {
    margin-top: var(--bt-space-4);
    font-size: var(--bt-font-size-md);
}

.status-success {
    color: var(--bt-success);
}

.status-error {
    color: var(--bt-danger);
}

/* signal_marketplace_detail.html status-msg gets a banner bg */
.signal-detail-page .status-msg {
    text-align: center;
    padding: var(--bt-space-4);
    margin-bottom: var(--bt-space-5);
    border-radius: var(--bt-radius-sm);
    font-size: var(--bt-font-size-md);
}

.signal-detail-page .status-msg.success {
    background: var(--bt-success-soft);
    color: var(--bt-success);
}

.signal-detail-page .status-msg.error {
    background: var(--bt-danger-soft);
    color: var(--bt-danger);
}


/* ============================================================ */
/* Signal detail header (signal_marketplace_detail.html)        */
/* ============================================================ */

.signal-header {
    margin-bottom: var(--bt-space-6);
}

.signal-name {
    font-size: 28px;
    font-weight: 700;
    color: var(--bt-text-strong);
    margin-bottom: var(--bt-space-3);
}

.signal-meta {
    display: flex;
    gap: var(--bt-space-5);
    align-items: center;
    flex-wrap: wrap;
}

.subscribers-count {
    font-size: var(--bt-font-size-md);
    color: var(--bt-text-faint);
}

.detail-section {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    padding: var(--bt-space-6);
    margin-bottom: var(--bt-space-5);
}

.detail-section h3 {
    font-size: 16px;
    color: var(--bt-text-strong);
    margin-bottom: var(--bt-space-4);
}

.detail-section p {
    font-size: var(--bt-font-size-lg);
    color: var(--bt-text-muted);
    line-height: 1.6;
}

.pricing-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price {
    font-size: var(--bt-font-size-2xl);
    font-weight: 700;
}

.price.free {
    color: var(--bt-success);
}

.price.paid {
    color: var(--bt-warning);
}

.price-period {
    font-size: var(--bt-font-size-md);
    color: var(--bt-text-faint);
}

.price-note {
    font-size: 12px;
    color: var(--bt-success);
    margin-top: 6px;
}

.price-compare,
.access-note {
    font-size: 12px;
    color: var(--bt-text-faint);
    margin-top: 6px;
}

.signal-detail-page .actions {
    display: flex;
    gap: var(--bt-space-4);
    align-items: center;
    margin-bottom: 0;
}

.tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: var(--bt-space-4);
}

.creator-line {
    color: var(--bt-text-faint);
}

.creator-line a {
    color: var(--bt-accent-link);
    text-decoration: none;
}

.locked-price-note {
    font-size: 11px;
    color: var(--bt-success);
    margin-top: 2px;
}

.new-price-note {
    font-size: 11px;
    color: var(--bt-text-faint);
    margin-top: 2px;
}

.nav-active {
    color: var(--bt-text-strong) !important;
    font-weight: 600;
}