/* ═══════════════════════════════════════════════════════════════════════════
   ODETTE MOBILE - Compact UI Design
   Mobile-only styles (loaded via <link media="(max-width: 991px)">)
   Desktop hiding rules live in app.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   Variables
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    /* These interaction aliases deliberately inherit the desktop contract in
       app.css. Mobile is a new layout, not a second visual identity. */
    --glass-bg: color-mix(in srgb, var(--mobile-panel) 60%, transparent);
    --glass-bg-strong: color-mix(in srgb, var(--mobile-panel) 90%, transparent);
    --glass-border: color-mix(in srgb, var(--primary) 15%, transparent);
    --glass-blur: blur(20px);
    --call-green: #22c55e;
    --call-green-soft: rgba(34, 197, 94, 0.15);
    --put-red: #ef4444;
    --put-red-soft: rgba(239, 68, 68, 0.15);
}

/* The verified swap minimum belongs beside the action on phones too. */
#swapModal .v2-swap-extra { display: none !important; }
#swapModal #swap-min-info {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-muted);
}
#swapModal #swap-min-display {
    color: var(--text-primary);
    font-style: normal;
    text-align: right;
}

/* Mobile trade picker: keep the existing wheel intact and offer the shared
   desktop chart as an equal, reversible view of the same option state. */
.mobile-picker-view-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 8px;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: rgba(9, 11, 16, 0.62);
}

.mobile-picker-view-tab {
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font: 600 0.75rem/1 var(--sans);
    cursor: pointer;
    transition: background-color 100ms ease-out, color 100ms ease-out, transform 100ms ease-out;
    -webkit-tap-highlight-color: transparent;
}

.mobile-picker-view-tab.active {
    background: rgba(125, 211, 252, 0.14);
    color: var(--text-primary);
}

.mobile-picker-view-tab:active {
    transform: scale(0.98);
}

.mobile-picker-view-tab:focus-visible {
    outline: 2px solid var(--mobile-focus-ring);
    outline-offset: 2px;
}

.mobile-picker-view-panel[hidden] {
    display: none !important;
}

.mobile-picker-chart-panel {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--background);
}

.mobile-picker-chart-host {
    min-height: 300px;
}

.mobile-picker-chart-panel #target-chart,
.mobile-picker-chart-panel .tc-tv-wrap {
    width: 100%;
    min-height: 300px;
    height: 300px;
}

.mobile-picker-chart-panel .tc-tv-wrap {
    border: 0;
}

.mobile-picker-chart-panel .tc-tv-tools {
    min-height: 44px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 4px 6px;
    scrollbar-width: none;
}

.mobile-picker-chart-panel .tc-tv-tools::-webkit-scrollbar {
    display: none;
}

.mobile-picker-chart-panel .tc-tv-tool {
    min-height: 36px;
}

.mobile-picker-chart-note {
    margin: 0;
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
    text-align: center;
}

.mobile-trade-card.is-chart-picker-view .mobile-prediction-prompt {
    margin-bottom: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-picker-view-tab {
        transition-duration: 0ms;
    }

    .mobile-picker-view-tab:active {
        transform: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Mobile Base Layout - Compact
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    /* Desktop-only Date cell. The phone reflows the row into a card with named
       grid areas, so an unplaced cell shows uninvited. Hide it, do not delete
       it: the desktop strip needs it. */
    .user-positions-table tbody td.col-date,
    .open-positions-table tbody td.col-date {
        display: none !important;
    }

    html, body {
        min-height: 100vh !important;
    }

    body {
        background: var(--background) !important;
    }

    main {
        padding-bottom: 70px !important;
        padding-top: 0 !important;
        min-height: auto !important;
    }

    .container,
    .container-fluid {
        padding: 0 0.5rem !important;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       Network Alert Overlay
       ───────────────────────────────────────────────────────────────────────── */
    #connection-alert {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9999 !important;
        background: var(--mobile-overlay) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    .network-alert-box {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: var(--mobile-panel);
        background: color-mix(in srgb, var(--mobile-panel) 95%, transparent);
        border: none;
        border-radius: 20px;
        padding: 2rem 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
        width: calc(100% - 3rem);
        max-width: 340px;
        text-align: center;
    }

    .network-alert-box #connection-alert-text {
        color: var(--text-primary);
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .network-alert-box #switch-network-btn {
        background: var(--warning) !important;
        color: var(--panel-sunken) !important;
        border: none !important;
        border-radius: 12px !important;
        padding: 0.7rem 1.75rem !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        width: 100%;
        max-width: 220px;
        margin: 0 !important;
    }

    /* When showing positions/history/scores sections - NO extra padding */
    /* main:has selector removed as it is handled by specific section rules */

    #trade-section .row {
        flex-direction: column;
        gap: 0.5rem;
        margin-left: 0 !important;
        margin-right: 0 !important;
        --bs-gutter-x: 0 !important;
    }

    #trade-section .col-lg-9,
    #trade-section .col-lg-3 {
        width: 100%;
        max-width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #trade-section .professional-asset-header {
        padding: 0 !important;
        margin: 0 !important;
        margin-top: 0.75rem !important;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       Trade Heading
       ───────────────────────────────────────────────────────────────────────── */
    .mobile-trade-heading {
        display: none !important;
    }

    .mobile-asset-subtitle {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.85rem;
        font-weight: 400;
        text-align: center;
        margin: 0 0 0.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        /* The row reserves the chip's full 44px tap target instead of letting
           the chip overhang it. An overhanging target used to reach into the
           strike picker above, which paints over this row (.strike-picker-list
           is z-index 15), so the picker won those taps and silently moved the
           selected strike. Chip plus a long price still wraps at 320-360px. */
        flex-wrap: wrap;
        row-gap: 0.25rem;
        min-height: 44px;
    }

    .mobile-subtitle-icon {
        width: 18px;
        height: 18px;
        object-fit: contain;
    }

    /* min-height is the 44px tap target. No negative vertical margin: the
       subtitle row reserves this height, so the target never overlaps the
       strike picker above or the amount header below. */
    .mobile-weather-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        min-height: 44px;
        margin: 0 -2px;
        padding: 0 6px;
        font-size: 0.72rem;
        font-weight: 500;
        line-height: 1;
        background: transparent;
        border: none;
        -webkit-tap-highlight-color: transparent;
        cursor: pointer;
    }

    .mobile-weather-chip i {
        font-size: 0.85rem;
    }

    .mobile-weather-chip:active {
        opacity: 0.6;
    }

    .mobile-asset-subtitle[data-asset="ETH"] .mobile-subtitle-icon,
    .mobile-asset-subtitle[data-asset="XRP"] .mobile-subtitle-icon {
        filter: brightness(0) invert(1);
    }

    /* Background rectangle behind header + asset toggle */
    .asset-header-bg {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 0;
        background: rgba(255, 255, 255, 0.04);
        pointer-events: none;
    }

    .spot-ticker-bar {
        display: none !important;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       Asset Selector - Compact Pills
       ───────────────────────────────────────────────────────────────────────── */
    .asset-selector-wrapper {
        background: transparent !important;
        backdrop-filter: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Hide redundant label but keep weather indicator if shown */
    .asset-selector-top .asset-label-header {
        display: none !important;
    }

    .asset-selector-top {
        justify-content: flex-end !important;
        padding: 0 !important;
        margin-bottom: 0.6rem !important;
        position: relative;
        overflow: visible;
        align-items: stretch !important;
    }

    /* Left fade hint for scrollable asset toggles */
    .asset-sidebar::before {
        content: '‹';
        position: absolute;
        left: -0.5rem;
        top: 0;
        bottom: 0;
        width: 50px;
        background: linear-gradient(to left, transparent 0%, rgba(15, 20, 35, 0.85) 40%, rgba(15, 20, 35, 1) 100%);
        pointer-events: none;
        z-index: 2;
        transition: opacity 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-left: 2px;
        font-size: 1.4rem;
        color: rgba(255, 255, 255, 0.7);
        opacity: 0;
    }

    .asset-sidebar.scrolled-start::before {
        opacity: 1;
        animation: scrollHintPulse 1.5s ease-in-out infinite;
    }

    /* Right fade + arrow hint for scrollable asset toggles */
    .asset-sidebar::after {
        content: '›';
        position: absolute;
        right: -0.5rem;
        top: 0;
        bottom: 0;
        width: 50px;
        background: linear-gradient(to right, transparent 0%, rgba(15, 20, 35, 0.85) 40%, rgba(15, 20, 35, 1) 100%);
        pointer-events: none;
        z-index: 2;
        transition: opacity 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 2px;
        font-size: 1.4rem;
        color: rgba(255, 255, 255, 0.7);
        animation: scrollHintPulse 1.5s ease-in-out infinite;
    }

    @keyframes scrollHintPulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.5; }
    }

    .asset-sidebar.scrolled-end::after {
        opacity: 0;
        animation: none;
    }

    .asset-selector-top .asset-price-section {
        display: flex !important;
    }

    /* Asset buttons container - stretch edge to edge past card padding */
    .asset-selection-buttons {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: safe center;
        gap: 0;
        padding: 0.25rem 0;
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        width: calc(100% + 1rem) !important;
        max-width: calc(100% + 1rem) !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .asset-selection-buttons::-webkit-scrollbar {
        display: none;
    }

    /* Compact vertical asset pills - wider for better readability */
    .asset-selection-buttons .asset-selection-btn {
        flex-shrink: 0;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.51rem 0.64rem !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        min-width: 63px !important;
        max-width: 82px !important;
        gap: 0.3rem;
        transition: all 0.2s ease !important;
    }

    .asset-selection-buttons .asset-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 0.25rem;
        width: 100%;
    }

    .asset-selection-buttons .asset-icon {
        width: 22px !important;
        height: 22px !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .asset-selection-buttons .asset-name {
        font-size: 0.72rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em;
        line-height: 1.1;
        text-align: center !important;
        width: 100%;
        display: block !important;
        color: rgba(255, 255, 255, 0.55) !important;
    }

    .asset-selection-buttons .asset-price {
        font-size: 0.55rem !important;
        color: var(--text-secondary, #94a3b8) !important;
        line-height: 1;
        text-align: center !important;
        width: 100%;
        display: block !important;
        font-weight: 600 !important;
    }

    /* Selected State - blue fill like active expiry button */
    .asset-selection-buttons .asset-selection-btn.selected {
        background: rgba(56, 152, 236, 0.85) !important;
        border: none !important;
        box-shadow: none !important;
    }

    .asset-selection-buttons .asset-selection-btn.selected .asset-name {
        color: #ffffff !important;
    }

    .asset-selection-buttons .asset-selection-btn.selected .asset-price {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    /* No filter changes on icons when selected - keep them as-is */
    /* (opacity handled above) */

    /* Dim unselected icons slightly for contrast */
    .asset-selection-buttons .asset-selection-btn .asset-icon:not(img),
    .asset-selection-buttons .asset-selection-btn img.asset-icon {
        filter: none !important;
        opacity: 0.55;
        transition: opacity 0.2s ease;
    }

    .asset-selection-buttons .asset-selection-btn.selected .asset-icon:not(img),
    .asset-selection-buttons .asset-selection-btn.selected img.asset-icon {
        opacity: 1;
    }

    /* ETH and XRP logos always white */
    .asset-selection-buttons .asset-selection-btn[data-asset="ETH"] img.asset-icon,
    .asset-selection-buttons .asset-selection-btn[data-asset="XRP"] img.asset-icon {
        filter: brightness(0) invert(1) !important;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       Expiry Period - Compact Dropdown Style
       ───────────────────────────────────────────────────────────────────────── */
    .expiry-filter-section {
        display: none !important;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       Hide Original Strike and Amount Sections
       ───────────────────────────────────────────────────────────────────────── */
    #basic-view-container,
    .strike-section-box,
    .select-amount-section,
    #advanced-view-container {
        display: none !important;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       Hide Trade Preview Sidebar on Mobile
       ───────────────────────────────────────────────────────────────────────── */
    .trade-preview-sidebar,
    #trade-preview-sidebar-anchor,
    .trade-vertical-divider,
    .trade-panel-preview {
        display: none !important;
    }

    /* Reuse the shared picker so mobile and desktop select from one state. */
    .trade-title-row {
        display: flex !important;
        align-items: center;
        min-height: 44px;
        padding: 0.25rem 0.5rem 0.35rem;
    }

    .trade-asset-title {
        font-size: 1rem;
    }

    .trade-title-logo {
        width: 20px;
        height: 20px;
    }

    .trade-price-condition {
        display: none !important;
    }

    .asset-picker-btn {
        min-height: 44px;
        padding: 0 0.35rem;
    }

    .asset-sidebar {
        width: 100% !important;
        border-right: none !important;
        flex-direction: row !important;
        position: relative !important;
        overflow: visible !important;
    }

    .asset-sidebar .asset-selection-buttons {
        flex-direction: row !important;
    }

    .asset-sidebar .asset-selection-btn {
        padding: 0.5rem 0.4rem !important;
    }

    .asset-slide-indicator {
        display: none !important;
    }

    .trade-panel-main-inner {
        flex-direction: column !important;
    }

    .trade-unified-layout {
        height: auto !important;
        overflow: visible !important;
    }

    .trade-content {
        padding: 0 !important;
        overflow-y: visible !important;
    }

    /* ─────────────────────────────────────────────────────────────────────────
       View Controls (BASIC/ADVANCED toggle)
       ───────────────────────────────────────────────────────────────────────── */
    .view-controls-section-below {
        display: none !important;
    }
}

/* =============================================================================
   MOBILE PORTFOLIO — one column of the desktop DOM, not a second build.
   ============================================================================= */
@media (max-width: 991px) {
    #portfolio-section {
        padding: 16px 0 calc(76px + env(safe-area-inset-bottom, 0px)) !important;
        background: var(--background) !important;
    }

    /* Mobile navigation writes display inline. Do not force this section into
       the document while Trade, Scores, or Referrals is active. */
    #portfolio-section[style*="display: block"],
    #portfolio-section[style*="display:block"] { display: block !important; }

    #portfolio-section .pf-wrap {
        width: 100%;
        padding: 0 12px;
    }

    #portfolio-section .pf-head,
    #portfolio-section .pf-head-r,
    #portfolio-section .pf-filters {
        align-items: stretch;
    }

    #portfolio-section .pf-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        margin-bottom: 12px;
    }

    #portfolio-section .pf-title { font-size: var(--fs-fig); }
    #portfolio-section .pf-head-r { display: contents; }
    #portfolio-section .pf-head-r > .pf-btn { min-width: 40px; min-height: 40px; }
    #portfolio-section .pf-head-r > .pf-btn:not(.pf-btn-pri) { display: none; }
    #portfolio-section .pf-head-r > .pf-btn-pri { grid-column: 2; grid-row: 1; }

    #portfolio-section .pf-filters {
        grid-column: 1 / -1;
        padding-bottom: 2px;
    }

    #portfolio-section .pf-filter { flex: 0 0 auto; }
    #portfolio-section .pf-filter-btn { min-height: 40px; }

    #portfolio-section .pf-band {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px;
    }

    #portfolio-section .pf-rail { gap: 12px; }
    #portfolio-section .pf-metrics {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
        padding: 6px 12px;
    }
    #portfolio-section .pf-metric { display: block; padding: 9px 4px; }
    #portfolio-section .pf-metric-v { margin-top: 3px; text-align: left; }

    #portfolio-section .pf-chart {
        min-height: 340px;
        padding: 12px;
    }
    #portfolio-section .pf-chart-top { align-items: flex-start; }
    #portfolio-section .pf-chart-note,
    #portfolio-section .pf-legend { display: none; }
    #portfolio-section .pf-chart-ctl { flex-wrap: wrap; justify-content: flex-end; }
    #portfolio-section .pf-view,
    #portfolio-section .pf-chip { min-height: 36px; }
    #portfolio-section .pf-plot { min-height: 180px; }

    #portfolio-section .pf-tabs {
        display: block;
        margin-top: 12px;
        padding: 0;
        overflow: hidden;
    }
    #portfolio-section .pf-tabstrip {
        overflow-x: auto;
        border-bottom: 1px solid var(--border-color);
    }
    #portfolio-section .pf-tab {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 12px 10px 10px;
        font-size: var(--fs-ui);
        white-space: nowrap;
    }
    #portfolio-section .pf-tab-split { margin: 0 2px; }
    #portfolio-section .pf-tools {
        min-height: 48px;
        padding: 6px 10px;
        overflow-x: auto;
    }
    #portfolio-section .pf-tool { min-height: 36px; white-space: nowrap; }

    /* No `min-width` and no side scroll here: the later card pass sets
       `overflow: visible` and `min-width: 0` on both the pane and its tables,
       so a fixed 680px track was dead and only made the page scroll wide. */
    #portfolio-section .pf-pane table { margin: 0; }
    #portfolio-section .pf-blank { align-items: flex-start; flex-direction: column; }

    #portfolio-section .pf-btn:focus-visible,
    #portfolio-section .pf-tab:focus-visible,
    #portfolio-section .pf-tool:focus-visible,
    #portfolio-section .pf-filter-btn:focus-visible,
    #portfolio-section .pf-view:focus-visible,
    #portfolio-section .pf-chip:focus-visible {
        outline: 2px solid var(--mobile-focus-ring);
        outline-offset: 2px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Mobile Trade Card - Combined Direction + Strike + Amount
   ───────────────────────────────────────────────────────────────────────────── */
.mobile-trade-card {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0.25rem 0.5rem 1rem !important;
    margin: 0 -0.5rem !important;
    box-shadow: none !important;
    overflow: visible !important;
}

.mobile-trade-card.trading-disabled {
    position: relative;
}

.mobile-trade-card.trading-disabled > * {
    pointer-events: none !important;
    opacity: 0.32;
    filter: blur(2.2px);
    transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Combined Header (Tabs + Expiry) */
.mobile-trade-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    gap: 0.5rem;
    position: relative;
    z-index: 100;
}

.mobile-expiry-buttons {
    width: 100%;
    display: flex;
    gap: 0.34rem;
    justify-content: center;
}

.mobile-expiry-label {
    display: none;
}

/* merge with rule above */

.mobile-expiry-btn {
    flex: 1;
    background: rgba(20, 28, 40, 0.5);
    border: none;
    border-radius: 17px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.38rem 0.64rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.mobile-expiry-btn.active {
    background: rgba(56, 152, 236, 0.85);
    border-color: transparent;
    color: #fff;
}

.expiry-btn-countdown {
    font-size: 0.68rem;
    font-weight: 400;
    opacity: 0.6;
}

.mobile-expiry-btn.active .expiry-btn-countdown {
    opacity: 0.8;
}

/* Direction Buttons - Compact */
.mobile-direction-row {
    display: flex;
    gap: 0.42rem;
    margin-bottom: 0.64rem;
}

.mobile-direction-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.34rem;
    padding: 0.51rem 0.64rem;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
}

.mobile-direction-btn.call,
.mobile-direction-btn.put,
.mobile-direction-btn.range {
    background: rgba(255, 255, 255, 0.07);
}

.mobile-direction-btn.call:not(.active) > span:not(.direction-btn-count):not(.range-btn-count),
.mobile-direction-btn.call:not(.active) > i,
.mobile-direction-btn.put:not(.active) > span:not(.direction-btn-count):not(.range-btn-count),
.mobile-direction-btn.put:not(.active) > i,
.mobile-direction-btn.range:not(.active) > span:not(.direction-btn-count):not(.range-btn-count),
.mobile-direction-btn.range:not(.active) > i {
    color: rgba(255, 255, 255, 0.55) !important;
}

.mobile-direction-btn:not(.active) .direction-btn-count,
.mobile-direction-btn.range:not(.active) .range-btn-count {
    background: rgba(255, 255, 255, 0.2) !important;
}

.direction-btn-count,
.mobile-direction-btn.range .range-btn-count {
    color: #fff !important;
}

.mobile-direction-btn.call.active {
    background: rgba(34, 197, 94, 0.35);
}

.mobile-direction-btn.call.active > span:not(.direction-btn-count),
.mobile-direction-btn.call.active > i {
    color: var(--call-green) !important;
}

.mobile-direction-btn.put.active {
    background: rgba(239, 68, 68, 0.35);
}

.mobile-direction-btn.put.active > span:not(.direction-btn-count),
.mobile-direction-btn.put.active > i {
    color: var(--put-red) !important;
}

.mobile-direction-btn.range.active {
    background: rgba(168, 85, 247, 0.35);
}

.mobile-direction-btn.range.active > span:not(.range-btn-count),
.mobile-direction-btn.range.active > i {
    color: var(--ranger-purple) !important;
}

.mobile-direction-btn.disabled,
.mobile-direction-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* Wave animation canvas */
.mobile-direction-btn canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.6;
}

.mobile-direction-btn i {
    font-size: 0.68rem;
    position: relative;
    z-index: 2;
}

.mobile-direction-btn.call i {
    color: var(--call-green);
}

.mobile-direction-btn.put i {
    color: var(--put-red);
}

.mobile-direction-btn.range i {
    color: var(--ranger-purple);
}

.mobile-direction-btn span {
    font-size: 0.72rem;
    font-weight: 700;
    position: relative;
    z-index: 2;
}

.mobile-direction-btn.call span {
    color: var(--call-green);
}

.mobile-direction-btn.put span {
    color: var(--put-red);
}

.mobile-direction-btn.range span {
    color: var(--ranger-purple);
}

.direction-btn-count,
.mobile-direction-btn.range .range-btn-count {
    color: #fff !important;
    font-size: 9px;
    font-weight: 700;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    padding: 0;
    position: relative;
    z-index: 2;
    line-height: 15px;
    box-sizing: border-box;
    flex-shrink: 0;
}

.direction-btn-count.call-count {
    background: var(--call-green);
}

.direction-btn-count.put-count {
    background: var(--put-red);
}

.mobile-direction-btn.range .range-btn-count {
    background: var(--ranger-purple);
}

/* (Expiry dropdown removed - now using inline buttons) */

/* ─────────────────────────────────────────────────────────────────────────────
   Strike Price Scroll Picker - High Class 3D Design
   ───────────────────────────────────────────────────────────────────────────── */
.mobile-strike-section {
    margin-bottom: 0.15rem;
}

.mobile-range-section {
    margin-bottom: 0.15rem;
}

.mobile-strike-label {
    display: none;
}

.mobile-prediction-prompt {
    font-size: 0.64rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: left;
    margin-bottom: 0.34rem;
    letter-spacing: 0.3px;
}

.mobile-strike-picker {
    position: relative;
    height: 170px;
    overflow: hidden;
    border-radius: 19px;
    background: #0a0a0a;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Scroll Arrow Indicators - REMOVED per user request
   ───────────────────────────────────────────────────────────────────────────── */
/* Up/Down Arrows removed */

/* Curved vertical line guide on left side */
.mobile-strike-picker::before {
    content: '';
    position: absolute;
    left: 12%;
    top: 5%;
    bottom: 5%;
    width: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    z-index: 4;
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}

/* Center Highlight Pill */
.strike-picker-highlight {
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 54px;
    background: rgba(34, 197, 94, 0.35);
    border-radius: 15px;
    pointer-events: none;
    z-index: 5;
    border: none;
    box-shadow: none;
    overflow: hidden;
}

.strike-picker-highlight .wave-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.7;
    border-radius: inherit;
}

/* Put Mode Red Variant */
.strike-picker-highlight.put-mode {
    background: rgba(239, 68, 68, 0.35);
    border: none;
    box-shadow: none;
}

/* Range Mode Purple Variant */
.strike-picker-highlight.range-mode {
    background: rgba(168, 85, 247, 0.35);
    border: none;
    box-shadow: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Strike Arrow Indicator (Pill with pointed right edge)
   ───────────────────────────────────────────────────────────────────────────── */
.strike-arrow-indicator {
    position: absolute;
    top: 50%;
    left: 12%;
    transform: translate(-50%, -50%);
    z-index: 25;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* Pill body (rounded left, flat right to join arrow) */
.strike-arrow-indicator::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 16px;
    background: white;
    top: 50%;
    left: -11px;
    transform: translateY(-50%);
    border-radius: 3px 0 0 3px;
}

/* Arrow head pointing right */
.strike-arrow-indicator::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 9px solid white;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

/* Remove old pseudo-element styles on highlight */
.strike-picker-highlight::after {
    display: none;
}

.strike-picker-highlight.put-mode::after {
    display: none;
}

.strike-picker-highlight::before {
    display: none;
}

/* Scroll list */
.strike-picker-list {
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    padding: 58px 0;
    scrollbar-width: none;
    position: relative;
    z-index: 15;
}

.strike-picker-list::-webkit-scrollbar {
    display: none;
}

/* Strike item */
.strike-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 54px;
    scroll-snap-align: center;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0.35;
    transform: scale(0.82);
    filter: blur(0px);
    gap: 0px;
    padding-left: 10%;
}

.strike-picker-item.selected {
    opacity: 1;
    transform: scale(1.08);
    filter: blur(0);
}

/* Price Styling */
.strike-picker-item .strike-price {
    font-size: 1.19rem;
    font-weight: 700;
    color: rgba(180, 190, 210, 0.8);
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-family: var(--sans);
    letter-spacing: -0.5px;
}

.strike-picker-item.selected .strike-price {
    color: #ffffff;
    font-size: 1.49rem;
    font-weight: 800;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* "Price Level" label above selected price */
.strike-picker-item .strike-label {
    display: none;
}

.strike-picker-item.selected .strike-label {
    display: block;
    font-size: 0.55rem;
    font-weight: 500;
    font-style: italic;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.5px;
    margin-bottom: 0;
    line-height: 1;
}

/* Change/Pct Styling */
.strike-picker-item .strike-change {
    font-size: 0.55rem;
    font-weight: 500;
    margin-top: 0;
    color: rgba(180, 190, 210, 0.5);
}

.strike-picker-item.selected .strike-change {
    font-size: 0.64rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85) !important;
}

.strike-picker-item .strike-change.positive {
    color: var(--call-green);
}

.strike-picker-item .strike-change.negative {
    color: var(--put-red);
}

.strike-picker-item.selected::after {
    display: none;
}

.strike-picker-item.selected::before {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Range Picker - Vertical Scroll (mirrors strike picker, purple theme)
   ───────────────────────────────────────────────────────────────────────────── */
.mobile-range-picker {
    position: relative;
    height: 170px;
    overflow: hidden;
    border-radius: 19px;
    background: #0a0a0a;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 18%, black 82%, transparent 100%);
}

.mobile-range-picker::before {
    content: '';
    position: absolute;
    left: 12%;
    top: 5%;
    bottom: 5%;
    width: 2px;
    background: rgba(168, 85, 247, 0.15);
    border-radius: 2px;
    z-index: 4;
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}

.range-picker-highlight {
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 54px;
    background: rgba(168, 85, 247, 0.19);
    border-radius: 15px;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.range-picker-highlight .wave-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.7;
    border-radius: inherit;
    border: none;
    box-shadow: none;
}

.range-arrow-indicator {
    position: absolute;
    top: 50%;
    left: 12%;
    transform: translate(-50%, -50%);
    z-index: 25;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.range-arrow-indicator::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 16px;
    background: white;
    top: 50%;
    left: -11px;
    transform: translateY(-50%);
    border-radius: 3px 0 0 3px;
}

.range-arrow-indicator::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 9px solid white;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.range-picker-list {
    height: 100%;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    padding: 58px 0;
    scrollbar-width: none;
    position: relative;
    z-index: 15;
}

.range-picker-list::-webkit-scrollbar {
    display: none;
}

.range-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 54px;
    scroll-snap-align: center;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    opacity: 0.35;
    transform: scale(0.82);
    gap: 2px;
    padding-left: 10%;
}

.range-picker-item.selected {
    opacity: 1;
    transform: scale(1.08);
}

.range-item-multiplier {
    font-size: 0.55rem;
    font-weight: 600;
    font-style: italic;
    color: rgba(168, 85, 247, 0.6);
    letter-spacing: 0.5px;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.range-item-payout-label {
    font-style: normal;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
}

.range-picker-item.selected .range-item-multiplier {
    color: #c084fc;
    font-size: 0.6rem;
    font-weight: 700;
}

.range-picker-item.selected .range-item-payout-label {
    color: rgba(255, 255, 255, 0.55);
}

.range-item-zone {
    font-size: 1.19rem;
    font-weight: 700;
    color: rgba(180, 190, 210, 0.8);
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    font-family: var(--sans);
    letter-spacing: -0.5px;
}

.range-picker-item.selected .range-item-zone {
    color: #ffffff;
    font-size: 1.32rem;
    font-weight: 800;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.range-item-spread {
    font-size: 0.55rem;
    font-weight: 500;
    color: rgba(180, 190, 210, 0.5);
    margin-top: 0;
}

.range-picker-item.selected .range-item-spread {
    font-size: 0.64rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

.range-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
    text-align: center;
    padding: 0 2rem;
}

.range-empty-state p {
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Amount Slider - Compact
   ───────────────────────────────────────────────────────────────────────────── */
.mobile-amount-section {
    margin-bottom: 0.64rem;
    padding-top: 0.42rem;
    border-top: none;
}

.mobile-amount-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.34rem;
    padding: 0.3rem 0.55rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid transparent;
    border-radius: 9px;
    transition: border-color 0.25s ease;
}

.mobile-amount-header.exceeds-balance {
    border-color: rgba(239, 68, 68, 0.8);
}

.mobile-amount-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-amount-value {
    font-size: 0.89rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mobile-amount-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    margin-bottom: 0.64rem;
}

.mobile-amount-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    border: 2px solid var(--background);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mobile-amount-presets {
    display: flex;
    gap: 0.25rem;
}

.mobile-amount-preset {
    flex: 1;
    padding: 0.25rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--text-muted);
    font-size: 0.61rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.mobile-amount-preset:hover,
.mobile-amount-preset.active {
    background: rgba(255, 255, 255, 0.1);
    border-color: transparent;
    color: var(--text-primary);
}

.mobile-amount-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.mobile-balance-text {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 500;
}

/* Range mode - purple gradient slider to match Range theme */
.mobile-amount-section.range-mode .mobile-amount-slider {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-amount-section.range-mode .mobile-amount-slider::-webkit-slider-thumb {
    background: linear-gradient(135deg, var(--ranger-purple), #e879f9);
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.5);
}

.mobile-amount-section.range-mode .mobile-amount-slider::-moz-range-thumb {
    background: linear-gradient(135deg, var(--ranger-purple), #e879f9);
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.5);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Trade Info Row - Integrated Preview
   ───────────────────────────────────────────────────────────────────────────── */
.mobile-trade-info {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    padding: 0.42rem 0.55rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 9px;
    margin-bottom: 0.64rem;
}

.mobile-trade-info-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.mobile-trade-info-item .info-label {
    font-size: 0.51rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mobile-trade-info-item .info-value {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Trade Button - Blue-Yellow Gradient Theme
   ───────────────────────────────────────────────────────────────────────────── */
.mobile-trade-btn {
    width: 100%;
    padding: 0.72rem;
    border-radius: 999px;
    border: none;
    font-size: 0.94rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 0.42px;
    position: relative;
    overflow: hidden;
}

/* Base - default to Call (green) theme; .call, .put, .range override */
.mobile-trade-btn {
    background: rgba(34, 197, 94, 0.35);
    color: #fff;
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.mobile-trade-btn .wave-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.6;
    border-radius: inherit;
}

.mobile-trade-btn span {
    position: relative;
    z-index: 2;
}

/* CALL - green theme (matches direction btn) */
.mobile-trade-btn.call {
    background: rgba(34, 197, 94, 0.35);
    color: #fff;
    font-weight: 700;
    box-shadow: none;
}

/* PUT - red theme (matches direction btn) */
.mobile-trade-btn.put {
    background: rgba(239, 68, 68, 0.35);
    color: #fff;
    font-weight: 700;
    box-shadow: none;
}

/* RANGE - purple theme (matches direction btn) */
.mobile-trade-btn.range {
    background: rgba(168, 85, 247, 0.35);
    color: #fff;
    font-weight: 700;
    box-shadow: none;
}

.mobile-trade-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
    background: rgba(100, 116, 139, 0.25);
    color: #94a3b8;
}

.mobile-trade-btn:disabled .wave-canvas {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Advanced View - Compact 3-Column Grid
   ───────────────────────────────────────────────────────────────────────────── */
.mobile-advanced-grid {
    display: none;
}

.mobile-advanced-grid.show {
    display: block;
}

.mobile-grid-header {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.9fr 0.7fr 0.7fr;
    gap: 0.25rem;
    padding: 0.4rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px 8px 0 0;
    margin-bottom: 1px;
}

.mobile-grid-header span {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    text-align: center;
}

.mobile-grid-body {
    max-height: 200px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0 0 8px 8px;
}

.mobile-grid-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.9fr 0.7fr 0.7fr;
    gap: 0.25rem;
    padding: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

/* Default CALL row */
.mobile-grid-row.call {
    background: rgba(34, 197, 94, 0.15);
    border-left: 2px solid transparent;
}

/* Default PUT row */
.mobile-grid-row.put {
    background: rgba(239, 68, 68, 0.15);
    border-left: 2px solid transparent;
}

.mobile-grid-row:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Selected CALL row */
.mobile-grid-row.call.selected {
    background: rgba(34, 197, 94, 0.35) !important;
    border-left: 2px solid #22c55e;
    box-shadow: none;
}

/* Selected PUT row */
.mobile-grid-row.put.selected {
    background: rgba(239, 68, 68, 0.35) !important;
    border-left: 2px solid #ef4444;
    box-shadow: none;
}

/* Legacy selector for backward compatibility */
.mobile-grid-row.selected {
    background: rgba(34, 197, 94, 0.35);
    border-left: 2px solid #22c55e;
}

.mobile-grid-row span {
    font-size: 0.65rem;
    text-align: center;
}

.mobile-grid-row .strike {
    font-weight: 600;
    color: var(--text-primary);
}

.mobile-grid-row .premium {
    color: var(--yellow-primary);
}

.mobile-grid-row .leverage {
    color: var(--text-secondary);
}

.mobile-grid-row .delta,
.mobile-grid-row .iv {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────────────
   View Toggle - Blue-Yellow Gradient Theme
   ───────────────────────────────────────────────────────────────────────────── */
.mobile-view-toggle {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.mobile-view-btn {
    flex: 1;
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.mobile-view-btn.active {
    background: linear-gradient(135deg, rgba(125, 211, 252, 0.2), rgba(253, 224, 71, 0.15));
    border: none;
    color: #fff;
    box-shadow: 0 0 12px rgba(125, 211, 252, 0.25), 0 0 16px rgba(253, 224, 71, 0.1);
}

/* Gradient border using pseudo-element - only for active state */
.mobile-view-btn.active::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 1.5px;
    background: linear-gradient(135deg, #7dd3fc, #a5f3fc, #fef3c7, #fde68a);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Mobile Bottom Navigation
   ───────────────────────────────────────────────────────────────────────────── */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    background: var(--mobile-nav-bg);
    border-top: 1px solid var(--mobile-panel-border);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.35);
    padding: 0.2rem 0;
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 1000;
}

.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5px;
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: 0.1rem 0.25rem;
    background: transparent;
    border: none;
    color: var(--mobile-nav-text);
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.mobile-nav-item.active {
    color: var(--mobile-nav-active);
}

.mobile-nav-item.active i {
    color: var(--mobile-nav-active);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
    transform: scale(1.12);
}

.mobile-nav-item.active span {
    color: var(--mobile-nav-active);
    font-weight: 800;
    letter-spacing: 0.03em;
}

.mobile-nav-item i {
    font-size: 1.06rem;
    /* line-height: 1; */
    color: var(--mobile-nav-text);
}

.mobile-nav-item span {
    font-size: var(--fs-ui);
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: var(--mobile-nav-text);
}

.mobile-nav-item:focus-visible {
    outline: 2px solid var(--mobile-focus-ring);
    outline-offset: -2px;
    border-radius: var(--r-input);
}

/* Trollbox nav item uses the same style as other nav items — no special overrides needed */

/* Hide floating trollbox toggle on mobile – it's now in the navbar */
@media (max-width: 991px) {
    #trollbox-toggle.trollbox-toggle {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Other Sections - Responsive Tables & Compact Layout
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {

    /* ═══════════════════════════════════════════════════════════════════
       CRITICAL: Remove ALL top padding/margins on Positions/History/Scores
       Cards should start immediately below the header with NO gap
       ═══════════════════════════════════════════════════════════════════ */

    /* Ensure Header doesn't push content down and aligns with app content */
    header,
    header .navbar {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Ensure Main has no top spacing */
    main {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Target Sections - Small top padding to match Trade page spacing */
    #positions-section,
    #history-section,
    #scoreboard-section {
        padding: 0 0.5rem !important;
        padding-top: 0.75rem !important;
        margin-top: 0 !important;
        border-top: none !important;
        margin-bottom: 70px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: calc(100vh - 70px) !important;
    }

    /* Target Containers inside Sections - zero padding for consistent card widths */
    #positions-section>.container,
    #history-section>.container,
    #scoreboard-section>.container,
    #positions-section>.container-fluid,
    #history-section>.container-fluid,
    #scoreboard-section>.container-fluid {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* First Child of Container - Zero Top Margin */
    #positions-section>.container> :first-child,
    #history-section>.container> :first-child,
    #scoreboard-section>.container> :first-child,
    #positions-section>.container-fluid> :first-child,
    #history-section>.container-fluid> :first-child,
    #scoreboard-section>.container-fluid> :first-child {
        margin-top: 0 !important;
        /* Note: We allow padding-top if needed for internal spacing, but usually we want it flush */
    }

    /* Specific Elements often found first */
    #positions-section .user-positions-table-container,
    #scoreboard-section .weekly-competition-box,
    #history-section .history-overview {
        margin-top: 0 !important;
    }

    /* Remove empty space from row/col - no gaps at all */
    #positions-section .row,
    #history-section .row,
    #scoreboard-section .row,
    #positions-section .col,
    #history-section .col,
    #scoreboard-section .col {
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
       POSITIONS TOP TABS - My Positions / All Positions toggle
       ═══════════════════════════════════════════════════════════════════ */
    .positions-top-tabs {
        display: flex !important;
        gap: 1.2rem !important;
        align-items: center !important;
        margin-bottom: 0.6rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .positions-top-tab {
        padding: 0 !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        border: none !important;
        background: transparent !important;
        color: rgba(255, 255, 255, 0.35) !important;
        border-radius: 0 !important;
        cursor: pointer !important;
        transition: color 0.2s ease !important;
        white-space: nowrap !important;
    }

    .positions-top-tab.active {
        color: #fff !important;
        font-weight: 700 !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
       EMPTY STATE BOXES - Uniform rounded cards matching position cards
       ═══════════════════════════════════════════════════════════════════ */
    .no-positions-message,
    .no-positions-message td,
    #no-open-positions-data {
        background: rgba(30, 41, 59, 0.6) !important;
        border: none !important;
        border-radius: 10px !important;
        padding: 0.75rem 1rem !important;
        text-align: center !important;
        color: var(--text-muted) !important;
        font-size: 0.72rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #no-history-message {
        background: rgba(30, 41, 59, 0.6);
        border: none;
        border-radius: 10px;
        padding: 0.75rem 1rem;
        text-align: center;
        color: var(--text-muted);
        font-size: 0.72rem;
        align-items: center;
        justify-content: center;
    }

    /* ═══════════════════════════════════════════════════════════════════
       POSITIONS TAB - Remove ALL gaps between cards
       ═══════════════════════════════════════════════════════════════════ */

    /* User positions table container - TRANSPARENT */
    #positions-section .user-positions-table-container {
        margin: 0 0 0.5rem 0 !important;
        padding: 0 !important; /* Remove padding */
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #positions-section .user-positions-table-container h2 {
        margin: 0 0 0.4rem 0 !important;
        padding: 0 !important;
        font-size: 0.9rem !important;
    }

    /* Active Positions Leaderboard - remove the 3rem margin-top inline style
       and zero side padding so cards align with My Positions card width */
    #positions-section .professional-asset-header {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    #positions-section .professional-asset-header[style*="margin-top"] {
        margin-top: 0 !important;
    }

    #positions-section .positions-wrapper {
        background: transparent !important;
        border-radius: 0 !important;
    }

    #positions-section .positions-ticker-bar {
        display: none !important;
    }

    #positions-section .positions-inner-content {
        padding: 0 !important;
    }

    #positions-section .open-positions-table-container {
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    #positions-section .open-positions-table-container h2 {
        display: none !important;
    }

    #positions-section .open-positions-info {
        font-size: 0.55rem !important;
        padding: 0.3rem 0.4rem !important;
        margin-bottom: 0.3rem !important;
        background: rgba(59, 130, 246, 0.1) !important;
        border: 1px solid rgba(59, 130, 246, 0.2) !important;
        border-radius: 6px !important;
        line-height: 1.4 !important;
    }

    .open-positions-stats {
        gap: 0.25rem !important;
        padding: 0.4rem 0.5rem !important;
        margin: 0 0 0.4rem 0 !important;
        overflow-x: auto !important;
    }
    .ops-stat {
        min-width: 42px !important;
        padding: 0.15rem 0.3rem !important;
    }
    .ops-stat-value {
        font-size: var(--fs-stat) !important;
    }
    .ops-stat-label {
        font-size: var(--fs-micro) !important;
        letter-spacing: var(--tr-caps) !important;
    }
    .ops-sep {
        height: 22px !important;
    }

    /* Sort controls compact - keep reload on same line as tabs */
    #positions-section .sort-controls {
        margin-bottom: 0.3rem !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.3rem !important;
        border-bottom: none !important;
        padding: 0 !important;
        background: transparent !important;
    }

    #positions-section .sort-tabs {
        display: flex !important;
        gap: 0.35rem !important;
        flex: 1 !important;
        border-bottom: none !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        align-items: center !important;
    }

    #positions-section .sort-tabs::-webkit-scrollbar {
        display: none !important;
    }

    #positions-section .sort-tab {
        flex: 1 !important;
        min-width: 0 !important;
        height: 30px !important;
        padding: 0 0.64rem !important;
        font-size: 0.68rem !important;
        font-weight: 600 !important;
        border-radius: 17px !important;
        background: rgba(20, 28, 40, 0.5) !important;
        border: none !important;
        border-bottom: none !important;
        color: rgba(255, 255, 255, 0.5) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    #positions-section .sort-tab::before {
        display: none !important;
    }

    #positions-section .sort-tab.active {
        background: rgba(56, 152, 236, 0.85) !important;
        color: #fff !important;
        border: none !important;
    }

    #positions-section .refresh-positions-btn {
        padding: 0 !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 0.72rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        line-height: 1 !important;
        border-radius: 50% !important;
        background: rgba(20, 28, 40, 0.5) !important;
        border: none !important;
        color: rgba(255, 255, 255, 0.5) !important;
        transition: all 0.2s ease !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* Beautify View Tx and View Option Buttons */
    .view-tx-btn,
    .view-option-btn {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.65rem !important;
        border-radius: 6px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: var(--text-muted) !important;
        transition: all 0.2s ease !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        font-weight: 600 !important;
    }

    .view-tx-btn:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: var(--text-primary) !important;
        border-color: rgba(255, 255, 255, 0.3) !important;
    }

    .view-option-btn:hover {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(147, 197, 253, 0.1)) !important;
        border-color: #3b82f6 !important;
        color: #fff !important;
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.3) !important;
    }

    /* Hide chart elements on mobile */
    #chart-container,
    #tradingview_chart,
    .chart-wrapper,
    .tradingview-widget-container {
        display: none !important;
    }

    /* ─────────────────────────────────────────────────────────────────────
       Section visibility is managed entirely by JS (mobile-ui.js).
       Sections are now outside <main>, so hiding main hides only trade.
       No :has() hacks needed.
       ───────────────────────────────────────────────────────────────────── */

    /* ─────────────────────────────────────────────────────────────────────
       Trollbox - Move above bottom nav
       ───────────────────────────────────────────────────────────────────── */
    .trollbox-container,
    #trollbox-container,
    .trollbox-wrapper,
    .trollbox-widget,
    #trollbox-widget,
    .trollbox-widget.minimized {
        bottom: calc(53px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 12px 12px 0 0 !important;
    }

    /* Trollbox toggle button */
    .trollbox-toggle-btn,
    button[data-toggle="trollbox"],
    .chat-toggle-btn,
    .trollbox-toggle,
    #trollbox-toggle {
        bottom: calc(53px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* ─────────────────────────────────────────────────────────────────────
       Positions/History/Scores - Compact Layout with small top spacing
       matching the Trade page gap (~0.75rem)
       ───────────────────────────────────────────────────────────────────── */
    #positions-section,
    #history-section,
    #scoreboard-section {
        margin-top: 0 !important;
    }

    #positions-section>*:first-child,
    #history-section>*:first-child,
    #scoreboard-section>*:first-child {
        margin-top: 0 !important;
    }

    /* Remove gaps between cards - more compact and CONSISTENT WIDTH */
    #positions-section .card,
    #history-section .card,
    #scoreboard-section .card {
        margin-bottom: 0.5rem !important;
        padding: 0 !important; /* Content padding handled by rows */
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    #positions-section .card-body,
    #history-section .card-body,
    #scoreboard-section .card-body {
        padding: 0.5rem !important;
        width: 100% !important;
    }

    /* First card - no margin top */
    #positions-section .card:first-of-type,
    #history-section .card:first-of-type,
    #scoreboard-section .card:first-of-type,
    #positions-section .user-positions-table-container,
    #history-section .user-positions-table-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Container padding removal */
    #positions-section .container,
    #history-section .container,
    #scoreboard-section .container {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
       HISTORY TAB - Remove top gap, compact stats
       ═══════════════════════════════════════════════════════════════════ */

    /* History section title - flush at top */
    #history-section>.container>h2:first-of-type {
        margin: 0 0 0.4rem 0 !important;
        padding: 0.4rem 0 0 0 !important;
        font-size: 0.95rem !important;
    }

    /* History stats row - remove mb-4 gap */
    #history-section #history-overview,
    #history-section .row.mb-4:first-of-type {
        margin-bottom: 0.5rem !important;
        margin-top: 0 !important;
    }

    /* History PnL card - ensure same width */
    #history-section .row.mb-4:nth-of-type(2) {
        margin-bottom: 0.5rem !important;
        width: 100% !important;
    }

    #history-section .row.mb-4:nth-of-type(2)>.col-12 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    #history-section .row.mb-4:nth-of-type(2)>.col-12>div {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
    }

    /* History - Combine Total PnL and Paid into one row */
    #history-section .stats-row,
    #history-section .trade-stats-container {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.25rem !important;
        margin-bottom: 0.2rem !important;
        margin-top: 0 !important;
    }

    #history-section .stats-card,
    #history-section .stat-card {
        flex: 1 !important;
        padding: 0.5rem !important;
        margin: 0 !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.025) !important;
        border: 1px solid rgba(255, 255, 255, 0.04) !important;
        box-shadow: none !important;
    }

    /* Compact table headers/cells - no top padding */
    #positions-section h2,
    #history-section h2,
    #scoreboard-section h2 {
        font-size: 0.9rem !important;
        margin-bottom: 0.2rem !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Positions leaderboard compact - no top margin */
    .open-positions-table-container,
    .active-positions-leaderboard {
        margin-top: 0 !important;
    }

    .open-positions-table-container h2,
    .active-positions-leaderboard h2 {
        font-size: 0.85rem !important;
        margin-bottom: 0.2rem !important;
        margin-top: 0 !important;
    }

    /* Info text smaller */
    .open-positions-table-container p,
    .active-positions-leaderboard p,
    #positions-section .alert,
    #history-section .alert {
        font-size: 0.65rem !important;
        padding: 0.25rem !important;
        margin-bottom: 0.2rem !important;
        margin-top: 0 !important;
    }

    /* Sort buttons smaller */
    .sort-buttons,
    .sort-tabs {
        gap: 0.35rem !important;
        margin-bottom: 0.3rem !important;
    }

    .sort-buttons button,
    .sort-tabs button {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.55rem !important;
    }

    /* ─────────────────────────────────────────────────────────────────────
       History - Fixed Mobile Layout for Stats Cards
       ───────────────────────────────────────────────────────────────────── */

    /* Main container reset */
    #history-section .container {
        padding: 0.5rem !important;
    }

    /* History header row - title left, date toggles right */
    #history-section .history-header-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0.5rem !important;
        margin-bottom: 0.75rem !important;
        flex-wrap: wrap !important;
    }

    #history-section .history-header-row h2 {
        margin: 0 !important;
        font-size: 1.1rem !important;
        color: var(--text-primary) !important;
    }

    /* History date toggles - pill design matching sort-by buttons */
    #history-section .history-date-toggles {
        display: flex !important;
        gap: 0.34rem !important;
        flex-shrink: 0 !important;
    }

    #history-section .date-toggle {
        flex: 1 !important;
        padding: 0.38rem 0.64rem !important;
        font-size: 0.68rem !important;
        font-weight: 600 !important;
        border: none !important;
        background: rgba(20, 28, 40, 0.5) !important;
        color: rgba(255, 255, 255, 0.5) !important;
        border-radius: 17px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    #history-section .date-toggle:hover {
        color: var(--text-primary) !important;
    }

    #history-section .date-toggle.active {
        font-weight: 600 !important;
        color: #fff !important;
        background: rgba(56, 152, 236, 0.85) !important;
    }

    /* Hide Date Range filter column on mobile - replaced by header toggles */
    #history-section .history-date-filter-col {
        display: none !important;
    }

    /* History title - fallback when header row present */
    #history-section>.container>h2:first-of-type {
        font-size: 1.1rem !important;
        margin: 0 0 0.75rem 0 !important;
        color: var(--text-primary) !important;
    }

    /* Stats grid */
    .history-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.35rem !important;
        margin-bottom: 0.75rem !important;
        padding: 0 !important;
    }

    .history-stat-card {
        background: rgba(255, 255, 255, 0.025) !important;
        border: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 10px !important;
        padding: 0.4rem 0.35rem !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.1rem !important;
        min-width: 0 !important;
        text-align: center !important;
    }

    .history-stat-card-wide {
        grid-column: span 2 !important;
    }

    .history-stat-label {
        font-size: 0.5rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        color: rgba(255, 255, 255, 0.4) !important;
    }

    .history-stat-value {
        font-size: 0.78rem !important;
        font-weight: 700 !important;
        color: #fff !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .history-stat-value.hist-positive {
        color: var(--positive) !important;
    }

    .history-stat-value.hist-negative {
        color: var(--negative) !important;
    }

    /* Hide chart filter buttons */
    #history-section .pnl-period-btn {
        display: none !important;
    }

    /* Filter Button Styling - pill design matching sort-by buttons */
    #mobile-filter-btn {
        background: rgba(20, 28, 40, 0.5) !important;
        border: none !important;
        color: rgba(255, 255, 255, 0.5) !important;
        padding: 0.38rem 0.64rem !important;
        font-size: 0.68rem !important;
        box-shadow: none !important;
        width: auto !important;
        justify-content: flex-start !important;
        display: flex !important;
    }

    /* Target specific container for filter button */
    .history-filter-container {
        padding: 0 !important;
        margin-top: 0.5rem !important;
        justify-content: flex-start !important;
    }

    #mobile-filter-btn span {
        display: inline !important;
        font-size: 0.68rem !important;
        font-weight: 600 !important;
    }

    #mobile-filter-btn:active,
    #mobile-filter-btn:focus {
        background: rgba(20, 28, 40, 0.7) !important;
        color: #fff !important;
    }

    #mobile-filter-btn i {
        font-size: 0.68rem !important;
    }

    /* Filter Toggle Buttons (Pills) */
    .filter-toggle-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    .filter-toggle-btn {
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: var(--text-muted) !important;
        padding: 0.4rem 0.8rem !important;
        border-radius: 20px !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        transition: all 0.2s ease !important;
        flex: 0 0 auto !important;
    }

    .filter-toggle-btn.active {
        background: var(--primary) !important;
        color: white !important;
        border-color: var(--primary) !important;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4) !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
       FILTER MODAL - Bottom Sheet (matches trade confirm & wallet sheets)
       ═══════════════════════════════════════════════════════════════════ */
    #mobile-filter-modal .modal-dialog,
    #mobile-filter-modal .modal-dialog.modal-dialog-centered {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        display: block !important;
        align-items: unset !important;
        transform: translateY(100%) !important;
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    #mobile-filter-modal.show .modal-dialog,
    #mobile-filter-modal.show .modal-dialog.modal-dialog-centered {
        transform: translateY(0) !important;
    }

    #mobile-filter-modal .modal-content {
        border: none !important;
        border-radius: 20px 20px 0 0 !important;
        background: #141a23 !important;
        background-color: #141a23 !important;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5) !important;
        max-height: 85vh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        backdrop-filter: none !important;
    }

    #mobile-filter-modal .modal-body,
    #mobile-filter-modal .modal-header,
    #mobile-filter-modal .modal-footer {
        background: #141a23 !important;
        background-color: #141a23 !important;
    }

    #mobile-filter-modal .bottom-sheet-handle {
        display: flex;
        justify-content: center;
        padding: 10px 0 4px 0;
        cursor: grab;
        flex-shrink: 0;
    }

    #mobile-filter-modal .bottom-sheet-handle span {
        width: 36px;
        height: 4px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.2);
    }

    #mobile-filter-modal .modal-header {
        padding: 0.5rem 1.25rem 0.25rem !important;
        border: none !important;
    }

    #mobile-filter-modal .modal-title {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
    }

    #mobile-filter-modal .modal-body {
        padding: 0.5rem 1.25rem 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #mobile-filter-modal .modal-footer {
        padding: 0.75rem 1.25rem !important;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
        border: none !important;
    }

    #mobile-filter-modal .modal-footer .btn {
        background: rgba(56, 152, 236, 0.85) !important;
        border: none !important;
        border-radius: 17px !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        padding: 0.6rem !important;
    }

    /* Override global label hide for modal labels */
    #mobile-filter-modal .form-label {
        display: block !important;
        font-size: 0.7rem !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    /* Filter toggle pills inside modal - match expiry button style */
    #mobile-filter-modal .filter-toggle-btn {
        background: rgba(20, 28, 40, 0.5) !important;
        border: none !important;
        color: rgba(255, 255, 255, 0.5) !important;
        padding: 0.38rem 0.64rem !important;
        border-radius: 17px !important;
        font-size: 0.72rem !important;
        font-weight: 600 !important;
        box-shadow: none !important;
        transition: all 0.2s ease !important;
    }

    #mobile-filter-modal .filter-toggle-btn.active {
        background: rgba(56, 152, 236, 0.85) !important;
        color: #fff !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Stat label */
    #history-section #history-overview h5 {
        font-size: 0.45rem !important;
        margin-bottom: 0.2rem !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        line-height: 1.2 !important;
    }

    /* Stat value */
    #history-section #history-overview h3,
    #history-section #total-trades,
    #history-section #total-premium,
    #history-section #total-pnl {
        font-size: 0.9rem !important;
        margin: 0 !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    /* Beautified value accents for top history stats */
    #history-section #total-trades {
        color: #93c5fd !important;
        text-shadow: 0 0 10px rgba(147, 197, 253, 0.25);
    }

    #history-section #total-premium {
        color: #fbbf24 !important;
        text-shadow: 0 0 10px rgba(251, 191, 36, 0.25);
    }

    /* Hide redundant PROFIT/LOSS card - duplicates top summary cards (Total PNL) */
    #history-section .row.mb-4:nth-of-type(2) {
        display: none !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
       FILTER CHIPS - Prevent shrinking, allow horizontal scroll
       flex-shrink: 0, min-width for breathing room, overflow-x: auto
       ═══════════════════════════════════════════════════════════════════ */
    #history-section .history-table-container .row.mb-3 {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        padding: 0.3rem 0 !important;
    }

    #history-section .history-table-container .row.mb-3>div {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        width: auto !important;
        min-width: 100px !important;
        padding: 0 !important;
    }

    #history-section .history-table-container .row.mb-3 .form-group {
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }

    /* Hide filter labels on mobile explicitly */
    #history-section .form-label {
        display: none !important;
    }

    /* Force hide any potential leftover filters from desktop */
    #history-section .history-table thead {
        display: none !important;
    }

    /* Force hide the desktop filters container on mobile */
    #history-section .history-table-container .row.d-none.d-lg-flex {
        display: none !important;
    }

    /* Reduce spacing around the filter button row */
    #history-section .history-table-container .row.d-lg-none {
        margin-bottom: 0.2rem !important;
        margin-top: 0.2rem !important;
        padding: 0 !important;
    }

    #history-section .form-select-dropdown,
    #history-section .dropdown .btn {
        padding: 0.35rem 0.6rem !important;
        font-size: 0.65rem !important;
        min-width: 110px !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        background: var(--glass-bg) !important;
        border: 1px solid var(--glass-border) !important;
        flex-shrink: 0 !important;
    }

    /* History table */
    #history-section .history-table {
        font-size: 0.55rem !important;
    }

    /* Keep filters static; only history rows should scroll.
       display is set by JS (flex) — do NOT use display !important here
       or it will override the inline display:none and show the section always. */
    #history-section[style*="flex"] {
        flex-direction: column !important;
        height: calc(100vh - 70px) !important;
        overflow: visible !important;
    }

    #history-section > .container {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #history-section .history-table-container {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    #history-section .history-table-container .row.mb-3 {
        flex-shrink: 0 !important;
    }

    #history-section .history-table {
        display: block !important;
        flex: 1 !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
    }

    #history-section .history-table tbody {
        display: block !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: 100% !important;
    }

    #history-section .history-table th,
    #history-section .history-table td {
        padding: 0.3rem 0.2rem !important;
        white-space: nowrap !important;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    #history-section .history-table {
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border: none !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
       HISTORY CARD - Redesigned to match User Position cards
       Row 1: Asset badge with icon + title + option type/premium subtitle
       Row 2: Settlement info (muted, small)
       Row 3: PnL (full width, right-aligned, divider above)
       ═══════════════════════════════════════════════════════════════════ */
    #history-section .history-table tbody td.col-asset {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        word-break: break-word;
        line-height: 1.25;
    }

    #history-section .history-table tbody tr {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "header"
            "settlement"
            "pnl" !important;
        gap: 0.25rem !important;
        padding: 0.75rem 0.85rem 0.75rem !important;
        background: rgba(255, 255, 255, 0.025) !important;
        border: none !important;
        border-radius: 14px !important;
        margin-bottom: 0.6rem !important;
        box-shadow: none !important;
    }

    /* Force transparency on container */
    #history-section .history-table-container,
    #history-section > .container,
    #history-section .card {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Hide columns now embedded in asset subtitle or not needed on mobile */
    #history-section .history-table tbody td.col-date,
    #history-section .history-table tbody td.col-type,
    #history-section .history-table tbody td.col-strike,
    #history-section .history-table tbody td.col-size,
    #history-section .history-table tbody td.col-premium,
    #history-section .history-table .col-premium-usd,
    #history-section .history-table .col-pnl-usd,
    #history-section .history-table td.col-status,
    #history-section .history-table th:nth-child(7),
    #history-section .history-table td:nth-child(7),
    #history-section .history-table th:nth-child(10),
    #history-section .history-table td:nth-child(10) {
        display: none !important;
    }

    /* ── Asset badge (icon + title + subtitle) ── */
    #history-section .history-table tbody td.col-asset {
        grid-area: header !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.45rem !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        justify-self: start !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    #history-section .history-table tbody td.col-asset:before {
        display: none !important;
    }

    #history-section .history-table tbody td.col-asset .position-asset-logo {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }

    #history-section .history-table tbody td.col-asset .position-asset-text {
        display: flex !important;
        flex-direction: column !important;
        line-height: 1.2 !important;
    }

    #history-section .history-table tbody td.col-asset .position-cost-label {
        display: block !important;
        font-size: 0.68rem !important;
        font-weight: 500 !important;
        color: var(--text-muted) !important;
        margin-top: 0.1rem !important;
    }

    /* Title colour by option type: see the single rule at the end of this file. */

    /* ── Settlement info (small muted line) ── */
    #history-section .history-table tbody td.col-settlement {
        grid-area: settlement !important;
        font-size: 0.72rem !important;
        color: var(--text-muted) !important;
        padding: 0 !important;
    }
    #history-section .history-table tbody td.col-settlement:before {
        display: none !important;
    }

    /* ── PnL (full width, right-aligned, divider above) ── */
    #history-section .history-table tbody td.col-pnl {
        grid-area: pnl !important;
        display: block !important;
        text-align: right !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        padding: 0.3rem 0 0.15rem !important;
        margin-top: 0.15rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    #history-section .history-table tbody td.col-pnl:before {
        content: "PNL " !important;
        display: inline !important;
        font-size: 0.5rem !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
        margin-right: 0.25rem !important;
    }

    /* No history message - uses shared empty state styles above */

    /* ─────────────────────────────────────────────────────────────────────
       Scoreboard - Beautiful Mobile Competition Card & Layout
       ───────────────────────────────────────────────────────────────────── */

    /* Scoreboard layout — display is set by JS (block).
       Section scrolls naturally via overflow-y: auto. */
    #scoreboard-section[style*="block"] {
        margin-top: 0 !important;
    }

    #scoreboard-section>.container {
        padding: 0.5rem !important;
        padding-top: 0.5rem !important;
        margin-top: 0 !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
       SCOREBOARD TOP TABS - Plain text toggle (Scoreboard / Rules)
       ═══════════════════════════════════════════════════════════════════ */
    .scoreboard-top-tabs {
        display: flex !important;
        gap: 1.2rem !important;
        align-items: center !important;
        margin-bottom: 0.6rem !important;
        padding-bottom: 0.5rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .scoreboard-top-tab {
        padding: 0 !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        border: none !important;
        background: transparent !important;
        color: rgba(255, 255, 255, 0.35) !important;
        border-radius: 0 !important;
        cursor: pointer !important;
        transition: color 0.2s ease !important;
        white-space: nowrap !important;
    }

    .scoreboard-top-tab.active {
        color: #fff !important;
        font-weight: 700 !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
       RULES TAB - Clean mobile redesign
       ═══════════════════════════════════════════════════════════════════ */

    .rules-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.6rem !important;
    }

    .rules-top-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.6rem !important;
    }

    .rules-footer-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.4rem !important;
    }

    .rules-card {
        background: rgba(255, 255, 255, 0.025) !important;
        border-radius: 14px !important;
        padding: 0.75rem !important;
    }

    .rules-card-compact {
        padding: 0.6rem 0.75rem !important;
    }

    .rules-card-title {
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        color: rgba(255, 255, 255, 0.4) !important;
        margin-bottom: 0.5rem !important;
    }

    /* Prize list */
    .rules-prize-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.3rem !important;
    }

    .rules-prize-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0.45rem 0.6rem !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.025) !important;
    }

    .rules-prize-rank {
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.5) !important;
    }

    .rules-prize-amount {
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        color: #fff !important;
    }

    .rules-prize-gold {
        background: rgba(253, 224, 71, 0.1) !important;
    }
    .rules-prize-gold .rules-prize-rank {
        color: #fde047 !important;
    }
    .rules-prize-gold .rules-prize-amount {
        color: #fde047 !important;
    }

    .rules-prize-silver {
        background: rgba(148, 163, 184, 0.08) !important;
    }
    .rules-prize-silver .rules-prize-rank {
        color: #94a3b8 !important;
    }
    .rules-prize-silver .rules-prize-amount {
        color: #cbd5e1 !important;
    }

    .rules-prize-bronze {
        background: rgba(217, 119, 6, 0.08) !important;
    }
    .rules-prize-bronze .rules-prize-rank {
        color: #f59e0b !important;
    }
    .rules-prize-bronze .rules-prize-amount {
        color: #f59e0b !important;
    }

    /* Score breakdown */
    .rules-score-breakdown {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.55rem !important;
    }

    .rules-score-item {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto !important;
        gap: 0.15rem 0.5rem !important;
        align-items: center !important;
    }

    .rules-score-label {
        grid-column: 1 !important;
        grid-row: 1 !important;
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .rules-score-pts {
        grid-column: 2 !important;
        grid-row: 1 / 3 !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        color: rgba(56, 152, 236, 0.9) !important;
        text-align: right !important;
    }

    .rules-score-bar {
        grid-column: 1 !important;
        grid-row: 2 !important;
        height: 3px !important;
        border-radius: 2px !important;
        background: rgba(56, 152, 236, 0.15) !important;
        position: relative !important;
        overflow: hidden !important;
    }
    .rules-score-bar::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        width: var(--bar-w, 0%) !important;
        background: rgba(56, 152, 236, 0.6) !important;
        border-radius: 2px !important;
    }

    .rules-note {
        margin-top: 0.5rem !important;
        font-size: 0.58rem !important;
        line-height: 1.5 !important;
        color: rgba(255, 255, 255, 0.3) !important;
    }

    /* Footer row + Past Winners */
    .rules-footer-row {
        margin-bottom: 0.4rem !important;
    }

    .rules-footer-label {
        font-size: 0.6rem !important;
        color: rgba(255, 255, 255, 0.35) !important;
    }

    .rules-footer-label i {
        font-size: 0.55rem !important;
        margin-right: 0.2rem !important;
    }

    .rules-winners-link {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.3rem !important;
        padding: 0.4rem !important;
        background: rgba(253, 224, 71, 0.08) !important;
        border: 1px solid rgba(253, 224, 71, 0.12) !important;
        border-radius: 8px !important;
        font-size: 0.65rem !important;
        font-weight: 600 !important;
        color: #fde047 !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }

    .rules-winners-link:hover {
        background: rgba(253, 224, 71, 0.15) !important;
    }

    .rules-winners-link i {
        font-size: 0.6rem !important;
    }

    /* ═══════════════════════════════════════════════════════════════════ */

    #scoreboard-section .professional-asset-header {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        padding: 0 !important;
        margin-top: 0 !important;
    }

    #scoreboard-section .professional-asset-header>h2 {
        flex-shrink: 0 !important;
        margin: 0 0 0.3rem 0 !important;
        padding: 0 !important;
        font-size: 0.85rem !important;
        color: var(--text-primary) !important;
    }

    /* Hide verbose scoring info on mobile — cards are self-explanatory */
    #scoreboard-section .scoreboard-info {
        display: none !important;
    }

    #scoreboard-section .scoreboard-period-toggle {
        flex-shrink: 0 !important;
        margin-bottom: 0.3rem !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }

    /* Period toggle tabs - pill design matching sort-by buttons */
    #scoreboard-section .scoreboard-tabs {
        display: flex !important;
        gap: 0.34rem !important;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        border-bottom: none !important;
    }

    #scoreboard-section .scoreboard-tab {
        flex: 1 !important;
        padding: 0.38rem 0.64rem !important;
        font-size: 0.68rem !important;
        font-weight: 600 !important;
        border: none !important;
        background: rgba(20, 28, 40, 0.5) !important;
        color: rgba(255, 255, 255, 0.5) !important;
        border-radius: 17px !important;
        transition: all 0.2s ease !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    #scoreboard-section .scoreboard-tab.active {
        background: rgba(56, 152, 236, 0.85) !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    /* Table container — strip desktop border/radius so cards flow freely like other pages */
    #scoreboard-section .scoreboard-table-container {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        min-height: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Table container scrolling */
    #scoreboard-section .scoreboard-table-container>table,
    #scoreboard-section table.scoreboard-table {
        flex: 1 !important;
    }

    /* Compact top spacing - cards start right after section padding-top */
    #positions-section>*:first-child,
    #scoreboard-section>*:first-child,
    #history-section>*:first-child {
        margin-top: 0 !important;
    }

    #positions-section,
    #scoreboard-section,
    #history-section {
        margin-top: 0 !important;
    }

    /* Force title right at top (section padding provides the gap) */
    #scoreboard-section h2:first-of-type,
    #positions-section h2:first-of-type,
    #history-section h2:first-of-type {
        margin-top: 0 !important;
    }

    /* Direct child of sections - no extra margin */
    #positions-section>div:first-of-type,
    #scoreboard-section>div:first-of-type,
    #history-section>div:first-of-type {
        margin-top: 0 !important;
    }

    /* Compact gap between competition and scoreboard */
    #scoreboard-section .card+.card,
    #scoreboard-section>div+div,
    #scoreboard-section .weekly-competition-box+* {
        margin-top: 0.4rem !important;
    }

    /* ─────────────────────────────────────────────────────────────────────
       Scoreboard Leaderboard - Card Layout (matches positions/history)
       ───────────────────────────────────────────────────────────────────── */

    .scoreboard-table-scroll-wrapper {
        margin-bottom: 70px !important;
        overflow: visible !important;
    }

    #scoreboard-section table thead {
        display: none !important;
    }

    #scoreboard-section table {
        display: block !important;
        min-width: 0 !important;
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: transparent !important;
    }

    #scoreboard-section table tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Each row = a card: 3 columns */
    #scoreboard-section table tbody tr {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-areas:
            "rank    trader   score"
            "vol     prem     trades"
            "streaks streaks  streaks" !important;
        gap: 0 !important;
        padding: 0.75rem 0.85rem 0.75rem !important;
        background: rgba(255, 255, 255, 0.025) !important;
        border: none !important;
        border-radius: 14px !important;
        margin-bottom: 0.6rem !important;
        box-shadow: none !important;
    }

    /* Reset all cell styling */
    #scoreboard-section table td {
        border: none !important;
        padding: 0 !important;
        white-space: normal !important;
        background: transparent !important;
    }
    #scoreboard-section table td:before {
        display: none !important;
    }

    /* Uniform card bg — override striped table + rank tints */
    #scoreboard-section table tbody tr:nth-child(odd),
    #scoreboard-section table tbody tr:nth-child(even),
    #scoreboard-section .scoreboard-table tbody tr.rank-1,
    #scoreboard-section .scoreboard-table tbody tr.rank-2,
    #scoreboard-section .scoreboard-table tbody tr.rank-3 {
        background: rgba(255, 255, 255, 0.025) !important;
        background-color: rgba(255, 255, 255, 0.025) !important;
        border: none !important;
        border-left: none !important;
    }
    #scoreboard-section table tbody tr > td {
        background-color: transparent !important;
    }

    /* ── Rank — compact inline number ── */
    #scoreboard-section table td.col-rank {
        grid-area: rank !important;
        display: flex !important;
        align-items: center !important;
        padding-right: 0.5rem !important;
    }

    #scoreboard-section table td.col-rank strong {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 700 !important;
        font-size: 0.78rem !important;
        color: var(--text-muted) !important;
        background: none !important;
        padding: 0 !important;
        min-width: 0 !important;
        height: auto !important;
        border-radius: 0 !important;
    }

    /* Top-3 rank numbers get medal colors */
    #scoreboard-section table tbody tr:nth-child(1) td.col-rank strong {
        color: #fbbf24 !important;
        background: none !important;
    }
    #scoreboard-section table tbody tr:nth-child(2) td.col-rank strong {
        color: #94a3b8 !important;
        background: none !important;
    }
    #scoreboard-section table tbody tr:nth-child(3) td.col-rank strong {
        color: #fb923c !important;
        background: none !important;
    }

    /* ── Trader address ── */
    #scoreboard-section table td.col-trader {
        grid-area: trader !important;
        display: flex !important;
        align-items: center !important;
        font-family: var(--mono) !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        color: var(--text-primary) !important;
    }

    /* ── Score — right-aligned with label ── */
    #scoreboard-section table td.col-score {
        grid-area: score !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }

    #scoreboard-section table td.col-score:before {
        content: "SCORE" !important;
        display: block !important;
        font-size: 0.6rem !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.25) !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 0.05rem !important;
    }

    #scoreboard-section table td.col-score strong {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
        background: none !important;
        padding: 0 !important;
        min-width: 0 !important;
        height: auto !important;
        border-radius: 0 !important;
    }

    /* ── Stats row — volume, premium, trades (below, with divider) ── */
    #scoreboard-section table td.col-volume,
    #scoreboard-section table td.col-premium,
    #scoreboard-section table td.col-trades {
        display: flex !important;
        flex-direction: column !important;
        font-size: 0.68rem !important;
        font-weight: 500 !important;
        color: var(--text-muted) !important;
        padding-top: 0.45rem !important;
        margin-top: 0.35rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    #scoreboard-section table td.col-volume {
        grid-area: vol !important;
    }
    #scoreboard-section table td.col-premium {
        grid-area: prem !important;
        align-items: center !important;
        text-align: center !important;
    }
    #scoreboard-section table td.col-trades {
        grid-area: trades !important;
        text-align: right !important;
        align-items: flex-end !important;
    }

    /* Labels for stats */
    #scoreboard-section table td.col-volume:before,
    #scoreboard-section table td.col-premium:before,
    #scoreboard-section table td.col-trades:before {
        display: block !important;
        font-size: 0.48rem !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.25) !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        margin-bottom: 0.08rem !important;
    }
    #scoreboard-section table td.col-volume:before {
        content: "Volume" !important;
    }
    #scoreboard-section table td.col-premium:before {
        content: "Premium" !important;
    }
    #scoreboard-section table td.col-trades:before {
        content: "Trades" !important;
    }

    /* ── Streak data row ── */
    #scoreboard-section table td.col-streaks {
        grid-area: streaks !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.3rem 0.6rem !important;
        font-size: 0.62rem !important;
        padding: 0.35rem 0 0 0 !important;
        margin-top: 0.3rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-bottom: none !important;
        border-left: none !important;
        border-right: none !important;
    }

    .sb-streak-item {
        display: flex;
        align-items: baseline;
        gap: 0.2rem;
        font-weight: 700;
        color: #fff;
        font-size: 0.65rem;
    }

    .sb-streak-lbl {
        color: rgba(255, 255, 255, 0.35);
        font-weight: 500;
        font-size: 0.48rem;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* Connected wallet highlight — NOT set here. This selector scores
       (1,1,3) and the row rule beside the weld block scores (1,2,2) through
       its `:nth-child` members, so anything written here is dead. See
       "YOUR OWN ROW" further down this file. */

    .sb-you-badge {
        display: inline-block;
        font-size: 0.44rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        background: rgba(56, 152, 236, 0.85);
        color: #fff;
        padding: 0.1rem 0.35rem;
        border-radius: 4px;
        margin-left: 0.3rem;
        vertical-align: middle;
    }

    /* ── Score breakdown bar — show inline bar inside score cell ── */
    #scoreboard-section table td.col-score .score-breakdown {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 0.2rem !important;
    }

    #scoreboard-section table td.col-score .score-total {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
    }

    #scoreboard-section table td.col-score .score-bar-inline {
        display: flex !important;
        width: 100% !important;
        min-width: 50px !important;
        height: 5px !important;
        border-radius: 3px !important;
        overflow: hidden !important;
        background: rgba(255, 255, 255, 0.08) !important;
    }

    #scoreboard-section table td.col-score .score-seg {
        display: block !important;
        height: 5px !important;
    }

    #scoreboard-section table td.col-score .score-seg-premium {
        background: #3b82f6 !important;
    }

    #scoreboard-section table td.col-score .score-seg-profit {
        background: #10b981 !important;
    }

    #scoreboard-section table td.col-score .score-seg-trade {
        background: #8b5cf6 !important;
    }

    /* Hide the separate breakdown cell on mobile — use inline bar instead */
    #scoreboard-section table td.col-breakdown {
        display: none !important;
    }

    /* ── Expandable detail row.
       The card geometry is NOT set here — see the weld block beside the row
       rule further down this file, which is where the winning specificity
       lives. ── */
    #scoreboard-section table tbody tr.score-detail-row {
        display: block !important;
    }

    #scoreboard-section table tbody tr.score-detail-row td {
        display: block !important;
        padding: 0 !important;
    }

    .score-detail-content {
        flex-direction: column !important;
        gap: 0.6rem !important;
        align-items: stretch !important;
    }

    .score-detail-bars {
        min-width: 0 !important;
    }

    #scoreboard-section .score-detail-bar-item {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        width: 100% !important;
    }

    #scoreboard-section .score-detail-bar-track {
        flex: 1 !important;
        height: 8px !important;
        min-height: 8px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 4px !important;
        overflow: hidden !important;
        display: block !important;
    }

    #scoreboard-section .score-detail-bar-fill {
        height: 8px !important;
        min-height: 8px !important;
        display: block !important;
        border-radius: 4px !important;
    }

    #scoreboard-section .score-detail-bar-fill.premium { background: #3b82f6 !important; }
    #scoreboard-section .score-detail-bar-fill.profit  { background: #10b981 !important; }
    #scoreboard-section .score-detail-bar-fill.trade   { background: #8b5cf6 !important; }

    .score-detail-bar-label {
        min-width: 52px !important;
        font-size: 0.6rem !important;
    }

    .score-detail-bar-value {
        font-size: 0.6rem !important;
        min-width: 48px !important;
    }

    .score-detail-extra {
        font-size: 0.6rem !important;
    }

    /* ── Summary stats bar ── */
    .scoreboard-summary-stats {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.35rem !important;
        padding: 0 0.85rem !important;
        margin-bottom: 0.75rem !important;
    }

    .sb-stat-card {
        flex: 1 !important;
        min-width: 55px !important;
        padding: 0.4rem 0.45rem !important;
        background: rgba(255, 255, 255, 0.035) !important;
        border: none !important;
        border-radius: 10px !important;
        text-align: center !important;
    }

    .sb-stat-value {
        font-size: 0.78rem !important;
        text-align: center !important;
        display: block !important;
    }

    .sb-stat-label {
        font-size: 0.6rem !important;
        text-align: center !important;
        display: block !important;
    }

    /* ── Podium — stack vertically ── */
    .scoreboard-podium {
        grid-template-columns: 1fr !important;
        padding: 0 0.85rem !important;
        gap: 0.4rem !important;
        margin-bottom: 0.75rem !important;
    }

    .podium-card {
        order: unset !important;
        min-height: auto !important;
        padding: 0.65rem 0.75rem !important;
        border-radius: 12px !important;
        cursor: pointer !important;
    }

    .podium-detail {
        margin-top: 0.5rem !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .podium-medal { font-size: 1.2rem !important; }
    .podium-score-total { font-size: 1.1rem !important; }
    .podium-address { font-size: 0.68rem !important; }
    .podium-stat { font-size: 0.55rem !important; }

    /* ── Top-10 chart ── */
    .scoreboard-chart-container {
        padding: 0 0.85rem !important;
        margin-top: 0.75rem !important;
    }

    .scoreboard-chart-title {
        font-size: 0.6rem !important;
    }

    .sb-chart-label {
        font-size: 0.55rem !important;
        min-width: 60px !important;
    }

    .sb-chart-bar-container {
        height: 14px !important;
    }

    .sb-chart-score {
        font-size: 0.55rem !important;
    }

    /* ── Score legend ── */
    .score-legend {
        padding: 0 0.85rem !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.5rem !important;
        gap: 0.6rem !important;
    }

    .score-legend-dot {
        width: 6px !important;
        height: 6px !important;
    }

    /* ── Hide expand icon on mobile (detail is via tap) ── */
    .sb-expand-icon {
        display: none !important;
    }

    /* Compact card styling - CONSISTENT WIDTH */
    #positions-section .card,
    #scoreboard-section .card,
    #history-section .card {
        margin-bottom: 0.5rem !important;
        padding: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #positions-section .card-body,
    #scoreboard-section .card-body,
    #history-section .card-body {
        padding: 0.5rem !important;
        width: 100% !important;
    }

    /* Card titles smaller */
    #positions-section .card-title,
    #scoreboard-section .card-title,
    #history-section .card-title {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Tables - Compact without horizontal scroll */
    .user-positions-table-container,
    .open-positions-table-container,
    .scoreboard-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #history-section .history-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-top: 0.5rem !important;
    }

    .user-positions-table,
    .open-positions-table {
        min-width: unset !important;
        width: 100% !important;
        font-size: 0.6rem !important;
        table-layout: fixed;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        border: none !important;
    }

    .user-positions-table th,
    .user-positions-table td,
    .open-positions-table th,
    .open-positions-table td {
        padding: 0.3rem 0.2rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    /* Zero out desktop padding on open positions table cells */
    .open-positions-table tbody td,
    .open-positions-table thead th {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Override table-striped backgrounds so all cards get uniform background */
    .open-positions-table > tbody > tr,
    .open-positions-table > tbody > tr:nth-of-type(odd),
    .open-positions-table > tbody > tr:nth-of-type(even),
    .table-striped.open-positions-table > tbody > tr:nth-of-type(odd) {
        background: rgba(255, 255, 255, 0.025) !important;
        background-color: rgba(255, 255, 255, 0.025) !important;
    }
    .open-positions-table > tbody > tr > td,
    .open-positions-table > tbody > tr:nth-of-type(odd) > td {
        background-color: transparent !important;
    }

    /* Allow full order/position names to wrap - fix clipped "BTC-RA..." */
    .user-positions-table tbody td.col-asset,
    .open-positions-table tbody td.col-asset {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        word-break: break-word;
        min-width: 0;
        line-height: 1.25;
    }

    /* ═══════════════════════════════════════════════════════════════════
       ASSET PRICE TICKER - Horizontal bar above positions
       ═══════════════════════════════════════════════════════════════════ */
    .positions-price-ticker {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        padding: 0.5rem 0 0.65rem !important;
        margin-bottom: 0.5rem !important;
    }
    .ticker-item {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        background: rgba(255, 255, 255, 0.04);
        border: none;
        border-radius: 10px;
        padding: 0.35rem 0.6rem;
        font-size: 0.7rem;
        font-weight: 600;
        color: #fff;
        white-space: nowrap;
    }
    .ticker-icon {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        object-fit: contain;
    }
    .ticker-icon[alt="ETH"],
    .ticker-icon[alt="XRP"] {
        filter: brightness(0) invert(1);
    }
    .ticker-price {
        color: var(--text-muted);
        font-weight: 500;
    }

    img.position-asset-logo[alt="ETH"],
    img.position-asset-logo[alt="XRP"] {
        filter: brightness(0) invert(1) !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
       POSITION CARDS - Redesigned to match Trade Card style
       Shows ALL info: Asset (color-coded), Strike, Size, Cost,
       PnL, Time Left, and Actions.
       ═══════════════════════════════════════════════════════════════════ */

    /* Hide table headers - cards are self-descriptive */
    .user-positions-table thead,
    .open-positions-table thead {
        display: none !important;
    }

    /* ── User Position Card Grid ──
       Row 1: Asset badge with cost subtitle (full width)
       Row 2: "You believe ... in [countdown]" (full width)
       Row 3: PnL (full width)
       Row 4: Action buttons (full width)
       ─────────────────────────────────────────────── */
    .user-positions-table tbody tr.position-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "asset    asset"
            "belief   belief"
            "pnl      pnl"
            "actions  actions" !important;
        gap: 0.25rem 0.6rem !important;
        align-items: center !important;
        padding: 0.75rem 0.85rem 0.75rem !important;
        background: rgba(255, 255, 255, 0.025) !important;
        border: none !important;
        border-radius: 14px !important;
        margin-bottom: 0.6rem !important;
        box-shadow: none !important;
        position: relative !important;
    }

    /* Color-coded left accent — removed */
    .user-positions-table tbody tr.position-row[data-option-type="call"],
    .user-positions-table tbody tr.position-row[data-option-type="put"],
    .user-positions-table tbody tr.position-row[data-option-type="ranger"] {
        border-left: none !important;
    }

    /* ── Open Position Card Grid ──
       Row 1: Asset badge with icon + title + cost subtitle (full width)
       Row 2: Trader address (muted) + Countdown (right)
       Row 3: PnL (full width, divider above)
       Row 4: Action buttons (full width)
       ─────────────────────────────────────────────── */
    .open-positions-table tbody tr {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "asset    asset"
            "belief   belief"
            "pnl      pnl"
            "actions  actions" !important;
        gap: 0.25rem 0.6rem !important;
        align-items: center !important;
        padding: 0.75rem 0.85rem 0.75rem !important;
        background: rgba(255, 255, 255, 0.025) !important;
        border: none !important;
        border-radius: 14px !important;
        margin-bottom: 0.6rem !important;
        box-shadow: none !important;
        position: relative !important;
    }

    .open-positions-table tbody tr[data-option-type="call"],
    .open-positions-table tbody tr[data-option-type="put"],
    .open-positions-table tbody tr[data-option-type="ranger"] {
        border-left: none !important;
    }

    /* ── Hide redundant columns (shown elsewhere via asset subtitle on mobile) ── */
    .user-positions-table tbody tr.position-row .col-type,
    .user-positions-table tbody tr.position-row .col-strike,
    .user-positions-table tbody tr.position-row .col-current-price,
    .user-positions-table tbody tr.position-row .col-time-left,
    .user-positions-table tbody tr.position-row .col-size,
    .open-positions-table tbody tr .col-type,
    .open-positions-table tbody tr .col-strike,
    .open-positions-table tbody tr .col-premium,
    .open-positions-table tbody tr .col-size {
        display: none !important;
    }

    /* ── Cost (now inline in asset badge via .position-cost-label) ── */

    /* ── Asset Badge (top-left, color-coded by option type) ── */
    .user-positions-table tbody tr.position-row .col-asset,
    .open-positions-table tbody tr .col-asset {
        grid-area: asset !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.45rem !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .position-asset-text {
        display: flex !important;
        flex-direction: column !important;
        line-height: 1.2 !important;
    }

    .position-cost-label {
        display: block !important;
        font-size: var(--fs-micro) !important;
        font-weight: 500 !important;
        color: var(--text-muted) !important;
        margin-top: 0.1rem !important;
    }

    .user-positions-table tbody tr.position-row .position-asset-logo {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }

    .open-positions-table tbody tr .position-asset-logo {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }

    .user-positions-table tbody tr.position-row .col-asset:before,
    .open-positions-table tbody tr .col-asset:before {
        display: none !important;
    }

    /* The card-title colour by option type is now ONE rule at the end of this
       file. This block covered My Positions and All Positions only, so History
       stayed neutral and the panes disagreed. */

    /* ── "You believe..." / "{addr} believes..." statement (full width, below asset title) ── */
    .user-positions-table tbody tr.position-row .col-belief,
    .open-positions-table tbody tr .col-belief {
        grid-area: belief !important;
        display: block !important;
        font-size: 0.82rem !important;
        color: #fff !important;
        padding: 0.25rem 0 0.2rem !important;
        margin-top: 0 !important;
        line-height: 1.3 !important;
    }
    .user-positions-table tbody tr.position-row .col-belief .countdown,
    .open-positions-table tbody tr .col-belief .countdown {
        color: #fff !important;
        text-shadow: none !important;
        animation: none !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        letter-spacing: normal !important;
    }
    .user-positions-table tbody tr.position-row .col-belief:before,
    .open-positions-table tbody tr .col-belief:before {
        display: none !important;
    }
    .open-positions-table tbody tr .col-belief .belief-trader-link {
        color: var(--primary) !important;
        font-weight: 600 !important;
    }

    /* ── Projected PnL (user positions, full width) ── */
    .user-positions-table tbody tr.position-row .col-pnl {
        grid-area: pnl !important;
        display: block !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        text-align: right !important;
        padding: 0.3rem 0 0.15rem !important;
        margin-top: 0.15rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    .user-positions-table tbody tr.position-row .col-pnl:before {
        content: "PNL @ CURRENT PRICE " !important;
        display: inline !important;
        font-size: 0.5rem !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
        margin-right: 0.25rem !important;
    }

    /* ── PnL (open positions, full width, divider above — matches user positions) ── */
    .open-positions-table tbody tr .col-pnl {
        grid-area: pnl !important;
        display: block !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
        text-align: right !important;
        padding: 0.3rem 0 0.15rem !important;
        margin-top: 0.15rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    .open-positions-table tbody tr .col-pnl:before {
        content: "PNL @ CURRENT PRICE " !important;
        display: inline !important;
        font-size: 0.5rem !important;
        color: var(--text-muted) !important;
        text-transform: uppercase !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
        margin-right: 0.25rem !important;
    }

    /* ── Actions Row ── */
    .user-positions-table tbody tr.position-row .col-actions {
        grid-area: actions !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.4rem !important;
        justify-content: stretch !important;
        margin-top: 0.15rem !important;
        padding: 0.45rem 0 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    .user-positions-table tbody tr.position-row .col-actions .view-tx-btn,
    .user-positions-table tbody tr.position-row .col-actions .view-option-btn {
        flex: 1 !important;
        text-align: center !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: none !important;
        border-radius: 10px !important;
        color: #fff !important;
        font-size: 0.65rem !important;
        font-weight: 600 !important;
        padding: 0.4rem 0 !important;
        letter-spacing: 0.3px !important;
        box-shadow: none !important;
    }
    .open-positions-table tbody tr .col-actions {
        grid-area: actions !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 0.4rem !important;
        justify-content: stretch !important;
        margin-top: 0.15rem !important;
        padding: 0.45rem 0 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }
    .open-positions-table tbody tr .col-actions .view-tx-btn,
    .open-positions-table tbody tr .col-actions .view-option-btn {
        flex: 1 !important;
        text-align: center !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: none !important;
        border-radius: 10px !important;
        color: #fff !important;
        font-size: 0.65rem !important;
        font-weight: 600 !important;
        padding: 0.4rem 0 !important;
        letter-spacing: 0.3px !important;
        box-shadow: none !important;
    }
    .user-positions-table tbody tr.position-row .col-actions:before,
    .open-positions-table tbody tr .col-actions:before {
        display: none !important;
    }

    /* ─────────────────────────────────────────────────────────────────────
       Active Positions Leaderboard - Compact Cards
       ───────────────────────────────────────────────────────────────────── */
    .open-positions-list,
    .active-positions-list {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .open-position-card,
    .active-position-card,
    .position-card {
        background: var(--glass-bg) !important;
        border: 1px solid var(--glass-border) !important;
        border-radius: 10px !important;
        padding: 0.5rem 0.6rem !important;
        display: grid !important;
        grid-template-columns: minmax(90px, 1fr) auto !important;
        gap: 0.35rem !important;
        align-items: center !important;
    }

    .position-card .user-info,
    .open-position-card .user-info {
        font-size: 0.55rem !important;
        color: var(--text-muted);
        margin-bottom: 0.15rem;
    }

    .position-card .position-type,
    .open-position-card .position-type {
        font-size: 0.75rem !important;
        font-weight: 700 !important;
    }

    .position-card .position-details,
    .open-position-card .position-details {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.3rem 0.6rem !important;
        font-size: 0.55rem !important;
    }

    .position-card .position-pnl,
    .open-position-card .position-pnl {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        text-align: right !important;
    }

    /* ─────────────────────────────────────────────────────────────────────
       Scoreboard - Compact & Beautiful Rankings
       ───────────────────────────────────────────────────────────────────── */
    .scoreboard-container,
    .leaderboard-container {
        padding: 0 !important;
    }

    /* Sort tabs */
    .sort-tabs,
    .scoreboard-tabs {
        display: flex;
        gap: 0.34rem;
        margin-bottom: 0.75rem;
        overflow: visible !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .sort-tabs::-webkit-scrollbar,
    .scoreboard-tabs::-webkit-scrollbar {
        display: none;
    }

    .scoreboard-tab {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.6rem !important;
        white-space: nowrap;
    }

    /* Leaderboard rows */
    .leaderboard-row,
    .scoreboard-row {
        display: grid !important;
        grid-template-columns: 30px 1fr auto !important;
        gap: 0.4rem !important;
        padding: 0.4rem 0.5rem !important;
        margin-bottom: 0.3rem !important;
        /* Minimalist Card Style */
        background: rgba(255, 255, 255, 0.025) !important;
        border: 1px solid rgba(255, 255, 255, 0.04) !important;
        border-radius: 8px !important;
        align-items: center !important;
        box-shadow: none !important;
    }

    /* Rank badges - Beautiful 1st, 2nd, 3rd */
    .leaderboard-row .rank,
    .scoreboard-row .rank {
        width: 24px !important;
        height: 24px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
    }

    .leaderboard-row:nth-child(1) .rank,
    .scoreboard-row:nth-child(1) .rank {
        background: linear-gradient(135deg, #FFD700, #FFA500) !important;
        color: #000 !important;
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
    }

    .leaderboard-row:nth-child(2) .rank,
    .scoreboard-row:nth-child(2) .rank {
        background: linear-gradient(135deg, #C0C0C0, #A8A8A8) !important;
        color: #000 !important;
        box-shadow: 0 2px 8px rgba(192, 192, 192, 0.4);
    }

    .leaderboard-row:nth-child(3) .rank,
    .scoreboard-row:nth-child(3) .rank {
        background: linear-gradient(135deg, #CD7F32, #B87333) !important;
        color: #fff !important;
        box-shadow: 0 2px 8px rgba(205, 127, 50, 0.4);
    }

    .leaderboard-row:nth-child(n+4) .rank,
    .scoreboard-row:nth-child(n+4) .rank {
        background: rgba(255, 255, 255, 0.1) !important;
        color: var(--text-muted) !important;
    }

    /* User info in leaderboard */
    .leaderboard-row .user,
    .scoreboard-row .user {
        font-size: 0.6rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Score/Value */
    .leaderboard-row .score,
    .scoreboard-row .score,
    .leaderboard-row .pnl,
    .scoreboard-row .pnl {
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        text-align: right !important;
    }

    .leaderboard-row .score.positive,
    .scoreboard-row .pnl.positive {
        color: var(--call-green) !important;
    }

    .leaderboard-row .score.negative,
    .scoreboard-row .pnl.negative {
        color: var(--put-red) !important;
    }

    /* Trophy icons for top 3 */
    .leaderboard-row:nth-child(1)::before {
        content: '🥇';
        position: absolute;
        left: -8px;
        font-size: 0.8rem;
    }

    .leaderboard-row:nth-child(2)::before {
        content: '🥈';
        position: absolute;
        left: -8px;
        font-size: 0.8rem;
    }

    .leaderboard-row:nth-child(3)::before {
        content: '🥉';
        position: absolute;
        left: -8px;
        font-size: 0.8rem;
    }

    /* ═══════════════════════════════════════════════════════════════════
       CONSISTENT CARD WIDTH - ALL SECTIONS
       ═══════════════════════════════════════════════════════════════════ */
    #positions-section .row,
    #history-section .row,
    #scoreboard-section .row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #positions-section .col,
    #positions-section .col-12,
    #history-section .col,
    #history-section .col-12,
    #scoreboard-section .col,
    #scoreboard-section .col-12,
    #positions-section [class*="col-"],
    #history-section [class*="col-"],
    #scoreboard-section [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Scoreboard flex alignment */
    #scoreboard-section {
        justify-content: flex-start !important;
        align-content: flex-start !important;
    }

    #scoreboard-section > .container {
        margin-top: 0 !important;
        justify-content: flex-start !important;
        align-content: flex-start !important;
    }

    #scoreboard-section > .container > :first-child,
    #scoreboard-section .weekly-competition-box {
        margin-top: 0 !important;
        top: 0 !important;
        transform: none !important;
    }

    /* Final mobile gap cleanup for Trade + Scores */
    .main-layout {
        display: block !important;
        min-height: auto !important;
        height: auto !important;
    }

    #trade-section {
        min-height: auto !important;
        height: auto !important;
        margin-bottom: 0 !important;
        padding-bottom: 0.5rem !important;
    }

    #trade-section .container {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Scoreboard sizing when visible (display managed by JS) */
    #scoreboard-section[style*="flex"],
    #scoreboard-section[style*="block"] {
        min-height: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 70px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #scoreboard-section .professional-asset-header {
        margin-top: 0 !important;
    }

    /* Ensure all containers are full width */
    #positions-section .user-positions-table-container,
    #positions-section .open-positions-table-container,
    #history-section>div,
    #scoreboard-section>div {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Scoreboard table container */
    #scoreboard-section .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
       WEB3-ONBOARD MODAL: Keep Centered on Mobile
       Override the default bottom-sheet behavior so the wallet
       connection modal stays vertically centered on all viewports.
       The host element must not block clicks when the modal is hidden.
       ═══════════════════════════════════════════════════════════════════ */
    :root {
        --onboard-modal-top: 0 !important;
        --onboard-modal-bottom: 0 !important;
        --onboard-modal-left: 0 !important;
        --onboard-modal-right: 0 !important;
    }

    /* Ensure the header/navbar renders above onboard-v2's shadow DOM
       and the network-alert overlay (z-index: 9999) */
    header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10000 !important;
        background: transparent !important;
    }

    /* When the mobile menu is open, elevate header above all page content
       (.mobile-trade-header has z-index:100, .mobile-bottom-nav has z-index:1000)
       so the slide-in navbar-collapse is not hidden behind them */
    header:has(.navbar-collapse.show),
    header:has(.navbar-collapse.collapsing) {
        z-index: 10001 !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
       NAVBAR COLLAPSE: Fix Bootstrap conflict with slide-from-left
       Bootstrap's .collapse sets display:none and animates height.
       The app.css uses transform:translateX for a slide-in effect.
       Override Bootstrap's collapse behavior so the two don't conflict.
       ═══════════════════════════════════════════════════════════════════ */
    .navbar-collapse.collapse:not(.show) {
        display: block !important;
        height: 100vh !important;
        overflow-y: auto !important;
        /* Kept off-screen via transform in app.css: translateX(-100%) */
    }

    .navbar-collapse.collapsing {
        display: block !important;
        height: 100vh !important;
        overflow-y: auto !important;
        /* transform transition is defined in app.css */
    }

    /* The .weekly-competition-dropdown .dropdown-header override went with the
       dropdown itself (see app.css). */

    /* ═══════════════════════════════════════════════════════════════════
       TRADE CONFIRM MODAL: Bottom Sheet (slides up from bottom)
       Overrides Bootstrap centered modal to act as a mobile bottom sheet
       with smooth slide-up animation.
       ═══════════════════════════════════════════════════════════════════ */

    /* Backdrop */
    #trade-confirm-modal.modal {
        padding: 0 !important;
        background: rgba(0, 0, 0, 0.7) !important;
    }

    /* The backdrop colour is set ONCE, on the base `.modal-backdrop` rule near
       the end of this file. It is not set here.
       Two reasons this rule is gone. `#trade-confirm-modal.modal
       .modal-backdrop` never matched: Bootstrap appends the backdrop to
       <body>, not inside the modal. And `.modal-backdrop.show` set the colour
       on the state Bootstrap REMOVES to close — so the colour was dropped at
       the first frame of the close while the fade was still running, and the
       backdrop jumped to the stock opaque black instead of fading from the
       colour it had. `background-color` is not part of the `.fade` transition,
       so that jump is instant and reads as a black flash. Same defect as the
       desktop rule in app.css; fixed the same way. */

    /* Dialog: anchored to bottom, full width */
    #trade-confirm-modal .modal-dialog,
    #trade-confirm-modal .modal-dialog.modal-dialog-centered {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        display: block !important;
        align-items: unset !important;
        transform: translateY(100%) !important;
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    #trade-confirm-modal.show .modal-dialog,
    #trade-confirm-modal.show .modal-dialog.modal-dialog-centered {
        transform: translateY(0) !important;
    }

    /* Content wrapper */
    #trade-confirm-modal .trade-confirm-modal-content,
    #trade-confirm-modal .modal-content {
        border: none !important;
        border-radius: 20px 20px 0 0 !important;
        background: #141a23 !important;
        background-color: #141a23 !important;
        box-shadow: none !important;
        max-height: 88vh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Drag handle */
    #trade-confirm-modal .bottom-sheet-handle {
        display: flex;
        justify-content: center;
        padding: 10px 0 4px 0;
        cursor: grab;
        flex-shrink: 0;
    }

    #trade-confirm-modal .bottom-sheet-handle span {
        width: 36px;
        height: 4px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.2);
    }

    /* Header */
    #trade-confirm-modal .trade-confirm-modal-header,
    #trade-confirm-modal .modal-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 8px 16px 12px 16px !important;
        background: #141a23 !important;
        box-shadow: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        flex-shrink: 0;
    }

    #trade-confirm-modal .trade-confirm-header-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
        min-width: 0;
    }

    #trade-confirm-modal .trade-confirm-modal-title {
        font-size: 1rem !important;
        font-weight: 700 !important;
        color: #f8fafc !important;
        margin: 0 !important;
        letter-spacing: 0 !important;
        white-space: nowrap;
    }

    #trade-confirm-modal .order-countdown-text {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 0.7rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.45);
        white-space: nowrap;
    }

    #trade-confirm-modal .order-countdown-text i {
        font-size: 0.7rem;
    }

    #trade-confirm-modal .order-countdown {
        color: #fbbf24;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    #trade-confirm-modal .btn-close-white {
        filter: invert(1) grayscale(100%) brightness(200%) !important;
        opacity: 0.4;
        width: 10px;
        height: 10px;
        padding: 6px;
        margin: 0 !important;
        flex-shrink: 0;
    }

    #trade-confirm-modal .btn-close-white:hover {
        opacity: 0.7 !important;
    }

    /* Scrollable body */
    #trade-confirm-modal .trade-confirm-modal-body {
        padding: 12px 16px !important;
        background: transparent !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Error alert */
    #trade-confirm-modal #trade-error-alert {
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 0.78rem;
        margin-bottom: 12px !important;
    }

    /* ── Summary Cards: flat rows, no boxes ─────────────────────────── */
    #trade-confirm-modal .modal-trade-summary {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin-bottom: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    #trade-confirm-modal .modal-summary-card {
        background: transparent !important;
        border: none !important;
        border-bottom: none !important;
        border-radius: 0 !important;
        padding: 6px 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 6px !important;
    }

    #trade-confirm-modal .modal-summary-card:last-child {
        border-bottom: none !important;
    }

    #trade-confirm-modal .modal-summary-card.modal-summary-loss {
        background: transparent !important;
        border: none !important;
    }

    #trade-confirm-modal .modal-summary-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        min-width: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-top: 2px !important;
        font-size: 0.72rem !important;
        color: rgba(255, 255, 255, 0.35) !important;
        flex-shrink: 0 !important;
    }

    #trade-confirm-modal .modal-summary-card.modal-summary-loss .modal-summary-icon {
        background: transparent !important;
        border: none !important;
        color: #f87171 !important;
        font-size: 0.72rem !important;
    }

    #trade-confirm-modal .modal-summary-info,
    #trade-confirm-modal .modal-summary-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        gap: 2px !important;
    }

    #trade-confirm-modal .modal-summary-label {
        font-size: 0.72rem !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        color: rgba(255, 255, 255, 0.45) !important;
        margin-bottom: 0 !important;
        font-weight: 400 !important;
    }

    #trade-confirm-modal .modal-summary-value {
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        color: #f8fafc !important;
        line-height: 1.2 !important;
        text-align: left !important;
    }

    #trade-confirm-modal .modal-summary-card.modal-summary-loss .modal-summary-value {
        color: #f87171 !important;
    }

    /* ── Position row in confirm modal (dynamically injected) ────────── */
    .mobile-modal-position-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 0;
        background: transparent;
        border: none;
        border-radius: 0;
        font-size: 0.78rem;
        color: rgba(255, 255, 255, 0.8);
        line-height: 1.4;
    }

    .mobile-modal-position-card .modal-position-icon {
        display: none;
    }

    .mobile-modal-position-card .modal-position-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        color: rgba(255, 255, 255, 0.45);
        font-size: 0.72rem;
        font-weight: 400;
        gap: 2px;
    }

    .mobile-modal-position-card .modal-position-highlight {
        color: #f8fafc;
        font-weight: 600;
        font-size: 0.78rem;
    }

    /* ── Payout display in trade info row ─────────────────────────────── */
    .mobile-trade-info-payout .info-value {
        font-size: 0.52rem !important;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ── Settlement Scenarios (matches desktop scenarios-table) ─────── */
    #trade-confirm-modal .profit-scenarios {
        margin-top: 10px !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }

    #trade-confirm-modal .profit-scenarios h6 {
        display: block !important;
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: rgba(255, 255, 255, 0.5);
        margin-bottom: 0.5rem;
    }

    #trade-confirm-modal .scenarios-table thead th {
        background: transparent !important;
        color: rgba(255, 255, 255, 0.4) !important;
        font-size: 0.62rem !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.06em !important;
        padding: 0.45rem 0.65rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        white-space: nowrap !important;
    }

    #trade-confirm-modal .scenarios-table thead th:last-child {
        text-align: right !important;
    }

    #trade-confirm-modal .scenarios-table tbody td {
        padding: 0.5rem 0.65rem !important;
        font-size: 0.75rem !important;
        font-weight: 500 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        color: rgba(255, 255, 255, 0.7) !important;
        vertical-align: middle !important;
    }

    #trade-confirm-modal .scenarios-table tbody td:last-child {
        text-align: right !important;
    }

    #trade-confirm-modal .scenarios-table tbody tr:last-child td {
        border-bottom: none !important;
    }

    #trade-confirm-modal .scenarios-table tbody td.scenario-negative {
        color: var(--negative, #f87171) !important;
    }

    #trade-confirm-modal .scenarios-table tbody td.scenario-neutral {
        color: var(--text-primary, rgba(255, 255, 255, 0.7)) !important;
    }

    #trade-confirm-modal .scenarios-table tbody td.scenario-positive {
        color: var(--positive, #4ade80) !important;
    }

    /* ── Checkbox ────────────────────────────────────────────────────── */
    #trade-confirm-modal .form-check {
        margin-top: 10px !important;
        padding: 10px 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
    }

    #trade-confirm-modal .form-check-label {
        font-size: 0.72rem !important;
        color: rgba(255, 255, 255, 0.55) !important;
    }

    #trade-confirm-modal .form-check-input {
        border-color: rgba(255, 255, 255, 0.2) !important;
        background-color: transparent !important;
    }

    #trade-confirm-modal .form-check-input:checked {
        background-color: #3b82f6 !important;
        border-color: #3b82f6 !important;
    }

    /* ── Footer / CTA Button ────────────────────────────────────────── */
    #trade-confirm-modal .modal-footer {
        background: #141a23 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        padding: 12px 16px !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
        flex-shrink: 0;
    }

    #trade-confirm-modal #confirm-trade-btn {
        border: none !important;
        border-radius: 999px !important;
        font-weight: 700 !important;
        font-size: 0.94rem !important;
        padding: 0.72rem 1rem !important;
        letter-spacing: 0.02em !important;
        transition: opacity 0.15s ease, transform 0.15s ease !important;
        position: relative !important;
        overflow: hidden !important;
    }

    #trade-confirm-modal #confirm-trade-btn {
        z-index: 0;
    }

    #trade-confirm-modal #confirm-trade-btn .wave-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        opacity: 0.6;
        border-radius: inherit;
        z-index: 0;
    }

    /* Default: Call (green) theme - matches mobile trade button */
    #trade-confirm-modal #confirm-trade-btn,
    #trade-confirm-modal #confirm-trade-btn.call {
        background: rgba(34, 197, 94, 0.35) !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    /* Put theme */
    #trade-confirm-modal #confirm-trade-btn.put {
        background: rgba(239, 68, 68, 0.35) !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    /* Range theme */
    #trade-confirm-modal #confirm-trade-btn.range {
        background: rgba(168, 85, 247, 0.35) !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    #trade-confirm-modal #confirm-trade-btn:hover:not(:disabled) {
        opacity: 0.92 !important;
    }

    #trade-confirm-modal #confirm-trade-btn:active:not(:disabled) {
        transform: scale(0.985) !important;
    }

    #trade-confirm-modal #confirm-trade-btn:disabled {
        background: rgba(100, 116, 139, 0.25) !important;
        box-shadow: none !important;
        opacity: 0.5 !important;
        color: #94a3b8 !important;
    }

    #trade-confirm-modal #confirm-trade-btn:disabled .wave-canvas {
        display: none;
    }

    /* ═══════════════════════════════════════════════════════════════════
       POSITIONS: Hide "EXPIRES IN" labels/badges on mobile
       ═══════════════════════════════════════════════════════════════════ */
    .open-positions-table tbody td.col-expires:before,
    .user-positions-table tbody td.col-time-left:before {
        display: none !important;
    }

    .user-positions-table tbody tr.position-row td.col-cost {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
       PRODUCT TYPE TABS (Strikes / Range) - Underline Style
       ═══════════════════════════════════════════════════════════════════ */
    .product-type-tabs {
        display: none;
    }

    .product-tab {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 6px 4px 8px 4px;
        margin-bottom: -1px;
        border: none;
        background: transparent;
        color: var(--text-muted, #64748b);
        font-size: 0.8rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        cursor: pointer;
        transition: all 0.25s ease;
        position: relative;
    }

    .product-tab i {
        font-size: 0.85rem;
    }

    .product-tab.active {
        color: #fff;
        border-bottom: 2px solid var(--primary, #7dd3fc);
    }

    .product-tab[data-tab="range"].active {
        color: #e9d5ff;
        border-bottom-color: var(--ranger-purple);
    }

    .range-count-badge {
        background: rgba(147, 51, 234, 0.5);
        color: #e9d5ff;
        font-size: 0.6rem;
        font-weight: 700;
        padding: 1px 5px;
        border-radius: 8px;
        min-width: 16px;
        text-align: center;
    }

    .product-tab.active .range-count-badge {
        background: rgba(168, 85, 247, 0.7);
        color: #fff;
    }

    /* ═══════════════════════════════════════════════════════════════════
       RANGE CARDS
       ═══════════════════════════════════════════════════════════════════ */
    .range-cards-section {
        padding: 0;
    }

    .range-cards-hint {
        color: var(--text-secondary, #94a3b8);
        font-size: 0.7rem;
        margin-bottom: 12px;
        padding: 8px 12px;
        background: rgba(147, 51, 234, 0.06);
        border-radius: 8px;
        border-left: 3px solid rgba(147, 51, 234, 0.4);
    }

    .range-cards-scroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 4px 2px 12px 2px;
        scrollbar-width: none;
    }

    .range-cards-scroll::-webkit-scrollbar {
        display: none;
    }

    /* Individual Range Card */
    .range-card {
        flex: 0 0 auto;
        width: 155px;
        scroll-snap-align: start;
        background: linear-gradient(160deg,
            rgba(15, 23, 42, 0.95) 0%,
            rgba(30, 27, 50, 0.95) 100%);
        border: 1px solid rgba(148, 163, 184, 0.12);
        border-radius: 14px;
        padding: 14px 12px;
        cursor: pointer;
        transition: all 0.25s ease;
        position: relative;
        overflow: hidden;
    }

    .range-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #9333ea, var(--ranger-purple), #c084fc);
        opacity: 0.5;
        transition: opacity 0.25s ease;
    }

    .range-card:hover {
        border-color: rgba(168, 85, 247, 0.4);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(147, 51, 234, 0.2);
    }

    .range-card:hover::before {
        opacity: 1;
    }

    .range-card.selected {
        border-color: var(--ranger-purple);
        background: linear-gradient(160deg,
            rgba(30, 15, 60, 0.95) 0%,
            rgba(45, 20, 80, 0.95) 100%);
        box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.3),
                    0 8px 24px rgba(147, 51, 234, 0.3);
    }

    .range-card.selected::before {
        opacity: 1;
        height: 3px;
        background: linear-gradient(90deg, var(--ranger-purple), #c084fc, #e879f9);
    }

    .range-card-multiplier {
        font-size: 1.5rem;
        font-weight: 800;
        background: linear-gradient(135deg, #c084fc 0%, #e879f9 50%, #f0abfc 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1.1;
        margin-bottom: 6px;
    }

    .range-card-label {
        font-size: 0.55rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--ranger-purple);
        margin-bottom: 8px;
    }

    .range-card-zone {
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-primary, #e2e8f0);
        margin-bottom: 2px;
        line-height: 1.3;
    }

    .range-card-spread {
        font-size: 0.6rem;
        color: var(--text-secondary, #94a3b8);
    }

    .range-card-footer {
        margin-top: 10px;
        padding-top: 8px;
        border-top: 1px solid rgba(148, 163, 184, 0.08);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .range-card-premium {
        font-size: 0.62rem;
        color: var(--text-secondary, #94a3b8);
    }

    .range-card-premium strong {
        color: #f4d03f;
        font-weight: 700;
    }

    .range-card-tag {
        font-size: 0.5rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 2px 6px;
        border-radius: 6px;
        background: rgba(147, 51, 234, 0.2);
        color: #c084fc;
        border: 1px solid rgba(147, 51, 234, 0.3);
    }

    .range-card.selected .range-card-tag {
        background: rgba(168, 85, 247, 0.4);
        color: #e9d5ff;
    }

    /* Empty state */
    .range-empty-state {
        width: 100%;
        text-align: center;
        padding: 30px 20px;
        color: var(--text-secondary, #94a3b8);
    }

    .range-empty-state i {
        font-size: 2rem;
        opacity: 0.4;
        display: block;
        margin-bottom: 8px;
    }

    .range-empty-state p {
        margin: 0;
        font-size: 0.75rem;
    }

    /* Hide the old ranger zones on mobile when using card UI */
    .ranger-zones-container {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FINAL MOBILE REFINEMENTS - ULTRA MINIMALIST & NO SCROLLBARS
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    /* 1. Global Scrollbar Hide */
    * {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    
    *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* 2. Force Transparent/Minimal Cards in History & Positions */
    /* Target ANY card or card-like container in these sections */
    #history-section .card, 
    #history-section .card-body,
    #history-section .row > div > div,
    #history-section .history-overview > div > div,
    #positions-section .card,
    #positions-section .card-body,
    #positions-section .user-positions-table-container,
    #positions-section .open-positions-table-container,
    #scoreboard-section .card,
    #scoreboard-section .card-body {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    /* PnL Chart Card & Stats specifically - minimal styling */
    #history-section .row.mb-4 > .col-12 > div,
    #history-section .stats-card,
    #history-section .stat-card {
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.03) !important;
        border-radius: 12px !important;
        box-shadow: none !important;
    }

    /* Past Transactions header + filter row */
    .history-transactions-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin: 0.75rem 0 0.4rem 0 !important;
        padding: 0 !important;
    }

    .history-transactions-header {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--text-primary) !important;
    }

    /* Filter Button Container - Transparent */
    #history-section .history-filter-container {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0.25rem 0 0.5rem 0 !important;
    }

    /* Filter container placement - below PNL, above order cards */
    #history-section .history-filter-container.d-lg-none {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        margin: 0.25rem 0 0.5rem 0 !important;
        z-index: 1 !important;
        pointer-events: auto !important;
        background: transparent !important;
        border: none !important;
        display: flex !important;
        justify-content: flex-end !important; /* Align right */
    }

    #history-section .history-table-container {
        position: relative !important;
        margin-top: 0 !important;
    }

    /* 3. Filter Button - pill design matching sort-by buttons */
    #mobile-filter-btn {
        pointer-events: auto !important;
        width: auto !important;
        height: auto !important;
        padding: 0.38rem 0.64rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.3rem !important;
        border-radius: 17px !important;
        background: rgba(20, 28, 40, 0.5) !important;
        border: none !important;
        color: rgba(255, 255, 255, 0.5) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        min-width: 0 !important;
        font-size: 0.68rem !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        transition: all 0.2s ease !important;
    }
    
    #mobile-filter-btn:hover,
    #mobile-filter-btn:active {
        color: #fff !important;
        background: rgba(20, 28, 40, 0.7) !important;
        border: none !important;
    }
    
    #mobile-filter-btn span {
        display: inline !important;
        font-size: 0.68rem !important;
        font-weight: 600 !important;
    }

    #mobile-filter-btn i {
        font-size: 0.68rem !important;
        margin: 0 !important;
    }

    /* Remove legacy full-width behavior from bootstrap utility */
    #history-section .history-filter-container #mobile-filter-btn.w-100 {
        width: auto !important;
    }

    /* 4. Ensure chart text is visible against background */
    #history-section h5 {
        color: var(--text-muted) !important;
        font-size: 0.55rem !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* PNL title should read like ETH-PUT headline size */
    #history-section #history-pnl-title {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        color: var(--text-primary) !important;
        line-height: 1.1 !important;
    }
    
    #history-section h3 {
        color: var(--text-primary) !important;
        font-weight: 700;
    }
    
    /* 5. Item Cards (Rows) - Keep distinct but minimal */
    #history-section .history-table tbody tr,
    .user-positions-table tbody tr.position-row,
    .open-positions-table tbody tr,
    .leaderboard-row,
    .scoreboard-row {
        background: rgba(255, 255, 255, 0.025) !important;
        border: none !important;
        border-radius: 14px !important;
        margin-bottom: 0.4rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOL BUTTONS (Chart + Calculator) - Above Trade Button
   ═══════════════════════════════════════════════════════════════════════════ */
.mobile-tool-buttons {
    display: flex;
    gap: 0.42rem;
    margin-bottom: 0.64rem;
}

.mobile-tool-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.3rem 0.64rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-tool-btn:active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    transform: scale(0.97);
}

.mobile-tool-btn i {
    font-size: 0.68rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOOL BOTTOM SHEETS (Chart + Calculator) - Shared Styles
   ═══════════════════════════════════════════════════════════════════════════ */
.mobile-tool-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10100;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-tool-sheet-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-tool-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10101;
    background: #141a23;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
}

.mobile-tool-sheet.active {
    transform: translateY(0);
}

.mobile-tool-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem 0.75rem;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-tool-sheet-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #f8fafc;
}

.mobile-tool-sheet-title i {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
}

.mobile-tool-sheet-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 8px;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-tool-sheet-close:active {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.mobile-tool-sheet-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHART BOTTOM SHEET
   ═══════════════════════════════════════════════════════════════════════════ */
.mobile-chart-sheet {
    max-height: 70vh;
}

.mobile-chart-body {
    padding: 0;
    overflow: hidden;
}

#mobile-tv-chart-container {
    width: 100%;
    height: calc(70vh - 90px);
    min-height: 300px;
    background: #141a23;
    position: relative;
}

#mobile-tv-chart-container iframe {
    width: 100% !important;
    height: 100% !important;
    border: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAYOUT CALCULATOR BOTTOM SHEET
   ═══════════════════════════════════════════════════════════════════════════ */
.mobile-calc-sheet .mobile-tool-sheet-body {
    padding: 1rem 1.25rem 1.5rem;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.mobile-calc-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.8rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    transition: border-color 0.2s ease;
}

.mobile-calc-price-row:focus-within {
    border-color: rgba(56, 152, 236, 0.5);
}

.mobile-calc-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    white-space: nowrap;
}

.mobile-calc-price-value {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.mobile-calc-dollar {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
}

.mobile-calc-input {
    background: transparent;
    border: none;
    outline: none;
    color: #f8fafc;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: right;
    width: 110px;
    font-family: inherit;
    -moz-appearance: textfield;
}

.mobile-calc-input::-webkit-outer-spin-button,
.mobile-calc-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mobile-calc-slider-row {
    margin-bottom: 0.75rem;
}

.mobile-calc-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    outline: none;
    margin-bottom: 0.35rem;
}

.mobile-calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    border: 3px solid #141a23;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.mobile-calc-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    border: 3px solid #141a23;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.mobile-calc-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
}

.mobile-calc-countdown {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.85rem;
    padding: 0.45rem 0.65rem;
    background: rgba(255, 255, 255, 0.025);
    border-radius: 8px;
}

.mobile-calc-countdown i {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.3);
}

.mobile-calc-countdown strong {
    color: #fbbf24;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mobile-calc-results {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(255, 255, 255, 0.025);
    border-radius: 12px;
    overflow: hidden;
}

.mobile-calc-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.mobile-calc-result-item:last-child {
    border-bottom: none;
}

.mobile-calc-result-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.mobile-calc-result-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: #f8fafc;
    font-variant-numeric: tabular-nums;
}

.mobile-calc-pnl-row {
    background: rgba(255, 255, 255, 0.02);
}

.mobile-calc-pnl-row .mobile-calc-result-label {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

.mobile-calc-result-value.positive {
    color: #22c55e;
}

.mobile-calc-result-value.negative {
    color: #ef4444;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SKELETON LOADING STATE
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes skeletonShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-pulse {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%) !important;
    background-size: 200% 100% !important;
    animation: skeletonShimmer 1.8s ease-in-out infinite !important;
    color: transparent !important;
    border-color: transparent !important;
    pointer-events: none !important;
    user-select: none !important;
    border-radius: 8px !important;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.skeleton-pulse * {
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
}

.skeleton-pulse canvas {
    opacity: 0 !important;
    transition: opacity 0.4s ease !important;
}

/* Reveal phase: crossfade skeleton out, real content in */
.skeleton-reveal {
    background: transparent !important;
    animation: none !important;
    color: inherit !important;
    border-color: inherit !important;
    pointer-events: auto !important;
}

.skeleton-reveal * {
    opacity: 1 !important;
}

.skeleton-reveal canvas {
    opacity: 1 !important;
}

.mobile-trade-card.skeleton-loading .mobile-asset-subtitle {
    display: flex !important;
    min-height: 1.2rem;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}
.mobile-trade-card.skeleton-loading .mobile-asset-subtitle.skeleton-pulse {
    border-radius: 6px !important;
}

.mobile-trade-card.skeleton-loading .mobile-expiry-btn {
    min-width: 68px;
    min-height: 29px;
}

.mobile-trade-card.skeleton-loading .mobile-direction-btn {
    min-height: 41px;
}

.mobile-trade-card.skeleton-loading .mobile-strike-picker,
.mobile-trade-card.skeleton-loading .mobile-range-picker {
    min-height: 170px;
}
.mobile-trade-card.skeleton-loading .mobile-strike-picker.skeleton-pulse,
.mobile-trade-card.skeleton-loading .mobile-range-picker.skeleton-pulse {
    border-radius: 22px !important;
}

.mobile-trade-card.skeleton-loading .mobile-amount-section {
    min-height: 85px;
}
.mobile-trade-card.skeleton-loading .mobile-amount-section.skeleton-pulse {
    border-radius: 12px !important;
}

.mobile-trade-card.skeleton-loading .mobile-trade-info {
    min-height: 43px;
}
.mobile-trade-card.skeleton-loading .mobile-trade-info.skeleton-pulse {
    border-radius: 10px !important;
}

.mobile-trade-card.skeleton-loading .mobile-tool-buttons {
    min-height: 38px;
}
.mobile-trade-card.skeleton-loading .mobile-tool-buttons.skeleton-pulse {
    border-radius: 10px !important;
}

.mobile-trade-card.skeleton-loading .mobile-trade-btn {
    min-height: 43px;
}
.mobile-trade-card.skeleton-loading .mobile-trade-btn.skeleton-pulse {
    border-radius: 14px !important;
}

.mobile-trade-card.skeleton-loading .mobile-prediction-prompt {
    min-height: 1.1rem;
    width: 55%;
}
.mobile-trade-card.skeleton-loading .mobile-prediction-prompt.skeleton-pulse {
    border-radius: 6px !important;
}

/* Hide public beta elements on mobile */
.beta-flag-card,
.beta-badge-container,
.beta-info-modal {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE SIDEBAR WALLET - Hide connect buttons (moved to header bottom sheet)
   Keep connected state styling (Fund, Swap, address) intact in sidebar
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

    /* Hide entire wallet section from sidebar — actions are now in bottom sheets */
    .wallet-section-mobile {
        display: none !important;
    }

    /* Hide disconnect from sidebar nav — it's in the wallet actions sheet now */
    li.nav-item:has(#disconnect-wallet-btn-mobile) {
        display: none !important;
    }

    /* (Keep original selectors hidden as fallback) */
    .wallet-section-mobile {
        margin-bottom: 1.25rem !important;
        padding-bottom: 1.25rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        width: 100% !important;
    }

    /* ── Connected State - Wallet Info Header ────────────────────────── */
    .wallet-section-mobile .wallet-info-header {
        display: flex !important;
        align-items: center !important;
        gap: 0.6rem !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        margin-bottom: 0.75rem !important;
        width: 100% !important;
    }

    .wallet-section-mobile .connected-details .connection-dot {
        width: 10px !important;
        height: 10px !important;
        background-color: var(--positive, #22c55e) !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.5) !important;
    }

    .wallet-section-mobile .connected-details .address-display {
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
        letter-spacing: 0.02em !important;
    }

    /* ── Connected State - Wallet Action Items (Fund, Swap, etc.) ──── */
    .wallet-section-mobile .wallet-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        margin-bottom: 0.75rem !important;
        width: 100% !important;
    }

    .wallet-section-mobile .wallet-actions .wallet-action-item {
        padding: 0.55rem 0.75rem !important;
        border: none !important;
        border-radius: 10px !important;
        background: transparent !important;
        color: var(--text-primary) !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.65rem !important;
        width: 100% !important;
        text-decoration: none !important;
        transition: background 0.2s ease !important;
    }

    .wallet-section-mobile .wallet-actions .wallet-action-item:hover,
    .wallet-section-mobile .wallet-actions .wallet-action-item:active {
        background: rgba(255, 255, 255, 0.05) !important;
    }

    .wallet-section-mobile .wallet-actions .wallet-action-icon {
        width: 2rem !important;
        min-width: 2rem !important;
        height: 2rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border-radius: 8px !important;
        flex-shrink: 0 !important;
    }

    .wallet-section-mobile .wallet-actions .wallet-action-item i {
        font-size: 1rem !important;
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .wallet-section-mobile .wallet-actions .wallet-action-label {
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        color: var(--text-primary) !important;
        letter-spacing: 0.02em !important;
    }

    /* ── Disconnect Button in Nav ─────────────────────────────────────── */
    #disconnect-wallet-btn-mobile {
        display: none !important;
    }

    /* ═══════════════════════════════════════════════════════════════════
       HEADER WALLET BUTTON - Pill button left of hamburger
       Styled to match the mobile trading UI (trade button aesthetic)
       ═══════════════════════════════════════════════════════════════════ */
    /* ── Header wallet connect button ────────────────────────────────── */
    /* SAME BOX AS THE BELL, different fill. app.css:2400 states the header
       rule: the bell and the wallet control are siblings doing the same kind
       of job, so they must not read as two different KINDS of control. At
       26px and a 999px radius this button was a third shape sitting beside a
       44px rounded rectangle — a stadium pill next to a box.
       Rank is carried by the FILL, not by the geometry: white against the
       bell's transparent says "this is the thing to press", while the shared
       44px box and --r-card radius keep them one family. 44px is also the
       touch minimum the rest of the mobile header holds to. */
    #mobile-header-wallet-btn {
        all: unset !important;
        box-sizing: border-box !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 44px !important;
        min-height: 44px !important;
        border: 1px solid transparent !important;
        border-radius: var(--r-card) !important;
        background: #fff !important;
        color: #0a0a0a !important;
        margin-left: auto !important;
        /* 0.5rem, the SAME gap `.hdr-tools` puts between its own controls
           (app.css:2397), so the whole header row keeps one rhythm. At 0 the
           white fill ran straight into the bell's border and the pair read as
           one welded control rather than two. */
        margin-right: 0.5rem !important;
        padding: 0 14px !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        -webkit-tap-highlight-color: transparent !important;
        flex-shrink: 0 !important;
    }

    /* 0.65rem was sized for the old 26px box; in a 44px box it read as a
       label on an empty field. */
    #mobile-header-wallet-btn span {
        font-size: 0.8rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.02em !important;
        line-height: 1 !important;
    }

    #mobile-header-wallet-btn:active {
        transform: scale(0.96) !important;
        opacity: 0.85 !important;
    }

    /* Hide when connected */
    #mobile-header-wallet-btn.connected {
        display: none !important;
    }

    /* ── Hamburger toggler - sits to the RIGHT of wallet btn ─────────── */
    .navbar-toggler {
        order: 99 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        padding: 0 0 0 0.35rem !important;
        margin: 0 !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .navbar-toggler:focus,
    .navbar-toggler:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }

    .navbar-toggler .navbar-toggler-icon {
        display: none !important;
    }

    .mobile-wallet-indicator {
        margin-right: 0.3rem !important;
    }

    .mobile-wallet-indicator.not-connected {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WALLET CONNECT BOTTOM SHEET
   Slides up from bottom with backdrop, matching the trade confirm modal style
   ═══════════════════════════════════════════════════════════════════════════ */

.mobile-wallet-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10100;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-wallet-sheet-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-wallet-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10101;
    background: #141a23;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
}

.mobile-wallet-sheet.active {
    transform: translateY(0);
}

/* Drag handle */
.mobile-wallet-sheet-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px 0;
    cursor: grab;
}

.mobile-wallet-sheet-handle span {
    width: 36px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
}

/* Body content */
.mobile-wallet-sheet-body {
    padding: 0 1.25rem 1.5rem;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

.mobile-wallet-sheet-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0 0 0.25rem;
}

.mobile-wallet-sheet-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 1.25rem;
}

/* ── Option Buttons ─────────────────────────────────────────────────── */
.mobile-wallet-sheet-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    cursor: pointer;
    transition: opacity 0.15s ease;
    text-align: left;
}

.mobile-wallet-sheet-btn:last-child {
    border-bottom: none;
}

.mobile-wallet-sheet-btn:active {
    opacity: 0.6;
}

.mobile-wallet-sheet-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mobile-wallet-sheet-btn.primary .mobile-wallet-sheet-btn-icon {
    color: #00E5FF;
}

.mobile-wallet-sheet-btn.secondary .mobile-wallet-sheet-btn-icon {
    color: #fde047;
}

.mobile-wallet-sheet-btn-icon i {
    font-size: 1.1rem;
}

.mobile-wallet-sheet-btn-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.mobile-wallet-sheet-btn-text strong {
    font-size: 0.85rem;
    font-weight: 600;
    color: #f8fafc;
    line-height: 1.3;
}

.mobile-wallet-sheet-btn-text small {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.3;
}

.mobile-wallet-sheet-btn-arrow {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

/* Default icon color (white) for action buttons */
.mobile-wallet-sheet-btn-icon {
    color: #fff;
}

/* Disconnect button accent */
.mobile-wallet-sheet-btn.disconnect .mobile-wallet-sheet-btn-icon {
    color: #f87171;
}

.mobile-wallet-sheet-btn.disconnect .mobile-wallet-sheet-btn-text strong {
    color: #f87171;
}

/* Make wallet indicator clickable when connected */
.mobile-wallet-indicator.connected {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mobile-wallet-indicator.connected:active {
    opacity: 0.7;
}

/* ═════════════════════════════════════════════════════════════════════════
   ALL ODETTE MODALS → Unified Bottom Sheet on Mobile
   (Swap Assets, Fund with Card, Deposit USDC, and the wallet-kit dialogs:
   Withdraw, Your wallets, Secure, Unlock)
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

    /* --- Shared bottom-sheet layout for all three modals --- */

    #swapModal.modal,
    #depositModal.modal,
    #withdrawModal.modal,
    #walletPickerModal.modal,
    #secureWalletModal.modal,
    #unlockModal.modal,
    #funding-options-modal.modal {
        padding: 0 !important;
        overflow: hidden !important;
    }

    #swapModal.modal.fade .modal-dialog,
    #depositModal.modal.fade .modal-dialog,
    #withdrawModal.modal.fade .modal-dialog,
    #walletPickerModal.modal.fade .modal-dialog,
    #secureWalletModal.modal.fade .modal-dialog,
    #unlockModal.modal.fade .modal-dialog,
    #funding-options-modal.modal.fade .modal-dialog {
        transform: translateY(100%) !important;
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    #swapModal.modal.show .modal-dialog,
    #depositModal.modal.show .modal-dialog,
    #withdrawModal.modal.show .modal-dialog,
    #walletPickerModal.modal.show .modal-dialog,
    #secureWalletModal.modal.show .modal-dialog,
    #unlockModal.modal.show .modal-dialog,
    #funding-options-modal.modal.show .modal-dialog {
        transform: translateY(0) !important;
    }

    #swapModal .modal-dialog,
    #depositModal .modal-dialog,
    #withdrawModal .modal-dialog,
    #walletPickerModal .modal-dialog,
    #secureWalletModal .modal-dialog,
    #unlockModal .modal-dialog,
    #funding-options-modal .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        min-height: auto !important;
        align-items: flex-end !important;
    }

    #swapModal .modal-dialog.modal-dialog-centered,
    #depositModal .modal-dialog.modal-dialog-centered,
    #withdrawModal .modal-dialog.modal-dialog-centered,
    #walletPickerModal .modal-dialog.modal-dialog-centered,
    #secureWalletModal .modal-dialog.modal-dialog-centered,
    #unlockModal .modal-dialog.modal-dialog-centered,
    #funding-options-modal .modal-dialog.modal-dialog-centered {
        min-height: auto !important;
        align-items: flex-end !important;
        display: block !important;
    }

    /* --- Shared .odette-modal-content overrides for bottom sheet --- */

    #swapModal .odette-modal-content,
    #depositModal .odette-modal-content,
    #withdrawModal .odette-modal-content,
    #walletPickerModal .odette-modal-content,
    #secureWalletModal .odette-modal-content,
    #unlockModal .odette-modal-content,
    #funding-options-modal .odette-modal-content {
        border-radius: 20px 20px 0 0 !important;
        background: #192234 !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5) !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    /* Grab handle at top */
    #swapModal .odette-modal-header,
    #depositModal .odette-modal-header,
    #funding-options-modal .odette-modal-header,
    #withdrawModal .wk-head,
    #walletPickerModal .wk-head,
    #secureWalletModal .wk-head,
    #unlockModal .wk-head {
        position: relative !important;
        padding-top: 1.5rem !important;
    }

    #swapModal .odette-modal-header::before,
    #depositModal .odette-modal-header::before,
    #funding-options-modal .odette-modal-header::before,
    #withdrawModal .wk-head::before,
    #walletPickerModal .wk-head::before,
    #secureWalletModal .wk-head::before,
    #unlockModal .wk-head::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.15);
    }

    /* Body */
    #swapModal .odette-modal-body,
    #depositModal .odette-modal-body,
    #funding-options-modal .odette-modal-body {
        padding: 1rem 1.25rem !important;
    }

    /* Footer */
    #swapModal .odette-modal-footer,
    #depositModal .odette-modal-footer,
    #funding-options-modal .odette-modal-footer {
        padding: 0.75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    /* Buttons fill width on mobile */
    #swapModal .odette-btn-primary,
    #swapModal .odette-btn-secondary,
    #swapModal .odette-btn-ghost,
    #depositModal .odette-btn-primary,
    #depositModal .odette-btn-secondary,
    #depositModal .odette-btn-ghost,
    #funding-options-modal .odette-btn-primary,
    #funding-options-modal .odette-btn-secondary,
    #funding-options-modal .odette-btn-ghost {
        width: 100% !important;
        border-radius: 12px !important;
        font-size: 0.85rem !important;
        padding: 0.7rem 1rem !important;
    }

    /* Dropdowns */
    #swapModal .odette-dropdown-menu,
    #funding-options-modal .odette-dropdown-menu {
        background: #1a1d2e !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 12px !important;
    }

    /* --- Swap-specific mobile tweaks --- */

    #swapModal .swap-card {
        border-radius: 14px !important;
        padding: 1rem !important;
    }

    #swapModal .swap-amount-input {
        font-size: 1.5rem !important;
    }

    #swapModal .swap-token-btn {
        padding: 0.45rem 0.75rem !important;
        font-size: 0.85rem !important;
    }

    #swapModal .swap-token-display {
        padding: 0.45rem 0.75rem !important;
        font-size: 0.85rem !important;
    }

    #swapModal .swap-quick-chip {
        border-radius: 10px !important;
        padding: 0.45rem 0 !important;
        font-size: 0.78rem !important;
    }

    #swapModal .swap-quick-chip:active {
        background: rgba(255, 255, 255, 0.08) !important;
    }

    #swapModal .swap-arrow-circle {
        width: 36px !important;
        height: 36px !important;
    }

    /* --- Fund-with-card-specific mobile tweaks --- */

    #funding-options-modal .funding-select-btn {
        padding: 0.7rem 1rem !important;
        border-radius: 12px !important;
        font-size: 0.88rem !important;
    }

    #funding-options-modal .funding-dest-card {
        border-radius: 12px !important;
        padding: 0.75rem 1rem !important;
    }

    #funding-options-modal .funding-subtitle {
        font-size: 0.78rem !important;
    }

    /* --- Deposit-specific mobile tweaks --- */

    #depositModal .deposit-addr-card {
        border-radius: 14px !important;
        padding: 1.1rem !important;
    }

    #depositModal .deposit-addr-text {
        font-size: 0.72rem !important;
    }

    #depositModal .deposit-copy-btn {
        border-radius: 10px !important;
        padding: 0.5rem 1rem !important;
        font-size: 0.78rem !important;
    }

    #depositModal .deposit-warning {
        border-radius: 12px !important;
        padding: 0.85rem !important;
    }

    #depositModal .deposit-network-badge {
        font-size: var(--fs-ui) !important;
    }

    /* Bootstrap backdrop override */
    .modal-backdrop {
        background: rgba(0, 0, 0, 0.6) !important;
    }
}
/* ═══════════════════════════════════════════════════════════════════════════
   MARKET WEATHER BOTTOM SHEET
   Geometry and motion copied from the wallet sheet. No max-height: the sheet
   is at most four rows, so it sizes to its content.
   ═══════════════════════════════════════════════════════════════════════════ */

.mobile-weather-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10100;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-weather-sheet-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-weather-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10101;
    background: #141a23;
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
}

.mobile-weather-sheet.active {
    transform: translateY(0);
}

.mobile-weather-sheet-handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px 0;
    cursor: grab;
}

.mobile-weather-sheet-handle span {
    width: 36px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
}

.mobile-weather-sheet-close {
    position: absolute;
    top: 6px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--fs-body);
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.mobile-weather-sheet-close:active {
    background: rgba(255, 255, 255, 0.08);
}

.mobile-weather-sheet-close:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
}

.mobile-weather-sheet-body {
    padding: 0.25rem 1.25rem 1.5rem;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}

/* .wt-* is defined in app.css with inline colours. Size only here. */
.mobile-weather-sheet-body .wt-row {
    padding: 0.6rem 0;
}

.mobile-weather-sheet-body .wt-label {
    font-size: 0.95rem;
}

.mobile-weather-sheet-body .wt-badge {
    font-size: 0.68rem;
}

/* warn and forecast appear for bucket 1-3 only */
.mobile-weather-sheet-body .wt-row--detail,
.mobile-weather-sheet-body .wt-row--warn,
.mobile-weather-sheet-body .wt-row--forecast {
    font-size: 0.78rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE REVAMP · HISTORY + TROLLBOX — last in the cascade. One card
   treatment for History, on the shared surface/type/radius scale.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    /* ── Trade history ─────────────────────────────────────────────────── */
    #history-section {
        padding: 16px 12px calc(72px + env(safe-area-inset-bottom)) !important;
        background: var(--background);
    }

    #history-section .history-header-row {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 16px !important;
    }

    #history-section .history-header-row h2 {
        margin: 0 !important;
        color: var(--text-primary) !important;
        font-family: var(--sans);
        font-size: var(--fs-fig) !important;
        font-weight: 600 !important;
        letter-spacing: var(--tr-fig);
        line-height: 1.1;
    }

    #history-section .history-date-toggles {
        display: inline-flex !important;
        align-items: center;
        gap: 2px;
        flex: 0 0 auto;
        padding: 3px;
        border: 1px solid var(--border-color);
        border-radius: var(--r-input);
        background: var(--panel-sunken);
    }

    #history-section .date-toggle {
        min-width: 40px;
        min-height: 40px;
        padding: 0 8px !important;
        border: 0 !important;
        border-radius: var(--r-xs) !important;
        background: transparent !important;
        color: var(--text-muted) !important;
        font-family: var(--sans);
        font-size: var(--fs-ui) !important;
        font-weight: 600 !important;
        line-height: 1;
    }

    #history-section .date-toggle.active {
        background: var(--primary) !important;
        color: var(--background) !important;
    }

    #history-section .date-toggle:focus-visible,
    #mobile-filter-btn:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }

    #history-section .history-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    #history-section .history-stat-card,
    #history-section .history-stat-card-wide {
        min-height: 72px;
        padding: 10px !important;
        gap: 4px;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-card) !important;
        background: var(--card-bg) !important;
    }

    #history-section .history-stat-card-wide {
        grid-column: span 3;
    }

    #history-section .history-stat-label {
        color: var(--text-muted) !important;
        font-family: var(--sans);
        font-size: var(--fs-micro) !important;
        font-weight: 600 !important;
        letter-spacing: var(--tr-caps);
        text-transform: uppercase;
    }

    #history-section .history-stat-value {
        color: var(--text-primary) !important;
        font-family: var(--num);
        font-size: var(--fs-stat) !important;
        font-weight: 600 !important;
        font-variant-numeric: tabular-nums;
    }

    #history-section .history-stat-value.hist-positive { color: var(--positive) !important; }
    #history-section .history-stat-value.hist-negative { color: var(--negative) !important; }

    #history-section .row.mb-4:nth-of-type(2) > .col-12 > div {
        padding: 14px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-card) !important;
        background: var(--card-bg) !important;
    }

    #history-section #history-pnl-title {
        color: var(--text-muted) !important;
        font-family: var(--sans);
        font-size: var(--fs-micro) !important;
        font-weight: 600 !important;
        letter-spacing: var(--tr-caps) !important;
        text-transform: uppercase;
    }

    #history-section #pnl-display-value {
        color: var(--text-primary) !important;
        font-family: var(--num);
        font-size: var(--fs-fig) !important;
        font-variant-numeric: tabular-nums;
    }

    #history-section .history-transactions-row {
        margin: 16px 0 8px !important;
    }

    #history-section .history-transactions-header {
        color: var(--text-primary) !important;
        font-family: var(--sans);
        font-size: var(--fs-title) !important;
        font-weight: 600 !important;
    }

    #mobile-filter-btn {
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 0 12px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-input) !important;
        background: var(--panel-sunken) !important;
        color: var(--text-secondary) !important;
        font-family: var(--sans);
        font-size: var(--fs-ui) !important;
    }

    #history-section .history-table tbody tr {
        gap: 8px !important;
        margin-bottom: 8px !important;
        padding: 12px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-card) !important;
        background: var(--card-bg) !important;
    }

    #history-section .history-table tbody td.col-asset {
        font-family: var(--sans);
        font-size: var(--fs-title) !important;
    }

    #history-section .history-table tbody td.col-settlement,
    #history-section .history-table tbody td.col-asset .position-cost-label {
        color: var(--text-muted) !important;
        font-family: var(--sans);
        font-size: var(--fs-ui) !important;
    }

    #history-section .history-table tbody td.col-pnl {
        padding-top: 8px !important;
        border-top-color: var(--border-color) !important;
        font-family: var(--num);
        font-size: var(--fs-stat) !important;
        font-variant-numeric: tabular-nums;
    }

    /* ── Trollbox: a consistent mobile sheet above the app navigation ─── */
    #trollbox-widget.trollbox-widget {
        right: 8px !important;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        left: 8px !important;
        width: auto !important;
        height: min(440px, calc(100dvh - 80px)) !important;
        max-height: calc(100dvh - 80px) !important;
        min-height: 300px;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-card) !important;
        background: var(--card-bg) !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
    }

    #trollbox-widget.trollbox-widget.minimized {
        height: 48px !important;
        min-height: 48px;
    }

    #trollbox-widget .trollbox-header {
        min-height: 48px;
        padding: 8px 12px;
        border-radius: var(--r-card) var(--r-card) 0 0;
        background: var(--panel-sunken);
    }

    #trollbox-widget .trollbox-controls .btn {
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
    }

    #trollbox-widget .trollbox-messages {
        padding: 10px 12px;
        gap: 8px;
    }

    #trollbox-widget .message {
        padding: 8px 10px;
        border-left-color: var(--border-light);
        background: var(--panel-sunken);
        font-size: var(--fs-ui);
    }

    #trollbox-widget .trollbox-input-container {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--card-bg);
    }

    #trollbox-widget .trollbox-input {
        min-height: 40px;
        padding: 8px 10px;
        font-size: var(--fs-ui);
    }

    #trollbox-widget .trollbox-send-btn,
    #trollbox-widget .trollbox-tray-btn {
        min-width: 40px;
        min-height: 40px;
    }
}

@media (max-width: 374px) {
    #history-section .history-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #history-section .history-stat-card-wide {
        grid-column: span 2;
    }

    #history-section .date-toggle {
        min-width: 34px;
        padding: 0 6px !important;
    }
}

/* =============================================================================
   MOBILE SURFACE ALIGNMENT — Positions + Scoreboard. Final id-scoped
   overrides on the shared tokens. Markup and data bindings unchanged.
   ============================================================================= */
@media (max-width: 991px) {
    #positions-section,
    #scoreboard-section {
        padding: 18px 0 calc(86px + env(safe-area-inset-bottom, 0px)) !important;
        background: var(--background) !important;
    }

    #positions-section > .container,
    #scoreboard-section > .sb-legacy {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 12px !important;
    }

    .mobile-surface-head {
        display: flex;
        align-items: center;
        min-height: 32px;
        margin: 0 0 14px;
    }

    .mobile-surface-title {
        margin: 0;
        color: var(--text-primary);
        letter-spacing: normal;
    }

    /* ---- Portfolio ------------------------------------------------------- */
    #positions-section .row,
    #positions-section .col-12,
    #positions-section .professional-asset-header {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #positions-section .asset-selector-wrapper.positions-wrapper {
        overflow: visible !important;
        border: 0 !important;
        background: transparent !important;
    }

    #positions-section .positions-unified-layout {
        display: block !important;
    }

    #positions-section .positions-sidebar {
        display: flex !important;
        gap: 2px !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        margin: 0 0 12px !important;
        padding: 3px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-input) !important;
        background: var(--panel-sunken) !important;
        scrollbar-width: none;
    }

    #positions-section .positions-sidebar::-webkit-scrollbar { display: none; }
    #positions-section .positions-slide-indicator,
    #positions-section .positions-top-tabs,
    #positions-section .positions-price-ticker { display: none !important; }

    #positions-section .positions-sidebar-btn {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        min-height: 40px !important;
        padding: 0 10px !important;
        border: 0 !important;
        border-radius: var(--r-xs) !important;
        background: transparent !important;
        color: var(--text-muted) !important;
        font: inherit !important;
        font-size: var(--fs-ui) !important;
        font-weight: 600 !important;
        letter-spacing: normal !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    #positions-section .positions-sidebar-btn i { font-size: var(--fs-body) !important; }
    #positions-section .positions-sidebar-label br { display: none; }
    #positions-section .positions-sidebar-btn.active {
        background: rgba(255, 255, 255, 0.07) !important;
        color: var(--text-primary) !important;
    }

    #positions-section .positions-panel-main,
    #positions-section .positions-inner-content {
        display: block !important;
        padding: 0 !important;
        background: transparent !important;
    }

    #positions-section .positions-split-header {
        display: flex !important;
        align-items: center;
        gap: 7px;
        margin: 0 0 10px !important;
        color: var(--text-primary) !important;
        font-size: var(--fs-body) !important;
        font-weight: 600 !important;
    }

    #positions-section .user-positions-table-container,
    #positions-section .open-positions-table-container {
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #positions-section .user-positions-table tbody tr.position-row,
    #positions-section .open-positions-table tbody tr {
        margin-bottom: 10px !important;
        padding: 14px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-card) !important;
        background: var(--card-bg) !important;
        box-shadow: none !important;
    }

    #positions-section .user-positions-table tbody tr.position-row .col-belief,
    #positions-section .open-positions-table tbody tr .col-belief {
        color: var(--text-secondary) !important;
    }

    #positions-section .user-positions-table tbody tr.position-row .col-pnl,
    #positions-section .open-positions-table tbody tr .col-pnl,
    #positions-section .user-positions-table tbody tr.position-row .col-actions,
    #positions-section .open-positions-table tbody tr .col-actions {
        border-color: var(--border-color) !important;
    }

    #positions-section .view-tx-btn,
    #positions-section .view-option-btn,
    #positions-section .refresh-positions-btn {
        border: 1px solid var(--border-color) !important;
        background: transparent !important;
        color: var(--text-secondary) !important;
        border-radius: var(--r-xs) !important;
    }

    #positions-section .sort-controls {
        gap: 8px !important;
        margin: 0 0 12px !important;
    }

    #positions-section .sort-tabs {
        gap: 2px !important;
        padding: 3px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-input) !important;
        background: var(--panel-sunken) !important;
    }

    #positions-section .sort-tab {
        min-height: 40px !important;
        border-radius: var(--r-xs) !important;
        background: transparent !important;
        color: var(--text-muted) !important;
    }

    #positions-section .sort-tab.active {
        background: rgba(255, 255, 255, 0.07) !important;
        color: var(--text-primary) !important;
    }

    #positions-section .open-positions-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0 !important;
        margin: 0 0 12px !important;
        padding: 4px !important;
        overflow: hidden !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-card) !important;
        background: var(--card-bg) !important;
    }

    #positions-section .ops-stat {
        min-width: 0 !important;
        padding: 10px 6px !important;
        text-align: center;
    }
    #positions-section .ops-sep { display: none !important; }
    #positions-section .ops-stat-value { color: var(--text-primary) !important; }
    #positions-section .ops-stat-label { color: var(--text-muted) !important; }

    /* ---- Weekly competition --------------------------------------------- */
    #scoreboard-section #scoreboard-cards { display: none !important; }
    #scoreboard-section .scoreboard-top-tabs {
        gap: 2px !important;
        margin: 0 0 12px !important;
        padding: 3px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-input) !important;
        background: var(--panel-sunken) !important;
    }

    #scoreboard-section .scoreboard-top-tab {
        flex: 1 !important;
        min-height: 40px !important;
        padding: 0 10px !important;
        border-radius: var(--r-xs) !important;
        color: var(--text-muted) !important;
        font-size: var(--fs-ui) !important;
        font-weight: 600 !important;
    }

    #scoreboard-section .scoreboard-top-tab.active {
        background: rgba(255, 255, 255, 0.07) !important;
        color: var(--text-primary) !important;
    }

    #scoreboard-section .scoreboard-period-toggle { margin: 0 0 10px !important; }
    #scoreboard-section .scoreboard-tabs {
        gap: 2px !important;
        padding: 3px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-input) !important;
        background: var(--panel-sunken) !important;
    }

    #scoreboard-section .scoreboard-tab {
        min-height: 40px !important;
        padding: 0 8px !important;
        border-radius: var(--r-xs) !important;
        background: transparent !important;
        color: var(--text-muted) !important;
        font-size: var(--fs-ui) !important;
    }

    #scoreboard-section .scoreboard-tab.active {
        background: rgba(255, 255, 255, 0.07) !important;
        color: var(--text-primary) !important;
    }

    #scoreboard-section .rules-card {
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-card) !important;
        background: var(--card-bg) !important;
        box-shadow: none !important;
    }

    /* NEITHER OF THESE IS A CARD — each is the grid that cards sit on.
       `.podium-card` and `.sb-stat-card` already carry their own border,
       radius and surface (rules further down this file), and both grids have
       `padding: 0`, so a frame here drew a second hairline hugging the first
       with no gap between them and painted a surface behind a surface. A
       container earns a frame when it groups things that have none — which
       is why `.rules-card` above keeps its own. */
    #scoreboard-section .scoreboard-podium,
    #scoreboard-section .scoreboard-summary-stats {
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #scoreboard-section .score-legend {
        margin: 0 0 10px !important;
        padding: 0 2px !important;
        color: var(--text-muted) !important;
    }

    #scoreboard-section .scoreboard-table tbody tr,
    #scoreboard-section .scoreboard-table tbody tr:nth-child(odd),
    #scoreboard-section .scoreboard-table tbody tr:nth-child(even),
    #scoreboard-section .scoreboard-table tbody tr.rank-1,
    #scoreboard-section .scoreboard-table tbody tr.rank-2,
    #scoreboard-section .scoreboard-table tbody tr.rank-3 {
        margin-bottom: 10px !important;
        padding: 14px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-card) !important;
        background: var(--card-bg) !important;
        box-shadow: none !important;
    }

    /* AN OPEN ROW AND ITS BREAKDOWN ARE ONE CARD.
       The breakdown is the evidence for the score printed directly above it,
       so it has to sit inside the same frame — which is what the podium gets
       for free, because score.js appends its panel as a CHILD of the card. A
       table row cannot do that: a <tr> may not contain a <div>, so the panel
       is a sibling <tr> and the seam has to be drawn rather than inherited.
       The row gives up its bottom corners, its bottom border and its margin;
       the panel takes the bottom corners and keeps the same surface.

       WHY THE :nth-child DUPLICATES. The rule above lists
       `tr:nth-child(odd)`/`(even)` among its selectors, and a pseudo-class
       counts as a class — (1,2,2), which outranks the (1,1,3) of a plain
       `tr.sb-expanded`. Every row is odd or even, so without these the rule
       above always wins and both parts keep a full frame 10px apart. Raising
       specificity here is the fix; reordering alone is not enough. */
    #scoreboard-section .scoreboard-table tbody tr.sb-expanded,
    #scoreboard-section .scoreboard-table tbody tr.sb-expanded:nth-child(odd),
    #scoreboard-section .scoreboard-table tbody tr.sb-expanded:nth-child(even) {
        margin-bottom: 0 !important;
        border-bottom-color: transparent !important;
        border-radius: var(--r-card) var(--r-card) 0 0 !important;
    }

    #scoreboard-section .scoreboard-table tbody tr.score-detail-row,
    #scoreboard-section .scoreboard-table tbody tr.score-detail-row:nth-child(odd),
    #scoreboard-section .scoreboard-table tbody tr.score-detail-row:nth-child(even) {
        margin-top: 0 !important;
        margin-bottom: 10px !important;
        padding-top: 0 !important;
        border-top: none !important;
        border-radius: 0 0 var(--r-card) var(--r-card) !important;
    }

    /* YOUR OWN ROW.
       The tint and the blue border, and NO left rail. The desktop board marks
       you with a rail because its rows have no border of their own; on a
       phone every row is already a bordered card and `.sb-row-me` turns that
       border blue (app.css:12178), so a rail on top of it was a second mark
       for one fact — and the only one of the two that broke the card's edge.
       The `:nth-child` duplicates are required for the same reason as the
       weld above: the row rule's own `:nth-child` members score (1,2,2) and
       beat a plain `tr.sb-row-me` at (1,1,3). This is why the highlight was
       invisible on a phone. */
    #scoreboard-section .scoreboard-table tbody tr.sb-row-me,
    #scoreboard-section .scoreboard-table tbody tr.sb-row-me:nth-child(odd),
    #scoreboard-section .scoreboard-table tbody tr.sb-row-me:nth-child(even) {
        background: rgba(125, 211, 252, 0.07) !important;
        border-color: rgba(125, 211, 252, 0.28) !important;
    }

    /* Held open, the panel is the lower half of your row, so it carries the
       same tint and the same edge. */
    #scoreboard-section .scoreboard-table tbody tr.sb-row-me.sb-expanded + tr.score-detail-row,
    #scoreboard-section .scoreboard-table tbody tr.sb-row-me.sb-expanded + tr.score-detail-row:nth-child(odd),
    #scoreboard-section .scoreboard-table tbody tr.sb-row-me.sb-expanded + tr.score-detail-row:nth-child(even) {
        background: rgba(125, 211, 252, 0.07) !important;
        border-color: rgba(125, 211, 252, 0.28) !important;
    }

    #scoreboard-section .rules-layout,
    #scoreboard-section .rules-top-row { gap: 10px !important; }
    #scoreboard-section .rules-card { padding: 14px !important; }
    #scoreboard-section .rules-card-title,
    #scoreboard-section .rules-prize-rank,
    #scoreboard-section .rules-note,
    #scoreboard-section .rules-footer-label { color: var(--text-muted) !important; }
    #scoreboard-section .rules-score-label { color: var(--text-secondary) !important; }
    #scoreboard-section .rules-prize-row {
        background: var(--panel-sunken) !important;
        border-radius: var(--r-xs) !important;
    }

    /* ---- Referrals: same dashboard as desktop. Density and row geometry
       change, nothing else. ---- */
    #referral-section {
        padding: 18px 0 calc(86px + env(safe-area-inset-bottom, 0px)) !important;
        background: var(--background) !important;
    }

    #referral-section .ref-wrap {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 12px !important;
    }

    #referral-section .ref-head {
        align-items: flex-start !important;
        gap: 12px !important;
        margin-bottom: 14px !important;
    }

    #referral-section .ref-title {
        color: var(--text-primary) !important;
        font-size: var(--fs-fig) !important;
    }

    #referral-section .ref-head-r,
    #referral-section .ref-link-row,
    #referral-section #referral-link-create {
        width: 100% !important;
    }

    #referral-section .ref-link-row {
        align-items: stretch !important;
        gap: 8px !important;
    }

    #referral-section .ref-link-input {
        min-width: 0 !important;
        min-height: 44px !important;
        padding: 0 12px !important;
        border-color: var(--mobile-panel-border) !important;
        border-radius: var(--r-input) !important;
        background: var(--mobile-panel-subtle) !important;
        color: var(--text-secondary) !important;
        font-size: var(--fs-data) !important;
    }

    #referral-section .ref-link-input:focus-visible,
    #referral-section .ref-btn:focus-visible {
        outline: 2px solid var(--mobile-focus-ring) !important;
        outline-offset: 2px !important;
    }

    #referral-section .ref-btn {
        min-height: 44px !important;
        justify-content: center !important;
        padding: 0 14px !important;
        border-color: var(--mobile-panel-border) !important;
        border-radius: var(--r-input) !important;
        color: var(--text-secondary) !important;
    }

    #referral-section #referral-create-btn {
        width: 100% !important;
    }

    #referral-section .ref-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    #referral-section .ref-stat {
        min-width: 0 !important;
        padding: 12px 10px !important;
        border-color: var(--mobile-panel-border) !important;
        border-radius: var(--r-card) !important;
        background: var(--mobile-panel) !important;
    }

    #referral-section .ref-stat-l {
        overflow: hidden;
        color: var(--text-muted) !important;
        font-size: var(--fs-micro) !important;
        font-weight: 600 !important;
        letter-spacing: var(--tr-caps) !important;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    #referral-section .ref-stat-v {
        margin-top: 6px !important;
        overflow: hidden;
        color: var(--text-primary) !important;
        text-overflow: ellipsis;
    }

    #referral-section .ref-tabs {
        margin-top: 12px !important;
        padding: 0 12px !important;
        border-color: var(--mobile-panel-border) !important;
        border-radius: var(--r-card) var(--r-card) 0 0 !important;
        background: var(--mobile-panel) !important;
    }

    #referral-section .ref-tab {
        min-height: 44px !important;
        padding: 0 8px !important;
        color: var(--text-primary) !important;
    }

    #referral-section .ref-note {
        color: var(--text-muted) !important;
    }

    #referral-section .ref-pane {
        min-height: 280px !important;
        padding: 8px !important;
        border-color: var(--mobile-panel-border) !important;
        border-radius: 0 0 var(--r-card) var(--r-card) !important;
        background: var(--mobile-panel) !important;
        overflow: visible !important;
    }

    #referral-section .ref-pane-solo {
        min-height: 280px !important;
        border-radius: var(--r-card) !important;
    }

    #referral-section .ref-blank {
        min-height: 262px !important;
        padding: 28px 20px !important;
        color: var(--text-muted) !important;
    }

    #referral-section .referral-table,
    #referral-section .referral-table tbody {
        display: block !important;
        width: 100% !important;
    }

    #referral-section .referral-table thead { display: none !important; }

    #referral-section .referral-table tbody tr {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-areas:
            "rank wallet joined"
            "trades premium last" !important;
        gap: 0 !important;
        margin: 0 0 8px !important;
        padding: 12px !important;
        border: 1px solid var(--mobile-panel-border) !important;
        border-radius: var(--r-card) !important;
        background: var(--mobile-panel-subtle) !important;
    }

    #referral-section .referral-table td {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        color: var(--text-primary) !important;
        white-space: normal !important;
    }

    #referral-section .referral-table td::before {
        content: attr(data-label);
        margin-bottom: 3px;
        color: var(--text-muted);
        font-size: var(--fs-micro);
        font-weight: 600;
        letter-spacing: var(--tr-caps);
        text-transform: uppercase;
    }

    #referral-section .referral-table td.referral-col-rank {
        grid-area: rank;
        flex-direction: row !important;
        align-items: center;
        width: auto !important;
        padding-right: 8px !important;
        color: var(--text-muted) !important;
    }

    #referral-section .referral-table td.referral-col-wallet {
        grid-area: wallet;
        flex-direction: row !important;
        align-items: center;
        overflow: hidden;
        font-family: var(--mono) !important;
        text-overflow: ellipsis;
        white-space: nowrap !important;
    }

    #referral-section .referral-table td.referral-col-rank::before,
    #referral-section .referral-table td.referral-col-wallet::before { display: none; }

    #referral-section .referral-table td.referral-col-joined {
        grid-area: joined;
        align-items: flex-end;
        text-align: right;
    }

    #referral-section .referral-table td.referral-col-trades,
    #referral-section .referral-table td.referral-col-premium,
    #referral-section .referral-table td.referral-col-last {
        margin-top: 10px !important;
        padding-top: 8px !important;
        border-top: 1px solid var(--mobile-panel-border) !important;
    }

    #referral-section .referral-table td.referral-col-trades {
        grid-area: trades;
        align-items: flex-start;
        text-align: left;
    }

    #referral-section .referral-table td.referral-col-premium {
        grid-area: premium;
        align-items: center;
        text-align: center;
    }

    #referral-section .referral-table td.referral-col-last {
        grid-area: last;
        align-items: flex-end;
        text-align: right;
    }

    #referral-section .ref-foot {
        gap: 10px !important;
        padding: 12px 4px 4px !important;
        border-color: var(--mobile-panel-border) !important;
    }

    @media (max-width: 380px) {
    #referral-section .ref-stat { padding: 10px 8px !important; }
    #referral-section .referral-table tbody tr { padding: 10px !important; }
    }
}

/* Final phone-width corrections from the live 375px review. */
@media (max-width: 991px) {
    #portfolio-section .pf-ops {
        min-width: 0;
        padding: 10px 12px;
        overflow: visible;
    }
    #portfolio-section .pf-ops-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 8px;
    }
    #portfolio-section .pf-ops-v { font-size: var(--fs-stat); }
    #portfolio-section .pf-ops-l { font-size: var(--fs-micro); }
    /* The calendar renderer already solves its 53 daily cells from the card
       width. Do not give it a fixed mobile width: that would make the page
       scroll sideways and hide part of the year. */
    #portfolio-section .pf-chart { overflow: hidden; }
    #portfolio-section .pf-cal,
    #portfolio-section .pf-cal-months,
    #portfolio-section .pf-cal-body,
    #portfolio-section .pf-cal-foot {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #scoreboard-section .scoreboard-summary-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 0 12px !important;
    }
    #scoreboard-section .sb-stat-card {
        min-width: 0 !important;
        padding: 10px 8px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-input) !important;
        background: var(--panel-sunken) !important;
        text-align: left !important;
    }
    #scoreboard-section .sb-stat-label {
        color: var(--text-muted) !important;
        font-size: var(--fs-micro) !important;
        font-weight: 600 !important;
        letter-spacing: var(--tr-caps) !important;
        text-transform: uppercase;
        text-align: left !important;
    }
    #scoreboard-section .sb-stat-value {
        margin-top: 4px;
        color: var(--text-primary) !important;
        font-family: var(--num);
        font-size: var(--fs-stat) !important;
        font-variant-numeric: tabular-nums;
        text-align: left !important;
    }
    #scoreboard-section .scoreboard-podium {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 0 !important;
        margin: 0 0 10px !important;
    }
    #scoreboard-section .podium-card:first-child { grid-column: 1 / -1; }
    #scoreboard-section .podium-card {
        padding: 12px 10px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-card) !important;
        background: var(--card-bg) !important;
    }
    #scoreboard-section .podium-medal { font-size: var(--fs-fig) !important; }
    #scoreboard-section .podium-score-total { font-size: var(--fs-title) !important; }
    #scoreboard-section .podium-address,
    #scoreboard-section .podium-stat { font-size: var(--fs-ui) !important; }
    #scoreboard-section .scoreboard-table tbody tr { padding: 12px !important; }
    #scoreboard-section .scoreboard-table td.col-score strong,
    #scoreboard-section .scoreboard-table td.col-score .score-total {
        font-size: var(--fs-stat) !important;
    }
    #scoreboard-section .scoreboard-table td.col-volume,
    #scoreboard-section .scoreboard-table td.col-premium,
    #scoreboard-section .scoreboard-table td.col-trades,
    #scoreboard-section .sb-streak-item { font-size: var(--fs-ui) !important; }

    #referral-section .ref-pane,
    #referral-section .ref-pane-solo { min-height: 0 !important; }
    #referral-section .ref-blank { min-height: 168px !important; }
}

/* Mobile UX guardrails. These come last because older mobile layers include
   desktop-height and fixed-width rules that are useful nowhere on a phone. */
@media (max-width: 991px) {
    /* Each route must grow with its content. A centered, viewport-height
       section creates a large empty runway before its first usable control. */
    #trade-section,
    #scoreboard-section,
    #referral-section {
        align-content: start !important;
        align-items: stretch !important;
        justify-content: start !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #trade-section .container,
    #trade-section .row,
    #scoreboard-section > .container,
    #scoreboard-section > .sb-legacy,
    #referral-section .ref-wrap {
        min-height: 0 !important;
        height: auto !important;
    }

    /* The header address is a deliberate touch target rather than loose text.
       Its existing click handler still opens the wallet actions sheet. */
    .mobile-wallet-indicator:not(.not-connected) {
        min-height: 44px !important;
        margin: 0 6px 0 auto !important;
        padding: 0 11px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-input) !important;
        background: var(--panel-sunken) !important;
        box-shadow: none !important;
    }
    .mobile-wallet-indicator .mobile-address-display {
        font-family: var(--mono) !important;
        font-size: var(--fs-body) !important;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.01em !important;
    }

    /* Keep all three Portfolio filters available and above the chart/tables.
       Bootstrap owns the menu behavior; this only restores its touch layer. */
    #portfolio-section .pf-head,
    #portfolio-section .pf-head-r,
    #portfolio-section .pf-filters,
    #portfolio-section .pf-filter { overflow: visible !important; }
    #portfolio-section .pf-filters {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px !important;
        position: relative;
        z-index: 20;
    }
    #portfolio-section .pf-filter { min-width: 0; }
    #portfolio-section .pf-filter-btn {
        width: 100%;
        min-width: 0;
        padding: 0 8px !important;
        pointer-events: auto !important;
    }
    #portfolio-section .pf-filter .dropdown-menu {
        z-index: 40 !important;
        max-height: min(300px, 55dvh);
        overflow-y: auto;
    }
    /* There is already a persistent Trade destination in the bottom bar. */
    #portfolio-section #pf-new-trade { display: none !important; }

    /* The compact daily grid communicates a rolling year more clearly than
       twelve overlapping labels. The foot still names the selected period. */
    #portfolio-section .pf-cal-months { display: none !important; }
    #portfolio-section .pf-cal-foot {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
        margin-top: 10px;
    }
    #portfolio-section .pf-cal-key { flex-wrap: wrap; }

    /* Portfolio uses the desktop tables as its data source. On a phone their
       rows become readable cards, so asset and Ranger text can wrap instead
       of being lost behind an ellipsis. */
    #portfolio-section .pf-pane { overflow: visible !important; }
    #portfolio-section .pf-pane table {
        min-width: 0 !important;
        width: 100% !important;
        table-layout: auto !important;
    }
    #portfolio-section .pf-pane .user-positions-table thead,
    #portfolio-section .pf-pane .open-positions-table thead,
    #portfolio-section .pf-pane .history-table thead { display: none !important; }
    #portfolio-section .pf-pane .user-positions-table tbody,
    #portfolio-section .pf-pane .open-positions-table tbody,
    #portfolio-section .pf-pane .history-table tbody {
        display: block !important;
        width: 100% !important;
    }
    #portfolio-section .pf-pane .user-positions-table tbody tr,
    #portfolio-section .pf-pane .open-positions-table tbody tr,
    #portfolio-section .pf-pane .history-table tbody tr {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px 12px !important;
        margin: 0 0 10px !important;
        padding: 14px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-card) !important;
        background: var(--card-bg) !important;
        box-shadow: none !important;
    }
    #portfolio-section .pf-pane .col-asset,
    #portfolio-section .pf-pane .col-belief {
        min-width: 0 !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }
    #portfolio-section .pf-pane .position-asset-text,
    #portfolio-section .pf-pane .position-cost-label { min-width: 0; }
    #portfolio-section .pf-pane tr[data-option-type="ranger"] .col-asset strong,
    #portfolio-section .pf-pane tr[data-option-type="ranger"] .col-belief {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    #portfolio-section .pf-pane .col-pnl,
    #portfolio-section .pf-pane .col-actions {
        padding-top: 10px !important;
        border-top: 1px solid var(--border-color) !important;
    }
    #portfolio-section .pf-pane .col-actions .view-option-btn,
    #portfolio-section .pf-pane .col-actions .view-tx-btn {
        min-height: 40px;
        border-radius: var(--r-input) !important;
        background: var(--panel-sunken) !important;
    }

    /* My Positions keeps the decision data in view instead of hiding it in a
       wide table. Labels make the compact two-column facts scanable. */
    #portfolio-section #pf-pane-mine .user-positions-table tbody tr {
        grid-template-areas:
            "asset asset"
            "pnl time"
            "strike size"
            "cost current"
            "actions actions" !important;
    }
    #portfolio-section #pf-pane-mine .user-positions-table td,
    #portfolio-section #pf-pane-hist .history-table td {
        display: flex !important;
        flex-direction: column;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        color: var(--text-primary) !important;
        font-variant-numeric: tabular-nums;
    }
    #portfolio-section #pf-pane-mine .user-positions-table td::before,
    #portfolio-section #pf-pane-hist .history-table td::before {
        margin-bottom: 3px;
        color: var(--text-muted);
        font-size: var(--fs-micro);
        font-weight: 600;
        letter-spacing: var(--tr-caps);
        text-transform: uppercase;
    }
    #portfolio-section #pf-pane-mine .col-asset { grid-area: asset; }
    #portfolio-section #pf-pane-mine .col-pnl { grid-area: pnl; }
    #portfolio-section #pf-pane-mine .col-time-left { grid-area: time; }
    #portfolio-section #pf-pane-mine .col-strike { grid-area: strike; }
    #portfolio-section #pf-pane-mine .col-size { grid-area: size; }
    #portfolio-section #pf-pane-mine .col-cost { grid-area: cost; }
    #portfolio-section #pf-pane-mine .col-current-price { grid-area: current; }
    #portfolio-section #pf-pane-mine .col-actions { grid-area: actions; }
    #portfolio-section #pf-pane-mine .col-pnl,
    #portfolio-section #pf-pane-mine .col-time-left,
    #portfolio-section #pf-pane-mine .col-strike,
    #portfolio-section #pf-pane-mine .col-size,
    #portfolio-section #pf-pane-mine .col-cost,
    #portfolio-section #pf-pane-mine .col-current-price,
    #portfolio-section #pf-pane-mine .col-actions { display: flex !important; }
    #portfolio-section #pf-pane-mine .col-type { display: none !important; }
    #portfolio-section #pf-pane-mine .col-asset::before { display: none; }
    #portfolio-section #pf-pane-mine .col-pnl::before { content: "Projected PnL"; }
    #portfolio-section #pf-pane-mine .col-time-left::before { content: "Time left"; }
    #portfolio-section #pf-pane-mine .col-strike::before { content: "Strike"; }
    #portfolio-section #pf-pane-mine .col-size::before { content: "Size"; }
    #portfolio-section #pf-pane-mine .col-cost::before { content: "Cost"; }
    #portfolio-section #pf-pane-mine .col-current-price::before { content: "Current price"; }

    /* History uses the same information hierarchy: what happened first, then
       settlement facts, then its result. Raw duplicate USD columns stay out. */
    #portfolio-section #pf-pane-hist .history-table tbody tr {
        grid-template-areas:
            "date status"
            "asset asset"
            "strike settlement"
            "premium size"
            "pnl pnl" !important;
    }
    #portfolio-section #pf-pane-hist .col-date { grid-area: date; }
    #portfolio-section #pf-pane-hist .col-status { grid-area: status; align-items: flex-end; text-align: right; }
    #portfolio-section #pf-pane-hist .col-asset { grid-area: asset; }
    #portfolio-section #pf-pane-hist .col-strike { grid-area: strike; }
    #portfolio-section #pf-pane-hist .col-settlement { grid-area: settlement; text-align: right; align-items: flex-end; }
    #portfolio-section #pf-pane-hist .col-premium { grid-area: premium; }
    #portfolio-section #pf-pane-hist .col-size { grid-area: size; text-align: right; align-items: flex-end; }
    #portfolio-section #pf-pane-hist .col-pnl { grid-area: pnl; }
    #portfolio-section #pf-pane-hist .col-date,
    #portfolio-section #pf-pane-hist .col-status,
    #portfolio-section #pf-pane-hist .col-strike,
    #portfolio-section #pf-pane-hist .col-settlement,
    #portfolio-section #pf-pane-hist .col-premium,
    #portfolio-section #pf-pane-hist .col-size,
    #portfolio-section #pf-pane-hist .col-pnl { display: flex !important; }
    #portfolio-section #pf-pane-hist .col-type,
    #portfolio-section #pf-pane-hist .col-premium-usd,
    #portfolio-section #pf-pane-hist .col-pnl-usd { display: none !important; }
    #portfolio-section #pf-pane-hist .col-date::before,
    #portfolio-section #pf-pane-hist .col-status::before,
    #portfolio-section #pf-pane-hist .col-asset::before { display: none; }
    #portfolio-section #pf-pane-hist .col-strike::before { content: "Strike"; }
    #portfolio-section #pf-pane-hist .col-settlement::before { content: "Settled at"; }
    #portfolio-section #pf-pane-hist .col-premium::before { content: "Premium"; }
    #portfolio-section #pf-pane-hist .col-size::before { content: "Size"; }
    #portfolio-section #pf-pane-hist .col-pnl::before { content: "PnL"; }

    /* Referrals has one clear hierarchy: title, action, stats, then people.
       The compact copy avoids the weak, over-spaced desktop fallback. */
    #referral-section .ref-head { display: block !important; }
    #referral-section .ref-title {
        margin-bottom: 12px !important;
        font-family: var(--sans) !important;
        font-size: var(--fs-title) !important;
        font-weight: 600 !important;
    }
    #referral-section .ref-blank {
        display: grid;
        min-height: 132px !important;
        place-items: center;
        padding: 20px !important;
        border: 1px dashed var(--border-color) !important;
        color: var(--text-secondary) !important;
        font-family: var(--sans) !important;
        font-size: var(--fs-body) !important;
        line-height: 1.45;
        text-align: center;
    }
    #referral-section .ref-stat-l { text-overflow: clip; }
    #referral-section .ref-stat-v {
        font-family: var(--num) !important;
        font-size: var(--fs-stat) !important;
        font-variant-numeric: tabular-nums;
    }
}

/* Final mobile density pass. These rules deliberately change presentation only:
   the desktop table data, Portfolio filter state, and trade workflow are not
   touched. */
@media (max-width: 991px) {
    /* A phone has a persistent bottom bar, not a desktop-height trade canvas.
       Reset old height inheritance on the actual trade wrappers so the document
       ends after the ticket instead of after an empty panel. */
    #trade-section,
    #trade-section .professional-asset-header,
    #trade-section .trade-unified-layout,
    #trade-section .trade-content,
    #trade-section .trade-panel-main,
    #trade-section .trade-panel-main-inner {
        min-height: 0 !important;
        height: auto !important;
    }
    #trade-section .row { margin-bottom: 0 !important; }
    /* The fixed footer already receives its own clearance from `main`. Remove
       nested ticket padding so it does not create a second, empty runway. */
    #trade-section { padding-bottom: 0 !important; }
    #trade-section .mobile-trade-card { padding-bottom: 0 !important; }

    /* The bell is transparent. The connected address uses the same quiet
       header treatment while retaining its 44px touch target. */
    .mobile-wallet-indicator:not(.not-connected) {
        background: transparent !important;
    }

    /* A 53-column calendar is useful on a wide surface, but has no legible
       phone treatment. Keep the line chart as the single mobile chart mode. */
    #portfolio-section .pf-view[data-view="cal"],
    #portfolio-section #pf-cal,
    #portfolio-section #pf-cal-chips { display: none !important; }

    /* The card layout uses `display: grid !important`, which otherwise wins
       over Portfolio's inline page hiding. Restore the pager's 10/25/50/100
       selection without changing the source rows or fetching data. */
    #portfolio-section .pf-pane .user-positions-table tbody tr[style*="display: none"],
    #portfolio-section .pf-pane .open-positions-table tbody tr[style*="display: none"],
    #portfolio-section .pf-pane .history-table tbody tr[style*="display: none"] {
        display: none !important;
    }

    /* History is read as a compact receipt: identity, two paired facts, then
       the result. The full record remains available through its existing tap
       target and modal. */
    #portfolio-section #pf-pane-hist .history-table .col-asset {
        padding-bottom: 2px !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-asset strong,
    #portfolio-section #pf-pane-hist .history-table .position-asset-text {
        font-size: var(--fs-body) !important;
        line-height: 1.2 !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-pnl {
        padding-top: 7px !important;
    }
    #portfolio-section #pf-pane-hist .history-table td::before {
        margin-bottom: 1px !important;
        font-size: var(--fs-micro) !important;
    }
    #portfolio-section #pf-pane-hist .history-table { margin-top: 0 !important; }

    /* Detail modal: keep the two information columns, but reduce display
       type and chrome on a 375px phone so the decision data appears sooner. */
    #position-detail-modal .modal-dialog {
        max-width: calc(100vw - 20px) !important;
        margin: 10px auto !important;
    }
    #position-detail-modal .position-detail-modal-header { padding: 10px 12px !important; }
    #position-detail-modal .position-detail-modal-body { gap: 8px !important; padding: 12px !important; }
    #position-detail-modal .pd-identity { gap: 9px !important; margin-bottom: 8px !important; }
    #position-detail-modal .pd-logo { width: 28px !important; height: 28px !important; flex-basis: 28px !important; }
    #position-detail-modal #position-modal-title { font-size: var(--fs-fig) !important; }
    #position-detail-modal .modal-trade-summary { gap: 6px !important; margin-bottom: 8px !important; }
    #position-detail-modal .modal-summary-card { padding: 8px !important; }
    #position-detail-modal .modal-summary-label { margin-bottom: 3px !important; font-size: var(--fs-micro) !important; }
    #position-detail-modal .modal-summary-value { font-size: var(--fs-body) !important; }
    #position-detail-modal #position-modal-pnl { font-size: var(--fs-stat) !important; }
    #position-detail-modal .profit-scenarios { margin-top: 4px !important; padding: 9px 10px !important; }
    #position-detail-modal .profit-scenarios h6 { margin-bottom: 5px !important; }
    #position-detail-modal .profit-scenarios .table td { padding: 5px 0 !important; font-size: var(--fs-ui) !important; }

    /* Five score measures form a balanced 3 + 2 grid rather than leaving a
       dead sixth slot. */
    #scoreboard-section .scoreboard-summary-stats {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
    #scoreboard-section .scoreboard-summary-stats .sb-stat-card { grid-column: span 2; }
    #scoreboard-section .scoreboard-summary-stats .sb-stat-card:nth-child(4),
    #scoreboard-section .scoreboard-summary-stats .sb-stat-card:nth-child(5) { grid-column: span 3; }

    /* A primary yellow action needs dark ink. The former muted text failed
       contrast and was hard to read against the referral button. */
    #referral-section #referral-create-btn {
        color: var(--background) !important;
        font-weight: 700 !important;
        text-shadow: none !important;
    }
}

/* Final mobile hierarchy pass: remove desktop density, not data. */
@media (max-width: 991px) {
    /* Do not make the app header sticky on a phone. It overlaps the market
       strip at small heights; normal document flow preserves the content's
       starting position and keeps both controls reachable. */
    header {
        position: relative !important;
        top: auto !important;
        z-index: 20 !important;
    }

    /* Wallet and alert are peer header controls: same 44px box, border, and
       radius. The address control remains transparent as requested. */
    .mobile-wallet-indicator:not(.not-connected),
    .hdr-pill {
        box-sizing: border-box !important;
        height: 44px !important;
        min-height: 44px !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-card) !important;
        background: transparent !important;
    }
    .mobile-wallet-indicator:not(.not-connected) {
        display: inline-flex !important;
        align-items: center !important;
        padding: 0 12px !important;
    }
    .hdr-pill { width: 44px !important; }

    /* No empty rail between the Portfolio tabs and the first History receipt. */
    #portfolio-section #pf-pane-hist,
    #portfolio-section #pf-pane-hist .history-table,
    #portfolio-section #pf-pane-hist .history-table tbody {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    #portfolio-section #pf-pane-hist .history-table tbody tr:first-child { margin-top: 0 !important; }

    #portfolio-section #pf-pane-hist .history-table .col-type,
    #portfolio-section #pf-pane-hist .history-table .col-premium,
    #portfolio-section #pf-pane-hist .history-table .col-premium-usd,
    #portfolio-section #pf-pane-hist .history-table .col-pnl-usd {
        display: none !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-pnl {
        align-items: flex-end !important;
        padding-top: 0 !important;
        border-top: 0 !important;
        text-align: right !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-pnl::before { content: "PnL"; }

    /* Each option action occupies the same full card width and alignment. */
    #portfolio-section .pf-pane .col-actions {
        align-self: stretch !important;
        width: 100% !important;
    }
    #portfolio-section .pf-pane .col-actions .view-option-btn,
    #portfolio-section .pf-pane .col-actions .view-tx-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
    }

    /* Three winners are three stacked compact cards. This keeps an expanded
       score breakdown from tearing the second and third places out of rhythm. */
    #scoreboard-section .scoreboard-podium {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }
    #scoreboard-section .podium-card,
    #scoreboard-section .podium-card:first-child {
        grid-column: auto !important;
        padding: 12px !important;
    }
}

/* Mobile payout and Portfolio receipts. These selectors do not apply to the
   desktop ticket or tables; they only change the phone presentation. */
@media (max-width: 991px) {
    /* Match the desktop payout pane's order: selected expiry price, payoff
       curve, scrub control, then three equal readouts. */
    .mobile-calc-sheet .mobile-tool-sheet-body {
        padding: 12px 16px max(16px, env(safe-area-inset-bottom));
    }
    .mobile-calc-price-row {
        margin-bottom: 8px;
        padding: 8px 10px;
        border-color: var(--border-color);
        border-radius: var(--r-input);
        background: var(--panel-sunken);
    }
    .mobile-calc-payoff-card {
        margin-bottom: 10px;
        padding: 9px 10px 6px;
        border: 1px solid var(--border-color);
        border-radius: var(--r-input);
        background: var(--panel-sunken);
        overflow: hidden;
    }
    .mobile-calc-payoff-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        font-family: var(--sans);
        font-size: var(--fs-micro);
        font-weight: 600;
        letter-spacing: var(--tr-caps);
        color: var(--text-muted);
        text-transform: uppercase;
    }
    .mobile-calc-payoff-head strong {
        font-family: var(--num);
        font-size: var(--fs-ui);
        font-variant-numeric: tabular-nums;
        letter-spacing: 0;
        color: var(--text-primary);
    }
    .mobile-calc-payoff-head strong.is-positive { color: var(--positive); }
    .mobile-calc-payoff-head strong.is-negative { color: var(--negative); }
    .mobile-calc-payoff-legend {
        min-height: 16px;
        margin-top: 2px;
        font-family: var(--num);
        font-size: var(--fs-micro);
        font-variant-numeric: tabular-nums;
        color: var(--accent);
    }
    .mobile-calc-payoff-svg {
        display: block;
        width: 100%;
        height: 116px;
        margin-top: 4px;
        overflow: visible;
    }
    .mobile-calc-payoff-zero {
        stroke: var(--border-light);
        stroke-width: 1;
        stroke-dasharray: 3 4;
    }
    .mobile-calc-payoff-line {
        stroke-width: 2;
        stroke-linecap: round;
        vector-effect: non-scaling-stroke;
    }
    .mobile-calc-payoff-line.is-positive { stroke: var(--positive); }
    .mobile-calc-payoff-line.is-negative { stroke: var(--negative); }
    .mobile-calc-payoff-dither.is-positive { fill: var(--positive); opacity: .48; }
    .mobile-calc-payoff-dither.is-negative { fill: var(--negative); opacity: .45; }
    .mobile-calc-payoff-break-even {
        stroke: var(--accent);
        stroke-width: 1;
        stroke-opacity: .78;
        stroke-dasharray: 3 3;
        vector-effect: non-scaling-stroke;
    }
    .mobile-calc-payoff-marker {
        stroke: var(--text-secondary);
        stroke-width: 1;
        stroke-dasharray: 2 3;
        vector-effect: non-scaling-stroke;
    }
    .mobile-calc-payoff-dot {
        stroke: var(--panel-sunken);
        stroke-width: 2;
        vector-effect: non-scaling-stroke;
    }
    .mobile-calc-payoff-dot.is-positive { fill: var(--positive); }
    .mobile-calc-payoff-dot.is-negative { fill: var(--negative); }
    .mobile-calc-slider-row { margin-bottom: 8px; }
    .mobile-calc-results {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1px;
        border: 1px solid var(--border-color);
        border-radius: var(--r-input);
        background: var(--border-color);
    }
    .mobile-calc-result-item,
    .mobile-calc-pnl-row {
        display: block;
        min-width: 0;
        padding: 8px 9px;
        border: 0;
        background: var(--panel-sunken);
    }
    .mobile-calc-result-label {
        display: block;
        margin-bottom: 3px;
        color: var(--text-muted);
        font-size: var(--fs-micro);
        font-weight: 600;
        letter-spacing: var(--tr-caps);
        text-transform: uppercase;
    }
    .mobile-calc-result-value {
        display: block;
        overflow: hidden;
        font-family: var(--num);
        font-size: var(--fs-ui);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Empty tab toolbars were reserving 48px between the tab underline and
       first row. They have no action and therefore should occupy no space. */
    #portfolio-section .pf-tools:empty { display: none !important; }

    /* Equal tracks prevent long PnL values from pushing settlement facts out
       of alignment. The asset title already includes the strike, so duplicate
       table cells stay hidden on the receipt. */
    #portfolio-section #pf-pane-mine .user-positions-table tbody tr,
    #portfolio-section #pf-pane-mine .col-strike,
    #portfolio-section #pf-pane-mine .col-current-price,
    #portfolio-section #pf-pane-mine .col-belief,
    #portfolio-section #pf-pane-mine .col-type {
        display: none !important;
    }
    #portfolio-section #pf-pane-mine .col-pnl,
    #portfolio-section #pf-pane-mine .col-time-left,
    #portfolio-section #pf-pane-mine .col-cost,
    #portfolio-section #pf-pane-mine .col-size {
        align-items: flex-start !important;
        text-align: left !important;
    }
    #portfolio-section #pf-pane-mine .col-pnl {
        padding-top: 0 !important;
        border-top: 0 !important;
    }

    #portfolio-section #pf-pane-hist .history-table .col-strike,
    #portfolio-section #pf-pane-hist .history-table .col-size,
    #portfolio-section #pf-pane-hist .history-table .col-type,
    #portfolio-section #pf-pane-hist .history-table .col-premium,
    #portfolio-section #pf-pane-hist .history-table .col-premium-usd,
    #portfolio-section #pf-pane-hist .history-table .col-pnl-usd {
        display: none !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-settlement,
    #portfolio-section #pf-pane-hist .history-table .col-pnl {
        align-items: flex-start !important;
        text-align: left !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-pnl {
        padding-top: 0 !important;
        border-top: 0 !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-status {
        align-items: flex-end !important;
        text-align: right !important;
    }

    #portfolio-section #pf-pane-hist .history-table .col-date,
    #portfolio-section #pf-pane-hist .history-table .col-status {
        display: none !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-asset {
        padding-bottom: 0 !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-settlement {
        align-items: flex-start !important;
        text-align: left !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-pnl {
        align-items: flex-end !important;
        text-align: right !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-settlement::before {
        content: "Settled at" !important;
    }

    /* The Portfolio list is a set of cards, not a card holding another set of
       cards. Keep the tab underline, but let Position and History receipts sit
       directly on the page ground. */
    #portfolio-section .pf-tabs,
    #portfolio-section .pf-pane {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    #portfolio-section .pf-tabs { overflow: visible !important; }

    /* Match the compact receipt hierarchy: identity first, then one ruled
       settlement/result line. Detail view still holds the full record. */
    #portfolio-section #pf-pane-hist .history-table .col-settlement,
    #portfolio-section #pf-pane-hist .history-table .col-pnl {
        padding-top: 7px !important;
        border-top: 1px solid var(--border-color) !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-pnl {
        padding-left: 10px !important;
        border-left: 1px solid var(--border-color) !important;
    }

    /* The chart follows the last score card directly. Desktop separation is
       useful beside the other Scores panes, but reads as an empty block here. */
    #positions-section #pos-scoreboard-cards {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    #positions-section #pos-scoreboard-chart {
        margin-top: 4px !important;
        padding-top: 0 !important;
        border-top: 0 !important;
    }
    /* The main Scores route wraps its cards in a scroll helper. Its desktop
       footer clearance was leaving a large blank field before this chart. */
    #scoreboard-section .scoreboard-table-scroll-wrapper {
        margin-bottom: 8px !important;
    }
    #scoreboard-section .scoreboard-chart-container {
        margin-top: 4px !important;
    }

    /* The alert panel is a header-level sheet. Elevate the complete header
       stacking context while it is open so expiry controls cannot paint over
       its form fields. */
    header:has(#alert-pop.is-open) { z-index: 2000 !important; }
    #alert-pop.is-open { z-index: 2001 !important; }

    #portfolio-section #pf-pane-mine .col-belief {
        display: block !important;
        grid-area: belief !important;
        padding: 0 !important;
        color: var(--text-primary) !important;
        font-size: var(--fs-ui) !important;
        line-height: 1.3 !important;
    }
    #portfolio-section #pf-pane-mine .col-time-left,
    #portfolio-section #pf-pane-mine .col-cost,
    #portfolio-section #pf-pane-mine .col-size,
    #portfolio-section #pf-pane-mine .col-strike,
    #portfolio-section #pf-pane-mine .col-current-price,
    #portfolio-section #pf-pane-mine .col-type {
        display: none !important;
    }
    #portfolio-section #pf-pane-mine .col-pnl {
        display: block !important;
        grid-area: pnl !important;
        padding: 7px 0 0 !important;
        border-top: 1px solid var(--border-color) !important;
        text-align: right !important;
        font-size: var(--fs-ui) !important;
    }
    #portfolio-section #pf-pane-mine .col-actions {
        display: flex !important;
        grid-area: actions !important;
        width: 100% !important;
        padding-top: 8px !important;
        border-top: 1px solid var(--border-color) !important;
    }
    #portfolio-section #pf-pane-mine .col-actions .view-option-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 40px !important;
        background: var(--panel-sunken) !important;
    }

    /* Asset logos act as the card's visual anchor on both current and settled
       positions. The full-size mark improves fast scanning without raising
       the text scale. */
    #portfolio-section #pf-pane-mine .position-asset-logo,
    #portfolio-section #pf-pane-hist .position-asset-logo {
        width: 40px !important;
        height: 40px !important;
        margin-right: 10px !important;
        object-fit: contain !important;
        flex: 0 0 40px !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-pnl.text-success {
        color: var(--positive) !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-pnl.text-danger {
        color: var(--negative) !important;
    }
    #portfolio-section #pf-pane-mine .user-positions-table td,
    #portfolio-section #pf-pane-hist .history-table td {
        max-width: 100%;
        font-size: var(--fs-ui) !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere;
    }
    #portfolio-section #pf-pane-mine .col-actions {
        padding-top: 8px !important;
        border-top: 1px solid var(--border-color) !important;
    }

    /* Portfolio History: treat the identity row as one aligned unit. The
       mark and its two-line label share a single left edge instead of letting
       the logo float above the title. */
    #portfolio-section #pf-pane-hist .history-table .col-asset {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 38px !important;
        padding: 0 !important;
    }
    #portfolio-section #pf-pane-hist .history-table .position-asset-logo,
    #portfolio-section #pf-pane-mine .user-positions-table .position-asset-logo {
        margin: 0 !important;
    }
    #portfolio-section #pf-pane-hist .history-table .position-asset-text,
    #portfolio-section #pf-pane-mine .user-positions-table .position-asset-text,
    #portfolio-section #pf-pane-all .open-positions-table .position-asset-text {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
    }

    /* One title size for the three panes, which render the same markup
       (app.js:1283 / :2465 / score.js:1132). Colour: see end of file. */
    #portfolio-section #pf-pane-hist .history-table .position-asset-text,
    #portfolio-section #pf-pane-mine .user-positions-table .position-asset-text,
    #portfolio-section #pf-pane-all .open-positions-table .position-asset-text,
    #portfolio-section #pf-pane-hist .history-table .col-asset strong,
    #portfolio-section #pf-pane-mine .user-positions-table .col-asset strong,
    #portfolio-section #pf-pane-all .open-positions-table .col-asset strong {
        font-size: var(--fs-body) !important;
        line-height: 1.2 !important;
    }
    #portfolio-section #pf-pane-hist .history-table tbody tr .col-asset strong,
    #portfolio-section #pf-pane-mine .user-positions-table tbody tr.position-row .col-asset strong,
    #portfolio-section #pf-pane-all .open-positions-table tbody tr .col-asset strong {
        font-weight: 600 !important;
    }

    /* My Positions reads as identity, belief, live result, one action.
       The grid comes from the receipt-card rules further down. */
    #portfolio-section #pf-pane-mine .user-positions-table .col-date,
    #portfolio-section #pf-pane-mine .user-positions-table .col-payout {
        display: none !important;
    }
    #portfolio-section #pf-pane-mine .user-positions-table .col-asset {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 38px !important;
        padding: 0 !important;
    }
    #portfolio-section #pf-pane-mine .user-positions-table .col-pnl {
        display: flex !important;
        align-items: baseline !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        min-width: 0 !important;
    }
    #portfolio-section #pf-pane-mine .user-positions-table .col-pnl::before {
        content: "PnL" !important;
    }
    #portfolio-section #pf-pane-mine .user-positions-table .view-option-label {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        overflow: visible !important;
        clip: auto !important;
        white-space: normal !important;
    }

    /* Final phone receipts: render only the information a person can use at
       a glance. This explicit allow-list also prevents inherited desktop
       table cells from reappearing when a cloned Portfolio row refreshes. */
    #portfolio-section #pf-pane-hist .history-table tbody tr,
    #portfolio-section #pf-pane-mine .user-positions-table tbody tr.position-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: center !important;
        overflow: hidden !important;
        background: var(--card-bg) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-card) !important;
        box-shadow: none !important;
    }
    #portfolio-section #pf-pane-hist .history-table tbody tr {
        grid-template-areas:
            "asset asset"
            "settlement pnl" !important;
        gap: 8px 0 !important;
        padding: 12px 14px !important;
        margin-bottom: 8px !important;
    }
    #portfolio-section #pf-pane-hist .history-table tbody tr > td {
        display: none !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-asset,
    #portfolio-section #pf-pane-hist .history-table .col-settlement,
    #portfolio-section #pf-pane-hist .history-table .col-pnl {
        display: flex !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-asset {
        grid-area: asset !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 40px !important;
    }
    #portfolio-section #pf-pane-hist .history-table .position-asset-logo {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
        margin: 0 !important;
    }
    #portfolio-section #pf-pane-hist .history-table .position-asset-text {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-settlement,
    #portfolio-section #pf-pane-hist .history-table .col-pnl {
        align-self: stretch !important;
        min-height: 42px !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding-top: 7px !important;
        border-top: 1px solid var(--border-color) !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-settlement {
        grid-area: settlement !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-pnl {
        grid-area: pnl !important;
        align-items: flex-end !important;
        padding-left: 12px !important;
        border-left: 1px solid var(--border-color) !important;
        text-align: right !important;
    }
    #portfolio-section #pf-pane-hist .history-table .col-settlement::before,
    #portfolio-section #pf-pane-hist .history-table .col-pnl::before {
        display: block !important;
        margin: 0 0 2px !important;
    }

    #portfolio-section #pf-pane-mine .user-positions-table tbody tr.position-row {
        grid-template-areas:
            "asset asset"
            "belief belief"
            "pnl pnl"
            "actions actions" !important;
        gap: 8px 0 !important;
        padding: 12px 14px !important;
        margin-bottom: 8px !important;
    }
    #portfolio-section #pf-pane-mine .user-positions-table tbody tr.position-row > td:not(.col-asset):not(.col-belief):not(.col-pnl):not(.col-actions) {
        display: none !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }
    #portfolio-section #pf-pane-mine .user-positions-table .col-asset,
    #portfolio-section #pf-pane-mine .user-positions-table .col-belief,
    #portfolio-section #pf-pane-mine .user-positions-table .col-pnl,
    #portfolio-section #pf-pane-mine .user-positions-table .col-actions {
        display: flex !important;
    }
    #portfolio-section #pf-pane-mine .user-positions-table .col-asset {
        grid-area: asset !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 40px !important;
    }
    #portfolio-section #pf-pane-mine .user-positions-table .position-asset-logo {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
        margin: 0 !important;
    }
    #portfolio-section #pf-pane-mine .user-positions-table .col-belief {
        grid-area: belief !important;
        display: -webkit-box !important;
        overflow: hidden !important;
        color: var(--text-primary) !important;
        font-size: var(--fs-ui) !important;
        line-height: 1.35 !important;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    /* Label above the figure, as History does. Row flex keeps value and
       percent on one line; the ::before takes a full basis and wraps above. */
    #portfolio-section #pf-pane-mine .user-positions-table .col-pnl {
        grid-area: pnl !important;
        flex-flow: row wrap !important;
        align-items: baseline !important;
        justify-content: flex-end !important;
        gap: 0 6px !important;
        min-height: 42px !important;
        align-content: center !important;
        padding-top: 7px !important;
        border-top: 1px solid var(--border-color) !important;
        text-align: right !important;
    }
    #portfolio-section #pf-pane-mine .user-positions-table .col-pnl::before {
        flex: 0 0 100% !important;
        margin: 0 0 2px !important;
    }
    #portfolio-section #pf-pane-mine .user-positions-table .col-actions {
        grid-area: actions !important;
        padding-top: 7px !important;
        border-top: 1px solid var(--border-color) !important;
    }

    /* Page visibility must outrank the receipt-card grid rules above. The
       paginator writes the inline display state; these selectors preserve that
       state instead of expanding every card back into the list on a phone. */
    #portfolio-section #pf-pane-mine .user-positions-table tbody tr[style*="display: none"],
    #portfolio-section #pf-pane-all .open-positions-table tbody tr[style*="display: none"],
    #portfolio-section #pf-pane-hist .history-table tbody tr[style*="display: none"],
    #portfolio-section #pf-pane-mine .user-positions-table tbody tr[style*="display:none"],
    #portfolio-section #pf-pane-all .open-positions-table tbody tr[style*="display:none"],
    #portfolio-section #pf-pane-hist .history-table tbody tr[style*="display:none"] {
        display: none !important;
    }

    /* Keep the live-position result semantic: positive is green, negative is
       red. app.js already emits these classes and the sign data attribute. */
    #portfolio-section #pf-pane-mine .user-positions-table .col-pnl.text-success,
    #portfolio-section #pf-pane-mine .user-positions-table .col-pnl[data-pnl-positive="true"] {
        color: var(--positive) !important;
    }
    #portfolio-section #pf-pane-mine .user-positions-table .col-pnl.text-danger,
    #portfolio-section #pf-pane-mine .user-positions-table .col-pnl[data-pnl-positive="false"] {
        color: var(--negative) !important;
    }

    /* Legacy #positions-section, still reachable by hash. The phone
       Portfolio is #portfolio-section; its summary is `.pf-ops` below. */
    #positions-section .sort-controls {
        margin-bottom: 14px !important;
    }
    #positions-section .open-positions-stats {
        margin: 0 0 10px !important;
        padding: 4px !important;
        overflow: hidden !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-card) !important;
        background: var(--card-bg) !important;
        isolation: isolate;
    }

    /* One gap below the tab strip, all three panes, so they cannot drift.
       12px sits one step above the 8px card gap. */
    #portfolio-section #pf-pane-mine,
    #portfolio-section #pf-pane-hist,
    #portfolio-section #pf-pane-all {
        padding-top: 12px !important;
        margin-top: 0 !important;
    }

    /* `.pf-ops` gets the receipt-card treatment. portfolio.css:695 gives it
       a bottom rule only, which reads as a full-bleed square block above a
       column of rounded cards. Inset comes from `.pf-wrap`. */
    #portfolio-section #pf-pane-all .pf-ops {
        margin: 0 0 12px !important;
        padding: 12px !important;
        overflow: hidden !important;
        border: 1px solid var(--border-color) !important;
        border-radius: var(--r-card) !important;
        background: var(--card-bg) !important;
    }
    /* Two families, never mixed. TYPE: --call-green/--put-red/
       --ranger-purple. PnL SIGN: --positive/--negative. The counts are a
       type, set once for both platforms at portfolio.css:717. */
    #positions-section .ops-stat-value.ops-call { color: var(--call-green) !important; }
    #positions-section .ops-stat-value.ops-put { color: var(--put-red) !important; }
    #positions-section .ops-stat-value.ops-ranger { color: var(--ranger-purple) !important; }

    /* Title colour by option type: green call, red put, purple ranger.
       Every pane writes `data-option-type` (app.js:1279, :2280,
       score.js:1014), so one un-scoped rule serves all of them. Three
       separate copies used to drift apart. TYPE colours, not PnL colours. */
    tr[data-option-type="call"] .col-asset strong {
        color: var(--call-green) !important;
    }
    tr[data-option-type="put"] .col-asset strong {
        color: var(--put-red) !important;
    }
    tr[data-option-type="ranger"] .col-asset strong {
        color: var(--ranger-purple) !important;
    }
}

/* ==========================================================================
   Touch targets (2026-09-04): the phone's tap controls reach 44px — the
   expiry and direction buttons, the picker tabs, the tool buttons, the amount
   presets, the calculator field, the sheet/menu closes and the brand link.
   Only heights and hit areas change; nothing else on the phone moves.
   ========================================================================== */
@media (max-width: 991.98px) {
    .mobile-expiry-btn,
    .mobile-direction-btn,
    .mobile-tool-btn,
    .mobile-picker-view-tab,
    .mobile-amount-preset,
    .mobile-calc-input { min-height: 44px; }
    .mobile-amount-preset { display: inline-flex; align-items: center; justify-content: center; }
    .mobile-tool-sheet-close,
    .mobile-menu-close,
    .mobile-weather-sheet-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .navbar-brand { min-height: 44px; display: inline-flex; align-items: center; }
    .trollbox-tray-btn, .trollbox-send-btn, .trollbox-minimize, .trollbox-close,
    .mobile-menu-toggle, .navbar-toggler { min-width: 44px; min-height: 44px; }
    .trollbox-input { min-height: 44px; }
    .ts-comp { min-height: 44px; }
}