/* 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;
}

/* USDH 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 above the swap CTA when order cost exceeds USDH
   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;
}

/* Replaces the Place Order button when there is a shortfall. Visually
   distinct from outcome-colored buy buttons -- this isn't a buy. */
.predict-action-btn.predict-swap-cta {
    background: var(--degen-color-primary, #B8F84E);
    color: var(--degen-bg-primary, #080809);
}

/* 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;
}

.predict-action-btn.predict-swap-cta:hover {
    opacity: 0.9;
}

/* 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);
}

/* 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);
}

/* Filter chip strip — horizontally scrollable */
.predict-filter-chips-wrap {
    margin-bottom: var(--degen-space-xs, 4px);
}

.predict-filter-chips {
    display: flex;
    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);
}