:root {
    --bg-primary: #0a0e17;
    --bg-secondary: #111827;
    --bg-tertiary: #1a2332;
    --bg-card: #151d2b;
    --border: #2d3a4f;
    --border-light: #374357;
    --text-primary: #e5e7eb;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --accent-blue: #1a73e8;
    --accent-green: #10b981;
    --accent-red: #ef4444;
    --accent-orange: #f59e0b;
    --accent-purple: #8b5cf6;
    --ticker-bg: #0f1419;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* =========================================
   GLOBAL TYPOGRAPHY (Native App Feel)
   ========================================= */
body,
input,
button,
select,
textarea {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    color: #f3f4f6;
}

b,
strong {
    font-weight: 600 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600 !important;
    letter-spacing: -0.3px !important;
    margin: 0;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* =========================================
   SKELETON SHIMMER (loading placeholders)
   ========================================= */
@keyframes shimmer {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}

.skeleton {
    background: #1a1a1a;
    background-image: linear-gradient(to right, #1a1a1a 0%, #2a2a2a 20%, #1a1a1a 40%, #1a1a1a 100%);
    background-repeat: no-repeat;
    background-size: 800px 100%;
    display: inline-block;
    position: relative;
    animation: shimmer 1.5s linear infinite forwards;
    border-radius: 4px;
    pointer-events: none;
}

.skeleton-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
}

.skeleton-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-line {
    height: 12px;
    border-radius: 4px;
}

.skeleton-line.w60 {
    width: 60%;
}

.skeleton-line.w40 {
    width: 40%;
}

.skeleton-line.w30 {
    width: 30%;
}

.skeleton-line.w20 {
    width: 20%;
}

.skeleton-line.w100 {
    width: 100%;
}

.skeleton-line.h8 {
    height: 8px;
}

.skeleton-line.h16 {
    height: 16px;
}

.skeleton-line.h20 {
    height: 20px;
}

.sparkline-placeholder {
    width: 100px;
    height: 30px;
    margin-top: 5px;
}

.weather-placeholder {
    width: 100%;
    height: 80px;
    margin-bottom: 10px;
}

.skeleton-card {
    border-radius: 10px;
    min-width: 140px;
    height: 110px;
    flex-shrink: 0;
}

.skeleton-quote-tile {
    border-radius: 8px;
    height: 60px;
    min-width: 100px;
    flex: 1;
}

body {
    background: var(--bg-primary);
    min-height: 100vh;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Top Bar */
.top-bar {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 32px;
    height: 32px;
    background: var(--accent-blue);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.logo-text {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.5px;
}

.logo-text span {
    color: var(--accent-blue);
}

.nav-links {
    display: flex;
    gap: 24px;
    margin-left: auto;
    margin-right: 32px;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--text-primary);
}

.user-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.market-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

.status-dot.live {
    background: var(--accent-green);
    animation: pulse 2s infinite;
}

.status-dot.simulated {
    background: var(--accent-orange);
    animation: pulse 3s infinite;
}

.status-dot.waiting {
    background: var(--text-muted);
    animation: pulse 1s infinite;
}

.status-dot.closed {
    background: var(--accent-red);
    animation: none;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Ticker Strip */
.ticker-strip {
    background: var(--ticker-bg);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    height: 36px;
}

.ticker-track {
    display: flex;
    height: 100%;
    align-items: center;
    will-change: transform;
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
    white-space: nowrap;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

.flag-img {
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    border-radius: 2px;
}

.ticker-flag {
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

.ticker-symbol {
    color: var(--text-primary);
    font-weight: 600;
}

.ticker-price {
    color: var(--text-secondary);
}

.ticker-price.up {
    color: var(--accent-green);
}

.ticker-price.down {
    color: var(--accent-red);
}

.ticker-change.up {
    color: var(--accent-green);
}

.ticker-change.down {
    color: var(--accent-red);
}

.ticker-separator {
    color: var(--border);
    padding: 0 12px;
    font-size: 14px;
    opacity: 0.4;
}

.ticker-loading {
    opacity: 0.5;
}

.ticker-tea .ticker-symbol {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 11px;
}

.ticker-index .ticker-symbol {
    color: var(--accent-blue);
    font-weight: 600;
    font-size: 11px;
}

.ticker-tea:hover,
.ticker-index:hover {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.ticker-change {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Native App Views — invisible wrappers on desktop */
.app-view {
    display: contents;
}

/* Mobile-only elements: hidden on desktop */
.portfolio-hero,
#t212-trades-list,
#mobile-top-header,
.mth-menu-overlay,
.mth-menu,
.ghost-share-btn {
    display: none;
}

#view-chat>*,
#view-social>*,
#view-more>* {
    display: none;
}

/* Main Grid */
.main-grid {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr minmax(280px, 320px);
    gap: 1px;
    background: var(--border);
    min-height: calc(100vh - 85px);
}

.main-grid>* {
    min-height: 100%;
}

/* Sidebar */
.sidebar {
    background: var(--bg-secondary);
    padding: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-section:last-child {
    flex: 1;
    margin-bottom: 0;
    min-height: 0;
}

.sidebar-section {
    margin-bottom: 24px;
}

.sidebar-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 12px;
    font-weight: 600;
}

/* ── Desktop Weather Cards ── */
.weather-cards-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.t212-weather-card {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: border-color 0.15s;
}

.t212-weather-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
}

.t212-weather-card.weather-skeleton {
    opacity: 0.35;
    pointer-events: none;
}

.t212-weather-card.weather-error {
    border-color: rgba(255, 51, 51, 0.15);
}

.wc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.wc-region {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.wc-condition {
    font-size: 10px;
    color: var(--text-muted);
}

.wc-temp-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}

.wc-temp-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.wc-feels {
    font-size: 10px;
    color: var(--text-muted);
}

.wc-indicators {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.wc-ind {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--text-muted);
}

.wc-ind-icon {
    font-size: 11px;
}

.wc-ind-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
}

.wc-ind-val small {
    font-size: 8px;
}

.wc-accent-bar {
    height: 2px;
    border-radius: 1px;
    margin-top: 8px;
    background: var(--wc-bar-color, rgba(255, 255, 255, 0.06));
}

.t212-weather-card[data-weather-bg="sunny"] {
    --wc-bar-color: #f59e0b;
}

.t212-weather-card[data-weather-bg="cloudy"] {
    --wc-bar-color: #6b7280;
}

.t212-weather-card[data-weather-bg="rain"] {
    --wc-bar-color: #3b82f6;
}

.t212-weather-card[data-weather-bg="storm"] {
    --wc-bar-color: #8b5cf6;
}

.t212-weather-card[data-weather-bg="snow"] {
    --wc-bar-color: #93c5fd;
}

.t212-weather-card[data-weather-bg="foggy"] {
    --wc-bar-color: #9ca3af;
}

.wc-retry-tap {
    font-size: 10px;
    color: var(--accent-blue);
    cursor: pointer;
}

.watchlist-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
}

.watchlist-item:hover {
    border-color: var(--border-light);
    background: var(--bg-tertiary);
}

.watchlist-name {
    font-weight: 500;
    font-size: 13px;
}

.watchlist-grade {
    font-size: 11px;
    color: var(--text-muted);
}

.watchlist-price {
    text-align: right;
}

.watchlist-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
}

.watchlist-change {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

.up {
    color: var(--accent-green);
    font-weight: 600;
}

.down {
    color: var(--accent-red);
    font-weight: 600;
}

/* IB Chat Section */
.chat-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 100px;
    border-top: 1px solid var(--border);
    margin-top: 16px;
    position: relative;
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    flex-shrink: 0;
}

.chat-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-notification-badge {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 24px;
    background: var(--accent-blue);
    color: white;
    padding: 10px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    z-index: 10000;
    box-shadow: 0 4px 16px rgba(26, 115, 232, 0.5);
    animation: chatBadgePulse 2s ease-in-out infinite;
    transition: transform 0.2s, background 0.2s;
    width: fit-content;
    max-width: 100px;
    height: auto;
    max-height: 44px;
}

.chat-notification-badge:hover {
    background: #2563eb;
    transform: scale(1.05);
}

.chat-notification-badge.visible {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.chat-notification-badge svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.chat-notification-badge-text {
    display: none;
}

.chat-notification-count {
    background: white;
    color: var(--accent-blue);
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
}

@keyframes chatBadgePulse {

    0%,
    100% {
        box-shadow: 0 4px 12px rgba(26, 115, 232, 0.4);
    }

    50% {
        box-shadow: 0 4px 20px rgba(26, 115, 232, 0.6);
    }
}

.chat-online {
    font-size: 10px;
    color: var(--accent-green);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-tertiary);
    padding-right: 4px;
    padding-bottom: 8px;
    min-height: 0;
}

.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.chat-message {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}

.chat-message:last-child {
    border-bottom: none;
}

.chat-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.chat-sender {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent-blue);
}

.chat-sender.system {
    color: var(--accent-orange);
}

.chat-time {
    font-size: 10px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.chat-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.chat-input-container {
    margin-top: auto;
    padding: 8px 6px 0 0;
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    position: sticky;
    bottom: 0;
}

.chat-input {
    flex: 1;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 10px;
    height: 28px;
    font-size: 12px;
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    max-width: calc(100% - 80px);
}

.chat-input:focus {
    border-color: var(--accent-blue);
}

.chat-input::placeholder {
    color: var(--text-muted);
}

.chat-send {
    background: var(--accent-blue);
    border: none;
    border-radius: 4px;
    padding: 0 12px;
    height: 28px;
    cursor: pointer;
    color: white;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.chat-send:hover {
    background: #1557b0;
}

.chat-blast {
    background: var(--accent-orange);
    border: none;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    padding: 0;
    cursor: pointer;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
}

.chat-blast svg {
    width: 14px;
    height: 14px;
}

.chat-blast:hover {
    background: #d97706;
}

/* Own message styling (must come before private for cascade) */
.chat-message.own {
    background: rgba(26, 115, 232, 0.1);
    border-left: 2px solid var(--accent-blue);
    padding-left: 8px;
    margin-left: -8px;
}

/* Private message styling - higher priority */
.chat-message.private,
.chat-message.own.private {
    background: rgba(147, 51, 234, 0.15) !important;
    border-left: 2px solid var(--accent-purple, #9333ea) !important;
    padding-left: 8px;
    margin-left: -8px;
}

.chat-message.private .chat-sender,
.chat-message.own.private .chat-sender {
    color: var(--accent-purple, #9333ea) !important;
}

.chat-sender.dm-target {
    color: var(--accent-purple, #9333ea);
}

/* Center Content */
.center-content {
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Chart Section */
.chart-section {
    padding: 20px;
    border-bottom: 1px solid var(--border);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.t212-pro-header {
    display: none;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.chart-title {
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.chart-title h2 {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
}

.chart-badge {
    padding: 3px 8px 3px 12px;
    background: var(--accent-blue);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
    animation: livePulse 2s ease-in-out infinite;
}

.chart-badge::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background: #10b981;
    border-radius: 50%;
    animation: liveDot 1.5s ease-in-out infinite;
}

@keyframes livePulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

@keyframes liveDot {

    0%,
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }

    50% {
        opacity: 0.6;
        transform: translateY(-50%) scale(0.8);
    }
}

/* Timeframe Dropdown */
.timeframe-dropdown {
    position: relative;
}

.timeframe-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.timeframe-btn:hover {
    border-color: var(--accent-blue);
}

.timeframe-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 0;
    min-width: 80px;
    z-index: 200;
    display: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.timeframe-menu.visible {
    display: block;
}

.timeframe-item {
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.timeframe-item:hover {
    background: var(--bg-tertiary);
}

.timeframe-item.active {
    color: var(--accent-blue);
    background: rgba(26, 115, 232, 0.1);
}

.chart-stats {
    display: flex;
    gap: 32px;
    margin-top: 8px;
}

.chart-stat {
    text-align: left;
}

.chart-stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 28px;
    font-weight: 700;
}

.chart-stat-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.chart-controls {
    display: flex;
    gap: 8px;
}

.chart-btn {
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.chart-btn:hover,
.chart-btn.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

.chart-type-toggle {
    display: flex;
    gap: 4px;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid var(--border);
}

.chart-type-btn {
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chart-type-btn:hover,
.chart-type-btn.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

.chart-type-btn svg {
    width: 14px;
    height: 14px;
}

/* Studies Dropdown */
.studies-dropdown {
    position: relative;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid var(--border);
}

.studies-btn {
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.studies-btn:hover {
    background: var(--bg-card);
    border-color: var(--border-light);
}

.studies-btn.has-active {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    color: white;
}

.studies-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 0;
    min-width: 180px;
    z-index: 200;
    display: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.studies-menu.visible {
    display: block;
}

.studies-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.studies-item:hover {
    background: var(--bg-tertiary);
}

.studies-item-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.studies-color {
    width: 12px;
    height: 3px;
    border-radius: 2px;
}

.studies-toggle {
    width: 36px;
    height: 20px;
    background: var(--bg-secondary);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}

.studies-toggle.active {
    background: var(--accent-blue);
}

.studies-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: all 0.2s;
}

.studies-toggle.active::after {
    left: 18px;
}

/* Price Alert Bell */
.price-alert-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
}

.price-alert-btn:hover {
    color: var(--accent-orange);
    background: rgba(245, 158, 11, 0.1);
}

.price-alert-btn.has-alert {
    color: var(--accent-orange);
}

.price-alert-btn svg {
    width: 16px;
    height: 16px;
}

.watchlist-star-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.2s;
    line-height: 1;
}

.watchlist-star-btn:hover {
    color: var(--accent-orange);
    background: rgba(245, 158, 11, 0.1);
}

.watchlist-star-btn.starred {
    color: var(--accent-orange);
}

/* SL/TP Inputs */
.sltp-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    overflow: hidden;
}

.sltp-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    position: relative;
}

.sltp-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.sltp-label .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sltp-label .dot.sl {
    background: var(--accent-red);
}

.sltp-label .dot.tp {
    background: var(--accent-green);
}

.sltp-input {
    padding: 6px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    width: 100%;
    box-sizing: border-box;
    -moz-appearance: textfield;
}

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

.sltp-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.sltp-input-wrapper input {
    padding-right: 28px;
}

.sltp-arrows {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sltp-arrow {
    width: 18px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.15s;
    padding: 0;
}

.sltp-arrow:hover {
    background: var(--accent-blue);
    color: white;
}

.sltp-arrow svg {
    width: 10px;
    height: 10px;
}

.sltp-input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.sltp-input::placeholder {
    color: var(--text-muted);
}

.chart-container {
    height: 280px;
    background: var(--bg-card);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

/* RSI Sub-Chart */
.rsi-chart-container {
    height: 80px;
    background: var(--bg-card);
    border-radius: 8px;
    margin-top: 8px;
    padding: 8px 0;
    position: relative;
}

.rsi-header {
    position: absolute;
    top: 8px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 5;
}

.rsi-label {
    font-size: 10px;
    font-weight: 600;
    color: #ec4899;
    text-transform: uppercase;
}

.rsi-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-secondary);
}

.rsi-canvas {
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

.rsi-crosshair {
    position: absolute;
    pointer-events: none;
    display: none;
}

.rsi-crosshair .crosshair-v {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
}

.rsi-crosshair .crosshair-h {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.rsi-tooltip {
    position: absolute;
    background: rgba(17, 24, 39, 0.95);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 10px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 10;
    white-space: nowrap;
}

.rsi-tooltip.visible {
    opacity: 1;
}

/* Market Depth Heatmap */
.market-depth-container {
    background: var(--bg-card);
    border-radius: 8px;
    margin-top: 8px;
    padding: 12px;
}

.market-depth-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.market-depth-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.market-depth-ratio {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-secondary);
}

.market-depth-bar {
    height: 24px;
    border-radius: 4px;
    display: flex;
    overflow: hidden;
    position: relative;
}

.depth-bids {
    background: rgba(16, 185, 129, 0.4);
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 8px;
}

.depth-asks {
    background: rgba(239, 68, 68, 0.4);
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 8px;
}

.depth-label {
    font-size: 10px;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.market-depth-levels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 9px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

/* Watchlist Tabs */
.watchlist-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.watchlist-tab {
    flex: 1;
    padding: 6px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--bg-card);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.watchlist-tab:hover {
    color: var(--text-primary);
}

.watchlist-tab.active {
    background: var(--accent-blue);
    color: white;
}

/* Macro Indicators */
.macro-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-card);
    border-radius: 6px;
    margin-bottom: 6px;
}

.macro-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.macro-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.macro-icon.currency {
    background: rgba(59, 130, 246, 0.2);
}

.macro-icon.oil {
    background: rgba(245, 158, 11, 0.2);
}

.macro-icon.shipping {
    background: rgba(139, 92, 246, 0.2);
}

.macro-icon.weather {
    background: rgba(16, 185, 129, 0.2);
}

.macro-name {
    font-size: 12px;
    font-weight: 500;
}

.macro-subtext {
    font-size: 10px;
    color: var(--text-muted);
}

.macro-value {
    text-align: right;
}

.macro-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
}

.macro-change {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: flex-end;
}

/* Live price flash when a macro value ticks */
@keyframes macro-flash-up {
    0% {
        color: var(--accent-green);
        text-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    }

    100% {
        color: inherit;
        text-shadow: none;
    }
}

@keyframes macro-flash-down {
    0% {
        color: var(--accent-red);
        text-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
    }

    100% {
        color: inherit;
        text-shadow: none;
    }
}

.macro-flash-up {
    animation: macro-flash-up 0.7s ease-out;
}

.macro-flash-down {
    animation: macro-flash-down 0.7s ease-out;
}

.macro-impact {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-top: 4px;
    display: inline-block;
}

.macro-impact.bullish {
    background: rgba(16, 185, 129, 0.2);
    color: var(--accent-green);
}

.macro-impact.bearish {
    background: rgba(239, 68, 68, 0.2);
    color: var(--accent-red);
}

.macro-impact.neutral {
    background: rgba(156, 163, 175, 0.2);
    color: var(--text-muted);
}

/* Trade Log */
.portfolio-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.portfolio-tab {
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--bg-card);
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.portfolio-tab:hover {
    color: var(--text-primary);
}

.portfolio-tab.active {
    background: var(--accent-blue);
    color: white;
}

.trade-log-container {
    display: none;
    overflow-x: auto;
}

.trade-log-container.active {
    display: block;
}

.trade-log-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.trade-stat {
    background: var(--bg-card);
    padding: 8px 4px;
    border-radius: 6px;
    text-align: center;
}

.trade-stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
}

.trade-stat-label {
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 2px;
}

.trade-log-table {
    width: 100%;
    font-size: 10px;
    border-collapse: collapse;
    table-layout: fixed;
}

.trade-log-table th {
    text-align: left;
    padding: 6px 4px;
    font-size: 8px;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}

.trade-log-table td {
    padding: 6px 4px;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trade-log-table tr:hover {
    background: var(--bg-tertiary);
}

.trade-type-badge {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
}

.trade-type-badge.long {
    background: rgba(16, 185, 129, 0.2);
    color: var(--accent-green);
}

.trade-type-badge.short {
    background: rgba(239, 68, 68, 0.2);
    color: var(--accent-red);
}

/* Command Line */
.command-line-container {
    position: relative;
    flex: 1;
    max-width: 400px;
    margin: 0 24px;
}

.command-line {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px 8px 36px;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    outline: none;
    transition: all 0.2s;
}

.command-line:focus {
    border-color: var(--accent-blue);
    background: var(--bg-card);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.command-line::placeholder {
    color: var(--text-muted);
}

.command-line-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 12px;
}

.command-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-top: 4px;
    max-height: 350px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.command-suggestions::-webkit-scrollbar {
    width: 6px;
}

.command-suggestions::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

.command-suggestions::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
    transition: background 0.2s;
}

.command-suggestions::-webkit-scrollbar-thumb:hover {
    background: var(--accent-blue);
}

.command-suggestions.active {
    display: block;
}

.search-category {
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.command-suggestion {
    padding: 10px 12px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.1s;
    gap: 12px;
}

.command-suggestion:hover,
.command-suggestion.selected {
    background: var(--bg-tertiary);
}

.search-result-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.search-result-symbol {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--text-primary);
}

.search-result-symbol .origin {
    color: var(--accent-blue);
}

.search-result-name {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-price {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    text-align: right;
}

.search-result-price.up {
    color: var(--accent-green);
}

.search-result-price.down {
    color: var(--accent-red);
}

.search-result-actions {
    display: flex;
    gap: 4px;
}

.search-action-btn {
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.search-action-btn:hover {
    opacity: 0.8;
}

.search-action-btn.chart {
    background: var(--accent-blue);
    color: white;
}

.search-action-btn.buy {
    background: var(--accent-green);
    color: white;
}

.search-action-btn.sell {
    background: var(--accent-red);
    color: white;
}

.search-user-row {
    align-items: center;
}

.search-user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.5px;
}

.command-suggestion-cmd {
    font-family: 'JetBrains Mono', monospace;
    color: var(--accent-blue);
}

.command-suggestion-desc {
    color: var(--text-muted);
    font-size: 10px;
}

/* Maximize Functionality */
.maximize-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.maximize-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.panel-maximized {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--bg-primary) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Trading Hub Layout */
.trading-hub-container {
    display: none;
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
}

.panel-maximized .trading-hub-container {
    display: flex;
    height: 100%;
}

.panel-maximized .chart-header,
.panel-maximized .chart-container,
.panel-maximized .market-depth-section {
    display: none;
}

.trading-hub-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px;
    gap: 8px;
    position: relative;
    height: 100%;
    overflow: hidden;
}

.trading-hub-sidebar {
    width: 320px;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    margin: 12px 12px 12px 0;
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-tertiary);
}

.trading-hub-sidebar::-webkit-scrollbar {
    width: 6px;
}

.trading-hub-sidebar::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.trading-hub-sidebar::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.trading-hub-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Trading Hub Trade Panel Styles */
.trading-hub-sidebar .trade-panel {
    padding: 16px;
}

.trading-hub-sidebar .trade-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 4px;
}

.trading-hub-sidebar .trade-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.trading-hub-sidebar .trade-tab:hover {
    color: var(--text-primary);
}

.trading-hub-sidebar .trade-tab.active[data-tab="hub-buy"] {
    background: var(--accent-green);
    color: white;
}

.trading-hub-sidebar .trade-tab.active[data-tab="hub-sell"] {
    background: var(--accent-red);
    color: white;
}

.trading-hub-sidebar .trade-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trading-hub-sidebar .form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trading-hub-sidebar .form-group label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trading-hub-sidebar .form-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.trading-hub-sidebar .form-input:focus {
    outline: none;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

.trading-hub-sidebar select.form-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.trading-hub-sidebar select.form-input:hover {
    border-color: var(--border-light);
}

.trading-hub-sidebar select.form-input option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 10px 12px;
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.6;
}

.trading-hub-sidebar select.form-input option:checked {
    background: var(--accent-blue);
    color: #fff;
}

.trading-hub-sidebar select.form-input::-webkit-scrollbar {
    width: 6px;
}

.trading-hub-sidebar select.form-input::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.trading-hub-sidebar select.form-input::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.trading-hub-sidebar select.form-input::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.trading-hub-sidebar .quick-amounts {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.trading-hub-sidebar .quick-amounts button {
    flex: 1;
    padding: 6px 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.trading-hub-sidebar .quick-amounts button:hover {
    background: var(--bg-card);
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.trading-hub-sidebar .order-preview {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 12px;
    margin-top: 4px;
}

.trading-hub-sidebar .preview-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 4px 0;
    color: var(--text-secondary);
}

.trading-hub-sidebar .preview-row span:last-child {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
}

.trading-hub-sidebar .trade-button {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    margin-top: 8px;
}

.trading-hub-sidebar .trade-button.buy {
    background: var(--accent-green);
    color: white;
}

.trading-hub-sidebar .trade-button.buy:hover {
    background: #059669;
    transform: translateY(-1px);
}

.trading-hub-sidebar .trade-button.sell {
    background: var(--accent-red);
    color: white;
}

.trading-hub-sidebar .trade-button.sell:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

.trading-hub-chart-area {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
    min-height: 350px;
    height: 0;
    /* Allow flex to control height */
}

.trading-hub-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.trading-hub-chart-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trading-hub-chart-title h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.trading-hub-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 20px;
    font-weight: 700;
}

.trading-hub-price.up {
    color: var(--accent-green);
}

.trading-hub-price.down {
    color: var(--accent-red);
}

.trading-hub-change {
    font-size: 13px;
    font-weight: 500;
}

.trading-hub-canvas-wrapper {
    flex: 1;
    position: relative;
    min-height: 300px;
    background: #1a1a2e;
    width: 100%;
}

.trading-hub-canvas-wrapper canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* RSI Sub-chart with Resizer */
.trading-hub-rsi-section {
    background: var(--bg-card);
    border-radius: 8px;
    overflow: hidden;
    display: none;
    flex-shrink: 0;
}

.trading-hub-rsi-section.visible {
    display: flex;
    flex-direction: column;
}

.rsi-resize-handle {
    height: 6px;
    background: var(--bg-secondary);
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.rsi-resize-handle::before {
    content: '';
    width: 40px;
    height: 3px;
    background: var(--border-light);
    border-radius: 2px;
}

.rsi-resize-handle:hover {
    background: var(--bg-tertiary);
}

.trading-hub-rsi-canvas {
    width: 100%;
}

.trading-hub-rsi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-secondary);
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Bottom Metrics Container */
.trading-hub-bottom-metrics {
    display: flex;
    gap: 12px;
    height: 160px;
    min-height: 160px;
    flex-shrink: 0;
}

/* Live Trade Log and Market Depth */
.trading-hub-log,
.market-depth-hub {
    background: var(--bg-card);
    border-radius: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.market-depth-header,
.trading-hub-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.market-depth-header h4,
.trading-hub-log-header h4 {
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.live-pulse {
    font-size: 10px;
    color: var(--accent-green);
    display: flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.live-pulse::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-green);
    animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(0.8); opacity: 0.5; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
    100% { transform: scale(0.8); opacity: 0.5; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.market-depth-ratio {
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--text-primary);
}

.market-depth-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
}

.market-depth-bar {
    display: flex;
    height: 24px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.depth-bids {
    background: rgba(16, 185, 129, 0.2);
    border-right: 1px solid var(--bg-card);
    display: flex;
    align-items: center;
    padding-left: 10px;
    border-left: 2px solid var(--accent-green);
    transition: width 0.3s ease;
}

.depth-asks {
    background: rgba(239, 68, 68, 0.2);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    border-right: 2px solid var(--accent-red);
    transition: width 0.3s ease;
}

.depth-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.depth-bids .depth-label {
    color: var(--accent-green);
}

.depth-asks .depth-label {
    color: var(--accent-red);
}

.market-depth-levels {
    display: flex;
    justify-content: space-between;
}

.depth-stat {
    font-size: 11px;
    color: var(--text-muted);
}

.depth-stat.mid-price {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: var(--text-primary);
    font-size: 13px;
}

.trading-hub-log-content {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-tertiary);
}

.trading-hub-log-content::-webkit-scrollbar {
    width: 6px;
}

.trading-hub-log-content::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.trading-hub-log-content::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.trading-hub-log-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.trade-log-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    font-size: 11px;
    border-bottom: 1px solid var(--border);
}

.trade-log-item:last-child {
    border-bottom: none;
}

.trade-log-time {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-muted);
    font-size: 10px;
    min-width: 50px;
}

.trade-log-symbol {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    min-width: 60px;
}

.trade-log-side {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    min-width: 35px;
    text-align: center;
}

.trade-log-side.buy {
    background: rgba(16, 185, 129, 0.2);
    color: var(--accent-green);
}

.trade-log-side.sell {
    background: rgba(239, 68, 68, 0.2);
    color: var(--accent-red);
}

.trade-log-qty {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
}

.trade-log-price {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    margin-left: auto;
}

.trading-hub-close-btn {
    position: fixed;
    top: 24px;
    right: 24px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    z-index: 10001;
    transition: all 0.2s;
}

.trading-hub-close-btn:hover {
    background: var(--accent-red);
    color: white;
    border-color: var(--accent-red);
}

.panel-maximized .chart-container {
    height: calc(100vh - 200px) !important;
}

.maximize-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9998;
}

.maximize-overlay.active {
    display: block;
}

/* Flash Quote Board */
.quote-board-section {
    padding: 0 16px;
    margin-bottom: 16px;
}

.quote-board {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 1fr;
    gap: 8px;
}

.quote-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    height: 110px;
}

.quote-card:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
}

.quote-card.selected {
    border-color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.1);
}

.quote-card.flash-green {
    animation: flashQuoteGreen 0.5s ease;
}

.quote-card.flash-red {
    animation: flashQuoteRed 0.5s ease;
}

@keyframes flashQuoteGreen {

    0%,
    100% {
        background: var(--bg-card);
    }

    50% {
        background: rgba(16, 185, 129, 0.3);
    }
}

@keyframes flashQuoteRed {

    0%,
    100% {
        background: var(--bg-card);
    }

    50% {
        background: rgba(239, 68, 68, 0.3);
    }
}

.quote-symbol {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
}

.quote-country {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 9px;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    line-height: 1.4;
    height: 16px;
}

.quote-country-flag {
    font-size: 10px;
    line-height: 1;
}

.quote-country-code {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--text-secondary);
}

.quote-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 600;
}

.quote-change {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
}

.quote-volume {
    font-size: 9px;
    color: var(--text-muted);
}

.qq-quick-amt {
    flex: 1;
    padding: 4px 0;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.qq-quick-amt:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

/* Drag pill — hidden on desktop, shown on mobile */
.qq-sheet-pill {
    display: none;
}

/* Quick Quote Modal */
.quick-quote-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.quick-quote-modal-overlay.active {
    display: flex;
}

.quick-quote-modal {
    background: var(--bg-secondary);
    border-radius: 12px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

.quick-quote-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
}

.quick-quote-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.quick-quote-symbol {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.quick-quote-name {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 400;
}

.quick-quote-price-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.quick-quote-current-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 600;
}

.quick-quote-change {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
}

.quick-quote-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 28px;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
}

.quick-quote-close:hover {
    color: var(--text-primary);
}

.quick-quote-body {
    display: grid;
    grid-template-columns: 1fr 260px;
    flex: 1;
    overflow: hidden;
}

.quick-quote-chart-area {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.quick-quote-chart {
    flex: 1;
    background: var(--bg-card);
    border-radius: 8px;
    position: relative;
    min-height: 280px;
}

.quick-quote-chart canvas {
    width: 100%;
    height: 100%;
}

.quick-quote-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.quick-stat {
    background: var(--bg-card);
    padding: 12px;
    border-radius: 8px;
    text-align: center;
}

.quick-stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.quick-stat-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 4px;
    font-weight: 400;
}

.quick-quote-trade-panel {
    background: var(--bg-card);
    border-left: 1px solid var(--border);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 260px;
    min-width: 260px;
    max-width: 260px;
}

.quick-trade-type-toggle {
    display: flex;
    gap: 6px;
}

/* Hidden on desktop, shown on mobile */
.qq-trade-icon-circle {
    display: none;
}

.qq-market-depth {
    display: none;
}

.qq-extra-stats {
    display: none;
}

.qq-symbol-dropdown .dropdown-arrow {
    display: none;
}

.qq-symbol-list {
    display: none;
}

.qq-symbol-dot {
    display: none;
}

.qq-alert-btn {
    display: none;
}

.quick-trade-type-btn {
    flex: 1;
    padding: 10px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-trade-type-btn.buy {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-green);
}

.quick-trade-type-btn.buy.active {
    background: var(--accent-green);
    color: white;
}

.quick-trade-type-btn.sell {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
}

.quick-trade-type-btn.sell.active {
    background: var(--accent-red);
    color: white;
}

.quick-trade-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quick-trade-input-group label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 500;
}

.quick-trade-input {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    width: 100%;
    box-sizing: border-box;
}

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

.quick-trade-input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

/* Quick Quote Crosshair and Tooltip */
.qq-crosshair {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.qq-crosshair-v,
.qq-crosshair-h {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
}

.qq-crosshair-v {
    width: 1px;
    top: 0;
    bottom: 0;
}

.qq-crosshair-h {
    height: 1px;
    left: 0;
    right: 0;
}

.qq-tooltip {
    display: none;
    position: absolute;
    background: rgba(17, 24, 39, 0.95);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    pointer-events: none;
    z-index: 100;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.qq-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.qq-tooltip-row:last-child {
    margin-bottom: 0;
}

.qq-tooltip-label {
    color: var(--text-muted);
}

.qq-tooltip-value {
    font-weight: 500;
}

.qq-tooltip-value.up {
    color: var(--accent-green);
}

.qq-tooltip-value.down {
    color: var(--accent-red);
}

/* Hub Chart Crosshair and Tooltip */
.hub-crosshair {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.hub-crosshair-v,
.hub-crosshair-h {
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
}

.hub-crosshair-v {
    width: 1px;
    top: 0;
    bottom: 0;
}

.hub-crosshair-h {
    height: 1px;
    left: 0;
    right: 0;
}

.hub-tooltip {
    display: none;
    position: absolute;
    background: rgba(13, 17, 23, 0.95);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    pointer-events: none;
    z-index: 100;
    min-width: 170px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.hub-tooltip.visible {
    display: block;
}

.hub-tooltip-date {
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.hub-tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.hub-tooltip-row:last-child {
    margin-bottom: 0;
}

.hub-tooltip-label {
    color: var(--text-muted);
}

.hub-tooltip-value {
    font-weight: 600;
}

.hub-tooltip-value.up {
    color: var(--accent-green);
}

.hub-tooltip-value.down {
    color: var(--accent-red);
}

.quick-quote-chart {
    position: relative;
}

.quick-trade-summary {
    background: var(--bg-tertiary);
    border-radius: 6px;
    padding: 12px;
}

.quick-trade-summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.quick-trade-summary-row:last-child {
    margin-bottom: 0;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-weight: 600;
}

.quick-trade-execute {
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.quick-trade-execute.buy {
    background: var(--accent-green);
    color: white;
}

.quick-trade-execute.sell {
    background: var(--accent-red);
    color: white;
}

.quick-trade-execute:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Quick Quote Chart Toolbar */
.qq-chart-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-card);
    border-radius: 8px;
    gap: 12px;
    flex-wrap: wrap;
}

.qq-timeframe-selector {
    display: flex;
    gap: 4px;
}

.qq-tf-btn {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.qq-tf-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.qq-tf-btn.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

.qq-indicator-toggle {
    display: flex;
    gap: 6px;
}

.qq-indicator-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 600;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.qq-indicator-btn:hover {
    background: var(--bg-secondary);
}

.qq-indicator-btn.active {
    background: var(--bg-secondary);
    border-color: var(--accent-blue);
    color: var(--text-primary);
}

.indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.indicator-dot.sma {
    background: #f59e0b;
}

.indicator-dot.ema {
    background: #8b5cf6;
}

.indicator-dot.bollinger {
    background: #3b82f6;
}

.qq-chart-type-toggle {
    display: flex;
    gap: 4px;
}

.qq-chart-type-btn {
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qq-chart-type-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.qq-chart-type-btn.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

/* Open Positions in Modal */
.qq-open-positions {
    display: none;
}

.qq-open-positions.has-positions {
    display: block;
    background: var(--bg-card);
    border-radius: 8px;
    padding: 12px;
}

.qq-positions-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 8px;
}

.qq-position-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin-bottom: 6px;
}

.qq-position-row:last-child {
    margin-bottom: 0;
}

.qq-position-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qq-position-side {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 3px;
}

.qq-position-side.buy {
    background: rgba(16, 185, 129, 0.2);
    color: var(--accent-green);
}

.qq-position-side.sell {
    background: rgba(239, 68, 68, 0.2);
    color: var(--accent-red);
}

.qq-position-details {
    font-size: 12px;
}

.qq-position-qty {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
}

.qq-position-entry {
    font-size: 11px;
    color: var(--text-muted);
}

.qq-position-pnl {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 13px;
}

.qq-position-pnl.profit {
    color: var(--accent-green);
}

.qq-position-pnl.loss {
    color: var(--accent-red);
}

/* SL/TP Section in Modal */
.qq-sltp-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.qq-sltp-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.qq-sltp-group .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.qq-sltp-group .dot.sl {
    background: var(--accent-red);
}

.qq-sltp-group .dot.tp {
    background: var(--accent-green);
}

/* Trade Annotations on Chart */
.qq-trade-annotations {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.qq-trade-annotation {
    position: absolute;
    right: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

.qq-trade-annotation.entry {
    background: rgba(59, 130, 246, 0.9);
    color: white;
}

.qq-trade-annotation.sl {
    background: rgba(239, 68, 68, 0.9);
    color: white;
}

.qq-trade-annotation.tp {
    background: rgba(16, 185, 129, 0.9);
    color: white;
}

/* Price Animation */
.qq-price-flash {
    animation: priceFlash 0.5s ease;
}

@keyframes priceFlash {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.qq-price-up {
    animation: priceUp 0.3s ease;
}

.qq-price-down {
    animation: priceDown 0.3s ease;
}

@keyframes priceUp {
    0% {
        background: transparent;
    }

    50% {
        background: rgba(16, 185, 129, 0.3);
    }

    100% {
        background: transparent;
    }
}

@keyframes priceDown {
    0% {
        background: transparent;
    }

    50% {
        background: rgba(239, 68, 68, 0.3);
    }

    100% {
        background: transparent;
    }
}

@media (max-width: 900px) {
    .quick-quote-body {
        grid-template-columns: 1fr;
    }

    .quick-quote-trade-panel {
        border-left: none;
        border-top: 1px solid var(--border);
    }

    .qq-chart-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Mobile sticky trade bar + bottom sheet - hidden on desktop */
.qq-mobile-trade-bar,
.qq-mobile-trade-form,
.qq-mobile-trade-overlay {
    display: none;
}

@media (max-width: 768px) {
    .qq-mobile-trade-bar {
        display: none;
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        background: var(--bg-card);
        border-top: 1px solid var(--border);
        z-index: 20;
    }

    .qq-mobile-trade-btn {
        width: 100%;
        padding: 16px;
        font-size: 16px;
        font-weight: 700;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        color: white;
        transition: opacity 0.2s;
    }

    .qq-mobile-trade-btn.buy {
        background: #10b981;
    }

    .qq-mobile-trade-btn.sell {
        background: #ef4444;
    }

    .qq-mobile-trade-btn:active {
        opacity: 0.85;
    }

    .qq-mobile-trade-price {
        font-family: 'JetBrains Mono', monospace;
        font-size: 14px;
        opacity: 0.9;
    }

    /* Mobile trade form overlay */
    .qq-mobile-trade-form {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-card);
        border-top: 1px solid var(--border);
        border-radius: 16px 16px 0 0;
        padding: 20px 16px;
        padding-bottom: max(20px, env(safe-area-inset-bottom));
        z-index: 10004;
        box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);
        max-height: 75vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .qq-mobile-trade-form.active {
        display: block;
        animation: slideUp 0.3s ease;
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

    .qq-mobile-trade-form-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
    }

    .qq-mobile-trade-form-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .qq-mobile-trade-form-close {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 24px;
        cursor: pointer;
        padding: 4px;
    }

    .qq-mobile-trade-form .quick-trade-input-group,
    .qq-mobile-trade-form .qq-sltp-section,
    .qq-mobile-trade-form .quick-trade-summary,
    .qq-mobile-trade-form .quick-trade-execute {
        display: flex;
        justify-content: center;
    }

    .qq-mobile-trade-form .qq-sltp-section {
        display: grid;
    }

    .qq-mobile-trade-form .quick-trade-input-group {
        flex-direction: column;
        gap: 6px;
        margin-bottom: 12px;
    }

    .qq-mobile-trade-form .quick-trade-input {
        padding: 14px 12px;
        font-size: 16px;
        border-radius: 10px;
    }

    .qq-mobile-trade-form .quick-trade-summary {
        margin: 12px 0;
        border-radius: 10px;
        padding: 14px;
        flex-direction: column;
    }

    .qq-mobile-trade-form .quick-trade-execute {
        padding: 16px;
        font-size: 16px;
        border-radius: 10px;
        margin-top: 8px;
    }

    /* Overlay behind mobile trade form */
    .qq-mobile-trade-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10003;
    }

    .qq-mobile-trade-overlay.active {
        display: block;
    }
}

/* Multi-Chart Dashboard Modal */
.multi-chart-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    padding: 20px;
}

.multi-chart-modal-overlay.active {
    display: flex;
    flex-direction: column;
}

.multi-chart-modal {
    background: var(--bg-secondary);
    border-radius: 12px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.multi-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.multi-chart-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.multi-chart-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mc-add-chart-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--accent-blue);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mc-add-chart-btn:hover {
    background: #2563eb;
}

.multi-chart-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 28px;
    cursor: pointer;
    padding: 0 8px;
    line-height: 1;
}

.multi-chart-close:hover {
    color: var(--text-primary);
}

.multi-chart-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    padding: 8px;
    overflow: hidden;
}

.multi-chart-grid.single {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.multi-chart-grid.double {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
}

.multi-chart-grid.triple {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.mc-chart-panel {
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: border-color 0.2s;
}

.mc-chart-panel:hover {
    border-color: var(--border-light);
}

.mc-chart-panel.empty {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mc-empty-placeholder {
    text-align: center;
    color: var(--text-muted);
}

.mc-empty-placeholder svg {
    margin-bottom: 8px;
    opacity: 0.5;
}

.mc-empty-placeholder span {
    font-size: 12px;
}

.mc-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.mc-panel-symbol {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mc-panel-symbol-name {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 13px;
}

.mc-panel-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

.mc-panel-price.up {
    color: var(--accent-green);
}

.mc-panel-price.down {
    color: var(--accent-red);
}

.mc-panel-actions {
    display: flex;
    gap: 6px;
}

.mc-panel-btn {
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    border: none;
    cursor: pointer;
}

.mc-panel-btn.trade {
    background: var(--accent-blue);
    color: white;
}

.mc-panel-btn.close {
    background: var(--bg-tertiary);
    color: var(--text-muted);
}

.mc-panel-btn:hover {
    opacity: 0.8;
}

.mc-panel-chart {
    flex: 1;
    position: relative;
    min-height: 120px;
}

.mc-panel-chart canvas {
    width: 100%;
    height: 100%;
}

.mc-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16px;
    height: 16px;
    cursor: se-resize;
    opacity: 0.3;
    transition: opacity 0.2s;
}

.mc-resize-handle:hover {
    opacity: 0.7;
}

.mc-resize-handle svg {
    width: 100%;
    height: 100%;
}

/* Tea Selector for Multi-Chart */
.mc-tea-selector {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    width: 280px;
    max-height: 300px;
    z-index: 100;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.mc-tea-selector-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.mc-tea-selector-list {
    max-height: 220px;
    overflow-y: auto;
}

.mc-tea-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.mc-tea-option:hover {
    background: var(--bg-tertiary);
}

.mc-tea-option-symbol {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
}

.mc-tea-option-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

@media (max-width: 768px) {
    .multi-chart-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

.studies-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.chart-canvas {
    width: 100%;
    height: 100%;
    cursor: crosshair;
}

.chart-tooltip {
    position: absolute;
    background: rgba(17, 24, 39, 0.95);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 11px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 10;
    min-width: 160px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.chart-tooltip.visible {
    opacity: 1;
}

.tooltip-date {
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.tooltip-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 0;
}

.tooltip-label {
    color: var(--text-muted);
}

.tooltip-value {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
}

.tooltip-value.up {
    color: var(--accent-green);
}

.tooltip-value.down {
    color: var(--accent-red);
}

.chart-crosshair {
    position: absolute;
    pointer-events: none;
    display: none;
}

.crosshair-v {
    position: absolute;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
    top: 0;
    bottom: 0;
}

.crosshair-h {
    position: absolute;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    left: 0;
    right: 0;
}

/* Auction Data Grid */
.auction-section {
    flex: 1;
    padding: 20px;
    overflow: auto;
    display: flex;
    flex-direction: column;
}

.auction-section .table-container {
    flex: 1;
}

/* Order History Section */
.order-history-section {
    padding: 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
}

.order-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.order-history-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.order-count {
    background: var(--accent-blue);
    color: white;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.order-filter-buttons {
    display: flex;
    gap: 8px;
}

.order-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.order-table-wrapper {
    max-height: 400px;
    overflow-y: auto;
}

.order-table-wrapper::-webkit-scrollbar {
    width: 6px;
}

.order-table-wrapper::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.order-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.order-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.pairs-table-wrapper {
    max-height: 1145px;
    overflow-y: auto;
}

.pairs-table-wrapper::-webkit-scrollbar {
    width: 6px;
}

.pairs-table-wrapper::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.pairs-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.pairs-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.auction-table-wrapper {
    max-height: 780px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-tertiary);
}

.auction-table-wrapper::-webkit-scrollbar {
    width: 6px;
}

.auction-table-wrapper::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.auction-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.auction-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.order-table th {
    text-align: left;
    padding: 8px 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    z-index: 1;
}

.order-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.order-table th.sortable:hover {
    color: var(--text-primary);
}

.order-table th.sortable::after {
    content: '';
    display: inline-block;
    margin-left: 4px;
    opacity: 0.3;
}

.order-table th.sortable.asc::after {
    content: '\25B2';
    opacity: 1;
    color: var(--accent-blue);
}

.order-table th.sortable.desc::after {
    content: '\25BC';
    opacity: 1;
    color: var(--accent-blue);
}

/* Sortable data-table headers */
.data-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.data-table th.sortable:hover {
    color: var(--text-primary);
}

.data-table th.sortable::after {
    content: '';
    display: inline-block;
    margin-left: 4px;
    opacity: 0.3;
}

.data-table th.sortable.asc::after {
    content: '\25B2';
    opacity: 1;
    color: var(--accent-blue);
}

.data-table th.sortable.desc::after {
    content: '\25BC';
    opacity: 1;
    color: var(--accent-blue);
}

.order-table tfoot td {
    padding: 0;
    position: sticky;
    bottom: 0;
    z-index: 1;
}

.orders-summary-cell {
    padding: 0 !important;
}

.orders-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(4px);
    gap: 16px;
}

.orders-summary-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.orders-summary-stats {
    display: flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
}

.orders-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 16px;
    gap: 1px;
}

.orders-summary-stat-label {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.orders-summary-stat-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.orders-summary-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
    flex-shrink: 0;
}

.order-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.order-table tr:hover {
    background: var(--bg-card);
}

.order-table tr:last-child td {
    border-bottom: none;
}

.order-table .order-price {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

.order-table td.up {
    color: var(--accent-green);
    font-weight: 600;
}

.order-table td.down {
    color: var(--accent-red);
    font-weight: 600;
}

.order-table .order-qty {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
}

.order-status {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
}

.order-status.filled {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-green);
}

.order-status.pending {
    background: rgba(251, 191, 36, 0.15);
    color: var(--accent-orange);
}

.order-status.closed {
    background: rgba(96, 165, 250, 0.15);
    color: var(--accent-blue);
}

.close-position-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    background: rgba(255, 107, 107, 0.15);
    color: var(--accent-red);
    transition: all 0.2s ease;
}

.close-position-btn:hover {
    background: var(--accent-red);
    color: white;
}

.close-position-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.order-status.filled {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-green);
}

.order-status.pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-orange);
}

.order-status.partial {
    background: rgba(26, 115, 232, 0.15);
    color: var(--accent-blue);
}

.order-side {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
}

.order-side.buy-side {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-green);
}

.order-side.sell-side {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-filters {
    display: flex;
    gap: 8px;
}

.filter-btn {
    padding: 5px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
}

.filter-btn.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

/* Market Toggle (Singles/Pairs) */
.market-toggle {
    display: flex;
    gap: 0;
    margin-right: 16px;
}

.toggle-btn {
    padding: 5px 14px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-btn:first-child {
    border-radius: 4px 0 0 4px;
    border-right: none;
}

.toggle-btn:last-child {
    border-radius: 0 4px 4px 0;
}

.toggle-btn.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

.toggle-btn:hover:not(.active) {
    background: var(--bg-tertiary);
}

/* Pairs table styles */
.pair-symbol {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pair-symbol .base {
    color: var(--accent-green);
}

.pair-symbol .quote {
    color: var(--accent-red);
}

.index-badge {
    font-size: 8px;
    font-weight: 700;
    background: var(--accent-purple);
    color: white;
    padding: 2px 4px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.index-pair-row {
    background: rgba(147, 51, 234, 0.05);
}

.index-pair-row:hover td {
    background: rgba(147, 51, 234, 0.1) !important;
}

/* Pairs table price cells - no flex, simple display */
.pairs-price {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.pairs-price.flash-up {
    animation: flashGreen 1s ease;
}

.pairs-price.flash-down {
    animation: flashRed 1s ease;
}

.pair-ratio {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 14px;
    color: var(--accent-blue);
}

.trade-pair-btn {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.trade-pair-btn.long {
    background: var(--accent-green);
    color: white;
}

.trade-pair-btn.short {
    background: var(--accent-red);
    color: white;
    margin-left: 6px;
}

.trade-pair-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* Pairs Modal */
.pairs-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.pairs-modal-overlay.active {
    display: flex;
}

.pairs-modal {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    width: 420px;
    max-width: 95%;
}

.pairs-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.pairs-modal-title {
    font-size: 18px;
    font-weight: 600;
}

.pairs-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
}

.pairs-modal-pair {
    text-align: center;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 20px;
}

.pairs-modal-pair .pair-display {
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
}

.pairs-modal-pair .ratio-display {
    font-family: 'JetBrains Mono', monospace;
    font-size: 20px;
    color: var(--accent-blue);
}

.side-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.side-btn {
    flex: 1;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.side-btn.long.active {
    background: var(--accent-green);
    border-color: var(--accent-green);
    color: white;
}

.side-btn.short.active {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: white;
}

.side-btn:hover:not(.active) {
    background: var(--bg-tertiary);
}

.leverage-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.leverage-btn {
    flex: 1;
    padding: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.leverage-btn.active {
    background: var(--accent-purple);
    border-color: var(--accent-purple);
    color: white;
}

.leverage-btn:hover:not(.active) {
    background: var(--bg-tertiary);
}

.pairs-input-group {
    margin-bottom: 16px;
}

.pairs-input-group label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.pairs-input-group input {
    width: 100%;
    padding: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
}

.pairs-summary {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
}

.pairs-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
}

.pairs-summary-row .label {
    color: var(--text-muted);
}

.pairs-summary-row .value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

.pairs-summary-row.exposure .value {
    color: var(--accent-orange);
}

.pairs-modal-actions {
    display: flex;
    gap: 12px;
}

.pairs-modal-actions button {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.pairs-modal-actions .cancel-btn {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.pairs-modal-actions .confirm-btn {
    color: white;
    background: var(--accent-blue);
}

.pairs-modal-actions .confirm-btn.long {
    background: var(--accent-green);
}

.pairs-modal-actions .confirm-btn.short {
    background: var(--accent-red);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table th {
    text-align: left;
    padding: 10px 12px;
    background: var(--bg-secondary);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
    vertical-align: middle;
}

.data-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    line-height: 1.4;
}

.data-table tr:hover td {
    background: var(--bg-tertiary);
}

.grade-badge {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    padding: 3px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    display: inline-block;
}

.auction-center {
    color: var(--accent-blue);
    font-weight: 500;
}

.price-cell {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

.price-cell .price-alert-btn {
    opacity: 0.4;
    transition: opacity 0.2s;
}

.price-cell:hover .price-alert-btn {
    opacity: 1;
}

.price-cell .price-alert-btn.has-alert {
    opacity: 1;
    color: var(--accent-orange);
}

.price-cell.up {
    color: var(--accent-green);
}

.price-cell.down {
    color: var(--accent-red);
}

.price-cell.flash-up {
    animation: flashGreen 1s ease;
}

.price-cell.flash-down {
    animation: flashRed 1s ease;
}

@keyframes flashGreen {
    0% {
        background: rgba(0, 212, 170, 0.5);
    }

    100% {
        background: transparent;
    }
}

@keyframes flashRed {
    0% {
        background: rgba(255, 107, 107, 0.5);
    }

    100% {
        background: transparent;
    }
}

.volume-bar {
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.volume-fill {
    height: 100%;
    background: var(--accent-blue);
    border-radius: 2px;
}

/* Right Panel */
.right-panel {
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: start;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 320px;
}

.right-panel::-webkit-scrollbar {
    width: 3px;
}

.right-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

/* Right-panel info sections (Leaderboard, Top Buyers) */
.rp-section {
    padding: 14px 16px;
    border-top: 1px solid var(--border);
}

.rp-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.rp-section-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    font-weight: 600;
}

.rp-section-date {
    font-size: 10px;
    color: var(--accent-orange);
    font-weight: 600;
}

.rp-lb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.rp-lb-item:hover {
    background: var(--bg-hover);
}

.rp-lb-rank {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.rp-lb-rank.gold {
    background: rgba(245, 158, 11, 0.13);
    color: #f59e0b;
}

.rp-lb-rank.silver {
    background: rgba(148, 163, 184, 0.13);
    color: #94a3b8;
}

.rp-lb-rank.bronze {
    background: rgba(217, 118, 68, 0.13);
    color: #d97644;
}

.rp-lb-name {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-lb-val {
    font-size: 11px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-secondary);
}

.panel-section {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.panel-section:last-child {
    flex: 1;
    border-bottom: none;
}

.panel-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 12px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.live-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--accent-green);
    font-size: 10px;
}

.live-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent-green);
    border-radius: 50%;
    animation: pulse 1s infinite;
}

.news-feed {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-tertiary);
}

.news-feed::-webkit-scrollbar {
    width: 6px;
}

.news-feed::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.news-feed::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.news-feed::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.news-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.news-item:last-child {
    border-bottom: none;
}

.news-time {
    font-size: 10px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.news-headline {
    font-size: 13px;
    line-height: 1.4;
    margin-top: 4px;
}

.news-tag {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    margin-right: 6px;
}

.news-tag {
    background: var(--accent-blue);
    color: white;
}

/* Order Book / Depth of Market */
.order-book-section {
    position: relative;
    overflow: hidden;
}

.order-book-container {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    display: flex;
    flex-direction: column;
}

.ob-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 6px 10px;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: background 0.15s;
    overflow: hidden;
}

.ob-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.ob-row>span {
    position: relative;
    z-index: 2;
}

.ob-header {
    color: var(--text-muted);
    font-size: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
    cursor: default;
}

.ob-header:hover {
    background: transparent;
}

.ob-price-up {
    color: var(--accent-green);
    font-weight: 500;
}

.ob-price-down {
    color: var(--accent-red);
    font-weight: 500;
}

.depth-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    opacity: 0.3;
    pointer-events: none;
}

.ask-bar {
    background-color: var(--accent-red);
}

.bid-bar {
    background-color: var(--accent-green);
}

.ob-spread {
    text-align: center;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin: 4px 0;
    background: rgba(255, 255, 255, 0.02);
}

.ob-spread-label {
    font-size: 10px;
    color: var(--text-muted);
}

.ob-spread-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 2px;
}

.ob-blur-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 55%;
    background: linear-gradient(to bottom, rgba(10, 14, 23, 0) 0%, rgba(10, 14, 23, 0.9) 35%, rgba(10, 14, 23, 1) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
    z-index: 10;
    pointer-events: none;
}

.ob-lock-content {
    text-align: center;
    pointer-events: auto;
}

.ob-lock-icon {
    width: 32px;
    height: 32px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    color: var(--text-muted);
}

.ob-lock-icon svg {
    width: 14px;
    height: 14px;
}

.ob-lock-content h4 {
    color: var(--text-primary);
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
}

.ob-lock-content p {
    color: var(--text-muted);
    font-size: 11px;
    margin: 0 0 12px;
    max-width: 200px;
}

.ob-btn-access {
    background: var(--accent-blue);
    border: none;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s;
}

.ob-btn-access:hover {
    background: #1557b0;
}

/* Top Movers */
/* =============================================
   GROWING REGIONS WEATHER CARDS
   ============================================= */
.weather-cards {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ── Temp-level accent colour tokens ── */
.weather-card[data-temp-level="cold"] {
    --wc-accent: #3b82f6;
    --wc-glow: rgba(59, 130, 246, 0.15);
}

.weather-card[data-temp-level="mild"] {
    --wc-accent: #0d9488;
    --wc-glow: rgba(13, 148, 136, 0.15);
}

.weather-card[data-temp-level="warm"] {
    --wc-accent: #10b981;
    --wc-glow: rgba(16, 185, 129, 0.15);
}

.weather-card[data-temp-level="hot"] {
    --wc-accent: #f59e0b;
    --wc-glow: rgba(245, 158, 11, 0.15);
}

.weather-card[data-temp-level="vhot"] {
    --wc-accent: #ef4444;
    --wc-glow: rgba(239, 68, 68, 0.15);
}

.weather-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 8px;
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--wc-accent, var(--border-light));
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.12s;
    position: relative;
    overflow: hidden;
}

.weather-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--wc-glow, transparent);
    opacity: 0;
    transition: opacity 0.18s;
    pointer-events: none;
}

.weather-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--wc-accent, var(--border-light));
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), 0 0 0 1px var(--wc-accent, transparent);
    transform: translateX(2px);
}

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

.weather-card.weather-skeleton {
    opacity: 0.4;
    pointer-events: none;
}

.weather-card.weather-error {
    border-left-color: var(--accent-red);
    cursor: pointer;
}

.weather-card.weather-error:hover {
    border-color: var(--accent-red);
    transform: translateX(2px);
}

.weather-retry-label {
    color: var(--accent-red) !important;
    font-size: 9px;
}

.wc-retry-icon {
    color: var(--accent-red);
    font-size: 16px;
    font-weight: 700;
}

.wc-flag {
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0;
}

.wc-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wc-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wc-label {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}

.wc-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.wc-icon-temp {
    display: flex;
    align-items: center;
    gap: 4px;
}

.wc-icon {
    font-size: 14px;
    line-height: 1;
}

.wc-temp {
    font-size: 14px;
    font-weight: 700;
    color: var(--wc-accent, var(--text-primary));
    letter-spacing: -0.3px;
    min-width: 28px;
    text-align: right;
}

.wc-humidity-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.hbar {
    display: flex;
    gap: 1.5px;
    align-items: center;
}

.hbar-seg {
    width: 3px;
    height: 5px;
    border-radius: 1px;
    background: var(--border-light);
    transition: background 0.3s;
}

.hbar-seg.hbar-filled {
    background: var(--wc-accent, var(--accent-blue));
}

.wc-hpct {
    font-size: 10px;
    color: var(--text-muted);
    min-width: 26px;
    text-align: right;
}

/* =============================================
   WEATHER DETAIL POPOUT
   ============================================= */
.weather-popout {
    position: fixed;
    z-index: 20000;
    width: 300px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-top: 3px solid var(--wc-accent, var(--accent-blue));
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.04);
    padding: 16px;
    animation: wp-slide-in 0.18s ease;
    overflow: hidden;
}

/* Temp-level accent for popout */
.weather-popout[data-temp-level="cold"] {
    --wc-accent: #3b82f6;
}

.weather-popout[data-temp-level="mild"] {
    --wc-accent: #0d9488;
}

.weather-popout[data-temp-level="warm"] {
    --wc-accent: #10b981;
}

.weather-popout[data-temp-level="hot"] {
    --wc-accent: #f59e0b;
}

.weather-popout[data-temp-level="vhot"] {
    --wc-accent: #ef4444;
}

@keyframes wp-slide-in {
    from {
        opacity: 0;
        transform: translateX(-6px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.wp-close-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.wp-close-btn:hover {
    background: var(--border);
    color: var(--text-primary);
}

.wp-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.wp-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.wp-flag {
    font-size: 22px;
    line-height: 1;
}

.wp-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.wp-country {
    font-size: 11px;
    color: var(--text-muted);
}

.wp-main-weather {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.wp-big-icon {
    font-size: 40px;
    line-height: 1;
}

.wp-main-temps {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wp-main-temp {
    font-size: 32px;
    font-weight: 800;
    color: var(--wc-accent, var(--text-primary));
    letter-spacing: -1px;
    line-height: 1;
}

.wp-feels {
    font-size: 11px;
    color: var(--text-muted);
}

.wp-condition {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Metric grid */
.wp-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.wp-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 6px 6px;
    gap: 2px;
    text-align: center;
}

.wp-metric-icon {
    font-size: 14px;
    line-height: 1;
    margin-bottom: 2px;
}

.wp-metric-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.wp-metric-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
}

/* UV index colour classes */
.uv-low {
    color: #10b981;
}

.uv-mod {
    color: #f59e0b;
}

.uv-high {
    color: #f97316;
}

.uv-vhigh {
    color: #ef4444;
}

.uv-extreme {
    color: #8b5cf6;
}

/* Wind dial */
.wp-wind-visual {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
}

.wp-wind-dial {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    background: var(--bg-primary);
    flex-shrink: 0;
}

.wp-wind-needle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 22px;
    background: var(--wc-accent, var(--accent-blue));
    border-radius: 2px;
    transform-origin: bottom center;
    transform: translateX(-50%) translateY(-100%) rotate(var(--wind-dir, 0deg));
    box-shadow: 0 0 6px var(--wc-accent, var(--accent-blue));
}

.wp-compass-label {
    position: absolute;
    font-size: 8px;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
}

.wp-N {
    top: 3px;
    left: 50%;
    transform: translateX(-50%);
}

.wp-S {
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
}

.wp-E {
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
}

.wp-W {
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
}

.wp-wind-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wp-wind-stat {
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

.wp-wind-stat-label {
    font-size: 10px;
    color: var(--text-muted);
}

.wp-wind-stat-val {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-primary);
}

/* 7-day forecast */
.wp-forecast {
    margin-bottom: 10px;
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.wp-section-title {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.wp-fc-row {
    display: grid;
    grid-template-columns: 32px 18px 24px 1fr 24px 28px;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.wp-fc-row:last-child {
    border-bottom: none;
}

.wp-fc-today .wp-fc-day {
    color: var(--wc-accent, var(--accent-blue));
    font-weight: 700;
}

.wp-fc-day {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
}

.wp-fc-icon {
    font-size: 13px;
    text-align: center;
}

.wp-fc-lo {
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
}

.wp-fc-bar-track {
    position: relative;
    height: 4px;
    background: var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.wp-fc-bar {
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--wc-accent, var(--accent-blue));
    border-radius: 3px;
    opacity: 0.75;
}

.wp-fc-hi {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-primary);
}

.wp-fc-rain {
    font-size: 9px;
    color: #60a5fa;
    text-align: right;
    white-space: nowrap;
}

.wp-footer {
    font-size: 9px;
    color: var(--text-muted);
    text-align: center;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

/* =============================================
   MACRO INDICATOR CLICKABLE ROWS
   ============================================= */
.macro-clickable {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    border-radius: 6px;
    position: relative;
}

.macro-clickable:hover {
    background: var(--bg-tertiary);
}

.macro-clickable:hover .macro-name {
    color: var(--accent-blue);
}

/* =============================================
   MACRO DETAIL POPOUT
   ============================================= */
.macro-popout {
    position: fixed;
    z-index: 20000;
    width: 320px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-light);
    border-top: 3px solid var(--accent-blue);
    border-radius: 12px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
    padding: 16px;
    animation: mp-slide-in 0.18s ease;
    overflow: hidden;
}

@keyframes mp-slide-in {
    from {
        opacity: 0;
        transform: translateX(-6px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.mp-close-btn {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.mp-close-btn:hover {
    background: var(--border);
    color: var(--text-primary);
}

/* Header */
.mp-header {
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.mp-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.mp-flag {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

.mp-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.mp-fullname {
    font-size: 11px;
    color: var(--text-muted);
}

.mp-price-block {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.mp-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    line-height: 1;
}

.mp-price.up {
    color: var(--accent-green);
}

.mp-price.down {
    color: var(--accent-red);
}

.mp-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-card);
    color: var(--text-muted);
}

.mp-badge.up {
    background: rgba(16, 185, 129, 0.12);
    color: var(--accent-green);
}

.mp-badge.down {
    background: rgba(239, 68, 68, 0.12);
    color: var(--accent-red);
}

.mp-badge.neutral {
    background: var(--bg-card);
    color: var(--text-muted);
}

.mp-unit-row {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Bid/Ask metrics row */
.mp-metrics-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-bottom: 14px;
}

.mp-metric-sm {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 6px 4px;
    gap: 2px;
}

.mp-metric-sm-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.mp-metric-sm-val {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Sparkline chart */
.mp-chart-section {
    margin-bottom: 12px;
}

.mp-section-title {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.mp-spark-container {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px 4px;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-spark-loading {
    font-size: 11px;
    color: var(--text-muted);
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

.mp-sparkline {
    display: block;
    overflow: visible;
}

.spark-label {
    font-size: 8px;
    fill: var(--text-muted);
    font-family: inherit;
}

.spark-range-label {
    font-size: 7px;
    fill: var(--text-muted);
    font-family: inherit;
    dominant-baseline: auto;
}

.mp-spark-nodata {
    font-size: 11px;
    color: var(--text-muted);
    padding: 8px 0;
}

/* Insight box */
.mp-insight-box {
    background: rgba(26, 115, 232, 0.06);
    border: 1px solid rgba(26, 115, 232, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
}

.mp-insight-header {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.mp-insight-text {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* Info grid */
.mp-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
}

.mp-info-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 7px 8px;
}

.mp-info-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
}

.mp-info-val {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
}

.mp-corr {}

.corr-pos {
    color: var(--accent-green);
}

.corr-neg {
    color: var(--accent-red);
}

.corr-mod {
    color: var(--accent-orange);
}

/* Trivia */
.mp-trivia {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    background: rgba(139, 92, 246, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.5;
}

.mp-trivia-icon {
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Footer */
.mp-footer {
    font-size: 9px;
    color: var(--text-muted);
    text-align: center;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

.movers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.mover-card {
    background: var(--bg-card);
    border-radius: 6px;
    padding: 12px;
}

.mover-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.mover-name {
    font-weight: 600;
    font-size: 13px;
}

.mover-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    margin-top: 4px;
}

/* Auction Calendar */
.calendar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    border-radius: 6px;
    transition: background 0.2s ease, transform 0.1s ease;
}

.calendar-item:hover {
    background: var(--bg-tertiary);
    cursor: pointer;
}

.calendar-item:active {
    transform: scale(0.99);
}

.calendar-date {
    width: 48px;
    text-align: center;
    padding: 8px;
    background: var(--bg-card);
    border-radius: 6px;
}

.calendar-day {
    font-size: 18px;
    font-weight: 700;
}

.calendar-month {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.calendar-info {
    flex: 1;
}

.calendar-name {
    font-weight: 500;
    font-size: 13px;
}

.calendar-center {
    font-size: 11px;
    color: var(--text-muted);
}

.calendar-status {
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 600;
}

.calendar-status.live {
    background: rgba(16, 185, 129, 0.2);
    color: var(--accent-green);
}

.calendar-status.upcoming {
    background: rgba(26, 115, 232, 0.2);
    color: var(--accent-blue);
}

.calendar-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.calendar-item-body .calendar-info {
    flex: 1;
    min-width: 0;
}

.calendar-item-body .calendar-status {
    flex-shrink: 0;
}

.calendar-progress {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 3px;
    overflow: hidden;
}

.calendar-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent-blue), #6366f1);
    transition: width 0.6s ease;
}

.calendar-item:has(.calendar-status.live) .calendar-progress-fill {
    background: linear-gradient(90deg, var(--accent-green), #34d399);
}

/* Market Summary Cards */
.market-cards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--border);
    border-bottom: 1px solid var(--border);
}

.market-card {
    background: var(--bg-secondary);
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.market-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    transform: translateY(-2px);
}

.market-card:active {
    transform: translateY(0);
}

.market-card.active {
    border-color: var(--accent-primary);
    background: rgba(245, 158, 11, 0.08);
}

.market-card-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.market-card-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    font-weight: 700;
    margin-top: 4px;
}

.market-card-change {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    margin-top: 4px;
}

/* Spark line placeholder */


/* Bottom Stats Bar */
.bottom-bar {
    background: var(--ticker-bg);
    border-top: 1px solid var(--border);
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.bottom-stat {
    display: flex;
    gap: 24px;
}

.bottom-stat span {
    color: var(--text-secondary);
}

.footer-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: inherit;
    transition: color 0.15s;
}

.footer-link:hover {
    color: #fff;
}

/* Responsive */

/* Smaller laptops (1366px-1440px screens) */
@media (max-width: 1440px) {
    .main-grid {
        grid-template-columns: minmax(200px, 240px) 1fr minmax(260px, 300px);
    }

    .sidebar {
        padding: 12px;
    }

    .right-panel {
        padding: 12px;
    }

    .market-cards {
        gap: 8px;
    }

    .market-card {
        padding: 12px;
    }

    .quote-board {
        gap: 6px;
    }

    .quote-card {
        padding: 10px;
    }

    .top-bar {
        padding: 0 12px;
    }

    .nav-links {
        gap: 16px;
        margin-right: 20px;
    }

    .nav-links a {
        font-size: 12px;
    }

    .command-line-container {
        max-width: 280px;
    }

    .command-line-input {
        font-size: 12px;
    }

    .ticker-strip {
        font-size: 11px;
    }
}

/* Small laptops / tablets (1200px-1366px) */
@media (max-width: 1366px) {
    .main-grid {
        grid-template-columns: minmax(180px, 220px) 1fr minmax(240px, 280px);
    }

    .sidebar-title {
        font-size: 10px;
    }

    .watchlist-symbol {
        font-size: 11px;
    }

    .panel-title {
        font-size: 12px;
    }

    .trade-panel {
        padding: 12px;
    }

    .orders-table th,
    .orders-table td {
        padding: 8px 6px;
        font-size: 10px;
    }

    .nav-links {
        gap: 12px;
        margin-right: 16px;
    }

    .command-line-container {
        max-width: 240px;
    }

    .market-card-value {
        font-size: 1.2rem;
    }

    .chart-header {
        padding: 10px;
    }

    .bottom-bar {
        padding: 6px 12px;
        font-size: 10px;
    }
}

/* Hide left sidebar first, keep right panel */
@media (max-width: 1280px) {
    .main-grid {
        grid-template-columns: 1fr minmax(260px, 300px);
    }

    .sidebar {
        display: none;
    }

    /* Show sidebar when mobile menu is active */
    .sidebar.mobile-open {
        display: flex;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: auto;
        width: 280px;
        z-index: 9999;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
        animation: slideInLeft 0.25s ease;
    }

    .mobile-menu-btn {
        display: flex;
        align-items: center;
    }
}

/* Hide both sidebars */
@media (max-width: 1200px) {
    .main-grid {
        grid-template-columns: 1fr;
    }

    .sidebar,
    .right-panel {
        display: none;
    }

    /* Show sidebar when mobile menu is active */
    .sidebar.mobile-open {
        display: flex;
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: auto;
        width: 280px;
        z-index: 9999;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
        animation: slideInLeft 0.25s ease;
    }

    .market-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .quote-board {
        grid-template-columns: repeat(5, 1fr);
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

/* Mobile Menu Hamburger Button */
.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 8px;
    margin-right: 8px;
}

.mobile-menu-btn svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 1200px) {
    .mobile-menu-btn {
        display: flex;
        align-items: center;
    }
}

/* Mobile overlay when sidebar is open */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9998;
}

.mobile-overlay.active {
    display: block;
}

/* Mobile close button for sidebar */
.mobile-sidebar-header {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    margin: -16px -16px 16px -16px;
}

@media (max-width: 1200px) {
    .sidebar.mobile-open .mobile-sidebar-header {
        display: flex;
    }
}

.mobile-close-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
}

/* ── Mobile sidebar tabs (Menu / Account) ── */
.mobile-sidebar-tabs {
    display: flex;
    gap: 0;
    flex: 1;
}

.mobile-sidebar-tab {
    flex: 1;
    padding: 10px 0 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    border-radius: 0;
    outline: none;
}

.mobile-sidebar-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}

.mobile-sidebar-tab:not(.active):hover {
    color: var(--text-secondary);
}

.mobile-tab-panel {
    display: block;
}

@media (min-width: 1201px) {
    .mobile-sidebar-tabs {
        display: none;
    }

    #mobile-panel-account {
        display: none !important;
    }

    #mobile-panel-menu {
        display: block !important;
    }
}

/* Mobile Styles */
@media (max-width: 768px) {

    /* Prevent any overflow */
    html,
    body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100vw;
    }

    /* Hide desktop-only chrome on mobile */
    .market-cards {
        display: none;
    }

    .bottom-bar {
        flex-direction: column;
        gap: 4px;
        padding: 8px 12px;
        font-size: 10px;
        text-align: center;
    }

    .bottom-stat {
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    /* Market Cards - horizontal scroll */
    .market-cards {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
        padding: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .market-cards::-webkit-scrollbar {
        display: none;
    }

    .market-card {
        flex: 0 0 auto;
        min-width: 140px;
        padding: 12px;
    }

    .market-card-label {
        font-size: 9px;
    }

    .market-card-value {
        font-size: 1.1rem;
    }

    .market-card-change {
        font-size: 10px;
    }

    /* Quote board - horizontal scroll */
    .quote-board {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .quote-board::-webkit-scrollbar {
        display: none;
    }

    .quote-card {
        flex: 0 0 auto;
        min-width: 90px;
        padding: 10px;
    }

    .quote-symbol {
        font-size: 11px;
    }

    .quote-price {
        font-size: 13px;
    }

    .quote-change {
        font-size: 10px;
    }

    /* Top Bar */
    .top-bar {
        padding: 0 10px;
        height: 44px;
    }

    .logo-text {
        display: none;
    }

    .nav-links {
        display: none;
    }

    .command-line-container {
        display: none;
    }

    .user-section .market-status span:not(.status-dot) {
        display: none;
    }

    .user-section .market-status {
        gap: 0;
        padding: 0 6px;
    }

    .user-balance {
        flex-direction: row;
        gap: 4px;
        padding: 4px 8px;
        background: var(--bg-tertiary);
        border-radius: 4px;
    }

    .user-balance-label {
        display: none;
    }

    .user-balance-amount {
        font-size: 12px;
    }

    .user-menu {
        gap: 6px;
    }

    .mode-toggle-wrapper {
        padding: 3px 6px;
        gap: 4px;
    }

    .mode-label-text {
        font-size: 8px;
    }

    .mode-switch {
        width: 26px;
        height: 14px;
    }

    .mode-slider::before {
        height: 10px;
        width: 10px;
    }

    .mode-switch input:checked+.mode-slider::before {
        transform: translateX(12px);
    }

    /* Main content - full width */
    .center-content {
        padding: 0;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Chart section */
    .chart-section {
        padding: 12px;
        margin: 0;
        border-radius: 0;
    }

    .chart-header {
        flex-direction: column;
        gap: 10px;
    }

    .chart-title h2 {
        font-size: 1rem;
    }

    .chart-badge {
        font-size: 9px;
        padding: 2px 6px;
    }

    .chart-stats {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    .chart-stat-value {
        font-size: 0.9rem !important;
    }

    .chart-stat-label {
        font-size: 8px;
    }

    .chart-controls {
        display: flex;
        flex-wrap: nowrap;
        gap: 6px;
        width: 100%;
    }

    .chart-btn {
        padding: 5px 8px;
        font-size: 10px;
    }

    .chart-container {
        height: 200px;
    }

    /* Market depth */
    .market-depth {
        padding: 10px;
    }

    /* Auction Section */
    .auction-section {
        padding: 10px;
        overflow-x: hidden;
    }

    .section-header {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }

    .section-title {
        font-size: 11px;
    }

    .section-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .filter-btn,
    .toggle-btn {
        padding: 4px 8px;
        font-size: 10px;
    }

    /* Auction table - horizontal scroll wrapper */
    .auction-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-height: none;
    }

    .data-table {
        min-width: 600px;
    }

    .data-table th,
    .data-table td {
        padding: 8px 6px;
        font-size: 11px;
        white-space: nowrap;
    }

    .grade-badge {
        padding: 2px 4px;
        font-size: 9px;
    }

    /* Order history */
    .order-history-section {
        padding: 10px;
    }

    .order-table-wrapper {
        overflow-x: auto;
    }

    .order-table {
        min-width: 500px;
    }

    /* Login button mobile */
    .login-btn {
        padding: 6px 12px;
        font-size: 11px;
    }

    /* =============================================
       TRADING212-STYLE MOBILE QUICK QUOTE MODAL
       — Native Bottom Sheet
       ============================================= */

    /* Backdrop overlay: always flex on mobile, visibility-driven for transitions */
    .quick-quote-modal-overlay {
        display: flex !important;
        padding: 0;
        align-items: flex-end;
        background: rgba(0, 0, 0, 0);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: background 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    }

    .quick-quote-modal-overlay.active {
        opacity: 1;
        visibility: visible;
        background: rgba(0, 0, 0, 0.6);
        pointer-events: auto;
    }

    /* Bottom sheet panel */
    .quick-quote-modal {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 88vh;
        border-radius: 20px 20px 0 0;
        background: #1a1d23;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
    }

    .quick-quote-modal-overlay.active .quick-quote-modal {
        transform: translateY(0);
    }

    /* Drag pill indicator */
    .qq-sheet-pill {
        display: block !important;
        width: 40px;
        height: 5px;
        border-radius: 3px;
        background: #555;
        margin: 10px auto 6px;
        flex-shrink: 0;
    }

    /* Thumb-friendly touch targets inside the sheet */
    .quick-quote-modal input[type="text"],
    .quick-quote-modal input[type="number"],
    .quick-quote-modal select,
    .quick-quote-modal .quick-trade-input {
        min-height: 44px;
        font-size: 16px;
        padding: 10px 12px;
        border-radius: 10px;
    }

    .quick-quote-modal input[type="range"] {
        min-height: 44px;
        -webkit-appearance: none;
        appearance: none;
    }

    /* Header - Trading212 style: centered pill + icons */
    .quick-quote-header {
        padding: 10px 16px;
        flex-wrap: nowrap;
        gap: 0;
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--bg-card);
        justify-content: center;
        align-items: center;
    }

    /* Price info hidden from header on mobile - shown in buy/sell bar */
    .quick-quote-price-info {
        display: none !important;
    }

    .quick-quote-close {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 22px;
        padding: 4px 8px;
    }

    /* Centered pill dropdown */
    .quick-quote-title {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        flex: unset;
        min-width: unset;
        background: var(--bg-tertiary);
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 6px 14px;
        cursor: pointer;
    }

    .qq-symbol-dropdown .dropdown-arrow {
        display: inline-block !important;
        font-size: 8px;
        color: var(--text-muted);
        margin-left: 2px;
    }

    .quick-quote-symbol {
        font-size: 13px;
        font-weight: 600;
    }

    /* Symbol dot indicator */
    .qq-symbol-dot {
        display: inline-block !important;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent-green);
        flex-shrink: 0;
    }

    .qq-symbol-dot.index {
        background: var(--accent-blue);
    }

    .quick-quote-name {
        display: none;
    }

    /* Price alert button */
    .qq-alert-btn {
        display: flex !important;
        position: absolute;
        right: 48px;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--bg-tertiary);
        border: 1px solid var(--border);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--text-muted);
        transition: all 0.2s;
    }

    .qq-alert-btn:hover {
        background: var(--bg-secondary);
        color: var(--accent-blue);
    }

    .qq-alert-btn svg {
        width: 16px;
        height: 16px;
    }

    /* Body - single column vertical layout */
    .quick-quote-body {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    /* Buy/Sell bar - Trading212 gradient style at top */
    .quick-quote-trade-panel {
        order: -1;
        width: 100%;
        min-width: unset;
        max-width: unset;
        border-left: none;
        border-bottom: 1px solid var(--border);
        padding: 12px 16px;
        gap: 10px;
    }

    /* Buy/Sell toggle - Trading212 style wrapping around center icon */
    .quick-trade-type-toggle {
        display: flex;
        gap: 0;
        background: transparent;
        border-radius: 12px;
        overflow: visible;
        border: none;
        position: relative;
        align-items: center;
        justify-content: center;
    }

    .quick-trade-type-btn {
        border-radius: 0;
        padding: 16px 20px;
        font-size: 15px;
        font-weight: 700;
        flex: 1;
        position: relative;
        z-index: 1;
        border: none;
    }

    .quick-trade-type-btn.buy {
        border-radius: 12px 0 0 12px;
        margin-right: -20px;
        padding-right: 30px;
    }

    .quick-trade-type-btn.sell {
        border-radius: 0 12px 12px 0;
        margin-left: -20px;
        padding-left: 30px;
    }

    .quick-trade-type-btn.buy.active {
        background: #10b981;
    }

    .quick-trade-type-btn.sell.active {
        background: #ef4444;
    }

    .quick-trade-type-btn.buy:not(.active) {
        background: rgba(16, 185, 129, 0.12);
        color: var(--accent-green);
    }

    .quick-trade-type-btn.sell:not(.active) {
        background: rgba(239, 68, 68, 0.12);
        color: var(--accent-red);
    }

    /* Center icon circle between buy/sell - overlaps both buttons */
    .qq-trade-icon-circle {
        display: flex !important;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: var(--bg-card);
        border: 3px solid var(--bg-primary);
        align-items: center;
        justify-content: center;
        z-index: 3;
        flex-shrink: 0;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
        position: relative;
    }

    .qq-trade-icon-circle svg {
        width: 20px;
        height: 20px;
    }

    .qq-trade-icon-circle:not(.index) svg {
        color: var(--accent-green);
        fill: var(--accent-green);
        stroke: none;
    }

    .qq-trade-icon-circle.index svg {
        color: var(--accent-blue);
        fill: none;
        stroke: var(--accent-blue);
    }

    /* Price display within buy/sell bar */
    .qq-mobile-price-bar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 8px;
    }

    /* Hide trade details initially, show below chart */
    .quick-trade-input-group,
    .qq-sltp-section,
    .quick-trade-summary,
    .quick-trade-execute {
        display: none;
    }

    /* Chart area */
    .quick-quote-chart-area {
        padding: 8px 12px;
        gap: 8px;
    }

    .quick-quote-chart {
        min-height: 200px;
        max-height: 220px;
        height: 200px;
    }

    /* Toolbar - single row: timeframe left, chart type right */
    .qq-chart-toolbar {
        padding: 6px 10px;
        gap: 0;
        border-radius: 6px;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        justify-content: space-between;
        align-items: center;
    }

    .qq-timeframe-selector {
        display: flex;
        gap: 2px;
        flex-shrink: 0;
        flex-wrap: nowrap;
    }

    .qq-tf-btn {
        padding: 5px 9px;
        font-size: 10px;
        border-radius: 6px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Hide indicators on mobile */
    .qq-indicator-toggle {
        display: none !important;
    }

    .qq-chart-type-toggle {
        display: flex;
        flex-shrink: 0;
        gap: 2px;
        margin-left: auto;
    }

    .qq-chart-type-btn {
        padding: 5px 7px;
        flex-shrink: 0;
    }

    /* Stats - Trading212 style: 2-column cards */
    .quick-quote-stats {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 0 4px;
    }

    .quick-stat {
        padding: 14px 12px;
        text-align: left;
        border: 1px solid var(--border);
    }

    .quick-stat-value {
        font-size: 14px;
        margin-bottom: 2px;
    }

    .quick-stat-label {
        font-size: 10px;
    }

    /* ── 5. Mobile-Specific Overrides for T212 Layout ──────────────────────── */
    @media (max-width: 768px) {
        .t212-pro-header {
            padding: 10px 14px;
            min-height: auto;
        }

        .pro-header-main {
            align-items: flex-start;
            gap: 12px;
        }

        /* Style the new mobile native dropdown */
        .mobile-trade-select {
            background: transparent;
            border: none;
            color: var(--text-primary);
            font-family: 'Outfit', sans-serif;
            font-size: 20px;
            font-weight: 700;
            padding: 0;
            margin: 0 0 2px 0;
            width: 100%;
            text-overflow: ellipsis;
            appearance: none;
            -webkit-appearance: none;
            cursor: pointer;
            /* Custom arrow to match the sleek UI */
            background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg width%3D%2212%22 height%3D%2212%22 viewBox%3D%220 0 24 24%22 fill%3D%22none%22 stroke%3D%22%2394a3b8%22 stroke-width%3D%222%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22%3E%3Cpolyline points%3D%226 9 12 15 18 9%22%3E%3C/polyline%3E%3C/svg%3E');
            background-repeat: no-repeat;
            background-position: right center;
            padding-right: 20px;
        }

        .mobile-trade-select:focus {
            outline: none;
        }

        .mobile-trade-select option {
            background-color: var(--bg-surface);
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 500;
        }

        #mobile-header-symbol {
            display: none;
            /* Hide old static symbol as select replaces it */
        }

        #mobile-header-name {
            display: none;
            /* Can hide the subtitle on mobile to save space, or style if desired */
        }

        .pro-live-price {
            font-size: 14px;
            font-weight: 600;
        }

        #mobile-trade-tea-select {
            display: block;
            /* Show the new select dropdown */
        }

        .rotate-prompt-close {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--bg-secondary);
            color: var(--text-muted);
            cursor: pointer;
            transition: all 0.2s;
        }

        .rotate-prompt-close:hover {
            background: var(--bg-tertiary);
            color: var(--text-primary);
        }
    }

    /* Show trade form below stats on mobile (as expandable section) */
    .qq-mobile-trade-expand {
        display: block;
    }

    /* Open positions - compact on mobile */
    .qq-open-positions.has-positions {
        margin: 0 4px;
        padding: 10px;
    }

    .qq-position-row {
        padding: 8px;
    }

    .qq-position-details {
        font-size: 11px;
    }

    .qq-position-pnl {
        font-size: 12px;
    }

    /* Market Depth section in QQ modal */
    .qq-market-depth {
        display: block !important;
        margin: 4px 4px 12px;
        padding: 14px;
        background: var(--bg-tertiary);
        border-radius: 8px;
        border: 1px solid var(--border);
    }

    .qq-depth-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }

    .qq-depth-title {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-primary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .qq-depth-ratio-badge {
        font-size: 10px;
        font-family: 'JetBrains Mono', monospace;
        color: var(--text-muted);
        background: var(--bg-secondary);
        padding: 3px 8px;
        border-radius: 4px;
    }

    .qq-depth-bar {
        display: flex;
        height: 28px;
        border-radius: 6px;
        overflow: hidden;
        margin-bottom: 8px;
    }

    .qq-depth-bids {
        background: rgba(16, 185, 129, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: width 0.5s ease;
    }

    .qq-depth-asks {
        background: rgba(239, 68, 68, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: width 0.5s ease;
    }

    .qq-depth-label {
        font-size: 10px;
        font-weight: 600;
        font-family: 'JetBrains Mono', monospace;
        color: #fff;
        white-space: nowrap;
    }

    .qq-depth-levels {
        display: flex;
        justify-content: space-between;
        font-size: 10px;
        font-family: 'JetBrains Mono', monospace;
        color: var(--text-muted);
    }

    .qq-depth-levels .bid-vol {
        color: var(--accent-green);
    }

    .qq-depth-levels .ask-vol {
        color: var(--accent-red);
    }

    /* Additional stats section */
    .qq-extra-stats {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin: 4px 4px 12px;
    }

    .qq-extra-stat {
        padding: 12px;
        background: var(--bg-tertiary);
        border-radius: 8px;
        border: 1px solid var(--border);
    }

    .qq-extra-stat-value {
        font-family: 'JetBrains Mono', monospace;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 2px;
    }

    .qq-extra-stat-label {
        font-size: 10px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    /* Symbol dropdown in header */
    .qq-symbol-dropdown {
        display: flex !important;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        position: relative;
    }

    .qq-symbol-dropdown .dropdown-arrow {
        font-size: 8px;
        color: var(--text-muted);
        transition: transform 0.2s;
    }

    .qq-symbol-dropdown.open .dropdown-arrow {
        transform: rotate(180deg);
    }

    .qq-symbol-list {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        min-width: 280px;
        max-height: 380px;
        overflow-y: auto;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        z-index: 100;
        display: none;
        margin-top: 8px;
    }

    .qq-symbol-list.show {
        display: block;
    }

    /* Category + subcategory headers */
    .qq-symbol-category {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--text-muted);
        padding: 10px 14px 4px;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .qq-symbol-subcategory {
        font-size: 9px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--text-muted);
        padding: 6px 14px 2px;
        opacity: 0.7;
    }

    .qq-symbol-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 9px 14px;
        cursor: pointer;
        transition: background 0.15s;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .qq-symbol-item:last-child {
        border-bottom: none;
    }

    .qq-symbol-item:hover,
    .qq-symbol-item.active {
        background: var(--bg-tertiary);
    }

    .qq-symbol-item-left {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .qq-si-name {
        font-weight: 400;
        color: var(--text-muted);
        font-size: 11px;
    }

    .qq-si-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .qq-si-dot.tea {
        background: var(--accent-green);
    }

    .qq-si-dot.index {
        background: var(--accent-blue);
    }

    .qq-symbol-item-price {
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        font-weight: 500;
    }

    .qq-symbol-item-price.up {
        color: var(--accent-green);
    }

    .qq-symbol-item-price.down {
        color: var(--accent-red);
    }

    /* Mobile sidebar left panel fix */
    .sidebar.mobile-open {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: 100vh;
    }

    /* Mobile Chat Fixes */
    .sidebar.mobile-open .chat-section {
        min-height: unset;
        max-height: none;
        flex: 0 0 auto;
    }

    .sidebar.mobile-open .chat-messages {
        max-height: 220px;
        min-height: 120px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid var(--border);
        border-radius: 6px;
        background: var(--bg-tertiary);
        padding: 4px 6px;
    }

    .sidebar.mobile-open .chat-message {
        padding: 6px 0;
    }

    .sidebar.mobile-open .chat-text {
        font-size: 11px;
    }

    .sidebar.mobile-open .chat-input-container {
        padding-top: 6px;
    }

    .sidebar.mobile-open .chat-input {
        font-size: 13px;
        padding: 8px 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE OVERHAUL — Popups, fullscreen, account menu, leaderboard
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Weather & macro popouts: center overlay on mobile, ABOVE sidebar ── */
@media (max-width: 1200px) {

    .weather-popout,
    .macro-popout {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 32px) !important;
        max-width: 360px !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px !important;
        z-index: 20000 !important;
        animation: mobile-popup-in 0.2s ease !important;
    }

    #weather-popout-overlay,
    #macro-popout-overlay {
        z-index: 19999 !important;
    }

    @keyframes mobile-popup-in {
        from {
            opacity: 0;
            transform: translate(-50%, -48%) scale(0.96);
        }

        to {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }
}

/* ── 2. Fullscreen charts: mobile landscape fix + rotate prompt ────────── */
@media (max-width: 768px) {
    .panel-maximized {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .panel-maximized .trading-hub-container {
        flex-direction: column !important;
        overflow: auto !important;
        height: auto !important;
        min-height: 100vh;
    }

    .panel-maximized .trading-hub-main {
        overflow: visible !important;
        height: auto !important;
        min-height: 60vh;
    }

    .panel-maximized .trading-hub-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        border-left: none !important;
        border-top: 1px solid var(--border) !important;
    }
}

/* Rotate prompt overlay */
.rotate-prompt {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    background: var(--bg-primary);
    color: var(--text-primary);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 15px;
    text-align: center;
    padding: 20px;
}

.rotate-prompt svg {
    opacity: 0.6;
    animation: rotate-hint 2s ease-in-out infinite;
}

.rotate-prompt-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    z-index: 100000;
}

.rotate-prompt-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

@keyframes rotate-hint {

    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(90deg);
    }
}

.rotate-prompt-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: -8px;
}

@media (max-width: 768px) and (orientation: portrait) {
    body.chart-fullscreen-active .rotate-prompt {
        display: flex;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    body.chart-fullscreen-active .rotate-prompt {
        display: none;
    }

    body.chart-fullscreen-active.modal-open {
        position: static !important;
        overflow: hidden !important;
    }

    .panel-maximized {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .panel-maximized .trading-hub-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .panel-maximized .trading-hub-main {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }

    .panel-maximized .chart-container {
        height: 55vw !important;
        min-height: 250px !important;
    }

    .panel-maximized .trading-hub-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        border-left: none !important;
        border-top: 1px solid var(--border) !important;
    }
}

/* ── 3. Account options in mobile sidebar ──────────────────────────────── */
.mobile-account-section {
    display: none;
    border-top: 1px solid var(--border);
    padding: 12px 14px 8px;
}

.mobile-account-header {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 600;
}

.mobile-account-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    text-decoration: none;
    transition: background 0.15s;
}

.mobile-account-item:hover,
.mobile-account-item:active {
    background: var(--bg-hover);
}

.mobile-account-item svg {
    opacity: 0.6;
    flex-shrink: 0;
}

.mobile-account-item.logout-item {
    color: var(--accent-red);
}

.mobile-account-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 12px;
}

.mobile-account-balance-label {
    color: var(--text-muted);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mobile-account-balance-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-green);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.5px;
}

@media (max-width: 1200px) {
    .mobile-account-section {
        display: block;
    }
}

/* ── 4. Leaderboard in sidebar ──────────────────────────────────── */
.mobile-leaderboard-section {
    display: none;
    border-top: 1px solid var(--border);
    padding: 12px 14px 8px;
}

.mobile-leaderboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.mobile-leaderboard-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    font-weight: 600;
}

.mobile-leaderboard-date {
    font-size: 10px;
    color: var(--accent-orange);
}

.mobile-lb-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.mobile-lb-item:hover,
.mobile-lb-item:active {
    background: var(--bg-hover);
}

.mobile-lb-rank {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.mobile-lb-rank.gold {
    background: #f59e0b22;
    color: #f59e0b;
}

.mobile-lb-rank.silver {
    background: #94a3b822;
    color: #94a3b8;
}

.mobile-lb-rank.bronze {
    background: #d9764422;
    color: #d97644;
}

.mobile-lb-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-lb-return {
    font-size: 12px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.mobile-lb-return.up {
    color: var(--accent-green);
}

.mobile-lb-return.down {
    color: var(--accent-red);
}

@media (max-width: 1200px) {
    .mobile-leaderboard-section {
        display: block;
    }
}

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

@media (max-width: 400px) {
    .market-card {
        min-width: 120px;
    }

    .quote-card {
        min-width: 80px;
    }

    .chart-container {
        height: 180px;
    }

    .chart-stats {
        gap: 8px;
    }

    .chart-stat-value {
        font-size: 0.85rem !important;
    }

    .login-btn {
        padding: 5px 10px;
        font-size: 10px;
    }
}

/* Early Access Modal */
.early-access-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.early-access-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.early-access-content {
    position: relative;
    background: #fff;
    border-radius: 16px;
    max-width: 520px;
    width: 90%;
    padding: 40px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
    text-align: center;
}

.early-access-badge {
    display: inline-block;
    background: var(--accent-blue);
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.early-access-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #202124;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.early-access-subtitle {
    font-size: 1rem;
    color: #5f6368;
    margin: 0 0 24px 0;
    line-height: 1.5;
}

.early-access-features li svg {
    flex-shrink: 0;
    margin-right: 12px;
    margin-top: 2px;
}

/* ── First Trade Mission Modal ────────────────────────────────────────── */
.first-trade-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(10, 14, 23, 0.85);
    backdrop-filter: blur(8px);
    z-index: 100000;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.first-trade-overlay.visible {
    display: flex;
    opacity: 1;
}

.first-trade-content {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 90%;
    max-width: 440px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.first-trade-overlay.visible .first-trade-content {
    transform: translateY(0);
}

.first-trade-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.1);
    color: var(--accent-blue);
    margin-bottom: 20px;
}

.first-trade-content h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.first-trade-content p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 28px 0;
}

.first-trade-btn {
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 24px;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s;
}

.first-trade-btn:hover {
    background: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.early-access-features {
    text-align: left;
    margin: 0 0 28px 0;
    padding: 0;
    list-style: none;
}

.early-access-features li {
    padding: 8px 0;
    font-size: 0.9rem;
    color: #3c4043;
    display: flex;
    align-items: center;
    gap: 10px;
}

.early-access-features li::before {
    content: '';
    width: 20px;
    height: 20px;
    background: var(--accent-blue);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.early-access-form {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.early-access-form input[type="text"] {
    flex: 1;
    padding: 14px 18px;
    border: 2px solid #dadce0;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}

.early-access-form input[type="text"]:focus {
    border-color: var(--accent-blue);
}

.early-access-form button {
    padding: 14px 28px;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.early-access-form button:hover {
    background: #1557b0;
}

.early-access-form button:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

.early-access-privacy {
    font-size: 0.75rem;
    color: #5f6368;
    line-height: 1.5;
}

.early-access-privacy a {
    color: var(--accent-blue);
}

.early-access-success {
    padding: 20px 0;
}

.early-access-success-icon {
    width: 56px;
    height: 56px;
    background: #e6f4ea;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #137333;
    font-size: 1.5rem;
    font-weight: 700;
}

.early-access-success p {
    color: #137333;
    font-size: 1rem;
}

@media (max-width: 500px) {
    .early-access-content {
        padding: 28px 20px;
    }

    .early-access-form {
        flex-direction: column;
    }

    .early-access-form button {
        width: 100%;
    }
}

/* =============================================
   AUTH MODAL & TRADING PANEL STYLES
   ============================================= */

/* Auth Modal */
.auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.auth-modal.visible {
    display: flex;
}

.auth-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}

.auth-content {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    max-width: 420px;
    width: 90%;
    padding: 32px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.auth-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.auth-tab {
    flex: 1;
    padding: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.auth-tab.active {
    background: var(--accent-blue);
    border-color: var(--accent-blue);
    color: white;
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.auth-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 24px 0;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-input-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auth-input {
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s;
}

.auth-input:focus {
    border-color: var(--accent-blue);
}

.auth-input::placeholder {
    color: var(--text-muted);
}

.auth-submit {
    padding: 14px;
    background: var(--accent-blue);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 8px;
}

.auth-submit:hover {
    background: #1557b0;
}

.auth-submit:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

.auth-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--accent-red);
    border-radius: 6px;
    padding: 12px;
    color: var(--accent-red);
    font-size: 13px;
    display: none;
}

.auth-error.visible {
    display: block;
}

.auth-bonus {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid var(--accent-green);
    border-radius: 6px;
    padding: 12px;
    text-align: center;
    margin-top: 16px;
}

.auth-bonus-amount {
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-green);
}

.auth-bonus-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.auth-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}

.auth-close:hover {
    color: var(--text-primary);
}

/* User Menu (logged in state) */
/* ═══ Trading Mode Toggle ═══ */
.mode-toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.5px;
}

.mode-label-text {
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    user-select: none;
}

.mode-toggle-wrapper.mode-real .mode-label-text#mode-label-real {
    color: var(--accent-green);
    font-weight: 700;
}

.mode-toggle-wrapper:not(.mode-real) .mode-label-text#mode-label-virtual {
    color: var(--accent-blue, #4fc3f7);
    font-weight: 700;
}

.mode-badge {
    display: none;
}

.mode-switch {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 16px;
}

.mode-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mode-slider {
    position: absolute;
    inset: 0;
    background: var(--accent-blue, #4fc3f7);
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.3s;
}

.mode-slider::before {
    content: '';
    position: absolute;
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

.mode-switch input:checked+.mode-slider {
    background: var(--accent-green);
}

.mode-switch input:checked+.mode-slider::before {
    transform: translateX(16px);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-balance {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    padding: 6px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
}

.user-balance-label {
    color: var(--text-muted);
    font-size: 10px;
    margin-right: 6px;
}

.user-balance-amount {
    color: var(--accent-green);
    font-weight: 600;
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: var(--accent-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

.login-btn {
    padding: 8px 16px;
    background: var(--accent-blue);
    border: none;
    border-radius: 4px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.login-btn:hover {
    background: #1557b0;
}

/* Trading Panel (replaces Order Book lock) */
.trading-panel {
    padding: 16px;
    border-bottom: 1px solid var(--border);
}

.trade-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.trade-type-toggle {
    display: flex;
    gap: 4px;
}

.trade-type-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.trade-type-btn.buy {
    background: transparent;
    color: var(--accent-green);
    border-color: var(--accent-green);
}

.trade-type-btn.buy.active {
    background: var(--accent-green);
    color: white;
}

.trade-type-btn.sell {
    background: transparent;
    color: var(--accent-red);
    border-color: var(--accent-red);
}

.trade-type-btn.sell.active {
    background: var(--accent-red);
    color: white;
}

/* Modern Select Dropdown */
.trade-select {
    padding: 12px 36px 12px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    outline: none;
    cursor: pointer;
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.2s, box-shadow 0.2s;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-tertiary);
}

.trade-select:hover {
    border-color: var(--border-light);
}

.trade-select:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

.trade-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 10px 12px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

.trade-select option:checked {
    background: var(--accent-blue);
    color: #fff;
}

.trade-select option:hover {
    background: var(--bg-tertiary);
}

.trade-select::-webkit-scrollbar {
    width: 6px;
}

.trade-select::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.trade-select::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.trade-select::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.trade-input-row {
    display: flex;
    gap: 8px;
}

.trade-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.trade-input-group label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trade-input {
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    outline: none;
}

select.trade-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-color: var(--bg-card);
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    transition: border-color 0.2s, box-shadow 0.2s;
}

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

.trade-input:hover {
    border-color: var(--border-light);
}

.trade-input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

.trade-summary {
    background: var(--bg-card);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 12px;
}

.trade-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

.trade-summary-label {
    color: var(--text-muted);
}

.trade-summary-value {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
}

.trade-execute-btn {
    padding: 14px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.trade-execute-btn.buy {
    background: var(--accent-green);
    color: white;
}

.trade-execute-btn.buy:hover {
    background: #0d9668;
}

.trade-execute-btn.sell {
    background: var(--accent-red);
    color: white;
}

.trade-execute-btn.sell:hover {
    background: #dc2626;
}

.trade-execute-btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

.trade-execute-btn.trade-success {
    background: var(--accent-green) !important;
    color: white !important;
    cursor: default;
    animation: successPulse 0.4s ease;
}

@keyframes successPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1);
    }
}

.trade-execute-btn.signin-prompt {
    background: var(--accent-blue);
    cursor: pointer;
}

.trade-execute-btn.signin-prompt:hover {
    background: #1557b0;
}

/* Risk Management — Halted / Close-Only button states */
.trade-execute-btn.btn-halted {
    background: #dc2626 !important;
    animation: pulseHalted 1.5s ease-in-out infinite;
    cursor: not-allowed;
}

.trade-execute-btn.btn-close-only {
    background: #d97706 !important;
    cursor: not-allowed;
}

@keyframes pulseHalted {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* Risk Management — Auction table badges */
.mode-badge {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 4px;
    letter-spacing: 0.5px;
}

.mode-badge.mode-halted {
    background: #dc2626;
    color: #fff;
    animation: pulseHalted 1.5s ease-in-out infinite;
}

.mode-badge.mode-close-only {
    background: #d97706;
    color: #fff;
}

tr.row-halted {
    opacity: 0.6;
}

/* Elevated spread indicator */
.spread-elevated {
    color: var(--accent-orange) !important;
    font-weight: 600;
}

/* Portfolio Section */
.portfolio-section {
    padding: 16px;
    max-height: 420px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.portfolio-section>.panel-title {
    flex-shrink: 0;
}

.portfolio-section .trade-log-container {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.portfolio-section .trade-log-container::-webkit-scrollbar {
    width: 6px;
}

.portfolio-section .trade-log-container::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.portfolio-section .trade-log-container::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.portfolio-section .trade-log-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.portfolio-popout-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.portfolio-popout-btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.1);
}

.portfolio-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.portfolio-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 20px;
    font-weight: 700;
}

.portfolio-pnl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

.reset-account-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s;
}

.reset-account-btn:hover {
    border-color: var(--accent-red);
    color: var(--accent-red);
    background: rgba(239, 68, 68, 0.1);
}

.position-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.position-item:last-child {
    border-bottom: none;
}

.position-tea {
    font-weight: 600;
    font-size: 13px;
}

.position-qty {
    font-size: 11px;
    color: var(--text-muted);
}

.position-value {
    text-align: right;
}

.position-current {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
}

.position-pnl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

/* Leaderboard Tab */
.leaderboard-section {
    padding: 16px;
}

.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.leaderboard-item-clickable {
    cursor: pointer;
    transition: background 0.15s;
    border-radius: 6px;
    padding: 8px 6px;
    margin: 0 -6px;
}

.leaderboard-item-clickable:hover {
    background: rgba(255, 255, 255, 0.04);
}

.leaderboard-follow-star {
    font-size: 14px;
    color: var(--text-muted);
    transition: color 0.15s;
    cursor: pointer;
    flex-shrink: 0;
}

.leaderboard-follow-star.followed {
    color: #f59e0b;
}

.leaderboard-rank {
    width: 24px;
    height: 24px;
    background: var(--bg-card);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.leaderboard-rank.gold {
    background: #f59e0b;
    color: #000;
}

.leaderboard-rank.silver {
    background: #9ca3af;
    color: #000;
}

.leaderboard-rank.bronze {
    background: #cd7f32;
    color: #000;
}

.leaderboard-name {
    flex: 1;
    font-size: 13px;
}

.leaderboard-return {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
}

/* Trade Success Toast */
.trade-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-green);
    border-radius: 8px;
    padding: 16px 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 10003;
    display: none;
    animation: slideIn 0.3s ease;
}

.trade-toast.visible {
    display: block;
}

.trade-toast.error {
    border-color: var(--accent-red);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
}

.toast-message {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Follow Trade Notification Stack */
.follow-notify-stack {
    position: fixed;
    bottom: 80px;
    right: 24px;
    z-index: 10002;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
    max-height: 70vh;
    overflow: hidden;
}

.follow-notify-card {
    pointer-events: auto;
    width: 340px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: fnSlideIn 0.35s ease;
    overflow: hidden;
}

.follow-notify-card.removing {
    animation: fnSlideOut 0.3s ease forwards;
}

@keyframes fnSlideIn {
    from {
        transform: translateX(110%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fnSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(110%);
        opacity: 0;
    }
}

.fn-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 8px;
}

.fn-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-green), var(--accent-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.fn-trader-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fn-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s;
}

.fn-close:hover {
    color: var(--text-primary);
}

.fn-body {
    padding: 0 14px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fn-side {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.fn-side.buy {
    background: rgba(0, 200, 83, 0.15);
    color: var(--accent-green);
}

.fn-side.sell {
    background: rgba(255, 82, 82, 0.15);
    color: var(--accent-red);
}

.fn-details {
    flex: 1;
    font-size: 12px;
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.5;
}

.fn-sym {
    font-weight: 600;
    color: var(--text-primary);
}

.fn-footer {
    display: flex;
    border-top: 1px solid var(--border);
}

.fn-copy-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--accent-blue);
    font-size: 12px;
    font-weight: 600;
    padding: 9px 0;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background 0.15s;
}

.fn-copy-btn:hover {
    background: rgba(26, 115, 232, 0.08);
}

.fn-dismiss-btn {
    flex: 1;
    background: none;
    border: none;
    border-left: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12px;
    padding: 9px 0;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    transition: background 0.15s, color 0.15s;
}

.fn-dismiss-btn:hover {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
}

.fn-border-buy {
    border-left: 3px solid var(--accent-green);
}

.fn-border-sell {
    border-left: 3px solid var(--accent-red);
}

/* =============================================
   RESET ACCOUNT CONFIRMATION MODAL
   ============================================= */
.reset-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reset-confirm-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.reset-confirm-content {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    animation: resetModalIn 0.2s ease-out;
}

.reset-confirm-icon {
    font-size: 48px;
    margin-bottom: 12px;
    color: var(--accent-red);
}

.reset-confirm-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.reset-confirm-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 12px 0;
}

.reset-confirm-list {
    text-align: left;
    margin: 0 0 16px 0;
    padding-left: 20px;
    list-style: none;
}

.reset-confirm-list li {
    font-size: 12px;
    color: var(--text-muted);
    padding: 3px 0;
    position: relative;
    padding-left: 16px;
}

.reset-confirm-list li::before {
    content: '\00D7';
    position: absolute;
    left: 0;
    color: var(--accent-red);
    font-weight: 700;
    font-size: 14px;
}

.reset-confirm-warning {
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-red);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 20px 0;
}

.reset-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.reset-cancel-btn {
    padding: 10px 24px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.reset-cancel-btn:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.reset-danger-btn {
    padding: 10px 24px;
    border-radius: 6px;
    border: 1px solid var(--accent-red);
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.reset-danger-btn:hover {
    background: var(--accent-red);
    color: #fff;
}

.reset-danger-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@keyframes resetModalIn {
    from {
        transform: scale(0.9) translateY(10px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* =============================================
   USER DROPDOWN MENU
   ============================================= */
.user-avatar-wrapper {
    position: relative;
}

.user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px;
    z-index: 1000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    animation: dropdownIn 0.15s ease;
}

.user-dropdown.visible {
    display: block;
}

@keyframes dropdownIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
    text-align: left;
}

.user-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.user-dropdown-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.user-dropdown-logout:hover {
    color: var(--accent-red);
}

.user-dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 4px 0;
}

a.user-dropdown-item {
    text-decoration: none;
    color: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BADGE CELEBRATION NOTIFICATION
   ═══════════════════════════════════════════════════════════════════════════ */

#badge-celebration-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50000;
    align-items: center;
    justify-content: center;
}

#badge-celebration-modal.active .badge-celeb-card {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.badge-celeb-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
}

.badge-celeb-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 36px 32px 28px;
    max-width: 340px;
    width: 90vw;
    text-align: center;
    opacity: 0;
    transform: scale(0.85) translateY(20px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.badge-celeb-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    z-index: 2;
}

.badge-celeb-close:hover {
    color: var(--text-primary);
}

.badge-celeb-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 30% 20%, rgba(234, 179, 8, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(168, 85, 247, 0.06) 0%, transparent 50%);
}

.badge-celeb-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    animation: badge-pop 0.5s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.badge-celeb-icon svg {
    width: 40px;
    height: 40px;
}

@keyframes badge-pop {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.badge-celeb-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.badge-celeb-name {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
}

.badge-celeb-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 20px;
}

.badge-celeb-share-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.badge-celeb-share-row {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.badge-share-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    transition: transform 0.15s, background 0.15s, color 0.15s;
    text-decoration: none;
}

.badge-share-btn svg {
    width: 18px;
    height: 18px;
}

.badge-share-btn:hover {
    transform: scale(1.1);
}

.badge-share-x:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

.badge-share-wa:hover {
    background: #25D366;
    color: #fff;
    border-color: #25D366;
}

.badge-share-fb:hover {
    background: #1877F2;
    color: #fff;
    border-color: #1877F2;
}

.badge-share-copy:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.share-bonus-callout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(26, 115, 232, 0.08), rgba(52, 168, 83, 0.08));
    border: 1px solid rgba(52, 168, 83, 0.2);
    border-radius: 10px;
    padding: 10px 16px;
    margin: 12px 0 14px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.share-bonus-callout svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--accent-green);
}

.share-bonus-callout strong {
    color: var(--accent-green);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARE PROMPT (triggered after N trades)
   ═══════════════════════════════════════════════════════════════════════════ */

#share-prompt-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 50000;
    align-items: center;
    justify-content: center;
}

#share-prompt-modal.active .share-prompt-card {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.share-prompt-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
}

.share-prompt-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px 28px 24px;
    max-width: 360px;
    width: 90vw;
    text-align: center;
    opacity: 0;
    transform: scale(0.9) translateY(16px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.share-prompt-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(26, 115, 232, 0.1);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.share-prompt-icon svg {
    width: 28px;
    height: 28px;
}

.share-prompt-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.share-prompt-sub {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 18px;
    line-height: 1.4;
}

.share-prompt-stats {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 14px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.share-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 60px;
}

.share-stat-val {
    font-size: 18px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
}

.share-stat-val.up {
    color: var(--accent-green);
}

.share-stat-val.down {
    color: var(--accent-red);
}

.share-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.share-toggle-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    cursor: pointer;
    user-select: none;
}

.share-toggle-row input[type="checkbox"] {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.share-prompt-share-row {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 14px;
}

.share-prompt-dismiss {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 6px 12px;
    transition: color 0.15s;
}

.share-prompt-dismiss:hover {
    color: var(--text-secondary);
}

.share-prompt-pro-note {
    font-size: 10px;
    font-style: italic;
    color: var(--text-muted);
    margin-top: 6px;
    cursor: pointer;
    transition: color 0.15s;
}

.share-prompt-pro-note:hover {
    color: var(--accent);
}

.share-prompt-pro-note strong {
    font-weight: 600;
}

/* Real Money Coming Soon Modal */
.real-money-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.real-money-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.real-money-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 32px 28px 28px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.real-money-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    cursor: pointer;
}

.real-money-close:hover {
    color: #fff;
}

.real-money-icon {
    margin-bottom: 14px;
}

.real-money-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
}

.real-money-subtitle {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-blue);
    margin-bottom: 16px;
    letter-spacing: 0.02em;
}

.real-money-body {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 12px;
}

.real-money-btn {
    margin-top: 8px;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: opacity 0.15s;
}

.real-money-btn:hover {
    opacity: 0.9;
}

/* =============================================
   MFA / 2FA MODALS
   ============================================= */
.mfa-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.mfa-modal.visible {
    display: flex;
}

.mfa-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.mfa-content {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    max-width: 400px;
    width: 90%;
    padding: 32px;
    text-align: center;
    animation: resetModalIn 0.2s ease;
    z-index: 1;
}

.mfa-setup-content {
    max-width: 440px;
}

.mfa-icon {
    margin-bottom: 16px;
}

.mfa-title {
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.mfa-subtitle {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 20px 0;
}

.mfa-state {
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.mfa-status-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.mfa-status-off {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-red);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.mfa-status-on {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-green);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.mfa-qr-container {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.mfa-qr-image {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    border: 2px solid var(--border);
    background: #fff;
    padding: 8px;
}

.mfa-secret-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.mfa-secret-label {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mfa-secret-code {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 4px 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-primary);
    letter-spacing: 1px;
    user-select: all;
}

.mfa-code-input-group {
    margin-bottom: 16px;
}

.mfa-code-input {
    width: 180px;
    padding: 14px;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 8px;
    transition: border-color 0.2s;
}

.mfa-code-input:focus {
    outline: none;
    border-color: var(--accent-blue);
}

.mfa-code-input::placeholder {
    color: var(--text-muted);
    opacity: 0.4;
    letter-spacing: 8px;
}

.mfa-error {
    color: var(--accent-red);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 12px;
    min-height: 16px;
}

.mfa-cancel-link {
    display: block;
    margin: 12px auto 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    font-family: var(--font-sans);
}

.mfa-cancel-link:hover {
    color: var(--text-secondary);
}

.mfa-disable-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-red);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.mfa-disable-btn:hover {
    background: var(--accent-red);
    color: #fff;
}

.mfa-disable-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =============================================
   PENDING ORDERS (Phase 4-16)
   ============================================= */
.pending-orders-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}

.pending-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-size: 12px;
    gap: 8px;
}

.pending-order-row.filled {
    opacity: 0.6;
}

.pending-order-row.cancelled {
    opacity: 0.4;
}

.pending-order-row.expired {
    opacity: 0.4;
}

.pending-order-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.pending-order-side {
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.pending-order-side.buy {
    color: var(--accent-green);
}

.pending-order-side.sell {
    color: var(--accent-red);
}

.pending-order-symbol {
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.pending-order-details {
    color: var(--text-secondary);
    font-size: 11px;
}

.pending-order-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pending-order-margin {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}

.pending-order-cancel {
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid rgba(239, 68, 68, 0.3);
    background: transparent;
    color: var(--accent-red);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.15s;
}

.pending-order-cancel:hover {
    background: var(--accent-red);
    color: #fff;
}

.pending-order-status {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pending-order-status.filled {
    color: var(--accent-green);
}

.pending-order-status.cancelled {
    color: var(--text-muted);
}

.pending-order-status.expired {
    color: var(--text-muted);
}

/* =============================================
   HEALTH STATUS INDICATOR (Phase 4-19)
   ============================================= */
.health-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    margin-left: 6px;
    flex-shrink: 0;
    transition: background 0.4s ease;
    cursor: default;
}

.health-dot.healthy {
    background: var(--accent-green);
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
}

.health-dot.degraded {
    background: #f59e0b;
    box-shadow: 0 0 5px rgba(245, 158, 11, 0.5);
}

.health-dot.down {
    background: var(--accent-red);
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
}

/* =============================================
   SETTLEMENT BADGE (Phase 4-17)
   ============================================= */
.settle-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.settle-badge.settled {
    background: rgba(34, 197, 94, 0.1);
    color: var(--accent-green);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.settle-badge.pending {
    background: rgba(234, 179, 8, 0.1);
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, 0.25);
}

/* =============================================
   TRADER PROFILE MODAL
   ============================================= */

.trader-profile-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    align-items: center;
    justify-content: center;
}

.trader-profile-modal.active {
    display: flex;
}

.trader-profile-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.trader-profile-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 28px;
    width: 520px;
    max-width: 95vw;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.trader-profile-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

.trader-profile-close:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
}

.trader-profile-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.trader-profile-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-green), var(--accent-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.trader-profile-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
}

.trader-profile-rank {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.trader-profile-follow-counts {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.follow-count-item strong {
    color: var(--text-primary);
    font-weight: 600;
}

.follow-count-divider {
    color: var(--border-color);
}

.trader-profile-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

.trader-stat-box {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
}

.trader-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.trader-stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.trader-stat-wide {
    grid-column: 1 / -1;
}

.trader-stat-value.up {
    color: var(--accent-green);
}

.trader-stat-value.down {
    color: var(--accent-red);
}

.trader-profile-activity {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 18px;
}

.trader-activity-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trader-activity-placeholder {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
}

.trader-profile-activity .portfolio-trade-feed {
    margin-top: 8px;
}

.trader-profile-follow-btn {
    width: 100%;
    padding: 11px;
    background: var(--accent-green);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.trader-profile-follow-btn:hover {
    opacity: 0.88;
}

.trader-profile-follow-btn.following {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
}

/* =============================================
   MY PORTFOLIO MODAL
   ============================================= */

.portfolio-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    align-items: center;
    justify-content: center;
}

.portfolio-modal.active {
    display: flex;
}

.portfolio-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.portfolio-modal-content {
    position: relative;
    z-index: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    width: 780px;
    max-width: 96vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.portfolio-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px 0;
    flex-shrink: 0;
}

.portfolio-modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.portfolio-header-follow-counts {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
    margin-right: 8px;
}

.portfolio-header-follow-counts strong {
    color: var(--text-primary);
    font-weight: 600;
}

.portfolio-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.15s;
    margin-left: auto;
}

.portfolio-modal-close:hover {
    color: var(--text-primary);
}

/* Tab bar (modal only — scoped to avoid overriding right-panel tabs) */
.portfolio-tab-bar {
    display: flex;
    gap: 0;
    padding: 12px 22px 0;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.portfolio-tab-bar .portfolio-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
    text-transform: none;
    border-radius: 0;
}

.portfolio-tab-bar .portfolio-tab:hover {
    color: var(--text-secondary);
}

.portfolio-tab-bar .portfolio-tab.active {
    color: var(--accent-blue);
    background: none;
    border-bottom-color: var(--accent-blue);
}

.portfolio-tab-bar .portfolio-tab svg {
    opacity: 0.7;
}

.portfolio-tab-bar .portfolio-tab.active svg {
    opacity: 1;
}

@media (max-width: 768px) {
    .portfolio-tab-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .portfolio-tab-bar::-webkit-scrollbar {
        display: none;
    }

    .portfolio-tab-bar .portfolio-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* Tab content panels */
.portfolio-tab-content {
    flex: 1;
    overflow: hidden;
}

#portfolio-tab-financial {
    overflow-y: auto;
    padding: 20px 22px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-tertiary);
}

#portfolio-tab-financial::-webkit-scrollbar {
    width: 6px;
}

#portfolio-tab-financial::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

#portfolio-tab-financial::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

#portfolio-tab-financial::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

#portfolio-tab-history {
    overflow-y: auto;
    padding: 20px 22px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-tertiary);
}

#portfolio-tab-history::-webkit-scrollbar {
    width: 6px;
}

#portfolio-tab-history::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

#portfolio-tab-history::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

#portfolio-tab-history::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

#portfolio-tab-social {
    display: flex;
    flex-direction: row;
}

#portfolio-tab-badges {
    overflow-y: auto;
    padding: 20px 22px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-tertiary);
}

#portfolio-tab-badges::-webkit-scrollbar {
    width: 6px;
}

#portfolio-tab-badges::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

#portfolio-tab-badges::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

#portfolio-tab-badges::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

#portfolio-tab-store {
    overflow-y: auto;
    padding: 20px 22px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-tertiary);
}

#portfolio-tab-store::-webkit-scrollbar {
    width: 6px;
}

#portfolio-tab-store::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

#portfolio-tab-store::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

#portfolio-tab-store::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.portfolio-modal-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.portfolio-watchlist-col {
    width: 220px;
    flex-shrink: 0;
    padding: 16px;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-tertiary);
}

.portfolio-watchlist-col::-webkit-scrollbar {
    width: 6px;
}

.portfolio-watchlist-col::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.portfolio-watchlist-col::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.portfolio-watchlist-col::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.portfolio-divider {
    display: none;
}

.portfolio-detail-col {
    flex: 1;
    padding: 16px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-tertiary);
}

.portfolio-detail-col::-webkit-scrollbar {
    width: 6px;
}

.portfolio-detail-col::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.portfolio-detail-col::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.portfolio-detail-col::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.portfolio-trader-detail {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.portfolio-trader-detail>.trader-profile-follow-btn {
    flex-shrink: 0;
    margin-top: 12px;
}

/* Financial tab — summary cards */
.pf-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.pf-summary-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
}

.pf-summary-card.pf-summary-main {
    grid-column: 1 / -1;
    text-align: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.06));
    border-color: var(--accent-blue);
}

.pf-summary-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.pf-summary-value-big {
    font-family: 'JetBrains Mono', monospace;
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.pf-summary-return {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 600;
}

.pf-summary-return.up {
    color: var(--accent-green);
}

.pf-summary-return.down {
    color: var(--accent-red);
}

.pf-summary-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.pf-summary-value.up {
    color: var(--accent-green);
}

.pf-summary-value.down {
    color: var(--accent-red);
}

/* Financial tab — sections */
.pf-section {
    margin-bottom: 20px;
}

.pf-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.pf-empty {
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
    padding: 24px 0;
}

/* Positions table */
.pf-positions-table {
    font-size: 12px;
}

.pf-pos-header {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.8fr 0.8fr 0.9fr 1.2fr;
    gap: 8px;
    padding: 8px 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 10px;
    border-bottom: 1px solid var(--border);
}

.pf-pos-row {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr 0.8fr 0.8fr 0.9fr 1.2fr;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    align-items: center;
    transition: background 0.12s;
}

.pf-pos-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.pf-pos-symbol {
    font-weight: 600;
    color: var(--text-primary);
}

.pf-idx-badge {
    font-size: 9px;
    color: var(--accent-purple);
    font-weight: 700;
    margin-left: 4px;
}

.pf-pos-qty,
.pf-pos-avg,
.pf-pos-cur {
    color: var(--text-secondary);
    font-family: 'JetBrains Mono', monospace;
}

.pf-pos-val {
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.pf-pos-pnl {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

.pf-pos-pnl.up {
    color: var(--accent-green);
}

.pf-pos-pnl.down {
    color: var(--accent-red);
}

/* ── Margin Health Bar ──────────────────────────────────────────────────── */
.pf-margin-bar-container {
    margin-bottom: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px 18px;
}

.pf-margin-bar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.pf-margin-bar-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.pf-margin-bar-status {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
}

.pf-margin-bar-level {
    margin-left: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
}

.pf-margin-bar-track {
    position: relative;
    height: 24px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    overflow: visible;
    margin-bottom: 10px;
}

.pf-margin-bar-used {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--accent-blue), #6366f1);
    border-radius: 6px 0 0 6px;
    min-width: 2px;
    transition: width 0.4s ease;
}

.pf-bar-danger .pf-margin-bar-used {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.pf-bar-danger .pf-margin-bar-free {
    background: rgba(239, 68, 68, 0.15);
}

.pf-margin-bar-free {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(16, 185, 129, 0.2);
    border-radius: 0 6px 6px 0;
    transition: width 0.4s ease, left 0.4s ease;
}

.pf-margin-bar-marker {
    position: absolute;
    top: -4px;
    bottom: -18px;
    width: 0;
    z-index: 2;
}

.pf-margin-marker-line {
    position: absolute;
    top: 0;
    width: 2px;
    height: 32px;
    border-radius: 1px;
}

.pf-margin-marker-call .pf-margin-marker-line {
    background: var(--accent-orange);
}

.pf-margin-marker-stop .pf-margin-marker-line {
    background: var(--accent-red);
}

.pf-margin-marker-label {
    position: absolute;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    color: var(--text-muted);
}

.pf-margin-marker-call .pf-margin-marker-label {
    color: var(--accent-orange);
}

.pf-margin-marker-stop .pf-margin-marker-label {
    color: var(--accent-red);
}

.pf-margin-bar-legend {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.pf-margin-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
}

.pf-margin-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
}

.pf-summary-detail-grid {
    grid-template-columns: 1fr 1fr;
}

/* ── History Tab ─────────────────────────────────────────────────────────── */
.pf-history-stats {
    margin-bottom: 20px;
}

.pf-history-stat-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.pf-hist-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 10px;
    text-align: center;
}

.pf-hist-stat-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.pf-hist-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pf-history-stat-loading {
    color: var(--text-muted);
    text-align: center;
    padding: 16px;
}

.pf-history-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.pf-hist-filter {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.pf-hist-filter:hover {
    color: var(--text-primary);
    border-color: var(--accent-blue);
}

.pf-hist-filter.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

.pf-hist-table {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    max-height: 400px;
    overflow-y: auto;
}

.pf-hist-table::-webkit-scrollbar {
    width: 6px;
}

.pf-hist-table::-webkit-scrollbar-track {
    background: transparent;
}

.pf-hist-table::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.pf-hist-header {
    display: grid;
    grid-template-columns: 50px 1.2fr 0.8fr 0.7fr 0.9fr 70px 80px 70px;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    position: sticky;
    top: 0;
    z-index: 1;
}

.pf-hist-row {
    display: grid;
    grid-template-columns: 50px 1.2fr 0.8fr 0.7fr 0.9fr 70px 80px 70px;
    gap: 6px;
    padding: 9px 12px;
    font-size: 12px;
    border-top: 1px solid var(--border);
    transition: background 0.15s;
}

.pf-hist-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.pf-hist-cell {
    display: flex;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
}

.pf-hist-side {
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.5px;
}

.pf-hist-side.buy {
    color: var(--accent-green);
}

.pf-hist-side.sell {
    color: var(--accent-red);
}

.pf-hist-sym {
    font-weight: 600;
    color: var(--text-primary);
}

.pf-hist-qty,
.pf-hist-price {
    color: var(--text-secondary);
}

.pf-hist-total {
    font-weight: 600;
    color: var(--text-primary);
}

.pf-hist-date,
.pf-hist-time {
    color: var(--text-muted);
    font-size: 10px;
}

.pf-mode-virtual {
    font-size: 9px;
    font-weight: 700;
    color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.12);
    padding: 2px 5px;
    border-radius: 3px;
}

.pf-mode-real {
    font-size: 9px;
    font-weight: 700;
    color: var(--accent-green);
    background: rgba(16, 185, 129, 0.12);
    padding: 2px 5px;
    border-radius: 3px;
}

.pf-hist-count {
    text-align: center;
    padding: 10px;
    font-size: 11px;
    color: var(--text-muted);
}

.portfolio-col-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.portfolio-wl-count {
    background: var(--accent-blue);
    color: #fff;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
}

.portfolio-watchlist-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 24px 0;
    line-height: 1.7;
}

.portfolio-wl-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.portfolio-wl-hint {
    font-size: 11px;
    margin-top: 6px;
    color: var(--text-muted);
}

.portfolio-wl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    margin: 2px 0;
}

.portfolio-wl-item:hover,
.portfolio-wl-item.selected {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
}

.portfolio-wl-item.selected {
    border-color: var(--accent-blue);
    background: rgba(59, 130, 246, 0.08);
}

.portfolio-wl-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-green), var(--accent-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.portfolio-wl-info {
    flex: 1;
    min-width: 0;
}

.portfolio-wl-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.portfolio-wl-return {
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
}

.portfolio-wl-unfollow {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}

.portfolio-wl-item:hover .portfolio-wl-unfollow {
    opacity: 1;
}

.portfolio-wl-unfollow:hover {
    color: var(--accent-red);
}

.portfolio-stats-placeholder {
    color: var(--text-muted);
    font-size: 14px;
    padding: 40px 0;
    text-align: center;
}

.portfolio-trader-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.portfolio-trader-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-green), var(--accent-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.portfolio-trader-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.portfolio-trader-since {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.notify-toggle-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.notify-toggle-btn:hover {
    border-color: var(--border-light);
    color: var(--text-secondary);
}

.notify-toggle-btn.active {
    background: rgba(26, 115, 232, 0.15);
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

.portfolio-trader-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.portfolio-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
}

.portfolio-stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.portfolio-stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.portfolio-stat-value.up {
    color: var(--accent-green);
}

.portfolio-stat-value.down {
    color: var(--accent-red);
}

.portfolio-activity-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.portfolio-activity-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.portfolio-activity-section .portfolio-trade-feed {
    flex: 1;
    max-height: 150px;
}

.portfolio-activity-info {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.portfolio-notification-placeholder {
    font-size: 12px;
    color: var(--text-muted);
    font-style: italic;
    padding: 8px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    text-align: center;
}

.portfolio-trade-feed {
    max-height: 180px;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-tertiary);
}

.portfolio-trade-feed::-webkit-scrollbar {
    width: 6px;
}

.portfolio-trade-feed::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 3px;
}

.portfolio-trade-feed::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.portfolio-trade-feed::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.portfolio-trade-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border-radius: 5px;
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.portfolio-trade-side {
    font-weight: 700;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    min-width: 32px;
    text-align: center;
}

.portfolio-trade-side.buy {
    color: var(--accent-green);
    background: rgba(16, 185, 129, 0.12);
}

.portfolio-trade-side.sell {
    color: var(--accent-red);
    background: rgba(239, 68, 68, 0.12);
}

.portfolio-trade-sym {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 70px;
}

.portfolio-trade-qty {
    color: var(--text-muted);
    min-width: 65px;
}

.portfolio-trade-price {
    color: var(--text-muted);
    min-width: 55px;
}

.portfolio-trade-total {
    margin-left: auto;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 70px;
    text-align: right;
}

.portfolio-trade-time {
    color: var(--text-muted);
    font-size: 10px;
    min-width: 45px;
    text-align: right;
}

/* ── Margin Alert Overlay ─────────────────────────────────────── */
.margin-alert {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 24px;
    border-radius: 12px;
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: marginAlertSlide 0.4s ease;
    max-width: 560px;
    width: calc(100% - 32px);
}

.margin-alert-warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.5);
}

.margin-alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.6);
}

.margin-alert-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.margin-alert-content {
    flex: 1;
    min-width: 0;
}

.margin-alert-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
}

.margin-alert-warning .margin-alert-title {
    color: #f59e0b;
}

.margin-alert-danger .margin-alert-title {
    color: #ef4444;
}

.margin-alert-msg {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.margin-alert-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: background 0.2s;
}

.margin-alert-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

@keyframes marginAlertSlide {
    from {
        transform: translateX(-50%) translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MONETIZATION — Account Locked Modal
   ═══════════════════════════════════════════════════════════════════════════════ */

.account-locked-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
}

.account-locked-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.locked-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
}

.locked-card {
    position: relative;
    z-index: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 40px 36px 32px;
    max-width: 480px;
    width: 90%;
    text-align: center;
    animation: lockedSlideIn 0.3s ease-out;
}

@keyframes lockedSlideIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(20px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.locked-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.locked-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent-red);
    margin: 0 0 8px;
}

.locked-subtitle {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0 0 24px;
    line-height: 1.5;
}

.locked-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.locked-option {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px 16px;
    position: relative;
}

.locked-option-paid {
    border-color: var(--accent-green);
}

.locked-option-badge {
    position: absolute;
    top: -10px;
    right: 12px;
    background: var(--accent-green);
    color: #000;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    letter-spacing: 0.5px;
}

.locked-option-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.locked-option-amount {
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.locked-option-detail {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.locked-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

.locked-btn:hover:not(:disabled) {
    opacity: 0.85;
}

.locked-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.locked-btn-free {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.locked-btn-paid {
    background: var(--accent-green);
    color: #000;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MONETIZATION — Combine Challenge Banner
   ═══════════════════════════════════════════════════════════════════════════════ */

.combine-banner {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.12), rgba(234, 179, 8, 0.04));
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 8px;
    padding: 8px 16px;
    margin: 8px 16px 0;
    font-size: 12px;
    color: var(--text-primary);
}

.combine-banner.active {
    display: flex;
}

.combine-banner-label {
    font-weight: 700;
    color: #eab308;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
}

.combine-stat {
    text-align: center;
}

.combine-stat-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 13px;
}

.combine-stat-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MONETIZATION — PRO / Funded Badges
   ═══════════════════════════════════════════════════════════════════════════════ */

.badge-pro {
    display: inline-block;
    background: linear-gradient(135deg, #eab308, #f59e0b);
    color: #000;
    font-size: 8px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    margin-left: 4px;
    vertical-align: middle;
}

.badge-funded {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #000;
    font-size: 8px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    margin-left: 4px;
    vertical-align: middle;
}

.chat-sender.pro {
    color: #eab308;
}

/* Store tab layout */
#store-panel {
    padding: 20px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Shared store card base */
.store-card {
    border-radius: 14px;
    padding: 28px 24px 24px;
    text-align: center;
    border: none;
    position: relative;
    overflow: hidden;
}

.store-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    padding: 1px;
    pointer-events: none;
}

.store-card-icon {
    font-size: 28px;
    margin-bottom: 10px;
    display: block;
}

.store-card-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

.store-card-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 18px;
    line-height: 1.6;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

.store-card-btn {
    border: none;
    padding: 12px 32px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    letter-spacing: 0.02em;
}

.store-card-btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.store-card-btn:active:not(:disabled) {
    transform: translateY(0);
}

.store-card-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Combine card */
.combine-entry-card {
    background: linear-gradient(160deg, rgba(99, 102, 241, 0.12) 0%, rgba(55, 48, 107, 0.18) 100%);
    box-shadow: 0 2px 16px rgba(99, 102, 241, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.combine-entry-card .store-card-title {
    color: #a5b4fc;
}

.combine-entry-card .store-card-btn {
    background: linear-gradient(135deg, #6366f1, #818cf8);
    color: #fff;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35);
}

.combine-entry-card .store-card-btn:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}

/* PRO card */
.pro-upgrade-card {
    background: linear-gradient(160deg, rgba(234, 179, 8, 0.10) 0%, rgba(120, 80, 0, 0.14) 100%);
    box-shadow: 0 2px 16px rgba(234, 179, 8, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.pro-upgrade-card .store-card-title {
    color: #fbbf24;
}

.pro-upgrade-card .store-card-btn {
    background: linear-gradient(135deg, #eab308, #f59e0b);
    color: #000;
    box-shadow: 0 4px 14px rgba(234, 179, 8, 0.3);
}

.pro-upgrade-card .store-card-btn:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(234, 179, 8, 0.4);
}

/* Badges cabinet */
.badges-cabinet {
    padding: 20px 16px 24px;
}

.badges-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.badges-header-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.badges-header-count {
    font-size: 12px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: 12px;
}

.badges-category {
    margin-bottom: 20px;
}

.badges-category-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.badge-card {
    border-radius: 12px;
    padding: 16px 10px 14px;
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
    cursor: default;
}

.badge-card.unlocked {
    box-shadow: 0 1px 10px var(--badge-glow, rgba(99, 102, 241, 0.12));
}

.badge-card.locked {
    background: rgba(255, 255, 255, 0.02);
    opacity: 0.35;
    filter: grayscale(1);
}

.badge-card.unlocked:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--badge-glow, rgba(99, 102, 241, 0.25));
}

.badge-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.badge-card-icon svg {
    width: 18px;
    height: 18px;
}

.badge-card-name {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}

.badge-card-desc {
    font-size: 9px;
    color: var(--text-muted);
    line-height: 1.4;
}

.badge-card.unlocked .badge-card-name {
    color: var(--badge-color, #a5b4fc);
}

.badge-card.unlocked {
    cursor: pointer;
}

.badge-card.showcase {
    outline: 2px solid var(--badge-color, #a5b4fc);
    outline-offset: -2px;
}

.badge-showcase-tag {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--badge-color, #a5b4fc);
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 5px;
    border-radius: 4px;
    text-transform: uppercase;
}

.badges-showcase-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 16px;
    font-size: 12px;
}

.showcase-label {
    font-weight: 600;
    color: var(--text-muted);
}

.showcase-current {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    font-weight: 600;
}

.showcase-hint {
    margin-left: auto;
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.6;
}

.badges-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 12px;
}

/* Inline badge icon (chat, leaderboard) */
.badge-icon-inline {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 2px;
    position: relative;
    cursor: default;
}

.badge-icon-inline svg {
    width: 10px;
    height: 10px;
}

.badge-icon-inline .badge-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary, #1a1a2e);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 10px;
    white-space: nowrap;
    font-size: 10px;
    color: #fff;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.badge-icon-inline .badge-tooltip-desc {
    display: block;
    color: var(--text-muted);
    font-size: 9px;
    margin-top: 2px;
}

.badge-icon-inline:hover .badge-tooltip {
    display: block;
}

/* Trader profile badges section */
.trader-profile-badges-section {
    padding: 14px 0 8px;
}

.trader-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 16px;
}

.trader-badge-pill {
    font-size: 11px;
    color: var(--text-muted);
}

.profile-badge-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: default;
    transition: transform 0.15s, box-shadow 0.15s;
}

.profile-badge-circle svg {
    width: 24px;
    height: 24px;
}

.profile-badge-circle:hover {
    transform: scale(1.12);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.profile-badge-circle .badge-tooltip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary, #1a1a2e);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 6px 10px;
    white-space: nowrap;
    font-size: 10px;
    color: #fff;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.profile-badge-circle .badge-tooltip .badge-tooltip-desc {
    display: block;
    color: var(--text-muted);
    font-size: 9px;
    margin-top: 2px;
}

.profile-badge-circle:hover .badge-tooltip {
    display: block;
}

/* Badge avatar (showcase) */
.trader-profile-avatar.badge-avatar {
    background: none;
    position: relative;
}

.trader-profile-avatar.badge-avatar .avatar-badge-bg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trader-profile-avatar.badge-avatar svg {
    width: 24px;
    height: 24px;
}

/* Leaderboard badge icons */
.leaderboard-badges {
    display: inline-flex;
    gap: 2px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Chat badge icons */
.chat-badge-icons {
    display: inline-flex;
    gap: 1px;
    margin-left: 3px;
    vertical-align: middle;
}

/* Checkout redirect overlay */
.checkout-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: checkoutFadeIn 0.15s ease-out;
}

@keyframes checkoutFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.checkout-overlay-content {
    text-align: center;
    padding: 40px;
}

.checkout-spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 20px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: #818cf8;
    border-radius: 50%;
    animation: checkoutSpin 0.7s linear infinite;
}

@keyframes checkoutSpin {
    to {
        transform: rotate(360deg);
    }
}

.checkout-overlay-text {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 6px;
    letter-spacing: 0.01em;
}

.checkout-overlay-sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

@media (max-width: 480px) {
    .locked-options {
        grid-template-columns: 1fr;
    }

    .locked-card {
        padding: 28px 20px 24px;
    }
}

/* Cookie Consent Banner */
.cookie-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    background: var(--bg-secondary);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 24px;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}

.cookie-banner-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 20px;
}

.cookie-banner-text {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.6;
    flex: 1;
    margin: 0;
}

.cookie-banner-text a {
    color: var(--accent-blue);
    text-decoration: none;
}

.cookie-banner-text a:hover {
    text-decoration: underline;
}

.cookie-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.cookie-btn {
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.15s;
}

.cookie-btn:hover {
    opacity: 0.85;
}

.cookie-btn-accept {
    background: var(--accent-blue);
    color: #fff;
}

.cookie-btn-reject {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}

@media (max-width: 600px) {
    .cookie-banner-inner {
        flex-direction: column;
        text-align: center;
    }

    .cookie-banner-actions {
        width: 100%;
    }

    .cookie-btn {
        flex: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN ANALYTICS DASHBOARD
   ═══════════════════════════════════════════════════════════════════════ */

.admin-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.admin-modal.active {
    display: flex;
}

.admin-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.admin-content {
    position: relative;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 90vw;
    max-width: 960px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
}

.admin-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.5px;
}

.admin-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-refresh-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.admin-refresh-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

.admin-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.admin-close:hover {
    color: var(--text-primary);
}

.admin-timestamp {
    padding: 6px 24px;
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    border-bottom: 1px solid var(--border);
}

.admin-body {
    overflow-y: auto;
    padding: 20px 24px 28px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-tertiary);
}

.admin-body::-webkit-scrollbar {
    width: 6px;
}

.admin-body::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
}

.admin-body::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border-radius: 3px;
}

.admin-loading,
.admin-error {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.admin-error {
    color: var(--accent-red);
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.admin-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
}

.admin-card-wide {
    grid-column: 1 / -1;
    overflow-x: auto;
}

.admin-card-highlight {
    border: 1px solid rgba(0, 200, 150, 0.3);
    background: linear-gradient(135deg, rgba(0, 200, 150, 0.06) 0%, var(--bg-card) 60%);
}

.admin-pnl-note {
    margin-top: 10px;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0.7;
    line-height: 1.4;
}

.admin-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
}

.admin-card-header svg {
    opacity: 0.6;
}

.admin-stat-big {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.2;
}

.admin-stat-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.admin-stat-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.admin-stat-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 50px;
}

.admin-stat-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'JetBrains Mono', monospace;
}

.admin-stat-sub {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-divider {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
}

.admin-pro {
    color: #f59e0b;
}

.admin-locked {
    color: var(--accent-red);
}

.admin-combine {
    color: var(--accent-blue);
}

.admin-buy {
    color: var(--accent-green);
}

.admin-sell {
    color: var(--accent-red);
}

.admin-revenue {
    color: var(--accent-green);
}

/* Admin table */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

.admin-table th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
}

.admin-table td {
    padding: 8px 12px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.admin-badge-pro {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

.admin-badge-free {
    background: rgba(107, 114, 128, 0.15);
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

/* Email export section */
.admin-email-desc {
    color: var(--text-secondary);
    font-size: 13px;
    margin-bottom: 14px;
}

.admin-email-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.admin-btn:hover {
    opacity: 0.85;
}

.admin-btn-secondary {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.admin-btn-secondary:hover {
    border-color: var(--text-muted);
    color: var(--text-primary);
}

.admin-api-url {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 14px;
    overflow-x: auto;
}

.admin-api-url code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
    word-break: break-all;
}

/* Admin dropdown button */
.user-dropdown-admin {
    color: #f59e0b !important;
}

@media (max-width: 768px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }

    .admin-content {
        width: 95vw;
        max-height: 90vh;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM NAVIGATION BAR (Trading212 style)
   ══════════════════════════════════════════════════════════════════════ */

#mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    #mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 65px;
        background: #0d1117;
        border-top: 1px solid #1e2a3a;
        z-index: 10000;
        justify-content: space-around;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    .mobile-nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        background: none;
        border: none;
        color: #6b7280;
        font-size: 10px;
        font-family: 'Inter', sans-serif;
        padding: 6px 12px;
        cursor: pointer;
        transition: color 0.2s;
        -webkit-tap-highlight-color: transparent;
        position: relative;
    }

    .mobile-nav-btn.active {
        color: #3b82f6;
    }

    .mobile-nav-btn.active::after {
        content: '';
        position: absolute;
        top: -1px;
        left: 50%;
        transform: translateX(-50%);
        width: 24px;
        height: 2px;
        background: #3b82f6;
        border-radius: 1px;
    }

    .mobile-nav-btn svg {
        stroke: currentColor;
    }

    .mobile-nav-btn span {
        font-weight: 500;
        letter-spacing: 0.2px;
    }

    /* ═══ NATIVE APP VIEW SYSTEM ═══ */

    body {
        overflow: hidden;
        overscroll-behavior-y: none;
        -webkit-user-select: none;
        user-select: none;
    }

    .main-grid {
        display: block !important;
        background: none;
        gap: 0;
        min-height: 0;
    }

    .right-panel {
        display: contents !important;
        position: static !important;
        width: auto !important;
    }

    .app-view {
        display: none !important;
        position: fixed;
        top: 88px;
        left: 0;
        width: 100vw;
        height: calc(100vh - 88px - 65px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        background: var(--bg-primary);
        padding-bottom: 0;
        z-index: 1;
        transition: top 0.3s ease, height 0.3s ease;
    }

    .app-view.active {
        display: block !important;
        animation: viewFadeIn 0.2s ease-out;
    }

    @keyframes viewFadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* Unwrap the inner containers so content fills the view */
    .app-view .sidebar {
        display: flex !important;
        position: static !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        z-index: auto !important;
        padding: 16px;
        padding-bottom: 0;
    }

    .app-view .center-content {
        display: block !important;
        padding-bottom: 0 !important;
    }

    .app-view .right-panel {
        display: block !important;
    }

    /* Portfolio: Hide desktop panels on mobile, show T212 hero */
    #view-portfolio .trading-panel {
        display: none !important;
    }

    #view-portfolio .portfolio-section {
        display: none !important;
    }

    #view-portfolio .order-history-section {
        display: none !important;
    }

    #order-history-center {
        display: none !important;
    }

    .rp-section {
        display: none !important;
    }

    #view-portfolio .portfolio-hero {
        display: block !important;
    }

    #view-portfolio #t212-trades-list {
        display: block !important;
    }

    /* Portfolio Hero Section */
    .portfolio-hero {
        padding: 30px 20px 20px 20px !important;
        background: #0a0e17 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .portfolio-balance-label {
        font-size: 13px !important;
        color: #8b929e !important;
        margin-bottom: 6px !important;
        display: block;
    }

    .portfolio-balance-value {
        font-size: 38px !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        letter-spacing: -1px !important;
        margin-bottom: 16px !important;
    }

    .portfolio-metrics {
        display: flex !important;
        gap: 30px !important;
    }

    .metric-col {
        display: flex !important;
        flex-direction: column !important;
    }

    .metric-val {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
    }

    /* Section Header */
    .t212-section-header {
        font-size: 18px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        padding: 24px 20px 12px 20px !important;
        background: #0a0e17 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    /* Rich Trade Row */
    .t212-trade-row {
        display: flex !important;
        align-items: center !important;
        padding: 16px 20px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        background: transparent !important;
    }

    .t212-trade-row:active {
        background: rgba(255, 255, 255, 0.03) !important;
    }

    .t212-trade-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: #151d2b !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #8b929e !important;
        margin-right: 14px !important;
        flex-shrink: 0 !important;
    }

    .t212-close-btn {
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: rgba(239, 68, 68, 0.10) !important;
        border: 1px solid rgba(239, 68, 68, 0.25) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 14px !important;
        flex-shrink: 0 !important;
        cursor: pointer !important;
        transition: background 0.15s, border-color 0.15s !important;
    }

    .t212-close-btn:active {
        background: rgba(239, 68, 68, 0.25) !important;
        border-color: rgba(239, 68, 68, 0.5) !important;
    }

    .t212-trade-left {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        gap: 3px !important;
    }

    .t212-trade-right {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 4px !important;
    }

    .t212-trade-desc {
        font-size: 13px !important;
        color: #8b929e !important;
    }

    .text-green {
        color: #00e676 !important;
    }

    .text-red {
        color: #ff3333 !important;
    }

    .t212-symbol {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #fff !important;
    }

    .t212-badge {
        display: inline-block;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
    }

    .t212-badge.buy {
        background: rgba(0, 255, 128, 0.15) !important;
        color: #00e676 !important;
    }

    .t212-badge.sell {
        background: rgba(255, 51, 51, 0.15) !important;
        color: #ff3333 !important;
    }

    .t212-trade-val {
        font-size: 16px !important;
        font-weight: 600 !important;
        color: #fff !important;
    }

    .t212-trade-pnl {
        font-size: 14px !important;
        font-weight: 500 !important;
    }

    .t212-text-green {
        color: #00e676 !important;
    }

    .t212-text-red {
        color: #ff3333 !important;
    }

    /* Only show trade bar on chart tab */
    body:not(.mobile-section-chart) #mobile-trade-bar {
        display: none !important;
    }

    /* ═══ TASK 1: Trading212-style Markets Watchlist ═══ */

    #view-markets .sidebar-title {
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: var(--text-muted);
        padding: 12px 16px 8px;
        margin-bottom: 0;
    }

    #view-markets .watchlist-item,
    #view-markets .market-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 16px 20px !important;
        min-height: 72px !important;
        margin: 0;
        border-radius: 0;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: transparent !important;
        cursor: pointer;
        transition: background 0.1s ease;
        -webkit-tap-highlight-color: transparent;
    }

    #view-markets .watchlist-item:active {
        background: rgba(255, 255, 255, 0.05) !important;
    }

    #view-markets .symbol-name,
    #view-markets .watchlist-name {
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        margin-bottom: 4px !important;
        letter-spacing: 0.2px;
    }

    #view-markets .symbol-desc {
        font-size: 13px !important;
        color: #8b929e !important;
    }

    #view-markets .watchlist-grade {
        font-size: 12px;
        color: var(--text-muted);
        margin-top: 2px;
    }

    #view-markets .watchlist-price {
        text-align: right;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 3px;
    }

    #view-markets .watchlist-value {
        font-family: 'JetBrains Mono', monospace;
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
    }

    #view-markets .watchlist-change {
        font-family: 'JetBrains Mono', monospace;
        font-size: 12px;
        font-weight: 600;
        padding: 2px 8px;
        border-radius: 4px;
        line-height: 1.4;
    }

    #view-markets .watchlist-change.up {
        background: rgba(16, 185, 129, 0.15);
        color: #34d399;
    }

    #view-markets .watchlist-change.down {
        background: rgba(239, 68, 68, 0.15);
        color: #f87171;
    }

    /* T212 Native Market Rows (sparkline layout) */
    .t212-market-row,
    .t212-trade-row {
        padding: 10px 16px !important;
    }

    .t212-market-row {
        display: grid !important;
        grid-template-columns: 2fr 1.2fr 1.5fr !important;
        gap: 8px !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        min-height: 56px !important;
        background: transparent !important;
    }

    .t212-market-row:active {
        background: rgba(255, 255, 255, 0.03) !important;
    }

    .t212-row-left {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-width: 0 !important;
    }

    .t212-flag-circle {
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: #151d2b !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        flex-shrink: 0 !important;
        overflow: hidden !important;
    }

    .t212-flag-circle .flag-img {
        border-radius: 2px !important;
    }

    .t212-symbol-stack {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        min-width: 0 !important;
    }

    .t212-symbol-name {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #ffffff !important;
        letter-spacing: 0.2px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .t212-symbol-desc {
        font-size: 11px !important;
        color: #6b7280 !important;
        font-weight: 400 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .t212-sparkline-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .t212-sparkline {
        width: 100% !important;
        height: 28px !important;
    }

    .t212-row-right {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 2px !important;
    }

    .t212-price-text {
        font-size: 14px !important;
        font-weight: 600 !important;
        font-family: 'JetBrains Mono', monospace !important;
        color: #fff !important;
    }

    .t212-change-pill {
        font-size: 10px !important;
        font-weight: 600 !important;
        font-family: 'JetBrains Mono', monospace !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
    }

    .t212-change-pill.up {
        background: rgba(16, 185, 129, 0.15) !important;
        color: var(--accent-green) !important;
    }

    .t212-change-pill.down {
        background: rgba(239, 68, 68, 0.15) !important;
        color: var(--accent-red) !important;
    }

    /* ═══ Auction Centres — mobile refinement ═══ */
    .calendar-item {
        padding: 14px 16px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    }

    .calendar-date {
        width: 44px !important;
        padding: 6px !important;
        background: #151d2b !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .calendar-day {
        font-size: 18px !important;
        font-weight: 700 !important;
        color: #fff !important;
        line-height: 1.1 !important;
    }

    .calendar-month {
        font-size: 9px !important;
        font-weight: 600 !important;
        color: #5c6370 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    .calendar-name {
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #fff !important;
    }

    .calendar-center {
        font-size: 12px !important;
        color: #5c6370 !important;
    }

    .calendar-status {
        font-size: 10px !important;
        font-weight: 700 !important;
        letter-spacing: 0.4px !important;
        padding: 3px 8px !important;
        border-radius: 6px !important;
    }

    .calendar-progress {
        height: 2px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        margin-top: 2px !important;
    }

    #view-markets .watchlist-tabs {
        display: flex;
        gap: 0;
        padding: 0 16px 8px;
    }

    #view-markets .watchlist-tab {
        flex: 1;
        padding: 8px 0;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
    }

    #view-markets .macro-item {
        min-height: 56px;
        padding: 10px 16px;
        margin: 0;
        border-radius: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* Hide desktop macro fallback rows on mobile — JS renders t212-market-rows instead */
    .macro-desktop-row {
        display: none !important;
    }

    /* ═══ Swipeable Weather Cards ═══ */

    .weather-cards-container {
        display: flex !important;
        overflow-x: auto !important;
        gap: 12px !important;
        padding: 8px 16px 12px 16px !important;
        margin: 0 16px !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }

    .weather-cards-container::-webkit-scrollbar {
        display: none !important;
    }

    /* ── Card shell ── */
    .t212-weather-card {
        flex: 0 0 155px !important;
        background: linear-gradient(168deg, #131a27 0%, #0f1520 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-radius: 14px !important;
        padding: 14px 14px 10px 14px !important;
        scroll-snap-align: start !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        cursor: pointer !important;
        position: relative !important;
        overflow: hidden !important;
        transition: border-color 0.2s, box-shadow 0.2s !important;
    }

    .t212-weather-card:active {
        border-color: rgba(255, 255, 255, 0.12) !important;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45) !important;
    }

    .t212-weather-card.weather-skeleton {
        opacity: 0.35;
        pointer-events: none;
    }

    .t212-weather-card.weather-error {
        border-color: rgba(255, 51, 51, 0.2) !important;
    }

    /* Accent bar at bottom — color driven by data-weather-bg */
    .wc-accent-bar {
        position: absolute !important;
        bottom: 0 !important;
        left: 14px !important;
        right: 14px !important;
        height: 2px !important;
        border-radius: 2px !important;
        background: var(--wc-bar-color, rgba(255, 255, 255, 0.08)) !important;
    }

    .t212-weather-card[data-weather-bg="sunny"] {
        --wc-bar-color: #f59e0b;
    }

    .t212-weather-card[data-weather-bg="cloudy"] {
        --wc-bar-color: #6b7280;
    }

    .t212-weather-card[data-weather-bg="rain"] {
        --wc-bar-color: #3b82f6;
    }

    .t212-weather-card[data-weather-bg="storm"] {
        --wc-bar-color: #8b5cf6;
    }

    .t212-weather-card[data-weather-bg="snow"] {
        --wc-bar-color: #93c5fd;
    }

    .t212-weather-card[data-weather-bg="foggy"] {
        --wc-bar-color: #9ca3af;
    }

    /* ── Head: region + condition ── */
    .wc-head {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        margin-bottom: 10px !important;
    }

    .wc-region {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        letter-spacing: 0.3px !important;
        line-height: 1.2 !important;
    }

    .wc-condition {
        font-size: 11px !important;
        color: #5c6370 !important;
        font-weight: 500 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        line-height: 1.2 !important;
    }

    /* ── Temperature row ── */
    .wc-temp-row {
        display: flex !important;
        align-items: baseline !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .wc-temp-val {
        font-size: 28px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        letter-spacing: -1.5px !important;
        line-height: 1 !important;
        font-family: 'JetBrains Mono', monospace !important;
    }

    .wc-feels {
        font-size: 11px !important;
        color: #4a5568 !important;
        font-weight: 500 !important;
    }

    /* ── Micro indicators row ── */
    .wc-indicators {
        display: flex !important;
        gap: 10px !important;
        padding-top: 8px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
    }

    .wc-ind {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
    }

    .wc-ind-icon {
        font-size: 10px !important;
        opacity: 0.4 !important;
        line-height: 1 !important;
    }

    .wc-ind-val {
        font-size: 11px !important;
        font-weight: 600 !important;
        color: #8b929e !important;
        font-family: 'JetBrains Mono', monospace !important;
        letter-spacing: -0.3px !important;
    }

    .wc-ind-val small {
        font-size: 8px !important;
        font-weight: 500 !important;
        opacity: 0.6 !important;
        margin-left: 1px !important;
    }

    .wc-retry-tap {
        font-size: 11px !important;
        color: #ff4444 !important;
        font-weight: 500 !important;
    }

    /* (Account view removed — replaced by Chat, Social, More tabs) */
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE STICKY BUY/SELL ACTION BAR
   ══════════════════════════════════════════════════════════════════════ */

#mobile-trade-bar {
    display: none;
}

@media (max-width: 768px) {
    #mobile-panel-menu {
        display: flex;
        flex-direction: column;
        padding-bottom: 90px;
    }

    .watchlist-section {
        order: 1;
    }

    .auction-status-section {
        order: 2;
        margin-top: 20px;
    }

    #mobile-panel-menu>.sidebar-section:not(.watchlist-section):not(.auction-status-section):not(.chat-section) {
        order: 3;
    }

    .mobile-leaderboard-section {
        order: 4;
    }

    .chat-section {
        order: 5;
    }
}

@media (max-width: 768px) {
    #mobile-trade-bar {
        display: flex;
        position: fixed;
        bottom: 65px;
        left: 0;
        width: 100%;
        padding: 8px 12px;
        background: var(--bg-primary);
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        gap: 10px;
        z-index: 999;
        pointer-events: none;
    }

    /* Only show trade bar on chart tab */
    body:not(.mobile-section-chart) #mobile-trade-bar {
        display: none !important;
    }

    .mobile-trade-btn {
        pointer-events: auto;
        flex: 1;
        height: 52px;
        border: none;
        border-radius: 10px;
        font-weight: 700;
        font-size: 14px;
        font-family: 'Inter', 'JetBrains Mono', sans-serif;
        color: #fff;
        cursor: pointer;
        line-height: 1.2;
        transition: opacity 0.15s, transform 0.1s;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-trade-btn:active {
        opacity: 0.8;
        transform: scale(0.97);
    }

    .mobile-trade-btn.buy {
        background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        box-shadow: 0 2px 12px rgba(16, 185, 129, 0.3);
    }

    .mobile-trade-btn.sell {
        background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        box-shadow: 0 2px 12px rgba(239, 68, 68, 0.3);
    }

    .mobile-trade-price {
        font-size: 12px;
        font-weight: 500;
        opacity: 0.9;
        font-family: 'JetBrains Mono', monospace;
    }
}

/* ========================================================
   FORCE NATIVE APP OVERRIDES (Trading212 Style)
   ======================================================== */
@media (max-width: 768px) {

    /* 1. Kill the desktop top-bar, footer, and market cards completely */
    .top-bar,
    .bottom-bar,
    .market-cards {
        display: none !important;
    }

    /* 2. Break elements out of the desktop grid */
    .main-grid {
        display: block !important;
    }

    .right-panel,
    .center-content {
        display: contents !important;
    }

    /* 3. The 4 Main Native Views */
    .app-view {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: calc(100vh - 65px) !important;
        background-color: #0a0e17 !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: none !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 20px !important;
    }

    .app-view.active {
        display: block !important;
        animation: viewFadeIn 0.2s ease-out;
    }

    .app-view .center-content {
        display: block !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 4. Seamless chart surface — one unified background, no block gaps */
    .chart-section {
        padding: 0 !important;
        margin: 0 !important;
        background: var(--bg-primary) !important;
        border: none !important;
    }

    /* Hide old desktop title/stats on mobile, keep controls */
    .chart-header .chart-title,
    .chart-header .chart-stats {
        display: none !important;
    }

    .chart-header {
        padding: 0 !important;
        margin: 0 !important;
        background: var(--bg-primary) !important;
        border: none !important;
    }

    /* ── T212 Pro Header (mobile only) ── */
    .t212-pro-header {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 20px 20px 12px 20px !important;
        background: #0a0e17 !important;
    }

    .pro-header-main {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }

    .pro-asset-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .pro-asset-info h1 {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        letter-spacing: -0.5px !important;
        line-height: 1 !important;
        margin: 0 !important;
    }

    .pro-asset-info span {
        font-size: 14px !important;
        color: #8b929e !important;
        font-weight: 500 !important;
    }

    .pro-price-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        gap: 4px !important;
    }

    .pro-live-price {
        font-size: 24px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        font-family: 'JetBrains Mono', monospace !important;
        line-height: 1 !important;
    }

    .pro-change-badge {
        font-size: 13px !important;
        font-weight: 600 !important;
        padding: 2px 8px !important;
        border-radius: 4px !important;
        background: rgba(16, 185, 129, 0.15) !important;
        color: #00e676 !important;
    }

    .pro-change-badge.negative {
        background: rgba(239, 68, 68, 0.15) !important;
        color: #ff3333 !important;
    }

    .pro-header-stats {
        display: flex !important;
        gap: 16px !important;
        padding-top: 12px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .stat-item {
        font-size: 12px !important;
        color: #8b929e !important;
        font-weight: 500 !important;
    }

    .stat-item span {
        color: #d1d5db !important;
        font-weight: 600 !important;
        font-family: 'JetBrains Mono', monospace !important;
        margin-left: 4px !important;
    }

    .chart-container {
        height: 55vh !important;
        border-radius: 0 !important;
        border: none !important;
        background: var(--bg-primary) !important;
    }

    .rsi-chart-container {
        background: var(--bg-primary) !important;
        border-radius: 0 !important;
        margin-top: 0 !important;
        border: none !important;
    }

    /* ── Mobile Chart Toolbar: single compact row ── */
    .chart-controls {
        position: relative !important;
        z-index: 50 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        overflow: visible !important;
        padding: 6px 12px !important;
        gap: 6px !important;
        background: var(--bg-primary) !important;
        border: none !important;
    }

    /* Reset dividers / margins on sub-containers */
    .chart-controls .chart-type-toggle,
    .chart-controls .studies-dropdown,
    .chart-controls .timeframe-dropdown {
        margin-left: 0 !important;
        padding-left: 0 !important;
        border-left: none !important;
    }

    /* Maximize button — small square icon tap target */
    .chart-controls .maximize-btn {
        flex-shrink: 0 !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: none !important;
        color: #6b7280 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Timeframe pill button */
    .chart-controls .timeframe-btn {
        flex-shrink: 0 !important;
        padding: 5px 10px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #9ca3af !important;
        gap: 4px !important;
    }

    /* Chart type icons — compact pair */
    .chart-controls .chart-type-toggle {
        display: flex !important;
        gap: 2px !important;
    }

    .chart-controls .chart-type-btn {
        flex-shrink: 0 !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #6b7280 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .chart-controls .chart-type-btn.active {
        background: rgba(26, 115, 232, 0.2) !important;
        color: #60a5fa !important;
        border-color: rgba(26, 115, 232, 0.35) !important;
    }

    /* Studies pill */
    .chart-controls .studies-btn {
        flex-shrink: 0 !important;
        padding: 5px 10px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #9ca3af !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }

    .chart-controls .studies-btn.has-active {
        background: rgba(139, 92, 246, 0.2) !important;
        color: #a78bfa !important;
        border-color: rgba(139, 92, 246, 0.35) !important;
    }

    .chart-controls .studies-btn svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* Active / pressed state for timeframe & studies */
    .chart-controls .timeframe-btn:active,
    .chart-controls .studies-btn:active {
        background: rgba(255, 255, 255, 0.1) !important;
    }

    /* 5. Fix the Sticky Buy/Sell Buttons */
    #mobile-trade-bar {
        display: flex !important;
        position: fixed !important;
        bottom: 65px !important;
        left: 0 !important;
        width: 100% !important;
        padding: 8px 12px !important;
        background: var(--bg-primary) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        z-index: 10001 !important;
        gap: 10px !important;
        pointer-events: none !important;
    }

    .mobile-trade-btn {
        pointer-events: auto !important;
        height: 56px !important;
        border-radius: 12px !important;
        font-size: 16px !important;
    }

    /* 6. Lock Bottom Nav to the bottom */
    #mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 65px !important;
        background: #0a0e17 !important;
        border-top: 1px solid var(--border) !important;
        z-index: 10000 !important;
        pointer-events: auto !important;
    }

    /* 6b. Ghost Share Button */
    .ghost-share-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: fixed !important;
        bottom: 82px !important;
        right: 16px !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        background: rgba(13, 17, 23, 0.6) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        color: rgba(255, 255, 255, 0.5) !important;
        z-index: 9998 !important;
        cursor: pointer !important;
        opacity: 0;
        visibility: hidden;
        transform: scale(0.8);
        transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.3s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
        -webkit-tap-highlight-color: transparent;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    }

    .ghost-share-btn.visible {
        opacity: 0.7;
        visibility: visible;
        transform: scale(1);
    }

    .ghost-share-btn:active,
    .ghost-share-btn.visible:hover {
        opacity: 1 !important;
        color: #fff !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        background: rgba(13, 17, 23, 0.85) !important;
        transform: scale(1.05);
    }

    .ghost-share-btn svg {
        pointer-events: none;
    }

    /* 7. Mobile Top Header Bar */
    #mobile-top-header {
        display: flex !important;
        align-items: center;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 60px !important;
        background: #0a0e17 !important;
        border-bottom: none !important;
        z-index: 10000 !important;
        padding: 0 16px !important;
        gap: 12px;
        transition: transform 0.3s ease;
    }

    #mobile-top-header.header-hidden {
        transform: translateY(-100%);
    }

    /* 7b. Live Ticker Tape — sits below header */
    .ticker-strip {
        display: block !important;
        position: fixed !important;
        top: 60px !important;
        left: 0 !important;
        width: 100% !important;
        height: 28px !important;
        background: #0a0e17 !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
        z-index: 9999 !important;
        overflow: hidden !important;
        transition: transform 0.3s ease;
    }

    body.mth-header-hidden .ticker-strip {
        transform: translateY(-60px);
    }

    .ticker-strip .ticker-track {
        height: 28px !important;
    }

    .ticker-strip .ticker-item {
        padding: 0 12px !important;
        font-size: 11px !important;
    }

    .ticker-strip .ticker-symbol {
        font-size: 10px !important;
    }

    .ticker-strip .ticker-price,
    .ticker-strip .ticker-change {
        font-size: 10px !important;
        font-family: 'JetBrains Mono', monospace !important;
    }

    .mth-hamburger {
        background: none;
        border: none;
        color: var(--text-primary);
        padding: 6px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }

    .mth-logo {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }

    .mth-logo-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: linear-gradient(135deg, var(--accent-blue), #1557b0);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 12px;
        color: #fff;
    }

    .mth-logo-text {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .mth-balance-pill {
        margin-left: auto;
        background: rgba(26, 115, 232, 0.1);
        border: 1px solid rgba(26, 115, 232, 0.25);
        border-radius: 20px;
        padding: 6px 14px;
    }

    .mth-balance-amount {
        font-family: 'JetBrains Mono', monospace;
        font-size: 14px;
        font-weight: 600;
        color: var(--accent-blue);
    }

    .mth-status {
        flex-shrink: 0;
        padding: 4px;
    }

    .mth-status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent-green);
        animation: mthStatusPulse 2s infinite;
    }

    @keyframes mthStatusPulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: 0.4;
        }
    }

    /* 8. Hamburger Slide-out Menu */
    .mth-menu-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 10000;
    }

    .mth-menu-overlay.active {
        display: block;
    }

    .mth-menu {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100vh;
        background: #0d1117;
        z-index: 10001;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
    }

    .mth-menu.active {
        display: block;
        transform: translateX(0);
    }

    .mth-menu-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 20px 16px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .mth-menu-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--accent-blue);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 15px;
        color: #fff;
        flex-shrink: 0;
    }

    .mth-menu-user {
        flex: 1;
        min-width: 0;
    }

    .mth-menu-username {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mth-menu-mode {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 1px;
        color: #60a5fa;
        margin-top: 1px;
    }

    .mth-menu-close {
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 28px;
        cursor: pointer;
        padding: 0 4px;
        line-height: 1;
    }

    .mth-menu-balance-row {
        display: flex;
        padding: 14px 16px;
        gap: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .mth-menu-stat {
        flex: 1;
    }

    .mth-menu-stat-value {
        font-family: 'JetBrains Mono', monospace;
        font-size: 15px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .mth-menu-stat-label {
        font-size: 11px;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 2px;
    }

    .mth-menu-items {
        padding: 8px 0;
    }

    .mth-menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 14px 20px;
        background: none;
        border: none;
        color: var(--text-primary);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s;
    }

    .mth-menu-item:active {
        background: rgba(255, 255, 255, 0.04);
    }

    .mth-menu-item svg {
        color: var(--text-muted);
        flex-shrink: 0;
    }

    .mth-menu-divider {
        height: 1px;
        background: rgba(255, 255, 255, 0.06);
        margin: 4px 16px;
    }

    .mth-menu-logout {
        color: var(--accent-red) !important;
    }

    .mth-menu-logout svg {
        color: var(--accent-red) !important;
    }

    /* 9. App-view positioning for header + ticker */
    .app-view {
        top: 88px !important;
        height: calc(100vh - 88px - 65px) !important;
        padding-bottom: 8px !important;
        transition: top 0.3s ease, height 0.3s ease !important;
    }

    body.mth-header-hidden .app-view {
        top: 0 !important;
        height: calc(100vh - 65px) !important;
    }

    #view-chart {
        padding-bottom: 72px !important;
    }

    /* Hide chat section on Home view — chat has its own tab now */
    #view-markets #chat-section-sidebar {
        display: none !important;
    }

    /* Modals must sit above app-views (9999) and header/nav (10000) */
    .portfolio-modal {
        z-index: 10003 !important;
    }

    .portfolio-modal-content {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: calc(100vh - 88px - 65px) !important;
        margin: 88px 0 65px !important;
        border-radius: 0 !important;
    }

    .pairs-modal-overlay {
        z-index: 10003 !important;
    }

    .trader-profile-modal {
        z-index: 10003 !important;
    }

    .trader-profile-modal.active {
        align-items: stretch !important;
    }

    .trader-profile-card {
        width: 100% !important;
        max-width: 100vw !important;
        max-height: calc(100vh - 88px - 65px) !important;
        margin: 88px 0 65px !important;
        border-radius: 0 !important;
        padding: 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .trader-profile-close {
        position: sticky !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 5 !important;
        float: right !important;
        background: var(--bg-secondary) !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
    }

    /* 10. Kill rotate prompt and panel-maximized popup on mobile */
    .rotate-prompt {
        display: none !important;
    }

    .panel-maximized {
        position: static !important;
        width: auto !important;
        height: auto !important;
        z-index: auto !important;
    }

    /* 11. Watchlist Polish — consistent 16px gutters, tighter spacing */
    #view-markets .sidebar {
        padding: 0 !important;
    }

    #view-markets .sidebar-section {
        padding: 0 !important;
        margin-bottom: 8px !important;
    }

    #view-markets .sidebar-title {
        padding: 12px 16px 6px !important;
        background: transparent !important;
        margin: 0 !important;
        font-size: 13px !important;
    }

    #view-markets .movers-grid {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding: 4px 16px 12px 16px !important;
        margin: 0 16px !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    #view-markets .movers-grid::-webkit-scrollbar {
        display: none !important;
    }

    #view-markets .mover-card {
        flex: 0 0 130px !important;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        background: #131a27 !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        scroll-snap-align: start !important;
    }

    #view-markets .watchlist-item,
    #view-markets .market-row {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        padding: 16px 0 !important;
        min-height: 72px !important;
    }

    /* New views — unhide children on mobile */
    #view-chat>*,
    #view-social>* {
        display: revert !important;
    }

    #view-chat {
        display: none !important;
        overflow: hidden !important;
    }

    #view-chat.active {
        display: flex !important;
        flex-direction: column !important;
    }

    #view-chat .vchat-container {
        display: flex !important;
        flex: 1 !important;
        min-height: 0 !important;
    }

    /* More view — explicit control (no revert) */
    #view-more #more-menu-grid {
        display: block !important;
    }

    #view-more #more-menu-grid.hidden {
        display: none !important;
    }

    #view-more .more-sub-screen {
        display: none !important;
    }

    #view-more .more-sub-screen.active {
        display: block !important;
    }

    /* 12. Bottom nav — icon-only, no labels */
    .mobile-nav-btn {
        padding: 10px 6px !important;
        gap: 0 !important;
    }

    .mobile-nav-btn span:not(.nav-chat-badge) {
        display: none !important;
    }

    .mobile-nav-btn svg {
        width: 26px !important;
        height: 26px !important;
        stroke-width: 2 !important;
        shape-rendering: geometricPrecision !important;
    }

    /* 12b. Chat unread badge on nav icon */
    .nav-chat-badge {
        display: none;
        position: absolute;
        top: 4px;
        right: 2px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: var(--accent-blue);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
        pointer-events: none;
    }

    .nav-chat-badge.visible {
        display: block;
    }

    /* 12c. Hide old bottom-left chat popup on mobile */
    .chat-notification-badge {
        display: none !important;
    }

    /* 13. VIEW: CHAT — Full-screen messenger */
    .vchat-container {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .vchat-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        background: var(--bg-secondary);
        flex-shrink: 0;
    }

    .vchat-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .vchat-online {
        font-size: 12px;
        color: var(--accent-green);
    }

    .vchat-messages {
        flex: 1;
        overflow-y: auto;
        padding: 12px 16px;
        -webkit-overflow-scrolling: touch;
    }

    .vchat-input-bar {
        display: flex;
        gap: 8px;
        padding: 10px 16px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--border);
        background: var(--bg-secondary);
        flex-shrink: 0;
    }

    .vchat-input {
        flex: 1;
        min-height: 40px;
        padding: 8px 14px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--border);
        border-radius: 20px;
        color: var(--text-primary);
        font-size: 14px;
        outline: none;
    }

    .vchat-input:focus {
        border-color: rgba(26, 115, 232, 0.5);
    }

    .vchat-send {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--accent-blue);
        border: none;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex-shrink: 0;
    }

    /* 14. VIEW: SOCIAL — Leaderboard */
    .vsocial-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        background: var(--bg-secondary);
    }

    .vsocial-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .vsocial-date {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.5px;
        color: var(--accent-orange);
    }

    .vsocial-list {
        padding: 0;
    }

    .vsocial-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .vsocial-item:active {
        background: rgba(255, 255, 255, 0.03);
    }

    .vsocial-rank {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        color: var(--text-muted);
        background: rgba(255, 255, 255, 0.05);
        flex-shrink: 0;
    }

    .vsocial-rank.gold {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: #fff;
    }

    .vsocial-rank.silver {
        background: linear-gradient(135deg, #9ca3af, #6b7280);
        color: #fff;
    }

    .vsocial-rank.bronze {
        background: linear-gradient(135deg, #d97706, #92400e);
        color: #fff;
    }

    .vsocial-name {
        flex: 1;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .vsocial-return {
        font-family: 'JetBrains Mono', monospace;
        font-size: 13px;
        font-weight: 600;
    }

    .vsocial-return.up {
        color: var(--accent-green);
    }

    .vsocial-return.down {
        color: var(--accent-red);
    }

    /* 15. VIEW: MORE — Row list + sub-screens */
    .more-list {
        padding: 8px 0;
    }

    .more-row {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 16px 20px;
        background: none;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        margin: 0 auto;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .more-row:last-child {
        border-bottom: none;
    }

    .more-row:active {
        background: rgba(255, 255, 255, 0.03);
    }

    .more-row-icon {
        flex-shrink: 0;
    }

    .more-row-label {
        flex: 1;
        font-size: 15px;
        font-weight: 500;
        color: var(--text-primary);
        text-align: left;
    }

    .more-row-arrow {
        flex-shrink: 0;
        color: var(--text-muted);
        opacity: 0.4;
    }

    .more-sub-screen {
        display: none;
        background: #0a0e17;
        min-height: 100%;
    }

    .more-sub-screen.active {
        display: block;
    }

    .more-sub-header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        background: #0f1520;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .more-sub-header span {
        font-size: 16px;
        font-weight: 700;
        color: #f3f4f6;
    }

    .more-back-btn {
        background: none;
        border: none;
        color: var(--accent-blue);
        cursor: pointer;
        padding: 6px;
        display: flex;
        align-items: center;
        border-radius: 8px;
    }

    .more-back-btn:active {
        background: rgba(255, 255, 255, 0.06);
    }

    .more-sub-content {
        padding: 0;
        padding-bottom: 80px;
    }

    /* T212 Grouped Account Menu */
    .t212-menu-container {
        padding: 16px !important;
        background: #0a0e17 !important;
    }

    .t212-menu-profile {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        margin-bottom: 32px !important;
        padding: 0 8px !important;
    }

    .t212-profile-avatar {
        width: 60px !important;
        height: 60px !important;
        border-radius: 50% !important;
        background: var(--accent-blue) !important;
        color: white !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        flex-shrink: 0 !important;
    }

    .t212-profile-name {
        font-size: 20px !important;
        font-weight: 700 !important;
        color: white !important;
        margin-bottom: 4px !important;
    }

    .t212-profile-status {
        font-size: 12px !important;
        color: var(--accent-green) !important;
        font-weight: 600 !important;
        background: rgba(16, 185, 129, 0.15) !important;
        padding: 3px 8px !important;
        border-radius: 4px !important;
        display: inline-block !important;
    }

    .t212-menu-group {
        background: #151d2b !important;
        border-radius: 12px !important;
        margin-bottom: 24px !important;
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .t212-menu-row {
        display: flex !important;
        align-items: center !important;
        padding: 16px !important;
        background: transparent !important;
        cursor: pointer !important;
        transition: background 0.15s !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    }

    .t212-menu-row:active {
        background: rgba(255, 255, 255, 0.05) !important;
    }

    .t212-menu-row:last-child {
        border-bottom: none !important;
    }

    .t212-row-icon {
        width: 32px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-shrink: 0 !important;
    }

    .t212-row-icon svg {
        flex-shrink: 0 !important;
    }

    .t212-row-label {
        flex: 1 !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #e5e7eb !important;
    }

    .t212-row-chevron {
        font-size: 22px !important;
        color: #4b5563 !important;
        font-family: monospace !important;
        padding-left: 8px !important;
    }

    /* ── More sub-screen unified card system ── */
    .ms-card {
        background: #151d2b;
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        margin: 8px 16px;
        padding: 14px 16px;
        cursor: pointer;
        transition: background 0.15s;
    }

    .ms-card:first-child {
        margin-top: 16px;
    }

    .ms-card:active {
        background: rgba(255, 255, 255, 0.06);
    }

    .ms-card-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .ms-card-icon {
        font-size: 28px;
        flex-shrink: 0;
        width: 42px;
        text-align: center;
    }

    .ms-card-info {
        flex: 1;
        min-width: 0;
    }

    .ms-card-title {
        font-size: 14px;
        font-weight: 600;
        color: #f3f4f6;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ms-card-sub {
        font-size: 12px;
        color: #6b7280;
        margin-top: 2px;
    }

    .ms-card-value {
        font-size: 15px;
        font-weight: 700;
        color: #f3f4f6;
        font-family: 'JetBrains Mono', monospace;
        flex-shrink: 0;
    }

    .ms-card-stats {
        display: flex;
        gap: 16px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.04);
        font-size: 12px;
        color: #9ca3af;
    }

    .ms-card-chevron {
        font-size: 22px;
        color: #4b5563;
        font-family: monospace;
        flex-shrink: 0;
    }

    .ms-weather-icon-wrap {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.04);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .ms-stats-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 16px;
    }

    .ms-stat-card {
        background: #151d2b;
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        padding: 14px;
        text-align: center;
    }

    .ms-stat-value {
        font-size: 18px;
        font-weight: 700;
        color: #f3f4f6;
        font-family: 'JetBrains Mono', monospace;
        margin-bottom: 4px;
    }

    .ms-stat-label {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: #6b7280;
        font-weight: 600;
    }

    .ms-section-title {
        font-size: 13px;
        font-weight: 700;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 8px 16px 4px;
    }

    .ms-trade-badge {
        width: 42px;
        height: 42px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 11px;
        font-weight: 700;
        margin-right: 2px;
    }

    .ms-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 48px 24px;
        text-align: center;
    }

    .ms-empty svg {
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .ms-empty p {
        font-size: 15px;
        font-weight: 600;
        color: #9ca3af;
        margin: 0;
    }

    .ms-empty-sub {
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #4b5563 !important;
        margin-top: 6px !important;
    }

    /* More sub-screen: contact card */
    .more-contact-card {
        text-align: center;
        padding: 40px 20px;
    }

    .more-contact-card h3 {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
        margin: 16px 0 8px;
    }

    .more-contact-card p {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 24px;
    }

    .more-contact-link {
        display: block;
        padding: 14px;
        background: var(--accent-blue);
        color: #fff;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        margin-bottom: 10px;
    }

    .more-contact-link.secondary {
        background: rgba(26, 115, 232, 0.1);
        color: var(--accent-blue);
    }

}

/* =========================================
   ORDER MANAGEMENT MODAL
   ========================================= */
.order-mgmt-overlay {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: omFadeIn 0.2s ease-out;
}

@keyframes omFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes omSlideUp {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.order-mgmt-card {
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px 18px 0 0;
    width: 100%;
    max-width: 420px;
    padding: 20px 20px 28px;
    animation: omSlideUp 0.25s ease-out;
}

.order-mgmt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.order-mgmt-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-mgmt-side {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
}

.order-mgmt-sym {
    font-size: 16px;
    font-weight: 600;
    color: #f3f4f6;
}

.order-mgmt-close-x {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: #9ca3af;
    font-size: 20px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.order-mgmt-close-x:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.order-mgmt-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.order-mgmt-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 10px 12px;
}

.order-mgmt-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    margin-bottom: 4px;
}

.order-mgmt-stat-value {
    font-size: 14px;
    font-weight: 600;
    color: #f3f4f6;
    font-family: 'JetBrains Mono', monospace;
}

.order-mgmt-pnl {
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    margin-bottom: 16px;
}

.order-mgmt-pnl-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9ca3af;
    margin-bottom: 4px;
}

.order-mgmt-pnl-value {
    font-size: 20px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
}

.order-mgmt-sltp {
    margin-bottom: 16px;
}

.order-mgmt-sltp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.order-mgmt-sltp-label {
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    min-width: 80px;
}

.order-mgmt-sltp-input-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

.order-mgmt-sltp-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #9ca3af;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-mgmt-sltp-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.order-mgmt-sltp-input {
    width: 90px;
    background: transparent;
    border: none;
    color: #f3f4f6;
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    padding: 8px 0;
    -moz-appearance: textfield;
    appearance: textfield;
}

.order-mgmt-sltp-input::-webkit-outer-spin-button,
.order-mgmt-sltp-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.order-mgmt-sltp-input::placeholder {
    color: #4b5563;
}

.order-mgmt-actions {
    display: flex;
    gap: 10px;
}

.order-mgmt-btn {
    flex: 1;
    padding: 13px;
    border-radius: 10px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.order-mgmt-btn:active {
    opacity: 0.8;
}

.order-mgmt-btn-save {
    background: rgba(255, 255, 255, 0.08);
    color: #f3f4f6;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.order-mgmt-btn-save:hover {
    background: rgba(255, 255, 255, 0.14);
}

.order-mgmt-btn-close {
    background: #ef4444;
    color: #fff;
}

.order-mgmt-btn-close:hover {
    background: #dc2626;
}

@media (min-width: 769px) {
    .order-mgmt-overlay {
        align-items: center;
    }

    .order-mgmt-card {
        border-radius: 18px;
        max-width: 400px;
    }
}

/* =========================================
   LANDSCAPE "PRO" CHARTING MODE
   ========================================= */
@media (max-width: 932px) and (orientation: landscape) {

    #mobile-bottom-nav,
    #mobile-trade-bar,
    .portfolio-hero,
    .t212-menu-container,
    .ticker-strip,
    .ghost-share-btn {
        display: none !important;
    }

    .app-view {
        height: 100vh !important;
        padding-bottom: 0 !important;
        z-index: 99999 !important;
    }

    .chart-container {
        height: calc(100vh - 60px) !important;
        border: none !important;
    }

    .weather-cards-container {
        display: none !important;
    }
}

/* =============================================
   ANALYTICS TERMINAL v1.0
   Institutional dark-mode widget framework
   ============================================= */
:root {
    --terminal-bg: #050505;
    --widget-bg: #0a0a0a;
    --border-color: #1f1f1f;
    --text-mono: 'JetBrains Mono', monospace;
}

/* ── Analytics grid (12-col) ── */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 12px;
    padding: 16px;
    background: var(--terminal-bg);
    flex: 1;
    min-height: 0;
    align-content: start;
}

/* ── Widget chrome ── */
.analytics-grid .widget {
    background: var(--widget-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.2s;
}

.analytics-grid .widget:hover {
    box-shadow: 0 0 0 1px #2a2a2a;
}

.analytics-grid .widget.maximized {
    position: fixed;
    inset: 0;
    z-index: 500;
    border-radius: 0;
    border: none;
    background: var(--terminal-bg);
}

.widget-header {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--text-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555;
    flex-shrink: 0;
    background: #070707;
}

.widget-header .wh-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.widget-header .wh-left svg {
    width: 14px;
    height: 14px;
    opacity: 0.4;
}

.widget-header .wh-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.wh-btn {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.12s;
}

.wh-btn:hover {
    color: #aaa;
    background: #151515;
}

.wh-btn svg {
    width: 12px;
    height: 12px;
}

.widget-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.widget-content::-webkit-scrollbar {
    width: 3px;
}

.widget-content::-webkit-scrollbar-track {
    background: transparent;
}

.widget-content::-webkit-scrollbar-thumb {
    background: #1a1a1a;
    border-radius: 2px;
}

/* ── Live pulse badge ── */
@keyframes terminal-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.pulse {
    font-family: var(--text-mono);
    font-size: 9px;
    font-weight: 700;
    color: #00ff88;
    letter-spacing: 0.08em;
    animation: terminal-pulse 2s ease-in-out infinite;
}

.pulse-ai {
    color: #8b5cf6;
}

/* ── Analytics toolbar ── */
.analytics-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 16px;
    background: #080808;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    gap: 2px;
}

.btn-sm {
    font-family: var(--text-mono);
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border: 1px solid #222;
    background: transparent;
    color: #555;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.12s;
}

.btn-sm:hover {
    color: #ccc;
    border-color: #444;
}

.btn-sm.active {
    background: var(--accent-blue);
    color: #fff;
    border-color: var(--accent-blue);
}

.origin-group {
    display: flex;
    gap: 2px;
}

.origin-btn {
    font-family: var(--text-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border: 1px solid #222;
    background: transparent;
    color: #555;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.12s;
}

.origin-btn:hover {
    color: #ccc;
    border-color: #444;
}

.origin-btn.active {
    background: #111;
    color: #eee;
    border-color: #444;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: #1a1a1a;
}

.search-bar {
    flex: 1;
    min-width: 160px;
    max-width: 360px;
}

.search-bar input {
    width: 100%;
    font-family: var(--text-mono);
    font-size: 11px;
    padding: 5px 10px;
    border: 1px solid #1a1a1a;
    background: #080808;
    color: #666;
    border-radius: 3px;
    outline: none;
    transition: border-color 0.15s;
}

.search-bar input:focus {
    border-color: #333;
    color: #ccc;
}

.search-bar input::placeholder {
    color: #333;
}

.toolbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.toolbar-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--text-mono);
    font-size: 10px;
    color: #444;
}

.toolbar-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00ff88;
    animation: terminal-pulse 2s ease-in-out infinite;
}

.toolbar-status-dot.offline {
    background: #ff3344;
    animation: none;
}

.toolbar-csv {
    font-family: var(--text-mono);
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border: 1px solid #222;
    background: transparent;
    color: #555;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.12s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.toolbar-csv:hover {
    color: #ccc;
    border-color: #444;
}

.toolbar-csv svg {
    width: 12px;
    height: 12px;
}

/* ── Data table ── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--text-mono);
    font-size: 12px;
}

.data-table th {
    position: sticky;
    top: 0;
    background: #070707;
    padding: 6px 12px;
    text-align: left;
    font-size: 9px;
    font-weight: 700;
    color: #444;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    z-index: 2;
}

.data-table th:hover {
    color: #888;
}

.data-table th .sort-arr {
    font-size: 8px;
    margin-left: 2px;
    opacity: 0.5;
}

.data-table th .sort-arr.on {
    opacity: 1;
    color: var(--accent-blue);
}

.data-table tr {
    border-bottom: 1px solid #111;
}

.data-table tr:hover {
    background: #0d0d0d;
}

.data-table td {
    padding: 7px 12px;
    white-space: nowrap;
}

.td-up {
    color: #00ff88;
}

.td-dn {
    color: #ff3344;
}

.td-flat {
    color: #444;
}

/* ── Heatmap ── */
.heatmap-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 3px;
    padding: 10px;
}

.heatmap-cell {
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: transform 0.15s, box-shadow 0.15s;
    cursor: pointer;
    position: relative;
    border: 1px solid transparent;
    overflow: hidden;
}

.heatmap-cell:hover {
    transform: scale(1.06);
    z-index: 10;
    border-color: #888;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
}

.hm-sym {
    font-family: var(--text-mono);
    font-weight: 700;
    color: #fff;
    line-height: 1;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.hm-prc {
    font-family: var(--text-mono);
    font-size: 9px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 1px;
}

.hm-chg {
    font-family: var(--text-mono);
    font-size: 9px;
    font-weight: 600;
}

.hm-vol-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    opacity: 0.5;
}

/* Heatmap tooltip */
.hm-tooltip {
    position: fixed;
    z-index: 600;
    padding: 8px 12px;
    background: #111;
    border: 1px solid #333;
    border-radius: 4px;
    font-family: var(--text-mono);
    font-size: 10px;
    color: #ccc;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    display: none;
}

.hm-tooltip.visible {
    display: block;
}

.hm-tooltip .tt-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 1px 0;
}

.hm-tooltip .tt-label {
    color: #666;
}

.hm-tooltip .tt-val {
    font-weight: 600;
    color: #eee;
}

/* ── Correlation chart ── */
.corr-controls-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-bottom: 1px solid #111;
    flex-wrap: wrap;
}

.corr-btn {
    font-family: var(--text-mono);
    font-size: 9px;
    font-weight: 600;
    padding: 3px 8px;
    border: 1px solid #222;
    background: transparent;
    color: #444;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.12s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.corr-btn:hover {
    color: #999;
    border-color: #444;
}

.corr-btn.active {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background: rgba(26, 115, 232, 0.05);
}

.corr-btn .cb-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.corr-chart-area {
    flex: 1;
    min-height: 200px;
    padding: 8px 12px 4px;
    position: relative;
}

.corr-chart-area svg {
    width: 100%;
    height: 100%;
}

.corr-crosshair {
    position: absolute;
    top: 8px;
    bottom: 4px;
    width: 1px;
    background: #333;
    pointer-events: none;
    display: none;
}

.corr-tooltip-box {
    position: absolute;
    top: 8px;
    padding: 4px 8px;
    background: #111;
    border: 1px solid #333;
    border-radius: 3px;
    font-family: var(--text-mono);
    font-size: 9px;
    color: #ccc;
    pointer-events: none;
    display: none;
    white-space: nowrap;
}

.corr-footer {
    display: flex;
    gap: 14px;
    padding: 4px 12px 6px;
    border-top: 1px solid #111;
    font-family: var(--text-mono);
    font-size: 9px;
    color: #333;
}

.corr-footer-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.corr-footer-dot {
    width: 10px;
    height: 2px;
    border-radius: 1px;
}

/* ── News / Sentiment feed ── */
.news-item-row {
    padding: 8px 12px;
    border-bottom: 1px solid #111;
    cursor: pointer;
    transition: background 0.1s;
}

.news-item-row:hover {
    background: #0d0d0d;
}

.news-row-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.news-title {
    font-size: 11px;
    font-weight: 600;
    color: #bbb;
    line-height: 1.3;
}

.news-time {
    font-family: var(--text-mono);
    font-size: 9px;
    color: #333;
    white-space: nowrap;
    flex-shrink: 0;
}

.news-excerpt {
    font-size: 10px;
    color: #555;
    line-height: 1.45;
    margin: 3px 0 5px;
}

.sentiment-bar-track {
    width: 100%;
    height: 3px;
    background: #111;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.sentiment-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s;
}

.news-tags-row {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 4px;
}

.ntag {
    font-family: var(--text-mono);
    font-size: 8px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ntag-bull {
    background: rgba(0, 255, 136, 0.08);
    color: #00ff88;
}

.ntag-bear {
    background: rgba(255, 51, 68, 0.08);
    color: #ff3344;
}

.ntag-neut {
    background: rgba(100, 100, 100, 0.08);
    color: #555;
}

.news-digest-btn {
    font-family: var(--text-mono);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.04);
    color: #8b5cf6;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.12s;
    margin-left: auto;
}

.news-digest-btn:hover {
    background: rgba(139, 92, 246, 0.12);
}

/* ── AI Drawer (right slide-out) ── */
.ai-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 598;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.ai-drawer-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.ai-drawer {
    position: fixed;
    top: 0;
    right: -440px;
    width: 420px;
    height: 100vh;
    background: #080808;
    border-left: 1px solid #1a1a1a;
    z-index: 599;
    transition: right 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.6);
}

.ai-drawer.open {
    right: 0;
}

.ai-drawer-head {
    padding: 12px 16px;
    border-bottom: 1px solid #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ai-drawer-head h3 {
    font-family: var(--text-mono);
    font-size: 11px;
    font-weight: 700;
    color: #8b5cf6;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ai-drawer-close {
    background: none;
    border: none;
    color: #444;
    font-size: 18px;
    cursor: pointer;
}

.ai-drawer-close:hover {
    color: #ccc;
}

.ai-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.ai-impact-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #111;
}

.ai-impact-row:last-child {
    border-bottom: none;
}

.ai-impact-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

.ai-impact-dot.bull {
    background: #00ff88;
}

.ai-impact-dot.bear {
    background: #ff3344;
}

.ai-impact-dot.neut {
    background: #f59e0b;
}

.ai-impact-text {
    font-size: 12px;
    line-height: 1.5;
    color: #888;
}

.ai-impact-text strong {
    color: #ccc;
}

/* ── RSI Matrix ── */
.rsi-table {
    width: 100%;
    border-collapse: collapse;
}

.rsi-table th {
    font-family: var(--text-mono);
    font-size: 9px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    background: #070707;
    position: sticky;
    top: 0;
    z-index: 2;
    cursor: pointer;
    user-select: none;
}

.rsi-table th:hover {
    color: #666;
}

.rsi-table td {
    font-family: var(--text-mono);
    font-size: 11px;
    padding: 6px 10px;
    border-bottom: 1px solid #0d0d0d;
    white-space: nowrap;
}

.rsi-table tr:hover {
    background: #0a0a0a;
}

.rsi-origin {
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: #aaa;
}

.rsi-origin img {
    width: 14px;
    height: auto;
    border-radius: 2px;
}

.rsi-bar-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rsi-bar-track {
    flex: 1;
    height: 3px;
    background: #111;
    border-radius: 2px;
    overflow: hidden;
}

.rsi-bar-fill {
    height: 100%;
    border-radius: 2px;
}

/* ── Alpha Tracker (Quant Sheet) ── */
.qt-card {
    padding: 10px 12px;
    border-bottom: 1px solid #111;
}

.qt-label {
    font-family: var(--text-mono);
    font-size: 9px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 3px;
}

.qt-value {
    font-family: var(--text-mono);
    font-size: 20px;
    font-weight: 700;
    color: #eee;
}

.qt-value.green {
    color: #00ff88;
}

.qt-value.red {
    color: #ff3344;
}

.qt-value.blue {
    color: var(--accent-blue);
}

.qt-sub {
    font-size: 10px;
    color: #444;
    margin-top: 2px;
}

.qt-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 0;
    border-bottom: 1px solid #111;
    background: rgba(245, 158, 11, 0.04);
}

.qt-badge-icon {
    font-family: var(--text-mono);
    font-size: 18px;
    font-weight: 900;
    color: #f59e0b;
    line-height: 1;
}

.qt-badge-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.qt-badge-title {
    font-family: var(--text-mono);
    font-size: 11px;
    font-weight: 700;
    color: #f59e0b;
}

.qt-badge-sub {
    font-size: 10px;
    color: #555;
}

.qt-dd {
    padding: 10px 12px;
    border-bottom: 1px solid #111;
}

.qt-dd-bar-bg {
    width: 100%;
    height: 5px;
    background: #111;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 5px;
}

.qt-dd-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s, background 0.3s;
}

.qt-dd-ticks {
    display: flex;
    justify-content: space-between;
    font-family: var(--text-mono);
    font-size: 8px;
    color: #222;
    margin-top: 3px;
}

.qt-grades {
    padding: 6px 12px;
}

.qt-grade-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-family: var(--text-mono);
    font-size: 10px;
}

.qt-grade-sym {
    color: #666;
    font-weight: 600;
    min-width: 70px;
}

.qt-grade-bar-bg {
    flex: 1;
    height: 3px;
    background: #111;
    border-radius: 2px;
    overflow: hidden;
}

.qt-grade-bar {
    height: 100%;
    border-radius: 2px;
}

.qt-grade-pnl {
    min-width: 56px;
    text-align: right;
    font-weight: 600;
}

.qt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    text-align: center;
}

.qt-empty svg {
    margin-bottom: 8px;
    opacity: 0.2;
}

.qt-empty p {
    font-size: 11px;
    color: #333;
    line-height: 1.5;
}

.qt-empty a {
    margin-top: 10px;
    font-family: var(--text-mono);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 14px;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 3px;
    text-decoration: none;
}

/* ── Skeleton loader (terminal) ── */
@keyframes t-shimmer {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}

.t-sk {
    background: #0d0d0d;
    background-image: linear-gradient(90deg, #0d0d0d 0%, #151515 40%, #0d0d0d 80%);
    background-size: 800px 100%;
    animation: t-shimmer 1.6s linear infinite;
    border-radius: 3px;
}

.t-sk-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
}

/* ── Sentiment gauge (terminal style) ── */
.t-gauge-wrap {
    padding: 8px 12px;
    border-bottom: 1px solid #111;
    background: #070707;
}

.t-gauge-labels {
    display: flex;
    justify-content: space-between;
    font-family: var(--text-mono);
    font-size: 9px;
    color: #333;
    margin-bottom: 3px;
}

.t-gauge-labels .t-gc {
    color: #888;
    font-weight: 700;
}

.t-gauge-svg {
    width: 100%;
    height: 44px;
}

.t-gauge-needle {
    transform-origin: 50% 100%;
    transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Analytics responsive ── */
@media (max-width: 1200px) {
    .analytics-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .analytics-grid .widget {
        grid-column: span 6 !important;
    }

    .analytics-grid .widget.w-half {
        grid-column: span 3 !important;
    }
}

@media (max-width: 768px) {
    .analytics-grid {
        grid-template-columns: 1fr;
        grid-gap: 8px;
        padding: 8px;
    }

    .analytics-grid .widget {
        grid-column: span 1 !important;
    }

    .analytics-toolbar {
        padding: 6px 10px;
    }

    .search-bar {
        min-width: 100%;
    }

    .ai-drawer {
        width: 100%;
        right: -100%;
    }

    .widget-content {
        max-height: 55vh;
    }
}

/* ── FCA Risk Warning & Modal (REAL mode only) ── */
.fca-risk-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ef4444;
    color: #fff;
    text-align: center;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 500;
    z-index: 10000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .fca-risk-banner {
        bottom: 56px;
        font-size: 10px;
    }
}

.fca-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fca-modal-content {
    background: var(--bg-card);
    border-radius: 8px;
    width: 90%;
    max-width: 400px;
    padding: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.fca-modal-title {
    font-size: 16px;
    margin-bottom: 12px;
    font-weight: 600;
}

.fca-modal-body p {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.fca-risk-box {
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #ef4444;
    padding: 12px;
    font-size: 12px;
    color: #ef4444;
    margin-bottom: 20px;
    border-radius: 0 4px 4px 0;
}

.fca-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.fca-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    color: var(--text-primary);
    cursor: pointer;
}

.fca-checkbox-label input {
    margin-top: 2px;
    cursor: pointer;
}

.fca-checkbox-label a {
    color: var(--accent-blue);
    text-decoration: none;
}

.fca-modal-actions {
    display: flex;
    gap: 12px;
}

.fca-btn-cancel {
    flex: 1;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 600;
}

.fca-btn-accept {
    flex: 2;
    padding: 10px;
    background: var(--accent-blue);
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
}

.fca-btn-accept:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}







/* =========================================
   FCA COMPLIANCE MODAL STYLES
   ========================================= */
.fca-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 5, 5, 0.85);
    backdrop-filter: blur(4px);
    z-index: 99999;
    /* Forces it above all other modals */
    display: flex;
    justify-content: center;
    align-items: center;
}

.fca-modal-content {
    background: #0a0a0a;
    border: 1px solid #ff3344;
    border-radius: 8px;
    width: 90%;
    max-width: 450px;
    padding: 24px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    box-shadow: 0 10px 40px rgba(255, 51, 68, 0.15);
}

.fca-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #1f1f1f;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.fca-modal-header h2 {
    margin: 0;
    font-size: 18px;
    color: #ff3344;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fca-icon {
    font-size: 24px;
}

.fca-modal-body p {
    font-size: 14px;
    line-height: 1.6;
    color: #d1d5db;
    margin-bottom: 16px;
}

.fca-close-btn {
    width: 100%;
    padding: 14px;
    background: #1f1f1f;
    color: #fff;
    border: 1px solid #333;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.2s;
}

.fca-close-btn:hover {
    background: #ff3344;
    border-color: #ff3344;
}

/* First Trade Mission Pulse */
@keyframes trade-btn-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

.pulse-animation {
    animation: trade-btn-pulse 2s infinite;
    position: relative;
    z-index: 10;
}