:root {
            /* Dark mode (default) */
            --bg-primary: #0d1117;
            --bg-secondary: #161b22;
            --bg-tertiary: #21262d;
            --bg-card: #161b22;
            --bg-hover: #1c2128;
            --border: #30363d;
            --border-light: #21262d;
            --text-primary: #e6edf3;
            --text-secondary: #8b949e;
            --text-muted: #6e7681;
            --green: #00c853;
            --green-bg: rgba(0,200,83,0.12);
            --green-hover: #00e676;
            --red: #ff5252;
            --red-bg: rgba(255,82,82,0.12);
            --blue: #58a6ff;
            --yellow: #d4a843;
            --accent: #00c853;
            --support-panel-bg: linear-gradient(180deg, rgba(23, 28, 36, 0.98), rgba(18, 23, 31, 0.96));
            --support-panel-shadow: 0 18px 40px rgba(0,0,0,0.24);
            --support-tab-bg: rgba(255,255,255,0.03);
            --support-input-bg: rgba(255,255,255,0.04);
            --support-note-bg: rgba(0, 200, 83, 0.08);
            --support-note-border: rgba(0, 200, 83, 0.18);
        }
        
        html.light-mode {
            --bg-primary: #ffffff;
            --bg-secondary: #f6f8fa;
            --bg-tertiary: #eaeef2;
            --bg-card: #ffffff;
            --bg-hover: #f3f4f6;
            --border: #d0d7de;
            --border-light: #d8dee4;
            --text-primary: #1f2328;
            --text-secondary: #656d76;
            --text-muted: #8b949e;
            --support-panel-bg: linear-gradient(180deg, #ffffff, #f7f9fc);
            --support-panel-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
            --support-tab-bg: #eef2f7;
            --support-input-bg: #ffffff;
            --support-note-bg: rgba(0, 200, 83, 0.09);
            --support-note-border: rgba(0, 200, 83, 0.16);
        }

        html.light-mode .detail-live-panel {
            background: linear-gradient(180deg, #ffffff, #f6f8fa);
            border-color: var(--border);
            box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
        }
        html.light-mode .detail-live-team-row {
            background: #f6f8fa;
            border-color: var(--border-light);
        }
        html.light-mode .detail-live-team-icon {
            background: #eef2f7;
            border-color: var(--border-light);
        }
        html.light-mode .detail-order-book.inline {
            background: var(--bg-card);
        }
        
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            -webkit-font-smoothing: antialiased;
        }
        input, button, select, textarea {
            font-family: inherit;
        }
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--bg-primary); }
        ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

        /* Navigation */
        .nav {
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border);
            padding: 0 1.5rem;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        .nav-left { display: flex; align-items: center; gap: 2rem; }
        .nav-brand {
            font-size: 1.25rem;
            font-weight: 800;
            color: var(--text-primary);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        .nav-brand .ng { color: var(--green); }
        .nav-links { display: flex; gap: 0.25rem; }
        .nav-links button {
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 0.875rem;
            font-weight: 500;
            padding: 0.5rem 0.75rem;
            border-radius: 6px;
            transition: all 0.15s;
        }
        .nav-links button:hover { color: var(--text-primary); background: var(--bg-tertiary); }
        .nav-links button.active { color: var(--text-primary); background: var(--bg-tertiary); }
        .nav-right { display: flex; align-items: center; gap: 0.75rem; }
        .nav-controls { display: flex; align-items: center; gap: 0.75rem; }
        .theme-toggle {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.1rem;
            cursor: pointer;
            transition: all 0.15s;
            padding: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .theme-toggle:hover { color: var(--text-primary); }
        .currency-toggle {
            display: flex;
            background: var(--bg-tertiary);
            border-radius: 6px;
            padding: 2px;
            font-size: 0.75rem;
        }
        .currency-toggle button {
            background: none;
            border: none;
            color: var(--text-secondary);
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.75rem;
            transition: all 0.15s;
        }
        .currency-toggle button.active {
            background: var(--green);
            color: #000;
        }
        .user-menu-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.1rem;
            cursor: pointer;
            padding: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
        }
        .user-menu-btn:hover { color: var(--text-primary); }
        .user-menu-dropdown {
            position: absolute;
            top: 56px;
            right: 0;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            width: 180px;
            z-index: 200;
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
            overflow: hidden;
        }
        .user-menu-dropdown button {
            width: 100%;
            padding: 0.75rem 1rem;
            background: none;
            border: none;
            color: var(--text-primary);
            text-align: left;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.15s;
            border-bottom: 1px solid var(--border-light);
        }
        .user-menu-dropdown button:last-child { border-bottom: none; }
        .user-menu-dropdown button:hover { background: var(--bg-tertiary); }
        .btn-login {
            background: var(--green);
            color: #000;
            border: none;
            padding: 0.45rem 1rem;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.15s;
        }
        .btn-login:hover { background: var(--green-hover); }
        .balance-display {
            font-size: 0.85rem;
            color: var(--yellow);
            font-weight: 600;
        }
        .rate-indicator {
            font-size: 0.75rem;
            color: var(--text-secondary);
            padding: 0 0.5rem;
        }
        .bell-icon {
            position: relative;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 1.25rem;
            cursor: pointer;
            transition: all 0.15s;
            padding: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }
        .bell-icon:hover { color: var(--text-primary); }
        .bell-badge {
            position: absolute;
            top: -2px;
            right: -2px;
            background: var(--red);
            color: white;
            border-radius: 50%;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            font-weight: 700;
        }
        .notifications-panel {
            position: absolute;
            top: 56px;
            right: 0;
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 8px;
            width: 320px;
            max-height: 400px;
            overflow-y: auto;
            z-index: 200;
            box-shadow: 0 4px 12px rgba(0,0,0,0.4);
        }
        .notifications-header {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            font-size: 0.9rem;
        }
        .notifications-list {
            padding: 0;
            margin: 0;
        }
        .notification-item {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border-light);
            cursor: pointer;
            transition: background 0.15s;
        }
        .notification-item:hover { background: var(--bg-tertiary); }
        .notification-item.unread {
            background: var(--bg-tertiary);
        }
        .notification-title {
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 0.2rem;
        }
        .notification-message {
            font-size: 0.75rem;
            color: var(--text-secondary);
            margin-bottom: 0.25rem;
        }
        .notification-time {
            font-size: 0.65rem;
            color: var(--text-muted);
        }
        .mark-all-read {
            padding: 0.5rem 1rem;
            border-top: 1px solid var(--border);
            text-align: center;
            font-size: 0.75rem;
            color: var(--green);
            cursor: pointer;
            background: none;
            border: none;
            width: 100%;
        }
        .mark-all-read:hover { background: var(--bg-tertiary); }
        .notifications-close-btn {
            /* Hidden by default; only visible when the panel is in
               full-screen mobile mode (see media query below). */
            display: none;
        }
        /* Desktop: the panel inner is just the panel itself; no separate
           backdrop or modal frame needed. We define an inner wrapper so
           the same DOM works in both layouts. */
        .notifications-panel-inner {
            display: contents;
        }
        @media (max-width: 768px) {
            /* On mobile, turn the dropdown into a full-screen modal:
               the .notifications-panel becomes a fixed overlay covering
               the viewport (with a dim backdrop), and a new internal
               wrapper .notifications-panel-inner becomes the actual
               card-shaped sheet positioned within. The existing desktop
               override at line ~3554 (which made it 100vw width) is
               now superseded for mobile-fullscreen markup.
               This rule wins because it's later in the cascade and the
               class .mobile-fullscreen is more specific. */
            .notifications-panel.mobile-fullscreen {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100vw;
                max-width: 100vw;
                max-height: 100vh;
                background: rgba(0, 0, 0, 0.6);
                border: none;
                border-radius: 0;
                box-shadow: none;
                z-index: 1000;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                padding: 0;
            }
            .notifications-panel.mobile-fullscreen .notifications-panel-inner {
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100%;
                background: var(--bg-secondary);
                /* Push the sheet down so the user can still see the page
                   header behind the dim backdrop and tap it to dismiss
                   if they want the iOS-style swipe-down feel. Set to 0
                   for a true full-screen — current value gives a small
                   peek at the underlying nav. */
                margin-top: 0;
                overflow: hidden;
            }
            .notifications-panel.mobile-fullscreen .notifications-header {
                padding: 1rem 1rem;
                font-size: 1.05rem;
                /* Larger tap target for the close button. */
                position: sticky;
                top: 0;
                background: var(--bg-secondary);
                z-index: 1;
            }
            .notifications-panel.mobile-fullscreen .notifications-close-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: transparent;
                border: 1px solid var(--border);
                color: var(--text-primary);
                width: 2.2rem;
                height: 2.2rem;
                border-radius: 50%;
                cursor: pointer;
                font-size: 1rem;
                line-height: 1;
                padding: 0;
            }
            .notifications-panel.mobile-fullscreen .notifications-close-btn:hover {
                background: var(--bg-tertiary);
            }
            .notifications-panel.mobile-fullscreen .notifications-list {
                flex: 1;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            .notifications-panel.mobile-fullscreen .notification-item {
                padding: 1rem;
            }
            .notifications-panel.mobile-fullscreen .notification-title { font-size: 0.95rem; }
            .notifications-panel.mobile-fullscreen .notification-message { font-size: 0.85rem; }
            .notifications-panel.mobile-fullscreen .notification-time { font-size: 0.7rem; }
            .notifications-panel.mobile-fullscreen .mark-all-read {
                padding: 1rem;
                font-size: 0.9rem;
                position: sticky;
                bottom: 0;
                background: var(--bg-secondary);
            }
        }
        .watch-market-btn {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-primary);
            border-radius: 999px;
            padding: 0.45rem 0.8rem;
            font-size: 0.8rem;
            font-weight: 700;
            cursor: pointer;
        }
        .watch-market-btn.active {
            background: var(--green-bg);
            color: var(--green);
            border-color: rgba(0, 214, 90, 0.4);
        }
        .notification-settings-list {
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
            margin-top: 0.9rem;
        }
        .notification-setting-row {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--border-light);
        }
        .notification-setting-row:last-child {
            border-bottom: none;
        }
        .notification-setting-copy {
            min-width: 0;
            flex: 1;
        }
        .notification-setting-copy strong {
            display: block;
            font-size: 0.86rem;
            color: var(--text-primary);
            margin-bottom: 0.15rem;
        }
        .notification-setting-copy span {
            display: block;
            font-size: 0.76rem;
            color: var(--text-muted);
            line-height: 1.45;
        }
        .notification-categories-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.55rem;
            margin-top: 0.85rem;
        }
        .notification-category-chip {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.55rem 0.65rem;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--bg-tertiary);
            font-size: 0.8rem;
        }
        .notification-category-chip input {
            width: auto;
            margin: 0;
        }

        /* Mobile nav */
        .mobile-nav {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--bg-secondary);
            border-top: 1px solid var(--border);
            padding: 0.4rem 0 calc(0.45rem + env(safe-area-inset-bottom, 0px));
            z-index: 100;
            justify-content: space-around;
        }
        .mobile-nav button {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 0.65rem;
            padding: 0.25rem 0.35rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.15rem;
            cursor: pointer;
            min-width: 0;
            flex: 1;
        }
        .mobile-nav button.active { color: var(--green); }
        .mobile-nav button .icon { font-size: 1.25rem; }
        .mobile-nav-icon {
            width: 1.45rem;
            height: 1.45rem;
            display: block;
        }
        .nav-ui-icon {
            width: 1.25rem;
            height: 1.25rem;
            display: block;
        }
        .bell-icon .nav-ui-icon,
        .theme-toggle .nav-ui-icon,
        .user-menu-btn .nav-ui-icon {
            pointer-events: none;
        }
        .nav-brand {
            cursor: pointer;
            user-select: none;
        }
        .nav-arrow-icon {
            width: 1.5rem;
            height: 1.5rem;
            display: block;
        }
        .nav-arrow-icon.flipped {
            transform: scaleX(-1);
        }
        .mobile-nav button span:last-child {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Main layout */
        .main { max-width: 1280px; margin: 0 auto; padding: 1.5rem; }
        .page-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        /* Category filters */
        .filters {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1.25rem;
            overflow-x: auto;
            padding-bottom: 0.5rem;
            -webkit-overflow-scrolling: touch;
        }
        .filters::-webkit-scrollbar { display: none; }
        .filter-btn {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            padding: 0.4rem 0.9rem;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.15s;
        }
        .filter-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
        .filter-btn.active {
            background: var(--green-bg);
            border-color: var(--green);
            color: var(--green);
        }
        .filter-btn-content {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
        }
        .filter-icon {
            width: 1rem;
            height: 1rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
            line-height: 1;
            flex-shrink: 0;
        }
        .filter-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .filter-count {
            color: var(--text-muted);
            font-size: 0.78rem;
        }
        .filter-btn.active .filter-count {
            color: inherit;
            opacity: 0.9;
        }
        .filter-strip {
            position: relative;
            margin-bottom: 1.25rem;
        }
        .filter-strip .filters,
        .filter-strip .subfilters {
            margin-bottom: 0;
            padding-left: 2.9rem;
            padding-right: 2.9rem;
        }
        .filter-strip-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(calc(-50% - 0.2rem));
            width: 2.15rem;
            height: 2.15rem;
            border-radius: 999px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 2;
            transition: opacity 0.15s;
            box-shadow: none;
            -webkit-tap-highlight-color: transparent;
            -webkit-appearance: none;
            appearance: none;
        }
        .filter-strip-arrow:hover,
        .filter-strip-arrow:focus,
        .filter-strip-arrow:focus-visible,
        .filter-strip-arrow:active {
            color: var(--text-muted);
            background: transparent;
            outline: none;
        }
        .filter-strip-arrow:disabled {
            opacity: 0.38;
            cursor: default;
        }
        .filter-strip-arrow.left { left: 0; }
        .filter-strip-arrow.right { right: 0; }
        .subfilters {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-top: -0.15rem;
            margin-bottom: 1.25rem;
            overflow-x: auto;
            padding-bottom: 0.4rem;
            -webkit-overflow-scrolling: touch;
        }
        .subfilters::-webkit-scrollbar { display: none; }
        .subfilters-label {
            color: var(--text-muted);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            white-space: nowrap;
            flex-shrink: 0;
        }

        /* Search */
        .search-bar {
            width: 100%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.6rem 1rem;
            color: var(--text-primary);
            font-size: 0.875rem;
            margin-bottom: 1.25rem;
            outline: none;
            transition: border-color 0.15s;
        }
        .search-bar:focus { border-color: var(--green); }
        .search-bar::placeholder { color: var(--text-muted); }

        /* Market cards */
        .markets-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }
        .markets-virtual-spacer {
            grid-column: 1 / -1;
            pointer-events: none;
        }
        .market-row {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 18px;
            padding: 1.25rem;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 1rem;
            cursor: pointer;
            transition: all 0.15s;
            min-height: 100%;
        }
        .market-row:hover { background: var(--bg-hover); border-color: var(--border); }
        /* Skeleton placeholder shown briefly while filter transitions
           run. Matches MarketRow's outer dimensions (min-height + same
           padding/border treatment via .market-row) so the layout
           doesn't jump when real cards land. The dim animated
           background gives the "loading something" cue without
           requiring per-row content. */
        .market-card-skeleton {
            cursor: default !important;
            pointer-events: none;
            background: linear-gradient(
                100deg,
                rgba(255, 255, 255, 0.025) 30%,
                rgba(255, 255, 255, 0.06) 50%,
                rgba(255, 255, 255, 0.025) 70%
            ) !important;
            background-size: 200% 100% !important;
            animation: market-card-skeleton-pulse 1.4s ease-in-out infinite;
            min-height: 200px;
        }
        .market-card-skeleton:hover {
            background: linear-gradient(
                100deg,
                rgba(255, 255, 255, 0.025) 30%,
                rgba(255, 255, 255, 0.06) 50%,
                rgba(255, 255, 255, 0.025) 70%
            ) !important;
            border-color: var(--border-light) !important;
        }
        @keyframes market-card-skeleton-pulse {
            0% { background-position: 100% 0; }
            100% { background-position: -100% 0; }
        }
        .market-card-head {
            display: flex;
            align-items: flex-start;
            gap: 0.95rem;
        }
        .market-icon {
            font-size: 2rem;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg-tertiary);
            border-radius: 10px;
            flex-shrink: 0;
            overflow: hidden;
        }
        .market-icon-asset {
            width: 100%;
            height: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            object-fit: cover;
            font-size: 2rem;
            line-height: 1;
        }
        .market-info { flex: 1; min-width: 0; }
        .market-title {
            font-size: 1.2rem;
            font-weight: 700;
            line-height: 1.25;
            margin-bottom: 0.45rem;
            color: var(--text-primary);
        }
        .market-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.55rem 0.9rem;
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        .market-live-inline {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            width: fit-content;
            max-width: 100%;
            padding: 0.45rem 0.7rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid var(--border-light);
            margin-top: -0.1rem;
        }
        .market-live-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            color: #ff6b6b;
            font-weight: 800;
            font-size: 0.74rem;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
        .market-live-badge::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: currentColor;
            box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.12);
        }
        .market-live-summary {
            font-size: 0.82rem;
            color: var(--text-secondary);
            font-weight: 700;
        }
        .market-outcomes {
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
        }
        .market-outcome {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 1rem;
        }
        .market-outcome.eliminated {
            opacity: 0.55;
        }
        .market-outcome.eliminated .market-outcome-name {
            text-decoration: line-through;
            text-decoration-thickness: 1px;
            color: var(--text-muted);
        }
        .market-outcome.eliminated .market-outcome-fill {
            background: var(--text-muted) !important;
        }
        .market-outcome-eliminated-badge {
            display: inline-block;
            font-size: 0.55rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            color: var(--red);
            border: 1px solid var(--red);
            padding: 0.1rem 0.35rem;
            border-radius: 4px;
            text-transform: uppercase;
            margin-left: 0.4rem;
            vertical-align: middle;
            line-height: 1;
        }
        .market-outcome.closed {
            opacity: 0.7;
        }
        .market-outcome.closed .market-outcome-name {
            color: var(--text-secondary);
        }
        .market-outcome-closed-badge {
            display: inline-block;
            font-size: 0.55rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            color: var(--text-muted);
            border: 1px solid var(--text-muted);
            padding: 0.1rem 0.35rem;
            border-radius: 4px;
            text-transform: uppercase;
            margin-left: 0.4rem;
            vertical-align: middle;
            line-height: 1;
        }
        .market-outcome-main {
            flex: 1;
            min-width: 0;
        }
        .market-outcome-top {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 0.35rem;
        }
        .market-outcome-label {
            display: inline-flex;
            align-items: center;
            gap: 0.7rem;
            min-width: 0;
            flex: 1;
        }
        .market-outcome-icon {
            width: 30px;
            height: 30px;
            border-radius: 999px;
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border-light);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            flex-shrink: 0;
            font-size: 1rem;
            line-height: 1;
        }
        .market-outcome-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .market-outcome-name {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .market-outcome-prob {
            font-size: 2rem;
            font-weight: 800;
            line-height: 1;
            flex-shrink: 0;
        }
        .market-outcome-bar {
            height: 4px;
            border-radius: 999px;
            background: var(--border-light);
            overflow: hidden;
        }
        .market-outcome-fill {
            display: block;
            height: 100%;
            border-radius: inherit;
        }
        .market-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.75rem;
            margin-top: auto;
            padding-top: 0.25rem;
        }
        .market-vol {
            font-size: 0.88rem;
            color: var(--text-secondary);
            font-weight: 600;
        }
        .market-outcome-count {
            font-size: 0.82rem;
            color: var(--text-muted);
            font-weight: 600;
        }

        /* Market detail */
        .detail-layout {
            display: grid;
            grid-template-columns: 1fr 380px;
            gap: 1.5rem;
            margin-top: 1rem;
        }
        .mobile-only { display: none; }
        .desktop-only { display: block; }
        .detail-left { min-width: 0; }
        .detail-right { min-width: 0; }
        .detail-header {
            display: flex;
            align-items: flex-start;
            gap: 1.15rem;
            margin-bottom: 1.25rem;
        }
        /* Detail-page logo. Bumped from 58px → 96px to match the
           visual weight Kalshi gives the market icon — it now reads
           as a proper page anchor next to the title rather than a
           card-sized chip. The text column to the right is forced
           to take the remaining width via min-width:0 so long
           titles wrap inside the column instead of pushing the
           layout. .detail-title-block adds vertical padding so
           short titles still sit roughly centered against the
           taller logo without us locking align-items:center
           (which would float multi-line titles oddly). */
        .detail-icon {
            width: 96px;
            height: 96px;
            border-radius: 20px;
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border-light);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            flex-shrink: 0;
        }
        .detail-icon-asset {
            width: 100%;
            height: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            object-fit: cover;
            font-size: 3rem;
            line-height: 1;
        }
        .detail-title-block {
            min-width: 0;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-top: 0.15rem;
        }
        .detail-title { font-size: 1.55rem; font-weight: 700; line-height: 1.25; }
        .detail-category {
            font-size: 0.8rem;
            color: var(--green);
            font-weight: 500;
            margin-bottom: 0.35rem;
            letter-spacing: 0.02em;
            text-transform: uppercase;
        }
        .detail-stats {
            display: flex;
            gap: 1.5rem;
            margin: 1rem 0;
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        .detail-stats span { display: flex; align-items: center; gap: 0.3rem; }
        .detail-live-panel {
            background: linear-gradient(180deg, rgba(20, 26, 35, 0.96), rgba(15, 20, 28, 0.94));
            border: 1px solid var(--border-light);
            border-radius: 16px;
            padding: 1rem 1.1rem;
            margin: 0.85rem 0 1rem;
            box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
        }
        .detail-live-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.85rem;
            margin-bottom: 0.9rem;
        }
        .detail-live-state {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--green);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }
        .detail-live-state.live::before {
            content: '';
            width: 0.5rem;
            height: 0.5rem;
            border-radius: 999px;
            background: currentColor;
            box-shadow: 0 0 0 0.18rem rgba(0, 200, 83, 0.18);
        }
        .detail-live-state.finished {
            color: var(--text-secondary);
        }
        .detail-live-state.cancelled {
            color: var(--red);
        }
        .detail-live-clock {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text-primary);
            white-space: nowrap;
        }
        .detail-live-scoreboard {
            display: grid;
            gap: 0.75rem;
        }
        .detail-live-team-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 1rem;
            padding: 0.85rem 0.95rem;
            border-radius: 14px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.05);
        }
        .detail-live-team-meta {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            min-width: 0;
        }
        .detail-live-team-icon {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 999px;
            overflow: hidden;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .detail-live-team-icon-asset {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            line-height: 1;
        }
        .detail-live-team-name {
            color: var(--text-primary);
            font-weight: 700;
            font-size: 1rem;
            line-height: 1.25;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .detail-live-team-score {
            color: var(--text-primary);
            font-size: 2rem;
            font-weight: 800;
            line-height: 1;
            min-width: 2ch;
            text-align: right;
        }
        .detail-live-scoreline {
            margin-top: 0.9rem;
            font-size: 0.82rem;
            color: var(--text-muted);
        }
        .market-option-list {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 12px;
            margin-bottom: 1rem;
            overflow: hidden;
        }
        .market-option-row {
            width: 100%;
            background: transparent;
            border: none;
            border-bottom: 1px solid var(--border-light);
            color: inherit;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 1.15rem;
            text-align: left;
            transition: background 0.15s ease, box-shadow 0.15s ease;
        }
        .market-option-row:last-child {
            border-bottom: none;
        }
        .market-option-row:hover {
            background: rgba(255,255,255,0.03);
        }
        .market-option-row.active {
            background: rgba(16, 185, 129, 0.09);
            box-shadow: inset 3px 0 0 var(--green);
        }
        .market-option-main {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }
        .market-option-name {
            color: var(--text-primary);
            font-size: 1rem;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .market-option-meta {
            color: var(--text-muted);
            font-size: 0.76rem;
            display: flex;
            gap: 0.55rem;
            flex-wrap: wrap;
        }
        .market-option-actions {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            flex-shrink: 0;
        }
        .market-option-prob {
            color: var(--text-primary);
            font-size: 1.45rem;
            font-weight: 800;
            min-width: 4.25rem;
            text-align: right;
        }
        .market-option-select-hint {
            color: var(--text-muted);
            font-size: 0.75rem;
            font-weight: 600;
        }
        .detail-description {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 10px;
            padding: 1.25rem;
            margin-top: 1rem;
        }
        .detail-description h3 {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
            font-weight: 600;
        }
        .detail-description p {
            font-size: 0.875rem;
            color: var(--text-primary);
            line-height: 1.5;
        }
        .detail-description-text,
        .market-rules .rule-value {
            white-space: pre-wrap;
            overflow-wrap: anywhere;
        }
        .detail-description-text.clamped {
            display: -webkit-box;
            -webkit-line-clamp: 6;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .market-rules .rule-value.clamped {
            display: -webkit-box;
            -webkit-line-clamp: 8;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .read-more-btn {
            margin-top: 0.65rem;
            padding: 0;
            border: none;
            background: none;
            color: var(--green);
            font-size: 0.85rem;
            font-weight: 800;
            cursor: pointer;
        }

        /* Chart placeholder */
        .chart-container {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 10px;
            padding: 1.25rem;
            min-height: 320px;
            display: flex;
            flex-direction: column;
        }
        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
            gap: 1rem;
        }
        .chart-price {
            font-size: 2rem;
            font-weight: 700;
            color: var(--green);
        }
        .chart-timeframes {
            display: flex;
            gap: 0.25rem;
            flex-wrap: wrap;
            justify-content: flex-end;
        }
        .chart-timeframes button {
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 0.75rem;
            font-weight: 600;
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            cursor: pointer;
        }
        .chart-timeframes button.active {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }
        .chart-area {
            flex: 1;
            position: relative;
            overflow: hidden;
            touch-action: none;
        }
        .chart-svg { width: 100%; height: 100%; }
        .chart-hover-panel {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.9rem;
            flex-wrap: wrap;
            margin-bottom: 0.8rem;
            padding: 0.75rem 0.85rem;
            border: 1px solid var(--border-light);
            border-radius: 12px;
            background: rgba(13, 17, 23, 0.72);
        }
        .light .chart-hover-panel,
        html.light-mode .chart-hover-panel {
            background: var(--bg-card);
            color: var(--text-primary);
            border-color: var(--border);
        }
        .chart-hover-time {
            font-size: 0.8rem;
            color: var(--text-secondary);
            font-weight: 700;
            min-width: 7rem;
        }
        .chart-hover-values {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.6rem 1rem;
            flex-wrap: wrap;
            flex: 1;
            min-width: min(100%, 16rem);
        }
        .chart-hover-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.65rem;
            font-size: 0.92rem;
            min-width: 0;
        }
        .chart-hover-label {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            min-width: 0;
            color: var(--text-primary);
        }
        .chart-hover-label-text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 10rem;
        }
        .chart-hover-dot {
            width: 0.72rem;
            height: 0.72rem;
            border-radius: 999px;
            flex-shrink: 0;
        }
        .chart-hover-value {
            color: var(--text-primary);
            font-weight: 700;
            font-size: 1rem;
        }
        .chart-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem 0.75rem;
            margin-bottom: 0.7rem;
        }
        .chart-legend-item {
            display: inline-flex;
            align-items: center;
            gap: 0.42rem;
            color: var(--text-secondary);
            font-size: 0.75rem;
            font-weight: 600;
            min-width: 0;
        }
        .chart-legend-item .label {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 11rem;
        }
        .chart-empty-state {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: var(--text-muted);
            font-size: 0.9rem;
            border: 1px dashed var(--border);
            border-radius: 10px;
            background: rgba(255,255,255,0.01);
        }

        /* Trade panel */
        .trade-panel {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 10px;
            padding: 1.25rem;
            position: sticky;
            top: 72px;
        }
        .trade-tabs {
            display: flex;
            gap: 0;
            margin-bottom: 1rem;
            background: var(--bg-tertiary);
            border-radius: 8px;
            padding: 3px;
        }
        .trade-tabs button {
            flex: 1;
            background: none;
            border: none;
            color: var(--text-secondary);
            padding: 0.5rem;
            font-weight: 600;
            font-size: 0.875rem;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.15s;
        }
        .trade-tabs button.active {
            background: var(--bg-card);
            color: var(--text-primary);
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        .outcome-btns {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        .outcome-btn {
            padding: 0.75rem;
            border-radius: 8px;
            font-weight: 700;
            font-size: 0.95rem;
            cursor: pointer;
            border: 2px solid var(--border);
            transition: all 0.15s;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
        }
        .outcome-btn.selected {
            background: var(--green-bg);
            color: var(--green);
            border-color: var(--green);
        }
        .outcome-btn.no-liquidity {
            background: var(--bg-tertiary);
            color: var(--text-muted);
            border-color: var(--border-light);
        }
        .outcome-btn.no-liquidity.selected {
            background: var(--bg-tertiary);
            color: var(--text-muted);
            border-color: var(--border-light);
        }
        .sell-position-strip {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.85rem 0.95rem;
            margin-bottom: 1rem;
        }
        .sell-position-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.75rem;
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-bottom: 0.65rem;
        }
        .sell-position-value {
            color: var(--green);
            font-weight: 700;
        }
        .sell-position-options {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        .sell-position-chip {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 0.45rem 0.8rem;
            transition: all 0.15s;
        }
        .sell-position-chip.active {
            border-color: var(--green);
            background: var(--green-bg);
            color: var(--green);
        }
        .sell-empty-state {
            background: rgba(255,255,255,0.02);
            border: 1px dashed var(--border);
            border-radius: 8px;
            color: var(--text-muted);
            font-size: 0.82rem;
            margin-bottom: 1rem;
            padding: 0.85rem 0.95rem;
        }
        .trade-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-bottom: 0.35rem;
            display: flex;
            justify-content: space-between;
        }
        .trade-label-main {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }
        .trade-info-icon {
            width: 16px;
            height: 16px;
            border-radius: 999px;
            border: 1px solid var(--border);
            color: var(--text-muted);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.68rem;
            font-weight: 800;
            cursor: help;
            line-height: 1;
            background: rgba(255,255,255,0.03);
        }
        .amount-input-wrap {
            position: relative;
            margin-bottom: 0.75rem;
            height: 88px;
        }
        .amount-side-notes {
            position: absolute;
            left: 1rem;
            top: 0.55rem;
            bottom: 0.55rem;
            width: 7rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: flex-start;
            pointer-events: none;
        }
        .amount-side-note {
            font-size: 0.62rem;
            color: var(--text-muted);
            font-weight: 600;
            line-height: 1.1;
            white-space: nowrap;
        }
        .amount-side-note.error {
            color: var(--red);
        }
        .amount-prefix {
            display: block;
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1;
        }
        .amount-input {
            width: 100%;
            height: 100%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.75rem 0.9rem 0.75rem 8.4rem;
            color: var(--text-primary);
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1;
            outline: none;
            text-align: right;
            transition: border-color 0.15s;
        }
        .amount-input:focus { border-color: var(--green); }
        .contracts-input-wrap .amount-side-notes {
            width: 7.8rem;
        }
        .contracts-input-wrap .amount-input {
            padding-left: 8.65rem;
        }
        .quick-amounts {
            display: flex;
            gap: 0.35rem;
            margin-bottom: 1rem;
        }
        .quick-btn {
            flex: 1;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            padding: 0.35rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.15s;
        }
        .quick-btn:hover { border-color: var(--green); color: var(--green); }
        .trade-summary {
            background: var(--bg-tertiary);
            border-radius: 8px;
            padding: 0.75rem;
            margin-bottom: 1rem;
        }
        .trade-summary-row {
            display: flex;
            justify-content: space-between;
            font-size: 0.825rem;
            padding: 0.25rem 0;
        }
        .trade-entry-mode-row {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 0.85rem;
        }
        .trade-entry-select {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 0.55rem 0.75rem;
            border-radius: 10px;
            font-weight: 700;
            appearance: none;
            -webkit-appearance: none;
            padding-right: 2.25rem;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 0.85rem;
        }
        .trade-limit-grid {
            display: grid;
            gap: 0.75rem;
            margin-top: 0.9rem;
            margin-bottom: 0.9rem;
        }
        .trade-limit-input {
            width: 100%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0.95rem 1rem;
            color: var(--text-primary);
            font-size: 1.1rem;
            font-weight: 700;
            outline: none;
            text-align: right;
        }
        .trade-limit-input:focus {
            border-color: var(--green);
        }
        .trade-expiration-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0.95rem 1rem;
        }
        .trade-expiration-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        .trade-expiration-value {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text-primary);
            text-align: right;
        }
        .trade-expiration-note {
            width: 100%;
            border: none;
            border-radius: 8px;
            background: rgba(255,255,255,0.08);
            color: var(--text-primary);
            padding: 0.7rem 0.85rem;
            font-size: 0.85rem;
            font-weight: 700;
            text-align: center;
        }
        .trade-tif-tiles {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 0.5rem;
        }
        .trade-tif-tile {
            border: none;
            border-radius: 10px;
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            padding: 0.75rem 0.4rem;
            font-size: 0.82rem;
            font-weight: 700;
            cursor: pointer;
        }
        .trade-tif-tile.active {
            background: #f4f4f4;
            color: #14171c;
        }
        .trade-summary-row .label { color: var(--text-secondary); }
        .trade-summary-row .value { font-weight: 600; }
        .to-win {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--green);
            text-align: center;
            padding: 0.5rem 0;
        }
        .to-win-label {
            font-size: 0.75rem;
            color: var(--text-muted);
            text-align: center;
        }
        .trade-btn {
            width: 100%;
            padding: 0.85rem;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s;
            margin-top: 0.5rem;
        }
        .trade-eliminated-banner {
            margin-top: 0.6rem;
            padding: 0.65rem 0.75rem;
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.4);
            color: var(--red);
            font-size: 0.78rem;
            line-height: 1.35;
            border-radius: 8px;
            text-align: center;
        }
        .trade-custom-expiry {
            margin-top: 0.65rem;
            padding: 0.95rem 0.95rem 0.85rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 10px;
        }
        .trade-custom-expiry-fields {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.7rem;
        }
        .trade-custom-expiry-field label {
            display: block;
            font-size: 0.72rem;
            color: var(--text-muted);
            margin-bottom: 0.35rem;
        }
        .trade-custom-expiry-field input {
            width: 100%;
            background: var(--bg-card);
            border: 1px solid var(--border);
            color: var(--text-primary);
            border-radius: 10px;
            padding: 0.85rem 0.85rem;
            font-size: 1rem;
            min-height: 3rem;
            -webkit-appearance: none;
            appearance: none;
            font-family: inherit;
        }
        .trade-custom-expiry-field input::-webkit-calendar-picker-indicator {
            cursor: pointer;
            opacity: 0.7;
        }
        .trade-custom-expiry-field input:hover::-webkit-calendar-picker-indicator {
            opacity: 1;
        }
        .trade-custom-expiry-field input:focus {
            outline: 2px solid rgba(34, 197, 94, 0.6);
            outline-offset: -1px;
        }
        .trade-custom-expiry-help {
            margin-top: 0.7rem;
            font-size: 0.78rem;
            color: var(--text-muted);
            line-height: 1.45;
        }
        @media (max-width: 540px) {
            .trade-custom-expiry {
                padding: 0.85rem 0.75rem 0.75rem;
            }
            .trade-custom-expiry-fields {
                /* Keep two columns on mobile so the picker matches desktop
                   layout — Date on the left, Time on the right. iOS Safari
                   renders these via native pickers when tapped, so the
                   inputs just need to look like consistent tiles when idle. */
                grid-template-columns: 1fr 1fr;
                gap: 0.5rem;
            }
            .trade-custom-expiry-field input {
                font-size: 0.92rem;
                padding: 0.85rem 0.6rem;
                min-height: 3.1rem;
            }
        }
        @media (max-width: 380px) {
            /* Very narrow phones — stack vertically as a fallback so the
               two pickers don't get squished. */
            .trade-custom-expiry-fields {
                grid-template-columns: 1fr;
            }
        }
        .trade-nl-nudge {
            margin-top: 0.6rem;
            padding: 0.85rem 0.95rem;
            background: rgba(34, 197, 94, 0.08);
            border: 1px solid rgba(34, 197, 94, 0.35);
            color: var(--text-primary);
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 0.85rem;
        }
        .trade-nl-nudge-text {
            flex: 1;
            min-width: 0;
            font-size: 0.85rem;
            line-height: 1.4;
        }
        .trade-nl-nudge-btn {
            background: var(--green) !important;
            color: #fff !important;
            border: none !important;
            border-radius: 8px !important;
            padding: 0.65rem 1rem !important;
            font-size: 0.85rem !important;
            font-weight: 700 !important;
            cursor: pointer !important;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 2.4rem;
        }
        .trade-nl-nudge-btn:hover { background: var(--green-hover) !important; }
        /* Stack on tablets/phones — anything narrower than ~768px gets the
           full-width button so the CTA isn't squeezed off-screen on iPhones
           rendering at 375–414px. */
        @media (max-width: 768px) {
            .trade-nl-nudge {
                flex-direction: column;
                align-items: stretch;
                gap: 0.7rem;
            }
            .trade-nl-nudge-btn {
                width: 100% !important;
                padding: 0.75rem 1rem !important;
                font-size: 0.9rem !important;
                min-height: 2.7rem;
            }
        }
        .trade-btn.buy-mode {
            background: var(--green);
            color: #000;
        }
        .trade-btn.buy-mode:hover { background: var(--green-hover); }
        .trade-btn.sell-mode {
            background: var(--blue);
            color: #07131f;
        }
        .trade-btn.sell-mode:hover { opacity: 0.9; }
        .trade-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        .trade-disclaimer {
            font-size: 0.7rem;
            color: var(--text-muted);
            text-align: center;
            margin-top: 0.5rem;
        }
        .trade-disclaimer a {
            color: var(--green);
            text-decoration: none;
            cursor: pointer;
        }
        .terms-checkbox {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: start;
            gap: 0.5rem;
            margin-bottom: 1rem;
            font-size: 0.8rem;
            color: var(--text-secondary);
            width: 100%;
        }
        .terms-checkbox input[type="checkbox"] {
            cursor: pointer;
            width: 1.05rem;
            height: 1.05rem;
            max-width: 1.05rem;
            margin: 0.12rem 0 0;
            margin-bottom: 0;
            padding: 0;
            flex: 0 0 auto;
        }
        .terms-checkbox a {
            color: var(--green);
            text-decoration: none;
            cursor: pointer;
        }
        .terms-checkbox label {
            min-width: 0;
            margin-bottom: 0;
        }

        /* Portfolio */
        .portfolio-card {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 10px;
            padding: 1rem 1.25rem;
            margin-bottom: 0.5rem;
        }
        .portfolio-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.5rem;
        }
        .portfolio-market { font-weight: 600; font-size: 0.9rem; }
        .portfolio-outcome {
            font-size: 0.75rem;
            font-weight: 700;
            padding: 0.2rem 0.5rem;
            border-radius: 4px;
            max-width: 180px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            background: var(--green-bg);
            color: var(--green);
        }
        .portfolio-outcome.status-completed {
            background: var(--green-bg);
            color: var(--green);
        }
        .portfolio-outcome.status-failed {
            background: rgba(255, 91, 91, 0.14);
            color: var(--red);
        }
        .portfolio-outcome.status-pending,
        .portfolio-outcome.status-cancelled {
            background: rgba(255, 193, 7, 0.12);
            color: #f4c44e;
        }
        .portfolio-details {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
            font-size: 0.8rem;
        }
        .portfolio-details .label { color: var(--text-muted); }
        .portfolio-details .val { font-weight: 600; margin-top: 0.15rem; }

        /* Wallet */
        .wallet-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        .wallet-card {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 10px;
            padding: 1.25rem;
        }
        .wallet-label { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 0.35rem; }
        .wallet-amount { font-size: 1.75rem; font-weight: 800; }
        .wallet-actions {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.75rem;
        }
        .wallet-actions button {
            flex: 1;
            padding: 0.5rem;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.8rem;
            cursor: pointer;
            border: none;
            transition: all 0.15s;
        }
        .btn-deposit { background: var(--green); color: #000; }
        .btn-deposit:hover { background: var(--green-hover); }
        .btn-withdraw { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border) !important; }

        /* Profile/Account Settings */
        .profile-section {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        .profile-section h3 {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: var(--text-primary);
        }
        .profile-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--border-light);
        }
        .profile-row:last-child { border-bottom: none; }
        .profile-row.editable {
            cursor: pointer;
            transition: background 0.15s ease;
        }
        .profile-row.editable:hover {
            background: rgba(255,255,255,0.02);
        }
        .profile-label {
            font-size: 0.85rem;
            color: var(--text-secondary);
            font-weight: 500;
        }
        .profile-value {
            font-size: 0.9rem;
            color: var(--text-primary);
            font-weight: 600;
        }
        .profile-row-action {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            color: var(--text-muted);
            font-size: 0.8rem;
            font-weight: 600;
        }
        .profile-row-btn {
            border: 1px solid var(--border);
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-radius: 999px;
            padding: 0.45rem 0.85rem;
            font-size: 0.78rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .profile-row-btn:hover {
            border-color: var(--green);
            color: var(--green);
        }
        .profile-row-btn.primary {
            background: var(--green);
            color: #000;
            border-color: transparent;
        }
        .profile-edit-btn {
            background: var(--green);
            color: #000;
            border: none;
            padding: 0.4rem 0.8rem;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.15s;
        }
        .profile-edit-btn:hover { background: var(--green-hover); }
        .page-primary-btn {
            background: var(--green);
            color: #000;
            border: none;
            padding: 0.75rem 1rem;
            border-radius: 10px;
            font-weight: 700;
            font-size: 0.9rem;
            cursor: pointer;
        }
        .page-primary-btn:disabled {
            opacity: 0.55;
            cursor: not-allowed;
        }
        .account-hero-card {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .profile-avatar-button {
            border: none;
            background: transparent;
            padding: 0;
            border-radius: 999px;
            cursor: pointer;
            position: relative;
        }
        .media-crop-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.78);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 420;
            padding: 1rem;
        }
        .media-crop-modal {
            width: min(760px, 100%);
            max-height: min(92vh, 920px);
            background: #0d0f12;
            border: 1px solid var(--border-light);
            border-radius: 24px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
        }
        .media-crop-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 1.25rem;
            background: #060708;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }
        .media-crop-header h3 {
            margin: 0;
            font-size: 1.5rem;
            font-weight: 800;
            color: #fff;
        }
        .media-crop-header-left {
            display: flex;
            align-items: center;
            gap: 0.9rem;
        }
        .media-crop-back {
            border: none;
            background: transparent;
            color: #fff;
            font-size: 1.6rem;
            cursor: pointer;
            padding: 0;
            line-height: 1;
        }
        .media-crop-apply {
            border: none;
            background: #f4f7fb;
            color: #111;
            border-radius: 999px;
            padding: 0.8rem 1.4rem;
            font-size: 0.98rem;
            font-weight: 800;
            cursor: pointer;
        }
        .media-crop-body {
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            overflow-y: auto;
        }
        .media-crop-stage {
            background: #111315;
            border-radius: 18px;
            padding: 1rem;
            display: grid;
            grid-template-columns: minmax(0, 1fr) 220px;
            gap: 1rem;
            align-items: start;
        }
        .media-crop-workspace {
            background: #1a1d20;
            border-radius: 16px;
            min-height: 420px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            overflow: hidden;
        }
        .media-crop-frame {
            position: relative;
            width: min(100%, 420px);
            aspect-ratio: 1;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid rgba(255, 255, 255, 0.8);
            background: #0f1113;
            box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
            touch-action: none;
            cursor: grab;
        }
        .media-crop-frame.dragging {
            cursor: grabbing;
        }
        .media-crop-image {
            position: absolute;
            top: 50%;
            left: 50%;
            user-select: none;
            pointer-events: none;
            max-width: none;
            max-height: none;
        }
        .media-crop-sidebar {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .media-crop-preview-label,
        .media-crop-control label {
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.45rem;
            display: block;
        }
        .media-crop-preview-circle {
            width: 180px;
            height: 180px;
            border-radius: 50%;
            overflow: hidden;
            position: relative;
            background: #0f1113;
            border: 2px solid rgba(255, 255, 255, 0.08);
            margin: 0 auto;
        }
        .media-crop-preview-circle .media-crop-image {
            pointer-events: none;
        }
        .media-crop-control {
            background: #14171a;
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 0.8rem 0.9rem;
        }
        .media-crop-control input[type="range"] {
            width: 100%;
            accent-color: var(--green);
        }
        .media-crop-control-value {
            color: var(--text-secondary);
            font-size: 0.82rem;
            margin-top: 0.25rem;
        }
        .media-crop-help {
            color: var(--text-secondary);
            font-size: 0.82rem;
            line-height: 1.5;
            background: #14171a;
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 0.9rem;
        }
        .account-hero-copy h2 {
            margin: 0 0 0.2rem 0;
            font-size: 1.15rem;
        }
        .account-hero-copy p {
            margin: 0;
            color: var(--text-secondary);
            line-height: 1.5;
        }
        .settings-section-actions {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-top: 0.5rem;
        }
        .settings-page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 1rem;
        }
        .settings-page-header .page-title {
            margin-bottom: 0;
        }
        .account-activity-list {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
            margin-top: 0.75rem;
        }
        .activity-history-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 1rem;
            align-items: start;
        }
        .account-activity-item {
            display: flex;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0.75rem 0.85rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 10px;
        }
        .account-activity-main {
            min-width: 0;
            flex: 1;
        }
        .account-activity-title {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.2rem;
        }
        .account-activity-meta {
            font-size: 0.76rem;
            color: var(--text-muted);
        }
        .account-activity-amount {
            font-size: 0.85rem;
            font-weight: 700;
            text-align: right;
            white-space: nowrap;
        }
        .account-activity-amount.pending { color: #f5c542; }
        .account-activity-amount.waiting { color: var(--text-muted); }
        .account-activity-amount.failed { color: var(--red); }
        .account-activity-amount.completed { color: var(--green); }
        .profile-avatar-editor {
            display: flex;
            align-items: flex-start;
            gap: 0.85rem;
            margin-bottom: 1rem;
        }
        .account-editor-card {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 12px;
            padding: 1.1rem;
            margin-bottom: 1rem;
        }
        .account-editor-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
        .account-editor-header h3 {
            margin: 0;
        }
        .account-editor-close {
            border: 1px solid var(--border);
            background: var(--bg-tertiary);
            color: var(--text-primary);
            border-radius: 8px;
            padding: 0.5rem 0.85rem;
            font-weight: 600;
            cursor: pointer;
        }
        .account-editor-card label {
            display: block;
            margin-bottom: 0.45rem;
            color: var(--text-secondary);
            font-size: 0.82rem;
            font-weight: 600;
        }
        .account-editor-card input[type="text"],
        .account-editor-card input[type="email"] {
            width: 100%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text-primary);
            padding: 0.85rem 0.95rem;
            font-size: 0.92rem;
            margin-bottom: 0.75rem;
            outline: none;
        }
        .account-editor-card input[type="text"]:focus,
        .account-editor-card input[type="email"]:focus {
            border-color: var(--green);
        }
        .profile-avatar-fields {
            min-width: 0;
            flex: 1;
        }
        .profile-avatar-preview,
        .comment-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .profile-avatar-preview {
            background: linear-gradient(135deg, rgba(0, 214, 90, 0.25), rgba(0, 122, 255, 0.22));
            border: 1px solid var(--border);
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text-primary);
        }
        .profile-avatar-preview.large {
            width: 72px;
            height: 72px;
            font-size: 1.2rem;
        }
        .avatar-fallback-text {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--text-primary);
            background: linear-gradient(135deg, rgba(0, 214, 90, 0.22), rgba(0, 122, 255, 0.18));
        }
        .profile-avatar-preview img,
        .comment-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .file-upload-row {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            flex-wrap: wrap;
            margin-bottom: 0.5rem;
        }
        .file-upload-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 10px;
            color: var(--text-primary);
            cursor: pointer;
            font-size: 0.82rem;
            font-weight: 700;
            padding: 0.7rem 0.95rem;
            overflow: hidden;
        }
        .file-upload-btn input {
            position: absolute;
            inset: 0;
            opacity: 0;
            cursor: pointer;
            margin: 0;
        }
        .file-upload-meta {
            color: var(--text-muted);
            font-size: 0.76rem;
            line-height: 1.45;
        }
        .input-hint {
            color: var(--text-muted);
            font-size: 0.74rem;
            line-height: 1.45;
            margin-top: -0.35rem;
            margin-bottom: 0.65rem;
        }
        .account-editor-preview-note {
            color: var(--text-muted);
            font-size: 0.8rem;
            line-height: 1.45;
            margin-top: -0.15rem;
            margin-bottom: 0.75rem;
        }
        .profile-limit-note {
            display: block;
            color: var(--text-muted);
            font-size: 0.74rem;
            line-height: 1.45;
            margin-top: -0.35rem;
            margin-bottom: 0.75rem;
        }
        .activity-link-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            padding: 0.95rem 1rem;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 12px;
            margin-bottom: 1rem;
        }
        .activity-link-copy h3 {
            margin: 0 0 0.25rem 0;
        }
        .activity-link-copy p {
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.84rem;
            line-height: 1.45;
        }
        .activity-link-btn {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-primary);
            border-radius: 10px;
            padding: 0.7rem 0.95rem;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
        }
        .public-profile-hero {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1.25rem;
            flex-wrap: wrap;
        }
        .public-profile-hero-main {
            display: flex;
            gap: 1rem;
            align-items: center;
            min-width: 0;
            flex: 1;
        }
        .public-profile-copy {
            min-width: 0;
        }
        .public-profile-copy h2 {
            margin: 0 0 0.35rem 0;
            font-size: 1.6rem;
            line-height: 1.1;
        }
        .public-profile-copy p {
            margin: 0;
            color: var(--text-secondary);
            line-height: 1.45;
        }
        .public-profile-joined {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            color: var(--text-muted);
            font-size: 0.82rem;
            margin-top: 0.35rem;
        }
        .public-profile-stat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
            gap: 0.85rem;
        }
        .public-profile-stat-card {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 0.95rem 1rem;
        }
        .public-profile-stat-label {
            color: var(--text-muted);
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.35rem;
        }
        .public-profile-stat-value {
            font-size: 1.35rem;
            font-weight: 800;
            color: var(--text-primary);
        }
        .public-profile-tab-row {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-bottom: 1rem;
        }
        .public-profile-tab-btn {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-secondary);
            border-radius: 999px;
            padding: 0.55rem 0.9rem;
            font-size: 0.82rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s ease;
        }
        .public-profile-tab-btn.active {
            background: rgba(0, 214, 96, 0.14);
            border-color: rgba(0, 214, 96, 0.28);
            color: var(--green);
        }
        .public-profile-list {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }
        .public-profile-item {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 0.95rem 1rem;
        }
        .public-profile-item-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 0.85rem;
            margin-bottom: 0.45rem;
            flex-wrap: wrap;
        }
        .public-profile-item-meta {
            color: var(--text-muted);
            font-size: 0.78rem;
            line-height: 1.45;
        }
        .public-profile-item-body {
            color: var(--text-secondary);
            font-size: 0.88rem;
            line-height: 1.55;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .public-profile-item-foot {
            display: flex;
            gap: 0.85rem;
            flex-wrap: wrap;
            margin-top: 0.7rem;
            color: var(--text-muted);
            font-size: 0.78rem;
        }
        .public-profile-market-link,
        .public-profile-user-link {
            border: none;
            background: none;
            color: var(--green);
            padding: 0;
            font: inherit;
            font-weight: 700;
            cursor: pointer;
            text-align: left;
        }
        .public-profile-market-link:hover,
        .public-profile-user-link:hover {
            text-decoration: underline;
        }
        .public-profile-empty {
            padding: 2rem 1rem;
            text-align: center;
            color: var(--text-muted);
        }
        .public-profile-category-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--border-light);
        }
        .public-profile-category-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
        .public-profile-category-meta {
            color: var(--text-muted);
            font-size: 0.78rem;
            margin-top: 0.2rem;
        }
        .identity-helper {
            font-size: 0.74rem;
            color: var(--text-muted);
            margin-top: -0.35rem;
            margin-bottom: 0.65rem;
            line-height: 1.45;
        }
        .danger-zone {
            border: 1px solid rgba(255, 82, 82, 0.28);
            background: rgba(255, 82, 82, 0.08);
            border-radius: 12px;
            padding: 1rem;
            margin-top: 1rem;
        }
        .danger-zone h3 {
            color: #ff8a80;
            font-size: 0.95rem;
            margin-bottom: 0.35rem;
        }
        .danger-zone p {
            color: var(--text-secondary);
            font-size: 0.82rem;
            line-height: 1.5;
            margin-bottom: 0.75rem;
        }
        .danger-btn {
            width: 100%;
            border: 1px solid rgba(255, 82, 82, 0.45);
            background: rgba(255, 82, 82, 0.16);
            color: #ffb4ad;
            border-radius: 10px;
            padding: 0.75rem;
            font-weight: 700;
            cursor: pointer;
        }
        .danger-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .delete-confirm-modal {
            max-width: 460px;
        }
        .delete-confirm-copy {
            color: var(--text-secondary);
            font-size: 0.92rem;
            line-height: 1.6;
            margin-bottom: 1rem;
        }
        .delete-confirm-copy strong {
            color: #ffb4ad;
        }
        .delete-confirm-note {
            color: var(--text-muted);
            font-size: 0.8rem;
            line-height: 1.5;
            margin-bottom: 1rem;
        }
        .delete-confirm-input {
            margin-bottom: 1rem;
        }
        .delete-confirm-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            flex-wrap: wrap;
        }
        .delete-confirm-actions .submit-btn {
            margin-top: 0;
            width: auto;
            min-width: 140px;
        }
        .account-modal {
            max-width: 520px;
            max-height: min(84vh, 760px);
            overflow-y: auto;
        }

        /* Admin */
        .admin-dashboard-filter {
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
            margin: 0.6rem 0 1rem;
            padding: 0.7rem 0.8rem;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
        }
        .admin-dashboard-filter-presets {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
        }
        .admin-dashboard-filter-pill {
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border);
            border-radius: 999px;
            padding: 0.35rem 0.75rem;
            font-size: 0.82rem;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
        }
        .admin-dashboard-filter-pill:hover {
            border-color: var(--accent, #16a34a);
            color: var(--text-primary);
        }
        .admin-dashboard-filter-pill.active {
            background: var(--accent, #16a34a);
            color: white;
            border-color: var(--accent, #16a34a);
        }
        .admin-dashboard-filter-custom {
            display: flex;
            gap: 0.7rem;
            flex-wrap: wrap;
            align-items: center;
            padding-top: 0.4rem;
            border-top: 1px dashed var(--border);
        }
        .admin-dashboard-filter-custom label {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.82rem;
            color: var(--text-muted);
        }
        .admin-dashboard-filter-custom input[type="date"] {
            background: var(--bg-elevated, var(--bg-card));
            color: var(--text-primary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.35rem 0.55rem;
            font-size: 0.85rem;
        }
        .admin-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        .stat-card {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 10px;
            padding: 1.25rem;
        }
        .stat-label { font-size: 0.8rem; color: var(--text-secondary); }
        .stat-value { font-size: 1.5rem; font-weight: 700; margin-top: 0.25rem; }
        .admin-table {
            width: 100%;
            border-collapse: collapse;
        }
        .admin-table th {
            text-align: left;
            padding: 0.75rem;
            font-size: 0.75rem;
            color: var(--text-muted);
            border-bottom: 1px solid var(--border);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .admin-table td {
            padding: 0.75rem;
            font-size: 0.85rem;
            border-bottom: 1px solid var(--border-light);
        }
        .admin-btn {
            padding: 0.3rem 0.65rem;
            border: none;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            margin-right: 0.25rem;
        }
        .admin-btn.approve { background: var(--green); color: #000; }
        .admin-btn.reject { background: var(--red); color: #fff; }
        .admin-btn.resolve { background: var(--blue); color: #000; }
        .admin-btn.secondary { background: var(--bg-tertiary); color: var(--text-primary); border: 1px solid var(--border); }
        .admin-btn.warn { background: #f59e0b; color: #111827; }
        .admin-btn.danger { background: #7f1d1d; color: #fff; }
        .admin-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin: 1.5rem 0 1rem;
            flex-wrap: wrap;
        }
        .admin-tabs {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        .admin-tabs button {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 0.55rem 0.95rem;
        }
        .admin-tabs button.active {
            background: var(--green);
            border-color: var(--green);
            color: #000;
        }
        .admin-section {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 14px;
            padding: 1rem;
            margin-top: 1rem;
        }
        .admin-section h2 {
            font-size: 1rem;
            margin-bottom: 0.3rem;
        }
        .admin-subtitle {
            color: var(--text-muted);
            font-size: 0.82rem;
            margin-bottom: 1rem;
        }
        .admin-table-wrap { overflow-x: auto; }
        .admin-bulk-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-bottom: 0.9rem;
            padding: 0.85rem 0.95rem;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: rgba(255,255,255,0.02);
        }
        .admin-bulk-summary {
            color: var(--text-secondary);
            font-size: 0.82rem;
            font-weight: 600;
        }
        .admin-bulk-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
        }
        .admin-filter-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
            align-items: center;
            margin-bottom: 1rem;
        }
        /* Category multiselect filter — chip row + popover. Lives in
           the markets section above the table where it has unlimited
           vertical room (the old in-table-header popover was being
           clipped by the table's overflow wrapper to a tiny sliver). */
        .admin-category-filter {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding: 0.7rem 0.85rem;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            margin-bottom: 1rem;
            position: relative;
        }
        .admin-category-filter-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
        }
        .admin-category-chip-row {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            align-items: center;
        }
        .admin-category-chip-empty {
            font-size: 0.82rem;
            color: var(--text-muted);
            font-style: italic;
        }
        .admin-category-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            background: rgba(34, 197, 94, 0.15);
            color: var(--text-primary);
            border: 1px solid rgba(34, 197, 94, 0.4);
            border-radius: 999px;
            padding: 0.25rem 0.4rem 0.25rem 0.7rem;
            font-size: 0.8rem;
            font-weight: 500;
        }
        .admin-category-chip-x {
            background: rgba(0, 0, 0, 0.2);
            color: var(--text-primary);
            border: none;
            border-radius: 999px;
            width: 1.25rem;
            height: 1.25rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.95rem;
            line-height: 1;
            cursor: pointer;
            padding: 0;
            transition: background 0.15s ease;
        }
        .admin-category-chip-x:hover {
            background: rgba(239, 68, 68, 0.4);
        }
        .admin-category-popover {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            background: var(--bg-secondary, var(--bg-card));
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0.5rem;
            margin-top: 0.4rem;
            max-height: 60vh;
            overflow-y: auto;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        }
        .admin-category-popover-tree {
            display: grid;
            gap: 0.4rem;
            padding: 0.5rem 0.6rem;
        }
        .admin-filter-row .admin-input,
        .admin-filter-row select {
            min-width: 160px;
        }
        .admin-filter-help {
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 600;
        }
        .admin-filter-popover {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            backdrop-filter: none;
            opacity: 1;
        }
        .admin-check-cell {
            width: 42px;
            text-align: center;
        }
        .admin-table input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
            accent-color: var(--green);
        }
        .admin-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
        }
        .admin-status {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            padding: 0.2rem 0.55rem;
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: capitalize;
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }
        .admin-status.active { background: rgba(16, 185, 129, 0.14); color: var(--green); }
        .admin-status.pending { background: rgba(245, 158, 11, 0.14); color: #f59e0b; }
        .admin-status.paused { background: rgba(59, 130, 246, 0.14); color: var(--blue); }
        .admin-status.resolution_pending { background: rgba(244, 196, 66, 0.18); color: #f4c442; }
        .admin-status.resolved { background: rgba(16, 185, 129, 0.14); color: var(--green); }
        .admin-status.cancelled, .admin-status.rejected { background: rgba(239, 68, 68, 0.14); color: var(--red); }
        /* Suggested-markets approval-state colours. Pending uses
           amber (same as the regular pending pill); approved is green
           to read as positive; rejected uses the same red as cancelled
           markets so the visual language is consistent across the
           admin panel. */
        .admin-status.approved { background: rgba(16, 185, 129, 0.14); color: var(--green); }
        .admin-form-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }
        .admin-form-grid .full { grid-column: 1 / -1; }
        .admin-options-list {
            display: grid;
            gap: 0.75rem;
        }
        /* Each option row lays out everything that belongs to one
           option on a single horizontal line:
              Label | Image URL | Fair Price | Closes at | Remove
           with proportional widths sized so the labels stay readable.
           Per-option help text was moved out (it now lives once below
           the whole options list), so each input gets just label +
           input — keeps each row compact. align-items: start so the
           short Remove button sits at the input's vertical baseline
           rather than dropping to the bottom of any taller cell. */
        .admin-option-row {
            display: grid;
            grid-template-columns:
                minmax(0, 1.5fr)   /* Label */
                minmax(0, 1.2fr)   /* Image URL */
                minmax(80px, 0.55fr) /* Fair Price (2-digit number) */
                minmax(0, 1.3fr)   /* Closes at (datetime) */
                auto;              /* Remove button */
            gap: 0.6rem 0.75rem;
            align-items: end;
        }
        .admin-option-row > button {
            align-self: end;
            margin-bottom: 0.05rem;
        }
        /* Tablet: 5 inputs on one line gets cramped. Drop to a
           2-row layout: Label/Image/FairPrice/Remove on row 1,
           Closes-at on row 2 spanning all 4 cols. */
        @media (max-width: 1100px) {
            .admin-option-row {
                grid-template-columns:
                    minmax(0, 1.4fr)
                    minmax(0, 1.2fr)
                    minmax(80px, 0.55fr)
                    auto;
            }
            /* The Closes-at div is the 4th JSX child — push it onto
               its own row spanning all columns so the picker has
               room to breathe. */
            .admin-option-row > div:nth-child(4) {
                grid-column: 1 / -1;
            }
            .admin-option-row > button {
                grid-row: 1;
                grid-column: 4;
            }
        }
        /* Mobile: stack everything vertically so each input takes
           full width. Keeps the Remove button left-aligned under
           the inputs. */
        @media (max-width: 700px) {
            .admin-option-row {
                grid-template-columns: 1fr;
            }
            .admin-option-row > div:nth-child(4) {
                grid-column: auto;
            }
            .admin-option-row > button {
                grid-row: auto;
                grid-column: auto;
                justify-self: start;
            }
        }
        .admin-option-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        .admin-form-help {
            color: var(--text-muted);
            font-size: 0.78rem;
            margin-top: -0.65rem;
            margin-bottom: 0.85rem;
        }
        /* Daily-recurring reminder toggle. The block sits inside the
           admin market form, right under the reminder datetime field.
           Card-style background draws the eye to it without competing
           with primary form inputs, and the help copy hangs off the
           right of the checkbox so the row reads naturally on desktop.
           On mobile the checkbox + label stay on the same row but
           padding and font sizes shrink. */
        .admin-reminder-recurring {
            background: var(--surface-2, rgba(120, 130, 160, 0.08));
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0.75rem 0.9rem;
            margin-top: 0.25rem;
        }
        .admin-toggle-row {
            display: flex;
            align-items: flex-start;
            gap: 0.7rem;
            cursor: pointer;
            margin: 0;
        }
        .admin-toggle-row input[type="checkbox"] {
            width: 1.1rem;
            height: 1.1rem;
            margin-top: 0.15rem;
            flex-shrink: 0;
            accent-color: var(--accent, #3b82f6);
            cursor: pointer;
        }
        .admin-toggle-label {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            flex: 1;
            min-width: 0;
        }
        .admin-toggle-title {
            font-weight: 600;
            font-size: 0.92rem;
            color: var(--text);
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }
        .admin-toggle-emoji {
            font-size: 1rem;
            line-height: 1;
        }
        .admin-toggle-help {
            font-size: 0.78rem;
            color: var(--text-muted);
            line-height: 1.35;
        }
        /* Inline tag shown next to a reminder's market title in the
           reminders panel when repeat_daily=1 — visually distinct from
           the "due" red badge so admins can tell one-shot vs recurring
           reminders apart at a glance. */
        .admin-reminder-daily-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.2rem;
            background: rgba(99, 102, 241, 0.15);
            color: var(--accent, #6366f1);
            font-size: 0.68rem;
            font-weight: 700;
            padding: 0.12rem 0.45rem;
            border-radius: 999px;
            letter-spacing: 0.02em;
            white-space: nowrap;
        }
        @media (max-width: 540px) {
            .admin-reminder-recurring {
                padding: 0.65rem 0.75rem;
            }
            .admin-toggle-title {
                font-size: 0.86rem;
            }
            .admin-toggle-help {
                font-size: 0.74rem;
            }
            .admin-reminder-daily-tag {
                font-size: 0.62rem;
                padding: 0.1rem 0.4rem;
            }
        }
        .admin-kicker {
            color: var(--text-muted);
            font-size: 0.78rem;
            margin-top: 0.25rem;
        }
        /* Clickable user-row identity in the admin Users tab. Renders
           as a left-aligned button so the whole username + email block
           is one tap target that opens the trade-history modal. */
        .admin-user-link {
            display: block;
            width: 100%;
            text-align: left;
            background: transparent;
            border: none;
            padding: 0;
            margin: 0;
            color: inherit;
            font: inherit;
            cursor: pointer;
        }
        .admin-user-link:hover > div:first-child {
            color: var(--accent, #16a34a);
            text-decoration: underline;
        }
        .admin-empty {
            color: var(--text-muted);
            font-size: 0.86rem;
            padding: 1rem 0;
        }
        .admin-market-modal {
            max-width: 760px;
            max-height: 90vh;
            overflow-y: auto;
        }

        /* Modal */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(4px);
            z-index: 200;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }
        .modal {
            background: var(--bg-secondary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.75rem;
            width: 100%;
            max-width: 420px;
            position: relative;
            overflow-x: hidden;
        }
        /* Larger modal variant used by admin user-trade-history,
           market-details, and similar wider dialogs. Same theme-aware
           background as .modal but no fixed max-width — callers set
           their own width via inline style. Without this rule the
           modal had no background and inherited the overlay's dim
           dark colour, which collided with light-mode text colours
           and made everything illegible. */
        .modal-card {
            background: var(--bg-secondary);
            color: var(--text-primary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 1.5rem;
            position: relative;
        }
        .modal-card h3,
        .modal-card h4 { color: var(--text-primary); }
        .modal h2 {
            font-size: 1.25rem;
            margin-bottom: 1.25rem;
            text-align: center;
        }
        .modal-close-btn {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 1.5rem;
            cursor: pointer;
        }
        .modal label {
            display: block;
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-bottom: 0.3rem;
            font-weight: 500;
        }
        .modal input, .modal select, .modal textarea {
            width: 100%;
            max-width: 100%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 0.6rem 0.75rem;
            color: var(--text-primary);
            font-size: 0.875rem;
            margin-bottom: 0.75rem;
            outline: none;
        }
        .modal input:focus, .modal select:focus, .modal textarea:focus { border-color: var(--green); }
        .modal button[type="submit"], .modal .submit-btn {
            width: 100%;
            background: var(--green);
            color: #000;
            border: none;
            padding: 0.65rem;
            border-radius: 6px;
            font-weight: 700;
            font-size: 0.9rem;
            cursor: pointer;
            margin-top: 0.5rem;
        }
        /* Per-coin selection grid in the deposit modal — replaces the
           old <select> dropdown so each option clearly shows its
           network minimum without an extra tap to discover. Three
           tiles fit horizontally on desktop, stack to 1 column on
           narrow phones. */
        /* Deposit modal method tabs (Crypto vs Bank Transfer NGN).
           Only render when the Naira tab is enabled in platform_config. */
        .deposit-method-tabs {
            display: flex;
            gap: 0.4rem;
            margin-bottom: 0.85rem;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0.25rem;
        }
        .deposit-method-tab {
            flex: 1;
            background: transparent;
            color: var(--text-secondary);
            border: none;
            border-radius: 8px;
            padding: 0.55rem 0.75rem;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .deposit-method-tab:hover {
            color: var(--text-primary);
        }
        .deposit-method-tab.active {
            background: var(--accent, #16a34a);
            color: white;
        }

        .deposit-coin-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
            margin-top: 0.4rem;
        }
        .deposit-coin-tile {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0.7rem 0.6rem;
            cursor: pointer;
            text-align: left;
            transition: border-color 0.12s, background 0.12s;
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            min-width: 0;
            position: relative;
            /* Top padding accommodates the corner ribbon without pushing
               other tile content. */
            padding-top: 1.5rem;
            overflow: hidden;
        }
        .deposit-coin-tile:hover {
            border-color: var(--green);
        }
        .deposit-coin-tile.selected {
            border-color: var(--green);
            background: rgba(34, 197, 94, 0.07);
        }
        .deposit-coin-tile-head {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            min-width: 0;
        }
        .deposit-coin-tile-coin {
            font-weight: 700;
            font-size: 0.92rem;
            color: var(--text-primary);
            white-space: nowrap;
        }
        /* Recommended badge — positioned in the top-right corner of the
           tile so it doesn't compete with the coin name for inline width.
           Avoids the "RECOMMENDED text overflows into the next tile"
           problem on three-column layouts. */
        .deposit-coin-tile-tag {
            position: absolute;
            top: 0.4rem;
            right: 0.4rem;
            font-size: 0.58rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            background: var(--green);
            color: #000;
            padding: 0.15rem 0.45rem;
            border-radius: 999px;
            line-height: 1.1;
            z-index: 1;
            pointer-events: none;
        }
        .deposit-coin-tile-network {
            font-size: 0.72rem;
            color: var(--text-secondary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .deposit-coin-tile-min {
            font-size: 0.68rem;
            color: var(--text-muted);
            margin-top: 0.15rem;
        }
        .deposit-coin-tile.selected .deposit-coin-tile-min {
            color: var(--green);
            font-weight: 600;
        }
        @media (max-width: 540px) {
            .deposit-coin-grid {
                grid-template-columns: 1fr;
                gap: 0.5rem;
            }
            /* On mobile, tiles stay vertical (column flex) like desktop,
               just full-width. Keeps the corner ribbon position consistent
               and avoids the badge fighting with "Min ₦X" for the right
               edge. */
            .deposit-coin-tile {
                padding: 1.5rem 0.95rem 0.85rem;
            }
            .deposit-coin-tile-network {
                font-size: 0.82rem;
            }
            .deposit-coin-tile-min {
                font-size: 0.78rem;
            }
        }
        .modal .switch-link {
            text-align: center;
            margin-top: 0.75rem;
            font-size: 0.825rem;
            color: var(--text-secondary);
        }
        .modal .switch-link a {
            color: var(--green);
            cursor: pointer;
            text-decoration: none;
        }
        .auth-step {
            display: none;
            width: 100%;
            min-width: 0;
        }
        .auth-step.active {
            display: block;
        }
        .auth-steps-indicator {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            justify-content: center;
        }
        .auth-step-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--border);
            transition: all 0.15s;
        }
        .auth-step-dot.active {
            background: var(--green);
            width: 24px;
            border-radius: 4px;
        }
        .countdown-timer {
            text-align: center;
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-top: 0.5rem;
        }
        .countdown-timer.ready button {
            opacity: 1;
        }

        /* ============================================================
           Rules / "How PredictNG Works" page.
           Modelled on Polymarket / Kalshi / Stripe-style legal pages:
           a hero, a sticky table-of-contents on the left, and a
           comfortable reading column on the right. The whole page
           uses a slightly narrower max-width and bumped line-height
           than the rest of the app because it's a long-form read.
           ============================================================ */
        .rules-page {
            max-width: 1100px;
            margin: 0 auto;
            padding-bottom: 4rem;
        }
        .rules-hero {
            background: linear-gradient(135deg, rgba(0, 214, 90, 0.10), rgba(0, 214, 90, 0.02) 60%, transparent);
            border: 1px solid rgba(0, 214, 90, 0.18);
            border-radius: 18px;
            padding: 2.4rem 2.2rem 2.1rem;
            margin: 0.5rem 0 2rem;
            position: relative;
            overflow: hidden;
        }
        .rules-hero::after {
            /* Subtle radial highlight so the hero doesn't read as a flat block. */
            content: '';
            position: absolute;
            top: -40%;
            right: -10%;
            width: 520px;
            height: 520px;
            background: radial-gradient(circle, rgba(0, 214, 90, 0.10), transparent 60%);
            pointer-events: none;
        }
        .rules-hero-eyebrow {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.16em;
            color: var(--green);
            text-transform: uppercase;
            margin-bottom: 0.85rem;
        }
        .rules-hero-title {
            font-size: 2.5rem;
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -0.02em;
            margin: 0 0 0.85rem;
            color: var(--text-primary);
        }
        .rules-hero-sub {
            font-size: 1.05rem;
            line-height: 1.55;
            color: var(--text-secondary);
            max-width: 640px;
            margin: 0 0 1.35rem;
        }
        .rules-hero-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 0.55rem;
        }
        .rules-hero-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.35rem 0.75rem;
            border-radius: 999px;
            background: rgba(0, 214, 90, 0.14);
            color: var(--green);
            font-size: 0.78rem;
            font-weight: 600;
            border: 1px solid rgba(0, 214, 90, 0.25);
        }
        .rules-hero-pill.secondary {
            background: rgba(255, 255, 255, 0.05);
            border-color: var(--border);
            color: var(--text-secondary);
        }
        /* Two-column layout: TOC | content */
        .rules-layout {
            display: grid;
            grid-template-columns: 240px minmax(0, 1fr);
            gap: 2.5rem;
            align-items: start;
        }
        .rules-toc {
            position: sticky;
            top: 1rem;
            align-self: start;
            border-left: 2px solid var(--border-light);
            padding-left: 1rem;
        }
        .rules-toc-label {
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 0.85rem;
        }
        .rules-toc-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.05rem;
        }
        .rules-toc-list li a {
            display: flex;
            align-items: baseline;
            gap: 0.55rem;
            padding: 0.4rem 0.5rem;
            border-radius: 6px;
            color: var(--text-secondary);
            font-size: 0.86rem;
            line-height: 1.4;
            text-decoration: none;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .rules-toc-list li a:hover {
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary);
        }
        .rules-toc-num {
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
            font-weight: 600;
            min-width: 1.4rem;
            font-size: 0.78rem;
        }
        /* Reading column */
        .rules-body {
            color: var(--text-primary);
            font-size: 1rem;
            line-height: 1.72;
            scroll-behavior: smooth;
        }
        /* In-page search bar — sits BELOW the 56px sticky navbar so the
           input + Find Next button stay clickable as the user scrolls.
           Without this offset the bar slides under the navbar and only
           the wrapped bottom row (count + Clear) peeks out. z-index is
           below the nav (100) but above article content. */
        .rules-search {
            position: sticky;
            top: 64px;
            z-index: 50;
            display: flex;
            gap: 0.5rem;
            align-items: center;
            margin: -0.5rem 0 1.25rem;
            padding: 0.6rem 0.7rem;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 6px 20px rgba(0,0,0,0.28);
            flex-wrap: wrap;
        }
        @media (max-width: 720px) {
            /* On mobile the nav is the same 56px so 64px still works,
               but the wrapped 2-row layout was making the bar tall.
               Tighten the inner spacing so the whole control fits in
               one comfortable visual block. */
            .rules-search {
                gap: 0.4rem;
                padding: 0.5rem 0.55rem;
            }
            .rules-search-input {
                flex: 1 1 100%;
            }
        }
        .rules-search-input {
            flex: 1 1 220px;
            min-width: 0;
            background: var(--bg-elevated, var(--bg-card));
            color: var(--text-primary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.55rem 0.75rem;
            font-size: 0.92rem;
            outline: none;
        }
        .rules-search-input:focus {
            border-color: var(--accent, #16a34a);
        }
        .rules-search-btn,
        .rules-search-clear {
            background: var(--accent, #16a34a);
            color: white;
            border: none;
            border-radius: 8px;
            padding: 0.55rem 0.95rem;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
        }
        .rules-search-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        .rules-search-clear {
            background: transparent;
            color: var(--text-muted);
            border: 1px solid var(--border);
        }
        .rules-search-count {
            font-size: 0.78rem;
            color: var(--text-muted);
            font-variant-numeric: tabular-nums;
        }
        /* Highlight matched blocks; the active one gets a stronger ring. */
        .rules-search-hit {
            background: rgba(250, 204, 21, 0.10);
            border-radius: 6px;
            padding: 0.15rem 0.35rem;
            margin: 0.1rem 0;
            transition: background 0.2s ease;
        }
        .rules-search-hit-active {
            background: rgba(250, 204, 21, 0.28) !important;
            outline: 2px solid rgba(250, 204, 21, 0.7);
            outline-offset: 2px;
        }
        .rules-body p {
            margin: 0 0 1.05rem;
            color: var(--text-secondary);
        }
        .rules-body p strong,
        .rules-body li strong {
            color: var(--text-primary);
            font-weight: 600;
        }
        .rules-body ul, .rules-body ol {
            margin: 0 0 1.4rem;
            padding-left: 1.4rem;
            color: var(--text-secondary);
        }
        .rules-body ul li, .rules-body ol li {
            margin-bottom: 0.55rem;
            line-height: 1.65;
        }
        .rules-body a {
            color: var(--green);
            text-decoration: none;
            border-bottom: 1px solid rgba(0, 214, 90, 0.35);
            transition: border-color 0.15s ease;
        }
        .rules-body a:hover {
            border-bottom-color: var(--green);
        }
        .rules-mail {
            font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
            font-size: 0.94em;
        }
        /* Section headings — anchored, with a numeric prefix in a soft chip */
        .rules-section-title {
            display: flex;
            align-items: baseline;
            gap: 0.85rem;
            font-size: 1.55rem;
            font-weight: 700;
            line-height: 1.25;
            letter-spacing: -0.01em;
            margin: 2.6rem 0 1.1rem;
            scroll-margin-top: 1rem;
            color: var(--text-primary);
        }
        .rules-section-title:first-of-type {
            margin-top: 1.4rem;
        }
        .rules-section-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 1.95rem;
            height: 1.95rem;
            padding: 0 0.55rem;
            border-radius: 8px;
            background: rgba(0, 214, 90, 0.12);
            color: var(--green);
            font-size: 0.85rem;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            border: 1px solid rgba(0, 214, 90, 0.25);
            flex-shrink: 0;
        }
        .rules-h3 {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text-primary);
            margin: 1.6rem 0 0.65rem;
            letter-spacing: -0.005em;
        }
        .rules-fineprint {
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-top: -0.5rem !important;
            margin-bottom: 1.4rem !important;
            font-style: italic;
        }
        /* Numbered step list — clearer than a generic <ol> for "do this, then this". */
        .rules-numbered-steps {
            list-style: none;
            padding-left: 0;
            counter-reset: step-counter;
        }
        .rules-numbered-steps > li {
            counter-increment: step-counter;
            position: relative;
            padding-left: 2.4rem;
            margin-bottom: 0.85rem;
        }
        .rules-numbered-steps > li::before {
            content: counter(step-counter);
            position: absolute;
            left: 0;
            top: 0.05rem;
            width: 1.7rem;
            height: 1.7rem;
            border-radius: 50%;
            background: rgba(0, 214, 90, 0.12);
            color: var(--green);
            font-weight: 700;
            font-size: 0.82rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(0, 214, 90, 0.25);
        }
        /* Tables */
        .rules-table-wrap {
            overflow-x: auto;
            margin: 0.5rem 0 1.4rem;
            border: 1px solid var(--border);
            border-radius: 12px;
        }
        .rules-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.92rem;
            line-height: 1.5;
        }
        .rules-table thead th {
            background: rgba(255, 255, 255, 0.03);
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            text-align: left;
            padding: 0.7rem 1rem;
            border-bottom: 1px solid var(--border);
        }
        .rules-table tbody td {
            padding: 0.85rem 1rem;
            border-bottom: 1px solid var(--border-light);
            color: var(--text-secondary);
            vertical-align: top;
        }
        .rules-table tbody tr:last-child td {
            border-bottom: none;
        }
        .rules-table tbody tr:nth-child(odd) td {
            background: rgba(255, 255, 255, 0.015);
        }
        /* Callouts: warning, info, example */
        .rules-callout {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            padding: 1rem 1.15rem;
            margin: 1rem 0 1.5rem;
            border-radius: 12px;
            border-left: 4px solid;
            font-size: 0.95rem;
            line-height: 1.6;
        }
        .rules-callout p {
            margin: 0 0 0.55rem;
        }
        .rules-callout p:last-child {
            margin-bottom: 0;
        }
        .rules-callout ul {
            margin: 0.3rem 0 0;
            padding-left: 1.25rem;
        }
        .rules-callout-label {
            font-weight: 700;
            font-size: 0.82rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .rules-callout.warning {
            background: rgba(255, 184, 0, 0.07);
            border-left-color: #f5a623;
            color: var(--text-primary);
        }
        .rules-callout.warning .rules-callout-label { color: #f5a623; }
        .rules-callout.example {
            background: rgba(0, 214, 90, 0.06);
            border-left-color: var(--green);
            color: var(--text-primary);
        }
        .rules-callout.example .rules-callout-label { color: var(--green); }
        .rules-callout.info {
            background: rgba(64, 156, 255, 0.06);
            border-left-color: #409cff;
            color: var(--text-primary);
        }
        .rules-callout.info .rules-callout-label { color: #409cff; }
        /* Permitted vs Prohibited two-column block */
        .rules-conduct-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1.25rem;
            margin: 0.8rem 0 1.4rem;
        }
        .rules-conduct-col {
            border: 1px solid var(--border);
            border-radius: 14px;
            padding: 1.2rem 1.3rem;
        }
        .rules-conduct-col.allowed {
            background: rgba(0, 214, 90, 0.04);
            border-color: rgba(0, 214, 90, 0.22);
        }
        .rules-conduct-col.prohibited {
            background: rgba(220, 38, 38, 0.04);
            border-color: rgba(220, 38, 38, 0.22);
        }
        .rules-conduct-col h3 {
            margin-top: 0;
        }
        .rules-conduct-col.allowed h3 { color: var(--green); }
        .rules-conduct-col.prohibited h3 { color: #ff5f5f; }
        .rules-conduct-col ul {
            margin-bottom: 0;
            padding-left: 1.2rem;
        }
        /* Video tutorials grid — YouTube-style cards with thumbnail
           on top and description below. Two-column on desktop, single
           column on mobile. The whole card is one giant <a>, so the
           tap target covers the entire surface (matters more on
           mobile than desktop). External links open in a new tab so
           users keep their place in the rules page. */
        .rules-tutorial-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1.1rem;
            margin: 1rem 0 1.5rem;
        }
        .rules-tutorial-card {
            display: flex;
            flex-direction: column;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border);
            border-radius: 14px;
            overflow: hidden;
            text-decoration: none !important;
            border-bottom: 1px solid var(--border) !important;
            transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
            color: var(--text-primary);
        }
        .rules-tutorial-card:hover {
            transform: translateY(-2px);
            border-color: rgba(0, 214, 90, 0.35) !important;
            background: rgba(0, 214, 90, 0.04);
        }
        .rules-tutorial-thumb {
            position: relative;
            background: #000;
            aspect-ratio: 16 / 9;
            width: 100%;
            overflow: hidden;
        }
        .rules-tutorial-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .rules-tutorial-play {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.4rem;
            color: #fff;
            background: rgba(0, 0, 0, 0.25);
            opacity: 0.95;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
            pointer-events: none;
            transition: background 0.18s ease;
        }
        .rules-tutorial-card:hover .rules-tutorial-play {
            background: rgba(0, 0, 0, 0.45);
        }
        .rules-tutorial-body {
            padding: 1rem 1.1rem 1.1rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            flex: 1;
        }
        .rules-tutorial-title {
            font-size: 0.98rem;
            font-weight: 700;
            line-height: 1.35;
            color: var(--text-primary);
        }
        .rules-tutorial-blurb {
            font-size: 0.85rem;
            line-height: 1.55;
            color: var(--text-secondary);
        }
        .rules-tutorial-applies {
            margin-top: auto;
            font-size: 0.74rem;
            color: var(--green);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }
        @media (max-width: 768px) {
            .rules-tutorial-grid {
                grid-template-columns: minmax(0, 1fr);
                gap: 0.9rem;
            }
            .rules-tutorial-title { font-size: 0.92rem; }
            .rules-tutorial-blurb { font-size: 0.82rem; }
            .rules-tutorial-applies { font-size: 0.7rem; }
        }

        /* Closing meta + back-to-top */
        .rules-footer-meta {
            margin-top: 3rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border);
            font-size: 0.85rem;
            color: var(--text-muted);
            line-height: 1.7;
        }
        .rules-back-to-top {
            display: inline-block;
            margin-top: 1.5rem;
            padding: 0.5rem 1rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.04);
            color: var(--text-secondary) !important;
            font-size: 0.85rem;
            font-weight: 600;
            border: 1px solid var(--border) !important;
            text-decoration: none;
        }
        .rules-back-to-top:hover {
            background: rgba(255, 255, 255, 0.07);
        }
        /* Tablet: keep two columns but tighten widths */
        @media (max-width: 1024px) {
            .rules-layout {
                grid-template-columns: 200px minmax(0, 1fr);
                gap: 1.75rem;
            }
            .rules-hero-title { font-size: 2.1rem; }
        }
        /* Mobile: stack TOC on top as a horizontal scroller, then content */
        @media (max-width: 768px) {
            .rules-page {
                padding-bottom: 2.5rem;
            }
            .rules-hero {
                padding: 1.6rem 1.3rem 1.4rem;
                border-radius: 14px;
                margin-bottom: 1.4rem;
            }
            .rules-hero-eyebrow { font-size: 0.68rem; margin-bottom: 0.6rem; }
            .rules-hero-title { font-size: 1.55rem; }
            .rules-hero-sub { font-size: 0.94rem; margin-bottom: 1rem; }
            .rules-hero-pill { font-size: 0.72rem; padding: 0.3rem 0.65rem; }
            .rules-layout {
                grid-template-columns: minmax(0, 1fr);
                gap: 1.25rem;
            }
            /* TOC becomes a horizontal scroll strip on mobile —
               familiar pattern from docs sites like Stripe. Sticks
               to the top so users can re-jump while reading. */
            .rules-toc {
                position: sticky;
                top: 0;
                z-index: 5;
                border-left: none;
                border-bottom: 1px solid var(--border-light);
                padding: 0.75rem 0;
                margin: 0 -0.25rem;
                background: var(--bg-primary);
            }
            .rules-toc-label {
                padding: 0 0.25rem;
                margin-bottom: 0.55rem;
            }
            .rules-toc-list {
                flex-direction: row;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                gap: 0.35rem;
                padding: 0 0.25rem 0.25rem;
                scrollbar-width: thin;
            }
            .rules-toc-list li a {
                white-space: nowrap;
                padding: 0.4rem 0.7rem;
                background: rgba(255, 255, 255, 0.04);
                border-radius: 999px;
                font-size: 0.8rem;
            }
            .rules-toc-list li a:hover {
                background: rgba(255, 255, 255, 0.07);
            }
            .rules-section-title {
                font-size: 1.25rem;
                gap: 0.6rem;
                margin: 2rem 0 0.85rem;
            }
            .rules-section-num {
                min-width: 1.7rem;
                height: 1.7rem;
                font-size: 0.78rem;
            }
            .rules-h3 {
                font-size: 0.98rem;
                margin: 1.3rem 0 0.5rem;
            }
            .rules-body {
                font-size: 0.95rem;
                line-height: 1.65;
            }
            .rules-numbered-steps > li {
                padding-left: 2.1rem;
            }
            .rules-numbered-steps > li::before {
                width: 1.5rem;
                height: 1.5rem;
                font-size: 0.76rem;
            }
            .rules-table thead th {
                font-size: 0.7rem;
                padding: 0.6rem 0.75rem;
            }
            .rules-table tbody td {
                padding: 0.7rem 0.75rem;
                font-size: 0.86rem;
            }
            .rules-callout {
                padding: 0.85rem 1rem;
                font-size: 0.9rem;
            }
            .rules-conduct-grid {
                grid-template-columns: minmax(0, 1fr);
                gap: 0.9rem;
            }
            .rules-conduct-col {
                padding: 1rem 1.1rem;
            }
        }

        /* Support form */
        .support-layout {
            display: grid;
            grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.7fr);
            gap: 1.25rem;
            align-items: start;
        }
        .support-section {
            background: var(--support-panel-bg);
            border: 1px solid var(--border-light);
            border-radius: 18px;
            padding: 1.5rem;
            box-shadow: var(--support-panel-shadow);
        }
        .support-section h2 { margin-bottom: 0.35rem; font-size: 1.25rem; }
        .support-section p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; }
        .support-tabs {
            display: inline-flex;
            gap: 0.5rem;
            background: var(--support-tab-bg);
            border: 1px solid var(--border-light);
            border-radius: 999px;
            padding: 0.25rem;
            margin: 1.1rem 0 1.25rem;
        }
        .support-tabs button {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            border-radius: 999px;
            cursor: pointer;
            font-size: 0.82rem;
            font-weight: 700;
            padding: 0.6rem 1rem;
        }
        .support-tabs button.active {
            background: var(--green);
            color: #04130a;
        }
        .support-form-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.95rem 1rem;
        }
        .support-field.full { grid-column: 1 / -1; }
        .support-field label {
            display: block;
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-bottom: 0.4rem;
            font-weight: 600;
        }
        .support-field input,
        .support-field select,
        .support-field textarea {
            width: 100%;
            background: var(--support-input-bg);
            border: 1px solid var(--border);
            border-radius: 10px;
            padding: 0.75rem 0.85rem;
            color: var(--text-primary);
            font-size: 0.95rem;
            outline: none;
        }
        .support-field input:focus,
        .support-field select:focus,
        .support-field textarea:focus {
            border-color: var(--green);
            box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.12);
        }
        .support-field textarea { min-height: 136px; resize: vertical; }
        .support-submit {
            width: 100%;
            background: linear-gradient(90deg, var(--green), #1be36f);
            color: #04130a;
            border: none;
            padding: 0.9rem 1rem;
            border-radius: 12px;
            font-weight: 800;
            font-size: 1rem;
            cursor: pointer;
            margin-top: 1rem;
        }
        .support-sidecard {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 18px;
            padding: 1.35rem;
        }
        .support-sidecard h3 {
            font-size: 1rem;
            margin-bottom: 0.6rem;
        }
        .support-sidecard ul {
            margin: 0;
            padding-left: 1rem;
            color: var(--text-secondary);
            line-height: 1.65;
        }
        .support-sidecard li { margin-bottom: 0.45rem; }
        .support-note {
            margin-top: 1rem;
            padding: 0.95rem 1rem;
            border-radius: 12px;
            background: var(--support-note-bg);
            border: 1px solid var(--support-note-border);
            color: var(--text-secondary);
        }
        .support-success {
            background: var(--green-bg);
            color: var(--green);
            padding: 1rem;
            border-radius: 8px;
            text-align: center;
            font-weight: 600;
        }
        .site-footer {
            margin-top: 2.5rem;
            padding: 2rem 0 1.25rem;
            border-top: 1px solid var(--border-light);
        }
        .site-footer-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1.5rem;
        }
        .footer-column {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            min-width: 0;
        }
        .footer-column h3 {
            font-size: 0.95rem;
            margin-bottom: 0.85rem;
        }
        .footer-links {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.65rem;
        }
        .footer-link,
        .footer-link-btn {
            display: inline-flex;
            align-items: center;
            align-self: flex-start;
            width: fit-content;
            max-width: 100%;
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 0.92rem;
            line-height: 1.45;
            padding: 0;
            text-align: left;
            text-decoration: none;
        }
        .footer-link:hover,
        .footer-link-btn:hover {
            color: var(--text-primary);
        }
        .footer-empty {
            color: var(--text-muted);
            font-size: 0.9rem;
            line-height: 1.5;
        }
        .footer-meta {
            margin-top: 1.5rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-light);
            color: var(--text-muted);
            font-size: 0.82rem;
        }
        .company-modal {
            max-width: 560px;
            max-height: 70vh;
            overflow-y: auto;
        }
        .company-modal p {
            color: var(--text-secondary);
            line-height: 1.65;
            margin-bottom: 1rem;
        }
        .company-founder-card {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-light);
            border-radius: 14px;
            padding: 1rem;
        }
        .company-founder-card h3 {
            margin-bottom: 0.35rem;
            font-size: 1rem;
        }
        .company-founder-card a {
            color: var(--green);
            text-decoration: none;
            font-weight: 600;
        }
        .admin-link-editor {
            display: grid;
            gap: 0.85rem;
        }
        .admin-link-row {
            display: grid;
            grid-template-columns: minmax(0, 0.9fr) minmax(140px, 0.55fr) minmax(0, 1.1fr) auto;
            gap: 0.75rem;
            align-items: end;
            padding: 0.9rem;
            border: 1px solid var(--border-light);
            border-radius: 12px;
            background: var(--bg-tertiary);
        }
        .admin-config-grid {
            display: grid;
            gap: 1.25rem;
        }
        .admin-config-card {
            border: 1px solid var(--border-light);
            border-radius: 16px;
            padding: 1rem;
            background: var(--bg-card);
        }
        .admin-config-card h3 {
            margin-bottom: 0.35rem;
        }
        .admin-config-card p {
            color: var(--text-secondary);
            font-size: 0.9rem;
            line-height: 1.6;
            margin-bottom: 0.9rem;
        }
        .admin-config-card label {
            display: block;
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-bottom: 0.3rem;
            font-weight: 500;
        }
        .admin-config-card input,
        .admin-config-card select,
        .admin-config-card textarea {
            width: 100%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.7rem 0.8rem;
            color: var(--text-primary);
            font-size: 0.9rem;
            outline: none;
        }
        /* Checkboxes are not text inputs — the 100% width above was
           making them stretch the full row, pushing the label text
           off-screen on mobile. Reset to natural size and let flex
           handle the rest. */
        .admin-config-card input[type="checkbox"] {
            width: auto;
            padding: 0;
            flex-shrink: 0;
        }

        /* Operator reminder rows — title on the left, action buttons
           on the right. On mobile the buttons take a fixed width and
           force the title text into a tiny column where each word
           wraps onto its own line. Stack vertically below 720px. */
        .admin-operator-reminder-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
        }
        .admin-operator-reminder-text { flex: 1; min-width: 0; }
        .admin-operator-reminder-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }

        /* Markets pagination footer at the bottom of the admin Markets
           tab. The Load next 100 button was getting clipped on mobile
           because the parent flex didn't wrap cleanly. */
        .admin-load-more-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.85rem 0.5rem 0;
            border-top: 1px solid var(--border-light);
            margin-top: 0.5rem;
            flex-wrap: wrap;
        }
        .admin-load-more-btn { flex-shrink: 0; }

        @media (max-width: 720px) {
            .admin-operator-reminder-row {
                flex-direction: column;
                align-items: stretch;
            }
            .admin-operator-reminder-actions {
                justify-content: flex-end;
            }
            .admin-load-more-row {
                flex-direction: column;
                align-items: stretch;
            }
            .admin-load-more-btn {
                width: 100%;
            }
        }
        .admin-config-card textarea {
            min-height: 100px;
            resize: vertical;
        }
        .admin-config-card input:focus,
        .admin-config-card select:focus,
        .admin-config-card textarea:focus {
            border-color: var(--green);
        }

        /* Leaderboard */
        .leader-row {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.75rem 1rem;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 8px;
            margin-bottom: 0.5rem;
        }
        .leader-rank {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--text-muted);
            width: 2rem;
            text-align: center;
        }
        .leader-rank.gold { color: #ffd700; }
        .leader-rank.silver { color: #c0c0c0; }
        .leader-rank.bronze { color: #cd7f32; }
        .leader-info { flex: 1; }
        .leader-name { font-weight: 600; font-size: 0.9rem; }
        .leader-name-btn {
            border: none;
            background: none;
            color: var(--text-primary);
            padding: 0;
            font: inherit;
            font-weight: 700;
            cursor: pointer;
            text-align: left;
        }
        .leader-name-btn:hover { color: var(--green); }
        .leader-stat { font-size: 0.75rem; color: var(--text-muted); }
        .leader-vol { font-weight: 700; font-size: 0.9rem; text-align: right; }
        .leaderboard-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 1rem;
        }
        .leaderboard-controls {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }
        .leaderboard-select {
            appearance: none;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 999px;
            color: var(--text-primary);
            font-size: 0.9rem;
            font-weight: 700;
            min-width: 150px;
            outline: none;
            padding: 0.75rem 2.3rem 0.75rem 1rem;
        }
        .leaderboard-select-wrap {
            position: relative;
        }
        .leaderboard-select-wrap::after {
            content: '▾';
            color: var(--text-muted);
            font-size: 0.8rem;
            pointer-events: none;
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
        }
        .leaderboard-metric-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.25rem;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 999px;
        }
        .leaderboard-metric-btn {
            border: none;
            background: transparent;
            border-radius: 999px;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 700;
            padding: 0.7rem 1rem;
            transition: all 0.15s ease;
        }
        .leaderboard-metric-btn.active {
            background: var(--green);
            color: #06130c;
        }
        .leaderboard-summary {
            color: var(--text-muted);
            font-size: 0.82rem;
            font-weight: 600;
        }
        .leader-row {
            position: relative;
        }
        .leader-avatar-btn {
            width: 2.4rem;
            height: 2.4rem;
            border: none;
            background: none;
            padding: 0;
            cursor: pointer;
            flex: 0 0 auto;
        }
        .leader-avatar-btn .profile-avatar-preview {
            width: 2.4rem;
            height: 2.4rem;
        }
        .leader-stats-line {
            display: flex;
            flex-wrap: wrap;
            gap: 0.45rem;
            margin-top: 0.2rem;
        }
        .leader-value-block {
            text-align: right;
            min-width: 140px;
        }
        .leader-value-label {
            color: var(--text-muted);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            margin-bottom: 0.15rem;
            text-transform: uppercase;
        }
        .leader-value {
            color: var(--text-primary);
            font-size: 1.05rem;
            font-weight: 800;
        }

        /* Toast */
        .toast {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 0.75rem 1.25rem;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 500;
            z-index: 300;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            animation: slideUp 0.3s ease;
        }
        .toast.success { border-color: var(--green); }
        .toast.error { border-color: var(--red); }
        @keyframes slideUp {
            from { transform: translateX(-50%) translateY(20px); opacity: 0; }
            to { transform: translateX(-50%) translateY(0); opacity: 1; }
        }

        /* Back button */
        .back-btn {
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 0.875rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.35rem;
            margin-bottom: 0.75rem;
            padding: 0.25rem 0;
        }
        .back-btn:hover { color: var(--text-primary); }

        /* Empty state */
        .empty-state {
            text-align: center;
            padding: 3rem 1rem;
            color: var(--text-muted);
        }
        .empty-state .icon { font-size: 3rem; margin-bottom: 0.75rem; }
        .empty-state p { font-size: 0.9rem; }

        /* Create market form */
        .create-form {
            max-width: 600px;
            margin: 0 auto;
        }
        .create-form label {
            display: block;
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-bottom: 0.3rem;
            font-weight: 500;
        }
        .create-form input, .create-form select, .create-form textarea {
            width: 100%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 0.6rem 0.75rem;
            color: var(--text-primary);
            font-size: 0.875rem;
            margin-bottom: 1rem;
            outline: none;
        }
        .create-form input:focus, .create-form select:focus, .create-form textarea:focus { border-color: var(--green); }
        .create-form textarea { min-height: 80px; resize: vertical; }

        /* Terms Modal */
        .terms-modal {
            max-height: 60vh;
            overflow-y: auto;
            max-width: 500px;
        }
        .terms-modal h3 {
            font-size: 1rem;
            font-weight: 600;
            margin: 1rem 0 0.5rem 0;
        }
        .terms-modal p {
            font-size: 0.875rem;
            color: var(--text-secondary);
            line-height: 1.5;
            margin-bottom: 0.75rem;
        }
        .terms-modal ul {
            margin-left: 1.25rem;
            margin-bottom: 1rem;
        }
        .terms-modal li {
            font-size: 0.875rem;
            color: var(--text-secondary);
            line-height: 1.5;
            margin-bottom: 0.25rem;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .nav-links { display: none; }
            .mobile-nav { display: flex; }
            .main { padding: 1rem; padding-bottom: 5rem; }
            .detail-layout { grid-template-columns: 1fr; }
            .mobile-only { display: block; }
            .desktop-only { display: none; }
            .trade-panel { position: static; }
            .markets-list { grid-template-columns: 1fr; }
            .activity-history-grid { grid-template-columns: 1fr; }
            .market-row { padding: 1rem; }
            .wallet-cards { grid-template-columns: 1fr; }
            .admin-grid { grid-template-columns: 1fr 1fr; }
            .admin-form-grid { grid-template-columns: 1fr; }
            .support-layout { grid-template-columns: 1fr; }
            .support-form-grid { grid-template-columns: 1fr; }
            .leaderboard-toolbar,
            .leaderboard-controls {
                align-items: stretch;
                flex-direction: column;
            }
            .leaderboard-select,
            .leaderboard-select-wrap {
                width: 100%;
            }
            .leaderboard-metric-toggle {
                width: 100%;
            }
            .leaderboard-metric-btn {
                flex: 1;
            }
            .leader-row {
                align-items: flex-start;
                flex-wrap: wrap;
            }
            .leader-value-block {
                margin-left: 3rem;
                min-width: 0;
                text-align: left;
                width: calc(100% - 3rem);
            }
            .page-title { font-size: 1.25rem; }
            .currency-toggle { display: none; }
            .rate-indicator { display: none; }
            .modal {
                max-width: min(420px, calc(100vw - 1rem));
                max-height: calc(100vh - 2rem);
                overflow-y: auto;
                padding: 1.4rem 1rem 1.2rem;
            }
            .terms-checkbox {
                align-items: flex-start;
                gap: 0.75rem;
            }
            .terms-checkbox input[type="checkbox"] {
                margin-top: 0.15rem;
                flex-shrink: 0;
            }
            .terms-checkbox label {
                flex: 1;
                min-width: 0;
                line-height: 1.45;
                white-space: normal;
                word-break: normal;
                overflow-wrap: break-word;
            }
            .detail-header {
                gap: 0.85rem;
            }
            .detail-title {
                font-size: 1.2rem;
                line-height: 1.25;
            }
            /* Mobile detail-stats: single horizontal row. Used to be
               a 2-col grid which pushed Vol onto a second line below
               Yes/No; on the narrow mobile view the three figures
               (Yes ₦54  No ₦54  Vol ₦0) easily fit on one line and
               read as a coherent header strip. flex-wrap kept as a
               safety net for genuinely long values, but in practice
               we won't hit it for prices in the 1-99 range. */
            .detail-stats {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 0.4rem 1rem;
                font-size: 0.85rem;
            }
            .detail-stats span {
                align-items: center;
                white-space: nowrap;
            }
            .detail-live-panel {
                padding: 0.9rem;
            }
            .detail-live-top {
                align-items: flex-start;
                flex-direction: column;
            }
            .detail-live-clock {
                font-size: 0.9rem;
            }
            .detail-live-team-row {
                padding: 0.8rem;
                gap: 0.85rem;
            }
            .detail-live-team-name {
                font-size: 0.95rem;
            }
            .detail-live-team-score {
                font-size: 1.7rem;
            }
            .detail-order-book.inline {
                padding: 0.9rem 0.75rem;
            }
            .detail-order-book-toggle {
                align-items: flex-start;
                flex-direction: column;
                gap: 0.35rem;
            }
            .detail-order-book-toggle span {
                max-width: 100%;
                overflow-wrap: anywhere;
            }
            .detail-order-book-header {
                align-items: flex-start;
                flex-direction: column;
            }
            .detail-order-book-currency {
                width: 100%;
            }
            .detail-order-book-columns,
            .detail-order-book-level {
                grid-template-columns: minmax(54px, 0.75fr) minmax(76px, 0.9fr) minmax(78px, 1fr);
                gap: 0.5rem;
            }
            .detail-order-book-columns {
                font-size: 0.64rem;
            }
            .detail-order-book-level {
                font-size: 0.78rem;
            }
            .detail-order-book-ladder {
                max-height: 320px;
            }
            .chart-container {
                height: auto;
                min-height: 260px;
            }
            .chart-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.85rem;
            }
            .chart-price {
                font-size: 1.55rem;
                line-height: 1.2;
                word-break: break-word;
            }
            .chart-timeframes {
                align-self: flex-end;
            }
            .trending-carousel {
                min-height: 0;
            }
            .trending-card {
                min-height: 0;
                padding: 1.25rem;
                gap: 1.1rem;
                grid-template-columns: 1fr;
                grid-template-areas:
                    "header"
                    "title"
                    "left"
                    "right"
                    "desc";
            }
            .trending-left,
            .trending-right {
                flex: 1 1 auto;
                width: 100%;
            }
            .trending-card-header {
                align-items: flex-start;
                gap: 0.6rem;
            }
            .trending-card-header-main {
                align-items: flex-start;
                flex-direction: column;
                gap: 0.8rem;
                flex: 1 1 0;
                min-width: 0;
                width: auto;
            }
            .trending-card-header-copy {
                width: 100%;
            }
            .trending-nav-group {
                flex-shrink: 0;
                align-self: flex-start;
            }
            .trending-header-meta {
                gap: 0.55rem;
                margin-top: 0.45rem;
            }
            .trending-right {
                min-height: 260px;
            }
            .trending-title {
                font-size: 1.25rem;
            }
            .trending-outcomes {
                gap: 0.8rem;
            }
            .trending-chart {
                min-height: 100%;
            }
            .trending-chart-legend {
                flex-wrap: wrap;
                gap: 0.55rem 0.9rem;
                margin-bottom: 0.55rem;
            }
            .trending-outcome {
                width: 100%;
                min-width: 0;
                padding: 0;
            }
            .trending-market-count {
                font-size: 0.72rem;
                padding: 0.24rem 0.62rem;
            }
            .trending-market-count-inline {
                display: inline-flex;
            }
            .trending-market-count-corner {
                display: none;
            }
            .trending-description {
                margin-top: 0.9rem;
                padding-top: 0.85rem;
            }
            .trending-chart-area {
                min-height: 220px;
            }
            .trending-chart-shell {
                min-height: 250px;
                padding-top: 0.65rem;
            }
            .trending-nav {
                width: 30px;
                height: 30px;
            }
            .trending-nav-counter {
                font-size: 0.82rem;
                min-width: 2.8rem;
            }
            .site-footer-grid { grid-template-columns: 1fr; }
            .admin-link-row { grid-template-columns: 1fr; }
            .comment-header {
                flex-direction: column;
            }
            .comment-replies {
                padding-left: 0.75rem;
            }
            .notification-categories-grid {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 480px) {
            .main { padding: 0.9rem; padding-bottom: 5.25rem; }
            .market-meta { flex-wrap: wrap; gap: 0.5rem; }
            .admin-grid { grid-template-columns: 1fr; }
            .admin-toolbar { align-items: stretch; }
            .admin-toolbar > * { width: 100%; }
            .mobile-nav button { font-size: 0.58rem; padding: 0.2rem 0.1rem; }
            .mobile-nav button .icon { font-size: 1.05rem; }
            .mobile-nav-icon { width: 1.2rem; height: 1.2rem; }
            .support-section, .support-sidecard { padding: 1.1rem; border-radius: 14px; }
            .portfolio-details { grid-template-columns: repeat(2, 1fr); }
            .notifications-panel { width: 100vw; max-width: calc(100vw - 1rem); right: auto; left: 0.5rem; }
            .trending-carousel { margin-bottom: 1.5rem; }
            .trending-card {
                padding: 1.05rem;
                gap: 1rem;
                overflow: hidden;
            }
            .trending-card-header {
                align-items: flex-start;
            }
            .trending-card-header-main {
                align-items: flex-start;
                gap: 0.7rem;
            }
            .trending-live { margin-bottom: 0; }
            .trending-live-row {
                gap: 0.45rem;
                margin-bottom: 0.65rem;
            }
            .trending-live-summary {
                font-size: 0.76rem;
            }
            .trending-title {
                font-size: 1.25rem;
                line-height: 1.22;
                overflow-wrap: anywhere;
            }
            .trending-right {
                min-height: 190px;
                max-height: 210px;
                overflow: hidden;
                margin-top: 0.25rem;
            }
            .trending-chart-legend {
                font-size: 0.74rem;
                gap: 0.45rem 0.75rem;
                max-height: 2.7rem;
                overflow: hidden;
            }
            .trending-outcome {
                padding: 0;
            }
            .trending-outcome-icon {
                width: 24px;
                height: 24px;
            }
            .trending-outcome .name { font-size: 0.86rem; }
            .trending-outcome .pct {
                font-size: 1.35rem;
            }
            .trending-outcome-top {
                gap: 0.75rem;
            }
            .trending-outcome-label {
                max-width: calc(100% - 5rem);
            }
            .trending-vol {
                font-size: 0.8rem;
            }
            .trending-summary-count {
                font-size: 0.8rem;
            }
            .trending-description-text {
                font-size: 0.88rem;
                line-height: 1.45;
            }
            .trending-description-text.clamped {
                -webkit-line-clamp: 3;
            }
            .trending-chart-shell {
                min-height: 185px;
                padding-top: 0.5rem;
            }
            .trending-chart-area {
                min-height: 165px;
            }
            .trending-chart-area svg text {
                font-size: 9px;
            }
            .market-rules .rule-item {
                flex-direction: column;
                gap: 0.35rem;
            }
            .market-rules .rule-label {
                min-width: 0;
            }
            .trending-chart-area {
                min-height: 205px;
            }
            .modal {
                border-radius: 14px;
                padding: 1.25rem 0.9rem 1rem;
            }
            .modal h2 {
                font-size: 1.15rem;
                margin-bottom: 1rem;
            }
            .terms-checkbox {
                font-size: 0.76rem;
                gap: 0.6rem;
            }
            .terms-checkbox label {
                font-size: 0.76rem;
            }
            /* Mobile detail-header: center-align so the logo's vertical
               midpoint matches the title's vertical midpoint. With a
               64px square logo and a 2-3 line wrapped title, flex-start
               left a visual gap between the bottom of the logo and
               the bottom of the watch-market button, which read as
               "misaligned" on narrow screens. center collapses that
               gap and puts the logo+title block on a shared midline.
               Stretch alignment kept on the inner block so the watch
               button can grow to fill the row width. */
            .detail-header {
                align-items: center;
                gap: 0.85rem;
            }
            .detail-icon {
                width: 64px;
                height: 64px;
                border-radius: 14px;
            }
            .detail-icon-asset { font-size: 2.1rem; }
            .detail-title-block {
                padding-top: 0;
                /* Override desktop's justify-content:center — on mobile
                   we want the column's content to flow naturally from
                   the top so category → title → button stack tightly
                   instead of floating in the middle of an artificially
                   tall column. */
                justify-content: flex-start;
            }
            .detail-title {
                font-size: 1.05rem;
                line-height: 1.3;
            }
            .detail-category {
                font-size: 0.72rem;
                margin-bottom: 0.2rem;
            }
            /* Watch button stretches across the title column on mobile.
               The pill style on a tiny "Watch market" label looked
               orphaned next to the bigger logo; full-width gives it
               proper visual weight and matches the tap-target sizing
               users expect on mobile. */
            .detail-title-block .watch-market-btn {
                display: block;
                width: 100%;
                text-align: center;
                margin-top: 0.55rem;
                padding: 0.55rem 0.9rem;
                font-size: 0.82rem;
            }
            /* Tighter breakpoint (smaller phones) — same single-row
               flex layout as the larger-mobile rule above, just with
               slightly smaller gap + font so three stats still fit
               on one line on 360px-wide screens. */
            .detail-stats {
                gap: 0.3rem 0.85rem;
                font-size: 0.78rem;
            }
            .detail-live-team-meta {
                gap: 0.65rem;
            }
            .detail-live-team-icon {
                width: 2.15rem;
                height: 2.15rem;
            }
            .detail-live-team-name {
                font-size: 0.9rem;
            }
            .detail-live-team-score {
                font-size: 1.45rem;
            }
            .detail-live-scoreline {
                font-size: 0.76rem;
            }
            .market-option-row {
                align-items: flex-start;
                padding: 0.9rem;
            }
            .market-option-actions {
                flex-direction: column;
                align-items: flex-end;
            }
            .market-option-prob {
                min-width: auto;
                font-size: 1.15rem;
            }
            .market-option-select-hint {
                font-size: 0.68rem;
            }
            .chart-container {
                padding: 1rem;
                min-height: 280px;
            }
            .chart-price {
                font-size: 1.15rem;
            }
            .chart-timeframes button {
                font-size: 0.72rem;
                padding: 0.22rem 0.45rem;
            }
            .chart-hover-panel {
                gap: 0.55rem;
                padding: 0.65rem 0.7rem;
            }
            .chart-hover-time {
                min-width: 100%;
            }
            .chart-hover-values {
                justify-content: flex-start;
            }
            .chart-legend-item .label {
                max-width: 7rem;
            }
            .filter-strip {
                margin-bottom: 1rem;
            }
            .filter-strip .filters,
            .filter-strip .subfilters {
                padding-left: 2.35rem;
                padding-right: 2.35rem;
            }
            .filter-strip-arrow {
                width: 1.9rem;
                height: 1.9rem;
            }
            .amount-side-notes {
                width: 6.25rem;
            }
            .amount-side-note {
                font-size: 0.58rem;
            }
            .amount-input {
                padding-left: 7.35rem;
            }
            .admin-bulk-bar {
                align-items: stretch;
            }
            .admin-bulk-actions > * {
                width: 100%;
            }
            .market-title {
                font-size: 1.02rem;
            }
            .market-outcome-prob {
                font-size: 1.45rem;
            }
            .market-card-footer {
                flex-direction: column;
                align-items: flex-start;
            }
            .market-live-inline {
                gap: 0.4rem;
                padding: 0.4rem 0.62rem;
            }
            .market-live-summary {
                font-size: 0.76rem;
            }
            .profile-avatar-editor {
                flex-direction: column;
                align-items: stretch;
            }
            .account-editor-header {
                flex-direction: column;
                align-items: flex-start;
            }
            .profile-avatar-preview {
                width: 56px;
                height: 56px;
            }
            .profile-avatar-preview.large {
                width: 64px;
                height: 64px;
            }
            .activity-link-card {
                flex-direction: column;
                align-items: stretch;
            }
            .activity-link-btn {
                width: 100%;
            }
            .public-profile-hero-main {
                align-items: flex-start;
            }
            .public-profile-stat-grid {
                grid-template-columns: 1fr 1fr;
            }
            .public-profile-item-head,
            .public-profile-category-row {
                flex-direction: column;
                align-items: flex-start;
            }
            .media-crop-modal {
                border-radius: 18px;
            }
            .media-crop-stage {
                grid-template-columns: 1fr;
            }
            .media-crop-workspace {
                min-height: 300px;
            }
            .media-crop-preview-circle {
                width: 140px;
                height: 140px;
            }
            .comment-author-block {
                gap: 0.55rem;
            }
            .comment-avatar,
            .profile-avatar-preview {
                width: 36px;
                height: 36px;
            }
            .comment-actions {
                gap: 0.35rem;
            }
            .comment-action-btn,
            .comment-form button {
                width: 100%;
                justify-content: center;
            }
            .comment-form-actions {
                flex-direction: column;
                align-items: stretch;
            }
        }

        /* ===== TRENDING CAROUSEL ===== */
        .trending-section { margin-bottom: 2rem; }
        .trending-section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }
        .trending-section-header h2 {
            font-size: 1.25rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .trending-section-header .counter {
            font-size: 0.85rem;
            color: var(--text-secondary);
            font-weight: 500;
        }
        .trending-carousel {
            position: relative;
            overflow: hidden;
            border-radius: 16px;
            background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
            border: 1px solid var(--border);
            min-height: 360px;
            touch-action: pan-y;
        }
        .trending-card {
            padding: 2rem;
            display: grid;
            grid-template-columns: minmax(0, 40%) minmax(0, 60%);
            grid-template-areas:
                "header header"
                "title  title"
                "left   right"
                "desc   right";
            gap: 1.25rem 2rem;
            min-height: 360px;
            animation: fadeSlide 0.4s ease;
        }
        .trending-card > .trending-title {
            grid-area: title;
            margin: 0;
        }
        @keyframes fadeSlide {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .trending-left {
            grid-area: left;
            flex: 0 0 44%;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .trending-right {
            grid-area: right;
            flex: 1 1 56%;
            min-width: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .trending-card-header {
            grid-area: header;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }
        .trending-card-header-main {
            display: flex;
            align-items: center;
            gap: 1rem;
            min-width: 0;
            flex: 1 1 auto;
        }
        .trending-card-header-copy {
            min-width: 0;
            flex: 1 1 auto;
        }
        .trending-header-meta {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-top: 0.55rem;
        }
        .trending-live {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            background: rgba(255,59,48,0.15);
            color: #ff3b30;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 700;
            width: fit-content;
            margin-bottom: 0;
        }
        .trending-live .dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #ff3b30;
            animation: livePulse 1.5s ease-in-out infinite;
        }
        .trending-live-row {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            flex-wrap: wrap;
            margin-bottom: 0.75rem;
        }
        .trending-live-summary {
            font-size: 0.82rem;
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: 0.01em;
        }
        @keyframes livePulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }
        .trending-category {
            font-size: 0.8rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin: 0;
        }
        .trending-market-count {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.28rem 0.72rem;
            border-radius: 999px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            color: var(--text-primary);
            font-size: 0.78rem;
            font-weight: 700;
            white-space: nowrap;
        }
        .trending-market-count-inline {
            display: none;
            width: fit-content;
            margin-bottom: 0.55rem;
        }
        .trending-title {
            font-size: 1.6rem;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 0;
        }
        .trending-outcomes {
            display: grid;
            gap: 0.95rem;
            margin-bottom: 1rem;
            align-items: stretch;
        }
        .trending-outcome {
            display: block;
            background: transparent;
            border: none;
            border-radius: 0;
            padding: 0;
            min-width: 0;
            width: 100%;
        }
        .trending-outcome-main {
            display: grid;
            gap: 0.45rem;
        }
        .trending-outcome-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.9rem;
        }
        .trending-outcome-label {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            min-width: 0;
        }
        .trending-outcome-icon {
            width: 30px;
            height: 30px;
            border-radius: 999px;
            background: rgba(255,255,255,0.04);
            border: 1px solid var(--border-light);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            flex-shrink: 0;
            font-size: 1rem;
            line-height: 1;
        }
        .trending-outcome-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .trending-outcome .name {
            font-size: 0.98rem;
            font-weight: 700;
            color: var(--text-primary);
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .trending-outcome .pct {
            font-size: 2.4rem;
            font-weight: 800;
            min-width: auto;
            display: inline-block;
            white-space: nowrap;
            padding: 0;
            border-radius: 0;
            background: transparent;
        }
        .trending-outcome .pct.yes { color: var(--green); }
        .trending-outcome .pct.no { color: var(--red); }
        .trending-outcome .pct.neutral { color: var(--yellow); }
        .trending-outcome-bar {
            width: 100%;
            height: 6px;
            border-radius: 999px;
            background: rgba(255,255,255,0.08);
            overflow: hidden;
        }
        .trending-outcome-fill {
            display: block;
            height: 100%;
            border-radius: inherit;
        }
        .trending-summary-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-top: auto;
            padding-top: 0.25rem;
        }
        .trending-vol {
            font-size: 0.92rem;
            color: var(--text-secondary);
            font-weight: 600;
        }
        .trending-summary-count {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }
        .trending-description {
            grid-area: desc;
            margin-top: 1.1rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(255,255,255,0.08);
        }
        .trending-description-title {
            font-size: 0.95rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 0.45rem;
        }
        .trending-description-text {
            font-size: 0.95rem;
            line-height: 1.6;
            color: var(--text-secondary);
            white-space: pre-wrap;
        }
        .trending-description-text.clamped {
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .trending-description-toggle {
            margin-top: 0.55rem;
            padding: 0;
            border: none;
            background: none;
            color: var(--green);
            font-size: 0.85rem;
            font-weight: 700;
            cursor: pointer;
        }
        .trending-chart {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: stretch;
            min-height: 100%;
        }
        .trending-chart-legend {
            display: flex;
            gap: 1rem;
            margin-bottom: 0.75rem;
            font-size: 0.8rem;
        }
        .trending-chart-legend span {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            color: var(--text-secondary);
        }
        .trending-chart-legend .dot-yes,
        .trending-chart-legend .dot-no,
        .trending-chart-legend .dot-neutral { width: 8px; height: 8px; border-radius: 50%; }
        .trending-chart-legend .dot-yes { background: var(--green); }
        .trending-chart-legend .dot-no { background: var(--red); opacity: 0.8; }
        .trending-chart-legend .dot-neutral { background: #f4c542; }
        .trending-chart-shell {
            flex: 1;
            min-height: 260px;
            border-top: 1px solid rgba(255,255,255,0.08);
            padding-top: 0.9rem;
            display: flex;
            flex-direction: column;
        }
        .trending-chart-area { flex: 1; min-height: 220px; position: relative; touch-action: none; }
        .trending-chart-area svg { width: 100%; height: 100%; }
        .trending-chart-empty {
            flex: 1;
            min-height: 220px;
            border-top: 1px solid rgba(255,255,255,0.08);
            padding-top: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            font-size: 0.9rem;
        }
        .trending-nav-group {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            flex-shrink: 0;
        }
        .trending-nav-counter {
            color: var(--text-secondary);
            font-size: 0.95rem;
            font-weight: 600;
            min-width: 3.5rem;
            text-align: center;
            letter-spacing: 0.01em;
        }
        .trending-nav {
            position: relative;
            background: transparent;
            border: none;
            color: var(--text-muted);
            width: 32px;
            height: 32px;
            border-radius: 50%;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 1.1rem;
            transition: opacity 0.15s;
            box-shadow: none;
            -webkit-tap-highlight-color: transparent;
            -webkit-appearance: none;
            appearance: none;
        }
        .trending-nav:hover,
        .trending-nav:focus,
        .trending-nav:focus-visible,
        .trending-nav:active {
            color: var(--text-muted);
            background: transparent;
            outline: none;
        }
        .trending-dots {
            display: flex;
            justify-content: center;
            gap: 6px;
            padding: 0.75rem 0;
        }
        .trending-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--border);
            cursor: pointer;
            transition: all 0.2s;
            border: none;
        }
        .trending-dot.active {
            background: var(--green);
            width: 24px;
            border-radius: 4px;
        }

        @media (max-width: 768px) {
            .trending-carousel {
                overflow: visible;
                min-height: 0;
            }
            .trending-card {
                display: grid;
                grid-template-columns: 1fr;
                grid-template-areas:
                    "header"
                    "title"
                    "left"
                    "right"
                    "desc";
                gap: 1.1rem;
                min-height: 0;
                padding: 1.2rem;
            }
            .trending-card-header {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 0.6rem;
            }
            .trending-card-header-main {
                display: block;
                flex: 1 1 0;
                min-width: 0;
                width: auto;
            }
            .trending-card-header .market-icon {
                margin-bottom: 0.9rem !important;
            }
            .trending-nav-group {
                flex-shrink: 0;
                align-self: flex-start;
            }
            .trending-market-count-inline {
                display: inline-flex;
                margin-bottom: 0.65rem;
            }
            .trending-market-count-corner {
                display: none;
            }
            .trending-title {
                font-size: 1.35rem;
                line-height: 1.18;
                overflow-wrap: anywhere;
            }
            .trending-left,
            .trending-right,
            .trending-description {
                width: 100%;
                min-width: 0;
            }
            .trending-outcomes {
                gap: 0.85rem;
                margin-bottom: 0.6rem;
            }
            .trending-outcome-top {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: center;
                gap: 0.85rem;
            }
            .trending-outcome-label {
                min-width: 0;
            }
            .trending-outcome .name {
                white-space: normal;
                overflow-wrap: anywhere;
            }
            .trending-outcome .pct {
                font-size: 1.45rem;
                line-height: 1;
                text-align: right;
            }
            .trending-right {
                max-height: none;
                min-height: 0;
                overflow: hidden;
            }
            .trending-chart {
                min-height: 0;
            }
            .trending-chart-shell,
            .trending-chart-empty {
                min-height: 170px;
                max-height: 190px;
            }
            .trending-chart-area {
                min-height: 145px;
            }
            .trending-description {
                margin-top: 0;
                padding-top: 0.9rem;
            }
            .trending-description-text.clamped {
                -webkit-line-clamp: 3;
            }
            .trending-nav {
                width: 30px;
                height: 30px;
            }
        }

        @media (max-width: 480px) {
            .trending-card {
                padding: 1rem;
                gap: 1rem;
            }
            .trending-title {
                font-size: 1.28rem;
            }
            .trending-outcome-icon {
                width: 24px;
                height: 24px;
            }
            .trending-outcome .pct {
                font-size: 1.28rem;
            }
            .trending-chart-legend {
                font-size: 0.7rem;
                gap: 0.4rem 0.65rem;
                max-height: 2.4rem;
                overflow: hidden;
            }
            .trending-chart-shell,
            .trending-chart-empty {
                min-height: 160px;
                max-height: 180px;
            }
            .trending-chart-area {
                min-height: 138px;
            }
        }

        /* ===== MARKET RULES ===== */
        .market-rules {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 10px;
            padding: 1.25rem;
            margin-top: 1rem;
        }
        .market-rules h3 {
            font-size: 0.95rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .market-rules .rule-item {
            display: flex;
            gap: 0.5rem;
            padding: 0.5rem 0;
            border-bottom: 1px solid var(--border-light);
            font-size: 0.85rem;
        }
        .market-rules .rule-item:last-child { border-bottom: none; }
        .market-rules .rule-label { color: var(--text-muted); min-width: 100px; }
        .market-rules .rule-value { color: var(--text-primary); }
        .detail-order-book {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 10px;
            padding: 1rem;
            margin-top: 1rem;
        }
        .detail-order-book-toggle {
            width: 100%;
            margin-top: 1rem;
            padding: 1rem 1.1rem;
            border: 1px solid var(--border-light);
            border-radius: 12px;
            background: var(--bg-card);
            color: var(--text-primary);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            font-weight: 800;
            cursor: pointer;
            text-align: left;
        }
        .detail-order-book-toggle span:last-child {
            color: var(--green);
            font-size: 0.82rem;
            white-space: nowrap;
        }
        .detail-order-book-toggle.active {
            border-color: rgba(16,185,129,0.35);
            background: rgba(16,185,129,0.07);
        }
        .detail-order-book.inline {
            margin: 0;
            border-radius: 0;
            border-left: 0;
            border-right: 0;
            background: rgba(11, 15, 22, 0.54);
        }
        .detail-order-book-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 0.85rem;
            flex-wrap: wrap;
        }
        .detail-order-book-books {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }
        .detail-order-book-levels {
            display: grid;
            gap: 0.5rem;
            margin-top: 0.75rem;
            max-height: 280px;
            overflow-y: auto;
            padding-right: 0.25rem;
        }
        .detail-order-book-columns {
            display: grid;
            grid-template-columns: minmax(72px, 0.85fr) minmax(96px, 1fr) minmax(92px, 1fr);
            gap: 0.75rem;
            align-items: center;
            font-size: 0.74rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.04em;
            padding: 0 0.1rem;
            margin-top: 0.75rem;
        }
        .detail-order-book-level {
            display: grid;
            grid-template-columns: minmax(72px, 0.85fr) minmax(96px, 1fr) minmax(92px, 1fr);
            gap: 0.75rem;
            align-items: center;
            font-size: 0.85rem;
            color: var(--text-secondary);
            min-width: 0;
            padding: 0.45rem 0.1rem;
        }
        .detail-order-book-level.has-user-order {
            cursor: pointer;
            border: 1px solid rgba(16, 185, 129, 0.28);
            border-radius: 10px;
            padding: 0.55rem 0.6rem;
            background: rgba(16, 185, 129, 0.06);
        }
        .detail-order-book-price,
        .detail-order-book-contracts,
        .detail-order-book-total {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .detail-order-book-price {
            font-weight: 800;
        }
        .detail-order-book-total {
            text-align: right;
        }
        .detail-order-book-ladder {
            margin-top: 0.45rem;
            max-height: 360px;
            overflow-y: auto;
            padding-right: 0.25rem;
            display: grid;
            gap: 0.12rem;
        }
        .detail-order-book-midline {
            margin: 0.35rem 0;
            border-top: 1px solid var(--border-light);
            border-bottom: 1px solid var(--border-light);
            padding: 0.5rem 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.15rem;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            font-size: 0.82rem;
        }
        .detail-order-book-midline .ask-label { color: var(--red); }
        .detail-order-book-midline .bid-label { color: var(--green); }
        .detail-order-book-empty {
            color: var(--text-muted);
            padding: 0.45rem 0.1rem;
            font-size: 0.85rem;
        }
        .detail-order-book-level-indicator {
            margin-left: 0.45rem;
            color: #f4c442;
            font-size: 0.88rem;
        }
        .detail-order-book-selected-orders {
            margin-top: 1rem;
            display: grid;
            gap: 0.65rem;
        }
        .detail-resting-orders-overlay {
            position: fixed;
            inset: 0;
            background: rgba(5, 10, 18, 0.62);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            z-index: 1200;
        }
        .detail-resting-orders-modal {
            width: min(720px, 100%);
            max-height: min(80vh, 720px);
            overflow-y: auto;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 18px;
            box-shadow: 0 24px 54px rgba(0, 0, 0, 0.34);
            padding: 1.1rem;
        }
        .detail-resting-orders-modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 0.9rem;
        }
        .detail-order-book-user-orders {
            margin-top: 1rem;
            display: grid;
            gap: 0.75rem;
        }
        .detail-order-book-user-order {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 0.75rem;
            align-items: center;
            padding: 0.75rem 0.9rem;
            border: 1px solid var(--border-light);
            border-radius: 10px;
            background: var(--bg-hover);
        }
        .detail-order-book-user-order-meta {
            display: grid;
            gap: 0.25rem;
            min-width: 0;
        }
        .detail-order-book-user-order-title {
            font-weight: 700;
            color: var(--text-primary);
        }
        .detail-order-book-cancel-btn {
            width: 34px;
            height: 34px;
            border-radius: 999px;
            border: 1px solid var(--border-light);
            background: transparent;
            color: var(--text-primary);
            cursor: pointer;
            font-size: 1rem;
            font-weight: 700;
        }
        .detail-order-book-kicker {
            font-size: 0.78rem;
            color: var(--text-muted);
        }
        .detail-order-book-currency {
            min-width: 120px;
        }

        /* ===== COMMENTS ===== */
        .comments-section { margin-top: 1.5rem; }
        .comments-section h3 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .comment-form {
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
            margin-bottom: 1.25rem;
        }
        .comment-form textarea,
        .inline-reply-box textarea {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 12px;
            padding: 0.8rem 0.9rem;
            color: var(--text-primary);
            font-size: 0.88rem;
            resize: none;
            min-height: 96px;
            width: 100%;
            outline: none;
            font-family: inherit;
        }
        .comment-form textarea:focus,
        .inline-reply-box textarea:focus { border-color: var(--green); }
        .comment-form-actions,
        .inline-reply-box .comment-form-actions {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            flex-wrap: wrap;
        }
        .comment-media-input {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.55rem 0.75rem;
            color: var(--text-primary);
            font-size: 0.82rem;
            width: 100%;
        }
        .comment-upload-note {
            font-size: 0.75rem;
            color: var(--text-muted);
            line-height: 1.45;
            margin-top: -0.15rem;
        }
        .comment-form button,
        .comment-action-btn {
            background: var(--green);
            color: #000;
            border: none;
            padding: 0.55rem 0.95rem;
            border-radius: 8px;
            font-weight: 700;
            font-size: 0.85rem;
            cursor: pointer;
            white-space: nowrap;
        }
        .comment-action-btn.secondary {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border: 1px solid var(--border);
        }
        .comment-action-btn.vote-active-up {
            background: rgba(0, 214, 96, 0.14);
            color: var(--green);
            border: 1px solid rgba(0, 214, 96, 0.32);
        }
        .comment-action-btn.vote-active-down {
            background: rgba(255, 95, 95, 0.14);
            color: var(--red);
            border: 1px solid rgba(255, 95, 95, 0.32);
        }
        .comment-vote-cluster {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.25rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 999px;
        }
        .comment-vote-btn {
            width: 34px;
            height: 34px;
            border-radius: 999px;
            border: none;
            background: transparent;
            color: var(--text-muted);
            font-size: 1rem;
            font-weight: 800;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .comment-vote-btn.active-up {
            background: rgba(0, 214, 96, 0.16);
            color: var(--green);
        }
        .comment-vote-btn.active-down {
            background: rgba(255, 95, 95, 0.16);
            color: var(--red);
        }
        .comment-sort-row {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin-bottom: 0.85rem;
        }
        .comment-sort-label {
            color: var(--text-muted);
            font-size: 0.8rem;
            font-weight: 600;
        }
        .comment-score {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2rem;
            padding: 0 0.25rem;
            color: var(--text-primary);
            font-weight: 700;
            font-size: 0.82rem;
        }
        .comment-thread {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .comment-item {
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            border-radius: 8px;
            padding: 0.85rem 1rem;
        }
        .comment-header {
            display: flex;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 0.45rem;
            align-items: flex-start;
        }
        .comment-author-block {
            display: flex;
            gap: 0.7rem;
            min-width: 0;
            flex: 1;
        }
        .comment-author-link {
            display: flex;
            gap: 0.7rem;
            align-items: flex-start;
            min-width: 0;
            flex: 1;
            border: none;
            background: none;
            color: inherit;
            padding: 0;
            text-align: left;
            cursor: pointer;
        }
        .comment-author-link:hover .comment-author {
            text-decoration: underline;
        }
        .comment-meta {
            min-width: 0;
        }
        .comment-author { font-weight: 600; font-size: 0.85rem; color: var(--green); }
        .comment-time { font-size: 0.75rem; color: var(--text-muted); display: block; margin-top: 0.1rem; }
        .comment-body { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; }
        .comment-gif {
            margin-top: 0.65rem;
            max-width: min(320px, 100%);
            border-radius: 12px;
            display: block;
            border: 1px solid var(--border);
        }
        .comment-actions {
            display: flex;
            gap: 0.45rem;
            flex-wrap: wrap;
            margin-top: 0.65rem;
        }
        .comment-replies {
            margin-top: 0.75rem;
            padding-left: 1rem;
            border-left: 2px solid var(--border);
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .inline-reply-box {
            margin-top: 0.85rem;
            padding-top: 0.85rem;
            border-top: 1px solid var(--border-light);
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
        }
        .deleted-comment .comment-author,
        .deleted-comment .comment-body {
            color: var(--text-muted);
        }

        /* ===== ENHANCED TRADE PANEL (Kalshi-style) ===== */
        .trade-mode-tabs {
            display: flex;
            background: var(--bg-tertiary);
            border-radius: 8px;
            padding: 3px;
            margin-bottom: 1rem;
        }
        .trade-mode-tabs button {
            flex: 1;
            padding: 0.5rem;
            border: none;
            border-radius: 6px;
            font-weight: 700;
            font-size: 0.9rem;
            cursor: pointer;
            background: transparent;
            color: var(--text-secondary);
            transition: all 0.15s;
        }
        .trade-mode-tabs button.active-buy {
            background: var(--green);
            color: #000;
        }
        .trade-mode-tabs button.active-sell {
            background: var(--red);
            color: #fff;
        }
        .trade-currency-toggle {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 0.5rem;
        }
        .trade-currency-toggle select {
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            color: var(--text-primary);
            padding: 0.25rem 0.5rem;
            border-radius: 6px;
            font-size: 0.8rem;
        }
        .trade-payout {
            text-align: center;
            padding: 0.5rem 0;
        }
        .trade-payout .label {
            font-size: 0.8rem;
            color: var(--text-muted);
        }
        .trade-payout .amount {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--green);
        }
        .trade-odds {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            padding: 0.35rem 0;
            color: var(--text-secondary);
        }
        .trade-odds .val { font-weight: 600; color: var(--text-primary); }
        .naira-equiv {
            text-align: right;
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: -0.5rem;
            margin-bottom: 0.5rem;
        }

        /* ===== DEPOSIT/WITHDRAW MODALS ===== */
        .modal-amount-display {
            text-align: center;
            padding: 1rem 0;
        }
        .modal-amount-display .big {
            font-size: 2rem;
            font-weight: 800;
        }
        .modal-amount-display .equiv {
            font-size: 0.85rem;
            color: var(--text-muted);
        }
        .bank-select {
            width: 100%;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 0.6rem 0.75rem;
            color: var(--text-primary);
            font-size: 0.875rem;
            margin-bottom: 0.75rem;
            outline: none;
        }
        .bank-select:focus { border-color: var(--green); }
        .withdraw-balance {
            text-align: center;
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }
        .withdraw-balance strong {
            color: var(--text-primary);
        }
        .modal-tabs {
            display: flex;
            background: var(--bg-tertiary);
            border-radius: 8px;
            padding: 3px;
            margin-bottom: 1.25rem;
        }
        .modal-tabs button {
            flex: 1;
            padding: 0.5rem;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            background: transparent;
            color: var(--text-secondary);
            transition: all 0.15s;
        }
        .modal-tabs button.active {
            background: var(--green);
            color: #000;
        }
        .bank-saved {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--bg-tertiary);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.75rem 1rem;
            margin-bottom: 0.75rem;
            cursor: pointer;
            transition: border-color 0.15s;
        }
        .bank-saved:hover,
        .bank-saved.selected { border-color: var(--green); }
        .bank-saved .bank-icon { font-size: 1.5rem; }
        .bank-saved .bank-info { flex: 1; }
        .bank-saved .bank-name { font-weight: 600; font-size: 0.9rem; }
        .bank-saved .bank-acct { font-size: 0.8rem; color: var(--text-muted); }