/* Theme tokens: customizer keys mirror `blockbros_suite_appearance_hex_default()` (see `includes/suite-customizer-appearance-defs.php`). Translucent surfaces use `color-mix()` with these hex vars so saved overrides match the picker defaults. */
.bb-watchlist {
    --bb-watchlist-font-scale: 1;
    --bb-watchlist-up: #4ade80;
    --bb-watchlist-down: #f87171;
    --bb-watchlist-bg-start: #020617;
    --bb-watchlist-bg-end: #0f172a;
    --bb-watchlist-accent-top: #22d3ee;
    --bb-watchlist-accent-bottom: #06b6d4;
    --bb-watchlist-text: #f1f5f9;
    --bb-watchlist-outer-border: #22d3ee;
    --bb-watchlist-title: #f8fafc;
    --bb-watchlist-subtitle: #94a3b8;
    --bb-watchlist-attribution: #64748b;
    --bb-watchlist-link: #67e8f9;
    --bb-watchlist-link-hover: #a5f3fc;
    --bb-watchlist-meta: #94a3b8;
    --bb-watchlist-refresh-text: #e2e8f0;
    --bb-watchlist-refresh-bg: #e2e8f0;
    --bb-watchlist-stale-text: #fde047;
    --bb-watchlist-stale-accent: #facc15;
    --bb-watchlist-stale-notice-bg: #2a2314;
    --bb-watchlist-stale-notice-border: #a16207;
    --bb-watchlist-disclosure-text: #94a3b8;
    --bb-watchlist-disclosure-border: #334155;
    --bb-watchlist-empty-bg: #0f172a;
    --bb-watchlist-empty-text: #f1f5f9;
    --bb-watchlist-card-bg-start: #1e293b;
    --bb-watchlist-card-bg-end: #0f172a;
    --bb-watchlist-card-border: #22d3ee;
    --bb-watchlist-featured-bg-start: #1e293b;
    --bb-watchlist-featured-bg-end: #0f172a;
    --bb-watchlist-featured-accent: #22d3ee;
    --bb-watchlist-badge-accent: #fb923c;
    --bb-watchlist-label-accent: #22d3ee;
    --bb-watchlist-coin-name: #f8fafc;
    --bb-watchlist-price: #f8fafc;
    --bb-watchlist-stat: #94a3b8;
    --bb-watchlist-insight: #cbd5e1;
    --bb-watchlist-chart-wrap-bg: #22d3ee;
    --bb-watchlist-primary-btn-bg-start: #22d3ee;
    --bb-watchlist-primary-btn-bg-end: #06b6d4;
    --bb-watchlist-primary-btn-text: #020617;
    --bb-watchlist-secondary-btn-bg: #f8fafc;
    --bb-watchlist-secondary-btn-border: #f8fafc;
    --bb-watchlist-secondary-btn-text: #e2e8f0;
    --bb-watchlist-signal-breakout: #4ade80;
    --bb-watchlist-signal-whale: #38bdf8;
    --bb-watchlist-signal-undervalued: #c084fc;
    --bb-watchlist-signal-trending: #fb923c;
    --bb-watchlist-nfa-text: #fde68a;
    --bb-watchlist-nfa-accent: #facc15;
    --bb-watchlist-nfa-notice-bg: #2a2610;
    --bb-watchlist-nfa-notice-border: #a3a30a;
    background:
        radial-gradient(
            ellipse 120% 80% at 50% -20%,
            color-mix(in srgb, var(--bb-watchlist-accent-top) 12%, transparent),
            transparent 50%
        ),
        linear-gradient(180deg, var(--bb-watchlist-bg-start) 0%, var(--bb-watchlist-bg-end) 100%);
    padding: calc(34px * var(--bb-watchlist-font-scale-shell-user, var(--bb-watchlist-font-scale, 1)));
    border-radius: calc(22px * var(--bb-watchlist-font-scale-shell-user, var(--bb-watchlist-font-scale, 1)));
    color: var(--bb-watchlist-text, #f1f5f9);
    border: 1px solid rgba(34, 211, 238, 0.12);
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.06),
        0 24px 64px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: min(100%, var(--bb-module-shell-max-width-desktop, 100%));
    min-width: min(100%, var(--bb-module-shell-min-width-desktop, 320px));
    margin: 0 auto;
}

/* Top brand bar — same pattern as `.tgal-shell::before` (TGAL `frontend.css`); stops use existing customizer tokens. */
.bb-watchlist::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        var(--bb-watchlist-badge-accent) 0%,
        var(--bb-watchlist-accent-top) 42%,
        var(--bb-watchlist-accent-bottom) 58%,
        var(--bb-watchlist-up) 100%
    );
}

@supports (color: color-mix(in srgb, white, black)) {
    .bb-watchlist {
        border: 1px solid color-mix(in srgb, var(--bb-watchlist-outer-border, #ffffff) 4%, transparent);
    }
}

.bb-watchlist[id] {
    scroll-margin-top: var(--bb-watchlist-scroll-margin, 2rem);
}

.bb-watchlist__title {
    text-align: center;
    margin: 0 0 calc(10px * var(--bb-watchlist-font-scale-hero-user, var(--bb-watchlist-font-scale, 1)));
    font-size: calc(34px * var(--bb-watchlist-font-scale-hero-user, var(--bb-watchlist-font-scale, 1)));
    line-height: 1.15;
    font-weight: 800;
    color: var(--bb-watchlist-title, #f8fafc);
    letter-spacing: -0.02em;
    text-shadow: 0 0 40px rgba(34, 211, 238, 0.15);
}

.bb-watchlist__subtitle {
    text-align: center;
    color: var(--bb-watchlist-subtitle, #94a3b8);
    margin: 0 0 calc(8px * var(--bb-watchlist-font-scale-hero-user, var(--bb-watchlist-font-scale, 1)));
    font-size: calc(16px * var(--bb-watchlist-font-scale-hero-user, var(--bb-watchlist-font-scale, 1)));
    line-height: 1.5;
}

.bb-watchlist__tagline {
    text-align: center;
    color: var(--bb-watchlist-subtitle, #94a3b8);
    margin: 0 0 calc(18px * var(--bb-watchlist-font-scale-hero-user, var(--bb-watchlist-font-scale, 1)));
    font-size: calc(15px * var(--bb-watchlist-font-scale-hero-user, var(--bb-watchlist-font-scale, 1)));
    line-height: 1.55;
    max-width: 36em;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.95;
}

.bb-watchlist__attribution {
    text-align: center;
    margin: 0 0 calc(20px * var(--bb-watchlist-font-scale-hero-user, var(--bb-watchlist-font-scale, 1)));
    font-size: calc(12px * var(--bb-watchlist-font-scale-hero-user, var(--bb-watchlist-font-scale, 1)));
    color: var(--bb-watchlist-attribution, #7a8ca8);
    line-height: 1.5;
}

.bb-watchlist__attribution a {
    color: var(--bb-watchlist-link, #8eb4ff);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bb-watchlist__attribution a:hover,
.bb-watchlist__attribution a:focus {
    color: var(--bb-watchlist-link-hover, #b8d0ff);
}

.bb-watchlist--stale-prices {
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.25), 0 18px 45px rgba(0, 0, 0, 0.28);
}

@supports (color: color-mix(in srgb, white, black)) {
    .bb-watchlist--stale-prices {
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--bb-watchlist-stale-accent, #fbbf24) 25%, transparent),
            0 18px 45px rgba(0, 0, 0, 0.28);
    }
}

.bb-watchlist--compact {
    padding: calc(22px * var(--bb-watchlist-font-scale-shell-user, var(--bb-watchlist-font-scale, 1)));
    border-radius: calc(14px * var(--bb-watchlist-font-scale-shell-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist--compact .bb-watchlist__title {
    font-size: calc(26px * var(--bb-watchlist-font-scale-hero-user, var(--bb-watchlist-font-scale, 1)));
    margin-bottom: calc(8px * var(--bb-watchlist-font-scale-hero-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist--compact .bb-watchlist__subtitle {
    font-size: calc(14px * var(--bb-watchlist-font-scale-hero-user, var(--bb-watchlist-font-scale, 1)));
    margin-bottom: calc(8px * var(--bb-watchlist-font-scale-hero-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist--compact .bb-watchlist__tagline {
    font-size: calc(13px * var(--bb-watchlist-font-scale-hero-user, var(--bb-watchlist-font-scale, 1)));
    margin-bottom: calc(14px * var(--bb-watchlist-font-scale-hero-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist--compact .bb-watchlist__meta {
    margin-bottom: calc(18px * var(--bb-watchlist-font-scale-meta-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist--compact .bb-watchlist__featured {
    margin-bottom: calc(16px * var(--bb-watchlist-font-scale-layout-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist--compact .bb-watchlist__grid {
    gap: calc(14px * var(--bb-watchlist-font-scale-layout-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist--compact .bb-watchlist__card {
    padding: calc(16px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    border-radius: calc(14px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist--compact .bb-watchlist__card--featured {
    padding: calc(18px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist--compact .bb-watchlist__coin-name {
    font-size: calc(16px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist--compact .bb-watchlist__card--featured .bb-watchlist__coin-name {
    font-size: calc(19px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist--compact .bb-watchlist__price {
    font-size: calc(15px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    margin-bottom: calc(10px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist--compact .bb-watchlist__card--featured .bb-watchlist__price {
    font-size: calc(17px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist--compact .bb-watchlist__chart-wrap {
    height: calc(52px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist--compact .bb-watchlist__card--featured .bb-watchlist__featured-main > .bb-watchlist__chart-wrap {
    height: calc(72px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist--compact .bb-watchlist__featured-chart .bb-watchlist__chart-wrap {
    min-height: calc(112px * var(--bb-watchlist-font-scale-layout-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist--compact .bb-watchlist__actions {
    margin-top: calc(14px * var(--bb-watchlist-font-scale-buttons-user, var(--bb-watchlist-font-scale, 1)));
    gap: calc(8px * var(--bb-watchlist-font-scale-buttons-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist__stale-notice {
    margin: 0 0 calc(20px * var(--bb-watchlist-font-scale-notices-user, var(--bb-watchlist-font-scale, 1)));
    padding: calc(12px * var(--bb-watchlist-font-scale-notices-user, var(--bb-watchlist-font-scale, 1))) calc(16px * var(--bb-watchlist-font-scale-notices-user, var(--bb-watchlist-font-scale, 1)));
    text-align: center;
    font-size: calc(13px * var(--bb-watchlist-font-scale-notices-user, var(--bb-watchlist-font-scale, 1)));
    font-weight: 600;
    line-height: 1.45;
    color: var(--bb-watchlist-stale-text, #fcd34d);
    background: var(--bb-watchlist-stale-notice-bg, rgba(251, 191, 36, 0.08));
    border: 1px solid var(--bb-watchlist-stale-notice-border, rgba(251, 191, 36, 0.22));
    border-radius: 10px;
}

@supports (color: color-mix(in srgb, white, black)) {
    .bb-watchlist__stale-notice {
        background: var(
            --bb-watchlist-stale-notice-bg,
            color-mix(in srgb, var(--bb-watchlist-stale-accent, #fbbf24) 8%, transparent)
        );
        border: 1px solid
            var(--bb-watchlist-stale-notice-border, color-mix(in srgb, var(--bb-watchlist-stale-accent, #fbbf24) 22%, transparent));
    }
}

.bb-watchlist__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(14px * var(--bb-watchlist-font-scale-meta-user, var(--bb-watchlist-font-scale, 1)));
    flex-wrap: wrap;
    margin: 0 0 calc(26px * var(--bb-watchlist-font-scale-meta-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist__updated {
    color: var(--bb-watchlist-meta, #94a3b8);
    font-size: calc(13px * var(--bb-watchlist-font-scale-meta-user, var(--bb-watchlist-font-scale, 1)));
    line-height: 1.4;
}

.bb-watchlist__refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--bb-watchlist-refresh-text, #ffffff);
    text-decoration: none;
    font-size: calc(12px * var(--bb-watchlist-font-scale-meta-user, var(--bb-watchlist-font-scale, 1)));
    font-weight: 700;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

@supports (color: color-mix(in srgb, white, black)) {
    .bb-watchlist__refresh {
        background: color-mix(in srgb, var(--bb-watchlist-refresh-bg, #ffffff) 5%, transparent);
        border: 1px solid color-mix(in srgb, var(--bb-watchlist-refresh-bg, #ffffff) 5%, transparent);
    }
}

.bb-watchlist__refresh:hover,
.bb-watchlist__refresh:focus,
.bb-watchlist__refresh:active,
.bb-watchlist__refresh:visited {
    background: rgba(255, 255, 255, 0.10);
    color: var(--bb-watchlist-refresh-text, #ffffff);
    transform: translateY(-1px);
    text-decoration: none;
}

@supports (color: color-mix(in srgb, white, black)) {
    .bb-watchlist__refresh:hover,
    .bb-watchlist__refresh:focus,
    .bb-watchlist__refresh:active,
    .bb-watchlist__refresh:visited {
        background: color-mix(in srgb, var(--bb-watchlist-refresh-bg, #ffffff) 10%, transparent);
    }
}

.bb-watchlist__nfa {
    margin-top: calc(22px * var(--bb-watchlist-font-scale-notices-user, var(--bb-watchlist-font-scale, 1)));
    padding: calc(14px * var(--bb-watchlist-font-scale-notices-user, var(--bb-watchlist-font-scale, 1))) calc(18px * var(--bb-watchlist-font-scale-notices-user, var(--bb-watchlist-font-scale, 1)));
    font-size: calc(13px * var(--bb-watchlist-font-scale-notices-user, var(--bb-watchlist-font-scale, 1)));
    line-height: 1.55;
    font-weight: 600;
    text-align: center;
    color: var(--bb-watchlist-nfa-text, #fde68a);
    background: var(--bb-watchlist-nfa-notice-bg, rgba(250, 204, 21, 0.08));
    border: 1px solid var(--bb-watchlist-nfa-notice-border, rgba(250, 204, 21, 0.25));
    border-radius: calc(12px * var(--bb-watchlist-font-scale-notices-user, var(--bb-watchlist-font-scale, 1)));
    box-shadow: 0 0 24px rgba(250, 204, 21, 0.06);
}

@supports (color: color-mix(in srgb, white, black)) {
    .bb-watchlist__nfa {
        background: var(
            --bb-watchlist-nfa-notice-bg,
            color-mix(in srgb, var(--bb-watchlist-nfa-accent, #facc15) 8%, transparent)
        );
        border: 1px solid
            var(--bb-watchlist-nfa-notice-border, color-mix(in srgb, var(--bb-watchlist-nfa-accent, #facc15) 25%, transparent));
        box-shadow: 0 0 24px color-mix(in srgb, var(--bb-watchlist-nfa-accent, #facc15) 6%, transparent);
    }
}

.bb-watchlist__nfa-icon {
    margin-right: 0.35em;
    opacity: 0.95;
}

.bb-watchlist__disclosure {
    margin-top: calc(18px * var(--bb-watchlist-font-scale-notices-user, var(--bb-watchlist-font-scale, 1)));
    padding: calc(14px * var(--bb-watchlist-font-scale-notices-user, var(--bb-watchlist-font-scale, 1))) calc(16px * var(--bb-watchlist-font-scale-notices-user, var(--bb-watchlist-font-scale, 1)));
    font-size: calc(12px * var(--bb-watchlist-font-scale-notices-user, var(--bb-watchlist-font-scale, 1)));
    line-height: 1.55;
    color: var(--bb-watchlist-disclosure-text, #8fa1bc);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

@supports (color: color-mix(in srgb, white, black)) {
    .bb-watchlist__disclosure {
        border-top: 1px solid color-mix(in srgb, var(--bb-watchlist-disclosure-border, #ffffff) 6%, transparent);
    }
}

.bb-watchlist__disclosure a {
    color: var(--bb-watchlist-link, #8eb4ff);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.bb-watchlist__disclosure a:hover,
.bb-watchlist__disclosure a:focus {
    color: var(--bb-watchlist-link-hover, #b8d0ff);
}

.bb-watchlist__empty {
    background: var(--bb-watchlist-empty-bg, #0f172a);
    padding: 20px;
    border-radius: 14px;
    text-align: center;
    color: var(--bb-watchlist-empty-text, #ffffff);
}

@supports (color: color-mix(in srgb, white, black)) {
    .bb-watchlist__empty {
        background: color-mix(in srgb, var(--bb-watchlist-empty-bg, #0f172a) 72%, transparent);
    }
}

.bb-watchlist__featured {
    margin-bottom: calc(22px * var(--bb-watchlist-font-scale-layout-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist__featured-layout {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: calc(20px * var(--bb-watchlist-font-scale-layout-user, var(--bb-watchlist-font-scale, 1)));
    position: relative;
    z-index: 1;
}

.bb-watchlist__featured-main {
    flex: 1 1 280px;
    min-width: 0;
}

.bb-watchlist__featured-chart {
    flex: 1 1 240px;
    min-width: min(100%, 200px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
}

.bb-watchlist__featured-chart .bb-watchlist__chart-wrap {
    width: 100%;
    flex: 1 1 auto;
    min-height: calc(140px * var(--bb-watchlist-font-scale-layout-user, var(--bb-watchlist-font-scale, 1)));
    height: auto;
    margin: 0;
    border-radius: calc(14px * var(--bb-watchlist-font-scale-layout-user, var(--bb-watchlist-font-scale, 1)));
    background: rgba(2, 6, 23, 0.35);
    border: 1px solid rgba(34, 211, 238, 0.12);
    box-shadow: inset 0 0 32px rgba(34, 211, 238, 0.04);
}

.bb-watchlist__card--featured .bb-watchlist__actions {
    flex: 0 0 100%;
    width: 100%;
    margin-top: calc(18px * var(--bb-watchlist-font-scale-layout-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: calc(20px * var(--bb-watchlist-font-scale-layout-user, var(--bb-watchlist-font-scale, 1)));
}

@media (min-width: 960px) {
    .bb-watchlist__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.bb-watchlist__card {
    position: relative;
    background: linear-gradient(
        145deg,
        var(--bb-watchlist-card-bg-start, #1e293b) 0%,
        var(--bb-watchlist-card-bg-end, #0f172a) 100%
    );
    padding: calc(22px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    border-radius: calc(18px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    border: 1px solid rgba(34, 211, 238, 0.14);
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.04),
        0 16px 40px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

@supports (color: color-mix(in srgb, white, black)) {
    .bb-watchlist__card {
        border: 1px solid color-mix(in srgb, var(--bb-watchlist-card-border, #78a0ff) 10%, transparent);
        background: linear-gradient(
            145deg,
            color-mix(in srgb, var(--bb-watchlist-card-bg-start, #1e293b) 45%, transparent) 0%,
            color-mix(in srgb, var(--bb-watchlist-card-bg-end, #0f172a) 65%, transparent) 100%
        );
    }
}

.bb-watchlist__card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.12),
        0 22px 48px rgba(0, 0, 0, 0.4),
        0 0 48px rgba(34, 211, 238, 0.08);
    border-color: rgba(34, 211, 238, 0.28);
}

@supports (color: color-mix(in srgb, white, black)) {
    .bb-watchlist__card:hover {
        border-color: color-mix(in srgb, var(--bb-watchlist-card-border, #78a0ff) 18%, transparent);
    }
}

.bb-watchlist__card--featured {
    position: relative;
    padding: calc(24px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    border: 1px solid rgba(34, 211, 238, 0.28);
    box-shadow:
        0 0 0 1px rgba(34, 211, 238, 0.1),
        0 24px 56px rgba(0, 0, 0, 0.4),
        0 0 80px rgba(34, 211, 238, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    background:
        radial-gradient(circle at 100% 0%, rgba(34, 211, 238, 0.14), transparent 42%),
        linear-gradient(
            160deg,
            var(--bb-watchlist-featured-bg-start, #1e293b) 0%,
            var(--bb-watchlist-featured-bg-end, #0f172a) 100%
        );
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

@supports (color: color-mix(in srgb, white, black)) {
    .bb-watchlist__card--featured {
        border: 1px solid color-mix(in srgb, var(--bb-watchlist-featured-accent, #0385ff) 34%, transparent);
        box-shadow:
            0 0 0 1px color-mix(in srgb, var(--bb-watchlist-featured-accent, #0385ff) 8%, transparent),
            0 20px 44px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.02);
        background:
            radial-gradient(
                circle at top right,
                color-mix(in srgb, var(--bb-watchlist-featured-accent, #0385ff) 8%, transparent),
                transparent 28%
            ),
            linear-gradient(
                180deg,
                color-mix(in srgb, var(--bb-watchlist-featured-bg-start, #1e293b) 55%, transparent) 0%,
                color-mix(in srgb, var(--bb-watchlist-featured-bg-end, #0f172a) 75%, transparent) 100%
            );
    }
}

.bb-watchlist__card--featured > * {
    position: relative;
    z-index: 1;
}

.bb-watchlist__card--featured::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(
        circle at 100% 0%,
        rgba(34, 211, 238, 0.2),
        transparent 52%
    );
    pointer-events: none;
}

@supports (color: color-mix(in srgb, white, black)) {
    .bb-watchlist__card--featured::after {
        background: radial-gradient(
            circle at 100% 0%,
            color-mix(in srgb, var(--bb-watchlist-featured-accent, #0385ff) 18%, transparent),
            transparent 52%
        );
    }
}

.bb-watchlist__featured-badge {
    display: inline-flex;
    align-items: center;
    padding: calc(6px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1))) calc(12px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    border-radius: 999px;
    margin-bottom: calc(12px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    background: rgba(249, 115, 22, 0.14);
    color: var(--bb-watchlist-badge-accent, #fb923c);
    font-size: calc(12px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border: 1px solid rgba(249, 115, 22, 0.14);
}

@supports (color: color-mix(in srgb, white, black)) {
    .bb-watchlist__featured-badge {
        background: color-mix(in srgb, var(--bb-watchlist-badge-accent, #ff9c38) 14%, transparent);
        border: 1px solid color-mix(in srgb, var(--bb-watchlist-badge-accent, #ff9c38) 14%, transparent);
    }
}

.bb-watchlist__topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.bb-watchlist__label {
    display: inline-flex;
    align-items: center;
    padding: calc(6px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1))) calc(10px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.12);
    color: #a5f3fc;
    font-size: calc(11px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid rgba(3, 133, 255, 0.12);
}

@supports (color: color-mix(in srgb, white, black)) {
    .bb-watchlist__label {
        background: color-mix(in srgb, var(--bb-watchlist-label-accent, #0385ff) 14%, transparent);
        color: color-mix(in srgb, var(--bb-watchlist-label-accent, #0385ff) 72%, #ffffff);
        border: 1px solid color-mix(in srgb, var(--bb-watchlist-label-accent, #0385ff) 12%, transparent);
    }
}

.bb-watchlist__signal {
    display: inline-flex;
    align-items: center;
    padding: calc(6px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1))) calc(10px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    border-radius: 999px;
    font-size: calc(11px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    font-weight: 800;
    line-height: 1;
    border: 1px solid transparent;
}

.bb-watchlist__signal.signal-breakout {
    background: rgba(34, 197, 94, 0.12);
    color: var(--bb-watchlist-signal-breakout, #57e08d);
    border-color: rgba(34, 197, 94, 0.10);
}

.bb-watchlist__signal.signal-whale {
    background: rgba(59, 130, 246, 0.12);
    color: var(--bb-watchlist-signal-whale, #68b0ff);
    border-color: rgba(59, 130, 246, 0.10);
}

.bb-watchlist__signal.signal-undervalued {
    background: rgba(168, 85, 247, 0.14);
    color: var(--bb-watchlist-signal-undervalued, #c992ff);
    border-color: rgba(168, 85, 247, 0.10);
}

.bb-watchlist__signal.signal-trending {
    background: rgba(249, 115, 22, 0.12);
    color: var(--bb-watchlist-signal-trending, #ffac5f);
    border-color: rgba(249, 115, 22, 0.10);
}

@supports (color: color-mix(in srgb, white, black)) {
    .bb-watchlist__signal.signal-breakout {
        background: color-mix(in srgb, var(--bb-watchlist-signal-breakout, #57e08d) 12%, transparent);
        border-color: color-mix(in srgb, var(--bb-watchlist-signal-breakout, #57e08d) 10%, transparent);
    }

    .bb-watchlist__signal.signal-whale {
        background: color-mix(in srgb, var(--bb-watchlist-signal-whale, #68b0ff) 12%, transparent);
        border-color: color-mix(in srgb, var(--bb-watchlist-signal-whale, #68b0ff) 10%, transparent);
    }

    .bb-watchlist__signal.signal-undervalued {
        background: color-mix(in srgb, var(--bb-watchlist-signal-undervalued, #c992ff) 14%, transparent);
        border-color: color-mix(in srgb, var(--bb-watchlist-signal-undervalued, #c992ff) 10%, transparent);
    }

    .bb-watchlist__signal.signal-trending {
        background: color-mix(in srgb, var(--bb-watchlist-signal-trending, #ffac5f) 12%, transparent);
        border-color: color-mix(in srgb, var(--bb-watchlist-signal-trending, #ffac5f) 10%, transparent);
    }
}

.bb-watchlist__coin-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.bb-watchlist__coin-image {
    width: calc(44px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    height: calc(44px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    border-radius: 50%;
    display: block;
    box-shadow: 0 4px 20px rgba(34, 211, 238, 0.15), 0 4px 14px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
    border: 1px solid rgba(34, 211, 238, 0.2);
}

.bb-watchlist__coin-name {
    margin: 0;
    font-size: calc(18px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    line-height: 1.25;
    color: var(--bb-watchlist-coin-name, #ffffff);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.bb-watchlist__card--featured .bb-watchlist__coin-name {
    font-size: calc(22px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist__price {
    margin: 0 0 calc(14px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    font-size: calc(17px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    color: var(--bb-watchlist-price, #ffffff);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.bb-watchlist__card--featured .bb-watchlist__price {
    font-size: calc(20px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist__change {
    margin-left: 8px;
    font-weight: 800;
}

.bb-watchlist__change.is-positive {
    color: var(--bb-watchlist-up, #22c55e);
}

.bb-watchlist__change.is-negative {
    color: var(--bb-watchlist-down, #ef4444);
}

.bb-watchlist__chart-wrap {
    margin: 0 0 calc(12px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    padding: calc(4px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1))) 0;
    height: calc(64px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    position: relative;
    border-radius: calc(12px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    background: rgba(2, 6, 23, 0.4);
    border: 1px solid rgba(34, 211, 238, 0.08);
}

@supports (color: color-mix(in srgb, white, black)) {
    .bb-watchlist__chart-wrap {
        background: color-mix(in srgb, var(--bb-watchlist-chart-wrap-bg, #ffffff) 2%, transparent);
    }
}

.bb-watchlist__chart {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.bb-watchlist__card--featured .bb-watchlist__featured-main > .bb-watchlist__chart-wrap {
    height: calc(88px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
}

.bb-watchlist__insight {
    margin: 0 0 calc(12px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    color: var(--bb-watchlist-insight, #cbd5e1);
    font-size: calc(16px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    line-height: 1.65;
    max-width: 720px;
}

.bb-watchlist__stat {
    font-weight: 700;
    margin: 0 0 calc(4px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    color: var(--bb-watchlist-stat, #94a3b8);
    font-size: calc(14px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    line-height: 1.5;
    opacity: 0.9;
}

.bb-watchlist__stat:last-of-type {
    margin-bottom: 0;
}

.bb-watchlist__actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.bb-watchlist__card--featured .bb-watchlist__actions {
    margin-top: 14px;
}

.bb-watchlist__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: calc(42px * var(--bb-watchlist-font-scale-buttons-user, var(--bb-watchlist-font-scale, 1)));
    padding: 0 calc(18px * var(--bb-watchlist-font-scale-buttons-user, var(--bb-watchlist-font-scale, 1)));
    border-radius: calc(12px * var(--bb-watchlist-font-scale-buttons-user, var(--bb-watchlist-font-scale, 1)));
    text-decoration: none !important;
    font-size: calc(14px * var(--bb-watchlist-font-scale-buttons-user, var(--bb-watchlist-font-scale, 1)));
    font-weight: 800;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    box-sizing: border-box;
}

.bb-watchlist__button:hover,
.bb-watchlist__button:focus,
.bb-watchlist__button:active,
.bb-watchlist__button:visited {
    text-decoration: none !important;
    outline: none;
}

.bb-watchlist__button--primary,
.bb-watchlist__button--primary:link,
.bb-watchlist__button--primary:visited,
.bb-watchlist__button--primary:hover,
.bb-watchlist__button--primary:focus,
.bb-watchlist__button--primary:active {
    background: linear-gradient(180deg, var(--bb-watchlist-primary-btn-bg-start) 0%, var(--bb-watchlist-primary-btn-bg-end) 100%);
    color: var(--bb-watchlist-primary-btn-text, #020617) !important;
    border: 1px solid rgba(34, 211, 238, 0.35);
    box-shadow:
        0 8px 24px color-mix(in srgb, var(--bb-watchlist-primary-btn-bg-end) 45%, transparent),
        0 0 24px color-mix(in srgb, var(--bb-watchlist-primary-btn-bg-start) 25%, transparent);
}

.bb-watchlist__button--primary:hover,
.bb-watchlist__button--primary:focus,
.bb-watchlist__button--primary:active {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bb-watchlist-primary-btn-bg-start) 88%, #ffffff) 0%,
        color-mix(in srgb, var(--bb-watchlist-primary-btn-bg-end) 88%, #ffffff) 100%
    );
    color: var(--bb-watchlist-primary-btn-text, #020617) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 22px color-mix(in srgb, var(--bb-watchlist-primary-btn-bg-end) 42%, transparent);
}

@supports not (color: color-mix(in srgb, white, black)) {
    .bb-watchlist__button--primary,
    .bb-watchlist__button--primary:link,
    .bb-watchlist__button--primary:visited {
        box-shadow: 0 8px 18px rgba(3, 133, 255, 0.22);
    }

    .bb-watchlist__button--primary:hover,
    .bb-watchlist__button--primary:focus,
    .bb-watchlist__button--primary:active {
        background: linear-gradient(180deg, #27a0ff 0%, #0a84f2 100%);
        box-shadow: 0 12px 22px rgba(3, 133, 255, 0.28);
    }
}

.bb-watchlist__button--secondary,
.bb-watchlist__button--secondary:link,
.bb-watchlist__button--secondary:visited,
.bb-watchlist__button--secondary:hover,
.bb-watchlist__button--secondary:focus,
.bb-watchlist__button--secondary:active {
    background: rgba(255, 255, 255, 0.05);
    background: color-mix(in srgb, var(--bb-watchlist-secondary-btn-bg, #f8fafc) 8%, transparent);
    color: var(--bb-watchlist-secondary-btn-text, #ffffff) !important;
    border-color: rgba(255, 255, 255, 0.08);
    border-color: color-mix(in srgb, var(--bb-watchlist-secondary-btn-border, #f8fafc) 18%, transparent);
    backdrop-filter: blur(6px);
}

.bb-watchlist__button--secondary:hover,
.bb-watchlist__button--secondary:focus,
.bb-watchlist__button--secondary:active {
    background: rgba(255, 255, 255, 0.10);
    color: var(--bb-watchlist-secondary-btn-text, #ffffff) !important;
    transform: translateY(-1px);
}

@supports (color: color-mix(in srgb, white, black)) {
    .bb-watchlist__button--secondary,
    .bb-watchlist__button--secondary:link,
    .bb-watchlist__button--secondary:visited,
    .bb-watchlist__button--secondary:hover,
    .bb-watchlist__button--secondary:focus,
    .bb-watchlist__button--secondary:active {
        background: color-mix(in srgb, var(--bb-watchlist-secondary-btn-bg, #ffffff) 5%, transparent);
        border-color: color-mix(in srgb, var(--bb-watchlist-secondary-btn-bg, #ffffff) 5%, transparent);
    }

    .bb-watchlist__button--secondary:hover,
    .bb-watchlist__button--secondary:focus,
    .bb-watchlist__button--secondary:active {
        background: color-mix(in srgb, var(--bb-watchlist-secondary-btn-bg, #ffffff) 10%, transparent);
    }
}

@media (max-width: 1024px) {
    .bb-watchlist__grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    }
}

@media (max-width: 959px) {
    .bb-watchlist__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .bb-watchlist__featured-layout {
        flex-direction: column;
    }

    .bb-watchlist__featured-chart {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        min-height: calc(160px * var(--bb-watchlist-font-scale-layout-user, var(--bb-watchlist-font-scale, 1)));
    }

    .bb-watchlist__featured-chart .bb-watchlist__chart-wrap {
        min-height: calc(160px * var(--bb-watchlist-font-scale-layout-user, var(--bb-watchlist-font-scale, 1)));
    }
}

@media (min-width: 600px) and (max-width: 959px) {
    .bb-watchlist {
        width: 100%;
        max-width: min(100%, var(--bb-module-shell-max-width-tablet, 100%));
        margin: 0 auto;
        padding: calc(20px * var(--bb-watchlist-font-scale-shell-user, var(--bb-watchlist-font-scale, 1)));
        border-radius: calc(18px * var(--bb-watchlist-font-scale-shell-user, var(--bb-watchlist-font-scale, 1)));
    }
}

@media (max-width: 599px) {
    .bb-watchlist {
        max-width: min(100%, var(--bb-module-shell-max-width-mobile, 100%));
        min-width: min(100%, var(--bb-module-shell-min-width-mobile, 0px));
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bb-watchlist__card,
    .bb-watchlist__button,
    .bb-watchlist__refresh {
        transition: none;
    }

    .bb-watchlist__card:hover,
    .bb-watchlist__button--primary:hover,
    .bb-watchlist__button--secondary:hover,
    .bb-watchlist__refresh:hover {
        transform: none;
    }
}

@media (max-width: 767px) {
    .bb-watchlist {
        width: 100%;
        margin: 0 auto;
        padding: calc(14px * var(--bb-watchlist-font-scale-shell-user, var(--bb-watchlist-font-scale, 1)));
        border-radius: calc(12px * var(--bb-watchlist-font-scale-shell-user, var(--bb-watchlist-font-scale, 1)));
    }

    .bb-watchlist__featured,
    .bb-watchlist__card,
    .bb-watchlist__card--featured {
        width: 100%;
        max-width: none;
    }

    .bb-watchlist__title {
        font-size: calc(28px * var(--bb-watchlist-font-scale-hero-user, var(--bb-watchlist-font-scale, 1)));
    }

    .bb-watchlist__subtitle {
        font-size: calc(15px * var(--bb-watchlist-font-scale-hero-user, var(--bb-watchlist-font-scale, 1)));
    }

    .bb-watchlist__coin-name {
        font-size: calc(18px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    }

    .bb-watchlist__card {
        padding: calc(14px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
        border-radius: calc(14px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    }

    .bb-watchlist__card--featured {
        padding: calc(18px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    }

    .bb-watchlist__card--featured .bb-watchlist__coin-name {
        font-size: calc(20px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    }

    .bb-watchlist__card--featured .bb-watchlist__price {
        font-size: calc(18px * var(--bb-watchlist-font-scale-cards-user, var(--bb-watchlist-font-scale, 1)));
    }

    .bb-watchlist__actions {
        flex-direction: column;
    }

    .bb-watchlist__button {
        width: 100%;
    }
}