/* Prediction SPA — every paintable surface routes through these variables.
   Elementor Style controls override them via {{WRAPPER}} .fpfx-prediction-spa. */
.fpfx-prediction-spa {
    --pm-primary: #2962ff;
    --pm-yes: #16a34a;
    --pm-no: #dc2626;
    /* Active Positions pagination buttons. Three states: normal / hover /
       active (selected page). Defaults route through --pm-primary so an
       unconfigured theme still looks right. */
    --pm-positions-pager-bg:            #f3f4f6;
    --pm-positions-pager-text:          var(--pm-text);
    --pm-positions-pager-bg-hover:      var(--pm-primary);
    --pm-positions-pager-text-hover:    #ffffff;
    --pm-positions-pager-bg-active:     var(--pm-primary);
    --pm-positions-pager-text-active:   #ffffff;
    /* Per-surface YES/NO overrides — default to the global --pm-yes / --pm-no
       so legacy behavior is unchanged, but each can be themed independently:
         events  → YES/NO buttons on the events-grid cards
         market  → YES/NO buttons on the event-detail market rows
         order   → YES/NO buttons inside the order panel */
    --pm-events-yes: var(--pm-yes);
    --pm-events-no:  var(--pm-no);
    --pm-market-yes: var(--pm-yes);
    --pm-market-no:  var(--pm-no);
    --pm-order-yes:  var(--pm-yes);
    --pm-order-no:   var(--pm-no);
    --pm-bg: #ffffff;
    --pm-surface: #f9fafb;
    --pm-text: #111827;
    --pm-text-secondary: #6b7280;
    --pm-border: #e5e7eb;

    background: var(--pm-bg);
    color: var(--pm-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    width: 100%;
}
.fpfx-prediction-spa *, .fpfx-prediction-spa *::before, .fpfx-prediction-spa *::after { box-sizing: border-box; }

/* Bootstrap state shown until JS swaps in the shell. */
.pm-spa-bootstrap { display: flex; justify-content: center; padding: 48px 0; }
.pm-spa-bootstrap-spinner {
    width: 28px; height: 28px;
    border: 3px solid var(--pm-border); border-top-color: var(--pm-primary);
    border-radius: 50%; animation: pm-spin 0.7s linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }

/* Categories + tags strips use Tailwind utilities for layout. Color/border/text
   surfaces are routed through their own CSS variables (defined below) so each
   region can be themed independently from the global --pm-* palette. */
.pm-spa-header { padding: 8px 0; }
.pm-spa-tags-wrap { padding-bottom: 8px; }

/* Toolbar layout — money lines on the left, Active Positions on the right.
   flex-wrap lets the right column drop to its own row when narrow viewports
   can't fit both side-by-side (otherwise the button visually overlaps the
   Equity card on mobile). */
.pm-spa-toolbar {
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 8px;
}
.pm-spa-toolbar-left,
.pm-spa-toolbar-right { display: flex; align-items: center; gap: 8px; }
.pm-spa-toolbar-right { margin-left: auto; }
.pm-spa-toolbar-left { flex-wrap: wrap; } /* Balance/Equity stack vertically on very narrow screens */

/* Mobile: when the toolbar wraps, the button lands on its own line — keep it
   flush right and give it the full row so Balance/Equity stay legible.
   Balance + Equity stay side by side (they wrap to full-width on their own
   via .pm-spa-money-lines flex-wrap when the row is too narrow). */
@media (max-width: 640px) {
    .pm-spa-toolbar-right {
        width: 100%;
        margin-left: 0;
        justify-content: flex-end;
    }
    .pm-spa-toolbar-left { width: 100%; }
    /* Mobile: fill the row so the cards sit side by side when they fit, and
       wrap to full-width (each on its own line) when they don't. */
    .pm-spa-money-lines { width: 100%; }
    .pm-spa-money-card  { flex: 1 1 150px; }
}

/* Active Positions toggle in the top toolbar — themed via its own variables so
   the Elementor "Active Positions Button" Style section can drive each surface. */
.fpfx-prediction-spa {
    --pm-active-positions-btn-bg:                 transparent;
    --pm-active-positions-btn-bg-hover:           var(--pm-surface);
    --pm-active-positions-btn-text:               var(--pm-text-secondary);
    --pm-active-positions-btn-text-hover:         var(--pm-text);
    --pm-active-positions-btn-border-color:       var(--pm-border);
    --pm-active-positions-btn-border-color-hover: var(--pm-primary);
    --pm-active-positions-btn-border-width:       1px;
    --pm-active-positions-btn-border-radius:      6px;

    /* Balance & Equity money-lines cards — fall back to event-card styling so
       they match the rest of the SPA out of the box. */
    --pm-money-card-bg:               var(--pm-card-bg);
    --pm-money-card-border-color:     var(--pm-card-border-color);
    --pm-money-card-border-width:     var(--pm-card-border-width);
    --pm-money-card-border-radius:    var(--pm-card-border-radius);
    --pm-money-label-color:           var(--pm-text-secondary);
    --pm-money-value-color:           var(--pm-text);

    /* ----- Crypto sidebar (vertical nav on the Crypto category, desktop)
       Each surface routes through its own variable so the customizer
       picker discovers them and a theme can drive them independently. */
    --pm-crypto-sidebar-bg:                 var(--pm-surface);
    --pm-crypto-sidebar-border-color:       var(--pm-border);
    --pm-crypto-sidebar-border-width:       1px;
    --pm-crypto-sidebar-border-radius:      8px;
    --pm-crypto-sidebar-item-bg:            transparent;
    --pm-crypto-sidebar-item-bg-hover:      color-mix(in srgb, var(--pm-text) 6%, transparent);
    --pm-crypto-sidebar-item-bg-active:     color-mix(in srgb, var(--pm-primary) 12%, transparent);
    --pm-crypto-sidebar-item-text:          var(--pm-text-secondary);
    --pm-crypto-sidebar-item-text-hover:    var(--pm-text);
    --pm-crypto-sidebar-item-text-active:   var(--pm-text);
    --pm-crypto-sidebar-icon-color:         var(--pm-text-secondary);
    --pm-crypto-sidebar-icon-color-active:  var(--pm-primary);

    /* ----- Live price tiles ("Price to Beat" / "Current Price") */
    --pm-live-price-box-bg:             transparent;
    --pm-live-price-box-border-color:   var(--pm-border);
    --pm-live-price-box-border-width:   1px;
    --pm-live-price-box-border-radius:  6px;
    --pm-live-price-label-color:        var(--pm-text-secondary);
    --pm-live-price-target-color:       var(--pm-text-secondary);
    --pm-live-price-current-color:      #f59e0b; /* Polymarket orange default */

    /* ----- "Go to live market" button (shown post-expiry and on
       non-live crypto events that belong to a series) */
    --pm-live-go-btn-bg:                var(--pm-text);
    --pm-live-go-btn-bg-hover:          var(--pm-text);
    --pm-live-go-btn-text:              var(--pm-bg);
    --pm-live-go-btn-border-color:      transparent;
    --pm-live-go-btn-border-width:      0;
    --pm-live-go-btn-border-radius:     999px;

    /* ----- Chart-type toggle (chances % ↔ crypto price) */
    --pm-live-chart-toggle-bg:                  var(--pm-surface);
    --pm-live-chart-toggle-border-color:        var(--pm-border);
    --pm-live-chart-toggle-border-width:        1px;
    --pm-live-chart-toggle-border-radius:       6px;
    --pm-live-chart-toggle-btn-bg:              transparent;
    --pm-live-chart-toggle-btn-bg-active:       var(--pm-text);
    --pm-live-chart-toggle-btn-text:            var(--pm-text-secondary);
    --pm-live-chart-toggle-btn-text-active:     var(--pm-bg);

    /* ----- Positions sub-tabs (Active | Closed) — pill toggle above
       the positions table. Declared here so the runtime customizer
       picks them up via its --pm-* stylesheet walker; the rule on
       .pm-spa-positions-tabs / .pm-spa-positions-tab consumes them. */
    --pm-positions-tabs-bg:                 var(--pm-surface);
    --pm-positions-tabs-border-color:       var(--pm-border);
    --pm-positions-tabs-border-width:       1px;
    --pm-positions-tabs-border-radius:      8px;
    --pm-positions-tabs-padding:            4px;
    --pm-positions-tab-bg:                  transparent;
    --pm-positions-tab-bg-hover:            color-mix(in srgb, var(--pm-text) 8%, transparent);
    --pm-positions-tab-bg-active:           var(--pm-accent, var(--pm-text));
    --pm-positions-tab-text:                var(--pm-text-secondary, var(--pm-text));
    --pm-positions-tab-text-hover:          var(--pm-text);
    --pm-positions-tab-text-active:         var(--pm-on-accent, var(--pm-card-bg, #fff));
    --pm-positions-tab-padding-x:           12px;
    --pm-positions-tab-padding-y:           6px;
    --pm-positions-tab-border-radius:       6px;
    --pm-positions-tab-font-size:           13px;
    --pm-positions-tab-font-weight:         500;
    /* Active/Closed table header row (simple-datatables <thead>). */
    --pm-positions-header-bg:               transparent;
    --pm-positions-header-text:             var(--pm-text-secondary, var(--pm-text));
    --pm-positions-header-border-color:     var(--pm-border);
}

/* Balance + Equity cards (left side of the toolbar) */
/* Balance + Equity. On desktop/tablet they sit side by side at content width.
   The full-width-wrap behavior is mobile-only (see the @media block above). */
.pm-spa-money-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pm-spa-money-card {
    display: flex; flex-direction: column; gap: 2px;
    padding: 6px 12px; min-width: 110px;
    background: var(--pm-money-card-bg);
    border: var(--pm-money-card-border-width) solid var(--pm-money-card-border-color);
    border-radius: var(--pm-money-card-border-radius);
}
.pm-spa-money-label {
    font-size: 11px; line-height: 1.2;
    color: var(--pm-money-label-color);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pm-spa-money-value {
    font-size: 16px; font-weight: 600; line-height: 1.4;
    color: var(--pm-money-value-color);
    white-space: nowrap;
}
.pm-spa-active-positions-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 12px;
    background: var(--pm-active-positions-btn-bg);
    color: var(--pm-active-positions-btn-text);
    border: var(--pm-active-positions-btn-border-width) solid var(--pm-active-positions-btn-border-color);
    border-radius: var(--pm-active-positions-btn-border-radius);
    cursor: pointer; font-size: 13px; font-weight: 500;
    white-space: nowrap;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.pm-spa-active-positions-btn:hover {
    background: var(--pm-active-positions-btn-bg-hover);
    color: var(--pm-active-positions-btn-text-hover);
    border-color: var(--pm-active-positions-btn-border-color-hover);
}

/* Close-position confirmation modal (shown only when not iframed; the iframe
   path posts to the parent, which renders the modal in its own viewport). */
.pm-spa-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: flex-start; justify-content: center;
    z-index: 9999; overflow-y: auto; padding: 32px 16px;
}
.pm-spa-modal-backdrop.is-open { display: flex; }
.pm-spa-modal {
    background: var(--pm-bg);
    color: var(--pm-text);
    border: 1px solid var(--pm-border);
    border-radius: 8px;
    width: 100%; max-width: 420px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: pm-toast-in 180ms ease-out;
}
.pm-spa-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px;
    font-weight: 600; font-size: 16px;
    border-bottom: 1px solid var(--pm-border);
}
.pm-spa-modal-close {
    background: transparent; border: 0; cursor: pointer;
    color: var(--pm-text-secondary); font-size: 16px; line-height: 1;
}
.pm-spa-modal-close:hover { color: var(--pm-text); }
.pm-spa-modal-body { padding: 20px; }
.pm-spa-modal-text { text-align: center; margin: 0 0 18px; }
.pm-spa-modal-details {
    margin: 0 0 18px;
    padding: 12px 14px;
    border: 1px solid var(--pm-border);
    border-radius: 6px;
    background: var(--pm-surface-2, rgba(0,0,0,0.03));
    font-size: 13px;
    line-height: 1.5;
}
.pm-spa-modal-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
}
.pm-spa-modal-detail-row:not(:last-child) {
    border-bottom: 1px dashed var(--pm-border);
}
.pm-spa-modal-detail-row dt { color: var(--pm-text-secondary, #666); margin: 0; font-weight: 500; }
.pm-spa-modal-detail-row dd { color: var(--pm-text, inherit); margin: 0; font-weight: 600; }
.pm-spa-modal-actions {
    display: flex; justify-content: flex-end; gap: 8px;
}
.pm-spa-modal-btn {
    padding: 8px 16px; border-radius: 6px;
    border: 1px solid transparent;
    font-weight: 500; font-size: 13px; cursor: pointer;
    transition: background 150ms ease, color 150ms ease, opacity 150ms ease;
}
.pm-spa-modal-btn-cancel {
    background: transparent;
    color: var(--pm-text-secondary);
    border-color: var(--pm-border);
}
.pm-spa-modal-btn-cancel:hover { color: var(--pm-text); }
.pm-spa-modal-btn-danger {
    background: var(--pm-no);
    color: #ffffff;
}
.pm-spa-modal-btn-danger:hover:not(:disabled) { opacity: 0.9; }
.pm-spa-modal-btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }
.pm-spa-modal-btn-primary {
    background: var(--pm-yes);
    color: #ffffff;
}
.pm-spa-modal-btn-primary:hover:not(:disabled) { opacity: 0.9; }

/* Positions panel — sub-tab bar (Active | Closed | Pending).
   Pending is hidden until the endpoint is ready. Every visual is
   driven by --pm-positions-tabs-* CSS variables so the Elementor
   Style panel can override them (see register_positions_tabs_style_section). */
.pm-spa-positions-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    padding: var(--pm-positions-tabs-padding, 4px);
    border-radius: var(--pm-positions-tabs-border-radius, 8px);
    background: var(--pm-positions-tabs-bg, var(--pm-surface));
    border: var(--pm-positions-tabs-border-width, 1px) solid var(--pm-positions-tabs-border-color, var(--pm-border));
}
.pm-spa-positions-tab {
    padding: var(--pm-positions-tab-padding-y, 6px) var(--pm-positions-tab-padding-x, 12px);
    border-radius: var(--pm-positions-tab-border-radius, 6px);
    font-size: var(--pm-positions-tab-font-size, 13px);
    font-weight: var(--pm-positions-tab-font-weight, 500);
    color: var(--pm-positions-tab-text, var(--pm-text-secondary, var(--pm-text)));
    background: var(--pm-positions-tab-bg, transparent);
    border: 0;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.pm-spa-positions-tab:hover:not(.is-disabled):not(.is-active) {
    background: var(--pm-positions-tab-bg-hover, color-mix(in srgb, var(--pm-text) 8%, transparent));
    color: var(--pm-positions-tab-text-hover, var(--pm-text));
}
.pm-spa-positions-tab.is-active {
    background: var(--pm-positions-tab-bg-active, var(--pm-accent, var(--pm-text)));
    color: var(--pm-positions-tab-text-active, var(--pm-on-accent, var(--pm-card-bg, #fff)));
}
.pm-spa-positions-tab.is-disabled,
.pm-spa-positions-tab[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Positions panel */
.pm-spa-positions {
    margin-top: 12px;
    background: var(--pm-card-bg, var(--pm-surface));
    border: var(--pm-card-border-width, 1px) solid var(--pm-card-border-color, var(--pm-border));
    border-radius: var(--pm-card-border-radius, 8px);
    padding: 16px;
    color: var(--pm-text);
}
.pm-spa-positions-table { width: 100%; }
.pm-spa-positions-reason { color: var(--pm-text-secondary); }

/* Active/Closed table header row. simple-datatables ships its own th styling
   (incl. Tailwind @apply rules), so we win with scope + !important like the
   pager rules above. */
.fpfx-prediction-spa .pm-spa-positions-table thead th,
.fpfx-prediction-spa .pm-spa-positions .dataTable-table thead th {
    background: var(--pm-positions-header-bg) !important;
    color: var(--pm-positions-header-text) !important;
    border-bottom: 1px solid var(--pm-positions-header-border-color) !important;
}

/* Pagination buttons inside the Active Positions table. simpleDatatables ships
   default Tailwind `@apply hover:!bg-primary hover:!text-white` rules at the
   library level, so hover needs `!important` to win at our scope; specificity
   alone covers the normal + active selectors. */
.fpfx-prediction-spa .pm-spa-positions .dataTable-pagination a {
    background: var(--pm-positions-pager-bg);
    color: var(--pm-positions-pager-text);
}
.fpfx-prediction-spa .pm-spa-positions .dataTable-pagination a:hover {
    background: var(--pm-positions-pager-bg-hover) !important;
    color: var(--pm-positions-pager-text-hover) !important;
}
.fpfx-prediction-spa .pm-spa-positions .dataTable-pagination .active a,
.fpfx-prediction-spa .pm-spa-positions .dataTable-pagination .active a:hover {
    background: var(--pm-positions-pager-bg-active) !important;
    color: var(--pm-positions-pager-text-active) !important;
}

/* ---------------------------------------------------------------------------
 | Section-scoped CSS variables. Each falls back to the global --pm-* default
 | so existing styling is preserved until the Elementor control overrides it.
 * -------------------------------------------------------------------------- */
.fpfx-prediction-spa {
    /* Categories strip (top nav bottom border) */
    --pm-categories-border-color: var(--pm-border);
    --pm-categories-border-width: 1px;
    --pm-categories-border-style: solid;
    --pm-categories-margin-bottom: 12px;

    /* Search input */
    --pm-search-bg: var(--pm-bg);
    --pm-search-text: var(--pm-text);
    --pm-search-placeholder: var(--pm-text-secondary);
    --pm-search-border-color: var(--pm-border);
    --pm-search-border-radius: 6px;
    --pm-search-focus-border-color: var(--pm-primary);
    --pm-search-icon-color: var(--pm-text-secondary);

    /* Tags strip (sub-tags pills + scroll arrows) */
    --pm-tags-text: var(--pm-text-secondary);
    --pm-tags-text-hover: var(--pm-text);
    --pm-tags-active-text: var(--pm-text);
    --pm-tags-active-bg: var(--pm-surface);
    --pm-tags-active-border-color: var(--pm-border);
    --pm-tags-pill-radius: 6px;
    --pm-tags-arrow-color: var(--pm-text-secondary);
    --pm-tags-arrow-hover-color: var(--pm-text);

    /* Load-more / Show more markets button */
    --pm-loadmore-text: var(--pm-text-secondary);
    --pm-loadmore-text-hover: var(--pm-text);
    --pm-loadmore-bg: transparent;
    --pm-loadmore-bg-hover: transparent;
    --pm-loadmore-border-color: transparent;
    --pm-loadmore-border-color-hover: transparent;
    --pm-loadmore-radius: 6px;
    --pm-loadmore-padding-y: 6px;
    --pm-loadmore-padding-x: 12px;

    /* Event card */
    --pm-card-bg: var(--pm-surface);
    --pm-card-border-color: var(--pm-border);
    --pm-card-border-width: 1px;
    --pm-card-border-radius: 6px;
    --pm-card-hover-border-color: var(--pm-card-border-color);
    --pm-card-title-color: var(--pm-text);
    --pm-card-content-color: var(--pm-text-secondary);
}

/* Categories strip border */
.pm-spa-categories {
    border-top: 0; border-left: 0; border-right: 0;
    border-bottom-color: var(--pm-categories-border-color);
    border-bottom-width: var(--pm-categories-border-width);
    border-bottom-style: var(--pm-categories-border-style);
    margin-bottom: var(--pm-categories-margin-bottom);
}

/* Search input */
.pm-spa-search-input {
    width: 100%;
    padding: 8px 32px 8px 32px;
    font-size: 13px;
    background: var(--pm-search-bg);
    color: var(--pm-search-text);
    border: 1px solid var(--pm-search-border-color);
    border-radius: var(--pm-search-border-radius);
    outline: none;
    transition: border-color 150ms ease;
}
.pm-spa-search-input:focus { border-color: var(--pm-search-focus-border-color); }
.pm-spa-search-input::placeholder { color: var(--pm-search-placeholder); opacity: 1; }
.pm-spa-search-icon, .pm-spa-search-clear { color: var(--pm-search-icon-color); }
.pm-spa-search-clear:hover { color: var(--pm-search-text); }
/* Suppress the native Chrome/Safari search-cancel button (we render our own
   .pm-spa-search-clear ✕ icon, the native one duplicates it on hover). */
.pm-spa-search-input::-webkit-search-cancel-button,
.pm-spa-search-input::-webkit-search-decoration,
.pm-spa-search-input::-webkit-search-results-button,
.pm-spa-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
/* Edge / Internet Explorer counterpart. */
.pm-spa-search-input::-ms-clear,
.pm-spa-search-input::-ms-reveal {
    display: none;
    width: 0; height: 0;
}

/* Tags strip */
.pm-spa-tag-pill {
    color: var(--pm-tags-text);
    border: 1px solid transparent;
    border-radius: var(--pm-tags-pill-radius);
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.pm-spa-tag-pill:hover { color: var(--pm-tags-text-hover); }
.pm-spa-tag-pill.is-active {
    color: var(--pm-tags-active-text);
    background: var(--pm-tags-active-bg);
    border-color: var(--pm-tags-active-border-color);
    font-weight: 700;
}
.pm-spa-tags-arrow { color: var(--pm-tags-arrow-color); transition: color 150ms ease; }
.pm-spa-tags-arrow:hover { color: var(--pm-tags-arrow-hover-color); }

/* Load more button */
.pm-spa-loadmore {
    color: var(--pm-loadmore-text);
    background: var(--pm-loadmore-bg);
    border: 1px solid var(--pm-loadmore-border-color);
    border-radius: var(--pm-loadmore-radius);
    padding: var(--pm-loadmore-padding-y) var(--pm-loadmore-padding-x);
    font-size: 13px; cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}
.pm-spa-loadmore:hover {
    color: var(--pm-loadmore-text-hover);
    background: var(--pm-loadmore-bg-hover);
    border-color: var(--pm-loadmore-border-color-hover);
}

/* Event card */
.pm-spa-card {
    background: var(--pm-card-bg);
    border: var(--pm-card-border-width) solid var(--pm-card-border-color);
    border-radius: var(--pm-card-border-radius);
    transition: border-color 150ms ease, transform 150ms ease;
}
.pm-spa-card:hover { border-color: var(--pm-card-hover-border-color); }
.pm-spa-card-title { color: var(--pm-card-title-color); }
.pm-spa-card-content { color: var(--pm-card-content-color); }

/* Interval badge — small pill in the top-right corner of crypto
   interval event cards (5M / 15M / 1H / 4H / Daily). Lets users
   scan the timeframe at a glance without us mutating the event
   title. The header variant uses absolute positioning relative to
   the .pm-spa-event-title row inside the detail view. */
.pm-spa-interval-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pm-primary) 14%, transparent);
    color: var(--pm-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
    user-select: none;
}
.pm-spa-interval-badge--header {
    top: 0;
    right: 0;
    font-size: 11px;
    padding: 4px 10px;
}
/* Reserve room on the card's header row so a long event title can't slide
   under the corner interval badge. Scoped to cards that actually have a
   badge (crypto-interval events) via :has(), so other cards keep full width. */
.pm-spa-card:has(> .pm-spa-interval-badge) > div:first-of-type {
    padding-right: 46px;
}

/* LIVE pill on event cards shown when the active Crypto sub-tag is a
   live-now filter (5m/15m/1h/4h/daily/weekly/ETF). The dot uses a slow
   `pm-spa-live-pulse` keyframe so it reads as a heartbeat rather than a
   blink. */
.pm-spa-live-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ef4444;
    text-transform: uppercase;
    line-height: 1;
}
.pm-spa-live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
    animation: pm-spa-live-pulse 1.8s ease-in-out infinite;
}
@keyframes pm-spa-live-pulse {
    0%   { opacity: 1;   box-shadow: 0 0 0 0   rgba(239, 68, 68, 0.55); }
    50%  { opacity: 0.45; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
    100% { opacity: 1;   box-shadow: 0 0 0 0   rgba(239, 68, 68, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .pm-spa-live-dot { animation: none; }
}

/* ---------------------------------------------------------------------------
 | Filter button + dropdown panels
 * -------------------------------------------------------------------------- */
.fpfx-prediction-spa {
    /* Sliders icon button */
    --pm-filter-btn-bg:               transparent;
    --pm-filter-btn-bg-hover:         var(--pm-surface);
    --pm-filter-btn-text:             var(--pm-text-secondary);
    --pm-filter-btn-text-hover:       var(--pm-primary);
    --pm-filter-btn-border-color:     var(--pm-border);
    --pm-filter-btn-border-color-hover: var(--pm-primary);
    --pm-filter-btn-radius:           6px;

    /* Dropdown buttons (sort + frequency) */
    --pm-dropdown-btn-bg:               transparent;
    --pm-dropdown-btn-bg-hover:         var(--pm-surface);
    --pm-dropdown-btn-text:             var(--pm-primary);
    --pm-dropdown-btn-text-hover:       var(--pm-primary);
    --pm-dropdown-btn-border-color:     var(--pm-primary);
    --pm-dropdown-btn-radius:           9999px;

    /* Dropdown list */
    --pm-dropdown-list-bg:           var(--pm-bg);
    --pm-dropdown-list-border-color: var(--pm-border);
    --pm-dropdown-list-radius:       6px;
    --pm-dropdown-item-text:         var(--pm-text);
    --pm-dropdown-item-text-hover:   var(--pm-primary);
    --pm-dropdown-item-bg-hover:     var(--pm-surface);
    --pm-dropdown-active-dot:        var(--pm-primary);
}

/* Filter (sliders) button */
.pm-spa-filter-btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 38px; min-width: 38px; padding: 0 10px;
    background: var(--pm-filter-btn-bg);
    color: var(--pm-filter-btn-text);
    border: 1px solid var(--pm-filter-btn-border-color);
    border-radius: var(--pm-filter-btn-radius);
    cursor: pointer; font-size: 14px;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.pm-spa-filter-btn:hover {
    background: var(--pm-filter-btn-bg-hover);
    color: var(--pm-filter-btn-text-hover);
    border-color: var(--pm-filter-btn-border-color-hover);
}
.pm-spa-filter-icon { transition: transform 300ms ease; display: inline-block; }
.pm-spa-filter-btn.is-open .pm-spa-filter-icon { transform: scaleX(-1); }

/* Dropdown wrapper */
.pm-spa-dropdown { position: relative; display: inline-block; }
.pm-spa-dropdown-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; font-size: 13px; font-weight: 500;
    background: var(--pm-dropdown-btn-bg);
    color: var(--pm-dropdown-btn-text);
    border: 1px solid var(--pm-dropdown-btn-border-color);
    border-radius: var(--pm-dropdown-btn-radius);
    cursor: pointer; white-space: nowrap;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.pm-spa-dropdown-toggle:hover {
    background: var(--pm-dropdown-btn-bg-hover);
    color: var(--pm-dropdown-btn-text-hover);
}
.pm-spa-dropdown-caret { transition: transform 200ms ease; font-size: 12px; }
.pm-spa-dropdown-toggle[aria-expanded="true"] .pm-spa-dropdown-caret,
.pm-spa-dropdown:has([data-pm-dropdown-list]) .pm-spa-dropdown-caret { transform: rotate(180deg); }

/* Dropdown list */
.pm-spa-dropdown-list {
    position: absolute; top: calc(100% + 4px); left: 0;
    background: var(--pm-dropdown-list-bg);
    border: 1px solid var(--pm-dropdown-list-border-color);
    border-radius: var(--pm-dropdown-list-radius);
    list-style: none; padding: 4px 0; margin: 0;
    min-width: 180px; z-index: 50;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    white-space: nowrap;
}
.pm-spa-dropdown-list li { list-style: none; margin: 0; }
.pm-spa-dropdown-list li a {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; font-size: 13px; text-decoration: none;
    color: var(--pm-dropdown-item-text);
    transition: background 150ms ease, color 150ms ease;
}
.pm-spa-dropdown-list li a:hover {
    background: var(--pm-dropdown-item-bg-hover);
    color: var(--pm-dropdown-item-text-hover);
}
.pm-spa-dropdown-item-label { flex: 1; }
.pm-spa-dropdown-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--pm-dropdown-active-dot);
    margin-left: 4px;
}

/* Events grid + cards are pure Tailwind utilities (see _eventCardHtml). The
   card background, border and text colors flow through CSS variables so the
   Elementor color controls keep working. */
.pm-prediction-event-list { padding: 8px 0; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Buttons */
.pm-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 13px; border: 1px solid transparent; background: transparent; color: var(--pm-text); transition: background 120ms ease; }
.pm-btn-yes { background: color-mix(in srgb, var(--pm-yes) 15%, transparent); color: var(--pm-yes); }
.pm-btn-yes:hover, .pm-btn-yes.is-active { background: var(--pm-yes); color: #fff; }
.pm-btn-no  { background: color-mix(in srgb, var(--pm-no) 15%, transparent); color: var(--pm-no); }
.pm-btn-no:hover, .pm-btn-no.is-active { background: var(--pm-no); color: #fff; }

/* Surface-specific YES/NO overrides — beat the inline Tailwind utility classes
   on the rendered buttons via parent-class specificity (0,2,0 vs 0,1,0).
   Each surface routes through its own --pm-<surface>-yes/no variable, so the
   three contexts can be themed independently from the global --pm-yes/no. */
.pm-spa-card .pm-yes-btn {
    background: color-mix(in srgb, var(--pm-events-yes) 15%, transparent);
    color: var(--pm-events-yes);
}
.pm-spa-card .pm-yes-btn:hover {
    background: var(--pm-events-yes);
    color: #fff;
}
.pm-spa-card .pm-no-btn {
    background: color-mix(in srgb, var(--pm-events-no) 15%, transparent);
    color: var(--pm-events-no);
}
.pm-spa-card .pm-no-btn:hover {
    background: var(--pm-events-no);
    color: #fff;
}

.pm-spa-market-row .pm-yes-btn {
    background: color-mix(in srgb, var(--pm-market-yes) 15%, transparent);
    color: var(--pm-market-yes);
}
.pm-spa-market-row .pm-yes-btn:hover {
    background: var(--pm-market-yes);
    color: #fff;
}
.pm-spa-market-row .pm-no-btn {
    background: color-mix(in srgb, var(--pm-market-no) 15%, transparent);
    color: var(--pm-market-no);
}
.pm-spa-market-row .pm-no-btn:hover {
    background: var(--pm-market-no);
    color: #fff;
}

.pm-spa-order .pm-btn-yes {
    background: color-mix(in srgb, var(--pm-order-yes) 15%, transparent);
    color: var(--pm-order-yes);
}
.pm-spa-order .pm-btn-yes:hover,
.pm-spa-order .pm-btn-yes.is-active {
    background: var(--pm-order-yes);
    color: #fff;
}
.pm-spa-order .pm-btn-no {
    background: color-mix(in srgb, var(--pm-order-no) 15%, transparent);
    color: var(--pm-order-no);
}
.pm-spa-order .pm-btn-no:hover,
.pm-spa-order .pm-btn-no.is-active {
    background: var(--pm-order-no);
    color: #fff;
}
.pm-btn-primary { background: var(--pm-primary); color: #fff; padding: 10px 18px; }
.pm-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.pm-btn-ghost { color: var(--pm-text-secondary); }

/* Event detail */
.pm-spa-back { background: none; border: 0; cursor: pointer; color: var(--pm-text-secondary); padding: 8px 0; font-size: 13px; }
.pm-spa-back:hover { color: var(--pm-text); }
.pm-spa-detail { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 12px 0; }
@media (min-width: 1024px) { .pm-spa-detail { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.pm-spa-detail-main { min-width: 0; }
.pm-spa-detail-side { min-width: 280px; }
.pm-spa-event-title { font-size: 18px; font-weight: 700; margin: 0 0 4px 0; }
.pm-spa-event-meta { font-size: 12px; color: var(--pm-text-secondary); margin-bottom: 12px; }

/* Chart card — wraps the event header, the chart itself, and the meta footer
   in one panel that uses the same theming variables as the event cards. */
.pm-spa-chart-card {
    background: var(--pm-card-bg);
    border: var(--pm-card-border-width) solid var(--pm-card-border-color);
    border-radius: var(--pm-card-border-radius);
    padding: 16px 20px;
}
.pm-spa-chart {
    min-height: 240px;
    margin: 8px 0;
    background: transparent;
    padding: 0;
    border: 0;
}
.pm-spa-event-meta { color: var(--pm-card-content-color); }

/* ----------------------------------------------------------------------
 | Live crypto overlay (Polymarket-style "Up or Down 5m" detail page)
 |   .pm-spa-live-overlay sits between the event header and the chart and
 |   carries Price-to-Beat / Current Price on the left + the countdown on
 |   the right. .pm-spa-live-chart-toggle sits just below the chart and
 |   switches odds-% vs. crypto-price chart (price chart wired in Phase 2).
 * --------------------------------------------------------------------- */
.pm-spa-live-overlay {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin: 8px 0 4px;
}
.pm-spa-live-prices {
    display: flex;
    align-items: stretch;
    gap: 12px;
    background: var(--pm-live-price-box-bg);
    border: var(--pm-live-price-box-border-width) solid var(--pm-live-price-box-border-color);
    border-radius: var(--pm-live-price-box-border-radius);
    padding: 6px 10px;
}
.pm-spa-live-price { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pm-spa-live-price + .pm-spa-live-price {
    border-left: var(--pm-live-price-box-border-width) solid var(--pm-live-price-box-border-color);
    padding-left: 12px;
}
.pm-spa-live-price-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pm-live-price-label-color);
    line-height: 1.1;
}
.pm-spa-live-price-val {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--pm-text);
    font-variant-numeric: tabular-nums;
}
.pm-spa-live-target .pm-spa-live-price-val { color: var(--pm-live-price-target-color); }
.pm-spa-live-current .pm-spa-live-price-val { color: var(--pm-live-price-current-color); }
.pm-spa-live-delta { font-size: 11px; font-weight: 600; margin-left: 4px; }
.pm-spa-live-delta.is-up   { color: #16a34a; }
.pm-spa-live-delta.is-down { color: #ef4444; }

.pm-spa-live-countdown {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    color: #ef4444;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
}
.pm-spa-live-cd-mins, .pm-spa-live-cd-secs { display: inline-flex; align-items: baseline; gap: 4px; }
.pm-spa-live-cd-mins span, .pm-spa-live-cd-secs span { font-size: 28px; }
.pm-spa-live-cd-mins em, .pm-spa-live-cd-secs em {
    font-size: 10px;
    font-style: normal;
    letter-spacing: 0.05em;
    color: var(--pm-text-secondary);
    font-weight: 600;
}

/* Status pill shown on non-live crypto detail (Upcoming / Resolved /
   Not live) — left side of the overlay row, sibling of the
   Go-to-live button. Uses the same themable colors as the interval
   badge so the look is consistent. */
.pm-spa-live-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--pm-text) 8%, transparent);
    color: var(--pm-text-secondary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}

.pm-spa-live-go-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--pm-live-go-btn-bg);
    color: var(--pm-live-go-btn-text);
    border: var(--pm-live-go-btn-border-width) solid var(--pm-live-go-btn-border-color);
    border-radius: var(--pm-live-go-btn-border-radius);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.pm-spa-live-go-btn:hover {
    background: var(--pm-live-go-btn-bg-hover);
    opacity: 0.9;
}
.pm-spa-live-go-btn.is-loading { opacity: 0.6; cursor: progress; }
.pm-spa-live-go-btn.is-loading i { animation: pm-spa-spin 0.8s linear infinite; }
@keyframes pm-spa-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Footer row inside the chart card: meta (volume + end-date) on the
   left, the chart-type toggle on the right. The toggle pulls itself
   out of the document flow for older renders that didn't wrap them. */
.pm-spa-chart-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.pm-spa-chart-foot .pm-spa-event-meta { margin-bottom: 0; }

.pm-spa-live-chart-toggle {
    display: inline-flex;
    gap: 0;
    border: var(--pm-live-chart-toggle-border-width) solid var(--pm-live-chart-toggle-border-color);
    border-radius: var(--pm-live-chart-toggle-border-radius);
    overflow: hidden;
    padding: 2px;
    background: var(--pm-live-chart-toggle-bg);
}
.pm-spa-live-chart-btn {
    background: var(--pm-live-chart-toggle-btn-bg);
    border: 0;
    color: var(--pm-live-chart-toggle-btn-text);
    padding: 4px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 4px;
    transition: background 150ms ease, color 150ms ease;
}
.pm-spa-live-chart-btn svg { width: 16px; height: 16px; display: block; fill: currentColor; }
.pm-spa-live-chart-btn.is-active {
    background: var(--pm-live-chart-toggle-btn-bg-active);
    color: var(--pm-live-chart-toggle-btn-text-active);
}

@media (max-width: 640px) {
    .pm-spa-live-overlay { flex-direction: column; align-items: stretch; }
    .pm-spa-live-cd-mins span, .pm-spa-live-cd-secs span { font-size: 22px; }
}

/* Expired live overlay — drop the orange "current" tint to a neutral
   tone now that the price is final, not live. */
.pm-spa-live-overlay.is-expired .pm-spa-live-current .pm-spa-live-price-val {
    color: var(--pm-text);
}

/* Resolved-outcome card replaces the buy/sell UI in the order panel
   once the live window closes. Mirrors the layout in the Polymarket
   screenshot: large green checkmark, "Outcome: X" headline, market
   title below. */
.pm-spa-resolved-outcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    gap: 10px;
}
.pm-spa-resolved-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
}
.pm-spa-resolved-label {
    font-size: 18px;
    font-weight: 700;
    color: #2563eb;
}
.pm-spa-resolved-sub {
    font-size: 13px;
    color: var(--pm-text-secondary);
    max-width: 90%;
}

/* Flashing pill dot at the head of the live price line. Position is
   set inline (left/top px) by _paintLiveHeadDot; everything else lives
   here so themes can override via vars. Halo + dot pulse together. */
.pm-spa-chart { position: relative; }
.pm-spa-live-head-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    /* `background` + `color` are set inline by _paintLiveHeadDot so
       each chart series can drive its own line color. The transform
       is also set inline (translate(px, py)) so the position update
       is compositor-only — left/top updates triggered layout/paint
       and made the radar child appear to "shake". */
    background: currentColor;
    color: #f59e0b; /* fallback when JS hasn't set color yet */
    pointer-events: none;
    z-index: 2;
    /* Constant-speed linear transition on transform matches the
       chart's `animations.easing: 'linear'` so the dot rides the
       line tip in sync with ApexCharts' line drawing. */
    transition: transform 0.4s linear;
    will-change: transform;
}

/* Sliding-digit animation. Used by paintSlidingNumber() for the live
   Current Price, the countdown MIN/SEC pair, and the Yes/No outcome
   button cents. Each .pm-digit is one character; .is-changed triggers
   a short slide either up (value rose) or down (value fell or
   counting down). overflow:hidden on the parent keeps the slide
   inside the digit box. */
.pm-digit {
    display: inline-block;
    line-height: 1;
}
[data-pm-live-current],
[data-pm-live-target],
[data-pm-live-mm],
[data-pm-live-ss],
[data-pm-price-cell] {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}
.pm-digit.is-changed.is-up   { animation: pm-spa-digit-up   0.3s ease-out; }
.pm-digit.is-changed.is-down { animation: pm-spa-digit-down 0.3s ease-out; }
@keyframes pm-spa-digit-up {
    0%   { transform: translateY(70%);  opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}
@keyframes pm-spa-digit-down {
    0%   { transform: translateY(-70%); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .pm-digit.is-changed.is-up,
    .pm-digit.is-changed.is-down { animation: none; }
}

/* Current PnL cell in the Order Panel — slide-in when the polled
   value changes. Directional: slides up from below when PnL went up,
   down from above when it went down (stock-ticker convention).
   `inline-block` is required for transform to take effect on inline
   spans; `overflow: hidden` clips the off-screen frame of the slide. */
.pm-spa-order-pnl [data-pm-current-pnl] {
    display: inline-block;
    overflow: hidden;
}
.pm-spa-order-pnl [data-pm-current-pnl].is-pulse-up {
    animation: pm-spa-pnl-slide-up 0.28s ease-out;
}
.pm-spa-order-pnl [data-pm-current-pnl].is-pulse-down {
    animation: pm-spa-pnl-slide-down 0.28s ease-out;
}
@keyframes pm-spa-pnl-slide-up {
    0%   { transform: translateY(45%);  opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}
@keyframes pm-spa-pnl-slide-down {
    0%   { transform: translateY(-45%); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .pm-spa-order-pnl [data-pm-current-pnl].is-pulse-up,
    .pm-spa-order-pnl [data-pm-current-pnl].is-pulse-down { animation: none; }
}

/* Active Positions table — same slide treatment for the CURRENT PNL
   column. Reuses the keyframes defined above; only the scope changes.
   Each row's value lives in `[data-pm-row-pnl]` (see renderMoney in
   _buildPositionsTable). */
.pm-spa-positions-table [data-pm-row-pnl] {
    display: inline-block;
    overflow: hidden;
}
.pm-spa-positions-table [data-pm-row-pnl].is-pulse-up {
    animation: pm-spa-pnl-slide-up 0.28s ease-out;
}
.pm-spa-positions-table [data-pm-row-pnl].is-pulse-down {
    animation: pm-spa-pnl-slide-down 0.28s ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .pm-spa-positions-table [data-pm-row-pnl].is-pulse-up,
    .pm-spa-positions-table [data-pm-row-pnl].is-pulse-down { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pm-spa-live-head-dot { animation: none; }
}

/* Bookmark-style "Target" annotation label. ApexCharts puts our
   cssClass on the <text> element of the annotation; the matching
   background <rect> sits as the prior sibling. We restyle the rect
   with rounded corners and add a CSS-only triangular notch on the
   leading edge via a custom path so it reads as a price tag. */
.apexcharts-yaxis-annotation-label.pm-spa-target-label {
    font-family: inherit;
    letter-spacing: 0.02em;
}
.apexcharts-yaxis-annotations rect {
    rx: 3;
    ry: 3;
}

/* Markets list */
.fpfx-prediction-spa {
    --pm-market-row-bg:                 var(--pm-surface);
    --pm-market-row-bg-hover:           var(--pm-surface);
    --pm-market-row-border-color:       var(--pm-border);
    --pm-market-row-border-color-hover: var(--pm-primary);
    --pm-market-row-border-width:       1px;
    --pm-market-row-border-radius:      8px;
}
.pm-spa-markets { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.pm-spa-market-row {
    background: var(--pm-market-row-bg);
    border: var(--pm-market-row-border-width) solid var(--pm-market-row-border-color);
    border-radius: var(--pm-market-row-border-radius);
    transition: background 150ms ease, border-color 150ms ease;
}
.pm-spa-market-row:hover,
.pm-spa-market-row.is-active {
    background: var(--pm-market-row-bg-hover);
    border-color: var(--pm-market-row-border-color-hover);
}
.pm-spa-market-summary { cursor: pointer; }
/* Resolved markets — non-interactive variant of a market row. Greyed out so
   it's clearly visually distinct from live tradeable rows above. */
.pm-spa-market-row-resolved { opacity: 0.7; }
.pm-spa-market-row-resolved:hover { background: var(--pm-market-row-bg); border-color: var(--pm-market-row-border-color); }
.pm-spa-market-row-resolved .pm-spa-market-summary { cursor: default; }
.pm-spa-resolved-section { margin-top: 16px; }
.pm-spa-resolved-section .pm-spa-resolved-markets {
    display: flex; flex-direction: column; gap: 8px; margin-top: 8px;
}
.pm-spa-resolved-section.is-collapsed .pm-spa-resolved-markets { display: none; }
.pm-spa-resolved-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 0; padding: 6px 0;
    color: var(--pm-text-secondary);
    font-size: 13px; font-weight: 500; cursor: pointer;
}
.pm-spa-resolved-toggle:hover { color: var(--pm-text); }
.pm-spa-resolved-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 600; white-space: nowrap;
}
.pm-spa-resolved-badge-yes { background-color: rgba(34, 197, 94, 0.15); color: rgb(22 163 74); }
.pm-spa-resolved-badge-no  { background-color: rgba(239, 68, 68, 0.15); color: rgb(220 38 38); }

/* Rules / Market Context — wrapped in the same card chrome as the chart card
   and order panel so the detail screen looks like a stack of consistent
   cards. Tabs reuse .pm-spa-market-tab styling for visual consistency with
   the per-market Order Book / Graph tabs. Body uses pre-line so literal
   "\n" newlines in the upstream description render as line breaks. */
.pm-spa-event-info {
    margin-top: 24px;
    background: var(--pm-card-bg);
    border: var(--pm-card-border-width) solid var(--pm-card-border-color);
    border-radius: var(--pm-card-border-radius);
    padding: 16px 20px;
}
.pm-spa-event-info-tabs { margin-top: 0; }
.pm-spa-event-info-body {
    padding: 16px 0 0;
    color: var(--pm-text-secondary);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-line;
}
/* Collapse is closed by default. The .is-expanded class is toggled per-row when
   the user clicks the summary; .is-active only colors the row (drives the
   order panel + outcome highlight). They're independent on purpose so the first
   market can render highlighted but with the book/graph closed. */
.pm-spa-market-collapse { display: none; padding: 0 12px 12px; }
.pm-spa-market-row.is-expanded .pm-spa-market-collapse { display: block; }

/* Selected YES/NO state on the market-list buttons. Stays painted in the solid
   color even when the cursor isn't over them, so the row stays in sync with
   the order panel's outcome selection. */
.pm-spa-market-row .pm-yes-btn.is-active,
.pm-spa-market-row .pm-yes-btn.is-active:hover {
    background-color: var(--pm-market-yes);
    color: #ffffff;
}
.pm-spa-market-row .pm-no-btn.is-active,
.pm-spa-market-row .pm-no-btn.is-active:hover {
    background-color: var(--pm-market-no);
    color: #ffffff;
}

/* Market expansion: tabs */
.pm-spa-market-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--pm-border); margin-top: 8px; height: 34px; }
.pm-spa-market-tab {
    position: relative;
    padding: 12px 20px; font-size: 14px; font-weight: 500;
    color: var(--pm-text-secondary);
    text-decoration: none; cursor: pointer;
    transition: color 200ms ease;
}
.pm-spa-market-tab:hover { color: var(--pm-text); }
.pm-spa-market-tab.is-active { color: var(--pm-primary); }
.pm-spa-market-tab.is-active::after {
    content: ''; position: absolute;
    bottom: -1px; left: 0; right: 0; height: 2px;
    background: var(--pm-primary);
}

/* Order book column header inside the market expansion */
.pm-spa-book-header {
    display: grid; grid-template-columns: 40% 20% 20% 20%;
    align-items: center;
    border-bottom: 1px solid var(--pm-border);
    height: 32px; font-size: 11px; text-transform: uppercase;
    color: var(--pm-text-secondary);
}
.pm-spa-book-header > div { padding: 0 4px; }
.pm-spa-book-header-trade { justify-self: start; }
.pm-spa-book-header-c { display: flex; justify-content: center; }

/* Chart loader — animated pulse + faint baseline so the area doesn't read blank */
.pm-spa-chart-loading {
    position: relative; min-height: 240px; padding: 12px 0;
    overflow: hidden;
}
.pm-spa-chart-loading::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--pm-surface) 0%, color-mix(in srgb, var(--pm-surface) 60%, var(--pm-border)) 50%, var(--pm-surface) 100%);
    background-size: 200% 100%;
    animation: pm-shimmer 1.4s linear infinite;
    border-radius: 6px; opacity: 0.5;
}
.pm-spa-chart-loading-line {
    position: absolute; left: 0; right: 0;
    height: 1px; background: var(--pm-border);
    border-top: 1px dashed var(--pm-border);
}
.pm-spa-chart-loading-text {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: var(--pm-text-secondary); font-size: 12px;
    z-index: 2;
}

/* Order book ladder (rendered by jQuery innerHTML — no Alpine reactivity) */
.pm-spa-book { display: grid; grid-template-rows: 128px auto 128px; border-radius: 6px; overflow: hidden; }
.pm-spa-book-asks, .pm-spa-book-bids { overflow-y: auto; }
.pm-spa-book-asks::-webkit-scrollbar, .pm-spa-book-bids::-webkit-scrollbar { width: 0; }
.pm-spa-book-row { display: grid; grid-template-columns: 40% 20% 20% 20%; align-items: center; height: 32px; position: relative; font-size: 12px; }
.pm-spa-book-bar { height: 100%; opacity: 0.15; }
.pm-spa-book-bar-ask { background: var(--pm-no); }
.pm-spa-book-bar-bid { background: var(--pm-yes); }
.pm-spa-book-cell { display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.pm-spa-book-cell-ask { color: var(--pm-no); font-weight: 600; }
.pm-spa-book-cell-bid { color: var(--pm-yes); font-weight: 600; }
.pm-spa-book-middle { display: grid; grid-template-columns: 40% 20% 20% 20%; align-items: center; height: 32px; padding: 4px 12px; border-top: 1px solid var(--pm-border); border-bottom: 1px solid var(--pm-border); color: var(--pm-text-secondary); font-size: 12px; }

/* Order panel */
/* Order panel — themed via its own variables. */
.fpfx-prediction-spa {
    --pm-order-bg:                 var(--pm-surface);
    --pm-order-border-color:       var(--pm-border);
    --pm-order-border-width:       1px;
    --pm-order-border-radius:      8px;
    --pm-order-price-color:        var(--pm-yes);
    --pm-trade-btn-bg:             #c19a6b;
    --pm-trade-btn-bg-hover:       #a8835a;
    --pm-trade-btn-text:           #ffffff;
    --pm-trade-btn-text-hover:     var(--pm-trade-btn-text);
    --pm-trade-btn-radius:         6px;
}
.pm-spa-order {
    background: var(--pm-order-bg);
    border: var(--pm-order-border-width) solid var(--pm-order-border-color);
    border-radius: var(--pm-order-border-radius);
    padding: 16px;
    position: sticky;
    top: 12px;
}

.pm-spa-order-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--pm-border); height: 45px; }
.pm-spa-order-tab {
    padding: 10px 12px; text-align: center; font-weight: 600; cursor: pointer;
    color: var(--pm-text-secondary);
    background: transparent; border: 0; border-bottom: 1px solid transparent;
    transition: color 200ms ease, border-color 200ms ease;
}
.pm-spa-order-tab:hover { color: var(--pm-text); }
.pm-spa-order-tab.is-active { color: var(--pm-primary); border-bottom-color: var(--pm-primary); }

.pm-spa-order-outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pm-spa-order-outcomes .pm-btn { height: 48px; font-weight: 700; }

/* Amount / Shares input — borderless, big, right-aligned. */
.pm-spa-order-amount {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: 0;
    color: var(--pm-card-title-color, var(--pm-text));
    text-align: right; font-size: 28px; font-weight: 300;
    padding: 4px 0;
}
.pm-spa-order-amount::placeholder { color: var(--pm-text-secondary); opacity: 0.6; }

/* Quick increment / percentage pills under the amount. */
.pm-spa-order-pill {
    padding: 6px 14px; border-radius: 9999px;
    background: transparent; color: var(--pm-text-secondary);
    border: 1px solid var(--pm-border); font-size: 12px; font-weight: 500; cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.pm-spa-order-pill:hover {
    background: var(--pm-surface);
    color: var(--pm-text);
    border-color: var(--pm-primary);
}

/* "To win" / "You'll receive" payout block. The big amount uses --pm-order-price-color. */
.pm-spa-order-payout-value {
    color: var(--pm-order-price-color);
    font-size: 30px; font-weight: 300;
}

/* Mobile full-screen order panel: when the user clicks YES/NO from the market
   list (or arrives via a YES/NO card click), the controller flips
   data-pm-mobile-order-open="1" on the SPA root. Below the lg breakpoint we
   hide the detail-main column so the order panel takes over the viewport, and
   reveal the close icon in the order header so the user can return to the
   list. Above lg the layout stays side-by-side as before. */
.pm-spa-order-mobile-close {
    display: none; /* hidden until the swap is active on mobile */
    background: transparent; border: 0; cursor: pointer;
    color: var(--pm-text-secondary);
    padding: 4px 6px;
    line-height: 1;
}
.pm-spa-order-mobile-close:hover { color: var(--pm-text); }

@media (max-width: 1023px) {
    .fpfx-prediction-spa[data-pm-mobile-order-open="1"] .pm-spa-detail-main {
        display: none;
    }
    .fpfx-prediction-spa[data-pm-mobile-order-open="1"] .pm-spa-order-mobile-close {
        display: inline-flex;
    }
    /* Reset the order panel's sticky offset while swapped — the panel is the
       only thing visible, no need to keep it pinned. */
    .fpfx-prediction-spa[data-pm-mobile-order-open="1"] .pm-spa-order {
        position: static;
    }
}

/* Trade button. */
.pm-spa-trade-btn {
    display: block; width: 100%; margin-top: 16px;
    padding: 14px; border: 0; cursor: pointer;
    background: var(--pm-trade-btn-bg);
    color: var(--pm-trade-btn-text);
    border-radius: var(--pm-trade-btn-radius);
    font-weight: 600; font-size: 18px;
    transition: background 150ms ease, opacity 150ms ease;
}
.pm-spa-trade-btn:hover:not(:disabled) {
    background: var(--pm-trade-btn-bg-hover);
    color: var(--pm-trade-btn-text-hover);
}
.pm-spa-trade-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Order-panel toasts (success / error) — auto-dismissed by timers in JS, also
   manually dismissable via the close icon. */
.pm-spa-toast {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px; border-radius: 6px;
    margin-top: 10px; font-size: 13px; line-height: 1.4;
    animation: pm-toast-in 200ms ease-out;
}
.pm-spa-toast-text { flex: 1; }
.pm-spa-toast-close {
    background: transparent; border: 0; cursor: pointer;
    padding: 0 4px; opacity: 0.85; line-height: 1;
    color: inherit;
}
.pm-spa-toast-close:hover { opacity: 1; }
.pm-spa-toast-success {
    color: #d0d0d0; /* green-700 */
    background-color: rgba(34, 197, 94, 0.12); /* green-500/12 */
}
.pm-spa-toast-error {
    color: #d0d0d0; /* red-700 */
    background-color: rgba(239, 68, 68, 0.12); /* red-500/12 */
}
@keyframes pm-toast-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Modal (parent-side delegated when iframed) */
.pm-spa-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.pm-spa-modal { background: var(--pm-bg); border-radius: 8px; padding: 20px; min-width: 280px; max-width: 90vw; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.pm-spa-modal-title { font-weight: 700; margin-bottom: 8px; }
.pm-spa-modal-body { color: var(--pm-text-secondary); margin-bottom: 16px; }
.pm-spa-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* Loading rows */
.pm-spa-skeleton { background: linear-gradient(90deg, var(--pm-surface) 0%, color-mix(in srgb, var(--pm-surface) 60%, var(--pm-border)) 50%, var(--pm-surface) 100%); background-size: 200% 100%; animation: pm-shimmer 1.4s linear infinite; border-radius: 4px; }
@keyframes pm-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Empty / error */
.pm-spa-empty { text-align: center; color: var(--pm-text-secondary); padding: 32px; }

/* -----------------------------------------------------------------------
 | Crypto-category 2-column layout. The Crypto category swaps the
 | horizontal sub-tags strip for a vertical sidebar (CRYPTO_NAV_ITEMS) on
 | DESKTOP only. The 2-col flex is scoped behind min-width:1024px so on
 | mobile the JS can keep .is-crypto-layout on the shell (used by the
 | detail-view selector below) and the sidebar JS still re-renders
 | CRYPTO_NAV_ITEMS as a horizontal pill strip — see
 | _renderCryptoMobileStrip in prediction-spa.js.
 * ----------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .pm-spa-shell.is-crypto-layout .pm-spa-main {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        margin-top: 12px;
    }
    .pm-spa-shell.is-crypto-layout .pm-spa-tags-wrap {
        flex: 0 0 200px;
        max-width: 200px;
        position: sticky;
        top: 12px;
    }
    .pm-spa-shell.is-crypto-layout .pm-spa-content {
        flex: 1 1 auto;
        min-width: 0; /* allow grid children to shrink instead of overflowing */
    }
}

/* Hide the Crypto sidebar (desktop) / mobile pill strip while an event
   detail is open — the detail view takes the full width. */
.pm-spa-shell.is-crypto-layout.is-detail-view .pm-spa-tags-wrap {
    display: none;
}

/* Vertical sidebar — each surface routes through --pm-crypto-sidebar-*
   so the customizer panel (and themes) can drive them independently. */
.pm-spa-crypto-sidebar {
    list-style: none;
    margin: 0;
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--pm-crypto-sidebar-bg);
    border: var(--pm-crypto-sidebar-border-width) solid var(--pm-crypto-sidebar-border-color);
    border-radius: var(--pm-crypto-sidebar-border-radius);
}
.pm-spa-crypto-sidebar li { margin: 0; padding: 0; }
.pm-spa-crypto-sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--pm-crypto-sidebar-item-bg);
    color: var(--pm-crypto-sidebar-item-text);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.pm-spa-crypto-sidebar-item:hover {
    background: var(--pm-crypto-sidebar-item-bg-hover);
    color: var(--pm-crypto-sidebar-item-text-hover);
}
.pm-spa-crypto-sidebar-item.is-active {
    background: var(--pm-crypto-sidebar-item-bg-active);
    color: var(--pm-crypto-sidebar-item-text-active);
    font-weight: 600;
}
.pm-spa-crypto-sidebar-icon {
    width: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pm-crypto-sidebar-icon-color);
    font-size: 14px;
}
.pm-spa-crypto-sidebar-icon svg {
    width: 16px;
    height: 16px;
    display: block;
    fill: currentColor;
}
.pm-spa-crypto-sidebar-item.is-active .pm-spa-crypto-sidebar-icon { color: var(--pm-crypto-sidebar-icon-color-active); }
.pm-spa-crypto-sidebar-label { flex: 1; min-width: 0; }