/*
File: static/style.css
Project: BDUB Portal
Description: Bloomberg Terminal Style Trading Dashboard
Revision: 3.0
Date: 2026-01-13
*/

/* === VARIABLES - QUBIT CAPITAL STYLE (Navy/Gold/Cyan) === */
:root, [data-theme="dark"] {
    --bg-primary: #0a1628;
    --bg-secondary: #0d1b2a;
    --glass-bg: rgba(212, 168, 83, 0.04);
    --glass-bg-hover: rgba(212, 168, 83, 0.08);
    --glass-border: rgba(212, 168, 83, 0.2);
    --glass-border-hover: rgba(212, 168, 83, 0.35);
    --accent-primary: #d4a853;
    --accent-secondary: #00d4ff;
    --accent-success: #50c878;
    --accent-warning: #d4a853;
    --accent-danger: #dc143c;
    --text-primary: #ffffff;
    --text-secondary: #d4a853;
    --text-muted: #5a7a9a;
    --input-bg: #122035;
    --sidebar-width: 260px;
    --ticker-height: 110px;
    --tradingview-ticker-height: 46px;
    --watchlist-ticker-height: 32px;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 25px rgba(212, 168, 83, 0.25);
    /* Trading Colors */
    --profit-green: #50c878;
    --loss-red: #dc143c;
    --neutral-amber: #d4a853;
    /* Qubit Brand Colors */
    --qubit-navy: #0a1628;
    --qubit-gold: #d4a853;
    --qubit-cyan: #00d4ff;
}

/* === LIGHT MODE (Trading Style) === */
[data-theme="light"] {
    --bg-primary: #f5f5f0;
    --bg-secondary: #e8e8e0;
    --glass-bg: rgba(0, 0, 0, 0.03);
    --glass-bg-hover: rgba(0, 0, 0, 0.06);
    --glass-border: rgba(200, 100, 0, 0.15);
    --glass-border-hover: rgba(200, 100, 0, 0.25);
    --accent-primary: #cc5500;
    --accent-secondary: #d97706;
    --accent-success: #059669;
    --accent-warning: #d97706;
    --accent-danger: #dc2626;
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-muted: #808080;
    --input-bg: #ffffff;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);
    --shadow-glow: 0 0 20px rgba(204, 85, 0, 0.15);
    /* Trading Colors */
    --profit-green: #059669;
    --loss-red: #dc2626;
    --neutral-amber: #d97706;
}

/* === BLOOMBERG TERMINAL - Authentic terminal with amber/orange on pure black === */
[data-theme="bloomberg"] {
    --bg-primary: #000000;
    --bg-secondary: #050505;
    --glass-bg: rgba(255, 136, 0, 0.05);
    --glass-bg-hover: rgba(255, 136, 0, 0.1);
    --glass-border: rgba(255, 136, 0, 0.3);
    --glass-border-hover: rgba(255, 136, 0, 0.5);
    --accent-primary: #ff8800;
    --accent-secondary: #ffaa00;
    --accent-success: #00ff41;
    --accent-warning: #ffdd00;
    --accent-danger: #ff0040;
    --text-primary: #ff9500;
    --text-secondary: #cc7700;
    --text-muted: #664400;
    --input-bg: #0a0500;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.9);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.95);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 1);
    --shadow-glow: 0 0 30px rgba(255, 136, 0, 0.4);
    /* Trading Colors */
    --profit-green: #00ff41;
    --loss-red: #ff0040;
    --neutral-amber: #ffdd00;
}

/* === WALL STREET - Deep navy with electric blue, classic trading floor === */
[data-theme="wall-street"] {
    --bg-primary: #020617;
    --bg-secondary: #0f172a;
    --glass-bg: rgba(56, 189, 248, 0.04);
    --glass-bg-hover: rgba(56, 189, 248, 0.08);
    --glass-border: rgba(56, 189, 248, 0.2);
    --glass-border-hover: rgba(56, 189, 248, 0.4);
    --accent-primary: #38bdf8;
    --accent-secondary: #0ea5e9;
    --accent-success: #00ff88;
    --accent-warning: #fbbf24;
    --accent-danger: #ff4757;
    --text-primary: #f0f9ff;
    --text-secondary: #7dd3fc;
    --text-muted: #0369a1;
    --input-bg: #0c1929;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.6);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.8);
    --shadow-glow: 0 0 25px rgba(56, 189, 248, 0.3);
    /* Trading Colors */
    --profit-green: #00ff88;
    --loss-red: #ff4757;
    --neutral-amber: #fbbf24;
}

/* === EXECUTIVE - Rich burgundy/wine with gold luxury accents === */
[data-theme="executive"] {
    --bg-primary: #1a0a0a;
    --bg-secondary: #2d1515;
    --glass-bg: rgba(255, 215, 0, 0.04);
    --glass-bg-hover: rgba(255, 215, 0, 0.08);
    --glass-border: rgba(255, 215, 0, 0.2);
    --glass-border-hover: rgba(255, 215, 0, 0.35);
    --accent-primary: #ffd700;
    --accent-secondary: #daa520;
    --accent-success: #50c878;
    --accent-warning: #ff8c00;
    --accent-danger: #dc143c;
    --text-primary: #fff8e7;
    --text-secondary: #d4a574;
    --text-muted: #8b6914;
    --input-bg: #3d1f1f;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 25px rgba(255, 215, 0, 0.2);
    /* Trading Colors */
    --profit-green: #50c878;
    --loss-red: #dc143c;
    --neutral-amber: #ff8c00;
}

/* === MIDNIGHT - Deep purple with vibrant violet and cyan accents === */
[data-theme="midnight"] {
    --bg-primary: #0f0720;
    --bg-secondary: #1a0f30;
    --glass-bg: rgba(167, 139, 250, 0.05);
    --glass-bg-hover: rgba(167, 139, 250, 0.1);
    --glass-border: rgba(167, 139, 250, 0.25);
    --glass-border-hover: rgba(167, 139, 250, 0.4);
    --accent-primary: #a78bfa;
    --accent-secondary: #22d3ee;
    --accent-success: #34d399;
    --accent-warning: #fbbf24;
    --accent-danger: #fb7185;
    --text-primary: #f5f3ff;
    --text-secondary: #c4b5fd;
    --text-muted: #7c3aed;
    --input-bg: #1e1040;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 30px rgba(167, 139, 250, 0.3);
    /* Trading Colors */
    --profit-green: #34d399;
    --loss-red: #fb7185;
    --neutral-amber: #fbbf24;
}

/* === MINIMALIST - True monochrome, ultra clean === */
[data-theme="minimalist"] {
    --bg-primary: #0a0a0a;
    --bg-secondary: #141414;
    --glass-bg: rgba(255, 255, 255, 0.02);
    --glass-bg-hover: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-hover: rgba(255, 255, 255, 0.15);
    --accent-primary: #ffffff;
    --accent-secondary: #888888;
    --accent-success: #00ff00;
    --accent-warning: #ffff00;
    --accent-danger: #ff0000;
    --text-primary: #ffffff;
    --text-secondary: #888888;
    --text-muted: #444444;
    --input-bg: #1a1a1a;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 15px rgba(255, 255, 255, 0.05);
    /* Trading Colors */
    --profit-green: #00ff00;
    --loss-red: #ff0000;
    --neutral-amber: #ffff00;
}

/* === QUBIT CAPITAL - Navy blue with gold and cyan accents, fintech professional === */
[data-theme="qubit"] {
    --bg-primary: #0a1628;
    --bg-secondary: #0d1b2a;
    --glass-bg: rgba(212, 168, 83, 0.04);
    --glass-bg-hover: rgba(212, 168, 83, 0.08);
    --glass-border: rgba(212, 168, 83, 0.2);
    --glass-border-hover: rgba(212, 168, 83, 0.35);
    --accent-primary: #d4a853;
    --accent-secondary: #00d4ff;
    --accent-success: #50c878;
    --accent-warning: #d4a853;
    --accent-danger: #dc143c;
    --text-primary: #ffffff;
    --text-secondary: #d4a853;
    --text-muted: #5a7a9a;
    --input-bg: #122035;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 25px rgba(212, 168, 83, 0.25);
    /* Trading Colors */
    --profit-green: #50c878;
    --loss-red: #dc143c;
    --neutral-amber: #d4a853;
    /* Qubit specific colors */
    --qubit-navy: #0a1628;
    --qubit-gold: #d4a853;
    --qubit-cyan: #00d4ff;
}

/* === WASHINGTON COMMANDERS - Official Burgundy and Gold === */
[data-theme="commanders"] {
    --bg-primary: #1a0808;
    --bg-secondary: #2d1212;
    --glass-bg: rgba(255, 182, 18, 0.04);
    --glass-bg-hover: rgba(255, 182, 18, 0.08);
    --glass-border: rgba(255, 182, 18, 0.2);
    --glass-border-hover: rgba(255, 182, 18, 0.35);
    --accent-primary: #FFB612;
    --accent-secondary: #e6a410;
    --accent-success: #50c878;
    --accent-warning: #FFB612;
    --accent-danger: #dc143c;
    --text-primary: #fff8e7;
    --text-secondary: #FFB612;
    --text-muted: #b38410;
    --input-bg: #3d1818;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 25px rgba(255, 182, 18, 0.25);
    /* Trading Colors */
    --profit-green: #50c878;
    --loss-red: #dc143c;
    --neutral-amber: #FFB612;
    /* Commanders Brand Colors */
    --commanders-burgundy: #5A1414;
    --commanders-gold: #FFB612;
    --commanders-dark-burgundy: #3d0e0e;
}

/* ============================================ */
/* === FUN THEMES (Light-based) === */
/* ============================================ */

/* === OCEAN - Teal bg, coral accents, navy sidebar, golden buttons === */
[data-theme="ocean"] {
    --bg-primary: #e0f7fa;
    --bg-secondary: #b2ebf2;
    --glass-bg: rgba(25, 118, 210, 0.1);
    --glass-bg-hover: rgba(25, 118, 210, 0.18);
    --glass-border: rgba(255, 112, 67, 0.3);
    --glass-border-hover: rgba(255, 112, 67, 0.5);
    --accent-primary: #ff7043;
    --accent-secondary: #f4511e;
    --accent-success: #66bb6a;
    --accent-warning: #ffc107;
    --accent-danger: #ef5350;
    --text-primary: #1a237e;
    --text-secondary: #283593;
    --text-muted: #7986cb;
    --input-bg: #fff8e1;
    --shadow-sm: 0 2px 8px rgba(26, 35, 126, 0.15);
    --shadow-md: 0 8px 32px rgba(26, 35, 126, 0.2);
    --shadow-lg: 0 16px 48px rgba(26, 35, 126, 0.25);
    --shadow-glow: 0 0 25px rgba(255, 112, 67, 0.35);
    /* Trading Colors */
    --profit-green: #66bb6a;
    --loss-red: #ef5350;
    --neutral-amber: #ffc107;
    /* Fun theme specific */
    --sidebar-bg: linear-gradient(180deg, #1a237e 0%, #283593 100%);
    --sidebar-text: #ffffff;
    --sidebar-hover: rgba(255, 193, 7, 0.4);
    --btn-primary-bg: linear-gradient(135deg, #ff7043 0%, #f4511e 100%);
    --btn-primary-text: #ffffff;
    --card-header-bg: rgba(26, 35, 126, 0.1);
}

/* === SUNSET - Peach bg, purple sidebar, magenta accents, teal buttons === */
[data-theme="sunset"] {
    --bg-primary: #fff3e0;
    --bg-secondary: #ffe0b2;
    --glass-bg: rgba(156, 39, 176, 0.1);
    --glass-bg-hover: rgba(156, 39, 176, 0.18);
    --glass-border: rgba(0, 150, 136, 0.3);
    --glass-border-hover: rgba(0, 150, 136, 0.5);
    --accent-primary: #00897b;
    --accent-secondary: #00695c;
    --accent-success: #43a047;
    --accent-warning: #ff8f00;
    --accent-danger: #e53935;
    --text-primary: #6a1b9a;
    --text-secondary: #8e24aa;
    --text-muted: #ce93d8;
    --input-bg: #e0f2f1;
    --shadow-sm: 0 2px 8px rgba(106, 27, 154, 0.15);
    --shadow-md: 0 8px 32px rgba(106, 27, 154, 0.2);
    --shadow-lg: 0 16px 48px rgba(106, 27, 154, 0.25);
    --shadow-glow: 0 0 25px rgba(0, 137, 123, 0.35);
    /* Trading Colors */
    --profit-green: #43a047;
    --loss-red: #e53935;
    --neutral-amber: #ff8f00;
    /* Fun theme specific */
    --sidebar-bg: linear-gradient(180deg, #6a1b9a 0%, #8e24aa 100%);
    --sidebar-text: #ffffff;
    --sidebar-hover: rgba(255, 193, 7, 0.4);
    --btn-primary-bg: linear-gradient(135deg, #00897b 0%, #00695c 100%);
    --btn-primary-text: #ffffff;
    --card-header-bg: rgba(106, 27, 154, 0.1);
}

/* === BUBBLEGUM - Pink bg, turquoise sidebar, golden accents, purple text === */
[data-theme="bubblegum"] {
    --bg-primary: #fce4ec;
    --bg-secondary: #f8bbd0;
    --glass-bg: rgba(0, 188, 212, 0.12);
    --glass-bg-hover: rgba(0, 188, 212, 0.2);
    --glass-border: rgba(255, 193, 7, 0.4);
    --glass-border-hover: rgba(255, 193, 7, 0.6);
    --accent-primary: #ffc107;
    --accent-secondary: #ffb300;
    --accent-success: #26a69a;
    --accent-warning: #ff9800;
    --accent-danger: #e91e63;
    --text-primary: #4a148c;
    --text-secondary: #6a1b9a;
    --text-muted: #ba68c8;
    --input-bg: #e0f7fa;
    --shadow-sm: 0 2px 8px rgba(74, 20, 140, 0.15);
    --shadow-md: 0 8px 32px rgba(74, 20, 140, 0.2);
    --shadow-lg: 0 16px 48px rgba(74, 20, 140, 0.25);
    --shadow-glow: 0 0 25px rgba(255, 193, 7, 0.4);
    /* Trading Colors */
    --profit-green: #26a69a;
    --loss-red: #e91e63;
    --neutral-amber: #ff9800;
    /* Fun theme specific */
    --sidebar-bg: linear-gradient(180deg, #00838f 0%, #00acc1 100%);
    --sidebar-text: #ffffff;
    --sidebar-hover: rgba(255, 235, 59, 0.5);
    --btn-primary-bg: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
    --btn-primary-text: #4a148c;
    --card-header-bg: rgba(0, 188, 212, 0.15);
}

/* === MINT - Green bg, coral sidebar, blue buttons, brown text === */
[data-theme="mint"] {
    --bg-primary: #e8f5e9;
    --bg-secondary: #c8e6c9;
    --glass-bg: rgba(255, 87, 34, 0.1);
    --glass-bg-hover: rgba(255, 87, 34, 0.18);
    --glass-border: rgba(33, 150, 243, 0.3);
    --glass-border-hover: rgba(33, 150, 243, 0.5);
    --accent-primary: #1e88e5;
    --accent-secondary: #1565c0;
    --accent-success: #4caf50;
    --accent-warning: #ff9800;
    --accent-danger: #f44336;
    --text-primary: #4e342e;
    --text-secondary: #5d4037;
    --text-muted: #a1887f;
    --input-bg: #fff3e0;
    --shadow-sm: 0 2px 8px rgba(78, 52, 46, 0.15);
    --shadow-md: 0 8px 32px rgba(78, 52, 46, 0.2);
    --shadow-lg: 0 16px 48px rgba(78, 52, 46, 0.25);
    --shadow-glow: 0 0 25px rgba(30, 136, 229, 0.35);
    /* Trading Colors */
    --profit-green: #4caf50;
    --loss-red: #f44336;
    --neutral-amber: #ff9800;
    /* Fun theme specific */
    --sidebar-bg: linear-gradient(180deg, #d84315 0%, #ff5722 100%);
    --sidebar-text: #ffffff;
    --sidebar-hover: rgba(255, 235, 59, 0.5);
    --btn-primary-bg: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);
    --btn-primary-text: #ffffff;
    --card-header-bg: rgba(255, 87, 34, 0.12);
}

/* === LAVENDER - Purple bg, teal sidebar, coral buttons, golden accents === */
[data-theme="lavender"] {
    --bg-primary: #ede7f6;
    --bg-secondary: #d1c4e9;
    --glass-bg: rgba(0, 121, 107, 0.1);
    --glass-bg-hover: rgba(0, 121, 107, 0.18);
    --glass-border: rgba(255, 138, 101, 0.35);
    --glass-border-hover: rgba(255, 138, 101, 0.5);
    --accent-primary: #ff8a65;
    --accent-secondary: #ff7043;
    --accent-success: #66bb6a;
    --accent-warning: #ffca28;
    --accent-danger: #ef5350;
    --text-primary: #004d40;
    --text-secondary: #00695c;
    --text-muted: #80cbc4;
    --input-bg: #fff8e1;
    --shadow-sm: 0 2px 8px rgba(0, 77, 64, 0.15);
    --shadow-md: 0 8px 32px rgba(0, 77, 64, 0.2);
    --shadow-lg: 0 16px 48px rgba(0, 77, 64, 0.25);
    --shadow-glow: 0 0 25px rgba(255, 138, 101, 0.4);
    /* Trading Colors */
    --profit-green: #66bb6a;
    --loss-red: #ef5350;
    --neutral-amber: #ffca28;
    /* Fun theme specific */
    --sidebar-bg: linear-gradient(180deg, #00695c 0%, #00897b 100%);
    --sidebar-text: #ffffff;
    --sidebar-hover: rgba(255, 193, 7, 0.5);
    --btn-primary-bg: linear-gradient(135deg, #ff8a65 0%, #ff7043 100%);
    --btn-primary-text: #ffffff;
    --card-header-bg: rgba(0, 121, 107, 0.12);
}

/* ============================================ */
/* === FUN THEME BACKGROUND PATTERNS === */
/* Using ::after pseudo-element to overlay patterns */
/* ============================================ */

/* Base pattern overlay setup for fun themes */
[data-theme="ocean"] body::after,
[data-theme="sunset"] body::after,
[data-theme="bubblegum"] body::after,
[data-theme="mint"] body::after,
[data-theme="lavender"] body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Ocean theme - Bull, rising chart, coins, money bag */
[data-theme="ocean"] body::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3C!-- Bull head --%3E%3Cellipse cx='45' cy='45' rx='30' ry='25' fill='%231565c0'/%3E%3Cpath d='M15 25 Q5 10 15 15 L25 30 M75 25 Q85 10 75 15 L65 30' stroke='%231565c0' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='35' cy='40' r='4' fill='%23ffffff'/%3E%3Ccircle cx='55' cy='40' r='4' fill='%23ffffff'/%3E%3Cellipse cx='45' cy='55' rx='10' ry='6' fill='%230d47a1'/%3E%3C!-- Rising candlestick chart --%3E%3Crect x='100' y='90' width='12' height='50' fill='%2300c853'/%3E%3Cpath d='M106 80 L106 90 M106 140 L106 150' stroke='%2300c853' stroke-width='3'/%3E%3Crect x='120' y='70' width='12' height='60' fill='%2300c853'/%3E%3Cpath d='M126 60 L126 70 M126 130 L126 145' stroke='%2300c853' stroke-width='3'/%3E%3Crect x='140' y='50' width='12' height='55' fill='%2300c853'/%3E%3Cpath d='M146 40 L146 50 M146 105 L146 120' stroke='%2300c853' stroke-width='3'/%3E%3C!-- Stack of coins --%3E%3Cellipse cx='45' cy='130' rx='25' ry='8' fill='%23ffc107'/%3E%3Cellipse cx='45' cy='120' rx='25' ry='8' fill='%23ffca28'/%3E%3Cellipse cx='45' cy='110' rx='25' ry='8' fill='%23ffd54f'/%3E%3C!-- Dollar sign --%3E%3Ctext x='130' y='175' font-family='Arial,sans-serif' font-size='40' font-weight='bold' fill='%230288d1'%3E%24%3C/text%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.22;
}

/* Sunset theme - Bear, falling chart, piggy bank, wallet */
[data-theme="sunset"] body::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3C!-- Bear head --%3E%3Ccircle cx='45' cy='45' r='30' fill='%23d84315'/%3E%3Ccircle cx='20' cy='20' r='12' fill='%23d84315'/%3E%3Ccircle cx='70' cy='20' r='12' fill='%23d84315'/%3E%3Ccircle cx='35' cy='40' r='5' fill='%23ffffff'/%3E%3Ccircle cx='55' cy='40' r='5' fill='%23ffffff'/%3E%3Cellipse cx='45' cy='55' rx='12' ry='8' fill='%23bf360c'/%3E%3C!-- Piggy bank --%3E%3Cellipse cx='140' cy='50' rx='30' ry='25' fill='%23f48fb1'/%3E%3Ccircle cx='165' cy='45' r='8' fill='%23f8bbd9'/%3E%3Crect x='130' y='25' width='20' height='8' rx='2' fill='%23ad1457'/%3E%3Cellipse cx='140' cy='70' rx='8' ry='5' fill='%23ec407a'/%3E%3Crect x='115' y='65' width='6' height='15' fill='%23ec407a'/%3E%3Crect x='155' y='65' width='6' height='15' fill='%23ec407a'/%3E%3C!-- Wallet --%3E%3Crect x='20' y='110' width='50' height='40' rx='5' fill='%238d6e63'/%3E%3Crect x='20' y='110' width='50' height='15' rx='3' fill='%236d4c41'/%3E%3Ccircle cx='60' cy='130' r='8' fill='%234e342e'/%3E%3C!-- Percent down --%3E%3Ctext x='110' y='140' font-family='Arial,sans-serif' font-size='35' font-weight='bold' fill='%23ff5722'%3E%25%3C/text%3E%3Cpath d='M155 110 L155 150 M145 140 L155 150 L165 140' stroke='%23d32f2f' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.22;
}

/* Bubblegum theme - Diamond gem, credit card, safe, gold bars */
[data-theme="bubblegum"] body::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3C!-- Diamond gem --%3E%3Cpolygon points='45,15 15,40 45,80 75,40' fill='%2300bcd4' stroke='%23e0f7fa' stroke-width='2'/%3E%3Cpath d='M15 40 L45 55 L75 40 M45 55 L45 80' stroke='%2380deea' stroke-width='2'/%3E%3C!-- Credit card --%3E%3Crect x='95' y='20' width='70' height='45' rx='5' fill='%239c27b0'/%3E%3Crect x='95' y='35' width='70' height='12' fill='%234a148c'/%3E%3Crect x='100' y='52' width='30' height='8' rx='2' fill='%23e1bee7'/%3E%3C!-- Safe/vault --%3E%3Crect x='15' y='100' width='60' height='55' rx='5' fill='%23546e7a'/%3E%3Ccircle cx='45' cy='125' r='18' stroke='%2390a4ae' stroke-width='4' fill='none'/%3E%3Ccircle cx='45' cy='125' r='5' fill='%2390a4ae'/%3E%3Crect x='65' y='115' width='8' height='20' fill='%2378909c'/%3E%3C!-- Gold bars --%3E%3Cpath d='M110 120 L100 145 L140 145 L150 120 Z' fill='%23ffc107'/%3E%3Cpath d='M115 145 L105 170 L145 170 L155 145 Z' fill='%23ffb300'/%3E%3Cpath d='M110 120 L140 120 L150 120 L140 145 L100 145 Z' fill='%23ffd54f'/%3E%3C!-- Dollar --%3E%3Ctext x='140' y='105' font-family='Arial,sans-serif' font-size='35' font-weight='bold' fill='%23e91e63'%3E%24%3C/text%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.2;
}

/* Mint theme - Line chart up, money bag, calculator, briefcase */
[data-theme="mint"] body::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3C!-- Line chart going up --%3E%3Cpath d='M10 80 L40 60 L70 70 L100 40 L130 25' stroke='%234caf50' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='130' cy='25' r='8' fill='%232e7d32'/%3E%3Cpath d='M115 25 L130 25 L130 40' stroke='%232e7d32' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C!-- Money bag --%3E%3Cpath d='M35 95 Q15 95 15 120 Q15 155 45 155 Q75 155 75 120 Q75 95 55 95' fill='%238d6e63'/%3E%3Cpath d='M35 95 Q45 85 55 95 M40 80 Q45 70 50 80' stroke='%236d4c41' stroke-width='4' fill='none'/%3E%3Ctext x='32' y='135' font-family='Arial,sans-serif' font-size='30' font-weight='bold' fill='%234e342e'%3E%24%3C/text%3E%3C!-- Calculator --%3E%3Crect x='100' y='85' width='45' height='60' rx='4' fill='%23455a64'/%3E%3Crect x='105' y='90' width='35' height='15' fill='%2381c784'/%3E%3Ccircle cx='112' cy='115' r='5' fill='%2390a4ae'/%3E%3Ccircle cx='127' cy='115' r='5' fill='%2390a4ae'/%3E%3Ccircle cx='112' cy='130' r='5' fill='%2390a4ae'/%3E%3Ccircle cx='127' cy='130' r='5' fill='%23ff7043'/%3E%3C!-- Briefcase --%3E%3Crect x='100' y='155' width='55' height='35' rx='4' fill='%23795548'/%3E%3Crect x='115' y='148' width='25' height='10' rx='2' fill='%235d4037'/%3E%3Crect x='120' y='165' width='15' height='10' rx='2' fill='%23a1887f'/%3E%3C!-- Percent up --%3E%3Ctext x='145' y='55' font-family='Arial,sans-serif' font-size='30' font-weight='bold' fill='%231b5e20'%3E%25%3C/text%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.22;
}

/* Lavender theme - Pie chart, stocks certificate, coins, bank */
[data-theme="lavender"] body::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3C!-- Pie chart --%3E%3Ccircle cx='45' cy='45' r='35' fill='%239575cd'/%3E%3Cpath d='M45 45 L45 10 A35 35 0 0 1 75 30 Z' fill='%237e57c2'/%3E%3Cpath d='M45 45 L75 30 A35 35 0 0 1 80 45 Z' fill='%23b39ddb'/%3E%3C!-- Stock certificate --%3E%3Crect x='100' y='15' width='65' height='50' fill='%23fff8e1' stroke='%23ffb300' stroke-width='2'/%3E%3Cpath d='M105 30 L160 30 M105 40 L145 40 M105 50 L135 50' stroke='%23bdbdbd' stroke-width='2'/%3E%3Ccircle cx='150' cy='50' r='10' fill='none' stroke='%23ffc107' stroke-width='2'/%3E%3C!-- Bank building --%3E%3Cpath d='M45 100 L15 120 L75 120 Z' fill='%237986cb'/%3E%3Crect x='20' y='120' width='50' height='40' fill='%239fa8da'/%3E%3Crect x='25' y='125' width='10' height='35' fill='%235c6bc0'/%3E%3Crect x='40' y='125' width='10' height='35' fill='%235c6bc0'/%3E%3Crect x='55' y='125' width='10' height='35' fill='%235c6bc0'/%3E%3Crect x='15' y='158' width='60' height='8' fill='%237986cb'/%3E%3C!-- Stack of coins --%3E%3Cellipse cx='130' cy='140' rx='30' ry='10' fill='%23ffc107'/%3E%3Cellipse cx='130' cy='130' rx='30' ry='10' fill='%23ffca28'/%3E%3Cellipse cx='130' cy='120' rx='30' ry='10' fill='%23ffd54f'/%3E%3Ctext x='120' y='138' font-family='Arial,sans-serif' font-size='20' font-weight='bold' fill='%23ff8f00'%3E%24%3C/text%3E%3C!-- Dollar sign --%3E%3Ctext x='100' y='95' font-family='Arial,sans-serif' font-size='40' font-weight='bold' fill='%237b1fa2'%3E%24%3C/text%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity: 0.2;
}

/* Ensure main content sits above the pattern overlay */
[data-theme="ocean"] .main-content,
[data-theme="sunset"] .main-content,
[data-theme="bubblegum"] .main-content,
[data-theme="mint"] .main-content,
[data-theme="lavender"] .main-content,
[data-theme="ocean"] .sidebar,
[data-theme="sunset"] .sidebar,
[data-theme="bubblegum"] .sidebar,
[data-theme="mint"] .sidebar,
[data-theme="lavender"] .sidebar,
[data-theme="ocean"] .global-ticker,
[data-theme="sunset"] .global-ticker,
[data-theme="bubblegum"] .global-ticker,
[data-theme="mint"] .global-ticker,
[data-theme="lavender"] .global-ticker {
    position: relative;
    z-index: 1;
}

/* === FUN THEME SIDEBAR STYLES === */
/* Override sidebar with colorful gradients - using direct values */
[data-theme="ocean"] .sidebar {
    background: linear-gradient(180deg, #1a237e 0%, #283593 100%) !important;
    backdrop-filter: none !important;
    border-right: 2px solid rgba(255, 255, 255, 0.3) !important;
}
[data-theme="sunset"] .sidebar {
    background: linear-gradient(180deg, #4a148c 0%, #7b1fa2 100%) !important;
    backdrop-filter: none !important;
    border-right: 2px solid rgba(255, 255, 255, 0.3) !important;
}
[data-theme="bubblegum"] .sidebar {
    background: linear-gradient(180deg, #006064 0%, #00838f 100%) !important;
    backdrop-filter: none !important;
    border-right: 2px solid rgba(255, 255, 255, 0.3) !important;
}
[data-theme="mint"] .sidebar {
    background: linear-gradient(180deg, #bf360c 0%, #e64a19 100%) !important;
    backdrop-filter: none !important;
    border-right: 2px solid rgba(255, 255, 255, 0.3) !important;
}
[data-theme="lavender"] .sidebar {
    background: linear-gradient(180deg, #1b5e20 0%, #2e7d32 100%) !important;
    backdrop-filter: none !important;
    border-right: 2px solid rgba(255, 255, 255, 0.3) !important;
}

[data-theme="ocean"] .sidebar-menu a,
[data-theme="sunset"] .sidebar-menu a,
[data-theme="bubblegum"] .sidebar-menu a,
[data-theme="mint"] .sidebar-menu a,
[data-theme="lavender"] .sidebar-menu a {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    font-weight: 600;
}

[data-theme="ocean"] .sidebar-menu a *,
[data-theme="sunset"] .sidebar-menu a *,
[data-theme="bubblegum"] .sidebar-menu a *,
[data-theme="mint"] .sidebar-menu a *,
[data-theme="lavender"] .sidebar-menu a * {
    color: #ffffff !important;
}

[data-theme="ocean"] .sidebar-menu a:hover,
[data-theme="sunset"] .sidebar-menu a:hover,
[data-theme="bubblegum"] .sidebar-menu a:hover,
[data-theme="mint"] .sidebar-menu a:hover,
[data-theme="lavender"] .sidebar-menu a:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

[data-theme="ocean"] .sidebar-menu a.active,
[data-theme="sunset"] .sidebar-menu a.active,
[data-theme="bubblegum"] .sidebar-menu a.active,
[data-theme="mint"] .sidebar-menu a.active,
[data-theme="lavender"] .sidebar-menu a.active {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Fun theme menu parent items (Automation, Watchlist, Options, etc.) */
[data-theme="ocean"] .sidebar-menu .menu-item-parent,
[data-theme="sunset"] .sidebar-menu .menu-item-parent,
[data-theme="bubblegum"] .sidebar-menu .menu-item-parent,
[data-theme="mint"] .sidebar-menu .menu-item-parent,
[data-theme="lavender"] .sidebar-menu .menu-item-parent {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

[data-theme="ocean"] .sidebar-menu .menu-item-parent *,
[data-theme="sunset"] .sidebar-menu .menu-item-parent *,
[data-theme="bubblegum"] .sidebar-menu .menu-item-parent *,
[data-theme="mint"] .sidebar-menu .menu-item-parent *,
[data-theme="lavender"] .sidebar-menu .menu-item-parent * {
    color: #ffffff !important;
}

[data-theme="ocean"] .sidebar-menu .menu-item-parent svg,
[data-theme="sunset"] .sidebar-menu .menu-item-parent svg,
[data-theme="bubblegum"] .sidebar-menu .menu-item-parent svg,
[data-theme="mint"] .sidebar-menu .menu-item-parent svg,
[data-theme="lavender"] .sidebar-menu .menu-item-parent svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
}

/* Fun theme submenu items */
[data-theme="ocean"] .sidebar-menu .submenu a,
[data-theme="sunset"] .sidebar-menu .submenu a,
[data-theme="bubblegum"] .sidebar-menu .submenu a,
[data-theme="mint"] .sidebar-menu .submenu a,
[data-theme="lavender"] .sidebar-menu .submenu a {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

[data-theme="ocean"] .sidebar-menu .submenu,
[data-theme="sunset"] .sidebar-menu .submenu,
[data-theme="bubblegum"] .sidebar-menu .submenu,
[data-theme="mint"] .sidebar-menu .submenu,
[data-theme="lavender"] .sidebar-menu .submenu {
    background: rgba(0, 0, 0, 0.15) !important;
}

[data-theme="ocean"] .sidebar-header h1,
[data-theme="sunset"] .sidebar-header h1,
[data-theme="bubblegum"] .sidebar-header h1,
[data-theme="mint"] .sidebar-header h1,
[data-theme="lavender"] .sidebar-header h1 {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="ocean"] .sidebar-header,
[data-theme="sunset"] .sidebar-header,
[data-theme="bubblegum"] .sidebar-header,
[data-theme="mint"] .sidebar-header,
[data-theme="lavender"] .sidebar-header {
    border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

/* Fun theme icons in sidebar */
[data-theme="ocean"] .sidebar-menu .icon,
[data-theme="sunset"] .sidebar-menu .icon,
[data-theme="bubblegum"] .sidebar-menu .icon,
[data-theme="mint"] .sidebar-menu .icon,
[data-theme="lavender"] .sidebar-menu .icon,
[data-theme="ocean"] .sidebar-menu svg,
[data-theme="sunset"] .sidebar-menu svg,
[data-theme="bubblegum"] .sidebar-menu svg,
[data-theme="mint"] .sidebar-menu svg,
[data-theme="lavender"] .sidebar-menu svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* === FUN THEME BUTTON STYLES === */
[data-theme="ocean"] .btn-primary,
[data-theme="sunset"] .btn-primary,
[data-theme="bubblegum"] .btn-primary,
[data-theme="mint"] .btn-primary,
[data-theme="lavender"] .btn-primary {
    background: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    border: none !important;
}

[data-theme="ocean"] .btn-primary:hover,
[data-theme="sunset"] .btn-primary:hover,
[data-theme="bubblegum"] .btn-primary:hover,
[data-theme="mint"] .btn-primary:hover,
[data-theme="lavender"] .btn-primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* === FUN THEME CARD HEADERS === */
[data-theme="ocean"] .glass-card h2,
[data-theme="ocean"] .glass-card h3,
[data-theme="sunset"] .glass-card h2,
[data-theme="sunset"] .glass-card h3,
[data-theme="bubblegum"] .glass-card h2,
[data-theme="bubblegum"] .glass-card h3,
[data-theme="mint"] .glass-card h2,
[data-theme="mint"] .glass-card h3,
[data-theme="lavender"] .glass-card h2,
[data-theme="lavender"] .glass-card h3 {
    background: var(--card-header-bg);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* === FUN THEME GLOBAL TICKER === */
[data-theme="ocean"] .global-ticker {
    background: linear-gradient(180deg, #1a237e 0%, #283593 100%) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
}
[data-theme="sunset"] .global-ticker {
    background: linear-gradient(180deg, #4a148c 0%, #7b1fa2 100%) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
}
[data-theme="bubblegum"] .global-ticker {
    background: linear-gradient(180deg, #006064 0%, #00838f 100%) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
}
[data-theme="mint"] .global-ticker {
    background: linear-gradient(180deg, #bf360c 0%, #e64a19 100%) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
}
[data-theme="lavender"] .global-ticker {
    background: linear-gradient(180deg, #1b5e20 0%, #2e7d32 100%) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3) !important;
}

[data-theme="ocean"] .global-ticker *,
[data-theme="sunset"] .global-ticker *,
[data-theme="bubblegum"] .global-ticker *,
[data-theme="mint"] .global-ticker *,
[data-theme="lavender"] .global-ticker * {
    color: #ffffff !important;
}

/* === RESET & BASE === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4 {
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }

p { color: var(--text-secondary); }

/* === GLASS CARD === */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

.glass-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    box-shadow: var(--shadow-lg);
}

/* === GLOBAL TICKER BAR === */
.global-ticker {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--ticker-height);
    background: #000000;
    border-bottom: 1px solid rgba(255, 107, 0, 0.3);
    z-index: 200;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.global-ticker .tradingview-widget-container {
    height: var(--tradingview-ticker-height);
    flex-shrink: 0;
}

/* Watchlist Ticker Bar */
.watchlist-ticker {
    height: var(--watchlist-ticker-height);
    background: linear-gradient(90deg, rgba(255, 107, 0, 0.1) 0%, rgba(0, 0, 0, 0.9) 10%, rgba(0, 0, 0, 0.9) 90%, rgba(255, 107, 0, 0.1) 100%);
    border-top: 1px solid rgba(255, 107, 0, 0.2);
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.watchlist-ticker-label {
    background: rgba(255, 107, 0, 0.15);
    color: var(--accent-primary);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-right: 1px solid rgba(255, 107, 0, 0.3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.watchlist-selector {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 107, 0, 0.3);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
    max-width: 120px;
}

.watchlist-selector:hover {
    border-color: var(--accent-primary);
}

.watchlist-selector:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.2);
}

.watchlist-selector option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Options Watchlist Ticker Styling */
.watchlist-ticker.options-ticker {
    border-top: 1px solid rgba(96, 165, 250, 0.2);
}

.watchlist-ticker-label.options-label {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
    border-right: 1px solid rgba(96, 165, 250, 0.3);
}

.options-ticker .watchlist-selector {
    border-color: rgba(96, 165, 250, 0.3);
}

.options-ticker .watchlist-selector:hover,
.options-ticker .watchlist-selector:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

.watchlist-ticker-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.watchlist-ticker-scroll {
    display: flex;
    align-items: center;
    gap: 2rem;
    animation: tickerScroll 30s linear infinite;
    white-space: nowrap;
    padding-left: 100%;
}

.watchlist-ticker-scroll:hover {
    animation-play-state: paused;
}

@keyframes tickerScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.watchlist-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Fira Code', monospace;
    font-size: 0.85rem;
    color: var(--text-primary);
}

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

.watchlist-ticker-item .ticker-type {
    font-size: 0.8rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    text-transform: uppercase;
}

.watchlist-ticker-item .ticker-type.stock {
    background: rgba(56, 189, 248, 0.2);
    color: #38bdf8;
}

.watchlist-ticker-item .ticker-type.call {
    background: rgba(0, 210, 106, 0.2);
    color: var(--profit-green);
}

.watchlist-ticker-item .ticker-type.put {
    background: rgba(255, 59, 59, 0.2);
    color: var(--loss-red);
}

.watchlist-ticker-item .ticker-details {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.watchlist-ticker-empty {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-style: italic;
    padding-left: 1rem;
}

/* Page wrapper to account for fixed ticker */
.page-wrapper {
    display: flex;
    flex: 1;
    margin-top: var(--ticker-height);
    min-height: calc(100vh - var(--ticker-height));
}

/* === SIDEBAR === */
.sidebar {
    width: var(--sidebar-width);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--glass-border);
    padding: 1.5rem 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--ticker-height);
    height: calc(100vh - var(--ticker-height));
    z-index: 100;
}

.sidebar-header {
    padding: 0.5rem 1.5rem 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 1rem;
}

.sidebar-header h1 {
    font-size: 1.25rem;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0 0.75rem;
    overflow-y: auto;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-fast);
    margin-bottom: 0.25rem;
}

.sidebar-menu a:hover {
    background: var(--glass-bg-hover);
    color: var(--text-primary);
}

.sidebar-menu a.active {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
    color: var(--accent-primary);
    border: 1px solid rgba(255, 107, 0, 0.3);
}

.sidebar-menu a svg {
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

.sidebar-menu a.active svg {
    opacity: 1;
}

.sidebar-menu a.logout-link {
    margin-top: auto;
    color: var(--accent-danger);
}

.sidebar-menu a.logout-link:hover {
    background: rgba(248, 113, 113, 0.1);
}

/* === SIDEBAR SUBMENU === */
.menu-item-wrapper {
    display: flex;
    flex-direction: column;
}

.menu-item-parent {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: 8px;
    transition: var(--transition-fast);
    cursor: pointer;
    margin-bottom: 0.25rem;
}

.menu-item-parent:hover {
    background: var(--glass-bg-hover);
    color: var(--text-primary);
}

.menu-item-parent.active {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
    color: var(--accent-primary);
    border: 1px solid rgba(255, 107, 0, 0.3);
}

.menu-item-parent svg {
    width: 20px;
    height: 20px;
    opacity: 0.8;
}

.menu-item-parent.active svg {
    opacity: 1;
}

.menu-item-parent .chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.menu-item-parent.expanded .chevron {
    transform: rotate(90deg);
}

.submenu {
    display: none;
    flex-direction: column;
    padding-left: 1rem;
    margin-bottom: 0.25rem;
    overflow: visible;
}

.submenu.open {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.submenu a {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--text-muted);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: var(--transition-fast);
    margin-bottom: 0.125rem;
    visibility: visible !important;
    opacity: 1 !important;
}

.submenu a:hover {
    background: var(--glass-bg-hover);
    color: var(--text-secondary);
}

.sidebar-menu .submenu a.active {
    background: rgba(255, 107, 0, 0.1);
    color: var(--accent-primary);
    border: none;
}

.submenu a svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

/* === MAIN CONTENT === */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    padding: 2rem 2.5rem;
    min-height: calc(100vh - var(--ticker-height));
    position: relative;
}

.content-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--glass-border);
}

.content-header h2 {
    margin-bottom: 0.5rem;
}

.content-header p {
    font-size: 0.9rem;
}

/* === GRID LAYOUTS === */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.trader-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* === STAT CARDS === */
.stat-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all var(--transition-normal);
}

.stat-card:hover {
    transform: translateY(-2px);
    border-color: var(--glass-border-hover);
    box-shadow: var(--shadow-glow);
}

.stat-card .label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.stat-card .value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.stat-card .change {
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.stat-card .change.positive { color: var(--accent-success); }
.stat-card .change.negative { color: var(--accent-danger); }

/* === SCRIPT CARDS === */
.script-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.5rem;
}

.script-card h3 {
    margin-bottom: 1rem;
    color: var(--text-primary);
}

/* === BUTTONS === */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    color: white;
    border: none;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.4);
}

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

.btn-secondary {
    background: var(--glass-bg);
    color: var(--text-primary);
    border: 1px solid var(--glass-border);
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-secondary:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
}

/* === INPUTS === */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

input, textarea, select {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--input-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all var(--transition-fast);
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.15);
}

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

/* Autofill override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* === PASSWORD WRAPPER === */
.password-wrapper {
    position: relative;
}

.password-wrapper input {
    padding-right: 4.5rem;
}

.toggle-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    transition: color var(--transition-fast);
}

.toggle-btn:hover {
    color: var(--accent-primary);
}

/* === LOGIN PAGE === */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at top, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

.login-container {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
}

.login-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: var(--shadow-lg);
    animation: fadeInUp 0.5s ease;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-icon {
    margin-bottom: 1rem;
}

.login-header h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-header p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.login-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--glass-border);
    text-align: center;
}

.login-footer p {
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* === INPUT WRAPPER WITH ICONS === */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper .input-icon {
    position: absolute;
    left: 1rem;
    color: var(--text-muted);
    pointer-events: none;
    transition: color var(--transition-fast);
}

.input-wrapper input {
    padding-left: 3rem;
}

.input-wrapper input:focus + .input-icon,
.input-wrapper:focus-within .input-icon {
    color: var(--accent-primary);
}

.form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
}

.remember-me {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.remember-me input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
}

.reset-link {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.reset-link:hover {
    color: var(--accent-secondary);
}

.login-card .btn-primary {
    width: 100%;
    margin-top: 0.5rem;
}

/* === ERROR ALERT === */
.error-alert {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: var(--accent-danger);
    padding: 0.875rem 1rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    text-align: center;
    animation: shake 0.5s ease;
}

/* === SUCCESS ALERT === */
.success-alert {
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.3);
    color: var(--accent-success);
    padding: 0.875rem 1rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    text-align: center;
}

/* === INFO ALERT === */
.info-alert {
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: var(--accent-primary);
    padding: 0.875rem 1rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    text-align: center;
}

/* === SIGNUP PROMPT === */
.signup-prompt {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--glass-border);
}

.signup-prompt p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.signup-prompt a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-fast);
}

.signup-prompt a:hover {
    color: var(--accent-secondary);
    text-decoration: underline;
}

/* === ADMIN TABS === */
.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem;
    background: var(--glass-bg);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}

.admin-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.admin-tab:hover {
    background: var(--glass-bg-hover);
    color: var(--text-primary);
}

.admin-tab.active {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3);
}

.admin-tab svg {
    flex-shrink: 0;
}

.tab-badge {
    background: var(--accent-warning);
    color: #000;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    margin-left: 0.25rem;
}

.admin-tab.active .tab-badge {
    background: rgba(255, 255, 255, 0.3);
    color: white;
}

.admin-tab-content {
    display: none;
}

.admin-tab-content.active {
    display: block;
}

/* === TERMINAL === */
.terminal-section {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 1.5rem;
}

.terminal-section h3 {
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.terminal-output {
    background: #0d1117;
    border: 1px solid #21262d;
    border-radius: 8px;
    padding: 1rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.85rem;
    color: var(--accent-success);
    height: 450px;
    overflow-y: auto;
    line-height: 1.6;
}

.terminal-output::-webkit-scrollbar {
    width: 8px;
}

.terminal-output::-webkit-scrollbar-track {
    background: #0d1117;
}

.terminal-output::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 4px;
}

/* === STATUS BADGES === */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge-success {
    background: rgba(52, 211, 153, 0.15);
    color: var(--accent-success);
}

.badge-warning {
    background: rgba(251, 191, 36, 0.15);
    color: var(--accent-warning);
}

.badge-danger {
    background: rgba(248, 113, 113, 0.15);
    color: var(--accent-danger);
}

/* === ANIMATIONS === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

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

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.animate-fade-in {
    animation: fadeInUp 0.5s ease;
}

/* === USER STATUS BAR === */
.user-status-bar {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-logout-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.user-logout-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: var(--status-danger);
    color: var(--status-danger);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

.user-profile-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.user-profile-link:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    box-shadow: var(--shadow-glow);
}

.user-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.user-profile-link:hover .user-name {
    color: var(--text-primary);
}

.user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    border-radius: 50%;
    color: white;
}

.main-content {
    position: relative;
}

/* === BLOOMBERG TERMINAL COMPONENTS === */

/* Ticker Tape Bar */
.ticker-tape {
    background: linear-gradient(90deg, #0d0d0d 0%, #141414 100%);
    border-bottom: 1px solid rgba(255, 107, 0, 0.2);
    padding: 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    overflow-x: auto;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.8rem;
    margin: -2rem -2.5rem 1.5rem -2.5rem;
    width: calc(100% + 5rem);
}

.ticker-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
}

.ticker-symbol {
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: 0.05em;
}

.ticker-price {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.ticker-change {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.ticker-change.positive {
    color: var(--profit-green);
}

.ticker-change.negative {
    color: var(--loss-red);
}

.ticker-divider {
    color: var(--text-muted);
    opacity: 0.3;
}

/* Quick Stats Dashboard */
.quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.quick-stat-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    transition: all var(--transition-fast);
}

.quick-stat-card:hover {
    border-color: var(--glass-border-hover);
    box-shadow: var(--shadow-glow);
}

.quick-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.25rem;
}

.quick-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.quick-stat-value.profit {
    color: var(--profit-green);
}

.quick-stat-value.loss {
    color: var(--loss-red);
}

.quick-stat-value.neutral {
    color: var(--neutral-amber);
}

.quick-stat-subtext {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    font-variant-numeric: tabular-nums;
}

/* Position Cards with Color Coding */
.position-card {
    background: var(--glass-bg);
    border: 2px solid var(--glass-border);
    border-radius: 10px;
    padding: 1.25rem;
    transition: all var(--transition-fast);
}

.position-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.position-card.profitable {
    border-color: var(--profit-green);
    box-shadow: 0 0 15px rgba(0, 210, 106, 0.1);
}

.position-card.profitable:hover {
    box-shadow: 0 0 25px rgba(0, 210, 106, 0.2);
}

.position-card.underwater {
    border-color: var(--loss-red);
    box-shadow: 0 0 15px rgba(255, 59, 59, 0.1);
}

.position-card.underwater:hover {
    box-shadow: 0 0 25px rgba(255, 59, 59, 0.2);
}

.position-card.neutral {
    border-color: var(--neutral-amber);
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.1);
}

.position-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.position-ticker {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-primary);
    letter-spacing: 0.05em;
}

.position-pnl {
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.position-pnl.profit { color: var(--profit-green); }
.position-pnl.loss { color: var(--loss-red); }

.position-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    font-size: 0.8rem;
}

.position-detail {
    display: flex;
    flex-direction: column;
}

.position-detail-label {
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.position-detail-value {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* Tabular Numbers Utility */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

.mono {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

/* Sticky Table Headers — all scrollable data tables */
.data-table th,
.summary-table th,
.trading-table th,
.recent-trades-table th,
.trade-input-table th,
.exp-analysis-table th {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Scrollable table container */
.table-scroll-container {
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
}

/* Trading Table Styles */
.trading-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.trading-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: var(--bg-primary, #1a1a2e);
    color: var(--accent-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--glass-border);
}

.trading-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--glass-border);
    font-variant-numeric: tabular-nums;
}

.trading-table tr:hover td {
    background: var(--glass-bg-hover);
}

.trading-table .ticker-col {
    font-weight: 700;
    color: var(--accent-primary);
}

.trading-table .profit-col {
    color: var(--profit-green);
    font-weight: 600;
}

.trading-table .loss-col {
    color: var(--loss-red);
    font-weight: 600;
}

.trading-table tr.profit-row {
    border-left: 3px solid var(--profit-green);
}

.trading-table tr.loss-row {
    border-left: 3px solid var(--loss-red);
}

/* Resizable Table Columns */
.trading-table.resizable {
    table-layout: fixed;
    width: 100%;
}

.trading-table.resizable th {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
}

.th-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 100%;
    cursor: col-resize;
    z-index: 1;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.th-resize-handle:hover,
.th-resize-handle.active {
    border-right: 2px solid var(--accent-primary);
    background: rgba(255, 255, 255, 0.05);
}

.trading-table.resizing {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: col-resize;
}

/* Market Status Indicator */
.market-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

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

.market-status.open .market-status-dot {
    background: var(--profit-green);
    box-shadow: 0 0 8px var(--profit-green);
}

.market-status.open {
    color: var(--profit-green);
}

.market-status.closed .market-status-dot {
    background: var(--loss-red);
    box-shadow: 0 0 8px var(--loss-red);
}

.market-status.closed {
    color: var(--loss-red);
}

.market-status.pre-market .market-status-dot,
.market-status.after-hours .market-status-dot {
    background: var(--neutral-amber);
    box-shadow: 0 0 8px var(--neutral-amber);
}

.market-status.pre-market,
.market-status.after-hours {
    color: var(--neutral-amber);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid var(--glass-border);
    }

    .sidebar-menu {
        flex-direction: row;
        overflow-x: auto;
        padding: 0.5rem;
    }

    .sidebar-menu a {
        white-space: nowrap;
    }

    .main-content {
        margin-left: 0;
        padding: 1.5rem;
    }

    body {
        flex-direction: column;
    }
}