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

/* ─────────────────────────────────────────────────────────────────────────────
   Variables
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    --glass-bg: rgba(30, 41, 59, 0.6);
    --glass-bg-strong: rgba(20, 28, 40, 0.9);
    --glass-border: rgba(125, 211, 252, 0.15);
    --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);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Mobile Base Layout - Compact
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    html, body {
        min-height: 100vh !important;
    }

    body {
        background: linear-gradient(160deg, #0d1520 0%, #121d33 35%, #172544 55%, #0f1c30 100%) !important;
        background-attachment: fixed !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: rgba(0, 0, 0, 0.55) !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: rgba(15, 23, 42, 0.95);
        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: rgba(255, 255, 255, 0.9);
        font-size: 0.95rem;
        line-height: 1.5;
    }

    .network-alert-box #switch-network-btn {
        background: #f59e0b !important;
        color: #000 !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;
    }

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

    .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,
    .trade-title-row,
    .asset-alert-btn {
        display: none !important;
    }

    .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 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: #a855f7 !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: #a855f7;
}

.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: #a855f7;
}

.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: #a855f7;
}

/* (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: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    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: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    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, #a855f7, #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, #a855f7, #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: #0F172A;
    border-top: none;
    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;
    padding: 0.1rem 0.75rem;
    background: transparent;
    border: none;
    color: #a0aec0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-nav-item.active {
    color: #ffffff;
}

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

.mobile-nav-item.active span {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.mobile-nav-item i {
    font-size: 1.06rem;
    /* line-height: 1; */
    color: #a0aec0;
}

.mobile-nav-item span {
    font-size: 0.51rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    color: #a0aec0;
}

/* 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: 0.8rem !important;
    }
    .ops-stat-label {
        font-size: 0.55rem !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;
    }

    /* ── Asset text color matches option type (history) ── */
    #history-section .history-table tbody tr[data-option-type="call"] td.col-asset strong {
        color: var(--call-green) !important;
    }
    #history-section .history-table tbody tr[data-option-type="put"] td.col-asset strong {
        color: var(--put-red) !important;
    }
    #history-section .history-table tbody tr[data-option-type="ranger"] td.col-asset strong {
        color: #a855f7 !important;
    }

    /* ── 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: 'SF Mono', Monaco, Consolas, monospace !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 */
    #scoreboard-section table tbody tr.sb-row-me {
        background: rgba(56, 152, 236, 0.1) !important;
        border: 1px solid rgba(56, 152, 236, 0.25) !important;
    }

    .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 ── */
    #scoreboard-section table tbody tr.score-detail-row {
        display: block !important;
        padding: 0.6rem 0.85rem !important;
        background: rgba(255, 255, 255, 0.015) !important;
        border-radius: 0 0 14px 14px !important;
        margin-top: -0.6rem !important;
        margin-bottom: 0.6rem !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: 0.68rem !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;
    }

    /* Asset text color matches option type */
    .user-positions-table tbody tr.position-row[data-option-type="call"] .col-asset strong,
    .open-positions-table tbody tr[data-option-type="call"] .col-asset strong {
        color: var(--call-green) !important;
    }
    .user-positions-table tbody tr.position-row[data-option-type="put"] .col-asset strong,
    .open-positions-table tbody tr[data-option-type="put"] .col-asset strong {
        color: var(--put-red) !important;
    }
    .user-positions-table tbody tr.position-row[data-option-type="ranger"] .col-asset strong,
    .open-positions-table tbody tr[data-option-type="ranger"] .col-asset strong {
        color: #a855f7 !important;
    }

    /* ── "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 */
    }

    /* ═══════════════════════════════════════════════════════════════════
       DROPDOWN HEADER: Override Bootstrap's display:block so icon
       and text sit on one line (Bootstrap .dropdown-header = block)
       ═══════════════════════════════════════════════════════════════════ */
    .weekly-competition-dropdown .dropdown-header {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
    }

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

    #trade-confirm-modal.modal .modal-backdrop,
    .modal-backdrop.show {
        background: rgba(0, 0, 0, 0.7) !important;
    }

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

    .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, #a855f7, #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: #a855f7;
        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, #a855f7, #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: #a78bfa;
        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 ────────────────────────────────── */
    #mobile-header-wallet-btn {
        all: unset !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 26px !important;
        border-radius: 999px !important;
        background: #fff !important;
        color: #0a0a0a !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        padding: 0 0.65rem !important;
        cursor: pointer !important;
        white-space: nowrap !important;
        -webkit-tap-highlight-color: transparent !important;
        flex-shrink: 0 !important;
    }

    #mobile-header-wallet-btn span {
        font-size: 0.65rem !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)
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991px) {

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

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

    #swapModal.modal.fade .modal-dialog,
    #depositModal.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,
    #funding-options-modal.modal.show .modal-dialog {
        transform: translateY(0) !important;
    }

    #swapModal .modal-dialog,
    #depositModal .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,
    #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,
    #funding-options-modal .odette-modal-content {
        border-radius: 20px 20px 0 0 !important;
        background: #0f1318 !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 {
        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 {
        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: 0.75rem !important;
    }

    /* Bootstrap backdrop override */
    .modal-backdrop {
        background: rgba(0, 0, 0, 0.6) !important;
    }
}