/* Shared Prediction Market Styles
 * Used by: PredictionMarketBrowser, PredictionOrderForm, PredictionChartPanel,
 *          PredictionMarketsTab, PortfolioPanel (Outcomes tab)
 * Moved from PredictionMarketsTab.razor.css to global scope so all prediction
 * components can share these class names.
 */

/* Browse View */
.predict-browse {
    display: flex;
    flex-direction: column;
    gap: var(--degen-space-sm, 8px);
    font-family: var(--degen-font-sans, 'Space Grotesk', sans-serif);
}

.predict-search {
    margin-bottom: var(--degen-space-xs, 4px);
}

.predict-search-input {
    width: 100%;
    background: var(--degen-bg-input, #0b0d0f);
    border: 1px solid var(--degen-border-default, rgba(102, 102, 102, 0.2));
    border-radius: var(--degen-radius-md, 4px);
    color: var(--degen-text-primary, #E9E9E9);
    font-family: var(--degen-font-sans, 'Space Grotesk', sans-serif);
    font-size: var(--degen-font-size-sm, 10px);
    padding: 6px 10px;
    outline: none;
    box-sizing: border-box;
}

.predict-search-input:focus {
    border-color: var(--degen-border-accent-strong, rgba(184, 248, 78, 0.2));
}

.predict-search-input::placeholder {
    color: var(--degen-text-hint, #565E63);
}

/* Loading / Error / Empty states */
.predict-loading {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.predict-error {
    color: var(--degen-color-sell, #FF6B6B);
    font-size: var(--degen-font-size-sm, 10px);
    text-align: center;
    padding: 16px 0;
}

.predict-retry {
    color: var(--degen-color-primary, #B8F84E);
    cursor: pointer;
    margin-left: 8px;
    text-decoration: underline;
}

.predict-empty {
    color: var(--degen-text-muted, #666);
    font-size: var(--degen-font-size-sm, 10px);
    text-align: center;
    padding: 24px 0;
}

/* Loading skeletons — shared shimmer used by PredictionOrderFormSkeleton and
   PredictionChartDetailSkeleton while the parent fetches event detail. Pulse
   instead of moving gradient so it sits naturally inside the dark terminal
   aesthetic without strobing on slow networks. */
@keyframes predict-skel-pulse {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

.predict-skel {
    background: var(--degen-bg-elevated, #141C21);
    border-radius: 4px;
    display: block;
    animation: predict-skel-pulse 1.2s ease-in-out infinite;
}

.predict-order-form-skeleton .predict-skel-label  { height: 14px; width: 60%; margin-bottom: 12px; }
.predict-order-form-skeleton .predict-skel-btn    { height: 38px; flex: 1; }
.predict-order-form-skeleton .predict-type-buttons .predict-skel-pill { height: 28px; flex: 1; }
.predict-order-form-skeleton .predict-skel-input  { height: 42px; width: 100%; margin: 10px 0; }
.predict-order-form-skeleton .predict-skel-action { height: 44px; width: 100%; margin-top: 12px; }

.predict-chart-detail-skeleton .predict-skel-stat     { height: 14px; width: 56px; display: inline-block; }
.predict-chart-detail-skeleton .predict-skel-tape-row { height: 56px; flex: 1 1 0; }
.predict-chart-detail-skeleton .predict-skel-chart    { height: 180px; width: 100%; margin-top: 12px; }

/* Market Cards */
.predict-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--degen-space-sm, 8px);
}

.predict-card {
    background: var(--degen-bg-surface, #131B1F);
    border: 1px solid var(--degen-border-default, rgba(102, 102, 102, 0.2));
    border-radius: var(--degen-radius-md, 4px);
    padding: var(--degen-space-sm, 8px) var(--degen-space-md, 12px);
    cursor: pointer;
    transition: border-color var(--degen-transition-fast, 0.1s ease);
}

.predict-card:hover {
    border-color: var(--degen-border-accent, rgba(184, 248, 78, 0.1));
}

.predict-card-title {
    color: var(--degen-text-primary, #E9E9E9);
    font-family: var(--degen-font-sans, 'Space Grotesk', sans-serif);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.2px;
    margin-bottom: 6px;
}

.predict-card-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}

.predict-card-meta {
    color: var(--degen-text-tertiary, #888);
    font-size: var(--degen-font-size-lg, 14px);
}

.predict-card-countdown {
    color: var(--degen-color-primary, #B8F84E);
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
    font-size: var(--degen-font-size-base, 12px);
    font-weight: 600;
}

/* Countdown pill — used in detail headers (both narrow and wide layouts) */
.predict-countdown-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    background: var(--degen-bg-elevated, #141C21);
    border: 1px solid var(--degen-border-accent, rgba(184, 248, 78, 0.1));
    border-radius: 9999px;
    color: var(--degen-color-primary, #B8F84E);
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
    font-size: var(--degen-font-size-base, 12px);
    font-weight: 600;
    padding: 2px 8px;
    line-height: 1.3;
    width: fit-content;
}

.predict-detail-meta-muted {
    color: var(--degen-text-hint, #565E63);
    font-style: italic;
}

/* Detail View */
.predict-detail {
    display: flex;
    flex-direction: column;
    gap: var(--degen-space-sm, 8px);
}

.predict-back {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--degen-text-secondary, #A2A2A2);
    font-size: var(--degen-font-size-xs, 9px);
    cursor: pointer;
    margin-bottom: 2px;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--degen-font-sans, 'Space Grotesk', sans-serif);
}

.predict-back:hover {
    color: var(--degen-text-primary, #E9E9E9);
}

/* Chip variant used in the chart panel toolbar: lime-bordered, 3px left stub,
   uppercase "MARKETS" label. Brighter and more obviously interactive than the
   default text-only back link used on the narrow trading panel. */
.predict-back-chip {
    position: relative;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    background: var(--degen-bg-input, #0b0d0f);
    border: 1px solid var(--degen-border-default, rgba(102, 102, 102, 0.25));
    border-radius: var(--degen-radius-md, 4px);
    color: var(--degen-color-primary, #B8F84E);
    overflow: hidden;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.predict-back-chip .predict-back-stub {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--degen-color-primary, #B8F84E);
}

.predict-back-chip .predict-back-label {
    color: var(--degen-color-primary, #B8F84E);
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
    font-size: 9px;
    letter-spacing: 1px;
    font-weight: 600;
    text-transform: uppercase;
}

.predict-back-chip:hover {
    border-color: var(--degen-color-primary, #B8F84E);
    box-shadow: 0 0 8px rgba(184, 248, 78, 0.25);
    background: rgba(184, 248, 78, 0.06);
    color: var(--degen-color-primary, #B8F84E);
}

.predict-detail-header {
    margin-bottom: 2px;
}

.predict-detail-title {
    color: var(--degen-text-primary, #E9E9E9);
    font-family: var(--degen-font-sans, 'Space Grotesk', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.2px;
}

.predict-detail-meta {
    color: var(--degen-text-tertiary, #888);
    font-size: var(--degen-font-size-xs, 9px);
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
}

.predict-detail-stats {
    display: flex;
    gap: var(--degen-space-lg, 16px);
    color: var(--degen-text-secondary, #A2A2A2);
    font-size: var(--degen-font-size-lg, 14px);
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
}

/* Orderbook */
.predict-orderbook {
    display: flex;
    gap: var(--degen-space-sm, 8px);
}

.predict-book-side {
    flex: 1;
    background: var(--degen-bg-input, #0b0d0f);
    border-radius: var(--degen-radius-sm, 2px);
    padding: var(--degen-space-xs, 4px) var(--degen-space-sm, 8px);
}

.predict-book-header {
    color: var(--degen-text-primary, #E9E9E9);
    font-size: var(--degen-font-size-xs, 9px);
    font-weight: 700;
    text-align: center;
    margin-bottom: 2px;
}

.predict-book-cols {
    display: flex;
    justify-content: space-between;
}

.predict-book-col-label {
    color: var(--degen-text-hint, #565E63);
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.predict-book-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
    font-size: 8px;
    line-height: 1.6;
}

.predict-book-bid {
    color: var(--degen-color-buy, #B8F84E);
}

.predict-book-ask {
    color: var(--degen-color-sell, #FF6B6B);
}

/* Order Form */
.predict-order-form {
    background: var(--degen-bg-surface, #131B1F);
    border: 1px solid var(--degen-border-default, rgba(102, 102, 102, 0.2));
    border-radius: var(--degen-radius-md, 4px);
    padding: var(--degen-space-sm, 8px) var(--degen-space-md, 12px);
    display: flex;
    flex-direction: column;
    gap: var(--degen-space-sm, 8px);
}

.predict-order-market-label {
    color: var(--degen-text-primary, #E9E9E9);
    font-size: var(--degen-font-size-sm, 10px);
    font-weight: 600;
    line-height: 1.3;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--degen-border-default, rgba(102, 102, 102, 0.2));
}

.predict-side-buttons,
.predict-type-buttons {
    display: flex;
    gap: var(--degen-space-xs, 4px);
}

.predict-asset-header {
    padding: 6px 8px;
    background: rgba(184, 248, 78, 0.08);
    border: 1px solid var(--degen-border-accent-strong, rgba(184, 248, 78, 0.2));
    border-radius: var(--degen-radius-md, 4px);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--degen-font-size-sm, 10px);
    margin-bottom: var(--degen-space-sm, 8px);
}

.predict-asset-header-title {
    color: var(--degen-text-secondary, #A2A2A2);
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.predict-asset-header-sep {
    color: var(--degen-text-hint, #565E63);
}

.predict-asset-header-fees {
    color: var(--degen-color-warning, #FFC107);
    white-space: nowrap;
}

.predict-side-btn {
    flex: 1;
    padding: 10px 0;
    border: 1px solid var(--degen-border-default, rgba(102, 102, 102, 0.2));
    border-radius: var(--degen-radius-md, 4px);
    background: transparent;
    color: var(--degen-text-secondary, #A2A2A2);
    font-family: var(--degen-font-sans, 'Space Grotesk', sans-serif);
    font-size: var(--degen-font-size-md, 11px);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--degen-transition-fast, 0.1s ease);
}

/* Order Type buttons (Market/Limit/Stop) -- mirrors the perps `type-btn` styling
   from TradingTab.razor.css (lines 388-409, 838-844) but scoped to the prediction
   order form so we don't fight the perps panel's `::deep` scoped rules. The sell
   variant keys off the `.sell` modifier toggled on `.predict-order-form` based on
   _orderSide -- mirrors `.trading-form.sell` on the perps side without dragging in
   unrelated perps form rules. */
.predict-order-form .type-btn.mud-button-root {
    border: none !important;
    color: #666 !important;
    background: transparent !important;
    min-width: 50px !important;
    height: 26px !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    border-bottom: 1px solid rgba(102, 102, 102, 0.15) !important;
}

.predict-order-form .type-btn.mud-button-root:hover {
    color: #A2A2A2 !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom-color: rgba(184, 248, 78, 0.3) !important;
}

.predict-order-form .type-btn.selected {
    background: rgba(184, 248, 78, 0.15) !important;
    color: #B8F84E !important;
    border-bottom: 2px solid #B8F84E !important;
    box-shadow: 0 0 0 1px rgba(184, 248, 78, 0.2) !important;
}

/* Restore disabled affordance for the Stop button -- without this, the
   `color: #666 !important` base rule above overrides MudBlazor's default
   disabled styling and makes Stop visually indistinguishable from an
   inactive Market/Limit. */
.predict-order-form .type-btn.mud-button-root:disabled,
.predict-order-form .type-btn.mud-button-root.mud-disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

.predict-order-form.sell .type-btn.mud-button-root:hover {
    color: #A2A2A2 !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-bottom-color: rgba(255, 107, 107, 0.3) !important;
}

.predict-order-form.sell .type-btn.selected {
    background: rgba(255, 107, 107, 0.15) !important;
    color: #FF6B6B !important;
    border-bottom: 2px solid #FF6B6B !important;
    box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.2) !important;
}

/* Sell-mode slider override. Global (not ::deep) since this stylesheet is unscoped. */
.predict-order-form.sell .custom-slider-fill {
    background: #FF6B6B !important;
}

.predict-order-form.sell .custom-slider-thumb {
    background: #FF6B6B !important;
    border: 2px solid #FF6B6B !important;
}

.predict-order-form.sell .custom-slider-thumb:hover {
    box-shadow: 0 0 8px rgba(255, 107, 107, 0.3) !important;
}

.predict-order-form.sell .custom-slider-label {
    color: #FF6B6B !important;
    border: 1px solid rgba(255, 107, 107, 0.23) !important;
}

/* Shared Buy/Sell side toggle styling.
   Both the perps trading panel (MudButton.Class=side-btn buy/sell selected) and
   the prediction order form (plain <button class="side-btn buy/sell selected">)
   use these rules -- single source of truth. */
.side-btn {
    border: 1px solid rgba(102, 102, 102, 0.3) !important;
    color: var(--degen-text-secondary, #A2A2A2) !important;
    background: var(--degen-bg-input, #0b0d0f) !important;
    width: 100% !important;
    min-width: 75px !important;
    height: 26px !important;
    font-size: var(--degen-font-size-sm, 10px) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    border-radius: var(--degen-radius-md, 4px) !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
}

.side-btn:hover {
    border-color: rgba(184, 248, 78, 0.4) !important;
    background: rgba(184, 248, 78, 0.05) !important;
}

.side-btn.buy.selected {
    background: rgba(184, 248, 78, 0.15) !important;
    color: var(--degen-color-accent, #B8F84E) !important;
    border-color: rgba(184, 248, 78, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(184, 248, 78, 0.2) !important;
}

.side-btn.sell.selected {
    background: rgba(255, 107, 107, 0.15) !important;
    color: var(--degen-color-error, #FF6B6B) !important;
    border-color: rgba(255, 107, 107, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(255, 107, 107, 0.2) !important;
}

/* Outcome dropdown (MudSelect) for the prediction order form.
   Re-designed away from MudBlazor's outlined input — the trigger reads as a flat
   status chip (outcome name in its color, pct in muted mono, small chevron) and
   the popover shows a probability bar per outcome so multi-outcome markets
   surface the spread at a glance. PopoverClass renders at body root. */

/* Trigger — flatten MudBlazor's outlined fieldset, no heavy border. */
.predict-outcome-select .mud-input-outlined-border {
    display: none !important;
}

.predict-outcome-select .mud-input-control {
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}

.predict-outcome-select .mud-input {
    background: var(--degen-bg-input, #0b0d0f) !important;
    border: 1px solid var(--degen-border-default, rgba(102, 102, 102, 0.18)) !important;
    border-radius: var(--degen-radius-md, 4px) !important;
    transition: border-color 120ms ease, background 120ms ease;
    overflow: hidden;
    min-height: 0 !important;
}

.predict-outcome-select .mud-input:hover {
    border-color: color-mix(in srgb, var(--degen-color-primary, #B8F84E) 30%, var(--degen-border-default, rgba(102, 102, 102, 0.18))) !important;
}

/* Slot is normally inline; we need flex so the rendered selected-row lays out. */
.predict-outcome-select .mud-input-slot {
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    color: var(--degen-text-primary, #E9E9E9) !important;
    font-size: var(--degen-font-size-md, 11px) !important;
    padding: 0 8px !important;
    min-height: 28px !important;
    height: 28px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

.predict-outcome-select .mud-input-adornment {
    padding-right: 6px !important;
    margin: 0 !important;
}

.predict-outcome-select .mud-input-adornment svg {
    width: 14px !important;
    height: 14px !important;
    color: var(--degen-text-tertiary, #888) !important;
}

/* Row layout shared by trigger + popover. Trigger hides the bar — only name + pct. */
.predict-outcome-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

.predict-outcome-row-name {
    color: var(--o, var(--degen-text-primary, #E9E9E9));
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: var(--degen-font-size-sm, 10px);
    flex: 0 0 auto;
    min-width: 28px;
    max-width: 96px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.predict-outcome-row-bar {
    position: relative;
    flex: 1 1 auto;
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
    overflow: hidden;
    min-width: 40px;
}

.predict-outcome-row-bar-fill {
    display: block;
    height: 100%;
    background: var(--o, var(--degen-text-tertiary, #888));
    opacity: 0.7;
    border-radius: 3px;
    transition: width 200ms ease;
}

.predict-outcome-row-pct {
    flex: 0 0 auto;
    margin-left: auto;
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
    color: var(--degen-text-secondary, #A2A2A2);
    font-size: var(--degen-font-size-md, 11px);
    text-align: right;
    min-width: 44px;
}

/* In the trigger, the bar would be redundant — only name + pct shown. */
.predict-outcome-select .predict-outcome-row-bar {
    display: none;
}

/* Popover — dark surface, per-row bar shows the spread. Selected row gets
   the lime accent strip on the left. */
.predict-outcome-popover .mud-list {
    background: var(--degen-bg-secondary, #0D1215) !important;
    border: 1px solid var(--degen-border-default, rgba(102, 102, 102, 0.2)) !important;
    border-radius: var(--degen-radius-md, 4px) !important;
    padding: 4px !important;
    min-width: 220px;
}

.predict-outcome-popover .mud-list-item {
    color: var(--degen-text-primary, #E9E9E9) !important;
    font-size: var(--degen-font-size-md, 11px) !important;
    padding: 6px 8px !important;
    border-radius: var(--degen-radius-sm, 2px) !important;
    border-left: 2px solid transparent !important;
    min-height: 0 !important;
    transition: background 120ms ease, border-color 120ms ease;
}

.predict-outcome-popover .mud-list-item:hover {
    background: color-mix(in srgb, var(--degen-color-primary, #B8F84E) 6%, transparent) !important;
}

.predict-outcome-popover .mud-selected-item {
    background: color-mix(in srgb, var(--degen-color-primary, #B8F84E) 10%, transparent) !important;
    border-left-color: var(--degen-color-primary, #B8F84E) !important;
}

.predict-outcome-popover .mud-selected-item .predict-outcome-row-bar-fill {
    opacity: 1;
}

.predict-input-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.predict-input-label {
    color: var(--degen-text-tertiary, #888);
    font-size: var(--degen-font-size-xs, 9px);
    text-transform: uppercase;
}

.predict-input-wrap {
    display: flex;
    align-items: center;
    background: var(--degen-bg-input, #0b0d0f);
    border: 1px solid var(--degen-border-default, rgba(102, 102, 102, 0.2));
    border-radius: var(--degen-radius-sm, 2px);
    padding: 0 8px;
}

.predict-input-wrap:focus-within {
    border-color: var(--degen-border-accent-strong, rgba(184, 248, 78, 0.2));
}

.predict-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--degen-text-primary, #E9E9E9);
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
    font-size: var(--degen-font-size-lg, 14px);
    padding: 5px 0;
    outline: none;
    width: 100%;
    min-width: 0;
}

.predict-input-suffix {
    color: var(--degen-text-hint, #565E63);
    font-size: var(--degen-font-size-xs, 9px);
    margin-left: 4px;
    white-space: nowrap;
}

.predict-order-info {
    display: flex;
    justify-content: space-between;
    color: var(--degen-text-tertiary, #888);
    font-size: var(--degen-font-size-lg, 14px);
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
}

.predict-action-btn {
    width: 100%;
    padding: 11px 0;
    border: none;
    border-radius: var(--degen-radius-md, 4px);
    font-family: var(--degen-font-sans, 'Space Grotesk', sans-serif);
    font-size: var(--degen-font-size-md, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: opacity var(--degen-transition-fast, 0.1s ease);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
}

.predict-action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* USDC balance shown next to order cost so users see whether they have
   enough before placing. */
.predict-balance-info {
    color: var(--degen-text-tertiary, #888);
}

/* Shortfall banner shown when order cost exceeds the available USDC balance.
   Warning color signals "you can't place this yet" without being as alarming
   as an error. */
.predict-shortfall-warning {
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: var(--degen-color-warning, #FFC107);
    padding: 8px 10px;
    border-radius: var(--degen-radius-md, 4px);
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
    font-size: var(--degen-font-size-xs, 10px);
    line-height: 1.3;
    margin-top: -4px;
}

/* View-only banner shown when the resolved provider is the raw HIP-4
   adapter (Phase A: reads work, writes return not-available). Info color
   signals "you can browse but not trade yet" -- removed in Phase B. */
.predict-viewonly-banner {
    background: rgba(74, 158, 255, 0.08);
    border: 1px solid rgba(74, 158, 255, 0.3);
    color: var(--degen-color-info, #4A9EFF);
    padding: 8px 10px;
    border-radius: var(--degen-radius-md, 4px);
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
    font-size: var(--degen-font-size-xs, 10px);
    line-height: 1.3;
}

/* Positions & Orders Sections */
.predict-section {
    display: flex;
    flex-direction: column;
    gap: var(--degen-space-xs, 4px);
}

.predict-section-title {
    color: var(--degen-text-secondary, #A2A2A2);
    font-size: var(--degen-font-size-xs, 9px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.predict-position-row {
    background: var(--degen-bg-surface, #131B1F);
    border: 1px solid var(--degen-border-default, rgba(102, 102, 102, 0.2));
    border-radius: var(--degen-radius-sm, 2px);
    padding: 6px var(--degen-space-sm, 8px);
}

.predict-position-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.predict-position-title {
    color: var(--degen-text-primary, #E9E9E9);
    font-size: var(--degen-font-size-xs, 9px);
    font-weight: 600;
}

.predict-position-side {
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
    font-size: var(--degen-font-size-xs, 9px);
    font-weight: 600;
}

.predict-position-prices {
    display: flex;
    gap: var(--degen-space-sm, 8px);
    color: var(--degen-text-tertiary, #888);
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
    font-size: var(--degen-font-size-lg, 14px);
}

.predict-pnl-positive {
    color: var(--degen-pnl-positive, #B8F84E);
}

.predict-pnl-negative {
    color: var(--degen-pnl-negative, #FF6B6B);
}

.predict-order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--degen-bg-surface, #131B1F);
    border: 1px solid var(--degen-border-default, rgba(102, 102, 102, 0.2));
    border-radius: var(--degen-radius-sm, 2px);
    padding: 5px var(--degen-space-sm, 8px);
}

.predict-order-desc {
    color: var(--degen-text-secondary, #A2A2A2);
    font-size: var(--degen-font-size-xs, 9px);
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
}

.predict-cancel-btn {
    background: transparent;
    border: 1px solid var(--degen-color-sell, #FF6B6B);
    color: var(--degen-color-sell, #FF6B6B);
    border-radius: var(--degen-radius-sm, 2px);
    font-size: 8px;
    padding: 1px 5px;
    cursor: pointer;
    line-height: 1;
}

.predict-cancel-btn:hover {
    background: var(--degen-color-sell-bg, rgba(255, 107, 107, 0.49));
}

/* Mobile Trade tab mode toggle — both order forms stay mounted to preserve their
   internal state (quantity, limit price, etc.) across mode flips. Only the active
   one is visible.

   .trade-mode-container is display:contents so its children become flex items
   of the parent .panel-container.active (which is a column flex). The active
   inner panel is sized to fill the panel-container (replicating what the original
   .panel-container.active > * rule did for TradingPanel as a direct child). */
.trade-mode-container {
    display: contents;
}

.trade-mode-perps,
.trade-mode-predict {
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.trade-mode-container.perps .trade-mode-predict {
    display: none;
}

.trade-mode-container.predict .trade-mode-perps {
    display: none;
}

/* Competition banner inside the perps panel stays compact; the trading panel
   fills the remaining space. Replaces the original
   .panel-container.active > .competition-mode-banner rule that no longer
   matches now that the banner is nested inside a wrapper. */
.trade-mode-perps > .competition-mode-banner {
    flex: 0 0 auto;
    height: auto;
}

/* Terminal Mode Toggle (Perps / Predict) — global so both Terminal and PredictionChartPanel can use it */

.terminal-mode-toggle {
    display: flex;
    gap: 2px;
    background: var(--degen-bg-input, #0b0d0f);
    border: 1px solid var(--degen-border-default, rgba(102, 102, 102, 0.2));
    border-radius: var(--degen-radius-md, 4px);
    padding: 2px;
    width: fit-content;
}

.mode-btn {
    padding: 4px 16px;
    border: none;
    border-radius: var(--degen-radius-sm, 2px);
    background: transparent;
    color: var(--degen-text-secondary, #A2A2A2);
    font-family: var(--degen-font-sans, 'Space Grotesk', sans-serif);
    font-size: var(--degen-font-size-sm, 10px);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--degen-transition-fast, 0.1s ease);
    letter-spacing: 0.3px;
}

.mode-btn:hover {
    color: var(--degen-text-primary, #E9E9E9);
}

.mode-btn-active {
    background: var(--degen-bg-elevated, #141C21);
    color: var(--degen-color-primary, #B8F84E);
    border: 1px solid var(--degen-border-accent, rgba(184, 248, 78, 0.1));
}

/* Unified outcome selector family. Single source of truth for the YES/NO + multi-
   outcome + card quick-action button strips. Three variants share .predict-outcome-
   option as the row primitive:
   * default                          chart panel multi-outcome tabs
   * --prominent                      chart panel binary YES/NO panels
   * --compact (+ optional --bucket)  browser card quick-action strip

   Color comes from a sibling .predict-outcome-color-* class on the option button
   (sets --o, --o-bg). Active-state treatment differs per variant:
   * default / --compact: neutral accent border + slight bg elevation
   * --prominent: full side-tint via --o-driven background/border/glow */
.predict-outcome-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--degen-space-xs, 4px);
}

.predict-outcome-option {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 6px 8px;
    border: 1px solid var(--degen-border-default, rgba(102, 102, 102, 0.2));
    border-radius: var(--degen-radius-sm, 2px);
    background: var(--degen-bg-input, #0b0d0f);
    color: var(--degen-text-secondary, #A2A2A2);
    font-family: var(--degen-font-sans, 'Space Grotesk', sans-serif);
    cursor: pointer;
    transition: all var(--degen-transition-fast, 0.1s ease);
}

.predict-outcome-option:hover {
    color: var(--degen-text-primary, #E9E9E9);
}

.predict-outcome-option--active {
    background: var(--degen-bg-elevated, #141C21);
    border-color: var(--degen-color-primary, #B8F84E);
    color: var(--degen-text-primary, #E9E9E9);
}

.predict-outcome-option-name {
    font-size: var(--degen-font-size-lg, 14px);
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.predict-outcome-option-pct {
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
    font-size: var(--degen-font-size-lg, 14px);
    color: inherit;
    font-weight: 600;
}

/* --compact: card quick-action strip. Row-oriented buttons, 28px min-height,
   color-modifier drives outline + hover fill. */
.predict-outcome-selector--compact {
    gap: 4px;
    margin-top: 6px;
}

.predict-outcome-selector--compact .predict-outcome-option {
    flex: 1;
    min-height: 28px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.predict-outcome-selector--compact .predict-outcome-option-name {
    font-size: var(--degen-font-size-lg, 14px);
    width: auto;
}

.predict-outcome-selector--compact .predict-outcome-option-pct {
    font-size: var(--degen-font-size-base, 12px);
    opacity: 0.85;
}

/* --compact + --bucket: multi-outcome cards wrap so 3+ buttons fit without squishing.
   Two-per-row baseline; buttons keep the same color-modifier behavior as binary. */
.predict-outcome-selector--compact.predict-outcome-selector--bucket .predict-outcome-option {
    flex: 1 1 calc(50% - 2px);
    min-width: 0;
}

/* --compact color tint: text + border in outcome color, dark bg. Hover fills tint. */
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-buy,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-sell,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-0,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-1,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-2,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-3,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-4,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-5 {
    color: var(--o);
    border-color: color-mix(in srgb, var(--o) 45%, transparent);
}

.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-buy:hover,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-buy:active,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-buy.predict-outcome-option--active,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-sell:hover,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-sell:active,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-sell.predict-outcome-option--active,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-0:hover,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-0:active,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-0.predict-outcome-option--active,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-1:hover,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-1:active,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-1.predict-outcome-option--active,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-2:hover,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-2:active,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-2.predict-outcome-option--active,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-3:hover,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-3:active,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-3.predict-outcome-option--active,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-4:hover,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-4:active,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-4.predict-outcome-option--active,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-5:hover,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-5:active,
.predict-outcome-selector--compact .predict-outcome-option.predict-outcome-color-5.predict-outcome-option--active {
    background: var(--o-bg);
    border-color: var(--o);
    color: var(--o);
}

/* --prominent: binary YES/NO side-by-side decision row. Equal-width tinted panels
   with the outcome color baked into bg/border/text. Active = stronger tint + glow. */
.predict-outcome-selector--prominent {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    align-items: stretch;
}

.predict-outcome-selector--prominent .predict-outcome-option {
    flex: 1 1 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border-color: transparent;
    color: var(--degen-text-primary, #E9E9E9);
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    text-align: left;
    position: relative;
}

.predict-outcome-selector--prominent .predict-outcome-option.predict-outcome-color-buy,
.predict-outcome-selector--prominent .predict-outcome-option.predict-outcome-color-sell,
.predict-outcome-selector--prominent .predict-outcome-option.predict-outcome-color-0,
.predict-outcome-selector--prominent .predict-outcome-option.predict-outcome-color-1,
.predict-outcome-selector--prominent .predict-outcome-option.predict-outcome-color-2,
.predict-outcome-selector--prominent .predict-outcome-option.predict-outcome-color-3,
.predict-outcome-selector--prominent .predict-outcome-option.predict-outcome-color-4,
.predict-outcome-selector--prominent .predict-outcome-option.predict-outcome-color-5 {
    background: color-mix(in srgb, var(--o) 6%, transparent);
    border-color: color-mix(in srgb, var(--o) 18%, transparent);
}

.predict-outcome-selector--prominent .predict-outcome-option:hover {
    background: color-mix(in srgb, var(--o, var(--degen-color-primary)) 10%, transparent);
}

.predict-outcome-selector--prominent .predict-outcome-option--active {
    background: color-mix(in srgb, var(--o, var(--degen-color-primary)) 28%, transparent);
    border-color: var(--o, var(--degen-color-primary));
    box-shadow:
        0 0 0 1px var(--o, var(--degen-color-primary)),
        0 0 18px color-mix(in srgb, var(--o, var(--degen-color-primary)) 45%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--o, var(--degen-color-primary)) 35%, transparent);
    color: var(--degen-text-primary, #E9E9E9);
}

.predict-outcome-selector--prominent .predict-outcome-option--active .predict-outcome-option-name,
.predict-outcome-selector--prominent .predict-outcome-option--active .predict-outcome-option-pct {
    color: var(--o, var(--degen-color-primary));
    text-shadow: 0 0 8px color-mix(in srgb, var(--o, var(--degen-color-primary)) 40%, transparent);
}

.predict-outcome-selector--prominent .predict-outcome-option-name {
    font-size: var(--degen-font-size-sm, 10px);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--o, var(--degen-text-secondary, #A2A2A2));
    flex: 0 0 auto;
    width: auto;
}

.predict-outcome-selector--prominent .predict-outcome-option-pct {
    font-weight: 700;
    line-height: 1;
    font-size: clamp(18px, 4vw, 22px);
    color: var(--o, var(--degen-color-primary, #B8F84E));
}

/* --prominent + --multi: N>2 outcomes. Allow wrap; 50% baseline (matches
   --compact --bucket) so layouts stay balanced at 3/4/5/6 outcomes without
   producing an orphan tile. Tighter padding + smaller pct font since the
   tile shrinks. */
.predict-outcome-selector--prominent.predict-outcome-selector--multi {
    flex-wrap: wrap;
}

.predict-outcome-selector--prominent.predict-outcome-selector--multi .predict-outcome-option {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 6px 8px;
}

.predict-outcome-selector--prominent.predict-outcome-selector--multi .predict-outcome-option-pct {
    font-size: clamp(15px, 3vw, 18px);
    flex: 0 0 auto;
}

/* --prominent pins the name at its natural width so a two-panel YES/NO row keeps both
   captions intact. On a --multi tile that is wrong: the tile is half as wide and the names
   are venue-authored prose, so an unshrinkable caption pushes the percentage out of its own
   tile. Let it shrink and ellipsize instead -- the full text stays reachable via the tile's
   title attribute. */
.predict-outcome-selector--prominent.predict-outcome-selector--multi .predict-outcome-option-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Expands the trimmed decision row in place. Deliberately looks like the card's "+N more"
   (full width, dashed, muted) so the same gesture reads the same on both surfaces -- the
   difference being that this one reveals outcomes here rather than navigating away. */
.predict-outcome-disclosure {
    display: block;
    width: 100%;
    min-height: 32px;
    margin-top: 6px;
    background: transparent;
    border: 1px dashed var(--degen-border-muted, #2C373D);
    border-radius: var(--degen-radius-md, 4px);
    color: var(--degen-text-secondary, #A2A2A2);
    font-family: var(--degen-font-sans, 'Space Grotesk', sans-serif);
    font-size: var(--degen-font-size-md, 11px);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--degen-transition-fast, 0.1s ease),
                border-color var(--degen-transition-fast, 0.1s ease);
}

.predict-outcome-disclosure:hover {
    color: var(--degen-color-primary, #B8F84E);
    border-color: var(--degen-color-primary, #B8F84E);
}

/* Empty state for --prominent: no probability data yet -> muted pct. */
.predict-outcome-selector--empty .predict-outcome-option-pct {
    color: var(--degen-text-hint, #565E63);
}

/* Outcome buttons in order ticket — neutral palette so it scales beyond YES/NO */
.predict-outcome-buttons {
    flex-wrap: wrap;
}

.predict-outcome-buttons .predict-side-btn {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Active outcome side-button. Border + text colors come from --o, set by a
   sibling .predict-outcome-color-* modifier; falls back to lime if none. */
.predict-outcome-active {
    background: var(--degen-bg-elevated, #141C21);
    border-color: var(--o, var(--degen-color-primary, #B8F84E));
    color: var(--o, var(--degen-color-primary, #B8F84E));
}

/* Outcome color modifier — sets --o (accent) and --o-bg (faint tint) variables
   consumed by side-buttons (outline), action button (fill), and card quick-
   actions (hover tint). Binary uses semantic buy/sell so YES stays lime + NO
   stays red regardless of slot ordering. Bucket markets wrap modulo 6. */
.predict-outcome-color-buy  { --o: var(--degen-color-buy);  --o-bg: var(--degen-color-buy-bg); }
.predict-outcome-color-sell { --o: var(--degen-color-sell); --o-bg: var(--degen-color-sell-bg); }
.predict-outcome-color-0    { --o: var(--degen-outcome-0); --o-bg: rgba(184, 248, 78, 0.18); }
.predict-outcome-color-1    { --o: var(--degen-outcome-1); --o-bg: rgba(255, 193, 7, 0.18); }
.predict-outcome-color-2    { --o: var(--degen-outcome-2); --o-bg: rgba(74, 219, 199, 0.18); }
.predict-outcome-color-3    { --o: var(--degen-outcome-3); --o-bg: rgba(157, 122, 201, 0.18); }
.predict-outcome-color-4    { --o: var(--degen-outcome-4); --o-bg: rgba(224, 147, 94, 0.18); }
.predict-outcome-color-5    { --o: var(--degen-outcome-5); --o-bg: rgba(107, 182, 168, 0.18); }

/* Action button fill — adopts the selected-outcome color so users can't
   misread which side they're about to buy. */
.predict-action-btn.predict-outcome-color-buy,
.predict-action-btn.predict-outcome-color-sell,
.predict-action-btn.predict-outcome-color-0,
.predict-action-btn.predict-outcome-color-1,
.predict-action-btn.predict-outcome-color-2,
.predict-action-btn.predict-outcome-color-3,
.predict-action-btn.predict-outcome-color-4,
.predict-action-btn.predict-outcome-color-5 {
    background: var(--o);
    color: var(--degen-bg-primary, #080809);
}

/* Selected card highlight (used by wide-layout browser) */
.predict-card-selected {
    border-color: var(--degen-color-primary, #B8F84E);
}

/* Wide-layout grid for the chart-panel browser */
.predict-browse-wide {
    width: 100%;
}

.predict-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--degen-space-sm, 8px);
}

/* Asset glyph chip — typographic ticker badge in card header */
.asset-glyph {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--degen-color-primary, #B8F84E);
    border-radius: var(--degen-radius-sm, 2px);
    color: var(--degen-color-primary, #B8F84E);
    background: var(--degen-bg-input, #0b0d0f);
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    line-height: 1;
}

/* Card header row: asset pill + title side-by-side */
.predict-card-header {
    display: flex;
    align-items: center;
    gap: var(--degen-space-sm, 8px);
    margin-bottom: 6px;
}

.predict-card-header .predict-card-title {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

/* Compact ticker pill in the card header. Mirrors the positions-row pill
   (PortfolioPanel.razor.css .asset-name + .side-buy) — duplicated rather
   than shared because PortfolioPanel uses scoped CSS. Always lime: the
   underlying is a neutral asset tag, not a directional side. */
.predict-card-asset-pill {
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
    font-size: var(--degen-font-size-lg, 14px);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--degen-color-primary, #B8F84E);
    background-color: rgba(184, 248, 78, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
    line-height: 1.3;
}

/* Card footer left half: optional "no market" + type tag (bullet separates them when both present) */
.predict-card-footer-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.predict-card-tag {
    color: var(--degen-text-tertiary, #888);
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
    font-size: var(--degen-font-size-xs, 9px);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.predict-card-footer-left .predict-card-tag:not(:first-child)::before {
    content: "·";
    margin-right: 6px;
    color: var(--degen-text-hint, #565E63);
}

/* Category tab row — top-level Crypto / Sports / Economics / Other. Sits above the
   secondary filter chip strip. Slightly bolder than chips since it's the primary cut. */
.predict-cat-tabs {
    display: flex;
    /* Never shrink. Declaring overflow-x makes this a scroll container, which lets its
       automatic minimum size collapse to zero -- without this, a column-flex parent takes
       its overflow out of this row and slices the tab labels through the middle. */
    flex: none;
    gap: 4px;
    overflow-x: auto;
    padding: 2px 0 6px 0;
    margin-bottom: var(--degen-space-xs, 4px);
    border-bottom: 1px solid var(--degen-border-default, rgba(102, 102, 102, 0.2));
    scrollbar-width: thin;
    scrollbar-color: var(--degen-text-hint, #565E63) transparent;
}

.predict-cat-tabs::-webkit-scrollbar {
    height: 4px;
}

.predict-cat-tabs::-webkit-scrollbar-thumb {
    background: var(--degen-text-hint, #565E63);
    border-radius: 2px;
}

.predict-cat-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--degen-text-secondary, #A2A2A2);
    font-family: var(--degen-font-sans, 'Space Grotesk', sans-serif);
    font-size: var(--degen-font-size-sm, 11px);
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--degen-transition-fast, 0.1s ease);
}

.predict-cat-tab:hover {
    color: var(--degen-text-primary, #E9E9E9);
}

.predict-cat-tab-active {
    color: var(--degen-color-primary, #B8F84E);
    border-bottom-color: var(--degen-color-primary, #B8F84E);
}

.predict-cat-count {
    font-family: var(--degen-font-mono, 'Source Code Pro', monospace);
    font-size: var(--degen-font-size-xs, 9px);
    font-weight: 600;
    color: var(--degen-text-tertiary, #888);
}

.predict-cat-tab-active .predict-cat-count {
    color: var(--degen-color-primary, #B8F84E);
}

/* Header pill for non-crypto markets (sports/economics) where there's no ticker.
   Neutral/secondary tone so it reads as a category tag, not a directional side. */
.predict-card-cat-pill {
    font-family: var(--degen-font-sans, 'Space Grotesk', sans-serif);
    font-size: var(--degen-font-size-xs, 9px);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--degen-text-secondary, #A2A2A2);
    background-color: var(--degen-bg-input, #0b0d0f);
    border: 1px solid var(--degen-border-default, rgba(102, 102, 102, 0.2));
    padding: 2px 6px;
    border-radius: 3px;
    flex-shrink: 0;
    line-height: 1.3;
}

/* Faceted refinement strip — venue | status | asset, each group independent, one row,
   horizontally scrollable. Same no-shrink rule as the category tabs above. */
.predict-filter-chips-wrap {
    flex: none;
    margin-bottom: var(--degen-space-xs, 4px);
}

.predict-filter-chips {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding: 2px 0 4px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--degen-text-hint, #565E63) transparent;
}

.predict-filter-chips::-webkit-scrollbar {
    height: 4px;
}

.predict-filter-chips::-webkit-scrollbar-thumb {
    background: var(--degen-text-hint, #565E63);
    border-radius: 2px;
}

.predict-filter-chip {
    flex-shrink: 0;
    padding: 4px 10px;
    border: 1px solid var(--degen-border-default, rgba(102, 102, 102, 0.2));
    border-radius: var(--degen-radius-sm, 2px);
    background: var(--degen-bg-input, #0b0d0f);
    color: var(--degen-text-secondary, #A2A2A2);
    font-family: var(--degen-font-sans, 'Space Grotesk', sans-serif);
    font-size: var(--degen-font-size-xs, 9px);
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--degen-transition-fast, 0.1s ease);
}

.predict-filter-chip:hover {
    color: var(--degen-text-primary, #E9E9E9);
}

.predict-filter-chip-active {
    background: var(--degen-bg-elevated, #141C21);
    border-color: var(--degen-color-primary, #B8F84E);
    color: var(--degen-color-primary, #B8F84E);
}

/* One facet per group. flex: none for the same reason the rows above carry it -- a group
   is allowed to scroll past the edge, never to be squeezed thinner than its chips. */
.predict-chip-group {
    display: flex;
    align-items: center;
    flex: none;
    gap: 4px;
}

/* Hairline between facet groups. Without it the strip reads as one long list of
   mutually-exclusive options, which is exactly what it is not. Carried as a leading
   border on the second and later groups so a facet with no chips cannot leave a
   separator hanging with nothing beyond it. */
.predict-chip-group + .predict-chip-group {
    margin-left: 4px;
    padding-left: 8px;
    border-left: 1px solid var(--degen-border-default, rgba(102, 102, 102, 0.2));
}

/* Escape hatch — only rendered while something is on, so it never sits there dead. */
.predict-filter-chip-clear {
    margin-left: 4px;
    border-style: dashed;
    color: var(--degen-text-tertiary, #888);
}

.predict-filter-chip-clear:hover {
    color: var(--degen-color-primary, #B8F84E);
    border-color: var(--degen-color-primary, #B8F84E);
}

/* Per-card venue tag. Colours and sizing come from the shared .asset-venue-badge family
   (mudblazor-overrides.css) that the chart asset dropdown and the portfolio tables use --
   this rule only handles how it sits in the card footer. */
.predict-card-venue {
    flex-shrink: 0;
    line-height: 1.5;
}

/* The footer's bullet exists to stop two plain text runs from reading as one
   ("no market · BINARY"). The venue tag is a filled pill with its own background and
   padding, so it already separates itself -- a bullet against it is a separator with
   nothing to separate, and it lands in the tightest row on the card. So the pill gets
   none on either side: it is never preceded by one (no rule adds it), and it suppresses
   the type tag's leading one when the tag follows it directly. Carries the same
   :not(:first-child) as the rule it overrides so it wins on specificity rather than on
   sitting further down the file. */
.predict-card-footer-left .predict-card-venue + .predict-card-tag:not(:first-child)::before {
    content: none;
}

/* ===========================================
   MOBILE — touch sizing for the two header rows
   9px chips with 4px padding are legible on a desktop monitor and unusable on a phone.
   Everything else on the card scales acceptably; only the tap targets need raising.
   =========================================== */
@media (max-width: 599px) {
    .predict-cat-tab {
        padding: 8px 12px;
        font-size: var(--degen-font-size-base, 12px);
    }

    .predict-cat-count {
        font-size: var(--degen-font-size-sm, 10px);
    }

    .predict-filter-chip {
        padding: 7px 12px;
        font-size: var(--degen-font-size-md, 11px);
        border-radius: var(--degen-radius-md, 4px);
    }

    /* Touch scrolls these rows directly, so the scrollbar is pure lost height -- and it was
       the grey stub that showed up inside the crushed category row. */
    .predict-cat-tabs,
    .predict-filter-chips {
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .predict-cat-tabs::-webkit-scrollbar,
    .predict-filter-chips::-webkit-scrollbar {
        display: none;
    }

    .predict-cat-tabs {
        padding-bottom: 0;
    }

    .predict-filter-chips {
        padding-bottom: 0;
    }

    /* Two tiles per row leaves roughly 150px each on a phone. That is enough for the ordinal
       bucket labels it was designed against ("Below 63571") and nowhere near enough for a
       venue-authored candidate name, which ellipsised down to a few characters and stopped
       identifying anything. One per row costs a little height and gives the caption the width
       it needs to still be a caption. */
    .predict-outcome-selector--prominent.predict-outcome-selector--multi .predict-outcome-option {
        flex: 1 1 100%;
        min-height: 40px;
    }

    .predict-outcome-disclosure {
        min-height: 40px;
        font-size: var(--degen-font-size-base, 12px);
    }
}