/* Trading Terminal Theme */
:root {
    /* Professional Dark Theme Palette */
    --terminal-bg: #010101;                    /* Anchor black */
    /* --terminal-surface: #070708;               Primary surface */
    --terminal-surface: #000000;               /* Primary surface */
    --terminal-surface-light: #000000;         /* Elevated surface */
    --terminal-panel-overlay: rgba(148, 163, 184, 0.08); /* Subtle lift */
    --terminal-border: #1f2933;                /* Neutral frame */
    --terminal-border-subtle: rgba(148, 163, 184, 0.25); /* Gentle separators */
    --terminal-border-strong: #3b82f6;         /* Accent border */
    --terminal-text: #f5f7fa;                  /* Primary text */
    --terminal-text-secondary: #94a3b8;        /* Secondary text */
    --terminal-accent: #3b82f6;                /* Azure accent */
    --terminal-accent-secondary: #38bdf8;      /* Supporting accent */
    --terminal-warning: #facc15;               /* Warm warning */
    --terminal-danger: #ef4444;                /* Refined danger */
    --terminal-success: #22c55e;               /* Fresh success */
    --terminal-profit: #4ade80;                /* Profit indicator */
    --terminal-loss: #f87171;                  /* Loss indicator */
    --terminal-shadow: rgba(0, 0, 0, 0.78);    /* Unified shadow */
    --terminal-glow: rgba(59, 130, 246, 0.28); /* Accent glow */
    --terminal-header-bg: #0b141f;            /* Table header background (flat) */
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    background: var(--terminal-bg);
    color: var(--terminal-text);
    margin: 0;
    padding: 20px;
    min-height: 100vh;
    font-size: 13px;
    line-height: 1.4;
    overflow-y: auto; /* Ensure vertical scrolling works */
    overflow-x: hidden; /* Prevent horizontal page scroll */
}

.container {
    max-width: 100vw;
    margin: auto;
    background: var(--terminal-surface);
    padding: 24px;
    border-radius: 14px;
    border: 1px solid var(--terminal-border);
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto; /* Allow horizontal scroll if needed */
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.65);
}

h1, h2 {
    color: var(--terminal-text);
    text-transform: none;
    letter-spacing: 0.4px;
    font-weight: 600;
    text-shadow: none;
    margin-bottom: 18px;
}

h1 {
    font-size: 28px;
    border-bottom: 1px solid var(--terminal-border);
    padding-bottom: 12px;
}

h2 {
    font-size: 18px;
    color: var(--terminal-text-secondary);
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--terminal-border);
}

.time-info {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    justify-content: center;
}

.time-display {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--terminal-panel-overlay);
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--terminal-border);
    min-width: 160px;
}

.time-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-family: 'JetBrains Mono', monospace;
}

.time-label {
    color: var(--terminal-text-secondary);
    font-weight: 500;
    letter-spacing: 0.5px;
}

.time-value {
    color: var(--terminal-text);
    font-weight: 600;
    letter-spacing: 0.8px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 12px;
    color: var(--terminal-text-secondary);
}

.user-info .user-name {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    /* border: 1px solid var(--terminal-accent); */
    border: 1px solid var(--terminal-border);
    /* background: var(--terminal-accent-bg); */
    background: var(--terminal-panel-overlay);
    /* color: var(--terminal-accent); */
    color: var(--terminal-text-secondary);
    /* font-weight: 600; */
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.6px;
}

.user-info .user-id {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--terminal-border);
    background: var(--terminal-panel-overlay);
    color: var(--terminal-text-secondary);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.6px;
}

.logout-btn,
.change-password-btn,
.about-btn {
    padding: 10px 18px;
    background: var(--terminal-surface-light);
    color: var(--terminal-text-secondary);
    text-decoration: none;
    border-radius: 8px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.6px;
    transition: all 0.25s ease;
    border: 1px solid var(--terminal-border);
}

.about-btn {
    color: var(--terminal-text);
    border-color: var(--terminal-border-strong);
}

.about-btn:hover {
    background: var(--terminal-accent);
    color: var(--terminal-bg);
    box-shadow: 0 12px 20px rgba(59, 130, 246, 0.25);
    transform: translateY(-1px);
}

.change-password-btn {
    /* color: var(--terminal-text); */
    border-color: var(--terminal-border-strong);
    /* border-color: rgba(59, 246, 193, 0.45); */
}

.change-password-btn:hover {
    background: var(--terminal-accent);
    /* background: var(--terminal-danger); */
    color: var(--terminal-bg);
    /* box-shadow: 0 12px 20px rgba(59, 246, 193, 0.25); */
    box-shadow: 0 12px 20px rgba(59, 130, 246, 0.25);
    transform: translateY(-1px);
}

.logout-btn {
    border-color: rgba(239, 68, 68, 0.45);
}

.logout-btn:hover {
    background: var(--terminal-danger);
    color: var(--terminal-bg);
    box-shadow: 0 12px 20px rgba(239, 68, 68, 0.25);
    transform: translateY(-1px);
}

.main-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible; /* Allow content to be visible and scrollable */
}

@media (min-width: 1600px) {
    .main-content {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet/Mobile media queries defined in Mobile Responsive Enhancements section below */

@media (max-width: 1599px) and (min-width: 1200px) {
    .main-content {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

@media (max-width: 1199px) and (min-width: 768px) {
    .main-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    
    .performance-section {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
    
    .time-info {
        justify-content: flex-start;
        flex: none;
        width: 100%;
    }
    
    .time-display {
        min-width: 120px;
    }
    
    .main-content {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    #charts-container {
        grid-template-columns: 1fr;
    }
    
    .performance-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .trade-section {
        top: 10px; /* Reduce top spacing on mobile */
    }
}

@media (max-width: 480px) {
    .performance-grid {
        grid-template-columns: 1fr;
    }
}

.assets-section, .portfolio-section, .trade-section, .transactions-section, .performance-section {
    background: var(--terminal-surface-light);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--terminal-border);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
    min-width: 0; /* Allow sections to shrink */
    overflow: hidden; /* Prevent overflow */
}

.assets-section {
    overflow: visible; /* Allow inner table to scroll horizontally */
}

/* Make Trade section sticky and always visible */
.trade-section {
    position: sticky;
        width: 100%;
    top: 20px;
    z-index: 100;
    border: 1px solid var(--terminal-border-strong);
    backdrop-filter: none;
}


@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

#trade-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    background: var(--terminal-surface);
    border: 1px solid var(--terminal-border);
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.45);
    gap: 10px;
    align-items: center;
    margin-top: 10px;
    outline: none !important;
}

#trade-form:focus {
    outline: none !important;
}

.portfolio-content {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.holdings-section {
    flex: 1;
    min-width: 0;
}

.portfolio-chart-section {
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.portfolio-chart-section h3 {
    color: var(--terminal-accent);
    margin-bottom: 15px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.portfolio-chart-container {
    width: 220px;
    height: 220px;
    position: relative;
    background: var(--terminal-bg);
    border-radius: 50%;
    padding: 20px;
    border: 1px solid var(--terminal-border);
    overflow: hidden;
    box-shadow: 
        0 0 20px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(0, 255, 136, 0.05);
}

.portfolio-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

@media (max-width: 768px) {
    .portfolio-content {
        flex-direction: column;
        align-items: center;
    }
    
    .portfolio-chart-section {
        flex: none;
        margin-top: 15px;
    }
}

.performance-section {
    background: var(--terminal-surface);
    color: var(--terminal-text);
    grid-column: 1 / -1;
    margin-bottom: 15px;
    border: 1px solid var(--terminal-border);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5);
}

.performance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.performance-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(59, 130, 246, 0.08);
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--terminal-border-subtle);
    min-width: 0;
    transition: all 0.3s ease;
}

.performance-item:hover {
    background: rgba(59, 130, 246, 0.16);
    border-color: var(--terminal-border-strong);
    box-shadow: 0 18px 28px rgba(59, 130, 246, 0.22);
}

.performance-label {
    font-size: 12px;
    color: var(--terminal-text-secondary);
    margin-bottom: 6px;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: 0.6px;
}

.performance-value {
    font-size: 16px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.performance-value.positive {
    color: var(--terminal-profit);
}

.performance-value.negative {
    color: var(--terminal-loss);
}

#transactions-container,
#all-transactions-container,
#leaderboard-container {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: auto;
    background: var(--terminal-surface);
    border-radius: 10px;
    border: 1px solid var(--terminal-border);
}

#transactions-table,
#all-transactions-table,
#leaderboard-table {
    font-size: 12px;
    width: 100%;
    background: transparent;
}

#assets-table thead th,
#transactions-table thead th,
#all-transactions-table thead th,
#leaderboard-table thead th,
#mobile-transactions-table th,
#mobile-leaderboard-table th,
#mobile-stats-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--terminal-header-bg);
    color: var(--terminal-text);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: 11px;
    font-weight: 600;
    padding: 10px 8px;
    border-bottom: 1px solid var(--terminal-border);
    box-shadow: inset 0 -1px 0 var(--terminal-border);
}

#leaderboard-table tbody tr.pnl-positive {
    background: rgba(16, 185, 129, 0.12);
    box-shadow: inset 3px 0 0 var(--terminal-success);
}

#leaderboard-table tbody tr.pnl-negative {
    background: rgba(239, 68, 68, 0.12);
    box-shadow: inset 3px 0 0 var(--terminal-danger);
}

#leaderboard-table tbody tr.pnl-neutral {
    background: rgba(59, 130, 246, 0.1);
    box-shadow: inset 3px 0 0 var(--terminal-border-subtle);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'JetBrains Mono', monospace;
}

th, td {
    text-align: left;
    padding: 4px 8px;
    border-bottom: 1px solid var(--terminal-border-subtle);
}

th {
    background: var(--terminal-header-bg);
    color: var(--terminal-text);
    border-bottom: 1px solid var(--terminal-border);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

td {
    color: var(--terminal-text-secondary);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px; /* Prevent very wide cells */
}

.symbol-badge {
    display: inline-block;
    background: rgba(59, 130, 246, 0.16);
    color: var(--terminal-text);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-shadow: none;
    min-width: 40px;
    max-width: 100%;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 1px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(59, 130, 246, 0.4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.symbol-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    border-color: var(--terminal-border-strong);
}

#assets-container {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: auto; /* Allow horizontal scroll on mobile */
    background: var(--terminal-surface);
    border-radius: 10px;
    border: 1px solid var(--terminal-border);
}

#asset-search {
    width: 100%;
    padding: 12px 14px;
    background: var(--terminal-panel-overlay);
    border: 1px solid var(--terminal-border);
    border-radius: 8px;
    color: var(--terminal-text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    margin-bottom: 18px;
    transition: all 0.3s ease;
}

#asset-search:focus {
    border: 1px solid var(--terminal-border-strong);
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.35);
    background: var(--terminal-surface);
}

#asset-search::placeholder {
    color: var(--terminal-text-secondary);
    opacity: 0.6;
}

#assets-table,
#transactions-table,
#all-transactions-table,
#leaderboard-table {
    width: 100%;
    min-width: 0;
    background: var(--terminal-surface);
    border-radius: 0;
    table-layout: auto;
}

#assets-table tbody tr,
#transactions-table tbody tr,
#all-transactions-table tbody tr,
#leaderboard-table tbody tr {
    transition: background-color 0.15s ease;
}

#assets-table tbody tr:nth-child(even),
#transactions-table tbody tr:nth-child(even),
#all-transactions-table tbody tr:nth-child(even),
#leaderboard-table tbody tr:nth-child(even) {
    background: rgba(148, 163, 184, 0.04);
}

#assets-table tbody tr:hover,
#transactions-table tbody tr:hover,
#all-transactions-table tbody tr:hover,
#leaderboard-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.12);
}

#assets-table td,
#transactions-table td,
#all-transactions-table td,
#leaderboard-table td {
    padding: 4px 8px;
    border-right: 1px solid rgba(148, 163, 184, 0.12);
}

/* Mobile STATS padding applied globally via the table rules above */

/* Make assets/transactions/leaderboard tables visually match the STATS table
   by removing zebra striping and inter-column borders while preserving
   left color accents (box-shadow) used for special rows. */
#assets-table tbody tr:nth-child(even),
#transactions-table tbody tr:nth-child(even),
#all-transactions-table tbody tr:nth-child(even),
#leaderboard-table tbody tr:nth-child(even) {
    background: transparent !important;
}

#assets-table tbody tr:hover,
#transactions-table tbody tr:hover,
#all-transactions-table tbody tr:hover,
#leaderboard-table tbody tr:hover {
    background: transparent !important;
}

/* Remove vertical column dividers while retaining any left accent box-shadows */
#assets-table td,
#transactions-table td,
#all-transactions-table td,
#leaderboard-table td {
    border-right: none !important;
}

/* Use flat base background for all main tables and their containers */
#assets-table,
#transactions-table,
#all-transactions-table,
#leaderboard-table,
#mobile-transactions-table,
#mobile-leaderboard-table,
#mobile-stats-table {
    background: var(--terminal-bg) !important;
}

#assets-container,
#transactions-container,
#all-transactions-container,
#leaderboard-container,
#mobile-transactions-container,
#mobile-leaderboard-container,
#mobile-stats-container {
    background: var(--terminal-bg) !important;
}

/* Remove bottom borders from table cells for a flatter look */
#assets-table th,
#assets-table td,
#transactions-table th,
#transactions-table td,
#all-transactions-table th,
#all-transactions-table td,
#leaderboard-table th,
#leaderboard-table td,
#mobile-transactions-table th,
#mobile-transactions-table td,
#mobile-leaderboard-table th,
#mobile-leaderboard-table td,
#mobile-stats-table th,
#mobile-stats-table td {
    border-bottom: none !important;
}

/* (Removed redundant override; header styling handled in the primary thead rule above) */

/* Remove colored row backgrounds for special rows so tables use the flat STATS look,
   but keep the left inset color accents (box-shadow) intact. */
#transactions-table tbody tr.transaction-buy,
#all-transactions-table tbody tr.transaction-buy,
#transactions-table tbody tr.transaction-sell,
#all-transactions-table tbody tr.transaction-sell,
#leaderboard-table tbody tr.pnl-positive,
#leaderboard-table tbody tr.pnl-negative,
#leaderboard-table tbody tr.pnl-neutral {
    background: transparent !important;
}

/* Mobile table variants */
#mobile-transactions-table tbody tr.transaction-buy,
#mobile-transactions-table tbody tr.transaction-sell,
#mobile-leaderboard-table tbody tr.pnl-positive,
#mobile-leaderboard-table tbody tr.pnl-negative,
#mobile-leaderboard-table tbody tr.pnl-neutral {
    background: transparent !important;
}

#assets-table thead th:last-child,
#transactions-table thead th:last-child,
#all-transactions-table thead th:last-child,
#leaderboard-table thead th:last-child,
#assets-table td:last-child,
#transactions-table td:last-child,
#all-transactions-table td:last-child,
#leaderboard-table td:last-child {
    border-right: none;
}

#all-transactions-table thead th:nth-child(3),
#all-transactions-table tbody td:nth-child(3) {
    min-width: 90px;
    width: 90px;
    text-align: left;
}

#transactions-table tbody tr.transaction-buy,
#all-transactions-table tbody tr.transaction-buy {
    background: rgba(16, 185, 129, 0.12);
    box-shadow: inset 3px 0 0 var(--terminal-success);
}

#transactions-table tbody tr.transaction-sell,
#all-transactions-table tbody tr.transaction-sell {
    background: rgba(239, 68, 68, 0.12);
    box-shadow: inset 3px 0 0 var(--terminal-danger);
}

#holdings-list li {
    margin: 8px 0;
    background: var(--terminal-surface);
    padding: 14px;
    border-radius: 8px;
    list-style: none;
    border: 1px solid var(--terminal-border);
    transition: all 0.3s ease;
}

#holdings-list li.no-transition {
    transition: none !important;
}

#holdings-list li:hover {
    background: rgba(59, 130, 246, 0.18);
    border-color: var(--terminal-border-strong);
    box-shadow: 0 0 18px rgba(59, 130, 246, 0.25);
    transform: scale(1.015);
}

#holdings-list {
    padding-left: 0;
    padding-right: 10px;
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
}

.cash-value {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
}

#holdings-list li .holding-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    min-width: 0;
}

.holding-metric {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 0 1 180px;
    min-width: 0;
    overflow: hidden;
}

.holding-label {
    color: var(--terminal-text-secondary);
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: none;
    flex-shrink: 0;
}

.holding-value {
    display: inline-block;
    vertical-align: baseline;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    flex: 1;
}

.holding-value-cash,
.holding-value-qty {
    color: var(--terminal-text);
}

.holding-value-amount {
    color: var(--terminal-success);
}

.holding-value-vwap {
    color: var(--terminal-accent-secondary);
}

.holding-value-pnl {
    font-weight: 600;
}

.holding-value-pnl.positive {
    color: var(--terminal-profit);
}

.holding-value-pnl.negative {
    color: var(--terminal-loss);
}

.holding-value-empty {
    color: var(--terminal-text-secondary);
    opacity: 0.7;
}

#trade-form input, #trade-form select {
    padding: 10px !important;
    border-radius: 4px !important;
    border: 1px solid var(--terminal-border-subtle) !important;
    background: var(--terminal-bg) !important;
    color: var(--terminal-text) !important;
    flex: 1;
    min-width: 140px;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 12px !important;
    transition: all 0.2s ease;
    outline: none !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

#trade-form input:focus, #trade-form select:focus {
    border-color: var(--terminal-border) !important;
    box-shadow: 0 0 12px rgba(111, 195, 223, 0.35) !important;
    outline: none !important;
}

#asset-input {
    font-weight: 600;
    min-width: 180px;
    background: var(--terminal-bg);
    border: 1px solid var(--terminal-border-subtle);
    color: var(--terminal-text);
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

#quantity-input {
    min-width: 100px;
    background: var(--terminal-bg);
    border: 1px solid var(--terminal-border-subtle);
    color: var(--terminal-text);
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

#trade-form button {
    padding: 8px 16px;
    border: 1px solid var(--terminal-border);
    border-radius: 4px;
    cursor: pointer;
    background: var(--terminal-surface-light);
    color: var(--terminal-text-secondary);
    white-space: nowrap;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0.8px;
    transition: all 0.2s ease;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.15);
}

#trade-form button[value="buy"] {
    color: var(--terminal-bg) !important;
    background: var(--terminal-success) !important;
    border: 1px solid transparent !important;
}

#trade-form button[value="buy"]:hover {
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.35) !important;
}

#trade-form button:focus {
    outline: none;
    border-color: var(--terminal-border);
    box-shadow: 0 0 12px rgba(111, 195, 223, 0.35);
}

#trade-form button[value="sell"] {
    color: var(--terminal-bg) !important;
    background: var(--terminal-danger) !important;
    border: 1px solid transparent !important;
}

#trade-form button[value="sell"]:hover {
    box-shadow: 0 0 18px rgba(239, 68, 68, 0.32) !important;
}

#trade-form #sell-all-btn {
    flex-basis: 100%; /* Span full width within flex layout */
    margin-top: 5px;
    background: transparent !important;
    border: 1px dashed rgba(239, 68, 68, 0.6) !important;
    color: var(--terminal-danger) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#trade-form #sell-all-btn:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    color: var(--terminal-danger) !important;
    border-color: rgba(239, 68, 68, 0.8) !important;
    box-shadow: none !important;
}

#trade-form #sell-all-btn:active {
    background: var(--terminal-danger) !important;
    color: var(--terminal-bg) !important;
    transform: translateY(1px);
}

#trade-message {
    margin-top: 12px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--terminal-border);
    background: var(--terminal-panel-overlay);
}

.buying-power-card {
    margin-top: 18px;
    padding: 18px;
    border-radius: 12px;
    border: 1px solid var(--terminal-border);
    background: var(--terminal-surface-light);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.4);
}

.buying-power-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.buying-power-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--terminal-accent);
    font-family: 'JetBrains Mono', monospace;
}

.buying-power-hint {
    color: var(--terminal-text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.buying-power-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.buying-power-metric {
    background: var(--terminal-bg);
    border: 1px solid var(--terminal-border);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.metric-label {
    color: var(--terminal-text-secondary);
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 600;
}

.metric-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 600;
    color: var(--terminal-text);
    transition: color 0.2s ease, opacity 0.2s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.metric-value-empty {
    color: var(--terminal-text-secondary);
    opacity: 0.7;
}

#buying-power-price.metric-value:not(.metric-value-empty) {
    color: var(--terminal-accent-secondary);
}

#buying-power-shares.metric-value:not(.metric-value-empty) {
    color: var(--terminal-success);
}

.charts-section {
    margin-top: 20px;
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    overflow: visible !important;  /* Force override of any parent overflow hidden */
    box-sizing: border-box;
}

.chart-controls {
    background: var(--terminal-bg);
    padding: 15px;
    border-radius: 6px;
    border: 1px solid var(--terminal-border-subtle);
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
}

.chart-control-row {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.chart-controls label {
    color: var(--terminal-text-secondary);
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.6px;
    min-width: 130px;
}

.chart-controls select {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--terminal-border-subtle);
    background: var(--terminal-bg);
    color: var(--terminal-text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    outline: none;
    cursor: pointer;
}

.chart-controls select:focus {
    border-color: var(--terminal-border);
    box-shadow: 0 0 12px rgba(111, 195, 223, 0.35);
}

.chart-control-btn {
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: rgba(59, 130, 246, 0.15);
    color: var(--terminal-text);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.25);
}

.chart-control-btn:hover {
    background: var(--terminal-accent);
    color: var(--terminal-bg);
    box-shadow: 0 18px 28px rgba(59, 130, 246, 0.25);
    transform: translateY(-1px);
}

.chart-control-btn:active {
    transform: translateY(0);
}

.chart-controls-header {
    background: var(--terminal-panel-overlay);
    padding: 10px;
    border-radius: 4px;
    border: 1px solid var(--terminal-border-subtle);
    margin-bottom: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.chart-symbol-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.chart-symbol-input {
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--terminal-border-subtle);
    background: var(--terminal-bg);
    color: var(--terminal-text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    outline: none;
    min-width: 120px;
}

.chart-symbol-input:focus {
    border-color: var(--terminal-border);
    box-shadow: 0 0 12px rgba(111, 195, 223, 0.35);
}

.add-symbol-btn, .clear-chart-btn {
    padding: 6px 12px;
    border: 1px solid var(--terminal-border-subtle);
    border-radius: 4px;
    background: var(--terminal-bg);
    color: var(--terminal-text);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.clear-chart-btn {
    border-color: rgba(255, 204, 2, 0.5);
    color: var(--terminal-warning);
}

.add-symbol-btn:hover {
    background: var(--terminal-accent);
    color: var(--terminal-bg);
    border-color: var(--terminal-accent);
    box-shadow: 0 0 12px rgba(111, 195, 223, 0.35);
}

.clear-chart-btn:hover {
    background: var(--terminal-warning);
    color: var(--terminal-bg);
    border-color: var(--terminal-warning);
    box-shadow: 0 0 12px rgba(255, 204, 2, 0.4);
}

.chart-symbols-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 20px;
}

.chart-symbol-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--terminal-text);
}

.remove-symbol-btn {
    background: var(--terminal-bg);
    border: 1px solid rgba(248, 81, 73, 0.45);
    color: var(--terminal-danger);
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.remove-symbol-btn:hover {
    background: var(--terminal-danger);
    color: var(--terminal-bg);
    box-shadow: 0 0 6px rgba(248, 81, 73, 0.35);
}

#charts-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    overflow: visible;  /* Ensure chart labels can show */
    box-sizing: border-box; /* Include padding in width calculation */
}

.chart-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-height: 420px;
    height: auto;
    background: linear-gradient(145deg, rgba(7, 8, 10, 0.92), rgba(18, 20, 24, 0.92));
    border-radius: 12px;
    padding: 18px 18px 20px;
    border: 1px solid rgba(59, 130, 246, 0.15);
    box-shadow:
        0 22px 45px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 25px;
    min-width: 0;
}

.chart-container h3 {
    color: var(--terminal-accent);
    text-shadow: 0 0 12px rgba(59, 130, 246, 0.35);
    margin-bottom: 8px;
    font-size: 16px;
    letter-spacing: 1px;
}

.chart-container canvas {
    width: 100% !important;
    height: 320px !important;
    max-height: none !important;
    flex: 1 1 auto;
}

.portfolio-value-section {
    width: 100%;
    margin-bottom: 22px;
}

.portfolio-value-card {
    min-height: 340px;
    padding: 20px 18px 24px;
}

.portfolio-value-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.portfolio-value-header h3 {
    margin: 0;
    color: var(--terminal-accent);
    font-size: 16px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.portfolio-value-latest {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--terminal-text);
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: 8px;
    padding: 6px 12px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

.chart-price-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.chart-price-title {
    margin: 0;
    color: var(--terminal-accent);
    font-size: 16px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.chart-price-latest {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    align-items: center;
    min-height: 28px;
    white-space: normal;
    text-align: right;
}

.chart-price-latest-empty {
    color: var(--terminal-text-secondary);
}

#portfolio-value-chart {
    width: 100% !important;
    height: 260px !important;
}

.price-display {
    position: relative;
    align-self: flex-end;
    background: rgba(12, 18, 28, 0.9);
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.5);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    border: 1px solid rgba(148, 163, 184, 0.25);
    z-index: 10;
    font-family: 'JetBrains Mono', monospace;
    color: var(--terminal-text-secondary);
    margin-bottom: -6px;
}

.price-display .current-price {
    color: var(--terminal-text);
    margin-bottom: 4px;
}

.price-display .vwap-price {
    color: var(--terminal-accent);
    font-size: 11px;
}

/* Scrollbar styling for terminal theme */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--terminal-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--terminal-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--terminal-accent);
}

/* Custom input placeholders */
::placeholder {
    color: var(--terminal-text-secondary);
    opacity: 0.7;
}

/* Footer Styling */
.footer {
    background: var(--terminal-bg);
    border-top: 1px solid var(--terminal-border);
    margin-top: 40px;
    padding: 20px 0;
    text-align: center;
    box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.45);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-disclaimer {
    margin-bottom: 15px;
    padding: 15px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    color: var(--terminal-text);
}

.footer-disclaimer p {
    margin: 0;
    font-size: 14px;
    font-family: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
}

.footer-disclaimer strong {
    color: #ef4444;
}

.footer-copyright {
    color: var(--terminal-text-secondary);
    font-size: 12px;
    font-family: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.footer-copyright p {
    margin: 0;
    opacity: 0.8;
}

/* ============================================
   MOBILE RESPONSIVE ENHANCEMENTS
   ============================================ */

/* Tablet Devices (768px - 1024px) */
@media (max-width: 1024px) {
    .container {
        padding: 15px;
    }

    .main-content {
        gap: 15px;
    }

    .trade-section {
        position: static; /* Remove sticky on tablet */
    }

    #holdings-list {
        font-size: 12px;
    }

    .chart-container {
        min-height: 360px;
        padding: 16px 14px 18px;
        box-shadow: 0 18px 32px rgba(0, 0, 0, 0.45);
    }
}

/* Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
    /* General mobile optimizations */
    body {
        font-size: 14px;
        padding: 10px;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .container {
        padding: 12px;
        max-width: 100%;
        overflow: visible;
    }

    .main-content {
        overflow: visible !important;
    }

    /* Header optimizations */
    .header {
        padding: 15px;
    }

    .header h1 {
        font-size: 24px;
        margin: 0;
    }

    .user-info {
        font-size: 12px;
        gap: 8px;
    }

    .logout-btn,
    .change-password-btn,
    .about-btn {
        padding: 6px 12px;
        font-size: 11px;
    }

    /* Section headers */
    h2 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    /* Trade form optimizations */
    #trade-form {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
    }

    #trade-form label {
        font-size: 10px;
    }

    #trade-form input,
    #trade-form select {
        font-size: 14px;
        padding: 10px;
    }

    .trade-buttons {
        grid-column: 1;
        display: flex;
        gap: 8px;
    }

    .buy-btn,
    .sell-btn {
        flex: 1;
        font-size: 13px;
        padding: 12px;
    }

    /* Assets and transactions card adjustments */
    #assets-table,
    #transactions-table,
    #all-transactions-table,
    #leaderboard-table {
        font-size: 11px;
    }

    #assets-table tbody,
    #transactions-table tbody,
    #all-transactions-table tbody,
    #leaderboard-table tbody {
        gap: 14px;
    }

    #assets-table tbody tr,
    #transactions-table tbody tr,
    #all-transactions-table tbody tr,
    #leaderboard-table tbody tr {
        padding: 16px 14px;
        gap: 8px 14px;
        border-radius: 10px;
    }

    #assets-table td,
    #transactions-table td,
    #all-transactions-table td,
    #leaderboard-table td {
        font-size: 0.9em;
    }

    #assets-table td::before,
    #transactions-table td::before,
    #all-transactions-table td::before,
    #leaderboard-table td::before {
        font-size: 0.68em;
    }

    .portfolio-value-card {
        min-height: 300px;
        padding: 16px 12px 18px;
    }

    .portfolio-value-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .portfolio-value-latest {
        font-size: 16px;
        padding: 6px 10px;
    }

    #portfolio-value-chart {
        height: 220px !important;
    }

    .buying-power-card {
        padding: 16px;
    }

    .buying-power-grid {
        grid-template-columns: 1fr;
    }

    .symbol-badge {
        font-size: 10px;
        padding: 3px 6px;
    }

    /* Portfolio section */
    #holdings-list {
        font-size: 11px;
        max-height: 250px;
    }

    #holdings-list li {
        padding: 8px;
    }

    .cash-value {
        font-size: 11px;
    }

    /* Chart optimizations */
    .chart-container {
        min-height: 320px;
        padding: 16px 12px 14px;
        gap: 10px;
    }

    .price-display {
        align-self: stretch;
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 0;
    }

    .chart-controls-header {
        padding: 8px;
    }

    .chart-symbol-input {
        font-size: 12px;
        padding: 6px;
    }

    .add-symbol-btn,
    .clear-chart-btn {
        font-size: 11px;
        padding: 6px 10px;
    }

    #charts-container {
        grid-template-columns: 1fr !important;
        width: 100%;
        max-width: 100%;
    }

    /* Transactions table optimizations */
    #transactions-container,
    #all-transactions-container {
        max-height: 250px;
    }

    /* Performance grid - stack vertically */
    .performance-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .performance-item {
        padding: 10px;
    }

    .performance-label {
        font-size: 10px;
    }

    .performance-value {
        font-size: 16px;
    }
}

/* Small Mobile Devices (max-width: 480px) */
@media (max-width: 480px) {
    body {
        padding: 5px;
    }
    
    .container {
        padding: 8px;
    }
    
    /* Header adjustments */
    .header {
        padding: 12px;
    }
    
    .header h1 {
        font-size: 20px;
    }
    
    .time-display {
        display: none; /* Hide time display on very small screens */
    }
    
    .user-info {
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between;
    }
    
    /* Make performance grid single column */
    .performance-grid {
        grid-template-columns: 1fr;
    }
    
    .cash-value {
        font-size: 10px;
    }
    
    /* Chart container adjustments for small mobile */
    .chart-container {
        padding: 14px 10px 10px;
        min-height: 320px;
        height: auto;
        border-radius: 10px;
    }

    .portfolio-value-card {
        min-height: 260px;
        padding: 14px 10px 14px;
    }

    .portfolio-value-latest {
        font-size: 15px;
    }

    #portfolio-value-chart {
        height: 200px !important;
    }
    
    /* Reduce section padding */
    .assets-section, 
    .portfolio-section, 
    .trade-section, 
    .transactions-section, 
    .performance-section {
        padding: 12px;
    }
    
    /* Make tables more compact */
    #assets-table th,
    #assets-table td {
        padding: 6px 2px;
        font-size: 10px;
    }
    
    /* Hide less critical columns on very small screens */
    #assets-table th:nth-child(4),
    #assets-table td:nth-child(4) {
        display: none; /* Hide open interest on very small screens */
    }
    
    /* Transaction table - hide total cost on very small screens */
    #transactions-table th:last-child,
    #transactions-table td:last-child,
    #all-transactions-table th:last-child,
    #all-transactions-table td:last-child {
        display: none;
    }
    
    /* Compact buttons */
    .buy-btn, .sell-btn {
        font-size: 12px;
        padding: 10px;
    }
    
    /* Portfolio chart smaller */
    .portfolio-chart-section {
        width: 100%;
        max-width: 200px;
    }
    
    #portfolio-pie-chart {
        max-width: 200px;
        max-height: 200px;
    }
    
    /* Footer adjustments */
    .footer-disclaimer {
        padding: 10px;
        font-size: 11px;
    }
    
    .footer-disclaimer p {
        font-size: 11px;
    }
    
    .footer-copyright {
        font-size: 10px;
    }
}

/* Compact layout tuning for narrow phones */
@media (max-width: 600px) {
    .container {
        padding: 12px;
        border-radius: 12px;
        border-width: 0;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    }

    .header {
        align-items: stretch;
        gap: 18px;
    }

    .header > * {
        width: 100%;
    }

    .time-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .time-display {
        width: 100%;
        min-width: 0;
    }

    .user-info {
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        gap: 10px;
    }

    .main-content {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .assets-section,
    .portfolio-section,
    .trade-section,
    .transactions-section,
    .performance-section,
    .charts-section {
        padding: 18px;
        border-radius: 12px;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    }

    #trade-form {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    #trade-form input,
    #trade-form select,
    #trade-form button {
        width: 100% !important;
        min-width: 0;
    }

    #trade-form button {
        justify-content: center;
    }

    #assets-container,
    #transactions-container,
    #all-transactions-container,
    #leaderboard-container {
        max-height: min(360px, 60vh);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding-right: 4px;
    }

    #assets-table tbody,
    #transactions-table tbody,
    #all-transactions-table tbody,
    #leaderboard-table tbody {
        gap: 12px;
    }

    #assets-table tbody tr,
    #transactions-table tbody tr,
    #all-transactions-table tbody tr,
    #leaderboard-table tbody tr {
        padding: 14px 12px;
        gap: 6px 12px;
        border-radius: 10px;
    }

    #assets-table td,
    #transactions-table td,
    #all-transactions-table td,
    #leaderboard-table td {
        font-size: 0.88em;
    }

    #assets-table td::before,
    #transactions-table td::before,
    #all-transactions-table td::before,
    #leaderboard-table td::before {
        font-size: 0.66em;
        margin-bottom: 2px;
    }

    .chart-container {
        height: auto;
        min-height: 320px;
        padding: 16px 12px 12px;
        gap: 12px;
    }

    .performance-grid {
        grid-template-columns: 1fr;
    }

    .buying-power-grid {
        grid-template-columns: 1fr;
    }
}

/* Landscape orientation optimizations for mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .header {
        padding: 10px 15px;
    }
    
    .time-info {
        display: none;
    }
    
    .main-content {
        gap: 10px;
    }
    
    #transactions-container,
    #all-transactions-container,
    #leaderboard-container {
        max-height: 200px;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    button, .btn, .logout-btn, .change-password-btn, .about-btn {
        min-height: 44px;
        padding: 12px;
    }
    
    input, select {
        min-height: 44px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Remove hover effects on touch devices */
    tr:hover,
    .performance-item:hover,
    .chart-container:hover {
        background: inherit;
    }
}

/* Auth and Info Pages */
body.auth-page,
body.info-page {
    padding: 80px 20px 220px;
    background: var(--terminal-bg);
    color: var(--terminal-text);
}

.auth-shell {
    max-width: 420px;
    margin: 0 auto;
}

.auth-card,
.info-card {
    background: var(--terminal-surface);
    border: 1px solid var(--terminal-border);
    border-radius: 12px;
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
    padding: 40px;
}

.auth-card {
    text-align: center;
}

.auth-card h1 {
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--terminal-text);
}

.auth-card p.lead {
    color: var(--terminal-text-secondary);
    margin-bottom: 28px;
    font-size: 13px;
}

/* Mobile Asset Overview Panel */
.mobile-asset-search-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* STATS table last-price color helpers */
.stat-last-price.price-up {
    color: #7dda58; /* Bright green for increase */
    font-weight: 700;
}

.stat-last-price.price-down {
    color: #f85149; /* Bright red for decrease */
    font-weight: 700;
}

.stat-last-price {
    transition: color 0.18s ease;
}

/* Force neutral styling for last-price cells in the mobile STATS table.
   This removes color, weight and transitions regardless of classes or inline styles. */
/* #mobile-stats-table .stat-last-price,
#mobile-stats-table .stat-last-price.price-up,
#mobile-stats-table .stat-last-price.price-down {
    color: inherit !important;
    font-weight: normal !important;
    transition: none !important;
} */

.mobile-overview-toggle {
    background: var(--terminal-surface-light);
    color: var(--terminal-text);
    border: 1px solid var(--terminal-border);
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    cursor: pointer;
}

.mobile-asset-overview {
    display: none; /* hidden by default */
    /* place overview in the same viewport area as asset cards so it doesn't overlap header/search */
    position: fixed;
    /* align with .mobile-asset-card top and account for safe-area */
    top: calc(136px + env(safe-area-inset-top));
    top: calc(136px + constant(safe-area-inset-top));
    left: 0;
    right: 0;
     /* Leave room for bottom controls (tab + bottom bar). Use safe-area inset
         only as padding on the bottom bar to avoid double-counting in heights. */
     bottom: calc(160px + env(safe-area-inset-bottom)); /* tab (50) + bottom bar (110) */
     bottom: calc(160px + constant(safe-area-inset-bottom));
    width: 100%;
    margin: 0;
    z-index: 1000; /* sit between top/bottom chrome and card area */
}

.mobile-asset-overview.active {
    display: block;
}

.mobile-asset-overview-inner {
    background: var(--terminal-surface-light);
    border: 1px solid var(--terminal-border);
    border-radius: 10px;
    padding: 10px;
    height: 100%;
    overflow-y: auto;
    box-shadow: 0 16px 32px rgba(0,0,0,0.6);
}

.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
    align-items: start;
}

.overview-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    background: var(--terminal-bg);
    border: 1px solid var(--terminal-border-subtle);
    min-height: 72px;
}

/* Highlight overview cards for assets where the user holds a position */
.overview-card.overview-has-position {
    border: 2px solid var(--terminal-accent); /* default accent border when P&L unknown */
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.12);
    transform: translateY(-2px);
}

.overview-card.overview-has-position .asset-overview-btn {
    box-shadow: 0 6px 14px rgba(59, 130, 246, 0.12);
}

/* Profit / Loss specific highlights */
.overview-card.overview-position-profit {
    border-color: #7dda58; /* bright green */
    box-shadow: 0 10px 26px rgba(34, 197, 94, 0.12);
}
.overview-card.overview-position-profit .asset-overview-btn {
    box-shadow: 0 8px 18px rgba(34, 197, 94, 0.12);
}
.overview-card.overview-position-loss {
    border-color: #f85149; /* bright red */
    box-shadow: 0 10px 26px rgba(248, 81, 73, 0.12);
}
.overview-card.overview-position-loss .asset-overview-btn {
    box-shadow: 0 8px 18px rgba(248, 81, 73, 0.12);
}

.overview-card .overview-symbol {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 12px;
}

.overview-card .overview-price {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--terminal-accent);
}

/* Persistent price color states for overview cards */
.overview-card .overview-price.price-up {
    color: #7dda58 !important; /* bright green */
}
.overview-card .overview-price.price-down {
    color: #f85149 !important; /* bright red */
}

.overview-card .overview-stats {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--terminal-text-secondary);
    text-align: center;
}

/* Expiry countdown displayed on overview cards */
.overview-expiry {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--terminal-text-secondary);
    margin-top: 4px;
    line-height: 1;
}

/* Mean (mu) sign styling */
.overview-stats .overview-mu.mu-positive {
    color: #7dda58; /* green */
    font-weight: 700;
}
.overview-stats .overview-mu.mu-negative {
    color: #f85149; /* red */
    font-weight: 700;
}

/* Global mu color rules so header and overview use same classes */
.overview-mu.mu-positive,
.mobile-header-stats .overview-mu.mu-positive,
.header-stat-value.overview-mu.mu-positive {
    color: #7dda58;
    font-weight: 700;
}
.overview-mu.mu-negative,
.mobile-header-stats .overview-mu.mu-negative,
.header-stat-value.overview-mu.mu-negative {
    color: #f85149;
    font-weight: 700;
}

/* Keep sigma symbol and numeric value on the same line */
.overview-stats .overview-sigma {
    white-space: nowrap;
    display: inline-block;
}

/* Two-line aligned layout for μ and σ */
.overview-stat-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    /* Align label with the top of the value block so symbols (μ/σ)
       line up with the numeric estimate even when the value stacks */
    align-items: flex-start;
}
.overview-stat-label {
    width: 18px; /* fixed label width so values align */
    text-align: right;
    color: var(--terminal-text-secondary);
    font-weight: 700;
}
.overview-stat-value {
    min-width: 48px;
    text-align: left;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Sigma magnitude coloring */
.overview-sigma.sigma-low {
    color: #7dda58; /* green */
    font-weight: 700;
}
.overview-sigma.sigma-mid {
    color: #ffb020; /* yellow/orange */
    font-weight: 700;
}
.overview-sigma.sigma-high {
    color: #f85149; /* red */
    font-weight: 700;
}

/* Sample count inline with σ (small, muted) */
.overview-samples {
    font-size: 10px;
    color: var(--terminal-text-secondary);
    margin-left: 0;
    margin-top: 2px;
    display: block;
}
.overview-sigma-value {
    font-weight: 700;
    display: block;
}

/* Mobile header stats inline next to expiry */
.mobile-asset-expiry {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mobile-header-stats {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--terminal-text-secondary);
}
.mobile-header-stats .header-stat-label {
    color: var(--terminal-text-secondary);
    font-weight: 700;
    margin-right: 4px;
}
.mobile-header-stats .header-stat-value {
    min-width: 44px;
    display: inline-block;
    text-align: left;
}
.mobile-header-stats .header-stat-sep {
    color: var(--terminal-text-secondary);
    margin: 0 6px;
}

.asset-overview-btn.symbol-badge {
    display: inline-block;
    padding: 6px 8px;
    font-size: 11px;
    border-radius: 6px;
    min-width: 56px;
}

/* Ensure overview doesn't obscure the mobile bottom bar on small screens */
@media (max-width: 480px) {
    .mobile-asset-overview-inner {
        max-height: calc(100vh - 220px);
    }
}

.auth-form {
    text-align: left;
}

.auth-form label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--terminal-text-secondary);
    margin-bottom: 6px;
}

.auth-form input {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 18px;
    background: var(--terminal-bg);
    border: 1px solid var(--terminal-border);
    border-radius: 8px;
    color: var(--terminal-text);
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-form input:focus {
    border-color: var(--terminal-border-strong);
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.35);
    outline: none;
}

.auth-form button,
.auth-primary-btn {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--terminal-border-strong);
    background: rgba(59, 130, 246, 0.12);
    color: var(--terminal-text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
}

.auth-form button:hover,
.auth-primary-btn:hover {
    background: var(--terminal-accent);
    color: var(--terminal-bg);
    box-shadow: 0 12px 20px rgba(59, 130, 246, 0.25);
}

.auth-link {
    margin-top: 24px;
    font-size: 12px;
    color: var(--terminal-text-secondary);
}

.auth-link a {
    color: var(--terminal-accent-secondary);
    text-decoration: none;
    font-weight: 600;
}

.auth-link a:hover {
    color: var(--terminal-accent);
    text-decoration: underline;
}

.flash-messages {
    margin-bottom: 20px;
}

.flash-message {
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.12);
    color: var(--terminal-danger);
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
}

.form-errors {
    color: var(--terminal-danger);
    font-size: 12px;
    margin-top: -12px;
    margin-bottom: 18px;
    font-family: 'JetBrains Mono', monospace;
}

.field-hint {
    color: var(--terminal-text-secondary);
    font-size: 11px;
    margin-top: -4px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.info-shell {
    max-width: 960px;
    margin: 0 auto;
}

.info-card h1 {
    margin-top: 0;
    margin-bottom: 24px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--terminal-text);
    text-align: center;
}

.info-card h2 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--terminal-accent-secondary);
    margin-top: 32px;
    margin-bottom: 16px;
}

.info-card p,
.info-card li {
    color: var(--terminal-text-secondary);
    font-size: 13px;
    line-height: 1.6;
}

.info-card ul {
    padding-left: 18px;
    margin-bottom: 20px;
}

.disclaimer-card {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 10px;
    padding: 20px;
    margin: 30px 0;
}

.disclaimer-card h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--terminal-danger);
}

.info-nav {
    margin-top: 36px;
    padding-top: 20px;
    border-top: 1px solid var(--terminal-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.info-nav a {
    color: var(--terminal-accent-secondary);
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 12px;
}

.info-nav a:hover {
    color: var(--terminal-accent);
    text-decoration: underline;
}

.auth-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--terminal-surface);
    border-top: 1px solid var(--terminal-border);
    box-shadow: 0 -18px 24px rgba(0, 0, 0, 0.45);
    padding: 18px 0;
}

.auth-footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-footer-disclaimer {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--terminal-text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

.auth-footer-disclaimer strong {
    color: var(--terminal-danger);
}

.auth-footer-copyright {
    color: var(--terminal-text-secondary);
    font-size: 11px;
    text-align: center;
}

@media (max-width: 768px) {
    body.auth-page,
    body.info-page {
        padding: 50px 16px 200px;
    }

    .auth-card,
    .info-card {
        padding: 28px;
    }

    .auth-footer-content {
        padding: 0 16px;
    }
}

/* Notification System */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
}

.notification {
    background: rgba(10, 14, 26, 0.98);
    border: 1px solid #2d3748;
    border-left: 4px solid #00ff88;
    border-radius: 6px;
    padding: 15px 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    animation: slideIn 0.3s ease-out;
    font-family: 'JetBrains Mono', monospace;
}

.notification-info { border-left-color: #00d4ff; }
.notification-success { border-left-color: #7dda58; }
.notification-warning { border-left-color: #ff9800; }
.notification-error { border-left-color: #f85149; }

.notification-message {
    flex: 1;
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.5;
}

.notification-close {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.notification-close:hover { color: #e2e8f0; }

.notification .countdown-timer {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--terminal-danger);
}

@keyframes slideIn {
    from { transform: translateX(400px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 768px) {
    .notification-container {
        top: 10px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    .notification { padding: 12px 15px; }
    .notification-message { font-size: 13px; }
}

/* ============================================
   MOBILE SHORT-FORM VIDEO STYLE REDESIGN
   ============================================ */

/* Mobile viewport container - full screen swipeable interface */
.mobile-view {
    display: none; /* Hidden by default, shown only on small screens */
    position: absolute; /* Changed from fixed to allow page scroll */
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    min-height: 100vh;
    /* Use dynamic viewport units for iOS Safari */
    min-height: 100dvh;
    background: var(--terminal-bg);
    overflow: visible;
    z-index: 1000;
}

/* Asset card carousel container */
.mobile-asset-carousel {
    position: fixed; /* Keep cards in fixed position */
    top: 0;
    left: 0;
    right: 0;
    bottom: 130px; /* Leave space for bottom controls (tab 50 + bottom 80) */
    overflow: hidden;
}

/* Individual asset card - fills entire viewport */
.mobile-asset-card {
    position: absolute;
    /* Start below top bar and search container; add safe-area inset so notch doesn't overlap */
    top: calc(136px + env(safe-area-inset-top));
    top: calc(136px + constant(safe-area-inset-top));
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--terminal-bg);
    display: flex;
    flex-direction: column;
    padding: 16px;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.mobile-asset-card.active {
    transform: translateY(0);
}

.mobile-asset-card.prev {
    transform: translateY(-100%);
}

.mobile-asset-card.next {
    transform: translateY(100%);
}

/* Asset info header within card */
.mobile-asset-header {
    padding: 2px;
    text-align: center;
    background: rgba(7, 8, 10, 0.6);
    border-radius: 16px;
    border: 1px solid var(--terminal-border);
    margin-bottom: 2px;
}

/* Ensure header has a stable height so showing/hiding the position
   info does not reflow the card and push the chart down. The header
   will center its contents; the position block is constrained to a
   small max-height with internal scrolling if needed. */
.mobile-asset-header {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Reduce header height since the position box will overlay the chart */
    min-height: 80px;
    max-height: 120px;
    padding: 8px 12px;
    position: relative; /* ensure absolute children position relative to the card header region */
    /* Reserve space on the right so the overlay can sit without covering header text */
}

.mobile-asset-symbol {
    font-size: 24px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--terminal-text);
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.mobile-asset-price {
    font-size: 24px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: var(--terminal-accent);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.mobile-asset-pnl {
    font-size: 16px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.mobile-asset-pnl.positive {
    color: var(--terminal-profit);
}

.mobile-asset-pnl.negative {
    color: var(--terminal-loss);
}

.mobile-asset-chart {
    flex: 1;
    position: relative; /* anchor overlays like position box inside the chart */
    background: linear-gradient(145deg, rgba(7, 8, 10, 0.92), rgba(18, 20, 24, 0.92));
    border-radius: 16px;
    border: 1px solid rgba(59, 130, 246, 0.15);
    padding: 5px;
    margin-bottom: 2px;
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.6);
}

/* Position overlay anchored to the chart area to avoid covering header text */
.mobile-asset-chart .mobile-asset-position {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1002;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    max-width: 220px;
    min-width: 120px;
    padding: 8px 10px;
    background: rgba(7, 8, 10, 0.45);
    border: 1px solid rgba(255,255,255,0.02);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(2,6,23,0.35);
    color: var(--terminal-text);
    /* -webkit-backdrop-filter: blur(6px); */
    /* backdrop-filter: blur(6px); */
    pointer-events: auto;
    max-height: calc(100% - 24px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-position-label {
    color: var(--terminal-text-secondary);
    font-weight: 500;
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap; /* keep label and its value together */
}

.mobile-position-qty,
.mobile-position-vwap {
    color: var(--terminal-text);
    font-weight: 600;
    white-space: nowrap;
}

.mobile-position-pnl {
    font-weight: 600;
    white-space: nowrap;
}

/* Ensure each metric span behaves as an inseparable unit so label/value pairs
   don't break across lines on narrow screens. */
.mobile-asset-position > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.mobile-position-pnl.positive {
    color: var(--terminal-profit);
}

.mobile-position-pnl.negative {
    color: var(--terminal-loss);
}

.mobile-position-separator {
    color: var(--terminal-border);
    margin: 0 2px;
    flex-shrink: 0;
}

.mobile-asset-expiry {
    font-size: 11px;
    color: var(--terminal-text-secondary);
    font-family: 'IBM Plex Sans', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center; /* horizontally center expiry content */
    gap: 8px;
    width: 100%;
    text-align: center; /* ensure text inside remains centered */
}

.mobile-expiry-label {
    color: var(--terminal-text-secondary);
    font-weight: 500;
    margin-right: 4px;
}

/* Chart container in mobile view */
/* .mobile-asset-chart {
    flex: 1;
    position: relative;
    background: linear-gradient(145deg, rgba(7, 8, 10, 0.92), rgba(18, 20, 24, 0.92));
    border-radius: 16px;
    border: 1px solid rgba(59, 130, 246, 0.15);
    padding: 2px;
    margin-bottom: 10px;
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.6);
} */

/* .mobile-asset-chart canvas {
    width: 100% !important;
    height: 100% !important;
} */

/* Fixed top bar showing account stats */
.mobile-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Respect the iPhone notch / safe area inset */
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    height: calc(60px + env(safe-area-inset-top));
    background: linear-gradient(180deg, rgba(1, 1, 1, 0.95) 0%, rgba(1, 1, 1, 0.85) 100%);
    border-bottom: 1px solid var(--terminal-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    z-index: 1001;
    backdrop-filter: blur(10px);
}

/* Ensure mobile pages leave room below the fixed top bar (including safe-area notch)
   so page section headers (History, Stats, Leaders, etc.) are not obscured. */
.mobile-page {
    box-sizing: border-box;
    padding-top: calc(12px + 60px + env(safe-area-inset-top));
    padding-top: calc(12px + 60px + constant(safe-area-inset-top));
}

/* The overview panel is positioned as a fixed overlay and must not receive
   the same top padding as page content; ensure it has no extra top padding. */
.mobile-asset-overview {
    padding-top: 0;
}

/* Additional explicit padding for table containers and mobile pages that
   host prominent section headers to ensure they are never obscured by the
   fixed top bar on devices with notches (iPhone safe-area). */
/* #mobile-stats-container,
#mobile-transactions-container,
#mobile-leaderboard-container,
#mobile-page-history,
#mobile-page-stats,
#mobile-page-leaderboard {
    box-sizing: border-box;
    padding-top: calc(20px + 60px + env(safe-area-inset-top));
    padding-top: calc(20px + 60px + constant(safe-area-inset-top));
} */

.mobile-account-value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mobile-account-label {
    font-size: 10px;
    color: var(--terminal-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
}

.mobile-account-amount {
    font-size: 18px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--terminal-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

.mobile-cash {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.mobile-cash-label {
    font-size: 10px;
    color: var(--terminal-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 2px;
}

.mobile-cash-amount {
    font-size: 16px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--terminal-success);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}

/* Fixed bottom bar with trading controls */
.mobile-bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    /* Reserve space for the home indicator on modern iPhones.
       Use padding-bottom for the safe-area inset so the visible
       height remains consistent across devices. */
    bottom: 0;
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
    height: 80px;
    background: linear-gradient(0deg, rgba(1, 1, 1, 0.95) 0%, rgba(1, 1, 1, 0.85) 100%);
    border-top: 1px solid var(--terminal-border);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-left: 15px;
    padding-right: 15px;
    z-index: 1001;
    backdrop-filter: blur(10px);
}

.mobile-trade-btn {
    flex: 1;
    height: 50px;
    margin: 0 5px;
    border-radius: 12px;
    border: none;
    font-size: 14px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
}

.mobile-buy-btn {
    background: var(--terminal-success);
    color: var(--terminal-bg);
}

.mobile-buy-btn:active {
    transform: scale(0.95);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
}

.mobile-sell-btn {
    background: var(--terminal-danger);
    color: var(--terminal-bg);
}

.mobile-sell-btn:active {
    transform: scale(0.95);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

.mobile-sell-all-btn {
    background: transparent;
    border: 2px dashed rgba(239, 68, 68, 0.6);
    color: var(--terminal-danger);
    font-size: 12px;
}

.mobile-sell-all-btn:active {
    background: rgba(239, 68, 68, 0.12);
    transform: scale(0.95);
}

/* Tab navigation at bottom of screen */
.mobile-tab-bar {
    position: fixed;
    /* Place above the bottom bar and account for safe-area */
     /* Position directly above the bottom bar (bottom bar visible height = 110px).
         Do not add the safe-area inset to the tab's height to avoid
         visual elongation on devices with a home indicator. */
     bottom: calc(80px);
    left: 0;
    right: 0;
    height: 50px;
    background: rgba(7, 8, 10, 0.95);
    border-top: 1px solid var(--terminal-border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    z-index: 1000;
    backdrop-filter: blur(8px);
}

.mobile-tab {
    flex: 1 1 auto;
    /* Fill the tab-bar height (fixed) so tab content does not increase bar height */
    height: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--terminal-text-secondary);
    font-size: 13px;
    font-weight: 600;
    font-family: 'IBM Plex Sans', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    padding: 6px 8px;
    box-sizing: border-box;
    white-space: nowrap; /* prevent label wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-tab.active {
    color: var(--terminal-accent);
    background: rgba(59, 130, 246, 0.08);
    border-bottom-color: var(--terminal-accent);
}

.mobile-tab-label {
    padding: 2px 0;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile page containers for tabs */
.mobile-page {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 160px; /* Top bar + bottom controls (tab 50 + bottom 110) */
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--terminal-bg);
    padding: 20px;
    z-index: 999;
    -webkit-overflow-scrolling: touch;
}

.mobile-page.active {
    display: block;
}

.mobile-page h2 {
    font-size: 20px;
    margin-bottom: 20px;
    color: var(--terminal-accent);
    border-bottom: 1px solid var(--terminal-border);
    padding-bottom: 10px;
}

/* Mobile table styles */
#mobile-transactions-table,
#mobile-leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    table-layout: fixed;
}

#mobile-transactions-table thead,
#mobile-leaderboard-table thead {
    background: rgba(59, 130, 246, 0.18);
    position: sticky;
    top: -20px;
    z-index: 10;
}

#mobile-transactions-table th,
#mobile-leaderboard-table th {
    padding: 8px 4px;
    text-align: left;
    color: var(--terminal-text);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--terminal-border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mobile-transactions-table td,
#mobile-leaderboard-table td {
    padding: 8px 4px;
    border-bottom: 1px solid var(--terminal-border-subtle);
    color: var(--terminal-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

#mobile-transactions-table tbody tr,
#mobile-leaderboard-table tbody tr {
    transition: background 0.2s ease;
}

/* Ensure all mobile table rows share the same flat background as the stats table */
#mobile-transactions-table tbody tr,
#mobile-leaderboard-table tbody tr,
#mobile-stats-table tbody tr {
    background: var(--terminal-bg);
}

#mobile-transactions-table tbody tr:hover,
#mobile-leaderboard-table tbody tr:hover,
#mobile-stats-table tbody tr:hover {
    background: var(--terminal-bg);
}

/* Transaction type color coding - match desktop */
/* Keep left inset color accents but remove filled backgrounds for flat look */
#mobile-transactions-table tbody tr.transaction-buy {
    background: transparent;
    box-shadow: inset 3px 0 0 var(--terminal-success);
}

#mobile-transactions-table tbody tr.transaction-sell {
    background: transparent;
    box-shadow: inset 3px 0 0 var(--terminal-danger);
}

/* Leaderboard P&L color coding - match desktop */
#mobile-leaderboard-table tbody tr.pnl-positive {
    background: transparent;
    box-shadow: inset 3px 0 0 var(--terminal-success);
}

#mobile-leaderboard-table tbody tr.pnl-negative {
    background: transparent;
    box-shadow: inset 3px 0 0 var(--terminal-danger);
}

#mobile-leaderboard-table tbody tr.pnl-neutral {
    background: transparent;
    box-shadow: inset 3px 0 0 var(--terminal-border-subtle);
}

#mobile-transactions-table tbody tr:hover,
#mobile-leaderboard-table tbody tr:hover {
    background: transparent !important;
}

#mobile-transactions-container,
#mobile-leaderboard-container,
#mobile-stats-container {
    /* Match flat app background used by stats */
    background: var(--terminal-bg);
    border-radius: 12px;
    border: 1px solid var(--terminal-border);
    padding: 10px;
    margin-top: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Column widths for mobile transactions */
#mobile-transactions-table th:nth-child(1),
#mobile-transactions-table td:nth-child(1) { min-width: 80px; }
#mobile-transactions-table th:nth-child(2),
#mobile-transactions-table td:nth-child(2) { min-width: 80px; }
#mobile-transactions-table th:nth-child(3),
#mobile-transactions-table td:nth-child(3) { min-width: 70px; }
#mobile-transactions-table th:nth-child(4),
#mobile-transactions-table td:nth-child(4) { min-width: 90px; }
#mobile-transactions-table th:nth-child(5),
#mobile-transactions-table td:nth-child(5) { min-width: 90px; }
#mobile-transactions-table th:nth-child(6),
#mobile-transactions-table td:nth-child(6) { min-width: 100px; }

/* Smaller symbol badges in mobile tables */
#mobile-transactions-table .symbol-badge {
    font-size: 9px;
    padding: 2px 4px;
    min-width: 30px;
}

/* Column widths for mobile leaderboard */
#mobile-leaderboard-table th:nth-child(1),
#mobile-leaderboard-table td:nth-child(1) { 
    width: 32px;
    max-width: 32px;
    padding: 6px 2px;
    text-align: center;
}
#mobile-leaderboard-table th:nth-child(2),
#mobile-leaderboard-table td:nth-child(2) { 
    width: 50px;
    max-width: 50px;
    padding: 6px 4px;
    font-size: 10px;
    text-align: center;
}
#mobile-leaderboard-table th:nth-child(3),
#mobile-leaderboard-table td:nth-child(3) { 
    width: 90px;
    max-width: 90px;
    padding: 6px 4px;
    text-align: right;
    font-size: 10px;
}

/* Mobile performance grid in account page */
.mobile-page .performance-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 15px 0 0 0;
}

/* Mobile chart section - card style matching assets */
.mobile-chart-section {
    padding: 0;
    margin-bottom: 20px;
}

.mobile-chart-card {
    background: rgba(7, 8, 10, 0.6);
    border-radius: 16px;
    border: 1px solid var(--terminal-border);
    padding: 20px;
    margin-bottom: 15px;
}

.mobile-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.mobile-chart-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--terminal-text);
    margin: 0;
}

.mobile-chart-value {
    font-size: 18px;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    color: var(--terminal-accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

.mobile-chart-container {
    position: relative;
    height: 200px;
}

.mobile-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Mobile portfolio section */
.mobile-portfolio-section {
    padding: 0;
    margin-bottom: 20px;
}

.mobile-holdings-section {
    background: var(--terminal-surface-light);
    border-radius: 12px;
    border: 1px solid var(--terminal-border);
    padding: 15px;
    margin-bottom: 15px;
}

.mobile-holdings-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--terminal-accent);
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#mobile-holdings-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 250px;
    overflow-y: auto;
}

#mobile-holdings-list li {
    background: var(--terminal-surface);
    border: 1px solid var(--terminal-border);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

#mobile-holdings-list li:last-child {
    margin-bottom: 0;
}

#mobile-holdings-list li:hover {
    background: rgba(59, 130, 246, 0.18);
    border-color: var(--terminal-border-strong);
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.25);
}

#mobile-holdings-list li .holding-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

#mobile-holdings-list .holding-metric {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: 0 1 calc(50% - 4px);
    min-width: 0;
}

#mobile-holdings-list .holding-label {
    color: var(--terminal-text-secondary);
    font-size: 10px;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

#mobile-holdings-list .holding-value {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.mobile-allocation-section {
    background: var(--terminal-surface-light);
    border-radius: 12px;
    border: 1px solid var(--terminal-border);
    padding: 15px;
    margin-bottom: 15px;
}

.mobile-allocation-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--terminal-accent);
    margin: 0 0 12px 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mobile-portfolio-pie-container {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    position: relative;
    background: var(--terminal-bg);
    border-radius: 50%;
    padding: 15px;
    border: 1px solid var(--terminal-border);
    box-shadow: 
        0 0 20px rgba(0, 0, 0, 0.5),
        inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.mobile-portfolio-pie-container canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Mobile user info section */
.mobile-user-info {
    background: var(--terminal-surface-light);
    border-radius: 12px;
    border: 1px solid var(--terminal-border);
    padding: 15px;
    margin-bottom: 15px;
}

.mobile-user-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 15px;
    align-items: stretch;
}

.mobile-user-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--terminal-border);
    background: var(--terminal-panel-overlay);
    color: var(--terminal-text);
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    letter-spacing: 0.6px;
}

.mobile-user-id {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--terminal-border);
    background: var(--terminal-panel-overlay);
    color: var(--terminal-text-secondary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.6px;
}

.mobile-user-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-user-actions .about-btn,
.mobile-user-actions .change-password-btn,
.mobile-user-actions .logout-btn {
    width: 100%;
    text-align: center;
    padding: 12px 18px;
}

/* Mobile asset search */
.mobile-asset-search-container {
    position: fixed;
    /* Position below mobile top bar and account for notch */
    top: calc(60px + env(safe-area-inset-top));
    top: calc(60px + constant(safe-area-inset-top));
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 15px 20px;
    background: var(--terminal-bg);
    border-bottom: 1px solid var(--terminal-border);
}

.mobile-asset-search {
    width: 100%;
    padding: 12px 14px;
    background: var(--terminal-panel-overlay);
    border: 1px solid var(--terminal-border);
    border-radius: 8px;
    color: var(--terminal-text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px; /* Must be 16px or larger to prevent mobile browser auto-zoom on focus */
    transition: all 0.3s ease;
}

.mobile-asset-search:focus {
    border: 1px solid var(--terminal-border-strong);
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.35);
    background: var(--terminal-surface);
    outline: none;
}

.mobile-asset-search::placeholder {
    color: var(--terminal-text-secondary);
    opacity: 0.6;
}

/* Swipe indicators */
.mobile-swipe-indicator {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
}

.mobile-swipe-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--terminal-border);
    transition: all 0.3s ease;
}

.mobile-swipe-dot.active {
    background: var(--terminal-accent);
    transform: scale(1.5);
}

/* Quantity input modal for mobile */
.mobile-quantity-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.mobile-quantity-modal.active {
    display: flex;
}

.mobile-quantity-content {
    background: var(--terminal-surface);
    border: 1px solid var(--terminal-border);
    border-radius: 20px;
    padding: 30px;
    width: 90%;
    max-width: 400px;
}

.mobile-quantity-content h3 {
    color: var(--terminal-accent);
    margin-bottom: 15px;
    font-size: 20px;
}

.mobile-buying-power {
    background: var(--terminal-bg);
    border: 1px solid var(--terminal-border);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 15px;
}

.mobile-bp-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--terminal-border-subtle);
}

.mobile-bp-row:last-child {
    border-bottom: none;
}

.mobile-bp-label {
    font-size: 12px;
    color: var(--terminal-text-secondary);
    font-family: 'IBM Plex Sans', sans-serif;
}

.mobile-bp-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--terminal-text);
    font-family: 'JetBrains Mono', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

#mobile-bp-price {
    color: var(--terminal-accent-secondary);
}

#mobile-bp-shares {
    color: var(--terminal-success);
}

.mobile-quantity-input {
    width: 100%;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid var(--terminal-border);
    background: var(--terminal-bg);
    color: var(--terminal-text);
    font-size: 24px;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    margin-bottom: 20px;
}

.mobile-quantity-actions {
    display: flex;
    gap: 10px;
}

.mobile-quantity-cancel,
.mobile-quantity-confirm {
    flex: 1;
    padding: 15px;
    border-radius: 12px;
    border: none;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.mobile-quantity-cancel {
    background: var(--terminal-surface-light);
    color: var(--terminal-text-secondary);
}

.mobile-quantity-confirm {
    background: var(--terminal-accent);
    color: var(--terminal-bg);
}

/* Show mobile view on small screens in portrait mode only */
@media (max-width: 768px) and (orientation: portrait) {
    /* Main body - enable minimal scroll for Safari auto-hide */
    body {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        position: relative;
        width: 100%;
        min-height: calc(100vh + 1px);
        min-height: calc(100dvh + 1px);
    }
    
    /* Allow info/auth pages to scroll on mobile */
    body.info-page,
    body.auth-page {
        overflow-y: auto !important;
        position: static !important;
        height: auto !important;
    }
    
    .info-shell,
    .auth-shell {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-view {
        display: block;
    }
    
    /* Hide desktop layout on mobile */
    body > .container {
        display: none !important;
    }
    
    body > .footer {
        display: none !important;
    }
    
    /* Hide desktop trade message */
    #trade-message {
        display: none !important;
    }
    
    /* Notification container adjustments for mobile */
    .notification-container {
        top: 70px;
        left: 10px;
        right: 10px;
        max-width: none;
    }
}