/**
 * Project Amber Trading Journal - Theme CSS
 * Apple-inspired design matching the EA dashboard
 * Inspired by landonorris.com premium experience
 */

/* ============================================================================
   CSS Variables - Dark Mode (Default) - Matching EA exactly
   ============================================================================ */
:root {
    /* Background colors - Rich dark with subtle warmth */
    --bg-main: rgb(28, 28, 30);         /* Deep space gray (Apple's background) */
    --bg-panel: rgb(44, 44, 46);         /* Elevated surface gray */
    --bg-panel-dark: rgb(58, 58, 60);    /* Highlighted panel */
    --bg-header: rgb(38, 38, 40);        /* Header background */
    --bg-selected: rgb(72, 72, 74);      /* Selected item highlight */
    --bg-card: rgba(44, 44, 46, 0.8);    /* Card with transparency */
    --bg-input: rgb(38, 38, 40);         /* Input field background */

    /* Border & Grid */
    --border: rgb(99, 99, 102);          /* Medium gray border */
    --border-subtle: rgba(99, 99, 102, 0.5);
    --grid: rgb(58, 58, 60);             /* Subtle grid lines */

    /* Text colors */
    --text-main: rgb(255, 255, 255);     /* Pure white primary text */
    --text-sub: rgb(152, 152, 157);      /* Muted gray secondary text */
    --text-tertiary: rgb(122, 122, 127); /* Tertiary text (between sub and dim) */
    --text-dim: rgb(99, 99, 102);        /* Very muted text */

    /* Status colors - Vibrant and clear (iOS system colors) */
    --profit: rgb(52, 199, 89);          /* iOS system green */
    --profit-bg: rgba(52, 199, 89, 0.15);
    --loss: rgb(255, 69, 58);            /* iOS system red */
    --loss-bg: rgba(255, 69, 58, 0.15);
    --accent: rgb(10, 132, 255);         /* iOS/macOS system blue */
    --accent-hover: rgb(30, 150, 255);   /* Lighter blue on hover */
    --accent-bg: rgba(10, 132, 255, 0.15);
    --purple: rgb(191, 90, 242);         /* iOS system purple */
    --purple-bg: rgba(191, 90, 242, 0.15);
    --teal: rgb(90, 200, 250);           /* iOS system teal */
    --teal-bg: rgba(90, 200, 250, 0.15);
    --teal-bg-light: rgba(90, 200, 250, 0.08);
    --orange: rgb(255, 149, 0);          /* iOS system orange */
    --orange-bg: rgba(255, 149, 0, 0.15);
    --orange-bg-light: rgba(255, 149, 0, 0.08);
    --orange-border: rgba(255, 149, 0, 0.2);
    --yellow: rgb(255, 204, 0);          /* iOS system yellow */
    --yellow-bg: rgba(255, 204, 0, 0.15);

    /* Social Media Brand Colors */
    --discord: rgb(88, 101, 242);        /* Discord brand blue */
    --discord-bg: rgba(88, 101, 242, 0.15);
    --discord-bg-light: rgba(88, 101, 242, 0.08);
    --whatsapp: rgb(37, 211, 102);       /* WhatsApp brand green */
    --whatsapp-bg: rgba(37, 211, 102, 0.15);
    --telegram: rgb(0, 136, 204);        /* Telegram brand blue */
    --telegram-bg: rgba(0, 136, 204, 0.15);
    --twitter: rgb(29, 161, 242);        /* Twitter/X brand blue */
    --twitter-bg: rgba(29, 161, 242, 0.15);

    /* Light variants for gradients */
    --profit-bg-light: rgba(52, 199, 89, 0.08);
    --accent-bg-light: rgba(10, 132, 255, 0.08);

    /* Extended background levels */
    --bg-tertiary: rgb(58, 58, 60);       /* Third-level background */
    --bg-elevated: rgb(50, 50, 52);       /* Elevated surface */
    --progress-track: rgba(255, 255, 255, 0.06); /* Progress bar track */

    /* Semantic accent colors (aliases for consistency) */
    --accent-blue: var(--accent);
    --accent-blue-transparent: var(--accent-bg);
    --accent-green: var(--profit);
    --accent-green-transparent: var(--profit-bg);
    --accent-red: var(--loss);
    --accent-red-transparent: var(--loss-bg);
    --accent-yellow: var(--yellow);
    --accent-yellow-transparent: rgba(255, 204, 0, 0.15);
    --accent-purple: var(--purple);
    --accent-purple-transparent: var(--purple-bg);

    /* Additional semantic aliases for consistency */
    --bg-hover: rgb(58, 58, 60);             /* Hover state background */
    --bg-raised: rgba(255, 255, 255, 0.03);  /* Slightly raised surface */
    --bg-dark: var(--bg-main);               /* Alias for dark background */
    --bg-primary: var(--bg-panel);           /* Primary background alias */
    --bg-secondary: var(--bg-tertiary);      /* Secondary background alias */
    --card-bg: var(--bg-card);               /* Card background alias */
    --text-muted: var(--text-sub);           /* Alias for text-sub */
    --text-primary: var(--text-main);        /* Primary text alias */
    --text-secondary: var(--text-sub);       /* Secondary text alias */
    --text-warning: var(--orange);           /* Warning text color */
    --text: var(--text-main);                /* Generic text alias */
    --border-color: var(--border);           /* Border color alias */
    --border-light: var(--border-subtle);    /* Light border alias */
    --border-main: var(--border);            /* Main border alias */
    --success: var(--profit);                /* Semantic success color */
    --danger: var(--loss);                   /* Semantic danger color */
    --error: var(--loss);                    /* Semantic error color */
    --red: var(--loss);                      /* Red color alias */
    --warning: var(--orange);                /* Semantic warning color */
    --info: var(--accent);                   /* Semantic info color */
    --accent-primary: var(--accent);         /* Primary accent alias */
    --accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%);
    --radius-md: var(--radius);              /* Medium radius alias */
    --shadow-color: rgba(0, 0, 0, 0.3);      /* Shadow color */
    --purple-light: rgb(210, 130, 255);      /* Lighter purple for gradients */
    --loss-light: rgb(255, 105, 97);         /* Lighter loss for gradients */
    --profit-hover: rgb(47, 184, 102);       /* Profit hover/dark variant */
    --profit-dark: rgb(42, 174, 74);         /* Profit darker variant */
    --loss-hover: rgb(230, 52, 42);          /* Loss hover/dark variant */
    --loss-dark: rgb(217, 56, 48);           /* Loss darker variant */
    --amber: rgb(247, 147, 30);              /* Amber/golden orange for branding */
    --amber-dark: rgb(255, 107, 53);         /* Darker amber variant */

    /* Candle colors */
    --candle-bull: rgb(45, 120, 60);
    --candle-bear: rgb(140, 55, 50);

    /* ---- Typography Scale ---- */
    --font-xs: 11px;
    --font-sm: 13px;
    --font-md: 14px;
    --font-base: 15px;
    --font-lg: 16px;
    --font-xl: 20px;
    --font-2xl: 24px;
    --font-3xl: 32px;
    --font-4xl: 42px;
    --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;

    /* ---- Spacing Scale ---- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 40px;
    --space-4xl: 48px;

    /* ---- Border Radius ---- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-md: var(--radius);
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 100px;

    /* ---- Shadows ---- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.5);
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 60px rgba(52, 199, 89, 0.3);

    /* ---- Animation & Transition ---- */
    --transition-fast: 0.15s cubic-bezier(0.22, 1, 0.36, 1);
    --transition: 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-slow: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    --cubic: cubic-bezier(0.22, 1, 0.36, 1);
    --cubic-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --animation-fast: 0.2s;
    --animation: 0.4s;
    --animation-slow: 0.6s;
    --stagger-delay: 0.05s;

    /* ---- Glass Effect ---- */
    --glass-bg: rgba(44, 44, 46, 0.68);
    --glass-blur: 20px;
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-highlight: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 20px rgba(255, 255, 255, 0.02);
    --glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 30px rgba(255, 255, 255, 0.03);
}

/* ============================================================================
   Light Mode - Matching EA exactly
   ============================================================================ */
:root.light {
    --bg-main: rgb(255, 255, 255);
    --bg-panel: rgb(242, 242, 247);
    --bg-panel-dark: rgb(229, 229, 234);
    --bg-header: rgb(248, 248, 250);
    --bg-selected: rgb(209, 209, 214);
    --bg-card: rgba(242, 242, 247, 0.9);
    --bg-input: rgb(255, 255, 255);       /* Input field background - light */
    --border: rgb(198, 198, 200);
    --border-subtle: rgba(198, 198, 200, 0.5);
    --grid: rgb(229, 229, 234);
    --text-main: rgb(0, 0, 0);
    --text-sub: rgb(142, 142, 147);
    --text-tertiary: rgb(158, 158, 163);
    --text-dim: rgb(174, 174, 178);
    --profit: rgb(40, 167, 69);
    --profit-bg: rgba(40, 167, 69, 0.1);
    --loss: rgb(220, 53, 45);
    --loss-bg: rgba(220, 53, 45, 0.1);
    --accent: rgb(24, 111, 216);
    --accent-hover: rgb(20, 95, 200);
    --accent-bg: rgba(24, 111, 216, 0.1);
    --purple: rgb(147, 72, 192);
    --purple-bg: rgba(147, 72, 192, 0.1);
    --teal: rgb(58, 163, 206);
    --teal-bg: rgba(58, 163, 206, 0.1);
    --teal-bg-light: rgba(58, 163, 206, 0.06);
    --orange: rgb(218, 128, 0);
    --orange-bg: rgba(218, 128, 0, 0.1);
    --orange-bg-light: rgba(218, 128, 0, 0.06);
    --orange-border: rgba(218, 128, 0, 0.15);
    --yellow: rgb(190, 160, 0);
    --yellow-bg: rgba(190, 160, 0, 0.1);
    --discord: rgb(88, 101, 242);
    --discord-bg: rgba(88, 101, 242, 0.12);
    --discord-bg-light: rgba(88, 101, 242, 0.06);
    --profit-bg-light: rgba(40, 167, 69, 0.06);
    --accent-bg-light: rgba(24, 111, 216, 0.06);
    --bg-tertiary: rgb(229, 229, 234);
    --bg-elevated: rgb(238, 238, 243);
    --progress-track: rgba(0, 0, 0, 0.08);
    --accent-blue: var(--accent);
    --accent-blue-transparent: var(--accent-bg);
    --accent-green: var(--profit);
    --accent-green-transparent: var(--profit-bg);
    --accent-red: var(--loss);
    --accent-red-transparent: var(--loss-bg);
    --accent-yellow: rgb(255, 204, 0);
    --accent-yellow-transparent: rgba(255, 204, 0, 0.12);
    --accent-purple: var(--purple);
    --accent-purple-transparent: var(--purple-bg);
    /* Light mode semantic aliases */
    --bg-hover: rgb(229, 229, 234);
    --bg-raised: rgba(0, 0, 0, 0.02);
    --bg-dark: var(--bg-main);
    --bg-primary: var(--bg-panel);
    --bg-secondary: var(--bg-tertiary);
    --card-bg: var(--bg-card);
    --text-muted: var(--text-sub);
    --text-primary: var(--text-main);
    --text-secondary: var(--text-sub);
    --text-warning: rgb(255, 149, 0);
    --text: var(--text-main);
    --border-color: var(--border);
    --border-light: var(--border-subtle);
    --border-main: var(--border);
    --success: var(--profit);
    --danger: var(--loss);
    --error: var(--loss);
    --red: var(--loss);
    --warning: var(--orange);
    --info: var(--accent);
    --accent-primary: var(--accent);
    --accent-gradient: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%);
    --radius-md: var(--radius);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --purple-light: rgb(200, 130, 240);
    --loss-light: rgb(255, 100, 90);
    --profit-hover: rgb(35, 180, 55);
    --profit-dark: rgb(30, 165, 50);
    --loss-hover: rgb(220, 50, 40);
    --loss-dark: rgb(200, 45, 35);
    --amber: rgb(235, 140, 25);
    --amber-dark: rgb(245, 100, 45);
    --candle-bull: rgb(50, 140, 70);
    --candle-bear: rgb(170, 60, 55);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.16);
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 60px rgba(52, 199, 89, 0.2);

    /* ---- Glass Effect (Light) ---- */
    --glass-bg: rgba(255, 255, 255, 0.68);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-highlight: rgba(255, 255, 255, 0.5);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(255, 255, 255, 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.15);
    --glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(255, 255, 255, 0.4),
        inset 0 0 30px rgba(255, 255, 255, 0.2);
}

/* Light mode via media query (fallback when JS unavailable) */
@media (prefers-color-scheme: light) {
    :root {
        --bg-main: rgb(255, 255, 255);
        --bg-panel: rgb(242, 242, 247);
        --bg-panel-dark: rgb(229, 229, 234);
        --bg-header: rgb(248, 248, 250);
        --bg-selected: rgb(209, 209, 214);
        --bg-card: rgba(242, 242, 247, 0.9);
        --bg-input: rgb(255, 255, 255);
        --border: rgb(198, 198, 200);
        --border-subtle: rgba(198, 198, 200, 0.5);
        --grid: rgb(229, 229, 234);
        --text-main: rgb(0, 0, 0);
        --text-sub: rgb(142, 142, 147);
        --text-tertiary: rgb(158, 158, 163);
        --text-dim: rgb(174, 174, 178);
        --profit: rgb(40, 167, 69);
        --profit-bg: rgba(40, 167, 69, 0.1);
        --loss: rgb(220, 53, 45);
        --loss-bg: rgba(220, 53, 45, 0.1);
        --accent: rgb(24, 111, 216);
        --accent-hover: rgb(20, 95, 200);
        --accent-bg: rgba(24, 111, 216, 0.1);
        --purple: rgb(147, 72, 192);
        --purple-bg: rgba(147, 72, 192, 0.1);
        --teal: rgb(58, 163, 206);
        --teal-bg: rgba(58, 163, 206, 0.1);
        --teal-bg-light: rgba(58, 163, 206, 0.06);
        --orange: rgb(218, 128, 0);
        --orange-bg: rgba(218, 128, 0, 0.1);
        --orange-bg-light: rgba(218, 128, 0, 0.06);
        --orange-border: rgba(218, 128, 0, 0.15);
        --discord: rgb(88, 101, 242);
        --discord-bg: rgba(88, 101, 242, 0.12);
        --discord-bg-light: rgba(88, 101, 242, 0.06);
        --profit-bg-light: rgba(40, 167, 69, 0.06);
        --accent-bg-light: rgba(24, 111, 216, 0.06);
        --bg-tertiary: rgb(229, 229, 234);
        --bg-elevated: rgb(238, 238, 243);
        --bg-hover: rgb(229, 229, 234);
        --bg-raised: rgba(0, 0, 0, 0.02);
        --shadow-color: rgba(0, 0, 0, 0.1);
        --purple-light: rgb(200, 130, 240);
        --loss-light: rgb(255, 100, 90);
        --profit-hover: rgb(35, 180, 55);
        --profit-dark: rgb(30, 165, 50);
        --loss-hover: rgb(220, 50, 40);
        --loss-dark: rgb(200, 45, 35);
        --amber: rgb(235, 140, 25);
        --amber-dark: rgb(245, 100, 45);
        --candle-bull: rgb(50, 140, 70);
        --candle-bear: rgb(170, 60, 55);
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
        --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
        --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
        --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.16);
        --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.04);
        --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.1);
        --shadow-glow: 0 0 60px rgba(52, 199, 89, 0.2);

        /* ---- Glass Effect (Light) ---- */
        --glass-bg: rgba(255, 255, 255, 0.68);
        --glass-border: rgba(0, 0, 0, 0.08);
        --glass-highlight: rgba(255, 255, 255, 0.5);
        --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.9),
            inset 0 -1px 0 rgba(255, 255, 255, 0.3),
            inset 0 0 20px rgba(255, 255, 255, 0.15);
        --glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 1),
            inset 0 -1px 0 rgba(255, 255, 255, 0.4),
            inset 0 0 30px rgba(255, 255, 255, 0.2);
    }
}

/* ============================================================================
   Glass Effect — Unified card/panel styling
   Single source of truth for the frosted-glass appearance on all cards.
   To adjust the glass look, change ONLY the --glass-* tokens in :root.
   ============================================================================ */
.card,
.login-box,
.kpi-card,
.chart-panel,
.pattern-card,
.instance-card,
.calendar-panel,
.agenda-panel,
.stat-card,
.page-header-card,
.open-positions-panel,
.pending-orders-panel,
.trades-stat-card,
.settings-instance-card,
.dashboard-hero,
.glass-card,
.kpi-card.glass,
.ticket-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
}

/* ============================================================================
   Unified Component Library - Shared Across All Pages
   ============================================================================ */

/* Icon Size Utility Classes */
.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

/* Unified Card Hover Effect */
.card-interactive {
    transition: transform var(--transition), box-shadow var(--transition);
}

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

/* Skeleton Loading Placeholders */
.skeleton {
    background: linear-gradient(90deg,
        var(--bg-panel) 25%,
        var(--bg-panel-dark) 50%,
        var(--bg-panel) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius);
    will-change: background-position;
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    border-radius: var(--radius-sm);
}

.skeleton-text-sm {
    height: 12px;
    width: 60%;
}

.skeleton-text-lg {
    height: 20px;
    width: 80%;
}

.skeleton-title {
    height: 24px;
    width: 40%;
    margin-bottom: 12px;
}

.skeleton-card {
    height: 120px;
    border-radius: var(--radius-lg);
}

.skeleton-row {
    height: 48px;
    margin-bottom: 8px;
    border-radius: var(--radius);
}

.skeleton-chart {
    height: 300px;
    border-radius: var(--radius-lg);
}

.skeleton-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

/* Stat Card with Top Accent Bar - Unified */
.stat-card-accent {
    position: relative;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 16px;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.stat-card-accent::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--purple));
    opacity: 0;
    transition: opacity var(--transition);
}

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

.stat-card-accent:hover::before {
    opacity: 1;
}

/* Loading Spinner - Unified */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }

/* Empty State - See comprehensive styles below at line ~8228 */

/* Social Share Buttons - Unified */
.btn-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
    color: white;
}

.btn-social:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    filter: brightness(1.1);
}

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

.btn-social-whatsapp { background: var(--whatsapp); }
.btn-social-telegram { background: var(--telegram); }
.btn-social-twitter { background: var(--twitter); }
.btn-social-discord { background: var(--discord); }
.btn-social-email { background: var(--bg-elevated); color: var(--text-main); border: 1px solid var(--border-subtle); }
.btn-social-email:hover { background: var(--bg-panel); }

/* Form Input - Unified */
.form-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    font-size: 15px;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.form-input::placeholder {
    color: var(--text-dim);
}

.form-input-sm {
    padding: 8px 12px;
    font-size: 14px;
}

.form-input-center {
    text-align: center;
}

/* Addon Badge - Unified */
.addon-badge {
    display: inline-block;
    background: var(--profit-bg);
    color: var(--profit);
    padding: 4px 10px;
    border-radius: var(--radius-lg);
    font-size: 0.85em;
    font-weight: 500;
}

.addon-badge-orange {
    background: var(--orange-bg);
    color: var(--orange);
}

.addon-badge-purple {
    background: var(--purple-bg);
    color: var(--purple);
}

/* Button Size Variants - Unified */
.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: var(--radius-sm);
}

.btn-md {
    padding: 10px 16px;
    font-size: 14px;
    border-radius: var(--radius);
}

.btn-lg {
    padding: 14px 24px;
    font-size: 16px;
    border-radius: var(--radius);
}

/* ============================================================================
   Base Styles
   ============================================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Prevent horizontal scroll without breaking position:sticky */
    overflow-x: clip;
    /* Better touch scrolling on iOS */
    -webkit-overflow-scrolling: touch;
}

/* Scroll margin for anchor links - accounts for sticky header */
[id] {
    scroll-margin-top: 80px;
}

/* Overscroll behavior handled in main body rule below */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================================================
   Accessibility - Focus Outlines
   ============================================================================ */
/* Visible focus outlines for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Remove default outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced focus for buttons and interactive elements */
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--accent-bg);
}

/* Input focus transition enhancements */
input,
select,
textarea {
    transition: border-color 0.2s ease,
                box-shadow 0.2s ease,
                background-color 0.2s ease,
                transform 0.15s ease;
}

/* Global placeholder styling */
input::placeholder,
textarea::placeholder {
    color: var(--text-dim);
    opacity: 1;
}

input:focus::placeholder,
textarea:focus::placeholder {
    opacity: 0.5;
}

/* Autofill styling - prevent bright yellow backgrounds */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--text-main);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-panel) inset;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: var(--text-main);
}

:root.light input:-webkit-autofill,
:root.light input:-webkit-autofill:hover,
:root.light input:-webkit-autofill:focus,
:root.light select:-webkit-autofill,
:root.light textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--text-main);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-panel) inset;
}

/* Subtle lift on focus — excludes select to avoid interfering with native picker on mobile */
input:focus,
textarea:focus {
    transform: translateY(-1px);
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent);
    color: white;
    padding: 8px 16px;
    z-index: 10000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

/* Text selection styling */
::selection {
    background: var(--accent);
    color: white;
}

:root.light ::selection {
    background: var(--accent);
    color: white;
}

::-moz-selection {
    background: var(--accent);
    color: white;
}

/* ============================================================================
   Custom Form Controls (Checkboxes, Toggles, Radio)
   ============================================================================ */

/* Custom Checkbox */
.custom-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-main);
    user-select: none;
}

.custom-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.custom-checkbox .checkmark {
    width: 20px;
    height: 20px;
    background: var(--bg-main);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.custom-checkbox .checkmark svg {
    width: 12px;
    height: 12px;
    stroke: white;
    stroke-width: 3;
    opacity: 0;
    transform: scale(0.5);
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-checkbox:hover .checkmark {
    border-color: var(--accent);
    background: rgba(10, 132, 255, 0.1);
}

.custom-checkbox input:checked + .checkmark {
    background: var(--accent);
    border-color: var(--accent);
}

.custom-checkbox input:checked + .checkmark svg {
    opacity: 1;
    transform: scale(1);
}

.custom-checkbox input:focus-visible + .checkmark {
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.custom-checkbox input:disabled + .checkmark {
    opacity: 0.5;
    cursor: not-allowed;
}

.custom-checkbox:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Custom Toggle Switch */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-main);
    user-select: none;
}

.toggle-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch .toggle-track {
    width: 44px;
    height: 24px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    position: relative;
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.toggle-switch .toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.toggle-switch:hover .toggle-track {
    border-color: var(--accent);
}

.toggle-switch input:checked + .toggle-track {
    background: var(--accent);
    border-color: var(--accent);
}

.toggle-switch input:checked + .toggle-track::after {
    transform: translateX(20px);
}

.toggle-switch input:focus-visible + .toggle-track {
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.toggle-switch input:disabled + .toggle-track {
    opacity: 0.5;
    cursor: not-allowed;
}

.toggle-switch:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Small toggle variant */
.toggle-switch.toggle-sm .toggle-track {
    width: 36px;
    height: 20px;
}

.toggle-switch.toggle-sm .toggle-track::after {
    width: 14px;
    height: 14px;
}

.toggle-switch.toggle-sm input:checked + .toggle-track::after {
    transform: translateX(16px);
}

/* Custom Radio Button */
.custom-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-main);
    user-select: none;
}

.custom-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.custom-radio .radio-mark {
    width: 20px;
    height: 20px;
    background: var(--bg-main);
    border: 2px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.custom-radio .radio-mark::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--accent);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-radio:hover .radio-mark {
    border-color: var(--accent);
}

.custom-radio input:checked + .radio-mark {
    border-color: var(--accent);
}

.custom-radio input:checked + .radio-mark::after {
    opacity: 1;
    transform: scale(1);
}

.custom-radio input:focus-visible + .radio-mark {
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.custom-radio input:disabled + .radio-mark {
    opacity: 0.5;
    cursor: not-allowed;
}

.custom-radio:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Radio/Checkbox Group Container */
.form-check-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-check-group.horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
    overflow-x: clip;
    overscroll-behavior-y: contain;
    /* Smooth theme transitions */
    transition: background-color 0.4s ease, color 0.3s ease;
}

/* Ambient gradient mesh — gives backdrop-filter blur visible color to refract */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 800px 600px at 10% 15%, rgba(10, 132, 255, 0.18), transparent 70%),
        radial-gradient(ellipse 700px 500px at 85% 8%, rgba(191, 90, 242, 0.15), transparent 70%),
        radial-gradient(ellipse 600px 500px at 70% 75%, rgba(52, 199, 89, 0.12), transparent 70%),
        radial-gradient(ellipse 700px 400px at 25% 65%, rgba(90, 200, 250, 0.10), transparent 70%);
}

:root.light body::before {
    background:
        radial-gradient(ellipse 800px 600px at 10% 15%, rgba(10, 132, 255, 0.10), transparent 70%),
        radial-gradient(ellipse 700px 500px at 85% 8%, rgba(191, 90, 242, 0.08), transparent 70%),
        radial-gradient(ellipse 600px 500px at 70% 75%, rgba(52, 199, 89, 0.06), transparent 70%),
        radial-gradient(ellipse 700px 400px at 25% 65%, rgba(90, 200, 250, 0.05), transparent 70%);
}

/* ============================================================================
   Page Transitions & Animations
   ============================================================================ */

/* CSS View Transitions API for smooth page navigation (modern browsers) */
@view-transition {
    navigation: auto;
}

/* Root transition - fade only, no scale/transform to prevent header wobble */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

/* Main content gets the transition effect */
.main-content {
    view-transition-name: main-content;
}

::view-transition-old(main-content) {
    animation: contentFadeOut 0.15s cubic-bezier(0.4, 0, 1, 1) forwards;
}

::view-transition-new(main-content) {
    animation: contentFadeIn 0.2s cubic-bezier(0, 0, 0.2, 1) forwards;
}

@keyframes contentFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes contentFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Nav transition disabled to preserve position:sticky behavior */

/* Keep filters bar stable */
.filters-bar {
    view-transition-name: filters;
}

::view-transition-old(filters),
::view-transition-new(filters) {
    animation: none;
}

/* Page loading state */
body.page-loading::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--teal), var(--accent));
    background-size: 200% 100%;
    animation: loadingBar 1s ease-in-out infinite;
    z-index: 10000;
}

@keyframes loadingBar {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Main content transitions (fallback for non-View Transitions browsers) */
.main-content.page-exiting {
    animation: contentFadeOut 0.15s ease-out forwards;
    pointer-events: none;
}

.main-content.page-entering {
    animation: contentFadeIn 0.2s ease-out forwards;
}

/* Page fade-in animation (initial page load) */
@keyframes pageReveal {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply page reveal to main content on initial load */
body.page-loaded .main-content,
body.page-loaded .login-container {
    animation: pageReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Staggered reveal for sections */
body.page-loaded .section-title {
    opacity: 0;
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

body.page-loaded .section-title:nth-of-type(1) { animation-delay: 0.1s; }
body.page-loaded .section-title:nth-of-type(2) { animation-delay: 0.15s; }
body.page-loaded .section-title:nth-of-type(3) { animation-delay: 0.2s; }
body.page-loaded .section-title:nth-of-type(4) { animation-delay: 0.25s; }

body.page-loaded .kpi-grid {
    opacity: 0;
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.1s;
}

body.page-loaded .chart-panel {
    opacity: 0;
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.2s;
}

body.page-loaded .instances-grid {
    opacity: 0;
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.25s;
}

body.page-loaded .calendar-agenda-wrapper {
    opacity: 0;
    animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.3s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Refresh button spin animation */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Theme icon transition */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Staggered reveal for cards and panels */
.kpi-card,
.chart-panel,
.calendar-panel,
.agenda-panel,
.open-positions-panel,
.instance-card {
    opacity: 0;
    animation: pageReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.kpi-card:nth-child(1) { animation-delay: 0.05s; }
.kpi-card:nth-child(2) { animation-delay: 0.1s; }
.kpi-card:nth-child(3) { animation-delay: 0.15s; }
.kpi-card:nth-child(4) { animation-delay: 0.2s; }

.chart-panel { animation-delay: 0.15s; }
.calendar-panel { animation-delay: 0.2s; }
.agenda-panel { animation-delay: 0.25s; }

.instance-card:nth-child(1) { animation-delay: 0.1s; }
.instance-card:nth-child(2) { animation-delay: 0.15s; }
.instance-card:nth-child(3) { animation-delay: 0.2s; }
.instance-card:nth-child(4) { animation-delay: 0.25s; }
.instance-card:nth-child(5) { animation-delay: 0.3s; }
.instance-card:nth-child(6) { animation-delay: 0.35s; }

/* ============================================================================
   Enhanced Page Load Animations - Headers, Content, Footers
   ============================================================================ */

/* Page header animation */
.page-header,
.section-header,
h1.page-title,
h2.section-title,
.panel-header {
    opacity: 0;
    animation: slideDownFade 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Main content slide up animation */
.main-content > *:not(.section-title):not(.page-header) {
    opacity: 0;
    animation: slideUpContent 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes slideUpContent {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered animation delays for main content children */
.main-content > *:nth-child(1) { animation-delay: 0.05s; }
.main-content > *:nth-child(2) { animation-delay: 0.1s; }
.main-content > *:nth-child(3) { animation-delay: 0.15s; }
.main-content > *:nth-child(4) { animation-delay: 0.2s; }
.main-content > *:nth-child(5) { animation-delay: 0.25s; }
.main-content > *:nth-child(6) { animation-delay: 0.3s; }
.main-content > *:nth-child(7) { animation-delay: 0.35s; }
.main-content > *:nth-child(8) { animation-delay: 0.4s; }

/* Footer slide up animation */
.site-footer {
    opacity: 0;
    animation: footerSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.4s;
}

@keyframes footerSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Navigation bar smooth entrance */
.nav-container {
    opacity: 0;
    animation: navFadeIn 0.4s ease forwards;
}

@keyframes navFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Filters bar slide down animation */
.filters-bar {
    opacity: 0;
    animation: filtersSlideDown 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: 0.1s;
}

@keyframes filtersSlideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Page title with gradient shimmer on load */
.page-title {
    position: relative;
    overflow: hidden;
}

.page-title::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: titleShimmer 1.5s ease forwards;
    animation-delay: 0.3s;
    pointer-events: none;
}

:root.light .page-title::after {
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.04), transparent);
}

@keyframes titleShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Card/panel — no blanket animation (dashboard uses dash-animate for scroll reveals) */

/* Table rows — instant render, no stagger animation (avoids dozens of concurrent animations) */

/* Form fields — instant render */

/* Beta banner slide up from bottom */
.beta-banner {
    opacity: 0;
    animation: bannerSlideUp 0.5s ease forwards;
    animation-delay: 0.5s;
}

@keyframes bannerSlideUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Refresh button spinning state */
.btn-primary.spinning svg,
.btn.spinning svg {
    animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   Number Value Update Animations
   ============================================================================ */

/* Base class for animated numbers */
.value-animated {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.2s ease,
                color 0.3s ease;
}

/* When value is updating */
.value-updating {
    animation: valueUpdate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes valueUpdate {
    0% {
        opacity: 0.6;
        transform: scale(0.95) translateY(4px);
    }
    50% {
        opacity: 1;
        transform: scale(1.03);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Value increased - brief green flash */
.value-increased {
    animation: valueIncrease 0.5s ease;
}

@keyframes valueIncrease {
    0% {
        color: inherit;
    }
    30% {
        color: var(--profit);
    }
    100% {
        color: inherit;
    }
}

/* Value decreased - brief red flash */
.value-decreased {
    animation: valueDecrease 0.5s ease;
}

@keyframes valueDecrease {
    0% {
        color: inherit;
    }
    30% {
        color: var(--loss);
    }
    100% {
        color: inherit;
    }
}

/* Pulse animation for important updates */
.value-pulse {
    animation: valuePulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes valuePulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

/* Counter rollover animation (for digit-by-digit changes) */
.value-counter {
    display: inline-flex;
    overflow: hidden;
}

.value-counter .digit {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.value-counter .digit.changing {
    animation: digitRoll 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes digitRoll {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(-100%);
        opacity: 0;
    }
    51% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Stat value specific transitions */
.stat-value,
.quick-stat-value,
.kpi-value {
    transition: transform 0.2s ease, color 0.3s ease, opacity 0.2s ease;
}

/* Shimmer effect for loading values */
.value-loading {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: valueShimmer 1.5s ease-in-out infinite;
}

@keyframes valueShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

:root.light .value-loading {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.04) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
}

/* Theme toggle button icon transitions - matching refresh button speed (0.8s) */
.btn-icon svg {
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

.btn-icon:hover svg:not(.hidden) {
    transform: rotate(20deg);
}

.btn-icon:active svg:not(.hidden) {
    transform: scale(0.9) rotate(0deg);
}

/* Smooth transitions for theme-dependent elements */
.nav,
.nav-container,
.filters-bar,
.chart-panel,
.kpi-card,
.calendar-panel,
.agenda-panel,
.open-positions-panel,
.table-container,
.trades-table th,
.trades-table td,
.login-box,
.agenda-item,
.instance-card,
.stat-card,
.glass-card,
.trades-stat-card,
.ticket-card,
.page-header-card,
.settings-instance-card {
    transition: background-color 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Custom scrollbar styling - sleek and minimal */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-panel-dark);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-sm);
    border: 2px solid var(--bg-panel-dark);
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

::-webkit-scrollbar-thumb:active {
    background: var(--text-sub);
}

/* Thin scrollbar variant for panels and modals */
.thin-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.thin-scrollbar::-webkit-scrollbar-thumb {
    border-width: 1px;
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) var(--bg-panel-dark);
}

/* Light mode scrollbar */
:root.light ::-webkit-scrollbar-track {
    background: var(--bg-main);
}

:root.light ::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-color: var(--bg-main);
}

:root.light ::-webkit-scrollbar-thumb:hover {
    background: var(--border);
}

:root.light ::-webkit-scrollbar-thumb:active {
    background: var(--text-dim);
}

:root.light * {
    scrollbar-color: var(--border-subtle) var(--bg-main);
}

/* ============================================================================
   DEPRECATED: Login Page Styles
   These styles are no longer used. Login page now uses auth.css.
   Kept temporarily for reference — safe to remove in a future cleanup.
   ============================================================================ */

/* Login page body */
body.login-page {
    /* Only hide horizontal overflow, allow vertical scroll on mobile if content overflows */
    overflow-x: hidden;
    overflow-y: auto;
    /* Ensure body takes full height but can scroll */
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
}

/* Blurred dashboard backdrop */
.login-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-main);
    z-index: 0;
    overflow: hidden;
    animation: backdropFadeIn 1s ease-out;
}

@keyframes backdropFadeIn {
    from { opacity: 0; transform: scale(1.1); }
    to { opacity: 1; transform: scale(1); }
}

.backdrop-blur {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: blur(4px);
    opacity: 0.6;
    transform: scale(1.02);
}

.backdrop-nav {
    height: 60px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    padding: 0 24px;
}

.backdrop-nav::before {
    content: 'PA';
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--orange), var(--amber, #f7931e));
    border-radius: var(--radius-lg);
    font-weight: 700;
    font-size: 14px;
    color: white;
    margin-right: 12px;
}

.backdrop-nav::after {
    content: 'Project Amber';
    font-weight: 600;
    font-size: 16px;
    color: var(--text-main);
}

.backdrop-content {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.backdrop-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.backdrop-card {
    height: 120px;
    background: var(--bg-panel);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    position: relative;
    overflow: hidden;
    padding: 16px;
}

/* Loading bar at top of backdrop cards */
.backdrop-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent);
    animation: backdropLoadingBar 2s ease-in-out infinite;
}

@keyframes backdropLoadingBar {
    0%, 100% { transform: scaleX(0.3); opacity: 0.5; }
    50% { transform: scaleX(1); opacity: 1; }
}

.backdrop-card:nth-child(1)::before { animation-delay: 0s; }
.backdrop-card:nth-child(2)::before { animation-delay: 0.2s; background: var(--accent); }
.backdrop-card:nth-child(3)::before { animation-delay: 0.4s; background: var(--accent); }
.backdrop-card:nth-child(4)::before { animation-delay: 0.6s; background: var(--loss); }

/* Fake KPI content */
.backdrop-card::after {
    content: '';
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    height: 24px;
    background: linear-gradient(90deg,
        var(--bg-tertiary) 0%,
        var(--bg-tertiary) 30%,
        transparent 30%);
    border-radius: var(--radius-sm);
}

/* Fake label and value placeholders */
.backdrop-card .fake-label,
.backdrop-card .fake-value {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.backdrop-card .fake-label {
    width: 60%;
    height: 12px;
    margin-bottom: 8px;
}

.backdrop-card .fake-value {
    width: 80%;
    height: 28px;
}

.backdrop-chart {
    height: 300px;
    background: var(--bg-panel);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    padding: 20px;
}

/* Loading bar for chart */
.backdrop-chart::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--accent);
    animation: backdropLoadingBar 2.5s ease-in-out infinite;
    animation-delay: 0.3s;
}

/* Fake equity curve */
.backdrop-chart::after {
    content: '';
    position: absolute;
    bottom: 60px;
    left: 40px;
    right: 40px;
    height: 120px;
    background:
        linear-gradient(to top, rgba(52, 199, 89, 0.15), transparent),
        linear-gradient(to right,
            transparent 0%,
            transparent 10%,
            rgba(52, 199, 89, 0.3) 10%,
            rgba(52, 199, 89, 0.4) 25%,
            rgba(52, 199, 89, 0.3) 40%,
            rgba(52, 199, 89, 0.5) 60%,
            rgba(52, 199, 89, 0.4) 75%,
            rgba(52, 199, 89, 0.6) 90%,
            rgba(52, 199, 89, 0.5) 100%
        );
    border-radius: var(--radius-sm);
    mask-image: linear-gradient(to bottom, transparent, black 20%, black);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 20%, black);
}

.backdrop-instances {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.backdrop-instance {
    height: 160px;
    background: var(--bg-panel);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    position: relative;
    overflow: hidden;
    padding: 16px;
}

/* Loading bars for instances */
.backdrop-instance::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--profit);
    animation: backdropLoadingBar 2s ease-in-out infinite;
}

.backdrop-instance:nth-child(1)::before { animation-delay: 0.1s; }
.backdrop-instance:nth-child(2)::before { animation-delay: 0.3s; }
.backdrop-instance:nth-child(3)::before { animation-delay: 0.5s; }

/* Fake instance content */
.backdrop-instance::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    height: 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

/* Responsive backdrop */
@media (max-width: 900px) {
    .backdrop-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .backdrop-instances {
        grid-template-columns: repeat(2, 1fr);
    }
    .backdrop-instance:nth-child(3) {
        display: none;
    }
}

@media (max-width: 480px) {
    .backdrop-kpi-grid {
        grid-template-columns: 1fr;
    }
    .backdrop-card:nth-child(3),
    .backdrop-card:nth-child(4) {
        display: none;
    }
    .backdrop-instances {
        grid-template-columns: 1fr;
    }
    .backdrop-instance:nth-child(2) {
        display: none;
    }
}

/* ============================================================================
   Realistic Dashboard Backdrop Styles
   These styles apply to actual dashboard elements shown in the login backdrop
   ============================================================================ */

/* Backdrop-specific nav container */
.backdrop-nav-container {
    position: relative;
    z-index: 1;
}

.backdrop-nav-bar {
    pointer-events: none;
    height: 56px;
}

/* Backdrop filters bar */
.backdrop-filters {
    pointer-events: none;
    opacity: 0.9;
}

.backdrop-filters .filter-group select {
    pointer-events: none;
}

/* Backdrop main content */
.backdrop-main {
    pointer-events: none;
    padding-top: 20px;
}

/* Backdrop KPI grid with stagger animation */
.backdrop-kpi-grid .kpi-card {
    animation: backdropCardFloat 4s ease-in-out infinite;
    pointer-events: none;
}

.backdrop-kpi-grid .kpi-card:nth-child(1) { animation-delay: 0s; }
.backdrop-kpi-grid .kpi-card:nth-child(2) { animation-delay: 0.5s; }
.backdrop-kpi-grid .kpi-card:nth-child(3) { animation-delay: 1s; }
.backdrop-kpi-grid .kpi-card:nth-child(4) { animation-delay: 1.5s; }

@keyframes backdropCardFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Backdrop sparklines - animated pseudo-data */
.backdrop-sparkline {
    position: relative;
    overflow: hidden;
}

.backdrop-sparkline::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: sparklineShimmer 3s ease-in-out infinite;
}

@keyframes sparklineShimmer {
    0% { left: -100%; }
    100% { left: 200%; }
}

.backdrop-sparkline-profit {
    background: linear-gradient(90deg, transparent, var(--profit-bg));
}

.backdrop-sparkline-winrate {
    background: linear-gradient(90deg, transparent, var(--accent-bg));
}

.backdrop-sparkline-trades {
    background: linear-gradient(90deg, transparent, var(--accent-bg));
}

.backdrop-sparkline-dd {
    background: linear-gradient(90deg, transparent, var(--loss-bg));
}

/* Backdrop chart panel */
.backdrop-chart-panel {
    pointer-events: none;
    position: relative;
}

.backdrop-equity-chart {
    position: relative;
}

.backdrop-equity-svg {
    width: 100%;
    height: 100%;
    min-height: 200px;
}

/* Backdrop instances grid */
.backdrop-instances-grid {
    pointer-events: none;
}

.backdrop-instance-card {
    animation: backdropCardFloat 4s ease-in-out infinite;
}

.backdrop-instance-card:nth-child(1) { animation-delay: 0.2s; }
.backdrop-instance-card:nth-child(2) { animation-delay: 0.6s; }
.backdrop-instance-card:nth-child(3) { animation-delay: 1s; }

/* Backdrop mini charts */
.backdrop-mini-chart {
    height: 40px;
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.backdrop-mini-chart::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(52, 199, 89, 0.2) 20%,
        rgba(52, 199, 89, 0.3) 40%,
        rgba(52, 199, 89, 0.2) 60%,
        rgba(52, 199, 89, 0.4) 80%,
        rgba(52, 199, 89, 0.3) 100%
    );
    mask-image: linear-gradient(to top, black, transparent);
    -webkit-mask-image: linear-gradient(to top, black, transparent);
}

.backdrop-mini-profit::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(52, 199, 89, 0.2) 20%,
        rgba(52, 199, 89, 0.3) 40%,
        rgba(52, 199, 89, 0.2) 60%,
        rgba(52, 199, 89, 0.4) 80%,
        rgba(52, 199, 89, 0.3) 100%
    );
}

.backdrop-mini-loss::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 69, 58, 0.2) 20%,
        rgba(255, 69, 58, 0.3) 40%,
        rgba(255, 69, 58, 0.2) 60%,
        rgba(255, 69, 58, 0.15) 80%,
        rgba(255, 69, 58, 0.25) 100%
    );
}

/* Responsive backdrop elements */
@media (max-width: 900px) {
    .backdrop-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .backdrop-instances-grid .instance-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .backdrop-instances-grid .instance-card:nth-child(3) {
        display: none;
    }

    .backdrop-equity-svg {
        min-height: 150px;
    }
}

@media (max-width: 600px) {
    .backdrop-nav-bar .nav-links {
        display: none;
    }

    .backdrop-filters .status-indicators {
        display: none;
    }
}

@media (max-width: 480px) {
    .backdrop-kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .backdrop-kpi-grid .kpi-card:nth-child(3),
    .backdrop-kpi-grid .kpi-card:nth-child(4) {
        display: none;
    }

    .backdrop-instances-grid .instance-row {
        grid-template-columns: 1fr;
    }

    .backdrop-instances-grid .instance-card:nth-child(2),
    .backdrop-instances-grid .instance-card:nth-child(3) {
        display: none;
    }

    .backdrop-chart-panel {
        display: none;
    }

    .backdrop-main .section-title:nth-of-type(2),
    .backdrop-main .section-title:nth-of-type(3) {
        display: none;
    }
}

/* Login overlay */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 100;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
    animation: overlayFadeIn 0.6s ease-out;
    overflow: hidden;
}

/* Floating orbs effect (unified with landing page style) */
.floating-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

.floating-orb.orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(10, 132, 255, 0.35) 0%, transparent 70%);
    top: -200px;
    right: -100px;
    animation: floatOrb1 20s ease-in-out infinite;
}

.floating-orb.orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(191, 90, 242, 0.28) 0%, transparent 70%);
    bottom: 20%;
    left: -150px;
    animation: floatOrb2 20s ease-in-out infinite;
}

.floating-orb.orb-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(90, 200, 250, 0.22) 0%, transparent 70%);
    top: 50%;
    right: 10%;
    animation: floatOrb3 20s ease-in-out infinite;
}

@keyframes floatOrb1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.35;
    }
    25% {
        transform: translate(80px, 40px) scale(1.15);
        opacity: 0.5;
    }
    50% {
        transform: translate(30px, 80px) scale(0.95);
        opacity: 0.4;
    }
    75% {
        transform: translate(-40px, 30px) scale(1.1);
        opacity: 0.45;
    }
}

@keyframes floatOrb2 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translate(-60px, -50px) scale(1.1);
        opacity: 0.45;
    }
    50% {
        transform: translate(-20px, -80px) scale(0.9);
        opacity: 0.35;
    }
    75% {
        transform: translate(50px, -40px) scale(1.05);
        opacity: 0.4;
    }
}

@keyframes floatOrb3 {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.25;
    }
    33% {
        transform: translate(-30%, -70%) scale(1.2);
        opacity: 0.4;
    }
    66% {
        transform: translate(-70%, -30%) scale(0.85);
        opacity: 0.3;
    }
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Light mode adjustments for floating orbs */
:root.light .floating-orb {
    filter: blur(80px);
    opacity: 0.45;
}

:root.light .floating-orb.orb-1 {
    background: rgba(10, 132, 255, 0.7);
}

:root.light .floating-orb.orb-2 {
    background: rgba(191, 90, 242, 0.65);
}

:root.light .floating-orb.orb-3 {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.6), rgba(191, 90, 242, 0.6));
}

/* Legacy support */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    background: linear-gradient(135deg, var(--bg-main) 0%, var(--bg-panel-dark) 100%);
}

.login-box {
    border-radius: var(--radius-xl);
    padding: 48px 40px;
    width: 100%;
    max-width: 440px;
    text-align: center;
    /* Massive dramatic glow - layered for visibility */
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.55),
        0 12px 35px rgba(0, 0, 0, 0.35),
        0 0 120px rgba(10, 132, 255, 0.35),
        0 0 300px rgba(10, 132, 255, 0.20),
        0 0 600px rgba(10, 132, 255, 0.12);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    animation: loginBoxEnter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    /* Animated gradient border */
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* Animated gradient border effect */
.login-box::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--radius-xl) + 2px);
    background: linear-gradient(135deg, var(--accent), var(--purple), var(--accent));
    background-size: 300% 300%;
    animation: borderGlow 6s ease-in-out infinite;
    z-index: -1;
    opacity: 0.6;
}

/* Inner background overlay */
.login-box::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    background: rgba(44, 44, 46, 0.98);
    z-index: -1;
}

:root.light .login-box::after {
    background: rgba(255, 255, 255, 0.98);
}

@keyframes borderGlow {
    0%, 100% {
        background-position: 0% 50%;
        opacity: 0.5;
    }
    50% {
        background-position: 100% 50%;
        opacity: 0.8;
    }
}

:root.light .login-box {
    background: rgba(255, 255, 255, 0.95);
}

@keyframes loginBoxEnter {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.login-hint {
    margin-top: 24px;
    color: var(--text-dim);
    font-size: 13px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    transition: border-color var(--transition), background var(--transition);
}

:root.light .login-hint {
    background: rgba(0, 0, 0, 0.02);
}

.login-hint:hover {
    border-color: var(--border);
    background: rgba(255, 255, 255, 0.05);
}

:root.light .login-hint:hover {
    background: rgba(0, 0, 0, 0.04);
}

.back-to-website {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--text-dim);
    font-size: 13px;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: var(--radius);
    transition: color var(--transition), background var(--transition);
}

.back-to-website:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}

:root.light .back-to-website:hover {
    background: rgba(0, 0, 0, 0.04);
}

.back-to-website svg {
    opacity: 0.7;
    transition: transform var(--transition), opacity var(--transition);
}

.back-to-website:hover svg {
    opacity: 1;
    transform: translateX(-3px);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    color: white;
    box-shadow: 0 8px 32px rgba(10, 132, 255, 0.25), 0 4px 16px rgba(191, 90, 242, 0.15);
    animation: logoFloat 3s ease-in-out infinite;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.login-logo:hover {
    transform: scale(1.1) rotate(3deg) translateY(-2px);
    box-shadow: 0 12px 40px rgba(10, 132, 255, 0.4), 0 6px 20px rgba(191, 90, 242, 0.25);
    animation: none;
}

.login-logo:hover::before {
    opacity: 1;
    transform: scale(1.08);
    animation: loginGlowPulse 1s ease-in-out infinite;
}

@keyframes loginGlowPulse {
    0%, 100% { opacity: 0.8; transform: scale(1.05); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Subtle glow ring around logo */
.login-logo::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.3), rgba(191, 90, 242, 0.3));
    z-index: -1;
    animation: logoGlow 3s ease-in-out infinite alternate;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes logoGlow {
    0% {
        opacity: 0.5;
        transform: scale(1);
    }
    100% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.login-box h1 {
    margin-bottom: 8px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.5px;
    cursor: default;
    /* Default: animated gradient text */
    background: linear-gradient(90deg, var(--accent), var(--purple), var(--accent));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShiftSlow 4s ease-in-out infinite;
}

/* Enhanced faster animation on hover */
.login-box h1:hover {
    animation: gradientShiftFast 1s ease infinite;
    filter: brightness(1.1);
}

.login-box .subtitle {
    color: var(--text-sub);
    margin-bottom: 32px;
    font-size: 15px;
    animation: fadeSlideUp 0.5s ease 0.2s both;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Staggered entrance animations for form elements */
.login-form .input-group:nth-child(1) {
    animation: fadeSlideUp 0.5s ease 0.3s both;
}

.login-form .input-group:nth-child(2) {
    animation: fadeSlideUp 0.5s ease 0.4s both;
}

.login-form button[type="submit"] {
    animation: fadeSlideUp 0.5s ease 0.5s both;
}

.login-hint {
    animation: fadeSlideUp 0.5s ease 0.6s both;
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.input-group {
    position: relative;
}

.input-group label {
    display: block;
    text-align: left;
    color: var(--text-sub);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    transition: color var(--transition), transform var(--transition);
}

.input-group:focus-within label {
    color: var(--accent);
    transform: translateX(2px);
}

.input-group .input-icon {
    position: absolute;
    left: 14px;
    bottom: 15px;
    color: var(--text-dim);
    pointer-events: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.input-group input:focus ~ .input-icon,
.input-group:focus-within .input-icon {
    color: var(--accent);
    transform: scale(1.1);
}

.login-box input[type="text"],
.login-box input[type="password"] {
    width: 100%;
    padding: 14px 16px 14px 44px;
    font-size: 16px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-main);
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-box input:hover:not(:focus) {
    border-color: var(--border);
    background: var(--bg-panel);
}

.login-box input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow:
        0 0 0 3px var(--accent-bg),
        0 4px 16px rgba(10, 132, 255, 0.25),
        0 0 40px rgba(10, 132, 255, 0.1);
    transform: translateY(-2px);
    background: var(--bg-panel);
}

.login-box input::placeholder {
    color: var(--text-dim);
    transition: opacity 0.2s ease;
}

.login-box input:focus::placeholder {
    opacity: 0.5;
}

.login-box button[type="submit"] {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--accent), var(--purple), var(--accent));
    background-size: 200% 200%;
    color: white;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 8px;
    position: relative;
    overflow: hidden;
    animation: buttonGradient 4s ease-in-out infinite;
    box-shadow: 0 4px 15px rgba(10, 132, 255, 0.3);
}

@keyframes buttonGradient {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.login-box button[type="submit"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.login-box button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(10, 132, 255, 0.4);
}

.login-box button[type="submit"]:hover::before {
    left: 100%;
}

.login-box button[type="submit"]:active {
    transform: translateY(0) scale(0.98);
}

.login-box button[type="submit"]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.login-box button[type="submit"]:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* Password toggle button */
.password-toggle {
    position: absolute;
    right: 8px;
    bottom: 8px;
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text-dim);
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    /* Ensure good tap target on mobile */
    min-width: 36px;
    min-height: 36px;
}

.password-toggle:hover {
    color: var(--text-sub);
    background: var(--bg-panel);
}

.password-toggle:focus {
    outline: none;
    color: var(--accent);
    background: var(--accent-bg);
}

.password-toggle:active {
    transform: scale(0.92);
}

/* Loading spinner animation */
.spinner-icon {
    animation: spin 0.8s linear infinite;
}

/* @keyframes spin - defined at ~line 1093 */

.btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-text, .btn-loading {
    transition: opacity 0.2s ease;
}

.login-error {
    color: var(--loss);
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--loss-bg);
    border: 1px solid rgba(255, 69, 58, 0.3);
    border-radius: var(--radius);
    font-size: 14px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: errorShake 0.4s ease-in-out;
}

.login-error::before {
    content: '';
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FF453A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
    background-size: contain;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

/* Forgot password link */
.forgot-password-link {
    text-align: right;
    margin: 8px 0 16px 0;
}

.forgot-password-link a {
    color: var(--accent);
    font-size: 13px;
    text-decoration: none;
    opacity: 0.8;
    transition: opacity var(--transition);
}

.forgot-password-link a:hover {
    opacity: 1;
}

/* Login actions section */
.login-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.login-actions .register-btn {
    flex: 1;
    text-align: center;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--profit) 0%, var(--accent) 100%);
    border-radius: var(--radius);
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: transform var(--transition), box-shadow var(--transition);
}

.login-actions .register-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px var(--profit-bg);
}

/* Back to website link */
.back-to-website {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    color: var(--text-dim);
    font-size: 14px;
    text-decoration: none;
    transition: color var(--transition);
}

.back-to-website:hover {
    color: var(--accent);
}

/* Login help section */
.login-help-section {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
    text-align: center;
}

.login-help-section span {
    font-size: 12px;
    color: var(--text-muted);
}

.login-help-section a {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-sub);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity var(--transition);
}

.login-help-section a:hover {
    opacity: 1;
}

/* ============================================================================
   Navigation
   ============================================================================ */
.nav-container {
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Solid opaque background — no backdrop-filter to avoid per-frame reblur on scroll */
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-subtle);
    /* iPhone notch safe area */
    padding-top: env(safe-area-inset-top, 0);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Add subtle shadow when scrolled */
.nav-container.scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border-bottom-color: transparent;
}

:root.light .nav-container.scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    /* Fixed width to keep nav-links centered regardless of nav-actions width */
    /* Must be wide enough for logo + title + account number */
    flex: 0 0 280px;
    min-width: 280px;
}

.nav-brand:hover .nav-logo {
    transform: scale(1.1) rotate(3deg);
    box-shadow: 0 6px 24px rgba(10, 132, 255, 0.45), 0 0 0 2px rgba(191, 90, 242, 0.2);
    animation: logoPulse 0.6s ease;
}

@keyframes logoPulse {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.15) rotate(-4deg); }
    100% { transform: scale(1.1) rotate(3deg); }
}

.nav-logo {
    width: 34px;
    height: 34px;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: white;
    box-shadow: 0 2px 8px rgba(10, 132, 255, 0.25);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    flex-shrink: 0;
    position: relative;
}

/* Gradient glow ring on hover */
.nav-logo::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.4), rgba(191, 90, 242, 0.4));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: scale(0.9);
}

.nav-brand:hover .nav-logo::after {
    opacity: 1;
    transform: scale(1);
    animation: glowPulse 1.5s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.nav-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.3px;
    white-space: nowrap;
    /* Default: animated gradient text */
    background: linear-gradient(90deg, var(--accent), var(--purple), var(--accent));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShiftSlow 4s ease-in-out infinite;
    position: relative;
}

/* Subtle slow animation for default state */
@keyframes gradientShiftSlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Enhanced faster animation on hover */
.nav-brand:hover .nav-title {
    animation: gradientShiftFast 1s ease infinite;
    filter: brightness(1.1);
}

@keyframes gradientShiftFast {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Account indicator in nav */
.nav-account {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sub);
    background: var(--bg-panel-dark);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    margin-left: 6px;
    font-family: var(--font-mono);
    letter-spacing: 0.4px;
    border: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.nav-links {
    display: flex;
    gap: 2px;
    overflow: hidden;
}

.nav-link {
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-sub);
    text-decoration: none;
    transition: color 0.15s ease;
    position: relative;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}


/* Icon in nav link */
.nav-link svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.nav-link:hover svg {
    opacity: 1;
}

.nav-link::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.nav-link:hover::after {
    opacity: 0.4;
}

.nav-link.active::after {
    opacity: 1;
}

.nav-link:hover {
    color: var(--text-main);
}


.nav-link:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
}

.nav-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.nav-link.active {
    color: var(--accent);
    font-weight: 600;
}

.nav-link.active svg {
    opacity: 1;
}

/* Nav link with notification badge */
.nav-link .nav-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    color: white;
    background: var(--loss);
    border-radius: var(--radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: navBadgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

:root.light .nav-link.active {
    color: var(--accent);
}

/* Logout link in nav - hidden on desktop (shown in nav-actions) */
.nav-link-logout {
    display: none;
}

/* Desktop logout button - with accent border */
/* Uses .nav-actions parent for specificity over .nav-link base styles */
.nav-actions .nav-logout-desktop {
    display: inline-flex;
    border: 1px solid var(--loss);
    color: var(--loss);
    background: transparent;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.nav-actions .nav-logout-desktop:hover {
    background: var(--loss);
    color: white;
    border-color: var(--loss);
}

.nav-actions .nav-logout-desktop:active {
    transform: scale(0.95);
    background: var(--loss);
    color: white;
}

.nav-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    /* Fixed width to match nav-brand, keeps nav-links perfectly centered */
    flex: 0 0 280px;
    min-width: 280px;
}

/* Better icon button styling */
.nav-actions .btn-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    background: var(--bg-panel-dark);
    color: var(--text-sub);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

/* Touch devices need larger tap targets */
@media (hover: none) and (pointer: coarse) {
    .nav-actions .btn-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }
}

.nav-actions .btn-icon:hover {
    background: var(--bg-panel);
    color: var(--text-main);
    border-color: var(--border);
}

.nav-actions .btn-icon:active {
    transform: scale(0.95);
}

.nav-actions .btn-ghost {
    font-size: 13px;
    padding: 8px 14px;
    border-radius: var(--radius);
}

/* ============================================================================
   Notification Bell & Dropdown
   ============================================================================ */
.notification-bell-container {
    position: relative;
}

.notification-bell {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: white;
    background: var(--loss);
    border-radius: var(--radius);
    pointer-events: none;
}

/* Utility: CSP-safe hidden class (inline style="display:none" unreliable with nonce-matched CSS) */
.u-hidden {
    display: none !important;
}

.notification-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-height: 400px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 1000;
    animation: notificationSlideIn 0.2s ease;
}

@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.notification-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.notification-mark-all {
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-sub);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.notification-mark-all:hover {
    background: var(--bg-elevated);
    color: var(--profit);
}

.notification-list {
    max-height: 340px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.notification-list::-webkit-scrollbar {
    width: 5px;
}

.notification-list::-webkit-scrollbar-track {
    background: transparent;
}

.notification-list::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.notification-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

.notification-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background 0.15s ease;
}

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

.notification-item:hover {
    background: var(--bg-elevated);
}

.notification-item.unread {
    background: rgba(10, 132, 255, 0.08);
}

.notification-item.unread:hover {
    background: rgba(10, 132, 255, 0.12);
}

.notification-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    font-size: 16px;
}

.notification-icon.info { background: var(--accent-bg); color: var(--accent); }
.notification-icon.success { background: var(--profit-bg); color: var(--profit); }
.notification-icon.warning { background: var(--orange-bg); color: var(--orange); }
.notification-icon.error { background: var(--loss-bg); color: var(--loss); }
.notification-icon.trade { background: var(--purple-bg); color: var(--purple); }
.notification-icon.subscription { background: var(--teal-bg); color: var(--teal); }

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-content-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-content-message {
    font-size: 12px;
    color: var(--text-sub);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-time {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
}

.notification-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--text-sub);
    font-size: 13px;
}

.notification-dismiss {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.notification-item:hover .notification-dismiss {
    opacity: 1;
}

.notification-dismiss:hover {
    background: var(--loss-bg);
    color: var(--loss);
}

/* Touch devices: always show dismiss button since there's no hover */
@media (hover: none) and (pointer: coarse) {
    .notification-dismiss {
        opacity: 0.6;
    }
}

/* Mobile notification dropdown */
@media (max-width: 540px) {
    .notification-dropdown {
        position: fixed;
        top: 60px;
        left: 8px;
        right: 8px;
        width: auto;
        max-height: calc(100vh - 120px);
        max-height: calc(100dvh - 120px); /* Dynamic viewport for mobile */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================================
   Buttons - Refined with micro-interactions
   ============================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), box-shadow var(--transition), transform var(--transition-fast);
    background: var(--bg-panel);
    color: var(--text-main);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

:root.light .btn::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.03) 0%, transparent 100%);
}

.btn:hover {
    background: var(--bg-selected);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn:hover::after {
    opacity: 1;
}

.btn:active {
    transform: translateY(0) scale(0.97);
    transition: transform 0.05s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}

/* Ripple effect for buttons */
.btn.ripple::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    opacity: 0;
}

:root.light .btn.ripple::before {
    background: rgba(0, 0, 0, 0.12);
}

.btn.ripple.rippling::before {
    animation: btnRipple 0.5s ease-out;
}

@keyframes btnRipple {
    0% {
        width: 0;
        height: 0;
        opacity: 0.5;
    }
    100% {
        width: 250%;
        height: 250%;
        opacity: 0;
    }
}

.btn-sm {
    padding: 8px 14px;
    font-size: 12px;
    min-height: 36px;
}

.btn-xs {
    padding: 4px 10px;
    font-size: 11px;
    min-height: 28px;
    border-radius: var(--radius-sm);
}

.btn-icon {
    padding: 10px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    position: relative;
}

/* Touch-friendly sizing for mobile devices */
@media (hover: none) and (pointer: coarse) {
    /* Base button 44px minimum touch target */
    .btn {
        min-height: 44px;
    }

    .btn-sm {
        padding: 10px 16px;
        min-height: 44px;
    }

    .btn-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    /* Notification mark-all button */
    .notification-mark-all {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    /* Filter toggle button */
    .filter-toggle-btn {
        min-height: 44px;
    }

    /* Checkbox/radio parent containers */
    .custom-checkbox,
    .custom-radio {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Toggle switch parent container */
    .toggle-switch {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

}

.btn-icon svg {
    transition: transform var(--transition);
}

.btn-icon:hover {
    transform: translateY(-2px);
    background: var(--bg-panel-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.btn-icon:hover svg {
    transform: scale(1.1);
}

.btn-icon:active {
    transform: translateY(0) scale(0.92);
    box-shadow: none;
}

.btn-icon:active svg {
    transform: scale(0.9);
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    box-shadow: 0 2px 8px rgba(10, 132, 255, 0.2);
}

.btn-primary svg {
    transition: transform var(--transition);
}

.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 6px 20px rgba(10, 132, 255, 0.35), 0 2px 8px rgba(10, 132, 255, 0.2);
    transform: translateY(-2px);
}

.btn-primary:active {
    background: var(--accent);
    box-shadow: 0 1px 4px rgba(10, 132, 255, 0.2) inset, 0 0 0 2px rgba(10, 132, 255, 0.1);
}

.btn-primary:active svg {
    transform: scale(0.9);
}

/* Success button variant */
.btn-success {
    background: var(--profit);
    border-color: var(--profit);
    color: white;
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.2);
}

.btn-success:hover {
    background: var(--profit-hover);
    border-color: var(--profit-hover);
    box-shadow: 0 6px 20px var(--profit-bg), 0 2px 8px var(--profit-bg);
    transform: translateY(-2px);
}

.btn-success:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 1px 4px rgba(52, 199, 89, 0.2) inset;
}

/* Danger button variant */
.btn-danger {
    background: var(--loss);
    border-color: var(--loss);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 69, 58, 0.2);
}

.btn-danger:hover {
    background: var(--loss-hover);
    border-color: var(--loss-hover);
    box-shadow: 0 6px 20px var(--loss-bg), 0 2px 8px var(--loss-bg);
    transform: translateY(-2px);
}

.btn-danger:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 1px 4px rgba(255, 69, 58, 0.2) inset;
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
}

.btn-ghost:hover {
    background: var(--bg-panel);
    transform: translateY(-2px);
}

.btn-ghost:active {
    transform: translateY(0) scale(0.97);
    background: var(--bg-panel-dark);
}

.btn-ghost::after {
    display: none;
}

.btn-secondary {
    background: var(--bg-tertiary);
    border-color: var(--border);
    color: var(--text-sub);
}

.btn-secondary:hover {
    background: var(--bg-selected);
    border-color: var(--border);
    color: var(--text-main);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.btn-secondary:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 15px;
}

/* ============================================================================
   Cards - Generic card styling
   ============================================================================ */
.card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition), transform 0.15s ease;
}

.card:hover {
    box-shadow: var(--glass-shadow-hover);
}

.card-interactive {
    cursor: pointer;
}

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

.card-interactive:active {
    transform: translateY(0) scale(0.99);
}

.card-content {
    padding: 24px;
}

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

.card-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.card-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-main);
}

/* ============================================================================
   Status Bar (unified bar below nav with quick stats + collapsible filters)
   ============================================================================ */
.filters-bar {
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-subtle);
    padding: 0;
    position: relative;
    z-index: 91;
}

/* Status bar main row - always visible */
.status-bar-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px;
    max-width: 1600px;
    margin: 0 auto;
}

/* Status bar page title (for pages without filters) */
.status-bar-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
}

.status-bar-title svg {
    width: 16px;
    height: 16px;
    color: var(--text-sub);
    flex-shrink: 0;
}

/* Spacer to push items to the right */
.status-bar-spacer {
    flex: 1;
    min-width: 0;
}

/* Filter toggle button */
.filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-sub);
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.filter-toggle-btn:hover {
    color: var(--text-main);
    border-color: var(--border);
    background: var(--bg-panel-dark);
}

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

.filter-toggle-btn.active:hover {
    background: rgba(10, 132, 255, 0.25);
    border-color: var(--accent-hover);
}

.filter-toggle-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.filter-toggle-btn.active svg {
    transform: rotate(180deg);
}

/* Active filter count badge */
.filter-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    background: var(--accent);
    color: white;
    border-radius: var(--radius-lg);
    min-width: 18px;
    text-align: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.filter-badge.visible {
    opacity: 1;
    transform: scale(1);
}

/* Done button - hidden on desktop, shown on mobile */
.filter-done-btn {
    display: none;
}

/* Filter backdrop overlay - mobile only */
.filter-backdrop {
    display: none;
}

/* Collapsible filters panel */
.filters-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.15s ease;
    opacity: 0;
    border-top: 1px solid transparent;
    contain: layout style;
}

.filters-panel.expanded {
    max-height: 300px;
    overflow: visible;
    opacity: 1;
    padding: 12px 24px 16px;
    border-top-color: var(--border-subtle);
}

.filters-inner {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1600px;
    margin: 0 auto;
}

/* Stagger animation for filter groups when panel expands */
.filters-panel.expanded .filter-group {
    animation: filterGroupIn 0.3s ease-out backwards;
}

.filters-panel.expanded .filter-group:nth-child(1) { animation-delay: 0.05s; }
.filters-panel.expanded .filter-group:nth-child(2) { animation-delay: 0.08s; }
.filters-panel.expanded .filter-group:nth-child(3) { animation-delay: 0.11s; }
.filters-panel.expanded .filter-group:nth-child(4) { animation-delay: 0.14s; }
.filters-panel.expanded .filter-group:nth-child(5) { animation-delay: 0.17s; }
.filters-panel.expanded .filter-group:nth-child(6) { animation-delay: 0.20s; }
.filters-panel.expanded .filter-group:nth-child(7) { animation-delay: 0.23s; }

@keyframes filterGroupIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Quick date filter presets */
.filter-presets {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
}

.filter-presets-label {
    font-size: 11px;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

.filter-presets .btn {
    opacity: 0.8;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.filter-presets .btn:hover {
    opacity: 1;
    background: var(--accent-bg);
    color: var(--accent);
}

.filter-presets .btn.active {
    background: var(--accent);
    color: white;
    opacity: 1;
}

/* Filters active indicator */
.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--accent);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: var(--radius);
    opacity: 0;
    transform: scale(0.8);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.filter-badge.active {
    opacity: 1;
    transform: scale(1);
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label {
    color: var(--text-sub);
    font-size: 13px;
    font-weight: 500;
}

.filter-group select {
    padding: 8px 32px 8px 12px;
    font-size: 14px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-main);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23989899' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), box-shadow var(--transition), transform var(--transition-fast);
}

.filter-group select:hover {
    border-color: var(--border);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg), 0 4px 12px rgba(10, 132, 255, 0.2);
}

/* Visual feedback when filter has a value selected (not default) */
.filter-group select.has-value {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.filter-group select.has-value:hover {
    border-color: var(--accent-hover);
}

/* Improved select dropdown arrow visibility */
.filter-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23B9B9BE' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
}

/* Date Range Filter */
.filter-group.date-range {
    gap: 8px;
}

.filter-group.date-range input[type="date"] {
    padding: 10px 12px;
    font-size: 13px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-main);
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), box-shadow var(--transition), transform var(--transition-fast);
    font-family: inherit;
    min-width: 140px;
    min-height: 40px;
}

.filter-group.date-range input[type="date"]:hover {
    border-color: var(--border);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-group.date-range input[type="date"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg), 0 4px 12px rgba(10, 132, 255, 0.2);
    transform: translateY(-1px);
}

/* Visual feedback when date has a value */
.filter-group.date-range input[type="date"]:not(:placeholder-shown),
.filter-group.date-range input[type="date"].has-value {
    border-color: var(--accent);
    background: var(--accent-bg);
}

/* Style the date picker icon in webkit browsers */
.filter-group.date-range input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.6);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition);
}

.filter-group.date-range input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 1;
}

:root.light .filter-group.date-range input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
}

.date-separator {
    color: var(--text-dim);
    font-size: 16px;
    padding: 0 4px;
    font-weight: 300;
    user-select: none;
}

/* P/L Range Filter */
.filter-group.pnl-range {
    gap: 8px;
}

.filter-group.pnl-range input[type="number"] {
    padding: 10px 12px;
    font-size: 13px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-main);
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    font-family: inherit;
    width: 90px;
    min-height: 40px;
}

.filter-group.pnl-range input[type="number"]::placeholder {
    color: var(--text-dim);
}

.filter-group.pnl-range input[type="number"]:hover {
    border-color: var(--border);
}

.filter-group.pnl-range input[type="number"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

/* Hide spinner buttons on number inputs */
.filter-group.pnl-range input[type="number"]::-webkit-outer-spin-button,
.filter-group.pnl-range input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.filter-group.pnl-range input[type="number"] {
    -moz-appearance: textfield;
}

/* Duration Range Filter */
.filter-group.duration-range {
    gap: 8px;
}

.filter-group.duration-range select {
    padding: 10px 12px;
    font-size: 13px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-main);
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    min-width: 85px;
    min-height: 40px;
}

.filter-group.duration-range select:hover {
    border-color: var(--border);
}

.filter-group.duration-range select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

/* Search Filter */
.filter-group.search-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}

.filter-group.search-group input[type="text"] {
    padding: 10px 36px 10px 12px;
    font-size: 13px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-main);
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), box-shadow var(--transition), transform var(--transition);
    min-width: 140px;
    width: 160px;
    min-height: 40px;
}

.filter-group.search-group input[type="text"]::placeholder {
    color: var(--text-dim);
}

.filter-group.search-group input[type="text"]:hover {
    border-color: var(--border);
}

.filter-group.search-group input[type="text"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
    width: 200px;
}

.search-clear-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    opacity: 0.7;
}

.search-clear-btn:hover {
    opacity: 1;
    color: var(--text-main);
    background: var(--bg-panel);
}

.search-clear-btn.hidden {
    display: none;
}

/* Filter Actions (Clear All button) */
.filter-group.filter-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.filter-group.filter-actions .btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-sub);
    white-space: nowrap;
}

.filter-group.filter-actions .btn:hover {
    color: var(--accent-red, #ff3b30);
    background: rgba(255, 59, 48, 0.1);
}

.filter-group.filter-actions .btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Quick Date Select */
.filter-group.quick-date select {
    padding: 8px 12px;
    font-size: 13px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-sub);
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    min-width: 100px;
}

.filter-group.quick-date select:hover {
    border-color: var(--border);
    color: var(--text-main);
}

.filter-group.quick-date select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
    color: var(--text-main);
}

/* Quick Stats in Status Bar - compact inline style */
.quick-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 0;
    flex-shrink: 0;
}

.quick-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    cursor: default;
    position: relative;
    background: var(--bg-main);
    border-radius: var(--radius);
    border: 1px solid transparent;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.quick-stat:hover {
    border-color: var(--border-subtle);
    background: var(--bg-panel-dark);
}

.quick-stat-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-sub);
    white-space: nowrap;
}

.quick-stat-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    font-family: var(--font-mono);
    transition: color 0.2s ease, transform 0.15s ease;
}

.quick-stat:hover .quick-stat-value {
    transform: scale(1.02);
}

.quick-stat-value.profit {
    color: var(--profit);
    text-shadow: 0 0 10px rgba(52, 199, 89, 0.3);
}

.quick-stat-value.loss {
    color: var(--loss);
    text-shadow: 0 0 10px rgba(255, 69, 58, 0.3);
}

/* Subtle background tint for profit/loss quick stats */
.quick-stat:has(.quick-stat-value.profit) {
    background: linear-gradient(135deg, var(--bg-main), rgba(52, 199, 89, 0.05));
}

.quick-stat:has(.quick-stat-value.loss) {
    background: linear-gradient(135deg, var(--bg-main), rgba(255, 69, 58, 0.05));
}

/* Divider between quick stats - removed in favor of card style */
.quick-stat:not(:last-child)::after {
    display: none;
}

/* Combined Status Indicators - inline compact, pushed to right */
.status-indicators {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: none;
    flex-shrink: 0;
}

/* Action buttons container - separate box next to status indicators */
.status-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 6px 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
}

/* Refresh button inside status actions */
.status-refresh-btn {
    background: transparent;
    border: none;
    color: var(--accent);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}

.status-refresh-btn:hover {
    background: var(--accent-bg);
    transform: scale(1.1);
}

.status-refresh-btn:active {
    transform: scale(0.95);
}

.status-refresh-btn svg {
    width: 16px;
    height: 16px;
}

.status-refresh-btn.spinning svg {
    animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-sub);
}

.status-item .status-text {
    font-weight: 500;
    white-space: nowrap;
}

/* Timestamp indicator - more subtle styling */
.status-item-timestamp {
    opacity: 0.7;
    font-size: 11px;
}

.status-item-timestamp .status-text {
    font-weight: 400;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* Ring animation pseudo-element */
.status-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.status-dot.data,
.status-dot.online,
.status-dot.success {
    background: var(--profit);
    box-shadow: 0 0 8px rgba(52, 199, 89, 0.5);
    animation: statusPulse 2s ease-in-out infinite;
}

.status-dot.data::after,
.status-dot.online::after,
.status-dot.success::after {
    border-color: rgba(52, 199, 89, 0.3);
    animation: statusRing 2s ease-out infinite;
}

.status-dot.offline,
.status-dot.inactive {
    background: var(--text-dim);
    box-shadow: none;
    animation: none;
}

.status-dot.warning,
.status-dot.pending {
    background: var(--orange);
    box-shadow: 0 0 8px rgba(255, 159, 10, 0.5);
    animation: statusPulse 1.5s ease-in-out infinite;
}

.status-dot.warning::after,
.status-dot.pending::after {
    border-color: rgba(255, 159, 10, 0.3);
    animation: statusRing 1.5s ease-out infinite;
}

.status-dot.error,
.status-dot.danger {
    background: var(--loss);
    box-shadow: 0 0 8px rgba(255, 69, 58, 0.5);
    animation: errorPulse 0.5s ease-in-out 3;
}

.status-dot.error::after,
.status-dot.danger::after {
    border-color: rgba(255, 69, 58, 0.4);
    opacity: 1;
}

.status-dot.accent,
.status-dot.info {
    background: var(--accent);
    box-shadow: 0 0 8px rgba(10, 132, 255, 0.5);
    animation: statusPulse 2s ease-in-out infinite;
}

.status-dot.accent::after,
.status-dot.info::after {
    border-color: rgba(10, 132, 255, 0.3);
    animation: statusRing 2s ease-out infinite;
}

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

@keyframes statusRing {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.8); opacity: 0; }
}

@keyframes errorPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: 0.8; }
}

.status-dot.trades {
    background: var(--text-sub);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Active trades state */
.status-item.has-trades .status-dot.trades {
    background: var(--accent);
    box-shadow: 0 0 8px rgba(10, 132, 255, 0.5);
    animation: livePulse 1.5s infinite;
}

.status-item.has-trades .status-text {
    color: var(--text-main);
}

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

@keyframes livePulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(10, 132, 255, 0.7);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 0 4px rgba(10, 132, 255, 0);
    }
}

/* Status dot sizes */
.status-dot.sm {
    width: 6px;
    height: 6px;
}

.status-dot.lg {
    width: 10px;
    height: 10px;
}

/* Separator between status items */
.status-item + .status-item::before {
    content: '';
    width: 1px;
    height: 12px;
    background: var(--border-subtle);
    margin-right: 8px;
}

@media (max-width: 768px) {
    /* Quick stats on mobile - compact row */
    .quick-stats {
        margin-left: 0;
        flex: 1;
        padding: 4px 8px;
        gap: 0;
    }

    .quick-stat {
        flex: 1;
        padding: 4px 8px;
    }

    .quick-stat-label {
        font-size: 10px;
    }

    .quick-stat-value {
        font-size: 12px;
    }

    .status-indicators {
        margin-left: 0;
        flex: 1;
        justify-content: space-between;
        padding: 8px 12px;
    }

    .status-item .status-text {
        font-size: 11px;
    }

    /* Action buttons on mobile */
    .status-actions {
        margin-left: 8px;
        padding: 8px;
    }

    .status-refresh-btn {
        padding: 8px;
    }

    .status-refresh-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* Compact status indicators for MEDIUM screens only (769px - 1100px) */
/* Mobile (≤768px) and desktop (>1100px) keep default styles */
@media (min-width: 769px) and (max-width: 1100px) {
    .status-indicators {
        gap: 8px;
        padding: 6px 10px;
    }

    .status-item {
        gap: 5px;
    }

    .status-item .status-text {
        font-size: 11px;
    }

    /* Compact the live trades text */
    #live-trades .status-text {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Compact action buttons on medium screens */
    .status-actions {
        padding: 5px 6px;
    }

    .status-refresh-btn {
        padding: 5px;
    }

    .status-refresh-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* ============================================================================
   Main Content
   ============================================================================ */
.main-content {
    position: relative;
    z-index: 2;
    padding: 32px;
    max-width: 1600px;
    margin: 0 auto;
    animation: contentSlideIn 0.4s ease;
}

@keyframes contentSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.section-title::before {
    content: '';
    width: 3px;
    height: 16px;
    background: linear-gradient(180deg, var(--accent) 0%, var(--purple) 100%);
    border-radius: 2px;
    flex-shrink: 0;
    opacity: 0.5;
}

/* Section title with count badge */
.section-title .count {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    margin-left: auto;
    letter-spacing: 0;
    text-transform: none;
}

/* Section title with action link */
.section-title .section-action {
    font-size: 12px;
    font-weight: 500;
    color: var(--accent);
    margin-left: auto;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: color 0.15s ease;
}

.section-title .section-action:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Section icon - small purple dot next to section titles */
.section-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.section-icon.purple {
    background: var(--purple);
}

.section-icon.accent {
    background: var(--accent);
}

.section-icon.profit {
    background: var(--profit);
}

.section-icon.loss {
    background: var(--loss);
}

/* Calendar & Agenda wrapper - side by side on desktop, stacked on mobile */
.calendar-agenda-wrapper {
    display: flex;
    gap: 28px;
    margin-bottom: 28px;
    width: 100%;
}

.calendar-section {
    flex: 2;
    min-width: 0;
}

.agenda-section {
    flex: 1;
    min-width: 200px;
    max-width: 320px;
}

.calendar-section .section-title,
.agenda-section .section-title {
    margin: 0 0 16px 0; /* No side margins — parent wrapper already has margins */
}

@media (max-width: 768px) {
    .calendar-agenda-wrapper {
        flex-direction: column;
        gap: 16px;
    }

    .calendar-section,
    .agenda-section {
        flex: none;
        min-width: auto;
        max-width: none;
        width: 100%;
    }

    .calendar-section .section-title,
    .agenda-section .section-title {
        margin-bottom: 12px;
    }
}

/* ============================================================================
   KPI Cards - Refined with stagger animation
   ============================================================================ */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

@media (max-width: 1200px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .kpi-card {
        padding: 12px 14px;
        min-height: auto;
    }
    .kpi-label {
        font-size: 10px;
    }
    .kpi-value {
        font-size: 18px;
    }
    .kpi-sub {
        font-size: 10px;
    }
}

.kpi-card {
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    transition: box-shadow var(--transition), border-color var(--transition), transform 0.15s ease;
    position: relative;
    overflow: hidden;
    animation: kpiSlideIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    min-height: auto;
}

.kpi-card:hover {
    /* 3D tilt is applied via JS - don't override transform here */
    box-shadow: var(--glass-shadow-hover);
    border-color: var(--border);
}

/* Loading bar at top of KPI cards */
.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--teal));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
}

.kpi-card:hover::before {
    transform: scaleX(1);
}

/* Profit cards get green gradient loading bar */
.kpi-card.profit::before {
    background: linear-gradient(90deg, var(--profit), var(--teal));
}

/* Loss cards get red gradient loading bar */
.kpi-card.loss::before {
    background: linear-gradient(90deg, var(--loss), var(--orange));
}

/* Active/pressed state for KPI cards */
.kpi-card:active {
    transform: scale(0.98) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* Subtle inner glow on hover */
.kpi-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(10, 132, 255, 0.08) 0%,
        transparent 70%
    );
}

.kpi-card:hover::after {
    opacity: 1;
}

.kpi-card.profit::after {
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(52, 199, 89, 0.08) 0%,
        transparent 70%
    );
}

.kpi-card.loss::after {
    background: radial-gradient(
        ellipse at 50% 0%,
        rgba(255, 69, 58, 0.08) 0%,
        transparent 70%
    );
}

/* ============================================================================
   3D Tilt Effect - Subtle depth on hover
   ============================================================================ */

/* Enable 3D transforms on card grids */
.kpi-grid,
.stats-grid,
.instances-grid,
.calendar-agenda-wrapper {
    perspective: 1000px;
}

/* Cards that support 3D tilt effect */
.kpi-card,
.stat-card,
.instance-card,
.calendar-panel,
.agenda-panel,
.open-positions-panel,
.pending-orders-panel,
.chart-panel {
    transform-style: preserve-3d;
    transition: transform 0.15s ease, box-shadow var(--transition);
}

/* Tables should not have 3D transforms - causes layout issues with row expansion */
.table-container.standalone-table {
    transform-style: flat;
    transform: none;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .kpi-card,
    .stat-card,
    .instance-card,
    .calendar-panel,
    .agenda-panel,
    .open-positions-panel,
    .pending-orders-panel,
    .chart-panel,
    .ticket-card,
    .page-header-card {
        transition: none;
    }
}

/* ============================================================================
   Mouse Glow Effect - Spotlight following cursor
   ============================================================================ */

.mouse-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
}

/* All cards/panels create stacking context and their content is above glow */
.kpi-card,
.stat-card,
.chart-panel,
.instance-card,
.calendar-panel,
.agenda-panel,
.open-positions-panel,
.table-container.standalone-table {
    isolation: isolate;
}

/* All content inside panels should be above the glow (z-index: 0) */
.kpi-card > *:not(.mouse-glow),
.stat-card > *:not(.mouse-glow),
.chart-panel > *:not(.mouse-glow),
.instance-card > *:not(.mouse-glow),
.calendar-panel > *:not(.mouse-glow),
.agenda-panel > *:not(.mouse-glow),
.open-positions-panel > *:not(.mouse-glow),
.table-container.standalone-table > *:not(.mouse-glow) {
    position: relative;
    z-index: 1;
}

/* Ensure nested elements in tables/charts are also above glow */
.chart-panel canvas,
.chart-panel .chart-container,
.chart-panel .chart-header,
.stat-card h3,
.stat-card .stat-row,
.stat-card .chart-container,
.table-container table,
.table-container thead,
.table-container tbody,
.table-container tr,
.table-container th,
.table-container td {
    position: relative;
    z-index: 1;
}

.mouse-glow::before {
    content: '';
    position: absolute;
    width: 10000px;
    height: 10000px;
    left: var(--glow-x, 50%);
    top: var(--glow-y, 50%);
    transform: translate(-50%, -50%);
    /* Exponential curve: bright center, rapid falloff */
    background: radial-gradient(
        circle,
        rgba(10, 132, 255, 0.07) 0%,
        rgba(10, 132, 255, 0.05) 10%,
        rgba(10, 132, 255, 0.025) 25%,
        rgba(10, 132, 255, 0.008) 45%,
        rgba(10, 132, 255, 0.002) 65%,
        transparent 80%
    );
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Profit card glow - green (10000px, exponential) */
.kpi-card.profit .mouse-glow::before,
.instance-card:not(.loss) .mouse-glow::before {
    background: radial-gradient(
        circle,
        rgba(52, 199, 89, 0.06) 0%,
        rgba(52, 199, 89, 0.042) 10%,
        rgba(52, 199, 89, 0.02) 25%,
        rgba(52, 199, 89, 0.006) 45%,
        rgba(52, 199, 89, 0.0015) 65%,
        transparent 80%
    );
}

/* Loss card glow - red (10000px, exponential) */
.kpi-card.loss .mouse-glow::before,
.instance-card.loss .mouse-glow::before {
    background: radial-gradient(
        circle,
        rgba(255, 69, 58, 0.055) 0%,
        rgba(255, 69, 58, 0.038) 10%,
        rgba(255, 69, 58, 0.018) 25%,
        rgba(255, 69, 58, 0.005) 45%,
        rgba(255, 69, 58, 0.001) 65%,
        transparent 80%
    );
}

/* Light mode (10000px, exponential) */
:root.light .mouse-glow::before {
    background: radial-gradient(
        circle,
        rgba(0, 122, 255, 0.055) 0%,
        rgba(0, 122, 255, 0.038) 10%,
        rgba(0, 122, 255, 0.018) 25%,
        rgba(0, 122, 255, 0.005) 45%,
        rgba(0, 122, 255, 0.001) 65%,
        transparent 80%
    );
}

:root.light .kpi-card.profit .mouse-glow::before,
:root.light .instance-card:not(.loss) .mouse-glow::before {
    background: radial-gradient(
        circle,
        rgba(40, 205, 65, 0.05) 0%,
        rgba(40, 205, 65, 0.035) 10%,
        rgba(40, 205, 65, 0.016) 25%,
        rgba(40, 205, 65, 0.004) 45%,
        rgba(40, 205, 65, 0.001) 65%,
        transparent 80%
    );
}

:root.light .kpi-card.loss .mouse-glow::before,
:root.light .instance-card.loss .mouse-glow::before {
    background: radial-gradient(
        circle,
        rgba(255, 59, 48, 0.045) 0%,
        rgba(255, 59, 48, 0.032) 10%,
        rgba(255, 59, 48, 0.015) 25%,
        rgba(255, 59, 48, 0.004) 45%,
        rgba(255, 59, 48, 0.001) 65%,
        transparent 80%
    );
}

/* Border glow effect on hover */
.kpi-card::after,
.instance-card::after,
.chart-panel::after,
.stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        135deg,
        transparent 0%,
        transparent 40%,
        rgba(10, 132, 255, 0) 40%,
        rgba(10, 132, 255, 0) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.kpi-card:hover::after,
.instance-card:hover::after,
.chart-panel:hover::after,
.stat-card:hover::after {
    opacity: 1;
    background: linear-gradient(
        135deg,
        rgba(10, 132, 255, 0.06) 0%,
        transparent 50%,
        rgba(10, 132, 255, 0.02) 100%
    );
}

.kpi-card.profit:hover::after,
.instance-card:not(.loss):hover::after {
    background: linear-gradient(
        135deg,
        rgba(52, 199, 89, 0.06) 0%,
        transparent 50%,
        rgba(52, 199, 89, 0.02) 100%
    );
}

.kpi-card.loss:hover::after,
.instance-card.loss:hover::after {
    background: linear-gradient(
        135deg,
        rgba(255, 69, 58, 0.05) 0%,
        transparent 50%,
        rgba(255, 69, 58, 0.02) 100%
    );
}

/* Disable glow effects with reduced motion */
@media (prefers-reduced-motion: reduce) {
    .mouse-glow,
    .kpi-card::after,
    .instance-card::after,
    .chart-panel::after,
    .stat-card::after {
        display: none;
    }
}

.kpi-card:active {
    /* Allow JS 3D tilt to work */
    filter: brightness(0.95);
}

.kpi-card:nth-child(1) { animation-delay: 0.05s; }
.kpi-card:nth-child(2) { animation-delay: 0.1s; }
.kpi-card:nth-child(3) { animation-delay: 0.15s; }
.kpi-card:nth-child(4) { animation-delay: 0.2s; }

@keyframes kpiSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Note: Main .kpi-card::before definition is earlier in the file */

.kpi-card:hover::before {
    transform: scaleX(1);
}

.kpi-card.profit::before { background: var(--profit); }
.kpi-card.loss::before { background: var(--loss); }

.kpi-label {
    color: var(--text-sub);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-value {
    font-size: clamp(20px, 2.2vw, 32px);
    font-weight: 600;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* KPI value row - for P/L + percentage side by side */
.kpi-value-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
    max-width: 100%;
}

.kpi-value-row .kpi-value {
    flex-shrink: 1;
    min-width: 0;
}

.kpi-pct {
    font-size: clamp(12px, 1.2vw, 16px);
    font-weight: 500;
    font-feature-settings: 'tnum' 1;
    opacity: 0.85;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kpi-pct.profit {
    color: var(--profit);
}

.kpi-pct.loss {
    color: var(--loss);
}

@media (max-width: 640px) {
    .kpi-pct { font-size: 13px; }
}

/* Current drawdown indicator next to max drawdown */
.kpi-current-dd {
    font-size: 16px;
    font-weight: 500;
    font-feature-settings: 'tnum' 1;
    opacity: 0.75;
    color: var(--text-sub);
}

.kpi-current-dd.in-drawdown {
    color: var(--loss);
    opacity: 0.9;
}

.kpi-current-dd.no-drawdown {
    color: var(--profit);
    opacity: 0.9;
}

.kpi-value.profit {
    color: var(--profit);
    text-shadow: 0 0 20px rgba(52, 199, 89, 0.3);
}
.kpi-value.loss {
    color: var(--loss);
    text-shadow: 0 0 20px rgba(255, 69, 58, 0.3);
}
.kpi-value.neutral { color: var(--text-main); }

:root.light .kpi-value.profit { text-shadow: none; }
:root.light .kpi-value.loss { text-shadow: none; }

.kpi-change {
    font-size: 12px;
    margin-top: 2px;
    color: var(--text-sub);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    line-height: 1.3;
}

.kpi-change .positive { color: var(--profit); }
.kpi-change .negative { color: var(--loss); }

/* Daily/Monthly return row inside P/L card */
.kpi-returns-row {
    display: flex;
    gap: 12px;
    margin-top: 2px;
}
.kpi-return {
    font-size: 11px;
    color: var(--text-sub);
    white-space: nowrap;
}
.kpi-return span { font-weight: 600; }
.kpi-return span.profit { color: var(--profit); }
.kpi-return span.loss { color: var(--loss); }

/* KPI Sparkline - full-width mini chart at bottom of card */
.kpi-sparkline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 36px;
    opacity: 0.8;
    transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Subtle mask gradient for edge fade - leave more room on right for endpoint dot */
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 96%, transparent 100%);
}

.kpi-sparkline canvas {
    width: 100% !important;
    height: 100% !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.kpi-card:hover .kpi-sparkline {
    opacity: 1;
    transform: translateY(-2px);
    filter: brightness(1.1);
}

/* Sparkline glow effect on hover */
.kpi-card:hover .kpi-sparkline canvas {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

/* Adjust KPI card layout for sparkline - need padding at bottom */
.kpi-card {
    padding-bottom: 36px; /* Room for sparkline at bottom */
}

@media (max-width: 1200px) {
    .kpi-card {
        padding-bottom: 36px;
    }
    .kpi-sparkline {
        height: 34px;
    }
}

@media (max-width: 600px) {
    .kpi-card {
        padding-bottom: 32px;
        min-height: auto;
    }

    .kpi-sparkline {
        height: 28px;
        opacity: 0.75;
    }

    .kpi-change {
        font-size: 11px;
        margin-top: 2px;
    }
}

/* Compact KPI cards (no sparkline) - used on Statistics page */
/* Compound selector ensures specificity over later responsive .kpi-card overrides */
.kpi-card.kpi-card-compact {
    padding-bottom: 20px;
    min-height: 100px;
}

.kpi-card-compact .kpi-sparkline {
    display: none;
}

/* Grid for compact KPI cards */
.kpi-grid-no-sparkline .kpi-card {
    padding-bottom: 20px;
    min-height: 100px;
}

/* Enhanced compact card hover - subtle lift effect */
.kpi-card-compact:hover {
    transform: translateY(-2px);
}

/* Value emphasis for compact cards */
.kpi-card-compact .kpi-value {
    font-size: 26px;
    margin-bottom: 6px;
}

.kpi-card-compact .kpi-change {
    font-size: 12px;
}

@media (max-width: 600px) {
    .kpi-card.kpi-card-compact {
        padding: 16px 18px;
        min-height: auto;
    }

    .kpi-card-compact .kpi-value {
        font-size: 22px;
    }
}

/* ============================================================================
   Chart Panels
   ============================================================================ */
.charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 28px;
}

/* Side-by-side chart panels - kept together using charts-row grid */
.charts-row .chart-panel {
    height: 100%;
}

/* Performance Analysis charts stay side-by-side until much smaller screens */
@media (max-width: 800px) {
    .charts-row { grid-template-columns: 1fr; }
}


.chart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    margin-bottom: 28px;
}

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

.chart-panel {
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: box-shadow var(--transition), border-color var(--transition), transform 0.15s ease;
    position: relative;
    overflow: hidden;
}

/* Loading bar at top of chart panels */
.chart-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--purple));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
}

.chart-panel:hover {
    box-shadow: var(--glass-shadow-hover);
    border-color: var(--border);
}

.chart-panel:hover::before {
    transform: scaleX(1);
}

/* Chart panel loading state */
.chart-panel.loading {
    min-height: 200px;
}

.chart-panel.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: chartShimmer 1.5s ease-in-out infinite;
}

@keyframes chartShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Chart panel with profit/loss indicator */
.chart-panel.profit-trend::before {
    background: linear-gradient(90deg, var(--profit), var(--teal));
}

.chart-panel.loss-trend::before {
    background: linear-gradient(90deg, var(--loss), var(--orange));
}

.chart-panel.full-width {
    grid-column: 1 / -1;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

/* Hide chart-header when title is empty */
.chart-header:has(.chart-title:empty) {
    display: none;
}

.chart-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-title::before {
    content: '';
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, var(--accent), var(--purple));
    border-radius: 2px;
}

/* Chart subtitle/description */
.chart-subtitle {
    font-size: 12px;
    color: var(--text-sub);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chart-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.chart-legend.bottom {
    justify-content: flex-end;
    padding-top: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-sub);
}

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

.legend-dot.balance { background: var(--profit); }
.legend-dot.equity { background: rgb(142, 142, 147); }
.legend-dot.effective { background: rgb(255, 159, 64); }
.legend-dot.drawdown { background: var(--loss); }

/* ============================================================================
   Unified Chart Legend Swatches — consistent across all pages
   Shows line type (solid/dashed/stepped) and zone type (filled area)
   ============================================================================ */

/* Shared legend layout for all charts */
.chart-legend.unified {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px 12px 4px;
    font-size: 11px;
    color: var(--text-sub);
}

.chart-legend.unified .legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    padding: 3px 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    white-space: nowrap;
}

/* --- Swatch: line indicator (16×2px) --- */
.legend-swatch {
    display: inline-block;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    flex-shrink: 0;
}

/* Solid line */
.legend-swatch.solid {
    /* color set via inline or modifier class */
}

/* Dashed line */
.legend-swatch.dashed {
    height: 0;
    border-top-width: 2px;
    border-top-style: dashed;
    background: none;
}

/* Stepped (stair) line */
.legend-swatch.stepped {
    height: 0;
    width: 16px;
    border-top-width: 2px;
    border-top-style: dashed;
    background: none;
    position: relative;
}
.legend-swatch.stepped::after {
    content: '';
    position: absolute;
    top: -2px;
    right: 0;
    width: 0;
    height: 5px;
    border-right: 2px solid;
    border-color: inherit;
}

/* --- Swatch: zone/area indicator (16×8px filled) --- */
.legend-swatch.zone {
    height: 8px;
    border-radius: 2px;
}

/* Striped zone */
.legend-swatch.zone-striped {
    height: 8px;
    border-radius: 2px;
}

/* --- Color modifiers --- */
/* Balance = green */
.legend-swatch.c-balance { background: var(--profit); }
.legend-swatch.dashed.c-balance { border-top-color: var(--profit); background: none; }
.legend-swatch.stepped.c-balance { border-top-color: var(--profit); border-color: var(--profit); background: none; }

/* Equity = gray */
.legend-swatch.c-equity { background: rgb(142, 142, 147); }
.legend-swatch.dashed.c-equity { border-top-color: rgb(142, 142, 147); background: none; }

/* Effective balance = amber */
.legend-swatch.c-effective { background: rgb(255, 159, 64); }
.legend-swatch.dashed.c-effective { border-top-color: rgb(255, 159, 64); background: none; }

/* Projected balance = green (lighter) */
.legend-swatch.c-proj-balance { background: rgba(52, 199, 89, 0.6); }
.legend-swatch.dashed.c-proj-balance { border-top-color: rgba(52, 199, 89, 0.6); background: none; }

/* Projected effective = amber (lighter) */
.legend-swatch.c-proj-effective { background: rgba(255, 159, 64, 0.5); }
.legend-swatch.dashed.c-proj-effective { border-top-color: rgba(255, 159, 64, 0.5); background: none; }

/* DD floor = red */
.legend-swatch.c-dd { background: rgba(255, 69, 58, 0.6); }
.legend-swatch.dashed.c-dd { border-top-color: rgba(255, 69, 58, 0.6); background: none; }
.legend-swatch.stepped.c-dd { border-top-color: rgba(255, 69, 58, 0.6); border-color: rgba(255, 69, 58, 0.6); background: none; }

/* Safeguarded = amber solid line (legacy) */
.legend-swatch.solid.c-safeguarded { background: rgb(255, 159, 64); }

/* The Vault = blue */
.legend-swatch.c-vault { background: rgb(10, 132, 255); }
.legend-swatch.solid.c-vault { background: rgb(10, 132, 255); }
.legend-swatch.dashed.c-vault { border-top-color: rgb(10, 132, 255); background: none; }

/* Projected Vault = blue (lighter) */
.legend-swatch.c-proj-vault { background: rgba(10, 132, 255, 0.5); }
.legend-swatch.dashed.c-proj-vault { border-top-color: rgba(10, 132, 255, 0.5); background: none; }

/* Starting Balance = gray dashed */
.legend-swatch.dashed.c-starting-bal { border-top-color: rgba(152, 152, 157, 0.5); background: none; }

.legend-swatch.zone.c-dd-band {
    background: rgba(255, 69, 58, 0.12);
    border: 1px solid rgba(255, 69, 58, 0.3);
}

/* P/L zone */
.legend-swatch.zone.c-pnl { background: var(--profit); opacity: 0.5; }
.legend-swatch.zone.c-drawdown { background: var(--accent); opacity: 0.5; }

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

.chart-container.large {
    height: 350px;
}

.chart-container.small {
    height: 200px;
}

@media (max-width: 768px) {
    .chart-container {
        height: 220px;
    }
    .chart-container.large {
        height: 280px;
    }
    .chart-container.small {
        height: 160px;
    }
}

@media (max-width: 480px) {
    .chart-container {
        height: 180px;
    }
    .chart-container.large {
        height: 220px;
    }
    .chart-container.small {
        height: 140px;
    }
}

/* ============================================================================
   Trading Patterns Section
   ============================================================================ */
.patterns-section {
    margin-bottom: 24px;
}

.patterns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.pattern-card {
    border-radius: var(--radius-lg);
    padding: 16px;
    transition: box-shadow var(--transition), border-color var(--transition), transform 0.15s ease;
    animation: cardFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    position: relative;
    overflow: hidden;
}

.pattern-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--purple));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
}

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

.pattern-card:hover::before {
    transform: scaleX(1);
}

.pattern-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.pattern-pnl {
    font-size: 20px;
    font-weight: 700;
    font-feature-settings: 'tnum' 1;
    margin-bottom: 8px;
}

.pattern-pnl.profit {
    color: var(--profit);
}

.pattern-pnl.loss {
    color: var(--loss);
}

.pattern-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-dim);
}

.pattern-stats span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Responsive adjustments for patterns grid */
@media (max-width: 768px) {
    .patterns-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

/* ============================================================================
   Instance Cards (Mini Charts) - Enhanced animations
   ============================================================================ */
.instances-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 28px;
}

/* Instance row - keeps same symbols together (scoped to avoid EA settings conflict) */
.instances-grid .instance-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Symbol group header */
.instance-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px;
}

.instance-group-symbol {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-sub);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.instance-group-pnl {
    font-size: 11px;
    font-weight: 600;
    font-feature-settings: 'tnum' 1;
}

.instance-group-pnl.profit { color: var(--profit); }
.instance-group-pnl.loss { color: var(--loss); }

/* Cards container within a symbol group */
.instance-group-cards {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    width: 100%;
}

.instance-card {
    border-radius: var(--radius-lg);
    padding: 14px;
    transition: box-shadow var(--transition), border-color var(--transition), transform 0.15s ease;
    animation: cardFadeIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    /* Auto-fit: all same-symbol cards fill row evenly */
    flex: 1 1 0;
    min-width: 180px;
    /* Removed max-width to let cards fill available space */
    position: relative;
    overflow: hidden;
}

/* Loading bar at top of instance cards */
.instance-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--profit), var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1;
}

.instance-card:hover {
    /* 3D tilt is applied via JS - don't override transform here */
    box-shadow: var(--glass-shadow-hover);
    border-color: var(--border);
}

.instance-card:hover::before {
    transform: scaleX(1);
}

/* Instance card loss state */
.instance-card.loss::before {
    background: linear-gradient(90deg, var(--loss), var(--orange));
}

/* Instance card neutral/break-even state */
.instance-card.neutral::before {
    background: linear-gradient(90deg, var(--text-dim), var(--border));
}

.instance-card:active {
    /* Allow JS 3D tilt to work, just scale slightly */
    filter: brightness(0.95);
    transform: translateY(-2px) scale(0.995);
}

/* Focus state for keyboard accessibility */
.instance-card:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.3), var(--shadow);
}

/* Mobile touch feedback */
@media (hover: none) {
    .instance-card {
        -webkit-tap-highlight-color: transparent;
    }

    .instance-card:active {
        transform: scale(0.98);
        filter: brightness(0.92);
        transition: transform 0.1s ease, filter 0.1s ease;
    }
}

/* Responsive adjustments for instance cards */
@media (max-width: 900px) {
    .instance-group-cards {
        flex-wrap: wrap;
    }
    .instance-card {
        flex: 0 0 calc(50% - 6px);
        min-width: 160px;
    }
}

/* Note: 500px breakpoint removed - 768px and 480px media queries handle instance card sizing */

/* Staggered animation for instance cards within rows */
.instance-row:nth-child(1) .instance-card { animation-delay: 0.05s; }
.instance-row:nth-child(2) .instance-card { animation-delay: 0.1s; }
.instance-row:nth-child(3) .instance-card { animation-delay: 0.15s; }
.instance-row:nth-child(4) .instance-card { animation-delay: 0.2s; }
.instance-row:nth-child(n+5) .instance-card { animation-delay: 0.25s; }

/* Additional delay within each row */
.instance-row .instance-card:nth-child(2) { animation-delay: calc(var(--base-delay, 0.05s) + 0.03s); }
.instance-row .instance-card:nth-child(3) { animation-delay: calc(var(--base-delay, 0.05s) + 0.06s); }
.instance-row .instance-card:nth-child(4) { animation-delay: calc(var(--base-delay, 0.05s) + 0.09s); }
.instance-row .instance-card:nth-child(n+5) { animation-delay: calc(var(--base-delay, 0.05s) + 0.12s); }

@keyframes cardFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

.instance-symbol {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color var(--transition);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Symbol icon styling */
.instance-symbol svg,
.instance-symbol .symbol-icon {
    width: 16px;
    height: 16px;
    opacity: 0.7;
    transition: opacity var(--transition), transform var(--transition);
}

.instance-card:hover .instance-symbol svg,
.instance-card:hover .instance-symbol .symbol-icon {
    opacity: 1;
    transform: scale(1.1);
}

.instance-tf {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-bg);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.02em;
    transition: background var(--transition), transform var(--transition);
}

.instance-card:hover .instance-tf {
    background: rgba(10, 132, 255, 0.2);
    transform: scale(1.02);
}

.instance-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.instance-pnl {
    font-size: 16px;
    font-weight: 600;
    font-feature-settings: 'tnum' 1;
}

.instance-pnl.profit {
    color: var(--profit);
    text-shadow: 0 0 20px rgba(52, 199, 89, 0.3);
}
.instance-pnl.loss {
    color: var(--loss);
    text-shadow: 0 0 20px rgba(255, 69, 58, 0.3);
}
:root.light .instance-pnl.profit,
:root.light .instance-pnl.loss { text-shadow: none; }

.instance-chart {
    height: 80px;
    margin-bottom: 12px;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.03) 100%);
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Enhanced chart canvas styling */
.instance-chart canvas {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
    transition: filter 0.2s ease;
}

/* Subtle edge fade for cleaner look */
.instance-chart::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(var(--bg-panel-rgb, 44, 44, 46), 0.3) 0%,
        transparent 5%,
        transparent 95%,
        rgba(var(--bg-panel-rgb, 44, 44, 46), 0.3) 100%
    );
    z-index: 1;
}

/* Chart enhancement on card hover */
.instance-card:hover .instance-chart {
    transform: translateY(-1px);
}

.instance-card:hover .instance-chart canvas {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
}

/* Profit/loss specific glow effects */
.instance-card:not(.loss) .instance-chart canvas {
    filter: drop-shadow(0 2px 6px rgba(52, 199, 89, 0.1));
}

.instance-card:not(.loss):hover .instance-chart canvas {
    filter: drop-shadow(0 4px 12px rgba(52, 199, 89, 0.2));
}

.instance-card.loss .instance-chart canvas {
    filter: drop-shadow(0 2px 6px rgba(255, 69, 58, 0.1));
}

.instance-card.loss:hover .instance-chart canvas {
    filter: drop-shadow(0 4px 12px rgba(255, 69, 58, 0.2));
}

/* Light mode adjustments */
:root.light .instance-chart {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.02) 100%);
}

:root.light .instance-chart::before {
    background: linear-gradient(90deg,
        rgba(242, 242, 247, 0.4) 0%,
        transparent 5%,
        transparent 95%,
        rgba(242, 242, 247, 0.4) 100%
    );
}

.instance-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-sub);
}

.stats-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    margin: 0 -6px;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
    overflow: hidden;
    white-space: nowrap;
}

.stats-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

:root.light .stats-row:hover {
    background: rgba(0, 0, 0, 0.03);
}

.stat-label {
    font-weight: 500;
    min-width: 40px;
    color: var(--text-sub);
    transition: color var(--transition);
}

.stats-row:hover .stat-label {
    color: var(--text-main);
}

.stat-value {
    font-feature-settings: 'tnum' 1;
    transition: transform var(--transition);
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.stats-row:hover .stat-value {
    transform: translateX(2px);
}

.stat-value.profit {
    color: var(--profit);
    text-shadow: 0 0 20px rgba(52, 199, 89, 0.3);
}
.stat-value.loss {
    color: var(--loss);
    text-shadow: 0 0 20px rgba(255, 69, 58, 0.3);
}
:root.light .stat-value.profit,
:root.light .stat-value.loss { text-shadow: none; }

/* ============================================================================
   Heatmap Table
   ============================================================================ */
.heatmap-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.heatmap-table th,
.heatmap-table td {
    padding: 8px 10px;
    text-align: center;
    border-bottom: 1px solid var(--border-subtle);
}

.heatmap-table th {
    background: var(--bg-header);
    color: var(--text-sub);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 1;
}

.heatmap-table th:first-child,
.heatmap-table td.symbol-cell {
    text-align: left;
    font-weight: 600;
}

.heatmap-cell {
    font-feature-settings: 'tnum' 1;
    font-size: 11px;
    transition: transform var(--transition-fast);
    border-radius: 2px;
}

.heatmap-cell:hover {
    transform: scale(1.1);
    z-index: 1;
    box-shadow: var(--shadow);
}

.heatmap-cell.profit {
    color: var(--text-main);
}

.heatmap-cell.loss {
    color: var(--text-main);
}

.heatmap-table td:last-child {
    background: var(--bg-panel-dark);
    font-weight: 600;
}

@media (max-width: 768px) {
    .heatmap-table {
        font-size: 10px;
    }

    .heatmap-table th,
    .heatmap-table td {
        padding: 6px 4px;
    }

    .heatmap-cell {
        font-size: 9px;
    }
}

/* Extra small screens - show abbreviated day names */
@media (max-width: 480px) {
    .heatmap-table {
        font-size: 9px;
    }

    .heatmap-table th,
    .heatmap-table td {
        padding: 5px 2px;
        min-width: 32px;
    }

    .heatmap-table th:first-child,
    .heatmap-table td.symbol-cell {
        min-width: 50px;
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .heatmap-cell {
        font-size: 9px;
        padding: 2px 3px;
    }
}

.today-row {
    padding-top: 6px;
    border-top: 1px solid var(--border-subtle);
}

/* Instance Comparison Table - Stats Page */
#instance-comparison-table {
    min-width: 600px;
}

#instance-comparison-table th,
#instance-comparison-table td {
    white-space: nowrap;
}

#instance-comparison-table td:nth-child(5), /* P/L column */
#instance-comparison-table td:nth-child(6), /* Win Rate */
#instance-comparison-table td:nth-child(7), /* PF */
#instance-comparison-table td:nth-child(8) { /* Avg Trade */
    font-feature-settings: 'tnum' 1;
}

/* Mobile: horizontal scroll with sticky first column */
@media (max-width: 768px) {
    #instance-comparison-table th:first-child,
    #instance-comparison-table td:first-child {
        position: sticky;
        left: 0;
        background: var(--bg-panel);
        z-index: 2;
        box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
    }

    #instance-comparison-table th:first-child {
        background: var(--bg-header);
    }
}

.instance-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Badge container for Active/TF in top right */
.instance-badges {
    display: flex;
    align-items: center;
    gap: 6px;
}

.instance-status {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Pulsing dot for status */
.instance-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.instance-status.status-active {
    background: rgba(52, 199, 89, 0.15);
    color: var(--profit);
}

.instance-status.status-active::before {
    background: var(--profit);
    box-shadow: 0 0 6px var(--profit);
    animation: statusPulse 2s ease-in-out infinite;
}

.instance-status.status-inactive {
    background: rgba(142, 142, 147, 0.15);
    color: var(--text-sub);
}

.instance-status.status-inactive::before {
    background: var(--text-muted);
}

.instance-status.status-unknown {
    background: rgba(152, 152, 157, 0.15);
    color: var(--text-sub);
}

.instance-status.status-unknown::before {
    background: var(--text-muted);
}

/* Active/Offline instance card visual indicators */
/* Note: Removed redundant ::after green dot indicator - the status badge already shows active state */

.instance-card.instance-offline {
    opacity: 0.75;
    filter: saturate(0.7);
    transition: opacity var(--transition), filter var(--transition), transform 0.15s ease;
}

.instance-card.instance-offline::before {
    background: linear-gradient(90deg, var(--text-muted), var(--border));
}

.instance-card.instance-offline:hover {
    opacity: 1;
    filter: saturate(1);
}

/* Heartbeat row in instance stats */
.heartbeat-row {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--border-subtle);
    font-size: 10px;
}

.heartbeat-row .stat-label {
    color: var(--text-sub);
}

.heartbeat-row .stat-value.status-active {
    color: var(--profit);
}

.heartbeat-row .stat-value.status-inactive {
    color: var(--text-sub);
}

.instance-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
    font-size: 11px;
    color: var(--text-sub);
}

.instance-meta span {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-sm);
    transition: background var(--transition), color var(--transition);
}

:root.light .instance-meta span {
    background: rgba(0, 0, 0, 0.03);
}

.instance-meta span:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-main);
}

:root.light .instance-meta span:hover {
    background: rgba(0, 0, 0, 0.06);
}

.meta-broker {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meta-balance {
    font-weight: 500;
    color: var(--text-main);
}

.meta-lastseen {
    opacity: 0.7;
}

/* ============================================================================
   Calendar / Agenda
   ============================================================================ */
.calendar-panel {
    border-radius: var(--radius-lg);
    padding: 20px;
    /* No max-width - let flex container control width (2/3) */
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition), border-color var(--transition), transform 0.15s ease;
}



/* Loading bar at top of calendar panel */
.calendar-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 1;
}

.calendar-panel:hover {
    box-shadow: var(--glass-shadow-hover);
    border-color: var(--border);
}

.calendar-panel:hover::before {
    transform: scaleX(1);
}

.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
    /* No max-width - let parent control */
}

.calendar-nav button {
    background: transparent;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--radius);
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-nav button:hover {
    background: var(--accent-bg);
    transform: scale(1.1);
}

.calendar-nav button:active {
    transform: scale(0.95);
}

.calendar-nav .month-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: -0.3px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.calendar-grid.has-weekly {
    grid-template-columns: repeat(8, 1fr);
}

.calendar-header {
    text-align: center;
    padding: 4px 2px 5px;
    color: var(--text-sub);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: var(--radius);
    background: var(--bg-main);
    cursor: pointer;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 12px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 4px 2px;
    /* Let days auto-size based on grid */
    min-width: 0;
}

.calendar-day:hover {
    transform: translateY(-2px) scale(1.02);
    z-index: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.calendar-day.empty {
    background: transparent;
    cursor: default;
    border: none;
    box-shadow: none;
    pointer-events: none;
}

.calendar-day.empty:hover {
    transform: none;
    box-shadow: none;
}

.calendar-day .date {
    font-weight: 700;
    font-size: 13px;
    color: var(--text-main);
    line-height: 1;
}

/* P&L value displayed below date */
.calendar-day .pnl-indicator {
    font-size: 9px;
    font-weight: 700;
    font-feature-settings: 'tnum' 1;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: -0.4px;
    padding: 1px 2px;
    border-radius: 2px;
}

.calendar-day .pnl-indicator.profit {
    color: var(--profit);
    background: rgba(52, 199, 89, 0.15);
    text-shadow: 0 0 12px rgba(52, 199, 89, 0.4);
}

.calendar-day .pnl-indicator.loss {
    color: var(--loss);
    background: rgba(255, 69, 58, 0.15);
    text-shadow: 0 0 12px rgba(255, 69, 58, 0.4);
}

/* Percentage gain displayed below P/L */
.calendar-day .pnl-pct {
    font-size: 9px;
    font-weight: 600;
    font-feature-settings: 'tnum' 1;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: -0.3px;
    opacity: 0.85;
}

.calendar-day .pnl-pct.profit {
    color: var(--profit);
}

.calendar-day .pnl-pct.loss {
    color: var(--loss);
}

/* Subtle background tint for profit/loss days */
.calendar-day.has-profit {
    background: linear-gradient(145deg, rgba(52, 199, 89, 0.08) 0%, rgba(52, 199, 89, 0.03) 100%);
    border-color: rgba(52, 199, 89, 0.2);
}

.calendar-day.has-profit:hover {
    background: linear-gradient(145deg, rgba(52, 199, 89, 0.15) 0%, rgba(52, 199, 89, 0.08) 100%);
    border-color: rgba(52, 199, 89, 0.35);
    box-shadow: 0 4px 16px rgba(52, 199, 89, 0.2);
}

.calendar-day.has-loss {
    background: linear-gradient(145deg, rgba(255, 69, 58, 0.08) 0%, rgba(255, 69, 58, 0.03) 100%);
    border-color: rgba(255, 69, 58, 0.2);
}

.calendar-day.has-loss:hover {
    background: linear-gradient(145deg, rgba(255, 69, 58, 0.15) 0%, rgba(255, 69, 58, 0.08) 100%);
    border-color: rgba(255, 69, 58, 0.35);
    box-shadow: 0 4px 16px rgba(255, 69, 58, 0.2);
}

/* Light theme adjustments */
:root.light .calendar-day {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

:root.light .calendar-day:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

:root.light .calendar-day.has-profit {
    background: linear-gradient(145deg, rgba(40, 205, 65, 0.1) 0%, rgba(40, 205, 65, 0.04) 100%);
    border-color: rgba(40, 205, 65, 0.25);
}

:root.light .calendar-day.has-profit:hover {
    box-shadow: 0 4px 16px rgba(40, 205, 65, 0.18);
}

:root.light .calendar-day.has-loss {
    background: linear-gradient(145deg, rgba(255, 59, 48, 0.1) 0%, rgba(255, 59, 48, 0.04) 100%);
    border-color: rgba(255, 59, 48, 0.25);
}

:root.light .calendar-day.has-loss:hover {
    box-shadow: 0 4px 16px rgba(255, 59, 48, 0.18);
}

:root.light .calendar-day .pnl-indicator.profit {
    background: rgba(40, 205, 65, 0.12);
    text-shadow: none;
}

:root.light .calendar-day .pnl-indicator.loss {
    background: rgba(255, 59, 48, 0.12);
    text-shadow: none;
}

/* Today indicator */
.calendar-day.today {
    border: 2px solid var(--accent);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
    animation: todayPulse 2s ease-in-out infinite;
}

@keyframes todayPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15); }
    50% { box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.08); }
}

.calendar-day.today .date {
    color: var(--accent);
    font-weight: 700;
}

/* Today with profit/loss - keep accent border but add colored glow */
.calendar-day.today.has-profit {
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15), 0 4px 12px rgba(52, 199, 89, 0.15);
}

.calendar-day.today.has-loss {
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15), 0 4px 12px rgba(255, 69, 58, 0.15);
}

/* Calendar day active/clicked state */
.calendar-day:active:not(.empty) {
    transform: translateY(0) scale(0.97);
    transition: transform 0.08s ease;
}

.calendar-day.has-profit:active {
    background: linear-gradient(145deg, rgba(52, 199, 89, 0.22) 0%, rgba(52, 199, 89, 0.12) 100%);
    box-shadow: 0 1px 4px rgba(52, 199, 89, 0.25) inset;
}

.calendar-day.has-loss:active {
    background: linear-gradient(145deg, rgba(255, 69, 58, 0.22) 0%, rgba(255, 69, 58, 0.12) 100%);
    box-shadow: 0 1px 4px rgba(255, 69, 58, 0.25) inset;
}

/* Selected calendar day state */
.calendar-day.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.25);
}

.calendar-day.selected.has-profit {
    border-color: var(--profit);
    box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.25);
}

.calendar-day.selected.has-loss {
    border-color: var(--loss);
    box-shadow: 0 0 0 2px rgba(255, 69, 58, 0.25);
}

/* Mobile touch feedback for calendar */
@media (hover: none) and (pointer: coarse) {
    .calendar-day {
        -webkit-tap-highlight-color: transparent;
    }

    .calendar-day:hover {
        transform: none;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .calendar-day:active:not(.empty) {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }

    .calendar-day.has-profit:hover,
    .calendar-day.has-loss:hover {
        transform: none;
    }
}

/* ============================================================================
   Weekly Summary Column + Weekday Totals Row
   ============================================================================ */

/* "Week" column header */
.calendar-header.weekly-header {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.4px;
}

/* Weekly summary cell (8th column, one per row) — matches .calendar-day sizing */
.calendar-week-summary {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3px;
    border-radius: var(--radius-sm);
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 4px 2px;
    min-width: 0;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-week-summary.week-profit {
    background: linear-gradient(145deg, rgba(52, 199, 89, 0.08) 0%, rgba(52, 199, 89, 0.03) 100%);
    border-color: rgba(52, 199, 89, 0.2);
}

.calendar-week-summary.week-profit:hover {
    background: linear-gradient(145deg, rgba(52, 199, 89, 0.15) 0%, rgba(52, 199, 89, 0.08) 100%);
    border-color: rgba(52, 199, 89, 0.35);
    box-shadow: 0 4px 16px rgba(52, 199, 89, 0.2);
}

.calendar-week-summary.week-loss {
    background: linear-gradient(145deg, rgba(255, 69, 58, 0.08) 0%, rgba(255, 69, 58, 0.03) 100%);
    border-color: rgba(255, 69, 58, 0.2);
}

.calendar-week-summary.week-loss:hover {
    background: linear-gradient(145deg, rgba(255, 69, 58, 0.15) 0%, rgba(255, 69, 58, 0.08) 100%);
    border-color: rgba(255, 69, 58, 0.35);
    box-shadow: 0 4px 16px rgba(255, 69, 58, 0.2);
}

.calendar-week-summary.week-empty {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    cursor: default;
}

.calendar-week-summary .week-pnl {
    font-size: 9px;
    font-weight: 700;
    font-feature-settings: 'tnum' 1;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: -0.4px;
    padding: 1px 2px;
    border-radius: 2px;
}

.calendar-week-summary .week-pnl.profit {
    color: var(--profit);
    background: rgba(52, 199, 89, 0.15);
    text-shadow: 0 0 12px rgba(52, 199, 89, 0.4);
}
.calendar-week-summary .week-pnl.loss {
    color: var(--loss);
    background: rgba(255, 69, 58, 0.15);
    text-shadow: 0 0 12px rgba(255, 69, 58, 0.4);
}

.calendar-week-summary .week-pct {
    font-size: 9px;
    font-weight: 600;
    font-feature-settings: 'tnum' 1;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: -0.3px;
    opacity: 0.85;
}

.calendar-week-summary .week-pct.profit { color: var(--profit); }
.calendar-week-summary .week-pct.loss { color: var(--loss); }

/* Weekday totals row — matches .calendar-day base but no aspect-ratio */
.calendar-weekday-total {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: var(--radius-sm);
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 6px 2px 4px;
    min-width: 0;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-weekday-total.day-profit {
    background: linear-gradient(145deg, rgba(52, 199, 89, 0.08) 0%, rgba(52, 199, 89, 0.03) 100%);
    border-color: rgba(52, 199, 89, 0.2);
}

.calendar-weekday-total.day-loss {
    background: linear-gradient(145deg, rgba(255, 69, 58, 0.08) 0%, rgba(255, 69, 58, 0.03) 100%);
    border-color: rgba(255, 69, 58, 0.2);
}

.calendar-weekday-total .weekday-label {
    font-size: 8px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
    margin-bottom: 1px;
}

.calendar-weekday-total .weekday-pnl {
    font-size: 9px;
    font-weight: 700;
    font-feature-settings: 'tnum' 1;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: -0.4px;
    padding: 1px 2px;
    border-radius: 2px;
}

.calendar-weekday-total .weekday-pnl.profit {
    color: var(--profit);
    background: rgba(52, 199, 89, 0.15);
    text-shadow: 0 0 12px rgba(52, 199, 89, 0.4);
}
.calendar-weekday-total .weekday-pnl.loss {
    color: var(--loss);
    background: rgba(255, 69, 58, 0.15);
    text-shadow: 0 0 12px rgba(255, 69, 58, 0.4);
}

.calendar-weekday-total .weekday-pct {
    font-size: 9px;
    font-weight: 600;
    font-feature-settings: 'tnum' 1;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: -0.3px;
    opacity: 0.85;
}

.calendar-weekday-total .weekday-pct.profit { color: var(--profit); }
.calendar-weekday-total .weekday-pct.loss { color: var(--loss); }

/* Month total cell (bottom-right corner) — matches weekday totals */
.calendar-month-total {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: var(--radius-sm);
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    padding: 6px 3px 4px;
    min-width: 0;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.calendar-month-total.month-profit {
    background: linear-gradient(145deg, rgba(52, 199, 89, 0.08) 0%, rgba(52, 199, 89, 0.03) 100%);
    border-color: rgba(52, 199, 89, 0.2);
}

.calendar-month-total.month-loss {
    background: linear-gradient(145deg, rgba(255, 69, 58, 0.08) 0%, rgba(255, 69, 58, 0.03) 100%);
    border-color: rgba(255, 69, 58, 0.2);
}

.calendar-month-total .month-label {
    font-size: 7px;
    font-weight: 700;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
    margin-bottom: 1px;
}

.calendar-month-total .month-pnl {
    font-size: 9px;
    font-weight: 700;
    font-feature-settings: 'tnum' 1;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: -0.4px;
    padding: 1px 2px;
    border-radius: 2px;
}

.calendar-month-total .month-pnl.profit {
    color: var(--profit);
    background: rgba(52, 199, 89, 0.15);
    text-shadow: 0 0 12px rgba(52, 199, 89, 0.4);
}
.calendar-month-total .month-pnl.loss {
    color: var(--loss);
    background: rgba(255, 69, 58, 0.15);
    text-shadow: 0 0 12px rgba(255, 69, 58, 0.4);
}

/* Light mode overrides for summary cells — match .calendar-day light patterns */
:root.light .calendar-week-summary {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
:root.light .calendar-week-summary.week-profit {
    background: linear-gradient(145deg, rgba(40, 205, 65, 0.1) 0%, rgba(40, 205, 65, 0.04) 100%);
    border-color: rgba(40, 205, 65, 0.25);
}
:root.light .calendar-week-summary.week-loss {
    background: linear-gradient(145deg, rgba(255, 59, 48, 0.1) 0%, rgba(255, 59, 48, 0.04) 100%);
    border-color: rgba(255, 59, 48, 0.25);
}
:root.light .calendar-weekday-total {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
:root.light .calendar-weekday-total.day-profit {
    background: linear-gradient(145deg, rgba(40, 205, 65, 0.1) 0%, rgba(40, 205, 65, 0.04) 100%);
    border-color: rgba(40, 205, 65, 0.25);
}
:root.light .calendar-weekday-total.day-loss {
    background: linear-gradient(145deg, rgba(255, 59, 48, 0.1) 0%, rgba(255, 59, 48, 0.04) 100%);
    border-color: rgba(255, 59, 48, 0.25);
}
:root.light .calendar-month-total {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
:root.light .calendar-month-total.month-profit {
    background: linear-gradient(145deg, rgba(40, 205, 65, 0.1) 0%, rgba(40, 205, 65, 0.04) 100%);
    border-color: rgba(40, 205, 65, 0.25);
}
:root.light .calendar-month-total.month-loss {
    background: linear-gradient(145deg, rgba(255, 59, 48, 0.1) 0%, rgba(255, 59, 48, 0.04) 100%);
    border-color: rgba(255, 59, 48, 0.25);
}

/* Light mode: remove text-shadow from summary pill indicators */
:root.light .calendar-week-summary .week-pnl,
:root.light .calendar-weekday-total .weekday-pnl,
:root.light .calendar-month-total .month-pnl {
    text-shadow: none;
}
:root.light .calendar-week-summary .week-pnl.profit,
:root.light .calendar-weekday-total .weekday-pnl.profit,
:root.light .calendar-month-total .month-pnl.profit {
    background: rgba(40, 205, 65, 0.12);
}
:root.light .calendar-week-summary .week-pnl.loss,
:root.light .calendar-weekday-total .weekday-pnl.loss,
:root.light .calendar-month-total .month-pnl.loss {
    background: rgba(255, 59, 48, 0.12);
}

/* Daily Agenda Panel (side-by-side with calendar) */
.agenda-panel {
    border-radius: var(--radius-lg);
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition), border-color var(--transition), transform 0.15s ease;
}



/* Loading bar at top of agenda panel */
.agenda-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 1;
}

.agenda-panel:hover {
    box-shadow: var(--glass-shadow-hover);
    border-color: var(--border);
}

.agenda-panel:hover::before {
    transform: scaleX(1);
}

.agenda-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.agenda-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 10px;
    background: var(--accent);
    border-radius: 2px;
}

.agenda-item {
    display: flex;
    align-items: center;
    padding: 10px 10px;
    margin-bottom: 6px;
    background: var(--bg-main);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}

.agenda-item:hover {
    border-color: var(--border);
    transform: translateX(4px);
}

.agenda-item:last-child {
    margin-bottom: 0;
}

.agenda-date {
    width: 50px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-main);
    font-feature-settings: 'tnum' 1;
}

.agenda-bar {
    flex: 1;
    height: 5px;
    background: var(--bg-panel);
    border-radius: 3px;
    margin: 0 12px;
    overflow: hidden;
}

.agenda-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.agenda-bar-fill.profit {
    background: linear-gradient(90deg, rgba(52, 199, 89, 0.6) 0%, var(--profit) 100%);
}

.agenda-bar-fill.loss {
    background: linear-gradient(90deg, rgba(255, 69, 58, 0.6) 0%, var(--loss) 100%);
}

.agenda-pnl {
    min-width: 75px;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    font-feature-settings: 'tnum' 1;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
}

.agenda-pnl.profit {
    color: var(--profit);
    background: rgba(52, 199, 89, 0.1);
    text-shadow: 0 0 12px rgba(52, 199, 89, 0.4);
}

.agenda-pnl.loss {
    color: var(--loss);
    background: rgba(255, 69, 58, 0.1);
    text-shadow: 0 0 12px rgba(255, 69, 58, 0.4);
}

:root.light .agenda-pnl.profit {
    background: rgba(40, 205, 65, 0.1);
    text-shadow: none;
}

:root.light .agenda-pnl.loss {
    background: rgba(255, 59, 48, 0.1);
    text-shadow: none;
}

/* Agenda values container (P/L + percentage) */
.agenda-values {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 85px;
}

.agenda-pct {
    font-size: 10px;
    font-weight: 600;
    font-feature-settings: 'tnum' 1;
    opacity: 0.9;
}

.agenda-pct.profit {
    color: var(--profit);
}

.agenda-pct.loss {
    color: var(--loss);
}

/* ============================================================================
   Trades Table
   ============================================================================ */
.table-container {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    position: relative;
    background: var(--bg-panel);
    /* Prevent horizontal scroll shift during row expansion */
    scroll-behavior: smooth;
}

/* Standalone tables (not wrapped in chart-panel) - styled like stat-cards */
.table-container.standalone-table {
    animation: none !important;
    opacity: 1 !important;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* Always show scrollbar to prevent layout shift when content changes */
    overflow-x: scroll;
    overflow-y: scroll;
    position: relative;
    /* Prevent scroll position from resetting on content change */
    overscroll-behavior: contain;
}

/* Section titles before standalone tables - no separate animation */
.section-title + .table-container.standalone-table,
.section-title + .standalone-table {
    /* Already handled above */
}

/* For trades page: disable section title animation when followed by standalone table */
.section-title:has(+ .standalone-table),
.section-title:has(+ .table-container.standalone-table) {
    animation: none !important;
    opacity: 1 !important;
}

/* Loading bar at top of table container */
.table-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 10;
}

.table-container:hover::before {
    transform: scaleX(1);
}

.trades-table {
    width: 100%;
    min-width: 1200px; /* Ensure table doesn't compress on mobile - allows horizontal scroll */
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
    border-spacing: 0;
}

.trades-table th {
    text-align: left;
    padding: 14px 16px;
    color: var(--text-sub);
    font-weight: 600;
    background: var(--bg-panel);
    border-bottom: 2px solid var(--border);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
    z-index: 10;
    transition: box-shadow 0.2s ease;
}

/* Match first column header padding with data cells (for expand arrow space) */
.trades-table th:first-child {
    padding-left: 28px;
}

/* Shadow when scrolled */
.trades-table th::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 8px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08), transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.table-container.scrolled .trades-table th::after {
    opacity: 1;
}

/* Sortable column headers */
.trades-table th.sortable {
    cursor: pointer;
    user-select: none;
}

.trades-table th.sortable:hover {
    color: var(--text-main);
    background: var(--bg-panel-dark);
}

.trades-table th.sortable::before {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid transparent;
    border-top-color: currentColor;
    opacity: 0.3;
}

.trades-table th.sortable.asc::before {
    border-top-color: transparent;
    border-bottom-color: var(--accent);
    transform: translateY(-75%);
    opacity: 1;
}

.trades-table th.sortable.desc::before {
    border-top-color: var(--accent);
    transform: translateY(-25%);
    opacity: 1;
}

.trades-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-panel);
    /* Only transition background, not all properties - prevents layout glitches */
    transition: background 0.15s ease;
}

.trades-table tbody tr {
    transition: background 0.15s ease;
    cursor: pointer;
    position: relative;
}

.trades-table tbody tr:hover {
    z-index: 2;
}

.trades-table tbody tr:hover td {
    background: var(--bg-panel-dark);
}

.trades-table tbody tr:hover td:first-child {
    /* Use inset box-shadow instead of border to avoid layout shift */
    box-shadow: inset 3px 0 0 var(--accent);
}

/* Active/pressed state for table rows */
.trades-table tbody tr:active:not(.trade-details-row) {
    background: var(--bg-selected);
}

/* Active/selected row state */
.trades-table tbody tr.selected td {
    background: var(--accent-bg);
    border-bottom-color: var(--accent);
}

.trades-table tbody tr.selected td:first-child {
    /* Use inset box-shadow instead of border to avoid layout shift */
    box-shadow: inset 3px 0 0 var(--accent);
}

/* Profit/Loss row indicators */
.trades-table tbody tr.profit-row:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--profit);
}

.trades-table tbody tr.loss-row:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--loss);
}

.trades-table .mono {
    font-family: var(--font-mono);
    font-size: 12px;
}

/* Cell with copy button - flexbox layout */
.trades-table .cell-with-copy {
    position: relative;
}

.trades-table .cell-with-copy .cell-value {
    display: inline-block;
}

/* Copy to clipboard button */
.copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-left: 8px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.85);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    vertical-align: middle;
}

.trades-table tbody tr:hover .copy-btn {
    opacity: 1;
    transform: scale(1);
}

.copy-btn:hover {
    background: var(--bg-panel-dark);
    border-color: var(--border-subtle);
    color: var(--text-main);
}

.copy-btn:active {
    transform: scale(0.95);
}

/* Copied state - checkmark animation */
.copy-btn.copied {
    color: var(--profit);
    opacity: 1;
    transform: scale(1);
    animation: copySuccess 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.copy-btn.copied svg {
    animation: checkPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes copySuccess {
    0% { transform: scale(0.95); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

@keyframes checkPop {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Mobile: always show copy button */
@media (max-width: 768px) {
    .copy-btn {
        opacity: 0.7;
        transform: scale(1);
    }
}

.trades-table .profit {
    color: var(--profit);
    text-shadow: 0 0 12px rgba(52, 199, 89, 0.4);
}
.trades-table .loss {
    color: var(--loss);
    text-shadow: 0 0 12px rgba(255, 69, 58, 0.4);
}
:root.light .trades-table .profit,
:root.light .trades-table .loss { text-shadow: none; }

.trades-table .type-buy {
    color: var(--teal);
    font-weight: 500;
}

.trades-table .type-sell {
    color: var(--orange);
    font-weight: 500;
}

/* Martingale badge */
.mtg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-lg);
    font-size: 11px;
    font-weight: 600;
    background: var(--purple);
    color: white;
}
.mtg-badge.mtg-2 { background: var(--accent); }
.mtg-badge.mtg-3 { background: var(--teal); }
.mtg-badge.mtg-4 { background: var(--orange); }
.mtg-badge.mtg-5 { background: var(--loss); }

/* Hidden columns */
.trades-table .col-hidden {
    display: none !important;
}

/* Section header with column toggle */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header .section-title {
    margin-bottom: 0;
}

/* Column toggle dropdown */
.column-toggle-wrapper {
    position: relative;
}

.column-toggle-btn {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 8px 12px;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.column-toggle-btn:hover {
    background: var(--bg-panel-dark);
    border-color: var(--border);
    transform: translateY(-1px);
}

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

.column-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 200px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    padding: 6px;
    animation: menuSlideIn 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.column-menu.hidden {
    display: none;
}

@keyframes menuSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.column-menu-header {
    padding: 10px 12px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.column-toggle-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text-main);
    cursor: pointer;
    border-radius: var(--radius-lg);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    margin: 2px 0;
    animation: menuItemCascade 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Staggered cascade for menu items */
.column-toggle-item:nth-child(1) { animation-delay: 0.02s; }
.column-toggle-item:nth-child(2) { animation-delay: 0.04s; }
.column-toggle-item:nth-child(3) { animation-delay: 0.06s; }
.column-toggle-item:nth-child(4) { animation-delay: 0.08s; }
.column-toggle-item:nth-child(5) { animation-delay: 0.10s; }
.column-toggle-item:nth-child(6) { animation-delay: 0.12s; }
.column-toggle-item:nth-child(7) { animation-delay: 0.14s; }
.column-toggle-item:nth-child(8) { animation-delay: 0.16s; }
.column-toggle-item:nth-child(9) { animation-delay: 0.18s; }
.column-toggle-item:nth-child(10) { animation-delay: 0.20s; }
.column-toggle-item:nth-child(n+11) { animation-delay: 0.22s; }

@keyframes menuItemCascade {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.column-toggle-item:hover {
    background: var(--bg-selected);
}

.column-toggle-item:active {
    background: var(--bg-tertiary);
    transform: scale(0.98);
}

.column-toggle-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.column-toggle-item input[type="checkbox"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.column-toggle-item:has(input:disabled) {
    opacity: 0.5;
    cursor: not-allowed;
}

.column-toggle-item:has(input:disabled):hover {
    background: transparent;
}

/* Column menu divider */
.column-menu-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 6px 8px;
}

/* Relative time toggle - uses compound selector for specificity over responsive .column-toggle-item */
.column-toggle-item.relative-time-toggle {
    font-size: 13px;
    color: var(--text-sub);
    border-top: 1px solid var(--border-subtle);
    margin: 4px 0 0;
    padding: 10px 12px;
    border-radius: 0 0 8px 8px;
}

.relative-time-toggle:has(input:checked) {
    color: var(--accent);
}

/* Timestamp cell styling when relative time is shown */
.timestamp-cell .timestamp-value {
    transition: color 0.2s ease;
}

/* ============================================================================
   Trade Row Expansion
   ============================================================================ */

/* Expand indicator on first cell */
.trades-table tbody tr td:first-child {
    position: relative;
    padding-left: 28px;
}

.trades-table tbody tr td:first-child::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid var(--text-dim);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform 0.2s ease, border-color 0.2s ease;
    opacity: 0.5;
}

/* Hide expand indicator on loading/empty rows */
.trades-table tbody tr td[colspan]::before {
    display: none;
}

.trades-table tbody tr td[colspan] {
    padding-left: 16px;
}

.trades-table tbody tr:hover td:first-child::before {
    border-left-color: var(--accent);
    opacity: 1;
}

.trades-table tbody tr.expanded td:first-child::before {
    transform: translateY(-50%) rotate(90deg);
    border-left-color: var(--accent);
    opacity: 1;
}

/* Expanded row indicator */
.trades-table tbody tr.expanded {
    background: var(--bg-panel-dark);
    position: relative;
    z-index: 2;
}

.trades-table tbody tr.expanded td {
    background: var(--bg-panel-dark);
    border-bottom-color: transparent;
}

.trades-table tbody tr.expanded td:first-child {
    /* Use inset box-shadow instead of border to avoid layout shift */
    box-shadow: inset 2px 0 0 var(--accent);
}

/* Prevent hover flicker on expanded parent row */
.trades-table tbody tr.expanded:hover td {
    background: var(--bg-panel-dark);
}

/* Clickable row cursor */
.trades-table tbody tr {
    cursor: pointer;
}

/* Subtle hover hint */
.trades-table tbody tr:not(.trade-details-row):hover {
    background: rgba(10, 132, 255, 0.03);
}

/* Trade details expansion row - uses full selector chain for specificity over .trades-table tbody tr */
.trades-table tbody tr.trade-details-row {
    background: var(--bg-panel);
    cursor: default;
}

.trades-table tbody tr.trade-details-row td {
    padding: 0;
    background: var(--bg-panel);
    border-bottom: 2px solid var(--border);
}

.trades-table tbody tr.trade-details-row td:first-child {
    padding-left: 0;
    box-shadow: none;
}

.trades-table tbody tr.trade-details-row td:first-child::before {
    display: none;
}

.trades-table tbody tr.trade-details-row .trade-details-cell {
    box-shadow: inset 3px 0 0 var(--accent);
}

.trade-details-content {
    padding: 20px 28px;
    animation: detailsExpand 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes detailsExpand {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Trade details header with collapse hint */
.trade-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.trade-details-header h4 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
}

.trade-details-header .symbol-badge {
    background: var(--accent-bg);
    color: var(--accent);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
}

.trade-details-collapse-hint {
    font-size: 11px;
    color: var(--text-sub);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-panel-dark);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid transparent;
}

.trade-details-collapse-hint:hover {
    background: var(--bg-tertiary);
    color: var(--accent);
    border-color: var(--border-subtle);
}

.trade-details-collapse-hint:active {
    transform: scale(0.97);
}

.trade-details-collapse-hint svg {
    width: 14px;
    height: 14px;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.trade-details-collapse-hint:hover svg {
    opacity: 1;
}

/* Trade details grid layout */
.trade-details-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px 24px;
}

@media (max-width: 1400px) {
    .trade-details-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1200px) {
    .trade-details-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    .trade-details-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 600px) {
    .trade-details-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px 16px;
    }

    .trade-details-content {
        padding: 16px;
    }

    .trade-details-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .trade-details-header h4 {
        flex-wrap: wrap;
        gap: 8px;
    }

    .trade-details-collapse-hint {
        justify-content: center;
        width: 100%;
        padding: 10px 16px;
        font-size: 12px;
    }

    .detail-group {
        padding: 8px 0;
    }

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

    .detail-value {
        font-size: 13px;
    }
}

@media (max-width: 400px) {
    .trade-details-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
    }

    .trade-details-content {
        padding: 12px;
    }

    /* Very small screens - status bar ultra compact */
    .status-bar-main {
        padding: 6px 10px;
        gap: 6px;
    }

    .filter-toggle-btn {
        padding: 6px 10px;
    }

    /* Hide all status text on very small screens, show dots only */
    .status-indicators .status-text {
        display: none;
    }

    .status-indicators {
        gap: 4px;
    }

    /* Quick stats more compact */
    .quick-stats {
        gap: 6px;
    }

    .quick-stat {
        padding: 4px 8px;
        gap: 3px;
    }

    .quick-stat-label {
        font-size: 9px;
    }

    .quick-stat-value {
        font-size: 11px;
    }
}

/* Individual detail group styling */
.detail-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
}

.detail-group.highlight {
    background: var(--bg-panel-dark);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    margin: -8px 0;
}

.detail-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.detail-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    word-break: break-word;
}

.detail-value.mono {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: -0.3px;
}

.detail-value.profit {
    color: var(--profit);
}

.detail-value.loss {
    color: var(--loss);
}

.detail-value.small {
    font-size: 12px;
}

/* Prices section */
.detail-prices {
    display: flex;
    gap: 16px;
    margin-top: 4px;
}

.detail-prices .price-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-prices .price-label {
    font-size: 9px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.detail-note {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.5;
    background: var(--bg-panel-dark);
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin-left: -4px;
    margin-right: -4px;
}

.detail-note .detail-label {
    display: inline;
    margin-right: 8px;
    color: var(--accent);
}

/* Direction badges in expanded view */
.direction-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.direction-badge svg {
    width: 12px;
    height: 12px;
}

.direction-badge.buy {
    background: var(--profit-bg);
    color: var(--profit);
}

.direction-badge.sell {
    background: var(--loss-bg);
    color: var(--loss);
}

.volume-text {
    font-size: 12px;
    color: var(--text-sub);
    font-weight: 500;
    margin-left: 8px;
}

/* Generic badges */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.badge:hover {
    transform: scale(1.02);
}

.badge-profit {
    background: var(--profit-bg);
    color: var(--profit);
    box-shadow: 0 0 0 1px rgba(52, 199, 89, 0.2);
}

.badge-loss {
    background: var(--loss-bg);
    color: var(--loss);
    box-shadow: 0 0 0 1px rgba(255, 69, 58, 0.2);
}

.badge-neutral {
    background: var(--bg-tertiary);
    color: var(--text-sub);
    box-shadow: 0 0 0 1px var(--border-subtle);
}

.badge-accent {
    background: var(--accent-bg);
    color: var(--accent);
    box-shadow: 0 0 0 1px rgba(10, 132, 255, 0.2);
}

.badge-warning {
    background: var(--orange-bg);
    color: var(--orange);
    box-shadow: 0 0 0 1px rgba(255, 159, 10, 0.2);
}

/* Small badge variant */
.badge-sm {
    padding: 2px 6px;
    font-size: 10px;
}

/* Badge with dot indicator */
.badge-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    padding: 12px 16px;
    background: var(--bg-panel);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}

.pagination button {
    padding: 8px 12px;
    min-width: 40px;
    font-size: 13px;
    font-weight: 500;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-main);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.pagination button:hover:not(:disabled):not(.active) {
    background: var(--bg-selected);
    border-color: var(--border);
    transform: translateY(-1px);
}

.pagination button:active:not(:disabled):not(.active) {
    transform: translateY(0) scale(0.97);
}

.pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: transparent;
}

.pagination button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.pagination button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(10, 132, 255, 0.3);
}

.pagination button.active:hover {
    background: var(--accent-hover);
    cursor: default;
    transform: none;
}

/* Previous/Next buttons with icons */
.pagination button.prev,
.pagination button.next {
    padding: 8px 10px;
    min-width: auto;
}

.pagination button.prev svg,
.pagination button.next svg {
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}

.pagination button.prev:hover:not(:disabled) svg {
    transform: translateX(-2px);
}

.pagination button.next:hover:not(:disabled) svg {
    transform: translateX(2px);
}

.pagination .page-ellipsis {
    color: var(--text-dim);
    font-size: 14px;
    padding: 0 4px;
    user-select: none;
    letter-spacing: 2px;
}

.pagination .page-info {
    color: var(--text-sub);
    font-size: 12px;
    padding: 0 12px;
    font-weight: 500;
}

/* Pagination divider */
.pagination .divider {
    width: 1px;
    height: 20px;
    background: var(--border-subtle);
    margin: 0 8px;
}

/* ============================================================================
   Trades Table - Mobile Responsive
   ============================================================================ */

/* Tablet: Reduce table min-width for less scrolling */
@media (max-width: 1024px) {
    .trades-table {
        min-width: 1000px;
    }
}

/* Mobile: Full table with horizontal scroll */
@media (max-width: 768px) {
    .table-container {
        margin: 0 -16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
        overflow-x: auto;
        overflow-y: auto;
        max-height: 60vh;
        max-height: 60dvh; /* Dynamic viewport for mobile address bar */
        -webkit-overflow-scrolling: touch;
    }

    .trades-table {
        font-size: 11px;
        min-width: 900px; /* Force full table width for horizontal scroll */
    }

    .trades-table th,
    .trades-table td {
        padding: 8px 6px;
        white-space: nowrap;
    }

    .trades-table th {
        font-size: 10px;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .pagination {
        flex-wrap: wrap;
        gap: 12px;
    }

    .pagination button {
        flex: 1;
        min-width: 100px;
    }
}

/* Very small screens: Even more compact but still horizontal scroll */
@media (max-width: 500px) {
    .table-container.standalone-table {
        margin: 0 -16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .trades-table {
        font-size: 10px;
        min-width: 800px;
    }

    .trades-table th,
    .trades-table td {
        padding: 6px 4px;
    }

    .trades-table th {
        font-size: 10px;
    }
}

/* Very small screens: Compact pagination */
@media (max-width: 500px) {
    .pagination {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 16px;
        padding: 0 12px;
    }

    .pagination button {
        flex: 1 1 auto;
        min-width: 70px;
        padding: 10px 12px;
        font-size: 12px;
    }

    .pagination .page-info {
        flex: 0 0 100%;
        text-align: center;
        order: -1;
        font-size: 12px;
        padding: 0;
        margin-bottom: 4px;
    }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
    .trades-table tbody tr {
        min-height: 48px;
    }

    .pagination button {
        min-height: 44px;
        padding: 12px 16px;
    }

    .status-refresh-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================================================================
   Stats Page
   ============================================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: start; /* Prevent collapsed cards from stretching to match sibling height */
}

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

.stat-card {
    border-radius: var(--radius-lg);
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition), border-color var(--transition), transform 0.15s ease;
}



/* Loading bar at top of stat cards */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 1;
}

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

.stat-card:hover::before {
    transform: scaleX(1);
}

.stat-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

.stat-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.stat-card h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 8px;
    margin: 0 -8px;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.stat-row:hover {
    background: var(--bg-panel-dark);
}

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

.stat-label {
    color: var(--text-sub);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Optional indicator dot for stat labels */
.stat-label::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-dim);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.stat-row:hover .stat-label::before {
    opacity: 1;
}

.stat-value {
    font-size: 14px;
    font-weight: 600;
    font-feature-settings: 'tnum' 1;
    transition: transform var(--transition-fast);
}

.stat-row:hover .stat-value {
    transform: translateX(-2px);
}

/* Stat row with inline sparkline */
.stat-row.has-sparkline {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    align-items: center;
    padding: 10px 8px;
}

.stat-row.has-sparkline .stat-label {
    flex: 0 0 auto;
    min-width: 90px;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Inline sparkline - same mask approach as KPI sparklines */
.stat-sparkline,
.stat-sparkline-wrapper {
    flex: 1 1 80px;
    min-width: 70px;
    max-width: 200px;
    height: 32px !important;
    min-height: 32px;
    opacity: 0.75;
    transition: opacity var(--transition-fast), filter var(--transition-fast);
    display: block;
    /* Edge fade mask - matches KPI sparklines for smooth dot visibility */
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.stat-sparkline-wrapper .stat-sparkline {
    width: 100% !important;
    height: 100% !important;
    flex: none;
    min-width: unset;
    max-width: none;
    mask-image: none;
    -webkit-mask-image: none;
    opacity: 1;
}

.stat-row:hover .stat-sparkline,
.stat-row:hover .stat-sparkline-wrapper {
    opacity: 1;
    filter: brightness(1.15);
}

.stat-row.has-sparkline .stat-value {
    flex: 0 0 auto;
    min-width: 85px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Positive/Negative value colors in stat cards */
.stat-value.positive,
.stat-value.profit {
    color: var(--profit);
}

.stat-value.negative,
.stat-value.loss {
    color: var(--loss);
}

.stat-value.neutral {
    color: var(--text-main);
}

.stat-value.warning {
    color: var(--orange);
}

/* Stat card header indicator */
.stat-card h3 {
    display: flex;
    align-items: center;
}

.stat-card h3::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    border-radius: 2px;
    margin-right: 10px;
    background: var(--accent);
    flex-shrink: 0;
}

/* Color-coded stat card headers by content type */
.stat-card[data-type="risk"] h3::before {
    background: var(--orange);
}

.stat-card[data-type="performance"] h3::before,
.stat-card[data-type="profit"] h3::before {
    background: var(--profit);
}

.stat-card[data-type="loss"] h3::before,
.stat-card[data-type="drawdown"] h3::before {
    background: var(--loss);
}

.stat-card[data-type="time"] h3::before {
    background: var(--purple);
}

.stat-card[data-type="symbol"] h3::before,
.stat-card[data-type="breakdown"] h3::before {
    background: var(--teal);
}

.stat-card[data-type="martingale"] h3::before {
    background: linear-gradient(180deg, var(--orange) 0%, var(--loss) 100%);
}

/* Note: .stat-value.profit/loss styles defined above in Instance Cards section */

/* ============================================================================
   Collapsible Stat Cards
   ============================================================================ */
.stat-card.collapsible h3 {
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color var(--transition-fast);
}

.stat-card.collapsible h3:hover {
    color: var(--accent);
}

.stat-card.collapsible h3::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--text-sub);
    margin-left: auto;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s;
    flex-shrink: 0;
}

.stat-card.collapsible h3:hover::after {
    border-top-color: var(--accent);
}

.stat-card.collapsible.collapsed h3::after {
    transform: rotate(-90deg);
}

.stat-card.collapsible .stat-card-content {
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
    max-height: 1000px;
    opacity: 1;
}

.stat-card.collapsible.collapsed .stat-card-content {
    max-height: 0;
    opacity: 0;
}

.stat-card.collapsible.collapsed {
    padding-bottom: 16px;
}

.stat-card.collapsible.collapsed h3 {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* ============================================================================
   Loading & Empty States - Refined
   ============================================================================ */
.loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    color: var(--text-sub);
    gap: 16px;
    animation: fadeIn 0.3s ease;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    box-shadow: 0 0 12px rgba(10, 132, 255, 0.15);
}

.loading span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-sub);
    opacity: 0.8;
}

/* Keyframes spin/fadeIn defined at top of file - no duplicate needed */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    color: var(--text-sub);
    text-align: center;
    animation: emptyStateIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}

/* Subtle background pattern */
.empty-state::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 30%,
        var(--bg-tertiary) 0%,
        transparent 70%
    );
    opacity: 0.5;
    pointer-events: none;
}

@keyframes emptyStateIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 20px;
    opacity: 0.5;
    color: var(--text-dim);
    position: relative;
    animation: emptyIconFloat 3s ease-in-out infinite;
}

@keyframes emptyIconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
}

.empty-state-icon svg {
    width: 64px;
    height: 64px;
    stroke-width: 1.2;
}

/* Icon with circle background */
.empty-state-icon.with-bg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.empty-state-icon.with-bg svg {
    width: 40px;
    height: 40px;
    opacity: 0.6;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 8px;
    position: relative;
}

.empty-state-desc {
    font-size: 14px;
    max-width: 340px;
    line-height: 1.6;
    color: var(--text-sub);
    position: relative;
}

.empty-state-action {
    margin-top: 24px;
    position: relative;
}

.empty-state-action .btn {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
}

/* Compact empty state variant */
.empty-state.compact {
    padding: 40px 20px;
}

.empty-state.compact .empty-state-icon {
    margin-bottom: 12px;
}

.empty-state.compact .empty-state-icon svg {
    width: 48px;
    height: 48px;
}

.empty-state.compact .empty-state-title {
    font-size: 15px;
}

.empty-state.compact .empty-state-desc {
    font-size: 13px;
}

/* Inline empty state (for smaller containers) */
.empty-state.inline {
    padding: 24px 16px;
    flex-direction: row;
    gap: 16px;
    text-align: left;
}

.empty-state.inline::before {
    display: none;
}

.empty-state.inline .empty-state-icon {
    margin-bottom: 0;
    animation: none;
}

.empty-state.inline .empty-state-icon svg {
    width: 32px;
    height: 32px;
}

.empty-state.inline .empty-state-content {
    flex: 1;
}

.empty-state.inline .empty-state-title {
    font-size: 14px;
    margin-bottom: 4px;
}

.empty-state.inline .empty-state-desc {
    font-size: 13px;
}

/* ============================================================================
   Inactivity Modal - Refined Design
   ============================================================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    animation: modalFadeIn 0.25s ease forwards;
}

.modal-overlay.hidden {
    display: none;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 32px 36px;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
    transform: scale(0.95) translateY(10px);
    opacity: 0;
    animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s forwards;
}

@media (max-width: 400px) {
    .modal-content {
        padding: 24px 20px;
        width: 95%;
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    background: var(--orange-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
}

.modal-icon svg {
    width: 24px;
    height: 24px;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 8px;
    letter-spacing: -0.3px;
}

.modal-message {
    font-size: 13px;
    color: var(--text-sub);
    margin-bottom: 16px;
    line-height: 1.5;
}

.modal-countdown {
    font-size: 52px;
    font-weight: 700;
    color: var(--accent);
    font-feature-settings: 'tnum' 1;
    line-height: 1;
    margin-bottom: 4px;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.modal-countdown.urgent {
    color: var(--loss);
    animation: countdownPulse 0.8s ease-in-out infinite;
}

@keyframes countdownPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.03); opacity: 0.9; }
}

.modal-submessage {
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.modal-actions .btn {
    min-width: 110px;
    padding: 10px 16px;
    font-size: 13px;
}

.modal-actions .btn-primary {
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.25);
}

.modal-actions .btn-primary:hover {
    box-shadow: 0 6px 16px rgba(10, 132, 255, 0.35);
}

/* Modal responsive - small phones */
@media (max-width: 480px) {
    .modal-content {
        width: calc(100% - 24px);
        max-width: 100%;
        padding: 24px 20px;
    }

    .modal-countdown {
        font-size: 42px;
    }

    .modal-actions {
        flex-direction: column;
        gap: 8px;
    }

    .modal-actions .btn {
        min-width: unset;
        width: 100%;
    }

    .note-modal-content {
        max-width: calc(100% - 24px);
        width: calc(100% - 24px);
        padding: 20px 16px;
    }
}

/* ============================================================================
   Trade Notes Modal & Button
   ============================================================================ */

.note-modal-content {
    max-width: 480px;
    text-align: left;
    padding: 24px;
}

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

.note-modal-content .modal-title {
    margin: 0;
    font-size: 16px;
}

.modal-close-btn {
    background: transparent;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius);
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.modal-close-btn:hover {
    color: var(--text-main);
    background: var(--bg-hover);
}

.note-modal-content .modal-body {
    margin-bottom: 20px;
}

.note-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-main);
    resize: vertical;
    transition: border-color var(--transition-fast);
}

.note-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.note-textarea::placeholder {
    color: var(--text-dim);
}

.note-char-count {
    font-size: 11px;
    color: var(--text-dim);
    text-align: right;
    margin-top: 6px;
}

.note-modal-content .modal-actions {
    justify-content: flex-end;
}

.btn-danger {
    background: var(--loss-bg);
    color: var(--loss);
    border: 1px solid var(--loss);
}

.btn-danger:hover {
    background: var(--loss);
    color: white;
}

/* Note button in trades table */
.note-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--text-dim);
    cursor: pointer;
    font-size: 12px;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    max-width: 150px;
    text-align: left;
}

.note-btn:hover {
    background: var(--bg-hover);
    color: var(--text-sub);
    border-color: var(--border-subtle);
}

.note-btn.note-filled {
    color: var(--accent);
    background: var(--accent-bg);
    border-color: var(--accent);
}

.note-btn.note-filled:hover {
    background: var(--accent);
    color: white;
}

.note-btn svg {
    flex-shrink: 0;
}

.note-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

/* Notes column styling */
.col-notes {
    min-width: 100px;
    max-width: 180px;
}

/* ============================================================================
   Data Management / Backup & Restore
   ============================================================================ */

.data-management-card {
    display: flex;
    flex-direction: column;
}

.data-management-card h3 {
    margin-bottom: 8px;
}

.stat-description {
    font-size: 13px;
    color: var(--text-sub);
    margin-bottom: 16px;
    line-height: 1.4;
}

.backup-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.backup-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
}

.restore-btn {
    cursor: pointer;
}

.backup-status {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.backup-status.success {
    background: var(--profit-bg);
    color: var(--profit);
    border: 1px solid var(--profit);
}

.backup-status.error {
    background: var(--loss-bg);
    color: var(--loss);
    border: 1px solid var(--loss);
}

.backup-status.hidden {
    display: none;
}

/* ============================================================================
   Responsive Design
   ============================================================================ */

/* Tablet breakpoint */
@media (max-width: 1024px) {
    .nav {
        padding: 0 16px;
    }

    .main-content {
        padding: 20px 16px;
    }

    .chart-panel {
        padding: 20px;
    }

    .chart-container.large {
        height: 300px;
    }

    /* Compact instances: auto-fit at tablet, cards stretch to fill */
    .instances-grid.compact .instance-group-cards {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 6px;
    }
}

/* Mobile breakpoint */
@media (max-width: 768px) {
    /* Navigation - single-line compact layout */
    .nav {
        height: 54px;
        flex-direction: row;
        padding: 0 14px;
        gap: 10px;
        justify-content: space-between;
        align-items: center;
    }

    .nav-container {
        border-bottom: 1px solid var(--border-subtle);
    }

    .nav-container.scrolled {
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
    }

    .nav-brand {
        flex: 0 0 auto;
        min-width: auto;
        gap: 8px;
    }

    .nav-logo {
        width: 30px;
        height: 30px;
        font-size: 12px;
        border-radius: var(--radius);
        box-shadow: 0 2px 6px var(--accent-bg);
    }

    .nav-title {
        display: none; /* Hide title on mobile, logo is enough */
    }

    .nav-account {
        font-size: 10px;
        padding: 3px 7px;
        margin-left: 4px;
        border-radius: var(--radius-sm);
        /* Prevent overflow on narrow screens */
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Nav links become a dropdown on mobile */
    .nav-links {
        flex: 1;
        justify-content: center;
        gap: 0;
        background: transparent;
        padding: 0;
        border: none;
    }

    /* Collapsed state - the page selector button */
    .nav-link {
        display: none; /* Hide all by default */
    }

    .nav-link.active {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 9px 32px 9px 14px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.02em;
        border-radius: var(--radius);
        background: var(--bg-panel-dark);
        border: 1px solid var(--border-subtle);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
        position: relative;
        min-width: 110px;
        transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
        color: var(--accent);
    }

    .nav-link.active:hover {
        background: var(--bg-panel);
        border-color: var(--border);
    }

    .nav-link.active:active {
        transform: scale(0.97);
        background: var(--bg-selected);
    }

    /* Hide logout in nav-links on mobile when not expanded */
    .nav-link-logout {
        display: none !important;
    }

    /* Hide desktop logout button on mobile */
    .nav-logout-desktop {
        display: none;
    }

    /* Dropdown chevron on active link - override desktop underline */
    .nav-link.active::after {
        display: block;
        content: '';
        position: absolute;
        right: 11px;
        top: 50%;
        left: auto;
        bottom: auto;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        background: none;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 5px solid var(--text-sub);
        border-radius: 0;
        transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease;
        opacity: 1;
    }

    /* Hide hover underline on mobile */
    .nav-link:hover::after {
        opacity: 0;
    }

    .nav.expanded .nav-link.active::after {
        transform: translateY(-50%) rotate(180deg);
        border-top-color: var(--accent);
        opacity: 1;
    }

    /* Expanded dropdown menu */
    .nav.expanded .nav-links {
        position: absolute;
        top: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        flex-direction: column;
        background: var(--bg-panel);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-lg);
        padding: 6px;
        z-index: 100;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.08);
        gap: 2px;
        min-width: 170px;
        animation: mobileMenuSlide 0.2s cubic-bezier(0.22, 1, 0.36, 1);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    @keyframes mobileMenuSlide {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(-6px) scale(0.97);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0) scale(1);
        }
    }

    /* All menu items in expanded state */
    .nav.expanded .nav-link {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        padding: 12px 16px;
        border-radius: var(--radius-lg);
        font-size: 15px;
        font-weight: 500;
        background: transparent;
        border: none;
        box-shadow: none;
        min-width: unset;
        min-height: 48px;
        transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease, transform 0.12s ease;
        color: var(--text-main);
    }

    .nav.expanded .nav-link:hover {
        background: var(--bg-selected);
    }

    .nav.expanded .nav-link:active {
        transform: scale(0.98);
        background: var(--bg-tertiary);
    }

    /* Active page in expanded menu */
    .nav.expanded .nav-link.active {
        background: var(--accent-bg);
        color: var(--accent);
        font-weight: 600;
    }

    .nav.expanded .nav-link.active::after {
        display: none;
    }

    /* Logout link in expanded menu - with colored border */
    .nav.expanded .nav-link-logout {
        display: flex !important;
        color: var(--loss);
        margin-top: 6px;
        padding: 12px 16px;
        border-top: 1px solid var(--border-subtle);
        border-radius: 0 0 10px 10px;
        background: transparent;
        transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
        position: relative;
        min-height: 48px;
    }

    .nav.expanded .nav-link-logout::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 8px;
        right: 8px;
        height: 1px;
        background: var(--border-subtle);
    }

    .nav.expanded .nav-link-logout:hover {
        background: var(--loss-bg);
        color: var(--loss);
    }

    .nav.expanded .nav-link-logout:active {
        background: var(--loss-bg);
        color: var(--loss);
        transform: scale(0.98);
    }

    .nav-actions {
        flex: 0 0 auto;
        min-width: auto;
        gap: 6px;
        display: flex;
        align-items: center;
    }

    /* Show refresh button on mobile but compact */
    .nav-actions .btn-icon {
        width: 36px;
        height: 36px;
        border-radius: var(--radius);
    }

    .nav-actions .btn-icon:first-child:not(.nav-hamburger) {
        display: flex; /* Show refresh button */
    }

    .nav-actions .btn-icon:nth-child(2) {
        display: none; /* Hide theme toggle */
    }

    /* Desktop logout button hidden on mobile (now in dropdown) */
    .nav-actions .btn-ghost.nav-logout-desktop {
        display: none;
    }

    /* Status bar mobile - compact layout with scroll snap */
    .status-bar-main {
        padding: 12px 16px;
        gap: 12px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 56px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }

    .status-bar-main::-webkit-scrollbar {
        display: none;
    }

    .status-bar-main > * {
        scroll-snap-align: start;
    }

    /* Filter toggle button - compact on mobile with accessible touch target */
    .filter-toggle-btn {
        padding: 10px 14px;
        font-size: 12px;
        min-height: 44px;
        min-width: 44px;
        flex-shrink: 0;
        border-radius: var(--radius);
    }

    .filter-toggle-btn .filter-text {
        display: none;
    }

    .filter-toggle-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Filter badge position on mobile */
    .filter-badge {
        position: absolute;
        top: -4px;
        right: -4px;
        font-size: 9px;
        padding: 2px 5px;
        min-width: 16px;
    }

    .filter-toggle-btn {
        position: relative;
    }

    /* Quick stats - horizontal scroll on mobile */
    .quick-stats {
        gap: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-shrink: 1;
        min-width: 0;
    }

    .quick-stats::-webkit-scrollbar {
        display: none;
    }

    .quick-stat {
        flex-shrink: 0;
        gap: 4px;
    }

    .quick-stat-label {
        font-size: 10px;
    }

    .quick-stat-value {
        font-size: 12px;
    }

    .quick-stat:not(:last-child)::after {
        display: none;
    }

    /* Status indicators compact on mobile */
    .status-indicators {
        flex-shrink: 0;
        gap: 6px;
        margin-left: auto;
    }

    .status-item {
        font-size: 11px;
        gap: 4px;
    }

    /* On mobile, show status text only for primary indicator */
    .status-item .status-text {
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Hide timestamp but keep trade count visible */
    .status-item-timestamp {
        display: none;
    }

    /* Live trades indicator - show dot only on mobile */
    #live-trades .status-text {
        display: none;
    }

    /* Collapsible filters panel - mobile optimized */
    .filters-panel {
        padding: 0;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }

    .filters-panel.expanded {
        padding: 16px;
        max-height: 650px;
        background: var(--bg-panel);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        border-top: 1px solid var(--border-subtle);
    }

    .filters-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .filter-group {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .filter-group label {
        font-size: 11px;
        margin-bottom: 6px;
        opacity: 0.9;
        font-weight: 500;
        color: var(--text-sub);
    }

    .filter-group select {
        width: 100%;
        padding: 14px 36px 14px 14px;
        font-size: 15px;
        min-height: 52px;
        border-radius: var(--radius-lg);
        -webkit-tap-highlight-color: transparent;
        background-color: var(--bg-main);
        border: 1px solid var(--border-subtle);
        transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    }

    .filter-group select:active {
        background: var(--bg-selected);
        border-color: var(--accent);
    }

    /* Date range filter on mobile - full width row */
    .filter-group.date-range {
        grid-column: 1 / -1;
        justify-content: center;
        flex-direction: row;
        gap: 10px;
    }

    .filter-group.date-range input[type="date"] {
        flex: 1;
        min-width: 0;
        padding: 14px 12px;
        font-size: 15px;
        min-height: 52px;
        border-radius: var(--radius-lg);
        -webkit-tap-highlight-color: transparent;
        background-color: var(--bg-main);
        border: 1px solid var(--border-subtle);
        transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    }

    .filter-group.date-range input[type="date"]:active {
        background: var(--bg-selected);
        transform: scale(0.97);
        border-color: var(--accent);
    }

    /* Extra filter groups for trades page - mobile optimized */
    .filter-group.quick-date {
        grid-column: 1 / -1;
    }

    .filter-group.quick-date select {
        width: 100%;
        min-height: 44px;
        font-size: 13px;
    }

    /* Filter actions (Clear All + Done) - side by side on mobile */
    .filter-group.filter-actions {
        grid-column: 1 / -1;
        flex-direction: row;
        gap: 10px;
        margin-left: 0;
        margin-top: 8px;
    }

    .filter-group.filter-actions .btn {
        flex: 1;
        justify-content: center;
        min-height: 52px;
        font-size: 15px;
        font-weight: 600;
        border-radius: var(--radius-lg);
        -webkit-tap-highlight-color: transparent;
        background: var(--bg-main);
        border: 1px solid var(--border-subtle);
    }

    .filter-group.filter-actions .btn:active {
        transform: scale(0.97);
        background: var(--bg-selected);
    }

    /* Done button - visible on mobile */
    .filter-done-btn {
        display: flex !important;
        background: var(--accent) !important;
        color: #fff !important;
        border-color: var(--accent) !important;
    }

    .filter-done-btn:active {
        background: var(--accent-hover) !important;
    }

    /* Filter backdrop overlay on mobile */
    .filter-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 90;
        -webkit-tap-highlight-color: transparent;
    }

    .filter-backdrop.visible {
        display: block;
    }

    .filter-group.pnl-range,
    .filter-group.duration-range {
        grid-column: span 1;
    }

    .filter-group.pnl-range input[type="number"],
    .filter-group.duration-range select {
        width: 100%;
        min-height: 48px;
        font-size: 14px;
        padding: 12px 10px;
        border-radius: var(--radius-lg);
        background-color: var(--bg-main);
        border: 1px solid var(--border-subtle);
    }

    .filter-group.search-group {
        grid-column: 1 / -1;
    }

    .filter-group.search-group input[type="text"] {
        width: 100%;
        min-height: 52px;
        font-size: 15px;
        padding: 14px 40px 14px 14px;
        border-radius: var(--radius-lg);
        background-color: var(--bg-main);
        border: 1px solid var(--border-subtle);
    }

    /* Search clear button touch-friendly */
    .search-clear-btn {
        width: 36px;
        height: 36px;
        right: 4px;
    }

    /* Main content - reduced padding */
    .main-content {
        padding: 12px;
    }

    /* Section titles - smaller on mobile */
    .section-title {
        font-size: 11px;
        margin-bottom: 12px;
        letter-spacing: 0.8px;
    }

    .section-title::before {
        width: 2px;
        height: 12px;
    }

    /* KPI cards - optimized for mobile */
    .kpi-grid {
        gap: 10px;
        margin-bottom: 16px;
    }

    .kpi-card {
        padding: 14px 16px;
    }

    .kpi-label {
        font-size: 11px;
    }

    .kpi-value {
        font-size: 22px;
    }

    .kpi-change {
        font-size: 12px;
    }

    /* Charts - reduced height on mobile */
    .charts-row {
        gap: 16px;
        margin-bottom: 16px;
    }

    .chart-panel {
        padding: 16px;
    }

    .chart-header {
        margin-bottom: 14px;
        padding-bottom: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .chart-title {
        font-size: 12px;
    }

    .chart-legend {
        gap: 12px;
        flex-wrap: wrap;
    }

    .legend-item {
        font-size: 11px;
    }

    .chart-container {
        height: 200px;
    }

    .chart-container.large {
        height: 240px;
    }

    .chart-container.small {
        height: 160px;
    }

    /* Calendar - compact mobile layout */
    .calendar-panel {
        max-width: none;
        padding: 14px;
        border-radius: var(--radius);
    }

    .calendar-nav {
        max-width: none;
        padding-bottom: 10px;
        margin-bottom: 12px;
    }

    .calendar-nav .month-label {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.2px;
    }

    .calendar-nav button {
        padding: 10px 14px;
        font-size: 16px;
        min-width: 44px;
        min-height: 44px;
        border-radius: var(--radius);
        background: var(--bg-main);
        border: 1px solid var(--border-subtle);
    }

    .calendar-nav button:active {
        transform: scale(0.92);
        background: var(--bg-tertiary);
    }

    .calendar-grid {
        max-width: none;
        gap: 4px;
    }

    .calendar-header {
        font-size: 10px;
        padding: 6px 2px 8px;
        font-weight: 700;
        color: var(--text-dim);
    }

    /* Mobile calendar day - tap to reveal P/L */
    .calendar-day {
        border-radius: var(--radius-sm);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        min-height: 42px;
        padding: 6px 4px;
        transition: transform 0.15s ease, background 0.15s ease;
    }

    /* Disable hover effects on mobile - they conflict with tap */
    .calendar-day:hover {
        transform: none;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .calendar-day .date {
        font-size: 13px;
        font-weight: 700;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    /* Hide P/L and % by default on mobile - show only color indicator */
    .calendar-day .pnl-indicator,
    .calendar-day .pnl-pct {
        display: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    /* Show P/L and % when tapped (flipped state) */
    .calendar-day.flipped .date {
        display: none;
    }

    .calendar-day.flipped .pnl-indicator {
        display: flex;
        font-size: 11px;
        font-weight: 700;
        padding: 3px 5px;
        border-radius: var(--radius-sm);
        animation: flipIn 0.2s ease-out;
    }

    .calendar-day.flipped .pnl-pct {
        display: flex;
        font-size: 10px;
        font-weight: 600;
        animation: flipIn 0.25s ease-out;
    }

    @keyframes flipIn {
        from {
            opacity: 0;
            transform: scale(0.8);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Active tap feedback */
    .calendar-day:active:not(.empty) {
        transform: scale(0.92);
        background: var(--bg-tertiary);
    }

    /* Today indicator - more prominent on mobile */
    .calendar-day.today {
        border-width: 2px;
        box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.2);
    }

    /* Weekly summary and weekday totals - compact on mobile */
    .calendar-week-summary .week-pnl,
    .calendar-weekday-total .weekday-pnl,
    .calendar-month-total .month-pnl { font-size: 8px; }

    .calendar-week-summary .week-pct,
    .calendar-weekday-total .weekday-pct { font-size: 7px; }

    .calendar-weekday-total .weekday-label { font-size: 7px; }

    /* Agenda panel - full width on mobile */
    .agenda-panel {
        padding: 14px;
        min-width: auto;
        border-radius: var(--radius);
    }

    .agenda-title {
        font-size: 11px;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-subtle);
    }

    .agenda-item {
        padding: 12px 10px;
        margin-bottom: 8px;
        border-radius: var(--radius);
        -webkit-tap-highlight-color: transparent;
        transition: transform 0.15s ease, background 0.15s ease;
    }

    .agenda-item:active {
        transform: scale(0.98);
        background: var(--bg-tertiary);
    }

    .agenda-date {
        width: 48px;
        font-size: 12px;
        font-weight: 700;
    }

    .agenda-bar {
        margin: 0 10px;
        height: 6px;
        border-radius: 3px;
    }

    .agenda-pnl {
        min-width: 70px;
        font-size: 12px;
        font-weight: 700;
        padding: 4px 8px;
        border-radius: var(--radius-sm);
    }

    .agenda-values {
        min-width: 80px;
        gap: 1px;
    }

    .agenda-pct {
        font-size: 10px;
    }

    /* Instance cards - 2-column layout on mobile (dashboard default) */
    .instances-grid {
        gap: 8px;
        margin-bottom: 16px;
    }

    .instance-group-cards {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Dashboard: Always 2 per row - don't grow beyond 50% */
    .instance-card {
        padding: 10px;
        flex: 0 0 calc(50% - 4px);
        width: calc(50% - 4px);
        max-width: calc(50% - 4px);
    }

    .instance-group-header {
        padding: 0 1px;
    }
    .instance-group-symbol {
        font-size: 11px;
    }
    .instance-group-pnl {
        font-size: 10px;
    }

    /* Settings/Stats page - Always 4 per row */
    .page-settings .instance-card,
    .page-stats .instance-card,
    .settings-instances-grid .instance-card {
        padding: 6px;
        flex: 0 0 calc(25% - 6px);
        width: calc(25% - 6px);
        max-width: calc(25% - 6px);
    }

    .page-settings .instance-symbol,
    .page-stats .instance-symbol,
    .settings-instances-grid .instance-symbol {
        font-size: 10px;
    }

    .page-settings .instance-tf,
    .page-stats .instance-tf,
    .settings-instances-grid .instance-tf {
        font-size: 9px;
        padding: 1px 3px;
    }

    .page-settings .instance-stats,
    .page-stats .instance-stats,
    .settings-instances-grid .instance-stats {
        font-size: 9px;
    }

    .page-settings .instance-chart,
    .page-stats .instance-chart,
    .settings-instances-grid .instance-chart {
        height: 25px;
    }

    .page-settings .instance-header,
    .page-stats .instance-header,
    .settings-instances-grid .instance-header {
        margin-bottom: 4px;
    }

    .instance-header {
        margin-bottom: 8px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .instance-badges {
        width: 100%;
        justify-content: flex-start;
    }

    .instance-symbol {
        font-size: 13px;
        font-weight: 700;
    }

    .instance-tf {
        font-size: 9px;
        padding: 1px 4px;
    }

    .instance-status {
        font-size: 9px;
        padding: 1px 4px;
    }

    .instance-chart {
        height: 50px;
        margin-bottom: 8px;
    }

    .instance-stats {
        font-size: 10px;
        gap: 4px;
    }

    .stats-row {
        gap: 6px;
    }

    .stat-label {
        min-width: 30px;
        font-size: 10px;
    }

    .stat-value {
        font-size: 10px;
    }

    .today-row {
        padding-top: 4px;
    }

    /* Tables - horizontal scroll with touch */
    .table-container {
        -webkit-overflow-scrolling: touch;
        /* Scroll shadow hints for horizontal scroll */
        background:
            linear-gradient(to right, var(--bg-panel) 30%, transparent),
            linear-gradient(to left, var(--bg-panel) 30%, transparent),
            linear-gradient(to right, rgba(0,0,0,0.15), transparent 20px),
            linear-gradient(to left, rgba(0,0,0,0.15), transparent 20px);
        background-position: left center, right center, left center, right center;
        background-repeat: no-repeat;
        background-size: 40px 100%, 40px 100%, 20px 100%, 20px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    .trades-table {
        font-size: 12px;
        min-width: 700px; /* Ensure table doesn't collapse too small */
    }

    .trades-table th,
    .trades-table td {
        padding: 12px 14px;
        white-space: nowrap;
    }

    .trades-table th {
        font-size: 10px;
        position: sticky;
        top: 0;
        z-index: 5;
    }

    .trades-table .mono {
        font-size: 11px;
    }

    /* First column sticky on mobile for context */
    .trades-table th:first-child,
    .trades-table td:first-child {
        position: sticky;
        left: 0;
        z-index: 3;
        background: var(--bg-panel);
    }

    .trades-table th:first-child {
        z-index: 6;
    }

    /* Shadow for sticky column */
    .trades-table td:first-child::after {
        content: '';
        position: absolute;
        top: 0;
        right: -8px;
        bottom: 0;
        width: 8px;
        background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);
        pointer-events: none;
    }

    /* Stats page - optimized for mobile */
    .stats-grid {
        gap: 16px;
    }

    .stat-card {
        padding: 14px 12px;
    }

    .stat-card-content {
        overflow: visible;
    }

    .stat-card h3 {
        font-size: 13px;
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    .stat-row {
        padding: 8px 0;
    }

    .stat-label {
        font-size: 12px;
    }

    .stat-value {
        font-size: 13px;
    }

    /* Stat rows with sparklines - keep inline on mobile */
    .stat-row.has-sparkline {
        flex-wrap: nowrap;
        gap: 6px;
        padding: 8px 0;
        margin: 0;
    }

    .stat-row.has-sparkline .stat-label {
        flex: 0 0 auto;
        min-width: auto;
        max-width: none;
        font-size: 11px;
        white-space: nowrap;
    }

    .stat-sparkline,
    .stat-sparkline-wrapper {
        flex: 1 1 30px;
        min-width: 30px;
        max-width: 90px;
        height: 22px !important;
        min-height: 22px;
    }

    .stat-row.has-sparkline .stat-value {
        flex: 0 0 auto;
        min-width: auto;
        text-align: right;
        white-space: nowrap;
        font-size: 11px;
        padding-right: 2px;
    }

    /* Pagination - compact on mobile */
    .pagination {
        margin-top: 16px;
        gap: 6px;
    }

    .pagination button {
        padding: 6px 10px;
        font-size: 12px;
    }

    .pagination .page-info {
        font-size: 12px;
        padding: 0 8px;
    }

    /* Modal - full width on mobile */
    .modal-content {
        padding: 24px 20px;
        max-width: none;
        width: calc(100% - 32px);
        margin: 16px;
    }

    .modal-title {
        font-size: 16px;
    }

    .modal-countdown {
        font-size: 42px;
    }

    .modal-actions {
        flex-direction: column;
        gap: 8px;
    }

    .modal-actions .btn {
        width: 100%;
    }

    /* DEPRECATED: Login responsive - now in auth.css */
    .login-container {
        padding: 16px;
    }

    .login-overlay {
        padding: 16px;
        padding-top: max(20px, env(safe-area-inset-top, 20px));
        padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
        /* Keep centered on mobile - don't use flex-start */
        align-items: center;
        justify-content: center;
        /* Allow scrolling if content is taller than viewport */
        overflow-y: auto;
    }

    .login-box {
        padding: 32px 24px;
        width: calc(100% - 32px);
        max-width: 400px;
        margin: auto;
        box-sizing: border-box;
        box-shadow:
            0 16px 50px rgba(0, 0, 0, 0.5),
            0 8px 25px rgba(0, 0, 0, 0.3),
            0 0 80px rgba(10, 132, 255, 0.25);
    }

    .login-logo {
        width: 56px;
        height: 56px;
        font-size: 24px;
        border-radius: var(--radius-xl);
        margin-bottom: 16px;
    }

    .login-box h1 {
        font-size: 24px;
    }

    .login-box .subtitle {
        font-size: 14px;
        margin-bottom: 24px;
    }

    .login-form {
        gap: 14px;
    }

    .input-group label {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .input-group .input-icon {
        left: 12px;
        bottom: 13px;
        width: 16px;
        height: 16px;
    }

    .login-box input[type="text"],
    .login-box input[type="password"] {
        padding: 12px 42px 12px 38px;
        font-size: 16px; /* Prevent zoom on iOS */
        border-radius: var(--radius-lg);
    }

    .password-toggle {
        right: 10px;
        bottom: 10px;
        padding: 6px;
    }

    .login-box button[type="submit"] {
        padding: 14px;
        font-size: 16px;
        border-radius: var(--radius-lg);
        margin-top: 4px;
    }

    .login-hint {
        margin-top: 20px;
        font-size: 12px;
    }

    .login-error {
        padding: 10px 14px;
        font-size: 13px;
        margin-bottom: 12px;
    }
}

/* Small mobile breakpoint */
@media (max-width: 480px) {
    .nav-brand {
        gap: 8px;
    }

    .nav-logo {
        width: 32px;
        height: 32px;
        font-size: 16px;
        border-radius: var(--radius);
    }

    .nav-title {
        font-size: 15px;
    }

    .nav-link {
        padding: 6px 10px;
        font-size: 12px;
    }

    .kpi-value {
        font-size: 20px;
    }

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

    .chart-container {
        height: 180px;
    }

    .chart-container.large {
        height: 200px;
    }

    .calendar-day {
        border-radius: var(--radius-sm);
    }

    .calendar-day .date {
        font-size: 10px;
    }

    .instance-chart {
        height: 60px;
    }

    .trades-table th,
    .trades-table td {
        padding: 8px 10px;
    }

    .trades-table {
        font-size: 11px;
        min-width: 900px; /* Reduced from 1200px for less horizontal scrolling */
    }

    .trades-table th {
        font-size: 9px;
    }

    /* Scroll hint: fade on right edge of table */
    .table-container::after {
        content: '';
        position: sticky;
        right: 0;
        top: 0;
        bottom: 0;
        width: 24px;
        background: linear-gradient(to right, transparent, var(--bg-panel));
        pointer-events: none;
        z-index: 5;
    }

    /* Mobile trade expansion improvements */
    .trade-details-content {
        padding: 14px 16px;
    }

    .trade-details-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .trade-details-header h4 {
        flex-wrap: wrap;
        gap: 6px;
    }

    .trade-details-collapse-hint {
        justify-content: center;
        width: 100%;
        padding: 12px 16px;
        font-size: 13px;
        font-weight: 500;
        margin-top: 4px;
    }

    .trade-details-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px 12px;
    }

    .detail-group {
        padding: 6px 0;
    }

    .detail-group.highlight {
        padding: 6px 10px;
        margin: -6px 0;
    }

    .detail-label {
        font-size: 9px;
    }

    .detail-value {
        font-size: 13px;
    }

    .detail-value.mono {
        font-size: 11px;
    }

    .direction-badge {
        padding: 2px 8px;
        font-size: 10px;
    }

    .volume-text {
        font-size: 11px;
    }

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

    /* Status bar - stack on very small screens */
    .status-bar-main {
        padding: 8px 12px;
        gap: 8px;
        flex-wrap: wrap;
        min-height: auto;
    }

    /* Filter toggle more compact */
    .filter-toggle-btn {
        padding: 8px 12px;
        min-height: 40px;
        min-width: 40px;
    }

    .filter-toggle-btn svg {
        width: 16px;
        height: 16px;
    }

    /* Quick stats wrap to next line if needed */
    .quick-stats {
        gap: 8px;
        flex: 1 1 100%;
        order: 3;
        justify-content: flex-start;
        padding-top: 4px;
        border-top: 1px solid var(--border-subtle);
        margin-top: 4px;
    }

    .quick-stat {
        padding: 4px 8px;
        gap: 4px;
    }

    .quick-stat-label {
        font-size: 9px;
    }

    .quick-stat-value {
        font-size: 11px;
    }

    /* Status indicators stay on first row */
    .status-indicators {
        flex: 1;
        justify-content: flex-end;
        gap: 4px;
    }

    .status-item {
        font-size: 10px;
        gap: 3px;
    }

    .status-item .status-text {
        max-width: 55px;
    }

    .status-dot {
        width: 6px;
        height: 6px;
    }
}

/* ============================================================================
   Mobile Touch & Accessibility Improvements
   ============================================================================ */

/* Prevent zoom on input focus for iOS */
@media (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Touch action improvements */
.btn,
.nav-link,
.calendar-day,
.agenda-item,
.instance-card,
.pagination button,
.trades-table tbody tr {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Trade rows touch feedback */
.trades-table tbody tr:not(.trade-details-row):active {
    background: rgba(10, 132, 255, 0.08);
}

/* Ensure minimum tap target size (44px) for accessibility */
@media (max-width: 768px) {
    .btn,
    .nav-link,
    .pagination button {
        min-height: 44px;
        min-width: 44px;
    }

    .btn-icon {
        min-height: 44px;
        min-width: 44px;
    }

    .calendar-nav button {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Mobile chart improvements */
@media (max-width: 768px) {
    /* Ensure charts respond to touch properly */
    .chart-container canvas {
        touch-action: pan-y pinch-zoom;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Better chart panel spacing on mobile */
    .chart-panel {
        border-radius: var(--radius);
        margin-bottom: 12px;
    }

    /* Improve chart header on mobile */
    .chart-header {
        padding: 12px 12px 8px;
    }

    .chart-title {
        font-size: 13px;
        font-weight: 600;
    }

    /* Better legend positioning on mobile */
    .chart-legend {
        flex-wrap: wrap;
        gap: 8px 16px;
        padding: 8px 12px;
        font-size: 11px;
    }

    .chart-legend.bottom {
        justify-content: center;
    }

    .legend-dot {
        width: 8px;
        height: 8px;
    }

    /* Stats grid improvements for mobile charts */
    .stats-grid {
        gap: 12px;
    }

    .stat-card {
        padding: 16px;
    }

    .stat-card h3 {
        font-size: 12px;
        margin-bottom: 12px;
    }

    /* Better chart container sizing */
    .stat-card .chart-container.small {
        height: 140px;
        margin-top: 8px;
    }

    /* Improve sparkline visibility on mobile */
    .kpi-sparkline {
        height: 32px;
        margin-top: 8px;
    }

    /* Touch-friendly chart tooltips */
    .chart-panel canvas:active {
        cursor: grabbing;
    }
}

/* Extra small screens (under 480px) */
@media (max-width: 480px) {
    /* Dashboard: Always 2 per row on extra small screens */
    .instance-card {
        padding: 8px;
        flex: 0 0 calc(50% - 4px);
        width: calc(50% - 4px);
        max-width: calc(50% - 4px);
    }

    .instance-symbol {
        font-size: 11px;
    }

    .instance-tf {
        font-size: 9px;
        padding: 2px 4px;
    }

    .instance-stats {
        font-size: 10px;
    }

    .instance-chart {
        height: 40px;
    }

    /* Settings/Stats page - 3 per row on extra small screens for readability */
    .page-settings .instance-card,
    .page-stats .instance-card,
    .settings-instances-grid .instance-card {
        padding: 4px;
        flex: 0 0 calc(33.33% - 3px);
        width: calc(33.33% - 3px);
        max-width: calc(33.33% - 3px);
    }

    .page-settings .instance-symbol,
    .page-stats .instance-symbol,
    .settings-instances-grid .instance-symbol {
        font-size: 9px;
    }

    .page-settings .instance-tf,
    .page-stats .instance-tf,
    .settings-instances-grid .instance-tf {
        font-size: 9px;
        padding: 1px 2px;
    }

    .page-settings .instance-chart,
    .page-stats .instance-chart,
    .settings-instances-grid .instance-chart {
        height: 20px;
    }

    .chart-container {
        height: 160px;
    }

    .chart-container.large {
        height: 180px;
    }

    .chart-container.small {
        height: 120px;
    }

    /* Stack charts row on very small screens */
    .charts-row {
        gap: 12px;
    }

    .charts-row .chart-panel {
        min-height: auto;
    }

    /* Smaller sparklines on tiny screens */
    .kpi-sparkline {
        height: 28px;
    }

    /* Stat rows with sparklines - keep inline on very small screens */
    .stat-row.has-sparkline {
        gap: 4px;
        padding: 6px 0;
        margin: 0;
    }

    .stat-row.has-sparkline .stat-label {
        flex: 0 0 auto;
        min-width: auto;
        max-width: none;
        font-size: 10px;
        white-space: nowrap;
    }

    .stat-row.has-sparkline .stat-value {
        flex: 0 0 auto;
        font-size: 10px;
        min-width: auto;
        padding-right: 2px;
    }

    .stat-sparkline,
    .stat-sparkline-wrapper {
        flex: 1 1 20px;
        min-width: 20px;
        max-width: 70px;
        height: 18px !important;
        min-height: 18px;
    }

    /* Reduce chart padding */
    .chart-panel {
        padding: 12px;
    }

    /* Extra small login improvements */
    .login-overlay {
        padding: 12px;
        padding-top: max(16px, env(safe-area-inset-top, 16px));
        padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
        /* Ensure centering is maintained */
        align-items: center;
        justify-content: center;
    }

    .login-box {
        padding: 28px 20px;
        width: calc(100% - 24px);
        border-radius: var(--radius-xl);
    }

    .login-logo {
        width: 48px;
        height: 48px;
        font-size: 20px;
        border-radius: var(--radius-lg);
        margin-bottom: 14px;
    }

    .login-box h1 {
        font-size: 22px;
        margin-bottom: 6px;
    }

    .login-box .subtitle {
        font-size: 13px;
        margin-bottom: 20px;
    }

    .login-form {
        gap: 12px;
    }

    .input-group label {
        font-size: 11px;
    }

    .login-box input[type="text"],
    .login-box input[type="password"] {
        padding: 11px 40px 11px 36px;
    }

    .login-box button[type="submit"] {
        padding: 13px;
    }

    .login-hint {
        font-size: 11px;
        margin-top: 16px;
    }

    /* Scale down floating orbs on mobile */
    .floating-orb.orb-1 {
        width: 200px;
        height: 200px;
        filter: blur(40px);
    }

    .floating-orb.orb-2 {
        width: 180px;
        height: 180px;
        filter: blur(40px);
    }

    .floating-orb.orb-3 {
        width: 120px;
        height: 120px;
        filter: blur(30px);
    }

    /* Better stats readability */
    .instance-stats {
        font-size: 11px;
    }

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

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

    /* Full width buttons on very small screens */
    .btn {
        width: 100%;
        justify-content: center;
    }

    .btn-group {
        flex-direction: column;
        width: 100%;
    }

    /* Pagination improvements */
    .pagination {
        gap: 4px;
    }

    .pagination button {
        min-width: 36px;
        padding: 8px 10px;
        font-size: 12px;
    }

    /* Modal improvements for small screens */
    .modal-content {
        margin: 8px;
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px); /* Dynamic viewport for mobile */
        border-radius: var(--radius-lg);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* KPI cards - larger touch target */
    .kpi-card {
        padding: 14px;
        min-height: 85px;
    }

    .kpi-value {
        font-size: 20px;
    }

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

    /* Form inputs - better touch targets */
    .form-group input,
    .form-group select {
        padding: 12px 14px;
        font-size: 16px; /* Prevents iOS zoom on focus */
        min-height: 48px;
    }

    .form-group label {
        font-size: 12px;
        margin-bottom: 6px;
    }

    /* Settings grid - single column on mobile */
    .settings-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* Template controls - stack on mobile */
    .template-controls {
        flex-wrap: wrap;
        gap: 10px;
    }

    .template-select {
        width: 100%;
        min-width: auto;
        padding: 10px 14px;
        font-size: 16px;
    }

    /* API config - stack on mobile */
    .api-config-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .api-key-display {
        width: 100%;
        flex-wrap: wrap;
    }

    .api-key-display code {
        font-size: 12px;
        word-break: break-all;
        flex: 1;
    }

    /* Target options - larger touch targets */
    .target-option {
        padding: 16px;
        min-height: 60px;
    }

    .target-option input[type="radio"] {
        width: 20px;
        height: 20px;
    }

    /* Info banner - better mobile layout */
    .info-banner {
        padding: 14px 16px;
        flex-direction: column;
        gap: 10px;
    }

    /* Select dropdowns - better mobile sizing */
    select {
        min-height: 44px;
    }

    /* Stat rows - better spacing */
    .stat-row {
        padding: 10px 0;
        gap: 12px;
    }

    .stat-label {
        font-size: 12px;
        flex: 1;
    }

    .stat-value {
        font-size: 14px;
        text-align: right;
    }

    /* Settings section - better mobile spacing */
    .settings-section {
        padding: 16px;
    }

    .settings-section-header {
        flex-wrap: wrap;
        gap: 10px;
    }

    .settings-section-header h3 {
        font-size: 14px;
    }

    /* Settings actions - full width button */
    .settings-actions {
        margin-top: 20px;
        padding-top: 16px;
    }

    .settings-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Note modal - mobile improvements */
    .note-modal-content {
        max-width: 100%;
        padding: 20px 16px;
    }

    .note-textarea {
        min-height: 150px;
        font-size: 16px; /* Prevents iOS zoom */
        padding: 14px;
    }

    .note-modal-content .modal-actions {
        flex-direction: column;
        gap: 10px;
    }

    .note-modal-content .modal-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    /* Note button in trade details - larger touch target */
    .note-btn {
        padding: 10px 12px;
        font-size: 13px;
        min-height: 44px;
    }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
    .nav-container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .main-content {
        padding-left: max(24px, env(safe-area-inset-left));
        padding-right: max(24px, env(safe-area-inset-right));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }

    .filters-bar {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    .login-container {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
}

/* ============================================================================
   Utilities
   ============================================================================ */
.text-profit { color: var(--profit) !important; }
.text-loss { color: var(--loss) !important; }
.text-accent { color: var(--accent) !important; }
.text-sub { color: var(--text-sub) !important; }

.bg-profit { background: var(--profit-bg) !important; }
.bg-loss { background: var(--loss-bg) !important; }
.bg-accent { background: var(--accent-bg) !important; }

.hidden { display: none !important; }
.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ============================================================================
   Page Transition Animations
   ============================================================================ */

/* Keyframes pageReveal/spin/fadeIn defined at top of file - no duplicate needed */

/* Scale in animation for theme icons */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.7) rotate(-15deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Apply page reveal to main content areas */
.main-content,
.login-container {
    animation: pageReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Navigation should be stable - no animation during transitions */
.nav-container {
    animation: none;
    opacity: 1;
}

/* Filters bar with slight delay */
.filters-bar {
    opacity: 0;
    animation: pageReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

/* KPI cards with staggered reveal */
.kpi-card {
    opacity: 0;
    animation: pageReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.kpi-card:nth-child(1) { animation-delay: 0.15s; }
.kpi-card:nth-child(2) { animation-delay: 0.2s; }
.kpi-card:nth-child(3) { animation-delay: 0.25s; }
.kpi-card:nth-child(4) { animation-delay: 0.3s; }

/* Chart panels - no animation to prevent double-animation with tables inside */
.chart-panel {
    opacity: 1;
    animation: none;
}

/* Calendar panel animation */
.calendar-panel {
    opacity: 0;
    animation: pageReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

/* Instance cards with staggered animation */
.instance-card {
    opacity: 0;
    animation: pageReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.instance-card:nth-child(1) { animation-delay: 0.35s; }
.instance-card:nth-child(2) { animation-delay: 0.4s; }
.instance-card:nth-child(3) { animation-delay: 0.45s; }
.instance-card:nth-child(4) { animation-delay: 0.5s; }
.instance-card:nth-child(5) { animation-delay: 0.55s; }
.instance-card:nth-child(6) { animation-delay: 0.6s; }
.instance-card:nth-child(n+7) { animation-delay: 0.65s; }

/* Section titles */
.section-title {
    opacity: 0;
    animation: pageReveal 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

/* ============================================================================
   Disable nested animations - prevent double animations on child elements
   When a parent panel already has an animation, children should not animate
   ============================================================================ */

/* Tables inside panels should not have separate animation - use !important to override all */
.chart-panel .table-container,
.chart-panel .trades-table,
.chart-panel .trades-table *,
.chart-panel .trades-table th,
.chart-panel .trades-table td,
.chart-panel .trades-table tbody,
.chart-panel .trades-table tbody tr,
.chart-panel .trades-table tbody tr td,
.calendar-panel .table-container,
.calendar-panel .table-container *,
.agenda-panel .table-container,
.agenda-panel .table-container *,
.table-container,
.table-container * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Pagination inside panels should not animate */
.chart-panel .pagination,
.chart-panel .pagination button {
    animation: none;
    opacity: 1;
}

/* Login box special animation */
.login-box {
    opacity: 0;
    animation: pageReveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

/* ============================================================================
   Refresh Button Spin Animation
   ============================================================================ */

/* Spinning state for refresh button icon */
.btn-primary.spinning svg,
.btn.spinning svg {
    animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Button hover lift effect */
.btn-primary:active,
.btn:active {
    transform: scale(0.98);
}

/* ============================================================================
   Theme Toggle Animation
   ============================================================================ */

/* Theme icon container for smooth transitions */
.btn-icon {
    position: relative;
    overflow: hidden;
}

/* Theme icons with smooth transitions - matching refresh button speed (0.8s) */
.btn-icon svg {
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s ease;
}

/* ============================================================================
   Theme Transition - Smooth color changes
   ============================================================================ */

/* Smooth transitions for theme-dependent elements */
body,
.nav,
.nav-container,
.filters-bar,
.chart-panel,
.kpi-card,
.calendar-panel,
.agenda-panel,
.open-positions-panel,
.table-container,
.trades-table th,
.trades-table td,
.login-box,
.login-container,
.agenda-item,
.instance-card,
.stat-card,
.glass-card,
.trades-stat-card,
.ticket-card,
.page-header-card,
.settings-instance-card,
.pagination button,
.filter-group select,
.input-group input {
    transition: background-color 0.4s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease,
                color 0.3s ease;
}

/* Text color transitions */
.kpi-value,
.kpi-label,
.kpi-change,
.chart-title,
.nav-title,
.nav-link,
.calendar-day .date,
.instance-symbol,
.instance-tf {
    transition: color 0.3s ease;
}

/* ============================================================================
   Skeleton Loading States
   ============================================================================ */

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-panel) 0%,
        var(--bg-tertiary) 50%,
        var(--bg-panel) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s ease-in-out infinite;
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}

/* Shimmer overlay effect */
.skeleton::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 50%,
        transparent 100%
    );
    animation: shimmerSlide 2.2s ease-in-out infinite;
}

/* Light mode skeleton adjustments */
:root.light .skeleton::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 50%,
        transparent 100%
    );
}

@keyframes shimmerSlide {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Staggered skeleton animations */
.skeleton:nth-child(1) { animation-delay: 0s; }
.skeleton:nth-child(2) { animation-delay: 0.1s; }
.skeleton:nth-child(3) { animation-delay: 0.2s; }
.skeleton:nth-child(4) { animation-delay: 0.3s; }
.skeleton:nth-child(5) { animation-delay: 0.4s; }
.skeleton:nth-child(6) { animation-delay: 0.5s; }

/* Skeleton KPI card */
.skeleton-kpi {
    height: 120px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}

/* Skeleton chart */
.skeleton-chart {
    height: 300px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}

/* Skeleton instance card */
.skeleton-instance {
    height: 180px;
    min-width: 200px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}

/* Skeleton text lines */
.skeleton-text {
    height: 16px;
    margin-bottom: 8px;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-text.medium {
    width: 80%;
}

/* Skeleton table row */
.skeleton-row {
    height: 48px;
    margin-bottom: 4px;
    border-radius: var(--radius);
}

/* Skeleton avatar/icon */
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.skeleton-avatar.sm {
    width: 32px;
    height: 32px;
}

.skeleton-avatar.lg {
    width: 56px;
    height: 56px;
}

/* Skeleton button */
.skeleton-btn {
    height: 36px;
    width: 100px;
    border-radius: var(--radius);
}

/* Skeleton with accent color hint */
.skeleton.skeleton-accent::before {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(10, 132, 255, 0.08) 50%,
        transparent 100%
    );
}

/* Inline loading dots */
.loading-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.loading-dots span {
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    animation: loadingDotBounce 1.4s ease-in-out infinite both;
}

.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes loadingDotBounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Pulse loading animation */
.loading-pulse {
    animation: loadingPulse 2s ease-in-out infinite;
}

@keyframes loadingPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Spinner variants */
.spinner-sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.spinner-lg {
    width: 48px;
    height: 48px;
    border-width: 4px;
}

/* Data refresh indicator */
.data-refreshing {
    position: relative;
}

.data-refreshing::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--purple), var(--accent));
    background-size: 200% 100%;
    animation: dataRefreshBar 1.5s ease-in-out infinite;
}

@keyframes dataRefreshBar {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Loading container */
.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-sub);
    gap: 16px;
}

.loading-container .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Instance grid skeleton */
.instances-grid.loading {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

/* Chart container loading state */
.chart-container.loading canvas {
    opacity: 0;
}

.chart-container.loading::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        var(--bg-panel) 0%,
        var(--bg-panel-dark) 50%,
        var(--bg-panel) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius);
}

/* Fade in when loaded */
.chart-container canvas,
.kpi-card,
.instance-card {
    transition: opacity 0.3s ease;
}

.chart-container.loaded canvas {
    opacity: 1;
}

/* KPI card loading state */
.kpi-card.loading .kpi-value,
.kpi-card.loading .kpi-change {
    position: relative;
    color: transparent;
    background: linear-gradient(
        90deg,
        var(--bg-panel-dark) 0%,
        var(--bg-selected) 50%,
        var(--bg-panel-dark) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.kpi-card.loading .kpi-sparkline {
    opacity: 0.3;
}

/* Network status indicator */
.network-status {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    font-size: 13px;
    color: var(--text-main);
}

.network-status.visible {
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
    .network-status {
        bottom: max(20px, env(safe-area-inset-bottom, 20px));
        max-width: calc(100% - 32px);
        font-size: 12px;
        padding: 10px 14px;
    }
}

.network-status.offline {
    border-color: var(--loss);
}

.network-status.offline .network-status-dot {
    background: var(--loss);
}

.network-status.reconnecting .network-status-dot {
    background: var(--yellow);
    animation: pulse 1s infinite;
}

.network-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--profit);
    flex-shrink: 0;
}

.network-status-text {
    font-weight: 500;
}

.network-status-retry {
    padding: 4px 10px;
    font-size: 11px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-left: 8px;
    transition: background var(--transition);
}

.network-status-retry:hover {
    background: var(--accent-hover);
}

/* Chart error display */
.chart-error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: var(--bg-panel);
    border-radius: var(--radius);
    z-index: 10;
}

.chart-error-icon {
    color: var(--text-dim);
    opacity: 0.6;
}

.chart-error-text {
    color: var(--text-sub);
    font-size: 13px;
}

.chart-error-retry {
    padding: 6px 14px;
    font-size: 12px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition);
}

.chart-error-retry:hover {
    background: var(--accent-hover);
}

/* ============================================================================
   Pull-to-Refresh (Mobile)
   ============================================================================ */

.pull-to-refresh {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border-subtle);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 9998;
    pointer-events: none;
}

.pull-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-subtle);
    border-top-color: var(--accent);
    border-radius: 50%;
}

.pull-to-refresh.ready .pull-spinner,
.pull-to-refresh.refreshing .pull-spinner {
    animation: spin 0.8s linear infinite;
}

.pull-text {
    font-size: 13px;
    color: var(--text-sub);
    font-weight: 500;
}

.pull-to-refresh.ready .pull-text {
    color: var(--accent);
}

/* ============================================================================
   Tooltip Styles
   ============================================================================ */

.tooltip {
    position: absolute;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-main);
    pointer-events: none;
    z-index: 1000;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: tooltipFadeIn 0.15s ease;
}

.tooltip::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--bg-elevated);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transform: rotate(45deg);
    bottom: -5px;
    left: 50%;
    margin-left: -4px;
}

.tooltip.tooltip-top::after {
    top: -5px;
    bottom: auto;
    border-right: none;
    border-bottom: none;
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================================================
   Scroll to Top Button
   ============================================================================ */

.scroll-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
    z-index: 100;
    pointer-events: none;
}

.scroll-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll-to-top:hover {
    background: var(--bg-panel-dark);
    border-color: var(--border);
}

.scroll-to-top:active {
    transform: scale(0.95);
}

.scroll-to-top svg {
    transition: transform 0.2s ease;
}

.scroll-to-top:hover svg {
    transform: translateY(-2px);
}

/* Mobile positioning */
@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 80px; /* Above mobile nav if any */
        right: 16px;
    }
}

/* ============================================================================
   Accessibility - Screen Reader Only & Keyboard Help
   ============================================================================ */

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* KPI cards should be focusable for keyboard navigation */
.kpi-card {
    cursor: pointer;
}

.kpi-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--accent-bg);
}

/* Table rows should be focusable */
.trades-table tbody tr:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 0;
    background: var(--bg-panel-dark);
    position: relative;
    z-index: 1;
}

.trades-table tbody tr:focus-visible td {
    background: var(--bg-panel-dark);
}

/* Keyboard help overlay */
.keyboard-help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    animation: fadeIn 0.2s ease;
}

.keyboard-help-overlay.hidden {
    display: none;
}

.keyboard-help-content {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 32px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    animation: dialogScaleIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dialogScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.keyboard-help-content h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 24px;
    padding-right: 40px;
}

.keyboard-help-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-panel-dark);
    color: var(--text-sub);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius);
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.keyboard-help-close:hover {
    background: var(--bg-selected);
    color: var(--text-main);
}

.keyboard-help-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.keyboard-help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
}

.shortcut-group h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}

.shortcut {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-main);
    margin-bottom: 8px;
}

kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    background: var(--bg-panel-dark);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-main);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

:root.light kbd {
    background: var(--bg-main);
    border-color: var(--border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ============================================================================
   Form Groups - Standardized form input styling
   ============================================================================ */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 11px;
    color: var(--text-sub);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.form-group input,
.form-group select {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text-main);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.form-group select {
    appearance: none;
    padding-right: 36px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23989899' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.form-group input:hover,
.form-group select:hover {
    border-color: var(--border);
    background: var(--bg-panel);
}

.form-group input:focus,
.form-group select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
    outline: none;
    background: var(--bg-input);
}

.form-group input[type="number"] {
    font-family: var(--font-mono);
}

/* Form validation states */
.form-group input:invalid:not(:placeholder-shown),
.form-group input.invalid {
    border-color: var(--loss);
}

.form-group input:invalid:not(:placeholder-shown):focus,
.form-group input.invalid:focus {
    box-shadow: 0 0 0 3px var(--loss-bg);
}

/* Valid inputs use accent color, not green (matches theme) */
.form-group input:valid:not(:placeholder-shown),
.form-group input.valid {
    border-color: var(--border);
}

.form-group input:valid:not(:placeholder-shown):focus,
.form-group input.valid:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

/* Form help text */
.form-help {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
}

/* Form error message */
.form-error {
    font-size: 11px;
    color: var(--loss);
    margin-top: 4px;
    display: none;
}

.form-group.has-error .form-error {
    display: block;
}

.form-group.has-error input {
    border-color: var(--loss);
}

/* Form success indicator */
.form-success {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--profit);
    opacity: 0;
    transform: translateY(-5px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.form-success.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Input shake animation for errors */
@keyframes inputShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.form-group.shake input {
    animation: inputShake 0.4s ease;
}

/* Export Toast Notification */
.export-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-size: 13px;
}

.export-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.export-toast .toast-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.export-toast.info .toast-icon {
    background: var(--accent-bg);
    color: var(--accent);
}

.export-toast.success .toast-icon {
    background: var(--profit-bg);
    color: var(--profit);
}

.export-toast.error .toast-icon {
    background: var(--loss-bg);
    color: var(--loss);
}

.export-toast .toast-message {
    color: var(--text-main);
    font-weight: 500;
}

/* ============================================================================
   Settings Page Specific Styles
   ============================================================================ */
.settings-layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 24px;
}

@media (max-width: 1100px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }
}

.settings-column-wide {
    min-width: 0;
}

.settings-section {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-subtle);
    animation: cardRevealUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.settings-section:nth-of-type(1) { animation-delay: 0s; }
.settings-section:nth-of-type(2) { animation-delay: 0.06s; }
.settings-section:nth-of-type(3) { animation-delay: 0.12s; }
.settings-section:nth-of-type(4) { animation-delay: 0.18s; }
.settings-section:nth-of-type(5) { animation-delay: 0.24s; }
.settings-section:nth-of-type(n+6) { animation-delay: 0.3s; }

.settings-section:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.settings-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 16px;
}

.settings-section-header svg {
    color: var(--accent);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.settings-actions {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
}

/* Template Controls */
.template-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.template-select {
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 6px 12px;
    font-size: 13px;
    color: var(--text-main);
    min-width: 160px;
}

/* API Config styling */
.api-config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.api-label {
    font-size: 12px;
    color: var(--text-sub);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.api-key-display {
    display: flex;
    align-items: center;
    gap: 8px;
}

.api-key-display code {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--accent);
    background: var(--bg-input);
    padding: 8px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
}

.api-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-dim);
}

.api-hint code {
    font-size: 11px;
    background: var(--bg-input);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* Info Banner */
.info-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: var(--accent-bg);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    color: var(--text-main);
    font-size: 13px;
}

.info-banner svg {
    flex-shrink: 0;
    color: var(--accent);
    margin-top: 2px;
}

.info-content code {
    font-size: 11px;
    background: var(--bg-panel);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}

/* Instances Card styling */
.instances-card {
    max-height: 600px;
    overflow: hidden;
}

.instances-list {
    max-height: 560px;
    overflow-y: auto;
}

.instance-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

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

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

.instance-symbol {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-main);
}

.badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--radius-lg);
    text-transform: uppercase;
    font-weight: 600;
}

.badge-online {
    background: var(--profit-bg);
    color: var(--profit);
}

.badge-offline {
    background: var(--bg-input);
    color: var(--text-dim);
}

.instance-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-sub);
    margin-bottom: 6px;
}

.instance-tf {
    background: var(--bg-input);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
}

.instance-pnl.profit { color: var(--profit); }
.instance-pnl.loss { color: var(--loss); }

.instance-footer {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-dim);
}

.instance-version {
    font-family: var(--font-mono);
}

/* Empty State */
/* Empty state styles - see comprehensive definitions above (~line 8228) */

.empty-state-sm {
    padding: 20px;
    text-align: center;
    color: var(--text-tertiary, var(--text-dim));
    font-size: 12px;
}

/* Modal styling */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease, backdrop-filter 0.25s ease, -webkit-backdrop-filter 0.25s ease;
    padding: 20px;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--bg-panel);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px); /* Dynamic viewport for mobile */
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.2);
}

.modal-overlay.active .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Modal close animation */
.modal-overlay.closing {
    animation: modalFadeOut 0.2s ease forwards;
}

.modal-overlay.closing .modal-content {
    animation: modalSlideOut 0.2s ease forwards;
}

@keyframes modalFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes modalSlideOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
}

/* Modal shake animation (for errors/invalid input) */
.modal-content.shake {
    animation: modalShake 0.4s ease;
}

@keyframes modalShake {
    0%, 100% { transform: translateX(0) scale(1); }
    20%, 60% { transform: translateX(-8px) scale(1); }
    40%, 80% { transform: translateX(8px) scale(1); }
}

.modal-sm {
    max-width: 360px;
}

.modal-lg {
    max-width: 640px;
}

/* ============================================================================
   Share Modal Styles
   ============================================================================ */
.share-modal-content {
    max-width: 720px;
    width: 95%;
    padding: 24px;
}

.share-modal-content .modal-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

.share-modal-content .modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-elevated);
    border-radius: 50%;
    color: var(--text-sub);
    font-size: 20px;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-modal-content .modal-close:hover {
    background: var(--loss-bg);
    color: var(--loss);
}

.share-preview {
    background: var(--bg-main);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 20px;
    border: 1px solid var(--border-subtle);
}

.share-preview canvas {
    width: 100%;
    height: auto;
    display: block;
}

.share-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 16px;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}

.share-stat {
    text-align: center;
}

.share-stat .label {
    font-size: 11px;
    color: var(--text-sub);
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.share-stat .value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
}

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

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

.share-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.share-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    border: none;
}

.share-option:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.share-option:active {
    transform: translateY(0);
}

.share-option.twitter {
    background: #000000;
    color: white;
}

.share-option.twitter:hover {
    background: #1a1a1a;
}

.share-option.facebook {
    background: #1877f2;
    color: white;
}

.share-option.facebook:hover {
    background: #166fe5;
}

.share-option.copy {
    background: var(--bg-panel);
    color: var(--text-main);
    border: 1px solid var(--border);
}

.share-option.copy:hover {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

.share-option.download {
    background: var(--profit);
    color: white;
}

.share-option.download:hover {
    background: rgb(40, 180, 70);
}

@media (max-width: 600px) {
    .share-modal-content {
        padding: 20px;
    }

    .share-buttons {
        grid-template-columns: 1fr;
    }

    .share-stats {
        gap: 16px;
        padding: 12px;
    }

    .share-stat .value {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .share-stats {
        gap: 12px;
        padding: 10px;
    }
    .share-stat .value {
        font-size: 16px;
    }
    .share-stat .label {
        font-size: 10px;
    }
}

/* ============================================================================
   Withdrawal Reminder Modal Styles
   ============================================================================ */
.withdrawal-modal {
    max-width: 440px;
    text-align: center;
    padding: 32px 24px;
}

.withdrawal-modal .modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-elevated);
    border-radius: 50%;
    color: var(--text-sub);
    font-size: 20px;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.withdrawal-modal .modal-close:hover {
    background: var(--loss-bg);
    color: var(--loss);
}

.withdrawal-modal .profit-icon {
    width: 80px;
    height: 80px;
    background: var(--profit-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.withdrawal-modal .profit-icon svg {
    color: var(--profit);
    width: 40px;
    height: 40px;
}

.withdrawal-modal .modal-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-main);
}

.withdrawal-modal .modal-message {
    font-size: 15px;
    color: var(--text-sub);
    line-height: 1.6;
    margin-bottom: 24px;
}

.withdrawal-modal .profit-amount {
    font-size: 28px;
    font-weight: 700;
    color: var(--profit);
}

.withdrawal-modal .withdrawal-stats {
    display: flex;
    gap: 24px;
    justify-content: center;
    background: var(--bg-elevated);
    padding: 16px 24px;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.withdrawal-modal .withdrawal-stats .stat {
    text-align: center;
}

.withdrawal-modal .withdrawal-stats .label {
    font-size: 11px;
    color: var(--text-sub);
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.withdrawal-modal .withdrawal-stats .value {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-main);
}

.withdrawal-modal .withdrawal-stats .value.profit {
    color: var(--profit);
}

.withdrawal-modal .modal-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.withdrawal-modal .modal-actions .btn {
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
}

.withdrawal-modal .dont-show-again {
    font-size: 13px;
    color: var(--text-sub);
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 8px;
}

.withdrawal-modal .dont-show-again .checkmark {
    width: 18px;
    height: 18px;
}

@media (max-width: 480px) {
    .withdrawal-modal {
        padding: 24px 16px;
    }

    .withdrawal-modal .profit-icon {
        width: 64px;
        height: 64px;
    }

    .withdrawal-modal .profit-icon svg {
        width: 32px;
        height: 32px;
    }

    .withdrawal-modal .modal-title {
        font-size: 20px;
    }

    .withdrawal-modal .profit-amount {
        font-size: 24px;
    }

    .withdrawal-modal .withdrawal-stats {
        flex-direction: column;
        gap: 12px;
    }
}

.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.modal-header h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Modal header icon */
.modal-header h3 svg {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex-shrink: 0;
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius);
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close svg {
    width: 18px;
    height: 18px;
    transition: transform var(--transition);
}

.modal-close:hover {
    color: var(--text-main);
    background: var(--bg-selected);
}

.modal-close:hover svg {
    transform: scale(1.1);
}

.modal-close:active {
    transform: scale(0.92);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    max-height: calc(100vh - 200px);
    max-height: calc(100dvh - 200px); /* Dynamic viewport for mobile */
}

/* Scrollbar styling for modal body */
.modal-body::-webkit-scrollbar {
    width: 6px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-dim);
}

.modal-description {
    color: var(--text-sub);
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
}

.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: rgba(0, 0, 0, 0.02);
}

:root.light .modal-footer {
    background: var(--bg-elevated);
}

:root.light .modal-overlay {
    background: rgba(0, 0, 0, 0.3);
}

:root.light .modal-content {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

/* Modal footer button alignment variants */
.modal-footer.space-between {
    justify-content: space-between;
}

.modal-footer.center {
    justify-content: center;
}

/* Target options for push modal */
.target-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.target-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.target-option:hover {
    border-color: var(--accent);
}

.target-option.selected {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.target-option input[type="radio"] {
    margin-top: 2px;
    accent-color: var(--accent);
}

.target-option-content {
    flex: 1;
}

.target-option-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: 4px;
}

.target-option-desc {
    font-size: 12px;
    color: var(--text-sub);
}

.target-filter {
    margin-top: 12px;
    display: none;
}

.target-option.selected .target-filter {
    display: block;
}

.target-filter select {
    width: 100%;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-main);
}

.instance-checkbox-list {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    background: var(--bg-panel);
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    font-size: 13px;
    color: var(--text-main);
}

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

.checkbox-item:hover {
    background: var(--bg-input);
}

.checkbox-item input[type="checkbox"] {
    accent-color: var(--accent);
}

/* Toast notification */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    padding: 14px 20px;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 48px);
    /* Safe area for iPhone */
    margin-bottom: env(safe-area-inset-bottom, 0);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Toast dismiss animation */
.toast.hiding {
    transform: translateX(-50%) translateY(100px);
    opacity: 0;
}

/* Toast icon container */
.toast-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Toast message text */
.toast-message {
    flex: 1;
    line-height: 1.4;
}

/* Toast close button */
.toast-close {
    background: transparent;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    padding: 4px;
    margin-left: 8px;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-close:hover {
    color: var(--text-main);
    background: var(--bg-hover);
}

.toast.success {
    border-color: rgba(52, 199, 89, 0.4);
    background: linear-gradient(135deg, var(--bg-panel), rgba(52, 199, 89, 0.1));
}

.toast.success .toast-icon {
    background: var(--profit);
    color: white;
}

.toast.success::before {
    content: '✓';
    font-size: 14px;
    font-weight: 700;
    width: 24px;
    height: 24px;
    background: var(--profit);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast.error {
    border-color: rgba(255, 69, 58, 0.4);
    background: linear-gradient(135deg, var(--bg-panel), rgba(255, 69, 58, 0.1));
}

.toast.error .toast-icon {
    background: var(--loss);
    color: white;
}

.toast.error::before {
    content: '✕';
    font-size: 14px;
    font-weight: 700;
    width: 24px;
    height: 24px;
    background: var(--loss);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast.info {
    border-color: rgba(10, 132, 255, 0.4);
    background: linear-gradient(135deg, var(--bg-panel), rgba(10, 132, 255, 0.1));
}

.toast.info .toast-icon {
    background: var(--accent);
    color: white;
}

.toast.info::before {
    content: 'i';
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    width: 24px;
    height: 24px;
    background: var(--accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Warning toast variant */
.toast.warning {
    border-color: rgba(255, 159, 10, 0.4);
    background: linear-gradient(135deg, var(--bg-panel), rgba(255, 159, 10, 0.1));
}

.toast.warning::before {
    content: '!';
    font-size: 14px;
    font-weight: 700;
    width: 24px;
    height: 24px;
    background: var(--orange);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Toast with progress bar */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    animation: toastProgress linear forwards;
}

@keyframes toastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

/* Mobile toast adjustments */
@media (max-width: 480px) {
    .toast {
        left: 16px;
        right: 16px;
        transform: translateX(0) translateY(100px);
        max-width: none;
    }

    .toast.show {
        transform: translateX(0) translateY(0);
    }

    .toast.hiding {
        transform: translateX(0) translateY(100px);
    }
}

/* Status dot enhancements for settings */
.status-dot.online {
    background: var(--profit);
    box-shadow: 0 0 8px var(--profit);
}

.status-dot.offline {
    background: var(--text-dim);
}

/* Spacing utilities */
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .keyboard-help-overlay,
    .keyboard-help-content {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :focus-visible {
        outline-width: 3px;
    }

    .kpi-card:focus-visible,
    button:focus-visible,
    a:focus-visible,
    select:focus-visible,
    input:focus-visible {
        outline-width: 3px;
        outline-color: currentColor;
    }

    kbd {
        border-width: 2px;
    }
}

/* ============================================================================
   Dashboard Page - Scoped Overrides & Components
   ============================================================================ */

/* --- Shared Page Header Card (used on Trades, Stats, EA Settings) --- */
.page-header-card {
    border-radius: var(--radius-xl);
    padding: 20px 24px;
    width: calc(100% - 48px);
    max-width: 1600px;
    margin: calc(env(safe-area-inset-top, 0px) + 16px) auto 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}



.page-header-card:hover {
    box-shadow: var(--glass-shadow-hover);
    border-color: var(--border);
}

.page-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-header-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--accent), #AF52DE);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(10,132,255,0.25);
    flex-shrink: 0;
}

.page-header-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.page-header-info h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 3px 0;
}

.page-header-info p {
    font-size: 12px;
    color: var(--text-sub);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-header-info .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
    transition: background 0.3s ease, color 0.3s ease;
}

.page-header-info .status-badge.online {
    background: rgba(52,199,89,0.15);
    color: var(--profit);
}

.page-header-info .status-badge.offline {
    background: rgba(152,152,157,0.15);
    color: var(--text-sub);
}

.page-header-info .status-badge .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    transition: background 0.3s ease;
}

.page-header-info .status-badge.online .status-dot {
    animation: headerStatusPulse 2s ease-in-out infinite;
}

@keyframes headerStatusPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52,199,89,0.4); }
    50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(52,199,89,0); }
}

.page-header-right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.page-header-right .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-main);
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.page-header-right .btn:hover {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent);
}

.page-header-right .btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.page-header-right .btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.page-header-right .btn.loading svg {
    animation: spin 0.8s linear infinite;
}

@media (max-width: 600px) {
    .page-header-right .btn .btn-text {
        display: none;
    }
    .page-header-right .btn {
        padding: 8px;
    }
}

@media (max-width: 768px) {
    .page-header-card {
        margin: 12px auto;
        padding: 14px;
        margin-top: calc(env(safe-area-inset-top, 0px) + 12px);
    }
}

/* --- Shared Layout Overrides for App Pages --- */
.page-dashboard .section-title,
.page-trades .section-title,
.page-stats .section-title,
.page-settings .section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-sub);
    margin: 0 0 16px 0;
}

.page-dashboard .kpi-grid,
.page-stats .kpi-grid {
    margin: 0 0 28px 0;
}

/* Stats KPI cards: more compact since they have fewer content lines than dashboard */
.page-stats .kpi-card {
    padding: 10px 16px 10px;
    gap: 2px;
    justify-content: flex-start;
}

.page-stats .kpi-value {
    font-size: clamp(18px, 1.8vw, 24px);
    line-height: 1.15;
}

.page-stats .kpi-sparkline {
    height: 14px;
}

.page-dashboard .chart-panel,
.page-trades .chart-panel,
.page-stats .chart-panel {
    margin: 0 0 16px 0;
    border-radius: var(--radius-lg);
}

.page-dashboard .chart-panel.full-width {
    margin: 0 0 24px 0;
}

.page-dashboard .calendar-agenda-wrapper {
    margin: 0 0 16px 0;
}

.page-dashboard .calendar-panel,
.page-dashboard .agenda-panel {
    border-radius: var(--radius-lg);
}

.page-dashboard .instances-grid {
    margin: 0 0 16px 0;
}

.page-dashboard .patterns-grid {
    margin: 0 0 24px 0;
}

.page-dashboard .main-content {
    margin-top: 0;
    padding: 0 0 24px 0; /* Zero side padding — inner elements use own margins to align with hero */
}

.page-trades .main-content,
.page-stats .main-content,
.page-settings .main-content,
.page-support .main-content,
.page-profile .main-content {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 24px 32px;
}

/* --- Shared Filters Bar Override --- */
.page-dashboard .filters-bar,
.page-trades .filters-bar,
.page-stats .filters-bar,
.page-settings .filters-bar {
    width: calc(100% - 48px);
    max-width: 1600px;
    margin: 0 auto 12px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    border-radius: 0;
    overflow: hidden;
}

.page-dashboard .status-bar-main,
.page-trades .status-bar-main,
.page-stats .status-bar-main,
.page-settings .status-bar-main {
    padding: 10px 0;
    background: transparent;
}

.page-dashboard .filter-toggle-btn,
.page-trades .filter-toggle-btn,
.page-stats .filter-toggle-btn,
.page-settings .filter-toggle-btn {
    padding: 8px 14px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}

.page-dashboard .filter-toggle-btn:hover,
.page-trades .filter-toggle-btn:hover,
.page-stats .filter-toggle-btn:hover,
.page-settings .filter-toggle-btn:hover {
    background: var(--accent-bg);
    border-color: var(--accent);
}

.page-dashboard .filters-panel,
.page-trades .filters-panel,
.page-stats .filters-panel,
.page-settings .filters-panel {
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-panel);
    border-radius: var(--radius-lg);
    margin-top: 8px;
}

/* .filters-panel uses .expanded class (see toggleFiltersPanel in page-transitions.js) */
.page-dashboard .filters-panel.expanded,
.page-trades .filters-panel.expanded,
.page-stats .filters-panel.expanded,
.page-settings .filters-panel.expanded {
    opacity: 1;
}

/* --- Shared Quick Stats Override --- */
.page-dashboard .quick-stats,
.page-trades .quick-stats,
.page-stats .quick-stats,
.page-settings .quick-stats {
    display: flex;
    gap: 16px;
}

.page-dashboard .quick-stat,
.page-trades .quick-stat,
.page-stats .quick-stat,
.page-settings .quick-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.page-dashboard .quick-stat-label,
.page-trades .quick-stat-label,
.page-stats .quick-stat-label,
.page-settings .quick-stat-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-sub);
}

.page-dashboard .quick-stat-value,
.page-trades .quick-stat-value,
.page-stats .quick-stat-value,
.page-settings .quick-stat-value {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* --- Maintenance Banner --- */
.maintenance-banner {
    margin: 0;
    background: var(--orange-bg);
    border: 1px solid var(--orange-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.maintenance-banner.hidden {
    display: none;
}

.maintenance-banner.in-progress {
    background: linear-gradient(135deg, var(--loss-bg), rgba(255,59,48,0.06));
    border-color: var(--loss);
}

.maintenance-banner.in-progress .maintenance-banner-icon {
    color: var(--loss);
}

.maintenance-banner.banner-trial {
    background: linear-gradient(135deg, var(--orange-bg), var(--loss-bg));
    border-color: var(--orange);
}

.maintenance-banner.banner-trial .maintenance-banner-icon { color: var(--orange); }
.maintenance-banner.banner-trial .banner-title { color: var(--orange); }
.maintenance-banner.banner-trial .banner-link { color: var(--orange); text-decoration: underline; font-weight: 600; }
.maintenance-banner.banner-trial .banner-countdown { font-weight: 700; font-family: var(--font-mono); color: var(--orange); }

.maintenance-banner.banner-trial-expired {
    background: linear-gradient(135deg, var(--loss-bg), rgba(255,69,58,0.08));
    border-color: var(--loss);
}

.maintenance-banner.banner-trial-expired .maintenance-banner-icon { color: var(--loss); }
.maintenance-banner.banner-trial-expired .banner-title { color: var(--loss); }
.maintenance-banner.banner-trial-expired .banner-countdown { color: var(--loss); }

.maintenance-banner.banner-verification {
    background: linear-gradient(135deg, var(--accent-bg), rgba(90,200,250,0.08));
    border-color: var(--accent);
}

.maintenance-banner.banner-verification .maintenance-banner-icon { color: var(--accent); }
.maintenance-banner.banner-verification .banner-title { color: var(--accent); }
.maintenance-banner.banner-verification .banner-link { color: var(--accent); text-decoration: underline; font-weight: 600; }

.maintenance-banner.banner-announcement {
    margin-bottom: 8px;
}

.maintenance-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.maintenance-banner-icon {
    color: var(--orange);
    flex-shrink: 0;
}

.maintenance-banner-text {
    flex: 1;
    font-size: 13px;
    line-height: 1.4;
}

.maintenance-banner-text strong {
    display: block;
    font-weight: 600;
}

.maintenance-banner-text span {
    color: var(--text-sub);
    font-size: 12px;
}

.maintenance-banner-close {
    background: none;
    border: none;
    color: var(--text-sub);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.maintenance-banner-close:hover {
    background: var(--bg-elevated);
    color: var(--text-main);
}

/* --- Margin Warning Banner --- */
.margin-warning {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, rgba(255,69,58,0.95), rgba(255,45,85,0.95));
    color: white;
    padding: 12px 20px;
    text-align: center;
    z-index: 9999;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 2px 12px var(--loss-bg);
}

.margin-warning.hidden {
    display: none;
}

.margin-warning.warning {
    background: linear-gradient(135deg, rgba(255,149,0,0.95), rgba(255,179,64,0.95));
}

@media (max-width: 600px) {
    .margin-warning {
        font-size: 12px;
        padding: 10px 12px;
        gap: 6px;
    }
}

.margin-warning::before {
    content: '\26A0';
    font-size: 18px;
}

@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.margin-warning.critical {
    animation: pulse-warning 1s infinite;
}

/* --- Open Positions Panel --- */
.open-positions-panel {
    margin: 0 0 24px 0;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition), border-color var(--transition), transform 0.15s ease;
}

/* Loading bar at top of open positions panel */
.open-positions-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 1;
}

.open-positions-panel:hover {
    box-shadow: var(--shadow);
    border-color: var(--border);
}

.open-positions-panel:hover::before {
    transform: scaleX(1);
}

.page-dashboard .open-positions-panel .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 14px 16px;
    border-left: none;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-subtle);
}

.page-dashboard .open-positions-panel .section-title::before {
    display: none;
}

.total-unrealized {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.total-unrealized.profit { color: var(--profit); }
.total-unrealized.loss { color: var(--loss); }

.positions-list {
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
}

.position-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-subtle);
    align-items: center;
}

.position-card:last-child { border-bottom: none; }
.position-card:hover { background: var(--bg-elevated); }

.position-symbol {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.position-symbol-name {
    font-weight: 700;
    font-size: 14px;
}

.position-direction {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    display: inline-block;
    width: fit-content;
}

.position-direction.buy {
    background: rgba(52,199,89,0.15);
    color: var(--profit);
}

.position-direction.sell {
    background: rgba(255,69,58,0.15);
    color: var(--loss);
}

.position-details {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--text-sub);
    overflow: hidden;
    flex-wrap: wrap;
    min-width: 0;
}

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

.position-detail-label {
    font-size: 10px;
    text-transform: uppercase;
    opacity: 0.7;
}

.position-detail-value {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.position-pnl {
    text-align: right;
}

.position-pnl-value {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

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

.position-pnl-pips {
    font-size: 11px;
    color: var(--text-sub);
}

/* --- Section Header Row --- */
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0 0 20px 0;
}

.section-header-row .section-title {
    margin: 0;
    flex-shrink: 0;
}

.section-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-header-row .share-btn {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-sub);
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.section-header-row .share-btn:hover {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent);
}

.section-header-row .share-btn svg {
    width: 14px;
    height: 14px;
}

/* --- Instance Status Indicator --- */
.instance-status-indicator {
    font-size: 12px;
    color: var(--text-sub);
    display: flex;
    align-items: center;
    gap: 6px;
}

.instance-status-indicator .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dim);
}

.instance-status-indicator.online .status-dot {
    background: var(--profit);
    box-shadow: 0 0 6px var(--profit-bg);
}

.instance-status-indicator.offline .status-dot {
    background: var(--loss);
}

/* --- Dashboard Utility Classes --- */
.data-hidden {
    display: none !important;
}



.verification-success {
    color: var(--profit);
}

/* --- Dashboard Risk Toggle (Inline) --- */

/* --- Pending Orders Panel --- */
.pending-orders-panel {
    margin: 0 0 24px 0;
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition), border-color var(--transition), transform 0.15s ease;
}

.pending-orders-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 1;
}

.pending-orders-panel:hover {
    box-shadow: var(--shadow);
    border-color: var(--border);
}

.pending-orders-panel:hover::before {
    transform: scaleX(1);
}

.page-dashboard .pending-orders-panel .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 14px 16px;
    border-left: none;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-subtle);
}

.page-dashboard .pending-orders-panel .section-title::before {
    display: none;
}

.pending-count-badge {
    font-size: 12px;
    font-weight: 700;
    background: rgba(255, 149, 0, 0.15);
    color: var(--orange);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}

.pending-orders-list {
    display: flex;
    flex-direction: column;
    max-height: 300px;
    overflow-y: auto;
}

.pending-order-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    align-items: center;
}

.pending-order-card:last-child { border-bottom: none; }
.pending-order-card:hover { background: var(--bg-elevated); }

.order-symbol {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.order-symbol-name {
    font-weight: 700;
    font-size: 14px;
}

.order-type-badge {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    display: inline-block;
    width: fit-content;
}

.order-type-badge.buy-type {
    background: rgba(48, 209, 88, 0.12);
    color: var(--profit);
}

.order-type-badge.sell-type {
    background: rgba(255, 69, 58, 0.12);
    color: var(--loss);
}

.order-details {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.order-detail {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.order-detail-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-detail-value {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.order-price-target {
    text-align: right;
}

.order-price-value {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

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

/* --- Dashboard Mobile Responsive --- */
@media (max-width: 768px) {
    /* Margin overrides are in the Overhaul Responsive section below */
    .page-dashboard .status-bar-main {
        flex-direction: column;
        align-items: stretch;
    }
    .page-dashboard .quick-stats {
        justify-content: space-around;
    }
    /* Position card mobile rules in MOBILE RESPONSIVE OVERRIDES section below */
}

/* ============================================================================
   Trades Page - Specific Components
   ============================================================================ */

/* --- Trades Stats Cards Grid --- */
.trades-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    width: calc(100% - 48px);
    max-width: 1600px;
    margin: 0 auto 12px;
}

.trades-stat-card {
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.trades-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--purple));
    opacity: 0;
    transition: opacity 0.2s;
}

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

.trades-stat-card:hover::before { opacity: 1; }

.trades-stat-card .label {
    font-size: 10px;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.trades-stat-card .value {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.trades-stat-card .value.profit { color: var(--profit); }
.trades-stat-card .value.loss { color: var(--loss); }

.trades-stat-card .subtext {
    font-size: 11px;
    color: var(--text-sub);
    margin-top: 2px;
}

/* --- Trades Table --- */
.trades-table-container {
    margin: 0 0 16px 0;
}

.standalone-table {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.page-trades .trades-table thead {
    background: var(--bg-elevated);
    position: sticky;
    top: 0;
    z-index: 10;
}

.page-trades .trades-table th {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-sub);
    padding: 12px 10px;
    border-bottom: 1px solid var(--border-subtle);
}

.page-trades .trades-table tbody tr {
    transition: background 0.15s ease;
}

.page-trades .trades-table tbody tr:hover {
    background: rgba(10, 132, 255, 0.05);
}

.page-trades .trades-table tbody tr.expanded {
    background: rgba(10, 132, 255, 0.08);
}

.page-trades .trades-table td {
    padding: 10px;
    font-size: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.page-trades .trades-table tbody tr:last-child td {
    border-bottom: none;
}

/* --- Trade Type Badges --- */
.type-buy {
    color: var(--profit);
    font-weight: 600;
}

.type-sell {
    color: var(--loss);
    font-weight: 600;
}

/* --- Pagination --- */
.pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 16px;
    margin: 0 0 16px 0;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.pagination button {
    padding: 8px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 12px;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.pagination button:hover:not(:disabled) {
    background: var(--accent-bg);
    border-color: var(--accent);
}

.pagination button.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Note Button --- */
.note-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-sub);
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    font-size: 10px;
}

.note-btn:hover {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

.note-btn.note-filled {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

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

.note-preview {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Trade Details Expansion --- */
.trade-details-row {
    background: var(--bg-elevated);
}

.trade-details-cell {
    padding: 0;
}

.trade-details-content {
    padding: 20px;
    background: linear-gradient(135deg, rgba(10,132,255,0.03), rgba(191,90,242,0.03));
    border-top: 2px solid var(--accent);
}

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

.trade-details-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
}

.symbol-badge {
    padding: 4px 10px;
    background: var(--accent-bg);
    color: var(--accent);
    border-radius: var(--radius-sm);
    font-weight: 600;
}

.direction-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
}

.direction-badge.buy {
    background: var(--profit-bg);
    color: var(--profit);
}

.direction-badge.sell {
    background: var(--loss-bg);
    color: var(--loss);
}

.direction-badge svg {
    width: 14px;
    height: 14px;
}

.trade-details-collapse-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-sub);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.trade-details-collapse-hint:hover {
    background: var(--bg-elevated);
    color: var(--accent);
}

.trade-details-collapse-hint svg {
    width: 14px;
    height: 14px;
}

.trade-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.detail-group {
    padding: 10px 14px;
    background: var(--bg-panel);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
}

.detail-group.highlight {
    background: linear-gradient(135deg, rgba(10,132,255,0.08), rgba(191,90,242,0.08));
    border-color: var(--accent);
}

.detail-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-sub);
    display: block;
    margin-bottom: 4px;
}

.detail-value {
    font-size: 14px;
    font-weight: 600;
}

.detail-value.profit { color: var(--profit); }
.detail-value.loss { color: var(--loss); }
.detail-value.small { font-size: 11px; word-break: break-all; }

.detail-note {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--bg-panel);
    border-radius: var(--radius);
    border-left: 3px solid var(--accent);
    font-size: 13px;
    line-height: 1.5;
}

/* --- Martingale Badge --- */
.mtg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 700;
    background: var(--orange-bg);
    color: var(--orange);
}

.mtg-badge.mtg-3, .mtg-badge.mtg-4, .mtg-badge.mtg-5 {
    background: var(--loss-bg);
    color: var(--loss);
}

/* --- Column Toggle Menu --- */
.column-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 8px;
    min-width: 180px;
    box-shadow: var(--shadow);
    z-index: 100;
}

.column-menu-header {
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-sub);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 4px;
}

.column-toggle-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s;
}

.column-toggle-item:hover {
    background: var(--bg-elevated);
}

.column-toggle-item input {
    accent-color: var(--accent);
}

/* --- Filter Badge --- */
.filter-badge {
    min-width: 18px;
    padding: 2px 6px;
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-sub);
}

.filter-badge.active {
    background: var(--accent);
    color: white;
}

/* --- Section Header --- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    margin-bottom: 12px;
}

/* --- Trades Page Mobile --- */
@media (max-width: 768px) {
    .trades-stats-grid {
        width: calc(100% - 24px);
        margin: 0 auto 12px;
        grid-template-columns: repeat(2, 1fr);
    }
    .page-trades .filters-bar {
        width: calc(100% - 24px);
        margin: 0 auto 12px;
    }
    .page-trades .section-header {
        padding: 0 12px;
    }
    .trades-table-container {
        margin: 0 12px 12px 12px;
    }
    .pagination {
        margin: 0 12px 12px 12px;
    }
    .page-trades .status-bar-main {
        flex-direction: column;
        align-items: stretch;
    }
    .page-trades .quick-stats {
        justify-content: space-around;
    }
    .trade-details-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================================
   Statistics Page - Specific Components
   ============================================================================ */

/* --- Stats Header Icon Variant (purple → orange) --- */
.page-stats .page-header-icon {
    background: linear-gradient(135deg, var(--purple), var(--orange));
    box-shadow: 0 2px 8px var(--purple-bg);
}

/* --- Stats KPI Card Enhancements --- */
.page-stats .kpi-card {
    position: relative;
    overflow: hidden;
}

.page-stats .kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--purple), var(--orange));
    opacity: 0;
    transition: opacity 0.2s;
}

.page-stats .kpi-card:hover::before { opacity: 1; }
.page-stats .kpi-card.profit::before { background: linear-gradient(90deg, var(--profit), var(--teal)); }
.page-stats .kpi-card.loss::before { background: linear-gradient(90deg, var(--loss), var(--orange)); }

/* --- Stats Grid & Stat Cards --- */
.page-stats .stats-grid {
    margin: 0 0 24px 0;
    gap: 12px;
}

.page-stats .stat-card {
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-stats .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--purple));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.page-stats .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}

.page-stats .stat-card:hover::before { opacity: 1; }

/* --- Charts Row Override --- */
.page-stats .charts-row {
    margin: 0 0 24px 0;
    gap: 12px;
}

.page-stats .charts-row .chart-panel {
    margin: 0;
}

.page-stats .chart-panel.full-width {
    margin: 0 0 24px 0;
}

/* --- Standalone Table Override --- */
.page-stats .standalone-table {
    margin: 0 0 12px 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}

/* Scrollable table containers */
.scrollable-table { max-height: 350px; overflow-y: auto; margin-bottom: 24px; }
.scrollable-table.scrollable-table-lg { max-height: 400px; }

/* Trades table container */
.trades-table-container { max-height: 70vh; }

/* Utility classes */
.mt-24 { margin-top: 24px; }

/* Subscription status messages */
.sub-status-title { font-weight: 500; margin-bottom: 6px; }
.sub-status-title.trial { color: var(--orange); }
.sub-status-title.past-due { color: var(--loss); }
.sub-status-title.paused { color: var(--text-muted); }
.sub-status-detail { margin-top: 4px; }
.sub-status-detail-sm { margin-top: 6px; font-size: 0.9em; }
.sub-status-action { margin-top: 10px; }
.sub-status-action a { color: var(--accent); }

/* Payment breakdown rows */
.breakdown-row { display: flex; justify-content: space-between; padding: 4px 0; }
.breakdown-row .breakdown-label { color: var(--text-muted); }
.breakdown-row.credit { color: var(--profit); }

/* Password strength meter */
.strength-meter { display: flex; gap: 4px; margin-bottom: 6px; }
.strength-bar { height: 4px; flex: 1; border-radius: var(--radius-sm); background: var(--border); }
.strength-feedback { color: var(--text-sub); margin-left: 8px; }

/* Payment history table */
.payment-amount-cell { font-weight: 600; }
.payment-empty-cell { color: var(--text-dim); font-size: 13px; }
.empty-payments-hint { font-size: 12px; margin-top: 4px; }

/* --- Growth Chart Legend & Footer --- */
.chart-legend {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-sub);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm);
}

.legend-color-profit { background: var(--profit); }
.legend-color-drawdown { background: var(--accent); opacity: 0.5; }

.chart-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
}

.growth-stats {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.growth-stat {
    display: flex;
    gap: 6px;
    font-size: 13px;
}

.growth-label {
    color: var(--text-sub);
}

.growth-value {
    font-weight: 600;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.growth-value.profit { color: var(--profit); }
.growth-value.loss { color: var(--loss); }

/* --- Projection Chart --- */
.projection-pills {
    display: flex;
    gap: 4px;
}

.projection-pills .pill {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-sub);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    font-family: 'Inter', sans-serif;
}

.projection-pills .pill:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.projection-pills .pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

#projection-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 0 16px 8px;
    font-size: 12px;
    color: var(--text-sub);
}

#projection-legend .legend-color {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 4px;
}

.projection-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-sub);
    font-size: 14px;
    padding: 24px;
    text-align: center;
}

.projection-empty.hidden {
    display: none;
}

/* --- Export Section --- */
.export-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.export-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.export-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.export-btn:hover {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

.export-btn svg {
    flex-shrink: 0;
}

.export-btn.generating {
    opacity: 0.7;
    pointer-events: none;
}

.export-btn.generating svg {
    animation: spin 0.8s linear infinite;
}

/* --- Refresh Button Animation (shared) --- */
.refresh-btn {
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.refresh-btn:hover {
    background: var(--accent-bg);
    color: var(--accent);
}

.refresh-btn.spinning svg {
    animation: spin 0.8s linear infinite;
}

/* --- Stats Page Mobile --- */
@media (max-width: 768px) {
    .page-stats .kpi-grid,
    .page-stats .chart-panel,
    .page-stats .chart-panel.full-width,
    .page-stats .charts-row,
    .page-stats .stats-grid,
    .page-stats .standalone-table,
    .page-stats .filters-bar {
        width: calc(100% - 24px);
        margin-left: auto;
        margin-right: auto;
    }
    .page-stats .section-title {
        margin-left: 12px;
        margin-right: 12px;
    }
    .page-stats .status-bar-main {
        flex-direction: column;
        align-items: stretch;
    }
    .page-stats .quick-stats {
        justify-content: space-around;
    }
    .growth-stats {
        gap: 12px;
    }
    .chart-legend {
        gap: 10px;
        font-size: 11px;
    }
    #projection-legend {
        gap: 8px;
        font-size: 10px;
        padding: 0 12px 6px;
    }
    .projection-pills .pill {
        padding: 3px 10px;
        font-size: 11px;
    }
    .chart-header:has(.projection-pills) {
        flex-wrap: wrap;
        gap: 8px;
    }
    .export-options {
        flex-direction: column;
    }
    .export-btn {
        justify-content: center;
    }
}

/* ============================================================================
   EA Settings Page - Specific Components
   ============================================================================ */

/* --- Settings Header Override --- */
.page-settings .page-header-card {
    border-color: rgba(255,255,255,0.12);
}

:root.light .page-settings .page-header-card {
    border-color: rgba(0,0,0,0.08);
}

/* Settings section header with flex layout */
.settings-section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.settings-section-header-row .section-title {
    margin-bottom: 0;
}

.page-settings .page-header-info .version-badge {
    background: var(--accent-bg);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
}

/* --- Settings Section Title Override (border-left accent) --- */
.page-settings .section-title {
    padding-left: 12px;
    border-left: 3px solid var(--orange);
}

/* --- Settings Main Content Override --- */
.page-settings .main-content {
    margin: 0 auto;
}

/* --- Settings Filters Bar Override (larger bottom margin) --- */
.page-settings .filters-bar {
    margin-bottom: 16px;
}

/* --- Settings Two-Column Layout --- */
.settings-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.settings-column { min-width: 0; }

/* --- Settings Instance Cards Grid --- */
.settings-instances-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.settings-instances-grid .empty-state { grid-column: 1 / -1; }

.settings-instance-card {
    border-radius: var(--radius-lg);
    padding: 14px;
    transition: box-shadow var(--transition), border-color var(--transition), transform 0.15s ease;
    cursor: pointer;
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.settings-instance-card:hover {
    border-color: var(--accent-blue);
    box-shadow: var(--glass-shadow-hover);
    transform: translateY(-2px);
}

.settings-instance-card.selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg);
}

.settings-instance-card.has-settings::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--profit);
}

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

.settings-instance-symbol { font-size: 14px; font-weight: 600; color: var(--text-primary); }

.settings-instance-tf {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--accent-bg);
    color: var(--accent);
}

.settings-instance-status {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.settings-instance-status.status-active { background: var(--profit-bg); color: var(--profit); }
.settings-instance-status.status-inactive { background: var(--bg-tertiary); color: var(--text-secondary); }

.settings-instance-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* --- Instance Sparkline Chart --- */
.settings-instance-chart {
    flex: 1;
    position: relative;
    min-height: 40px;
    margin: 6px 0;
    opacity: 0.7;
    transition: opacity var(--transition);
}

.settings-instance-card:hover .settings-instance-chart { opacity: 1; }

.settings-instance-chart canvas {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}

.settings-instance-pnl { font-weight: 500; }
.settings-instance-pnl.profit { color: var(--profit); }
.settings-instance-pnl.loss { color: var(--loss); }

.settings-instance-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: var(--text-tertiary);
    gap: 8px;
}

.settings-instance-version {
    font-weight: 500;
    padding: 1px 4px;
    border-radius: var(--radius-sm);
}

.settings-instance-version.synced { color: var(--profit); background: var(--profit-bg); }
.settings-instance-version.outdated { color: var(--yellow); background: var(--yellow-bg); }

/* --- Offline Instance Cards --- */
.settings-instance-card.offline {
    opacity: 0.75;
    border-color: var(--border-subtle);
}

.settings-instance-card.offline:hover { opacity: 1; }

.settings-instance-footer .last-seen {
    color: var(--text-tertiary);
    font-style: italic;
}

/* --- Status Bar Version & Push Indicators --- */
.status-version {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-version .status-label { font-size: 11px; color: var(--text-tertiary); font-weight: 500; }
.status-version .status-text { font-weight: 600; color: var(--accent-blue); }

.status-push {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-push .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.status-push .status-dot.success { background-color: var(--profit); }
.status-push .status-dot.error { background-color: var(--loss); }
.status-push .status-dot.pending { background-color: var(--yellow); animation: pulse 1s infinite; }
.status-push .status-text { font-size: 11px; color: var(--text-secondary); }

/* --- Settings History Section --- */
.settings-history-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.settings-version-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 14px;
    transition: box-shadow var(--transition), border-color var(--transition), transform 0.15s ease;
    cursor: pointer;
    min-width: 110px;
    flex: 0 0 auto;
}

.settings-version-card:hover {
    border-color: var(--purple);
    box-shadow: 0 4px 12px var(--shadow-color);
    transform: translateY(-2px);
}

.settings-version-card.selected {
    border-color: var(--purple);
    box-shadow: 0 0 0 2px var(--purple-bg);
}

.settings-version-card.current { border-color: var(--profit); }

.settings-version-card.current::before {
    content: 'CURRENT';
    position: absolute;
    top: -8px;
    right: 8px;
    font-size: 8px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--profit);
    color: white;
}

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

.settings-version-number { font-size: 18px; font-weight: 700; color: var(--purple); }

.settings-version-target {
    font-size: 9px;
    font-weight: 500;
    padding: 2px 5px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    text-transform: uppercase;
}

.settings-version-meta { font-size: 10px; color: var(--text-tertiary); }
.settings-version-instances { font-size: 10px; color: var(--text-secondary); margin-top: 4px; }

/* --- Version Details Panel --- */
.version-details-panel {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    display: none;
}

.version-details-panel.active { display: block; }

.version-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.version-details-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.version-details-actions { display: flex; gap: 8px; }

.version-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.version-setting-item {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    padding: 6px 8px;
    background: var(--bg-panel);
    border-radius: var(--radius-sm);
}

.version-setting-key { color: var(--text-secondary); }
.version-setting-value { color: var(--text-primary); font-weight: 500; }

/* --- API Key Display Mobile --- */
@media (max-width: 600px) {
    .api-key-display code {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .api-key-display code {
        max-width: 120px;
        font-size: 11px;
    }
}

/* --- Settings Page Mobile --- */
@media (max-width: 1200px) {
    .settings-two-column { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .page-settings .filters-bar,
    .page-settings .main-content {
        margin-left: 12px;
        margin-right: 12px;
    }
    .page-settings .section-title {
        margin-left: 12px;
        margin-right: 12px;
    }
}

@media (max-width: 1000px) {
    .settings-instances-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}

@media (max-width: 600px) {
    .settings-instances-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .settings-instance-card { padding: 6px; aspect-ratio: auto; }
    .settings-instance-header { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 4px; }
    .settings-instance-symbol { font-size: 10px; }
    .settings-instance-tf { font-size: 9px; padding: 1px 3px; }
    .settings-instance-meta { font-size: 9px; margin-bottom: 4px; }
    .settings-instance-footer { flex-wrap: wrap; font-size: 9px; gap: 2px; }
    .settings-instance-status { font-size: 9px; padding: 1px 3px; }
}

@media (max-width: 380px) {
    .settings-instances-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
    .settings-instance-card { padding: 4px; }
    .settings-instance-symbol { font-size: 9px; }
    .settings-instance-tf { font-size: 9px; }
    .settings-instance-footer { font-size: 9px; }
    .settings-instance-status { font-size: 9px; }
}

/* ============================================================================
   Profile Page - Specific Components
   ============================================================================ */

/* --- Profile Header Override --- */
.page-profile .page-header-card {
    border-color: var(--accent);
}

.page-profile .page-header-icon {
    font-size: 18px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

.page-profile .page-header-info .account-badge {
    background: var(--profit-bg);
    color: var(--profit);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
}

/* --- Profile Container --- */
.profile-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 24px 80px 24px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
}

/* --- Profile Stats Grid --- */
.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.profile-stat-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px;
    text-align: center;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.profile-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--profit), var(--teal));
    opacity: 0;
    transition: opacity 0.2s;
}

.profile-stat-card:hover::before { opacity: 1; }

.profile-stat-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--shadow-color);
}

.profile-stat-card .stat-icon {
    width: 36px;
    height: 36px;
    margin: 0 auto 10px;
    background: var(--accent-bg);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-stat-card .stat-icon svg { width: 18px; height: 18px; color: var(--accent); }
.profile-stat-card .stat-value { font-size: 20px; font-weight: 700; margin-bottom: 4px; }
.profile-stat-card .stat-value.profit { color: var(--profit); }
.profile-stat-card .stat-label { font-size: 11px; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.5px; }

.stat-icon-profit { background: var(--profit-bg); }

/* Verification badges */
.verified-badge { display: flex; align-items: center; gap: 6px; }
.pending-badge-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pending-badge { color: var(--text-warning); display: flex; align-items: center; gap: 4px; }

/* Utility classes */
.text-orange { color: var(--orange); }
.text-right { text-align: right; }

/* --- Profile Tabs --- */
.profile-tabs-container {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 4px;
    margin-bottom: 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.profile-tabs-container::-webkit-scrollbar { display: none; }

.profile-tab {
    padding: 10px 18px;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    color: var(--text-sub);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.profile-tab:hover { color: var(--text-main); background: var(--bg-elevated); }

.profile-tab.active {
    color: white;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    box-shadow: 0 2px 8px var(--accent-bg);
}

.profile-tab svg { width: 16px; height: 16px; }

.profile-tab .tab-badge {
    background: rgba(255,255,255,0.25);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-lg);
    min-width: 18px;
    text-align: center;
}

:root.light .profile-tab:not(.active) .tab-badge {
    background: var(--accent);
    color: white;
}

.profile-tab:not(.active) .tab-badge {
    background: var(--accent-bg);
    color: var(--accent);
}

.profile-tab-content { display: none; animation: fadeIn 0.3s ease; }
.profile-tab-content.active { display: block; }

/* --- Profile Section --- */
.profile-section {
    background: var(--bg-panel);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    padding: 28px;
    margin-bottom: 24px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.profile-section h2 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-sub);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

/* --- Info Grid --- */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-dim);
}

.info-value {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-main);
    padding: 12px 16px;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

.info-value.highlight {
    background: linear-gradient(135deg, var(--profit-bg) 0%, var(--accent-bg) 100%);
    border-color: var(--profit);
}

.info-value.profit { color: var(--profit); }

.info-value.masked {
    font-family: var(--font-mono);
    letter-spacing: 2px;
}

/* --- Small Button --- */
.btn-small {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    min-height: 28px;
}

.btn-small:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.btn-small:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-small.success { background: var(--profit); }

/* --- Notification Toggles --- */
.notification-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.notification-toggle-item:hover {
    border-color: var(--accent);
    background: var(--bg-panel);
}

.notification-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.notification-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-icon svg { width: 22px; height: 22px; }
.notification-title { font-size: 15px; font-weight: 600; color: var(--text-main); margin-bottom: 4px; }
.notification-desc { font-size: 13px; color: var(--text-sub); }

/* --- Profile Status Badge --- */
.page-profile .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-xl);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.page-profile .status-badge.active {
    background: var(--profit-bg);
    color: var(--profit);
}

.page-profile .status-badge.trial {
    background: var(--accent-bg);
    color: var(--accent);
}

.page-profile .status-badge.pending {
    background: var(--orange-bg);
    color: var(--orange);
}

.page-profile .status-badge .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 2s ease-in-out infinite;
}

/* --- Subscription Price --- */
.subscription-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.subscription-price .currency { font-size: 14px; color: var(--text-sub); }
.subscription-price .amount { font-size: 24px; font-weight: 700; color: var(--profit); }
.subscription-price .period { font-size: 14px; color: var(--text-sub); }

/* --- Payment History --- */
.payment-history-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.payment-history-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    padding: 12px 16px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
}

.payment-history-table td {
    padding: 14px 16px;
    font-size: 14px;
    border-bottom: 1px solid var(--border-light);
}

.payment-history-table tr:hover td {
    background: var(--bg-elevated);
}

.payment-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
}

.payment-status.paid { background: var(--profit-bg); color: var(--profit); }
.payment-status.failed { background: var(--loss-bg); color: var(--loss); }
.payment-status.pending { background: var(--orange-bg); color: var(--orange); }

.invoice-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.invoice-link:hover { text-decoration: underline; }

/* --- Cancel Subscription --- */
.cancel-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.cancel-warning {
    background: var(--loss-bg);
    border: 1px solid var(--loss);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 16px;
}

.cancel-warning-title {
    font-weight: 600;
    color: var(--loss);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cancel-warning-text {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.5;
}

.btn-cancel {
    padding: 12px 24px;
    background: transparent;
    color: var(--loss);
    border: 1px solid var(--loss);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-cancel:hover {
    background: var(--loss-bg);
    border-color: var(--loss);
}

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

.empty-payments {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-sub);
}

.empty-payments svg {
    width: 48px;
    height: 48px;
    color: var(--text-dim);
    margin-bottom: 16px;
}

/* --- Payment Method --- */
.payment-method-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 16px;
}

.payment-method-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.payment-method-icon {
    width: 48px;
    height: 32px;
    background: var(--bg-panel);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.payment-method-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.payment-method-brand { font-weight: 600; font-size: 15px; color: var(--text-main); }
.payment-method-number { font-size: 13px; color: var(--text-sub); font-family: var(--font-mono); }
.payment-method-expiry { font-size: 12px; color: var(--text-dim); }

.btn-update-payment {
    padding: 10px 20px;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-update-payment:hover { background: var(--accent-bg); }
.btn-update-payment:disabled { opacity: 0.5; cursor: not-allowed; }

.payment-update-form {
    display: none;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-top: 16px;
}

.payment-update-form.active { display: block; }

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

.payment-update-title { font-weight: 600; font-size: 15px; color: var(--text-main); }

.btn-close-form {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    padding: 4px;
}

.btn-close-form:hover { color: var(--text-main); }

#card-element {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    min-height: 44px;
}

#card-element.StripeElement--focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

#card-element.StripeElement--invalid { border-color: var(--loss); }

#card-errors {
    color: var(--loss);
    font-size: 13px;
    margin-top: 8px;
    min-height: 20px;
}

.btn-save-card {
    margin-top: 16px;
    width: 100%;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--profit) 0%, rgb(48, 209, 88) 100%);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-save-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--profit-bg);
}

.btn-save-card:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.payment-success-msg {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--profit-bg);
    border: 1px solid var(--profit);
    border-radius: var(--radius);
    color: var(--profit);
    font-size: 14px;
    margin-top: 16px;
}

.payment-success-msg.visible { display: flex; }

/* --- Edit Profile Button & Modal --- */
.btn-edit-profile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-edit-profile:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.btn-edit-profile svg { flex-shrink: 0; }

.edit-profile-modal {
    max-width: 480px;
    width: 95%;
}

.edit-profile-modal .modal-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-main);
}

.edit-profile-modal .form-group { margin-bottom: 16px; }

.edit-profile-modal .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-sub);
    margin-bottom: 6px;
}

.edit-profile-modal .form-group input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    font-size: 15px;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.edit-profile-modal .form-group input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.edit-profile-modal .form-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.edit-profile-modal .btn {
    flex: 1;
    padding: 12px 20px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.edit-profile-modal .btn-primary {
    background: var(--accent);
    border: none;
    color: white;
}

.edit-profile-modal .btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.edit-profile-modal .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.edit-profile-modal .btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-main);
}

.edit-profile-modal .btn-ghost:hover { background: var(--bg-elevated); }

/* --- Profile Page Mobile --- */
@media (max-width: 768px) {
    .profile-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .profile-container { padding: 0 12px 80px 12px; }
    .profile-section { padding: 20px; }
    .payment-method-card { flex-direction: column; gap: 12px; align-items: stretch; }
    .btn-update-payment { text-align: center; }
    .info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .profile-stats-grid { grid-template-columns: 1fr; }
    .profile-container { padding: 0 8px 80px 8px; }
}

/* ============================================================================
   Site Footer - Unified Footer for All Pages
   ============================================================================ */
/* Sticky footer: app pages become flex columns so footer pushes to viewport bottom */
.page-dashboard,
.page-trades,
.page-stats,
.page-settings,
.page-support,
.page-profile,
.page-admin {
    display: flex;
    flex-direction: column;
}

/* In flex-column, children with margin:auto shrink-to-fit instead of filling width.
   Only add width:100% to elements that lack an explicit width (i.e. only max-width + margin:auto).
   Elements with width:calc(...) already size themselves correctly — do NOT override. */
.page-dashboard > .main-content,
.page-trades > .main-content,
.page-stats > .main-content,
.page-settings > .main-content,
.page-support > .support-resources,
.page-support > .support-container,
.page-profile > .profile-container {
    width: 100%;
}

.site-footer {
    margin-top: auto;
    padding: 48px 24px 24px;
    border-top: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-main) 100%);
    /* Safe area for iPhone bottom bar */
    padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
    position: relative;
    z-index: 2;
}

/* Subtle gradient top border on footer */
.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent) 25%,
        var(--purple) 50%,
        var(--accent) 75%,
        transparent 100%
    );
    opacity: 0.3;
}

.footer-content {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    padding: 6px 10px;
    margin: -6px -10px;
    border-radius: var(--radius);
}

.footer-brand:hover {
    background: rgba(255, 255, 255, 0.04);
}

:root.light .footer-brand:hover {
    background: rgba(0, 0, 0, 0.03);
}

:root.light .footer-social-link {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

:root.light .footer-social-link:hover {
    background: var(--accent-bg);
}

:root.light .support-card {
    border-color: rgba(0, 0, 0, 0.08);
}

:root.light .support-card:hover {
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.06);
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--radius);
    letter-spacing: -0.5px;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(10, 132, 255, 0.15);
    position: relative;
}

/* Gradient glow ring on hover - matching nav */
.footer-logo::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.4), rgba(191, 90, 242, 0.4));
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: scale(0.9);
}

.footer-brand:hover .footer-logo {
    transform: scale(1.1) rotate(3deg);
    box-shadow: 0 4px 20px rgba(10, 132, 255, 0.4), 0 0 0 2px rgba(191, 90, 242, 0.2);
    animation: logoPulse 0.6s ease;
}

.footer-brand:hover .footer-logo::after {
    opacity: 1;
    transform: scale(1);
    animation: glowPulse 1.5s ease-in-out infinite;
}

.footer-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: -0.02em;
    /* Default: animated gradient text */
    background: linear-gradient(90deg, var(--accent), var(--purple), var(--accent));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShiftSlow 4s ease-in-out infinite;
}

/* Enhanced faster animation on hover */
.footer-brand:hover .footer-name {
    animation: gradientShiftFast 1s ease infinite;
    filter: brightness(1.1);
}

.footer-center {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    justify-content: center;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.footer-links a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    position: relative;
}

.footer-links a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 8px;
    right: 8px;
    height: 1px;
    background: var(--accent-hover);
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.footer-links a:hover {
    color: var(--accent-hover);
    background: var(--accent-bg);
}

.footer-links a:active {
    transform: scale(0.96);
    transition: transform 0.1s ease;
}

.footer-links a:hover::after {
    transform: scaleX(1);
}

.footer-divider {
    color: var(--border);
    font-size: 10px;
}

.footer-copyright {
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.site-footer:hover .footer-copyright {
    opacity: 1;
}

.footer-risk {
    font-size: 10px;
    color: var(--text-dim);
    opacity: 0.7;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius);
    color: var(--text-dim);
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.footer-social-link:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-bg);
    transform: translateY(-2px);
}

.footer-social-link:active {
    transform: scale(0.92);
    transition: transform 0.1s ease;
}

.footer-social-link svg {
    width: 16px;
    height: 16px;
}

/* Keyboard Shortcuts Hint */
.footer-shortcuts {
    display: flex;
    align-items: center;
}

.keyboard-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-dim);
    font-size: 11px;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.keyboard-hint:hover {
    color: var(--text-main);
    border-color: var(--accent);
    background: var(--bg-panel);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.keyboard-hint:active {
    transform: scale(0.97);
}

.keyboard-hint kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-sub);
    box-shadow: 0 2px 0 var(--border), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.keyboard-hint:hover kbd {
    background: var(--bg-tertiary);
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 2px 0 rgba(10, 132, 255, 0.3);
    transform: translateY(-1px);
}

/* Standalone kbd elements - improved */
kbd.standalone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sub);
    box-shadow: 0 2px 0 var(--border), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    vertical-align: middle;
}

/* Kbd size variants */
kbd.kbd-sm {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 10px;
    border-radius: var(--radius-sm);
}

kbd.kbd-lg {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-size: 13px;
    border-radius: var(--radius-sm);
}

/* Footer responsive adjustments - tablet */
@media (max-width: 900px) {
    .footer-content {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }

    .footer-center {
        order: -1;
        width: 100%;
        justify-content: center;
    }

    .footer-copyright {
        order: 10;
        width: 100%;
        text-align: center;
        padding-top: 8px;
        border-top: 1px solid var(--border-subtle);
        margin-top: 4px;
    }
}

/* Footer responsive adjustments - mobile */
@media (max-width: 600px) {
    .site-footer {
        padding: 32px 16px 16px;
        margin-top: auto;
        padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
    }

    .footer-content {
        flex-direction: column;
        gap: 12px;
    }

    .footer-brand {
        display: none;
    }

    .footer-center {
        flex-direction: column;
        gap: 10px;
    }

    .footer-links {
        gap: 8px;
    }

    .footer-name {
        font-size: 11px;
    }

    .footer-links {
        font-size: 11px;
    }

    .footer-shortcuts {
        width: 100%;
        justify-content: center;
    }

    .keyboard-hint {
        flex: 1;
        max-width: 200px;
        justify-content: center;
    }

    .footer-copyright {
        font-size: 10px;
        padding-top: 10px;
        white-space: normal;
        text-align: center;
    }

    .footer-risk {
        display: block;
        margin-top: 2px;
    }
}

/* ============================================================================
   Editable Trade Fields
   ============================================================================ */

.editable-select {
    padding: 6px 28px 6px 10px;
    font-size: 12px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-main);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23989899' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    min-width: 100px;
    max-width: 160px;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.editable-select:hover {
    border-color: var(--border);
    background-color: var(--bg-panel);
}

.editable-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(10, 132, 255, 0.2);
}

.editable-select.saving {
    opacity: 0.7;
    pointer-events: none;
    border-color: var(--text-dim);
}

.editable-select.saved {
    border-color: var(--profit);
    background: var(--profit-bg);
}

.editable-select.error {
    border-color: var(--loss);
    background: var(--loss-bg);
    animation: shake 0.3s ease;
}

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

/* Make columns slightly wider for editable selects */
.col-entry-reason,
.col-exit-reason,
.col-signal {
    min-width: 120px;
}

/* Light mode adjustments */
:root.light .editable-select {
    background: var(--bg-main);
    border-color: var(--border);
}

/* ============================================================================
   Filter Loading State
   ============================================================================ */

/* Reduce opacity and show loading cursor during filter changes */
body.filters-loading .main-content {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

body.filters-loading {
    cursor: wait;
}

/* ============================================================================
   Dashboard Loading Screen
   ============================================================================ */

/* Hide dashboard content during initial load */
body.loading-dashboard .nav-container,
body.loading-dashboard .filters-bar,
body.loading-dashboard .main-content,
body.loading-dashboard .site-footer {
    opacity: 0;
    pointer-events: none;
}

/* SAFETY: CSS-only fallback to enable scrolling after 20s if JS fails
   This is a defense-in-depth measure - JS should normally handle this much faster */
body.loading-dashboard {
    animation: enable-scroll-safety 20s forwards;
}

@keyframes enable-scroll-safety {
    0%, 99% {
        /* Keep loading state for first 20 seconds */
    }
    100% {
        /* Force enable interaction after 20s */
        pointer-events: auto !important;
        overflow: auto !important;
    }
}

/* Ensure content elements can receive interaction after safety timeout */
body.loading-dashboard .main-content {
    animation: reveal-content-safety 20s forwards;
}

@keyframes reveal-content-safety {
    0%, 99% {
        opacity: 0;
        pointer-events: none;
    }
    100% {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Loading screen overlay */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    overflow: hidden;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Loading screen reuses aurora-bg + dash-bg-effects from auth pages.
   Override position:fixed to position:absolute so they stay within
   the loading-screen's fixed container.
   Allow overflow so aurora pseudo-elements (150% size, -40% offset)
   render fully like they do on auth pages. */
.loading-screen {
    overflow: visible;
}

.loading-screen .aurora-bg,
.loading-screen .dash-bg-effects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.loading-screen .aurora-bg::before,
.loading-screen .aurora-bg::after {
    position: absolute;
}

.loading-content {
    text-align: center;
    max-width: 440px;
    width: 100%;
    padding: 20px;
    position: relative;
    z-index: 1;
}

/* Card container — matches auth-card style */
.loading-card {
    background: var(--bg-panel);
    border-radius: var(--radius-xl, 16px);
    padding: 40px;
    box-shadow: var(--shadow-xl, 0 16px 64px rgba(0, 0, 0, 0.5));
    border: 1px solid var(--border-subtle);
    animation: loadingCardFadeIn 0.4s ease-out;
}

@keyframes loadingCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.loading-logo {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    border-radius: var(--radius-lg, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    color: white;
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.3);
    animation: loadingLogoPulse 2s ease-in-out infinite;
    position: relative;
}

@keyframes loadingLogoPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 16px rgba(10, 132, 255, 0.3);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 8px 32px rgba(10, 132, 255, 0.4);
    }
}

.loading-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 8px;
}

.loading-subtitle {
    color: var(--text-sub);
    font-size: 14px;
    margin-bottom: 32px;
}

.loading-spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
    width: 48px;
    height: 48px;
    margin-left: auto;
    margin-right: auto;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    box-shadow: 0 0 20px rgba(10, 132, 255, 0.15);
    position: relative;
    /* Smoother animation */
    will-change: transform;
}

/* Dual-ring spinner animation - inner ring with proper centering */
.loading-spinner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px;
    border: 2px solid transparent;
    border-bottom-color: var(--purple);
    border-radius: 50%;
    animation: spinReverse 1.5s linear infinite;
}

@keyframes spinReverse {
    to { transform: rotate(-360deg); }
}

.loading-status {
    font-size: 14px;
    color: var(--text-sub);
    margin-bottom: 16px;
    min-height: 20px;
    transition: opacity 0.2s ease;
}

.loading-progress {
    width: 100%;
    height: 4px;
    background: var(--bg-panel-dark);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.loading-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--purple));
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Reveal animation for dashboard content */
/* --- Dashboard Entrance Animations (after loading screen) --- */
body:not(.loading-dashboard) .nav-container,
body:not(.loading-dashboard) .dashboard-hero,
body:not(.loading-dashboard) .banner-stack,
body:not(.loading-dashboard) .filters-bar,
body:not(.loading-dashboard) .main-content,
body:not(.loading-dashboard) .site-footer {
    animation: dashboardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes dashboardReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Staggered reveal for sections */
body:not(.loading-dashboard) .nav-container { animation-delay: 0s; }
body:not(.loading-dashboard) .dashboard-hero { animation-delay: 0.05s; }
body:not(.loading-dashboard) .banner-stack { animation-delay: 0.08s; }
body:not(.loading-dashboard) .filters-bar { animation-delay: 0.1s; }
body:not(.loading-dashboard) .main-content { animation-delay: 0.15s; }
body:not(.loading-dashboard) .site-footer { animation-delay: 0.25s; }

/* Inner section stagger within main-content */
body:not(.loading-dashboard) .main-content .open-positions-panel { animation: dashboardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both; }
body:not(.loading-dashboard) .main-content .pending-orders-panel { animation: dashboardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.19s both; }
body:not(.loading-dashboard) .main-content .kpi-grid { animation: dashboardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
body:not(.loading-dashboard) .main-content .chart-panel { animation: dashboardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both; }
body:not(.loading-dashboard) .main-content .calendar-agenda-wrapper { animation: dashboardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }
body:not(.loading-dashboard) .main-content .instances-grid { animation: dashboardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }

/* KPI cards get individual stagger */
body:not(.loading-dashboard) .kpi-card:nth-child(1) { animation: kpiCardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both; }
body:not(.loading-dashboard) .kpi-card:nth-child(2) { animation: kpiCardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both; }
body:not(.loading-dashboard) .kpi-card:nth-child(3) { animation: kpiCardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both; }
body:not(.loading-dashboard) .kpi-card:nth-child(4) { animation: kpiCardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.34s both; }

@keyframes kpiCardReveal {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Mobile: skip all dashboard staggered reveals — too many GPU layers */
@media (max-width: 768px) {
    body:not(.loading-dashboard) .dashboard-hero,
    body:not(.loading-dashboard) .banner-stack,
    body:not(.loading-dashboard) .filters-bar,
    body:not(.loading-dashboard) .main-content,
    body:not(.loading-dashboard) .site-footer,
    body:not(.loading-dashboard) .main-content .open-positions-panel,
    body:not(.loading-dashboard) .main-content .pending-orders-panel,
    body:not(.loading-dashboard) .main-content .kpi-grid,
    body:not(.loading-dashboard) .main-content .chart-panel,
    body:not(.loading-dashboard) .main-content .calendar-agenda-wrapper,
    body:not(.loading-dashboard) .main-content .instances-grid,
    body:not(.loading-dashboard) .kpi-card:nth-child(1),
    body:not(.loading-dashboard) .kpi-card:nth-child(2),
    body:not(.loading-dashboard) .kpi-card:nth-child(3),
    body:not(.loading-dashboard) .kpi-card:nth-child(4) {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =============================================
   Generic Page Reveal Animations
   Used by trades, stats, support, profile pages
   (reuses @keyframes pageReveal from line ~1032)
   ============================================= */
.reveal-on-load {
    opacity: 0;
    animation: pageReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.reveal-delay-1 { animation-delay: 0.05s; }
.reveal-delay-2 { animation-delay: 0.1s; }
.reveal-delay-3 { animation-delay: 0.15s; }
.reveal-delay-4 { animation-delay: 0.2s; }
.reveal-delay-5 { animation-delay: 0.25s; }
.reveal-delay-6 { animation-delay: 0.3s; }

/* Light mode adjustments for loading screen */
:root.light .loading-screen {
    background: var(--bg-main);
}

:root.light .loading-orb {
    filter: blur(80px);
    opacity: 0.15;
}

:root.light .loading-card {
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.1);
}

:root.light .loading-logo {
    box-shadow: 0 4px 16px rgba(0, 122, 255, 0.25);
}

/* @keyframes spin - defined at ~line 1093 */

/* Loading screen retry button */
.loading-retry {
    margin-top: 24px;
    padding: 12px 24px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.loading-retry:hover {
    background: var(--accent-hover);
    transform: scale(1.02);
}

.loading-retry:active {
    transform: scale(0.98);
}

/* Loading screen details (EA status, instances, symbols) */
.loading-details {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.loading-detail {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    padding: 8px 12px;
    background: var(--bg-panel-dark);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    animation: detailSlideIn 0.4s ease-out backwards;
}

.loading-detail:nth-child(1) { animation-delay: 0s; }
.loading-detail:nth-child(2) { animation-delay: 0.1s; }
.loading-detail:nth-child(3) { animation-delay: 0.2s; }
.loading-detail:nth-child(4) { animation-delay: 0.3s; }

@keyframes detailSlideIn {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Online state highlight */
.loading-detail.online {
    border-color: rgba(52, 199, 89, 0.3);
    background: rgba(52, 199, 89, 0.05);
}

.loading-detail .detail-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.loading-detail .detail-dot.offline {
    background: var(--text-dim);
}

.loading-detail .detail-dot.connecting {
    background: var(--orange);
    animation: pulse-dot 1s ease-in-out infinite, spin-dot 2s linear infinite;
    box-shadow: 0 0 6px rgba(255, 159, 10, 0.4);
}

@keyframes spin-dot {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.loading-detail .detail-dot.online {
    background: var(--profit);
    box-shadow: 0 0 10px rgba(52, 199, 89, 0.6);
    animation: loadingGlowPulse 2s ease-in-out infinite;
}

@keyframes loadingGlowPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(52, 199, 89, 0.4); }
    50% { box-shadow: 0 0 12px rgba(52, 199, 89, 0.7); }
}

.loading-detail .detail-dot.error {
    background: var(--loss);
    box-shadow: 0 0 8px rgba(255, 69, 58, 0.5);
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.loading-detail .detail-label {
    color: var(--text-sub);
    min-width: 100px;
    font-weight: 500;
}

.loading-detail .detail-value {
    color: var(--text-main);
    font-weight: 600;
    font-family: var(--font-mono);
    margin-left: auto;
    transition: color 0.3s ease;
}

.loading-detail.online .detail-value {
    color: var(--profit);
}

/* Waiting for EA message */
.loading-waiting {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-panel-dark);
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
}

.loading-waiting p {
    font-size: 13px;
    color: var(--text-sub);
    margin: 0;
    line-height: 1.5;
}

.loading-waiting .waiting-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-dim);
}

/* Loading screen mobile responsive */
@media (max-width: 480px) {
    .loading-card {
        padding: 28px 20px;
    }
    .loading-logo {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }
    .loading-title {
        font-size: 20px;
    }
}

/* Loading screen reduced motion */
@media (prefers-reduced-motion: reduce) {
    .loading-orb,
    .loading-orb-1,
    .loading-orb-2 {
        animation: none !important;
    }
    .loading-card {
        animation: none !important;
    }
    .loading-logo {
        animation: none !important;
    }
    .loading-spinner {
        animation-duration: 2s !important;
    }
}

/* ============================================================================
   Tooltip System - Pure CSS tooltips
   ============================================================================ */

/* Base tooltip styles using data-tooltip attribute */
[data-tooltip] {
    position: relative;
    cursor: help;
}

[data-tooltip]::before,
[data-tooltip]::after {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 9999;
}

/* Tooltip bubble */
[data-tooltip]::after {
    content: attr(data-tooltip);
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    color: white;
    background: var(--bg-tooltip, #1c1c1e);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Tooltip arrow */
[data-tooltip]::before {
    content: '';
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--bg-tooltip, #1c1c1e);
}

/* Show on hover/focus */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus::before,
[data-tooltip]:focus::after {
    visibility: visible;
    opacity: 1;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
    transform: translateX(-50%) translateY(0);
}

/* Tooltip position variants */
[data-tooltip-position="bottom"]::after {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
}

[data-tooltip-position="bottom"]::before {
    bottom: auto;
    top: calc(100% + 2px);
    border-top-color: transparent;
    border-bottom-color: var(--bg-tooltip, #1c1c1e);
}

[data-tooltip-position="bottom"]:hover::after,
[data-tooltip-position="bottom"]:focus::after {
    transform: translateX(-50%) translateY(0);
}

[data-tooltip-position="left"]::after {
    bottom: auto;
    left: auto;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(4px);
}

[data-tooltip-position="left"]::before {
    bottom: auto;
    left: auto;
    right: calc(100% + 2px);
    top: 50%;
    transform: translateY(-50%);
    border-top-color: transparent;
    border-left-color: var(--bg-tooltip, #1c1c1e);
}

[data-tooltip-position="left"]:hover::after,
[data-tooltip-position="left"]:focus::after {
    transform: translateY(-50%) translateX(0);
}

[data-tooltip-position="right"]::after {
    bottom: auto;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%) translateX(-4px);
}

[data-tooltip-position="right"]::before {
    bottom: auto;
    left: calc(100% + 2px);
    top: 50%;
    transform: translateY(-50%);
    border-top-color: transparent;
    border-right-color: var(--bg-tooltip, #1c1c1e);
}

[data-tooltip-position="right"]:hover::after,
[data-tooltip-position="right"]:focus::after {
    transform: translateY(-50%) translateX(0);
}

/* Light mode tooltip */
:root.light [data-tooltip]::after {
    background: var(--bg-panel);
    color: var(--text-main);
    box-shadow: var(--shadow);
}

:root.light [data-tooltip]::before {
    border-top-color: var(--bg-panel);
}

:root.light [data-tooltip-position="bottom"]::before {
    border-top-color: transparent;
    border-bottom-color: var(--bg-panel);
}

:root.light [data-tooltip-position="left"]::before {
    border-top-color: transparent;
    border-left-color: var(--bg-panel);
}

:root.light [data-tooltip-position="right"]::before {
    border-top-color: transparent;
    border-right-color: var(--bg-panel);
}

/* Multi-line tooltips */
[data-tooltip-wrap]::after {
    white-space: normal;
    width: max-content;
    max-width: 220px;
    text-align: left;
}

/* Disable tooltip on touch devices (conflicts with tap) */
@media (hover: none) and (pointer: coarse) {
    [data-tooltip]::before,
    [data-tooltip]::after {
        display: none;
    }
}

/* ============================================================================
   Scroll to Top Button
   ============================================================================ */
.scroll-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 1000;
    box-shadow: var(--shadow-sm);
    color: var(--text-sub);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.3);
}

.scroll-to-top:active {
    transform: translateY(0) scale(0.95);
}

.scroll-to-top svg {
    width: 20px;
    height: 20px;
    transition: transform var(--transition);
}

.scroll-to-top:hover svg {
    transform: translateY(-2px);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
}

/* Respect safe area insets */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .scroll-to-top {
        bottom: calc(24px + env(safe-area-inset-bottom));
    }

    @media (max-width: 768px) {
        .scroll-to-top {
            bottom: calc(16px + env(safe-area-inset-bottom));
        }
    }
}

/* ============================================================================
   Touch Device Enhancements (v49)
   ============================================================================ */
/* Increase touch targets on touch devices for better accessibility */
@media (hover: none) and (pointer: coarse) {
    /* Filter inputs - ensure 44px minimum touch target */
    .filter-group select,
    .filter-group input[type="date"],
    .filter-group input[type="number"],
    .filter-group input[type="text"] {
        min-height: 44px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Touch feedback for buttons */
    .btn:active {
        background: var(--bg-selected);
        box-shadow: inset 0 0 0 2px var(--accent-bg);
    }

    /* Slightly larger nav links for touch */
    .nav-link {
        padding: 12px 16px;
    }

    /* Better touch feedback on cards */
    .kpi-card:active,
    .stat-card:active,
    .instance-card:active {
        transform: scale(0.98);
    }

    /* Quick stats touch feedback */
    .quick-stat:active {
        transform: scale(0.96);
        background: var(--bg-selected);
    }

    /* Settings instance cards touch feedback */
    .settings-instance-card:active {
        transform: scale(0.97);
    }

    /* Modal close button larger touch target */
    .modal-close {
        min-width: 44px;
        min-height: 44px;
    }

    /* Toast dismiss swipe hint */
    .toast {
        cursor: grab;
    }
}

/* ============================================================================
   Improved Visual Feedback (v52)
   ============================================================================ */

/* Active/tap state with subtle inset shadow for pressed feeling */
.btn:active,
.btn-primary:active,
.btn-ghost:active {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Smooth scale transitions for all interactive elements */
.btn,
.nav-link,
.quick-stat,
.kpi-card,
.instance-card,
.settings-instance-card,
.modal-close {
    transform-origin: center center;
    will-change: transform;
}

/* Pull-to-refresh improvements */
.pull-to-refresh.visible {
    transform: translateY(0);
    opacity: 1;
}

.pull-to-refresh.pulling {
    background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-main) 100%);
}

.pull-to-refresh.releasing {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Nav account badge improvements */
.nav-account {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-sub);
    background: var(--bg-tertiary);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    margin-left: 8px;
    border: 1px solid var(--border-subtle);
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-account:hover {
    background: var(--bg-selected);
    border-color: var(--border);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.nav-account:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

/* Empty nav-account should be hidden */
.nav-account:empty {
    display: none;
}

/* Quick date select improvements */
.quick-date-select {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: var(--radius);
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}

.quick-date-select:hover {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.quick-date-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

/* Loading spinner animation improvements */
/* @keyframes spin - defined at ~line 1093 */

.spinner-icon path:last-child {
    animation: spin 0.8s linear infinite;
    transform-origin: center;
}

/* Improved table hover states */
.trades-table tbody tr:hover {
    background: var(--bg-selected);
}

.trades-table tbody tr:active {
    background: var(--bg-tertiary);
}

/* Better focus ring for accessibility */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Remove outline for mouse/touch users */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Info banner improvements */
.info-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background: var(--accent-bg);
    border: 1px solid rgba(10, 132, 255, 0.3);
    border-radius: var(--radius-lg);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-main);
}

.info-banner svg {
    flex-shrink: 0;
    color: var(--accent);
    margin-top: 1px;
}

.info-banner code {
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-family: var(--font-mono);
}

:root.light .info-banner code {
    background: rgba(0, 0, 0, 0.06);
}

/* API config row layout */
.api-config-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.api-info {
    flex: 1;
    min-width: 200px;
}

.api-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 8px;
}

.api-key-display {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.api-key-display code {
    font-family: var(--font-mono);
    font-size: 14px;
    background: var(--bg-main);
    padding: 8px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    word-break: break-all;
}

.api-hint {
    font-size: 12px;
    color: var(--text-sub);
}

.api-hint code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
}

.api-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Mobile API config */
@media (max-width: 600px) {
    .api-config-row {
        flex-direction: column;
    }

    .api-actions {
        width: 100%;
    }

    .api-actions .btn {
        flex: 1;
    }
}

/* Section title with inline controls (settings page) */
.section-title.with-controls {
    justify-content: space-between;
}

.section-title .template-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.template-select {
    font-size: 12px;
    padding: 6px 28px 6px 10px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-main);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%23989899' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

/* Settings sections for forms */
.settings-section {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-subtle);
}

.settings-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.settings-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 16px;
}

.settings-section-header svg {
    color: var(--accent);
    flex-shrink: 0;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
}

/* Target options for push modal */
.target-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.target-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}

.target-option:hover {
    border-color: var(--border);
    background: var(--bg-elevated);
}

.target-option.selected {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.target-option input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--accent);
}

.target-option-content {
    flex: 1;
}

.target-option-title {
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 4px;
}

.target-option-desc {
    font-size: 12px;
    color: var(--text-sub);
}

.target-filter {
    margin-top: 12px;
}

.target-filter select {
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-main);
}

.instance-checkbox-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 150px;
    overflow-y: auto;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    font-size: 12px;
    cursor: pointer;
    transition: color var(--transition), background-color var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}

.checkbox-item:hover {
    border-color: var(--accent);
}

.checkbox-item:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-bg);
}

/* ============================================================================
   Mobile Touch Enhancements
   ============================================================================ */

/* Touch ripple effect for interactive elements */
@media (hover: none) and (pointer: coarse) {
    /* Ensure all buttons have proper touch targets */
    .btn,
    .btn-icon,
    .nav-link,
    .filter-toggle-btn,
    .pagination button,
    .calendar-nav button,
    .column-toggle-btn,
    .note-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Enhanced tap feedback with scale */
    .btn:active,
    .btn-icon:active,
    .kpi-card:active,
    .instance-card:active,
    .settings-instance-card:active,
    .quick-stat:active,
    .agenda-item:active,
    .filter-toggle-btn:active {
        transform: scale(0.96);
        transition: transform 0.1s ease;
    }

    /* Subtle background flash on tap */
    .trades-table tbody tr:active:not(.trade-details-row) {
        background: var(--bg-selected);
        transition: background 0.05s ease;
    }

    /* Nav links tap feedback */
    .nav-link:active {
        transform: scale(0.97);
        opacity: 0.85;
    }

    /* Pagination tap feedback */
    .pagination button:active:not(:disabled) {
        transform: scale(0.95);
        background: var(--bg-selected);
    }

    /* Calendar day tap enhancement */
    .calendar-day:active:not(.empty) {
        transform: scale(0.92);
        transition: transform 0.08s ease;
    }

    /* Filter panel touch-friendly spacing */
    .filters-panel .filter-group {
        min-height: 44px;
    }

    .filters-panel select,
    .filters-panel input[type="date"],
    .filters-panel input[type="number"],
    .filters-panel input[type="text"] {
        min-height: 44px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Modal close button touch target */
    .modal-close-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }

    /* Trade note button touch target */
    .note-btn {
        padding: 8px;
    }

    /* Disable hover effects that don't make sense on touch */
    .btn:hover,
    .btn-icon:hover,
    .kpi-card:hover,
    .instance-card:hover {
        transform: none;
    }
}

/* Pull-to-refresh iOS safe area */
.pull-to-refresh {
    padding-top: max(16px, env(safe-area-inset-top, 16px));
}

/* Footer iOS safe area bottom padding */
.site-footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
}

/* Login page iOS safe area */
.login-page .login-overlay {
    padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
}

/* Modal safe area for iOS */
.modal-content {
    margin-bottom: max(20px, env(safe-area-inset-bottom, 20px));
}

/* Very small screen optimizations (< 380px) */
@media (max-width: 380px) {
    /* Even more compact status bar */
    .status-bar-main {
        padding: 6px 8px;
    }

    .filter-toggle-btn {
        padding: 6px 8px;
        min-width: 36px;
    }

    .filter-toggle-btn .filter-text {
        display: none;
    }

    .filter-badge {
        position: absolute;
        top: -4px;
        right: -4px;
    }

    /* Smaller KPI cards */
    .kpi-grid {
        gap: 8px;
    }

    .kpi-card {
        padding: 12px;
    }

    .kpi-value {
        font-size: 18px;
    }

    /* More compact navigation */
    .nav-brand {
        gap: 6px;
    }

    .nav-logo {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }

    .nav-title {
        font-size: 14px;
    }

    .nav-account {
        display: none;
    }

    /* Compact footer */
    .site-footer {
        padding: 32px 8px 12px;
    }

    .footer-content {
        gap: 8px;
    }

    .footer-logo {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
}

/* Mobile trades table - force horizontal scroll */
@media (max-width: 768px) {
    .trades-table {
        table-layout: auto !important;
        min-width: 1000px !important;
    }

    .trades-table colgroup col {
        width: auto !important;
    }

    .trades-table th,
    .trades-table td {
        white-space: nowrap;
        padding: 10px 12px;
    }
}

/* Mobile status bar - wrap to two rows */
@media (max-width: 768px) {
    .status-bar-main {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        gap: 8px 12px;
        padding: 10px 12px;
    }

    /* First row: filter button + status indicators */
    .filter-toggle-btn {
        order: 1;
        flex-shrink: 0;
    }

    /* Status indicators on the right of first row */
    .status-indicators {
        order: 2;
        flex-shrink: 0;
        margin-left: auto;
        gap: 8px;
    }

    /* Show ALL status text on mobile - no truncation */
    .status-item .status-text {
        display: inline !important;
        max-width: none !important;
        overflow: visible !important;
        text-overflow: clip !important;
        white-space: nowrap;
        font-size: 12px;
    }

    /* Quick stats on second row - full width */
    .quick-stats {
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        overflow: visible !important;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding-top: 8px;
        border-top: 1px solid var(--border-subtle);
        margin-top: 4px;
    }
}

/* Very small screens - keep same layout but smaller text */
@media (max-width: 400px) {
    .status-bar-main {
        gap: 6px 10px;
        padding: 8px 10px;
    }

    .status-item .status-text {
        font-size: 11px;
    }

    .quick-stats {
        padding-top: 6px;
        margin-top: 4px;
    }

    /* Show all status text */
    .status-indicators .status-text {
        display: inline !important;
    }
}

/* ============================================================================
   Dashboard & Profile Overhaul v3 — Refined Apple Design
   ============================================================================ */

/* --- Dashboard Ambient Background --- */
.page-dashboard {
    position: relative;
}

/* Dashboard ambient gradient — removed, now uses unified body::before gradient mesh */

/* Ambient gradient for all pages — uses unified body::before gradient mesh */

.page-dashboard .dashboard-hero,
.page-dashboard .banner-stack,
.page-dashboard .main-content,
.page-dashboard .site-footer {
    position: relative;
    z-index: 1;
}

/* Filters bar must be above main-content so expanded dropdowns are clickable */
.page-dashboard .filters-bar {
    position: relative;
    z-index: 10;
}

/* --- Dashboard Hero Panel --- */
.dashboard-hero {
    border-radius: var(--radius-xl);
    padding: 28px 32px;
    margin: 16px 16px 16px;
    position: relative;
    overflow: hidden;
    animation: kpiSlideIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.dashboard-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--purple), var(--teal));
}

.dashboard-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.dashboard-hero-greeting {
    font-size: 14px;
    color: var(--text-sub);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dashboard-hero-greeting .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 600;
    background: rgba(152,152,157,0.15);
    color: var(--text-sub);
    transition: background 0.3s ease, color 0.3s ease;
}

.dashboard-hero-greeting .status-badge.online {
    background: rgba(52,199,89,0.15);
    color: var(--profit);
}

.dashboard-hero-greeting .status-badge .status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.dashboard-hero-greeting .status-badge.online .status-dot {
    animation: headerStatusPulse 2s ease-in-out infinite;
}

.dashboard-hero-greeting .last-updated {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-left: auto;
}

.section-title-detail {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-sub);
    margin-left: 8px;
}

.hero-balance-section {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-balance-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.hero-balance-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-main);
    font-family: var(--font-mono);
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.hero-metrics {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 20px;
    border-top: 1px solid var(--border-light);
}

.hero-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 100px;
}

.hero-metric-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-dim);
}

.hero-metric-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-main);
    font-family: var(--font-mono);
    transition: color 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-metric-value.profit { color: var(--profit); }
.hero-metric-value.loss { color: var(--loss); }

/* Limit breach banner variant */
.maintenance-banner.banner-limit-breach {
    background: linear-gradient(135deg, var(--loss-bg, rgba(255,59,48,0.12)), rgba(255,59,48,0.06));
    border-color: var(--loss);
}
.maintenance-banner.banner-limit-breach .maintenance-banner-icon { color: var(--loss); }
.maintenance-banner.banner-limit-breach strong { color: var(--loss); }

/* --- DD Budget Pool Panel --- */
.dd-budget-panel {
    background: linear-gradient(135deg, rgba(10,132,255,0.08), rgba(10,132,255,0.03));
    border: 1px solid rgba(10,132,255,0.15);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
    transition: opacity 0.3s ease;
}
.dd-budget-panel.hidden { display: none; }
.dd-budget-row { display: flex; flex-direction: column; gap: 8px; }
.dd-budget-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-sub);
    font-size: 12px;
}
.dd-budget-title {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-sub);
}
.dd-budget-summary {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}
.dd-budget-bar-wrap { width: 100%; }
.dd-budget-bar {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: var(--radius-xs);
    overflow: hidden;
    display: flex;
}
.dd-budget-seg {
    height: 100%;
    transition: width 0.4s ease;
    min-width: 0;
}
.dd-budget-seg.consumed {
    background: var(--loss);
    border-radius: 4px 0 0 4px;
}
.dd-budget-seg.floating {
    background: var(--warning);
    opacity: 0.7;
}
.dd-budget-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 11px;
    color: var(--text-sub);
}
.dd-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.dd-legend-item strong {
    font-family: var(--font-mono);
    color: var(--text-main);
    font-weight: 600;
}
.dd-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}
.dd-dot.consumed { background: var(--loss); }
.dd-dot.floating { background: var(--warning); }
.dd-dot.available { background: var(--profit); }
.dd-pool-base {
    margin-left: auto;
    opacity: 0.6;
}
/* DD Budget Gauge Layout */
.dd-budget-row { display: flex; flex-direction: row; align-items: center; gap: 16px; }
.dd-budget-gauge-wrap {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}
.dd-budget-gauge-wrap canvas { width: 100px; height: 100px; }
.dd-gauge-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1.2;
}
.dd-gauge-pct {
    display: block;
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
}
.dd-gauge-label {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-sub);
    opacity: 0.7;
}
.dd-budget-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 480px) {
    .dd-budget-row { flex-direction: column; gap: 8px; }
    .dd-budget-gauge-wrap { width: 72px; height: 72px; margin: 0 auto; }
    .dd-budget-gauge-wrap canvas { width: 72px; height: 72px; }
    .dd-gauge-pct { font-size: 14px; }
    .dd-gauge-label { font-size: 8px; }
    .dd-budget-legend {
        gap: 6px;
        font-size: 10px;
        justify-content: center;
    }
    .dd-legend-item {
        gap: 3px;
    }
    .dd-pool-base {
        margin-left: 0;
    }
    .dd-budget-panel {
        padding: 8px 10px;
    }
    .dd-budget-summary {
        font-size: 11px;
    }
}
@media (max-width: 768px) {
    .dd-budget-row {
        gap: 12px;
    }
    .dd-budget-gauge-wrap {
        width: 88px;
        height: 88px;
    }
    .dd-budget-gauge-wrap canvas {
        width: 88px;
        height: 88px;
    }
    .dd-gauge-pct {
        font-size: 16px;
    }
    .dd-budget-legend {
        gap: 10px;
    }
    .dd-budget-summary {
        font-size: 12px;
    }
    .dd-budget-panel {
        padding: 10px 12px;
    }
}
:root.light .dd-budget-panel {
    background: linear-gradient(135deg, rgba(10,132,255,0.06), rgba(10,132,255,0.02));
    border: 1px solid rgba(10,132,255,0.12);
}
:root.light .dd-budget-bar {
    background: rgba(0,0,0,0.06);
}
:root.light .dd-legend-item strong {
    color: var(--text-main);
}
/* DD Analysis Section — inherits .chart-panel / .chart-header / .chart-title from base */
.dd-analysis-section.hidden { display: none; }
.dd-analysis-section .charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 28px;
}
@media (max-width: 800px) {
    .dd-analysis-section .charts-row { grid-template-columns: 1fr; }
}
.dd-analysis-section .chart-panel { height: 100%; }

/* Reveal animation when section becomes visible */
.dd-analysis-section.dd-reveal {
    animation: ddSectionReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.dd-analysis-section.dd-reveal .chart-panel:nth-child(1) { animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.1s; opacity: 0; }
.dd-analysis-section.dd-reveal .chart-panel:nth-child(2) { animation: fadeInUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.2s; opacity: 0; }
.dd-analysis-section.dd-reveal .charts-row:nth-child(3) .chart-panel:nth-child(1) { animation-delay: 0.25s; }
.dd-analysis-section.dd-reveal .charts-row:nth-child(3) .chart-panel:nth-child(2) { animation-delay: 0.3s; }
@keyframes ddSectionReveal {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* DD header badge (shows DD% setting) */
.dd-header-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--loss);
    background: rgba(255, 69, 58, 0.1);
    border: 1px solid rgba(255, 69, 58, 0.2);
    border-radius: var(--radius);
    padding: 2px 8px;
    letter-spacing: 0.3px;
    font-variant-numeric: tabular-nums;
}
.dd-header-badge:empty { display: none; }

/* DD doughnut center label */
.dd-doughnut-center {
    position: absolute;
    top: 50%;
    left: calc(50% - 40px);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 1;
}
.dd-doughnut-total {
    font-size: 16px;
    font-weight: 700;
    color: var(--loss);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.dd-doughnut-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* DD swatch colors */
.legend-swatch.zone.c-dd-remaining { background: var(--profit); opacity: 0.6; }
.legend-swatch.zone.c-dd-consumed  { background: var(--loss);   opacity: 0.5; }

/* Admin DD Analysis Panel */
.admin-dd-analysis { margin-top: 16px; }
.admin-dd-analysis h4 { display: flex; align-items: center; gap: 8px; }
.dd-analysis-status {
    margin-left: auto;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    text-transform: none;
}
.admin-dd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 10px;
}
@media (max-width: 768px) {
    .admin-dd-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .admin-dd-chart-box {
        height: 150px;
    }
    .admin-dd-full .admin-dd-chart-box {
        height: 130px;
    }
    .admin-dd-full {
        margin-top: 10px;
    }
    .admin-dd-analysis {
        margin-top: 12px;
    }
}
.admin-dd-chart-wrap { position: relative; }
.admin-dd-chart-label {
    font-size: 11px;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
    font-weight: 600;
}
.admin-dd-chart-box {
    position: relative;
    height: 180px;
    border-radius: var(--radius);
    background: rgba(255,255,255,0.02);
    overflow: hidden;
}
:root.light .admin-dd-chart-box { background: rgba(0,0,0,0.02); }
.admin-dd-full { margin-top: 12px; }
.admin-dd-full .admin-dd-chart-box { height: 160px; }
.admin-dd-legend { justify-content: flex-start; padding: 4px 0 0; }
.admin-dd-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 11px;
    opacity: 0.7;
}
.admin-dd-empty.hidden { display: none; }

/* DD Chart Empty State (stats page) */
.dd-chart-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: 0.3px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.015) 0%, transparent 70%);
    border-radius: var(--radius);
}
:root.light .dd-chart-empty {
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.015) 0%, transparent 70%);
}
.dd-chart-empty svg {
    opacity: 0.2;
}
.dd-chart-empty span {
    opacity: 0.5;
}
.dd-chart-empty.hidden { display: none; }

/* --- Glass Card Mixin --- uses glass tokens with real backdrop-filter */
/* Glass properties now provided by the unified glass rule above */

/* --- Frosted KPI Card Enhancement --- */
/* Glass properties now provided by the unified glass rule above */

/* KPI Card accent borders - visible on hover only */
.kpi-card.profit-accent::before {
    background: linear-gradient(90deg, var(--profit), var(--teal));
}

.kpi-card.loss-accent::before {
    background: linear-gradient(90deg, var(--loss), var(--orange));
}

.kpi-card.neutral-accent::before {
    background: linear-gradient(90deg, var(--accent), var(--teal));
}

/* --- Chart Timeframe Pills --- */
.chart-timeframe-pills {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
}

.chart-timeframe-pill {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-sub);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.chart-timeframe-pill:hover {
    color: var(--text-main);
    background: var(--bg-panel-dark);
}

.chart-timeframe-pill.active {
    color: white;
    background: var(--accent);
    box-shadow: 0 2px 6px rgba(10, 132, 255, 0.3);
}

/* --- Chart Legend Pills --- */
.chart-legend.pill-style {
    display: flex;
    gap: 8px;
    padding: 8px 0;
    justify-content: center;
}

.chart-legend.pill-style .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-sub);
    border: 1px solid var(--border-light);
}

/* --- Banner Stack --- */
.banner-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: calc(100% - 48px);
    max-width: 1600px;
    margin: 0 auto 16px;
    padding: 0;
}

.banner-stack:empty {
    display: none;
}

/* --- Instance Grid Compact Mode --- */
.instances-grid.compact {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.instances-grid.compact .instance-row {
    gap: 4px;
}

.instances-grid.compact .instance-group-header {
    padding: 0 1px;
}

.instances-grid.compact .instance-group-symbol {
    font-size: 11px;
}

.instances-grid.compact .instance-group-pnl {
    font-size: 10px;
}

/* In compact mode, cards grid within each symbol group */
.instances-grid.compact .instance-group-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 6px;
}

/* Compact card overrides - truly dense */
.instances-grid.compact .instance-card {
    padding: 8px 10px;
    min-width: 0;
    min-height: auto;
}

/* Hide chart and extra stats in compact mode for density */
.instances-grid.compact .instance-chart {
    display: none;
}

.instances-grid.compact .stats-row.today-row,
.instances-grid.compact .stats-row.heartbeat-row {
    display: none;
}

/* Tight spacing in compact mode */
.instances-grid.compact .instance-header {
    margin-bottom: 4px;
}

.instances-grid.compact .instance-symbol {
    font-size: 13px;
}

.instances-grid.compact .instance-stats {
    gap: 2px;
}

.instances-grid.compact .stats-row {
    padding: 2px 0;
    font-size: 12px;
}

/* Compact badges - smaller */
.instances-grid.compact .instance-badges {
    gap: 3px;
}

.instances-grid.compact .instance-status {
    font-size: 9px;
    padding: 1px 5px;
    gap: 3px;
}

.instances-grid.compact .instance-status::before {
    width: 4px;
    height: 4px;
}

.instances-grid.compact .instance-tf {
    font-size: 10px;
    padding: 1px 5px;
}

/* Remove loading bar in compact — too subtle */
.instances-grid.compact .instance-card::before {
    display: none;
}

.instances-view-toggle {
    display: flex;
    gap: 4px;
    padding: 3px;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
}

.instances-view-btn {
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-sub);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.instances-view-btn:hover { color: var(--text-main); }
.instances-view-btn.active { background: var(--accent); color: white; }

/* --- Profile Hero --- */
.profile-hero {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 32px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.profile-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--purple));
}

.profile-hero-content {
    display: flex;
    align-items: center;
    gap: 24px;
}

.profile-hero-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.25);
}

.profile-hero-info {
    flex: 1;
    min-width: 0;
}

.profile-hero-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 6px;
    line-height: 1.2;
}

.profile-hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--text-sub);
}

.profile-hero-meta .account-badge {
    background: var(--profit-bg);
    color: var(--profit);
    padding: 3px 10px;
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.profile-hero-meta .account-badge.trial {
    background: var(--accent-bg);
    color: var(--accent);
}

.profile-hero-meta .account-badge.cancelling {
    background: var(--orange-bg);
    color: var(--orange);
}

.profile-hero-actions {
    flex-shrink: 0;
}

/* --- Inline Edit --- */
.inline-edit-field {
    position: relative;
}

.inline-edit-field .info-value {
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.inline-edit-field .info-value:hover {
    border-color: var(--accent);
    background: var(--bg-panel);
}

.inline-edit-field .edit-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.inline-edit-field:hover .edit-icon {
    opacity: 1;
}

/* Touch devices: always show edit icon since hover doesn't work */
@media (hover: none), (max-width: 768px) {
    .inline-edit-field .edit-icon {
        opacity: 0.5;
    }
    .inline-edit-field:active .edit-icon {
        opacity: 1;
    }
}

.inline-edit-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-elevated);
    border: 2px solid var(--accent);
    border-radius: var(--radius-lg);
    color: var(--text-main);
    font-size: 16px;
    font-weight: 500;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}

.inline-edit-input:focus {
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.2);
}

.inline-edit-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.inline-edit-actions .btn-save {
    padding: 6px 14px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.inline-edit-actions .btn-save:hover { background: var(--accent-hover); }

.inline-edit-actions .btn-cancel {
    padding: 6px 14px;
    background: var(--bg-elevated);
    color: var(--text-sub);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.inline-edit-actions .btn-cancel:hover { background: var(--bg-panel-dark); color: var(--text-main); }

.inline-edit-input-wrapper {
    margin-top: 4px;
}

.inline-edit-save,
.inline-edit-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    border: none;
}

.inline-edit-save {
    background: var(--accent);
    color: white;
}

.inline-edit-save:hover {
    background: var(--accent-hover);
}

.inline-edit-cancel {
    background: var(--bg-elevated);
    color: var(--text-sub);
    border: 1px solid var(--border);
}

.inline-edit-cancel:hover {
    background: var(--bg-panel-dark);
    color: var(--text-main);
}

.inline-edit-field.editing .info-value {
    display: none;
}

/* --- Referral Tab Classes --- */
.referral-link-card {
    background: linear-gradient(135deg, var(--profit-bg), var(--accent-bg));
    border: 1px solid var(--profit);
    border-radius: var(--radius-xl);
    padding: 24px;
    margin-bottom: 24px;
}

.referral-link-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.referral-link-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--profit), var(--accent));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.referral-link-title {
    font-weight: 700;
    font-size: 18px;
    color: var(--text-main);
}

.referral-link-subtitle {
    font-size: 13px;
    color: var(--text-sub);
}

.referral-link-row {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.referral-link-display {
    flex: 1;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-main);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.referral-link-display span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-copy-btn {
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--profit), rgb(40, 167, 69));
    color: white;
    border: none;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.referral-copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.3);
}

.referral-code-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    background: var(--bg-elevated);
    border-radius: var(--radius);
    padding: 8px 14px;
    font-size: 13px;
}

.referral-code-badge .label { color: var(--text-sub); }
.referral-code-badge .code { font-weight: 600; color: var(--accent); margin-left: 6px; }

.referral-steps-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 24px;
}

.referral-steps-card h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text-main);
}

.referral-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.referral-step {
    display: flex;
    gap: 12px;
}

.referral-step-number {
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
}

.referral-step-number.step-1 { background: var(--accent-bg); color: var(--accent); }
.referral-step-number.step-2 { background: var(--purple-bg); color: var(--purple); }
.referral-step-number.step-3 { background: var(--profit-bg); color: var(--profit); }

.referral-step-title { font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.referral-step-desc { font-size: 13px; color: var(--text-sub); }

/* Invitation Slots */
.invitation-slots-card {
    background: linear-gradient(135deg, var(--profit-bg) 0%, var(--accent-bg) 100%);
    border: 1px solid var(--profit);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 20px;
}

.invitation-slots-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.invitation-slots-label { font-size: 14px; color: var(--text-sub); margin-bottom: 4px; }

.invitation-slots-count {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-main);
}

.invitation-slots-count .used { color: var(--accent); }

.invitation-slots-visual {
    display: flex;
    gap: 8px;
}

.invitation-slot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 2px dashed var(--border);
    color: var(--text-muted);
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.invitation-slot.used {
    background: var(--accent);
    color: white;
    border: 2px solid var(--accent);
}

.invitation-slots-hint {
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

/* Referral Stats Grid */
.referral-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.referral-stat-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
}

.referral-stat-value {
    font-size: 32px;
    font-weight: 700;
}

.referral-stat-value.earned { color: var(--profit); }
.referral-stat-value.pending { color: var(--orange); }

.referral-stat-label {
    font-size: 13px;
    color: var(--text-sub);
    margin-top: 4px;
}

/* Pending Credits Banner */
.referral-pending-banner {
    background: var(--orange-bg);
    border: 1px solid var(--orange);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--text-main);
}

/* Referred User Card */
.referred-user-card {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.referred-user-card:hover {
    background: var(--bg-panel);
}

.referred-user-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.referred-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
}

.referred-user-name { font-weight: 600; color: var(--text-main); }
.referred-user-date { font-size: 12px; color: var(--text-muted); }

.referred-user-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.referred-user-discount { font-size: 14px; font-weight: 600; color: var(--profit); }
.referred-user-status { font-size: 11px; }
.referred-user-status.credited { color: var(--profit); }
.referred-user-status.pending-status { color: var(--orange); }

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

.referred-user-dot.active { background: var(--profit); }
.referred-user-dot.trial { background: var(--accent); }
.referred-user-dot.inactive { background: var(--text-muted); }

.referred-users-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 24px;
}

.referred-users-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 16px;
}

/* Empty state for referrals */
.referral-empty-state {
    margin-top: 24px;
    text-align: center;
    padding: 32px 20px;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
}

.referral-empty-icon { margin-bottom: 16px; }
.referral-empty-title { font-size: 16px; font-weight: 600; color: var(--text-main); margin-bottom: 8px; }
.referral-empty-desc { font-size: 14px; color: var(--text-muted); }

/* Share Buttons Grid */
.share-buttons-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.share-buttons-grid .btn-share {
    flex: 1;
    min-width: 140px;
    padding: 14px 20px;
    color: white;
    border: none;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.share-buttons-grid .btn-share:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.share-buttons-grid .btn-share.whatsapp { background: var(--whatsapp); }
.share-buttons-grid .btn-share.telegram { background: var(--telegram); }
.share-buttons-grid .btn-share.twitter { background: var(--twitter); }
.share-buttons-grid .btn-share.email-share {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-main);
}

/* --- Security Tab Classes --- */
.password-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 400px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.password-form h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 0;
    color: var(--text-main);
}

.password-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    color: var(--text-main);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.password-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}

.password-submit-btn {
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.password-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.3);
}

.password-message {
    display: none;
    padding: 12px;
    border-radius: var(--radius);
    font-size: 13px;
}

.security-tip-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
}

.security-tip-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.security-tip-title { font-weight: 500; margin-bottom: 4px; }
.security-tip-desc { font-size: 13px; color: var(--text-sub); }

.security-tips-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Discord Card */
.discord-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
}

.discord-card-icon {
    width: 24px;
    height: 24px;
    color: var(--text-sub);
}

.discord-card-title { font-weight: 500; }
.discord-card-desc { font-size: 13px; color: var(--text-sub); }

.discord-link-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.1), rgba(88, 101, 242, 0.05));
    border: 1px solid #5865F2;
    border-radius: var(--radius-lg);
}

.discord-linked-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, var(--profit-bg), rgba(52, 199, 89, 0.05));
    border: 1px solid var(--profit);
    border-radius: var(--radius-lg);
}

.discord-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--profit);
}

.discord-user-info { flex: 1; }
.discord-display-name { font-weight: 600; font-size: 16px; }
.discord-linked-badge {
    background: var(--profit-bg);
    color: var(--profit);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}
.discord-username { font-size: 13px; color: var(--text-sub); }
.discord-linked-date { font-size: 12px; color: var(--text-dim); margin-top: 4px; }

.discord-unlink-btn {
    padding: 10px 20px;
    background: var(--bg-elevated);
    color: var(--text-sub);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.discord-unlink-btn:hover { background: var(--bg-panel-dark); color: var(--text-main); }

/* OAuth Provider Cards */
.oauth-provider-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    margin-bottom: 12px;
    background: var(--bg-card);
    transition: border-color 0.2s;
}

.oauth-provider-card:hover {
    border-color: var(--border-main);
}

.oauth-provider-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.oauth-provider-info strong {
    display: block;
    font-size: 0.95rem;
}

.oauth-email {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.oauth-provider-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.oauth-badge-linked {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--green-subtle, rgba(52, 199, 89, 0.15));
    color: var(--green, #34c759);
}

.btn-danger-outline {
    background: transparent;
    color: var(--red, #ff3b30);
    border: 1px solid var(--red, #ff3b30);
    padding: 6px 14px;
    border-radius: var(--radius-sm, 6px);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-danger-outline:hover {
    background: var(--red, #ff3b30);
    color: #fff;
}

/* --- Notification Alert Threshold --- */
.alert-threshold-container {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
    display: none;
}

.alert-threshold-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.alert-threshold-label {
    font-size: 14px;
    color: var(--text-sub);
}

.alert-threshold-input-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.alert-threshold-input {
    width: 80px;
    padding: 8px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    font-size: 15px;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
}

.alert-threshold-input:focus { border-color: var(--accent); }

.alert-threshold-unit { color: var(--text-sub); font-size: 14px; }

/* Cancel Warning */
.cancel-warning-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 16px;
}

.cancel-warning-title-v3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--orange);
    margin-bottom: 8px;
}

.cancel-warning-text-v3 {
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.5;
}

.btn-cancel-sub {
    padding: 12px 24px;
    background: transparent;
    color: var(--loss);
    border: 1px solid var(--loss);
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-cancel-sub:hover {
    background: var(--loss);
    color: white;
}

/* Cancellation scheduled card */
.cancellation-scheduled-card {
    background: var(--orange-bg);
    border: 1px solid var(--orange);
    border-radius: var(--radius-lg);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cancellation-scheduled-title {
    font-weight: 600;
    color: var(--orange);
    margin-bottom: 4px;
}

.cancellation-scheduled-desc {
    font-size: 13px;
    color: var(--text-sub);
}

/* Notification save status */
.notification-save-status {
    margin-top: 20px;
    padding: 12px;
    border-radius: var(--radius);
    font-size: 13px;
    display: none;
}

/* Profile description text */
.profile-desc {
    font-size: 14px;
    color: var(--text-sub);
    margin-bottom: 24px;
}

/* Notification toggles column */
.notification-toggles {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Smart alerts column */
.smart-alerts-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.smart-alert-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.smart-alert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Notification icon color variants */
.notification-icon.profit-icon { background: var(--profit-bg); color: var(--profit); }
.notification-icon.loss-icon { background: var(--loss-bg); color: var(--loss); }
.notification-icon.orange-icon { background: var(--orange-bg); color: var(--orange); }
.notification-icon.purple-icon { background: var(--purple-bg); color: var(--purple); }
.notification-icon.accent-icon { background: var(--accent-bg); color: var(--accent); }
.notification-icon.teal-icon { background: var(--teal-bg); color: var(--teal); }

/* Smart alert with threshold (expandable) */
.notification-toggle-item.has-threshold {
    flex-direction: column;
    align-items: stretch;
}

.notification-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.alert-threshold-value {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Password form fields */
.password-form-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 400px;
}

.password-strength-indicator {
    margin-top: 8px;
    font-size: 12px;
}

.btn-update-password {
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-update-password:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.3);
}

/* Discord layout helpers */
.discord-card.loading-state {
    text-align: center;
    padding: 20px;
    color: var(--text-sub);
}

.discord-card-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.discord-link-info { flex: 1; }
.discord-linked-info { flex: 1; }

.discord-linked-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-unlink-discord {
    padding: 10px 20px;
    background: var(--bg-elevated);
    color: var(--text-sub);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-unlink-discord:hover {
    background: var(--bg-panel-dark);
    color: var(--text-main);
}

/* Cancellation card title/desc */
.cancellation-title {
    font-weight: 600;
    color: var(--orange);
    margin-bottom: 4px;
}

.cancellation-desc {
    font-size: 13px;
    color: var(--text-sub);
}

/* Info value color helpers */
.info-value.orange { color: var(--orange); }
.info-value.accent { color: var(--accent); }

/* Risk Level Selector */
.risk-level-selector {
    display: flex;
    gap: 8px;
}

.risk-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    color: var(--text-sub);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.risk-btn:hover {
    border-color: var(--border);
    color: var(--text);
    background: var(--bg-elevated);
}

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

.risk-btn.active[data-level="low"] {
    background: rgba(48, 209, 88, 0.12);
    border-color: var(--profit);
    color: var(--profit);
}

.risk-btn.active[data-level="medium"] {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

.risk-btn.active[data-level="high"] {
    background: rgba(255, 149, 0, 0.12);
    border-color: var(--orange);
    color: var(--orange);
}

.risk-btn.active[data-dd],
.risk-btn.active[data-gl] {
    background: var(--accent-bg);
    border-color: var(--accent);
    color: var(--accent);
}

.risk-update-status {
    margin-top: 6px;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

/* Next payment card */
.next-payment-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.next-payment-loading {
    text-align: center;
    color: var(--text-muted);
    padding: 12px;
}

.next-payment-content { display: none; }

.next-payment-breakdown { font-size: 0.95em; }

.next-payment-total {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1.1em;
}

.next-payment-date {
    margin-top: 10px;
    font-size: 0.85em;
    color: var(--text-muted);
}

.next-payment-basis {
    margin-top: 6px;
    font-size: 0.8em;
    color: var(--text-muted);
    font-style: italic;
}

.next-payment-status-message {
    display: none;
    text-align: center;
    padding: 12px;
    color: var(--text-muted);
}

/* Loading state helper */
.loading-state {
    text-align: center;
    padding: 20px;
    color: var(--text-sub);
}

.loading-state .spinner {
    margin: 0 auto 12px;
}

/* --- Overhaul Responsive — Dashboard Hero --- */
@media (max-width: 768px) {
    .dashboard-hero {
        padding: 20px 16px;
        width: calc(100% - 24px);
        margin: 12px auto 0;
        border-radius: var(--radius-lg);
    }

    .dashboard-hero-top {
        flex-direction: column;
        gap: 12px;
    }

    .hero-balance-value {
        font-size: 28px;
    }

    .hero-actions {
        align-self: flex-start;
    }

    .hero-metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .hero-metric {
        min-width: 0;
    }

    .hero-metric-value {
        font-size: 14px;
    }

    /* Instance compact grid: 2 cols on mobile */
    .instances-grid.compact .instance-group-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }

    .instances-grid.compact .instance-card {
        padding: 6px 8px;
    }

    .instances-grid.compact .instance-symbol {
        font-size: 12px;
    }

    .instances-grid.compact .stats-row {
        font-size: 11px;
        padding: 1px 0;
    }

    /* Instance expanded (non-compact) view: single column on mobile */
    .instances-grid:not(.compact) {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .instances-grid:not(.compact) .instance-group-cards {
        flex-direction: column;
        gap: 12px;
    }

    .instances-grid:not(.compact) .instance-card {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .instances-grid:not(.compact) .instance-chart {
        height: 120px;
    }

    .instances-grid:not(.compact) .instance-chart canvas {
        height: 100%;
        width: 100%;
    }

    /* Banner stack mobile spacing */
    .banner-stack {
        width: calc(100% - 24px);
    }

    /* Chart timeframe pills scroll on mobile */
    .chart-timeframe-pills {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .chart-timeframe-pills::-webkit-scrollbar { display: none; }

    /* Section header row wrapping */
    .section-header-row {
        flex-wrap: wrap;
    }

    .section-header-actions {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Consistent side margins — match hero's 12px at this breakpoint */
    .page-dashboard .kpi-grid,
    .page-dashboard .chart-panel,
    .page-dashboard .chart-panel.full-width,
    .page-dashboard .calendar-agenda-wrapper,
    .page-dashboard .instances-grid,
    .page-dashboard .patterns-grid,
    .page-dashboard .section-header-row,
    .page-dashboard .section-title,
    .page-dashboard .open-positions-panel,
    .page-dashboard .pending-orders-panel {
        margin-left: 16px;
        margin-right: 16px;
    }
    .page-dashboard .filters-bar {
        width: calc(100% - 32px);
        margin-left: auto;
        margin-right: auto;
    }

    .banner-stack {
        width: calc(100% - 32px);
    }

    /* Calendar and agenda stack */
    .calendar-agenda-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    /* Share button text hide on mobile */
    .share-btn .btn-text {
        display: none;
    }

    /* Export button text hide on mobile */
    .hero-actions .btn-text {
        display: none;
    }
}

/* --- Overhaul Responsive — Profile Hero --- */
@media (max-width: 768px) {
    .profile-hero {
        padding: 24px 16px;
    }

    .profile-hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .profile-hero-avatar {
        width: 56px;
        height: 56px;
        font-size: 20px;
    }

    .profile-hero-name {
        font-size: 20px;
    }

    .profile-hero-actions {
        align-self: flex-start;
    }

    /* Referral responsive */
    .referral-link-row {
        flex-direction: column;
    }

    .referral-copy-btn {
        justify-content: center;
    }

    .share-buttons-grid {
        flex-direction: column;
    }

    .share-buttons-grid .btn-share {
        min-width: 100%;
    }

    /* Security form responsive */
    .password-form {
        max-width: 100%;
    }

    .password-form-fields {
        max-width: 100%;
    }

    /* Discord responsive */
    .discord-link-card {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .discord-linked-card {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .discord-linked-name-row {
        justify-content: center;
    }

    /* Inline edit responsive */
    .inline-edit-input {
        font-size: 15px;
    }

    /* Alert threshold responsive */
    .alert-threshold-row,
    .alert-threshold-input-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .dashboard-hero {
        padding: 14px 12px;
        width: calc(100% - 16px);
        margin: 8px auto 0;
    }

    .hero-balance-value {
        font-size: 24px;
    }

    .hero-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .hero-metric {
        min-width: 0;
    }

    .hero-metric:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .instances-grid.compact .instance-group-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    /* Expanded view: full width, tighter spacing on small phones */
    .instances-grid:not(.compact) {
        gap: 8px;
    }

    .instances-grid:not(.compact) .instance-card {
        padding: 10px;
    }

    .instances-grid:not(.compact) .instance-chart {
        height: 100px;
    }

    /* Tighter KPI on very small */
    .kpi-card {
        padding: 10px;
    }

    .kpi-value {
        font-size: 18px;
    }

    .kpi-change {
        font-size: 10px;
    }

    /* Consistent margins — match hero's 8px at this breakpoint */
    .page-dashboard .kpi-grid,
    .page-dashboard .chart-panel,
    .page-dashboard .chart-panel.full-width,
    .page-dashboard .calendar-agenda-wrapper,
    .page-dashboard .instances-grid,
    .page-dashboard .patterns-grid,
    .page-dashboard .section-header-row,
    .page-dashboard .section-title,
    .page-dashboard .open-positions-panel,
    .page-dashboard .pending-orders-panel {
        margin-left: 12px;
        margin-right: 12px;
    }
    .page-dashboard .filters-bar {
        width: calc(100% - 24px);
        margin-left: auto;
        margin-right: auto;
    }

    .banner-stack {
        width: calc(100% - 24px);
    }

    .profile-hero-avatar {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .profile-hero-name {
        font-size: 18px;
    }

    .referral-steps-grid {
        grid-template-columns: 1fr;
    }

    .invitation-slots-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .referral-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* --- 640px Intermediate Breakpoint --- */
@media (max-width: 640px) {
    /* Hero balance overflow prevention */
    .hero-balance-value {
        font-size: 22px;
        word-break: break-all;
    }

    .hero-balance-section {
        flex-direction: column;
        gap: 4px;
    }

    /* Hero metrics: 2-col grid instead of flex row */
    .hero-metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .hero-metric {
        min-width: 0;
    }

    /* Main content tighter padding */
    .main-content {
        padding: 10px 8px;
    }

    /* Dashboard hero tighter */
    .dashboard-hero {
        padding: 14px 12px;
        width: calc(100% - 12px);
        margin: 6px auto 0;
        border-radius: var(--radius-lg);
    }

    .dashboard-hero-top {
        gap: 8px;
        margin-bottom: 12px;
    }

    /* Align inner sections with hero margins */
    .page-dashboard .kpi-grid,
    .page-dashboard .chart-panel,
    .page-dashboard .chart-panel.full-width,
    .page-dashboard .calendar-agenda-wrapper,
    .page-dashboard .instances-grid,
    .page-dashboard .patterns-grid,
    .page-dashboard .section-header-row,
    .page-dashboard .section-title,
    .page-dashboard .open-positions-panel,
    .page-dashboard .pending-orders-panel {
        margin-left: 10px;
        margin-right: 10px;
    }
    .page-dashboard .filters-bar {
        width: calc(100% - 20px);
        margin-left: auto;
        margin-right: auto;
    }

    .banner-stack {
        width: calc(100% - 20px);
    }

    .dashboard-hero-greeting {
        font-size: 12px;
    }

    .dashboard-hero-greeting .last-updated {
        margin-left: 0;
        width: 100%;
    }

    /* KPI grid: 2x2 grid with tighter spacing */
    .kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .kpi-card {
        padding: 12px;
    }

    .kpi-value {
        font-size: 20px;
    }

    .kpi-sub-metrics {
        flex-direction: column;
        gap: 2px;
    }

    .kpi-sub-metric {
        font-size: 10px;
    }

    /* Column toggle menu: full-width dropdown on small screens */
    .column-menu {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        max-height: 60vh;
        overflow-y: auto;
        z-index: 9999;
        padding: 12px;
        animation: menuSlideUp 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @keyframes menuSlideUp {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .column-toggle-item {
        padding: 12px;
        min-height: 44px;
    }

    /* Filters panel: stack items vertically */
    .filters-panel .filter-row,
    .filters-panel .filters-grid {
        flex-direction: column;
        gap: 8px;
    }

    .filter-group {
        width: 100%;
    }

    .filter-group select,
    .filter-group input {
        width: 100%;
    }

    /* Profile stat cards: 2 cols */
    .profile-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .profile-stat-card {
        padding: 12px;
    }

    /* Profile tabs: horizontally scrollable */
    .profile-tabs-container {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .profile-tabs-container::-webkit-scrollbar { display: none; }

    .profile-tabs {
        flex-wrap: nowrap;
        min-width: max-content;
    }

    .profile-tab {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 10px 14px;
        font-size: 12px;
    }

    /* Payment history: card layout on mobile */
    .payment-history-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 12px;
    }

    .payment-history-table th,
    .payment-history-table td {
        padding: 8px 10px;
        white-space: nowrap;
    }

    /* Notification toggle items: stack label and toggle */
    .notification-toggle-item {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Alert threshold: full width inputs */
    .alert-threshold-container input[type="number"] {
        width: 100%;
        max-width: none;
    }

    /* Referral invitation slots */
    .invitation-slots {
        gap: 8px;
    }

    .invitation-slot {
        width: 60px;
        height: 60px;
    }

    /* Section titles */
    .section-title {
        font-size: 10px;
    }

    /* Trades stats cards: 2-col */
    .trades-stat-cards {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .trades-stat-card {
        padding: 10px;
    }

    /* Chart timeframe pills: smaller */
    .chart-timeframe-pill {
        padding: 4px 10px;
        font-size: 11px;
    }
}

/* --- 380px Very Narrow Screens --- */
@media (max-width: 380px) {
    .hero-balance-value {
        font-size: 20px;
    }

    .hero-metrics {
        grid-template-columns: 1fr;
    }

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

    .dashboard-hero {
        padding: 12px 10px;
        width: calc(100% - 8px);
        margin: 4px auto 0;
    }

    .kpi-value {
        font-size: 18px;
    }

    .profile-stats-grid {
        grid-template-columns: 1fr;
    }

    .invitation-slot {
        width: 48px;
        height: 48px;
    }
}

/* --- Light Mode Glass Card Fix --- glass tokens handle light mode via :root.light variable overrides */


:root.light .profile-hero {
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* --- Modal Close Button Styles --- */
.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-sub);
    padding: 4px 8px;
    border-radius: var(--radius);
    line-height: 1;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: var(--text-main);
    background: var(--bg-tertiary);
}

.modal-close:active {
    transform: scale(0.92);
}

/* ============================================================================
   Beta Testing Banner
   ============================================================================ */
.beta-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #AF52DE, #5E5CE6);
    color: white;
    padding: 8px 20px;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Purple banner for trade.cfin.be (authenticated app) */
.beta-banner-purple {
    background: linear-gradient(90deg, #AF52DE, #5E5CE6);
}

/* Green banner for www.cfin.be (public/marketing) */
.beta-banner-green {
    background: linear-gradient(90deg, #34C759, #5AC8FA);
}

.beta-banner a {
    color: white;
    text-decoration: underline;
}

/* ============================================================================
   Dashboard Visual Enhancement (Feb 2026)
   Theme consistency with landing page: glassmorphism, animations, micro-interactions
   (Background effects defined in "DASHBOARD BACKGROUND EFFECTS" section below)
   ============================================================================ */

/* --- Enhanced Panel Styling (non-glass overrides only; glass from unified rule) --- */
.page-dashboard .kpi-card {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.3s ease;
}

.page-dashboard .kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--glass-shadow-hover);
    border-color: rgba(10, 132, 255, 0.15);
}

/* Instance cards */
.page-dashboard .instance-card {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.25s ease;
}

.page-dashboard .instance-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow-hover);
    border-color: rgba(255, 255, 255, 0.1);
}

/* --- Section Title Gradient Accent --- */
.page-dashboard .section-title {
    position: relative;
    display: inline-block;
    padding-left: 13px;
}

.page-dashboard .section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: linear-gradient(180deg, var(--accent), var(--purple));
    border-radius: 2px;
}

/* --- Scroll-Triggered Entrance Animations --- */
.dash-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.dash-animate.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children (KPI cards) */
.dash-animate-stagger {
    opacity: 1;
    transform: none;
}

.dash-animate-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.dash-animate-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.dash-animate-stagger.visible > *:nth-child(2) { transition-delay: 0.12s; }
.dash-animate-stagger.visible > *:nth-child(3) { transition-delay: 0.19s; }
.dash-animate-stagger.visible > *:nth-child(4) { transition-delay: 0.26s; }

.dash-animate-stagger.visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* --- Hero Panel Entrance --- */
.page-dashboard .dashboard-hero {
    animation: heroReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

@keyframes heroReveal {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Filter Bar Entrance --- */
.page-dashboard .filters-bar {
    animation: filterBarReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

@keyframes filterBarReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Micro-Interactions --- */

/* Button press feedback */
.page-dashboard .btn:active,
.page-dashboard .chart-timeframe-pill:active,
.page-dashboard .instances-view-btn:active,
.page-dashboard .calendar-nav button:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}

/* Chart timeframe pill transitions */
.chart-timeframe-pill {
    transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.chart-timeframe-pill.active {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(10, 132, 255, 0.2);
}

/* Nav link hover underline animation */
.page-dashboard .nav-link {
    position: relative;
}

/* Dashboard nav-link overrides removed — unified in base .nav-link::after */

/* Export button hover glow */
.page-dashboard .hero-actions .btn:hover {
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.15);
}

/* Status dot pulse animation */
.status-badge .status-dot {
    animation: statusPulse 2s ease-in-out infinite;
}

/* Instance status badge transition */
.instance-status-badge {
    transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

/* Filter panel smooth expand/collapse */
.filters-panel {
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease,
                padding 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Notification dropdown entrance */
.notification-dropdown {
    animation: dropdownReveal 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: top right;
}

@keyframes dropdownReveal {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* KPI sparkline fade-in */
.kpi-sparkline canvas {
    opacity: 0;
    transition: opacity 0.5s ease 0.3s;
}

.kpi-card.loaded .kpi-sparkline canvas {
    opacity: 1;
}

/* Value update flash animation — enhanced with scale pulse + color glow */
@keyframes valueFlash {
    0% { background-color: transparent; transform: scale(1); }
    15% { background-color: rgba(10, 132, 255, 0.1); transform: scale(1.03); }
    40% { transform: scale(1); }
    100% { background-color: transparent; }
}

.value-updated {
    animation: valueFlash 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    border-radius: var(--radius-xs);
}

/* Profit/loss specific value flash */
.value-updated.profit,
.profit .value-updated {
    animation-name: valueFlashProfit;
}

.value-updated.loss,
.loss .value-updated {
    animation-name: valueFlashLoss;
}

@keyframes valueFlashProfit {
    0% { background-color: transparent; transform: scale(1); }
    15% { background-color: rgba(52, 199, 89, 0.12); transform: scale(1.03); }
    40% { transform: scale(1); }
    100% { background-color: transparent; }
}

@keyframes valueFlashLoss {
    0% { background-color: transparent; transform: scale(1); }
    15% { background-color: rgba(255, 69, 58, 0.1); transform: scale(1.03); }
    40% { transform: scale(1); }
    100% { background-color: transparent; }
}

/* Hero balance smooth transitions */
.hero-balance-value,
.hero-metric-value {
    transition: color 0.3s ease;
}

/* Scroll-to-top button smooth */
.scroll-to-top {
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-to-top:hover {
    transform: translateY(-2px);
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .dash-orb,
    .dash-animate,
    .dash-animate-stagger > * {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    .dash-animate,
    .dash-animate-stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }

    .page-dashboard .dashboard-hero,
    .page-dashboard .filters-bar {
        animation: none !important;
    }

    .status-badge .status-dot {
        animation: none !important;
    }
}


/* ============================================================================
   Dashboard Overhaul Fixes (Feb 2026)
   Fixes: alignment, mobile layout, button touch targets, data display
   ============================================================================ */

/* --- 1. Main Content Max-Width & Centering (Desktop) --- */
.page-dashboard .main-content {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Remove per-section left/right margins on desktop since main-content handles it */
.page-dashboard .section-header-row,
.page-dashboard .kpi-grid,
.page-dashboard .chart-panel,
.page-dashboard .chart-panel.full-width,
.page-dashboard .calendar-agenda-wrapper,
.page-dashboard .instances-grid,
.page-dashboard .patterns-grid,
.page-dashboard .open-positions-panel,
.page-dashboard .pending-orders-panel {
    margin-left: 0;
    margin-right: 0;
}

/* Section titles inside header-rows don't need separate margin */
.page-dashboard .section-header-row .section-title {
    margin-left: 0;
    margin-right: 0;
}

/* Dashboard hero consistent with main content */
.page-dashboard .dashboard-hero {
    width: calc(100% - 48px);
    max-width: 1600px;
    margin: 16px auto 0;
}

/* Filters bar inner centering (margin handled by shared rule at ~13433) */
.page-dashboard .filters-bar .status-bar-main {
    max-width: 1600px;
    margin: 0 auto;
    padding: 10px 0;
}

.page-dashboard .filters-bar .filters-panel.expanded {
    max-width: 1600px;
    margin: 0 auto;
    padding: 12px 16px 16px;
}

/* --- 2. Hero Panel Balance Display Fix --- */
.hero-balance-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Hero metrics: consistent grid on all sizes */
.hero-metrics {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.hero-metric {
    text-align: center;
}

.hero-metric-label {
    white-space: nowrap;
}

.hero-metric-value {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- 3. KPI Cards Enhancement --- */
.kpi-value-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.kpi-pct {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* KPI card consistent heights */
.kpi-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* --- 4. Instance Cards: Fix Overflow on All Screens --- */
/* Compact mode handled by primary compact rules above */

/* Expanded mode: flex rows with wrapping */
.instances-grid:not(.compact) .instance-group-cards {
    flex-wrap: wrap;
}

.instances-grid:not(.compact) .instance-card {
    flex: 1 1 calc(25% - 9px);
    min-width: 200px;
}

/* --- 5. Filter Panel Improvements --- */
.filters-panel.expanded {
    max-height: 500px;
}

.filters-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.filter-group {
    flex: 0 0 auto;
}

.filter-group select,
.filter-group input[type="date"] {
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    background: var(--bg-main);
    color: var(--text-main);
    cursor: pointer;
    min-width: 130px;
}

.filter-group select:focus,
.filter-group input[type="date"]:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}

.filter-presets {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--border-subtle);
    margin-top: 4px;
}

.filter-presets-label {
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- 6. Button Touch Targets --- */
/* Ensure all interactive elements have minimum 44px touch target */
.chart-timeframe-pill {
    min-height: 36px;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Calendar nav buttons */
.calendar-nav button {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    background: var(--bg-main);
    color: var(--text-sub);
    cursor: pointer;
    font-size: 16px;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.calendar-nav button:hover {
    background: var(--bg-panel-dark);
    color: var(--text-main);
    border-color: var(--border);
}

.calendar-nav button:active {
    transform: scale(0.95);
}

/* Instance view toggle buttons */
.instances-view-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    border: 1px solid var(--border-subtle);
    background: var(--bg-main);
    color: var(--text-sub);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.instances-view-btn:hover {
    background: var(--bg-panel-dark);
    color: var(--text-main);
}

.instances-view-btn.active {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent);
}

.instances-view-toggle {
    display: flex;
    gap: 4px;
}

/* --- 7. Status Indicators Enhancement --- */
.status-indicators {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    font-size: 13px;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.online {
    background: var(--profit);
    box-shadow: 0 0 6px rgba(52, 199, 89, 0.4);
}

.status-dot.offline {
    background: var(--text-dim);
}

.status-dot.error {
    background: var(--loss);
    box-shadow: 0 0 6px rgba(255, 69, 58, 0.4);
}

.status-dot.trades {
    background: var(--accent);
}

/* --- 8. Position Card Grid Fix --- */
.position-card {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 16px;
    padding: 14px 16px;
    align-items: center;
}

.position-details {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

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

.position-detail-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.position-detail-value {
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.position-pnl {
    text-align: right;
}

.position-pnl-value {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.position-pnl-pips {
    font-size: 11px;
    color: var(--text-sub);
}

/* --- 9. Chart Panel Full-Width Fix --- */
.chart-panel.full-width {
    width: 100%;
}

.chart-panel.full-width.glass-card {
    padding: 16px;
}

/* Chart legend at bottom */
.chart-legend.bottom.pill-style {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding-top: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-sub);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-dot.balance {
    background: var(--profit);
}

.legend-dot.equity {
    background: rgb(142, 142, 147);
}

.legend-dot.effective {
    background: rgb(255, 159, 64);
}

/* --- 10. Section Spacing Consistency --- */
.page-dashboard .section-header-row {
    margin-bottom: 12px;
    padding: 0;
}

.page-dashboard .kpi-grid {
    margin-bottom: 24px;
}

.page-dashboard .chart-panel {
    margin-bottom: 24px;
}

.page-dashboard .calendar-agenda-wrapper {
    margin-bottom: 24px;
}

/* --- Mobile Hamburger Menu --- */
.nav-hamburger {
    display: none;
}

.nav-hamburger svg line {
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
}

.nav.expanded .nav-hamburger svg line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav.expanded .nav-hamburger svg line:nth-child(2) {
    opacity: 0;
}

.nav.expanded .nav-hamburger svg line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Hamburger hidden — mobile nav uses the page-name dropdown (active nav-link) instead */

/* --- Hero Controls Row --- */
.hero-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.dashboard-hero-greeting {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.greeting-text {
    font-weight: 600;
}

/* --- MOBILE RESPONSIVE OVERRIDES --- */

/* Tablet: 769px - 1100px */
@media (max-width: 1100px) {
    .page-dashboard .main-content {
        padding: 0 16px;
    }

    .hero-metrics {
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
    }

    .instances-grid.compact .instance-group-cards {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 6px;
    }

    .instances-grid:not(.compact) .instance-card {
        flex: 1 1 calc(33.33% - 8px);
        min-width: 180px;
    }
}

/* Mobile: 768px and below */
@media (max-width: 768px) {
    .page-dashboard .main-content {
        padding: 0 12px;
    }

    /* Override desktop margin resets - use padding from main-content */
    .page-dashboard .section-header-row,
    .page-dashboard .kpi-grid,
    .page-dashboard .chart-panel,
    .page-dashboard .chart-panel.full-width,
    .page-dashboard .calendar-agenda-wrapper,
    .page-dashboard .instances-grid,
    .page-dashboard .patterns-grid,
    .page-dashboard .open-positions-panel,
    .page-dashboard .pending-orders-panel {
        margin-left: 0;
        margin-right: 0;
    }

    .page-dashboard .filters-bar .status-bar-main {
        padding: 8px 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .page-dashboard .filters-bar .filters-panel.expanded {
        padding: 12px;
    }

    /* Hero panel mobile */
    .dashboard-hero {
        padding: 20px 16px;
        width: calc(100% - 24px);
        margin: 12px auto 0;
    }

    .hero-metrics {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .hero-metric {
        text-align: left;
    }

    .hero-metric-label {
        font-size: 11px;
    }

    .hero-metric-value {
        font-size: 15px;
    }

    /* 5th metric wraps to next row spanning center */
    .hero-metric:nth-child(4),
    .hero-metric:nth-child(5) {
        /* Will naturally flow into next row */
    }

    /* KPI cards */
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .kpi-value-row {
        gap: 4px;
    }

    .kpi-pct {
        font-size: 11px;
    }

    /* Instance cards compact: 2 columns, tight on mobile */
    .instances-grid.compact .instance-group-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
    .instances-grid.compact {
        max-width: 100%;
        overflow: hidden;
    }

    .instances-grid.compact .instance-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 6px 8px;
    }

    /* Instance cards expanded: single column */
    .instances-grid:not(.compact) .instance-card {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    /* Status bar */
    .status-indicators {
        gap: 10px;
        font-size: 12px;
        flex-wrap: wrap;
    }

    /* Filters */
    .filters-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        width: 100%;
    }

    .filter-group select,
    .filter-group input[type="date"] {
        width: 100%;
        height: 40px;
    }

    .filter-group.date-range {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .filter-group.date-range input {
        flex: 1;
    }

    .filter-presets {
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        flex-wrap: nowrap;
        gap: 4px;
    }

    .filter-presets::-webkit-scrollbar {
        display: none;
    }

    /* Position cards mobile — compact 3-column layout */
    .position-card {
        grid-template-columns: auto 1fr auto;
        gap: 8px;
        padding: 10px 12px;
    }

    .position-symbol {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .position-symbol-name {
        font-size: 13px;
    }

    .position-direction {
        font-size: 10px;
        padding: 1px 5px;
    }

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

    .position-detail-label {
        font-size: 9px;
    }

    .position-detail-value {
        font-size: 12px;
    }

    .position-pnl {
        text-align: right;
    }

    .position-pnl-value {
        font-size: 14px;
    }

    .position-pnl-pips {
        font-size: 10px;
    }

    .positions-list {
        max-height: 240px;
    }

    /* Pending order cards mobile — compact 3-column layout */
    .pending-order-card {
        grid-template-columns: auto 1fr auto;
        gap: 8px;
        padding: 10px 12px;
    }

    .order-symbol-name {
        font-size: 13px;
    }

    .order-type-badge {
        font-size: 9px;
    }

    .order-details {
        gap: 10px;
        font-size: 12px;
    }

    .order-detail-label {
        font-size: 9px;
    }

    .order-detail-value {
        font-size: 12px;
    }

    .order-price-value {
        font-size: 13px;
    }

    .order-price-label {
        font-size: 9px;
    }

    .pending-orders-list {
        max-height: 240px;
    }

    /* Calendar */
    .calendar-agenda-wrapper {
        flex-direction: column;
        gap: 16px;
    }

    .calendar-section,
    .agenda-section {
        flex: none;
        max-width: none;
        min-width: 0;
        width: 100%;
    }

    /* Chart timeframe pills: scrollable on mobile */
    .chart-timeframe-pills {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .chart-timeframe-pills::-webkit-scrollbar {
        display: none;
    }

    .chart-timeframe-pill {
        flex-shrink: 0;
        min-height: 36px;
        padding: 6px 14px;
    }

    /* Section headers */
    .section-header-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .section-header-actions {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* Small phones: 480px and below */
@media (max-width: 480px) {
    .page-dashboard .main-content {
        padding: 0 8px;
    }

    .dashboard-hero {
        padding: 14px 12px;
        width: calc(100% - 16px);
        margin: 8px auto 0;
    }

    .hero-balance-value {
        font-size: 24px;
    }

    .hero-metrics {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Last odd metric spans full width */
    .hero-metric:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .hero-metric-value {
        font-size: 14px;
    }

    .kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .kpi-card {
        padding: 10px 12px;
        padding-bottom: 38px;
    }

    .kpi-value {
        font-size: 18px;
    }

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

    .kpi-change {
        font-size: 10px;
    }

    .instances-grid.compact .instance-group-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 3px;
    }
    .instances-grid.compact {
        max-width: 100%;
    }

    .instances-grid.compact .instance-card {
        padding: 5px 6px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .instances-grid.compact .instance-symbol {
        font-size: 11px;
    }

    .instances-grid.compact .stats-row {
        font-size: 10px;
    }

    /* Filter presets smaller */
    .filter-presets .btn {
        font-size: 11px;
        padding: 4px 8px;
    }

    .page-dashboard .filters-bar .status-bar-main {
        padding: 6px 8px;
    }

    /* Banner stack */
    .banner-stack {
        width: calc(100% - 16px);
    }

    /* Position cards — 2-row compact on small screens */
    .position-card {
        grid-template-columns: 1fr auto;
        gap: 6px;
        padding: 8px 10px;
    }

    .position-symbol {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    .position-symbol-name {
        font-size: 12px;
    }

    .position-pnl {
        text-align: right;
        grid-row: 1;
        grid-column: 2;
    }

    .position-pnl-value {
        font-size: 13px;
    }

    .position-pnl-pips {
        font-size: 9px;
    }

    .position-details {
        grid-column: 1 / -1;
        grid-row: 2;
        gap: 8px;
        font-size: 11px;
    }

    .position-detail-label {
        font-size: 8px;
    }

    .position-detail-value {
        font-size: 11px;
    }

    .positions-list {
        max-height: 200px;
    }

    /* Pending order cards — 2-row compact on small screens */
    .pending-order-card {
        grid-template-columns: 1fr auto;
        gap: 6px;
        padding: 8px 10px;
    }

    .order-symbol {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
    }

    .order-symbol-name {
        font-size: 12px;
    }

    .order-price-target {
        text-align: right;
        grid-row: 1;
        grid-column: 2;
    }

    .order-price-value {
        font-size: 12px;
    }

    .order-details {
        grid-column: 1 / -1;
        grid-row: 2;
        gap: 8px;
        font-size: 11px;
    }

    .order-detail-label {
        font-size: 8px;
    }

    .order-detail-value {
        font-size: 11px;
    }

    .pending-orders-list {
        max-height: 200px;
    }

    /* Calendar cells tighter on small screens */
    .calendar-grid {
        gap: 2px;
    }

    .calendar-day {
        gap: 2px;
        padding: 2px 1px;
        font-size: 11px;
    }

    .calendar-day .date {
        font-size: 11px;
    }

    .calendar-day .pnl-indicator {
        font-size: 8px;
        letter-spacing: -0.5px;
    }

    .calendar-day .pnl-pct {
        display: none;
    }

    .calendar-header {
        font-size: 9px;
        padding: 2px 1px 3px;
    }

    /* Filter presets compact */
    .filter-presets .btn {
        font-size: 10px;
        padding: 4px 6px;
    }

    /* Chart legend compact */
    .chart-legend {
        gap: 8px;
    }

    .chart-legend.unified {
        gap: 6px;
        padding: 6px 8px 4px;
        font-size: 10px;
    }

    .chart-legend.unified .legend-item {
        font-size: 10px;
        padding: 2px 6px;
        gap: 4px;
    }

    .legend-item {
        font-size: 11px;
        gap: 4px;
    }

    /* Agenda section compact */
    .agenda-section {
        min-width: 0;
    }

    .agenda-day {
        padding: 8px 10px;
    }

    /* Profile tabs compact */
    .profile-tabs .profile-tab {
        padding: 8px 12px;
        font-size: 12px;
    }

    .profile-tabs .profile-tab svg {
        width: 14px;
        height: 14px;
    }

    .profile-section {
        padding: 14px;
    }
}

/* Very narrow: 380px and below */
@media (max-width: 380px) {
    .ai-chat-bubble {
        width: 44px;
        height: 44px;
        right: 12px;
    }
    .ai-chat-bubble svg {
        width: 20px;
        height: 20px;
    }
    .ai-chat-panel {
        right: 8px;
        width: calc(100vw - 16px);
    }

    .dashboard-hero {
        padding: 12px 10px;
        width: calc(100% - 12px);
        margin: 6px auto 0;
    }

    .hero-balance-value {
        font-size: 20px;
    }

    .hero-metrics {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .hero-metric {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 4px;
    }

    .kpi-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .kpi-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 12px;
        padding-bottom: 12px;
        min-height: auto;
    }

    .kpi-value-row {
        flex-wrap: wrap;
    }

    /* Hide sparklines on very narrow screens */
    .kpi-sparkline {
        display: none;
    }

    .instances-grid.compact .instance-group-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 2px;
    }

    .banner-stack {
        width: calc(100% - 12px);
    }
}

.beta-banner a:hover {
    opacity: 0.9;
}

.beta-icon {
    font-size: 14px;
}

/* Add padding to body when beta banner is present */
body:has(.beta-banner) {
    padding-bottom: 52px;
}

/* Fallback for browsers without :has() support */
.beta-banner-active {
    padding-bottom: 52px;
}

/* Move chat FAB above beta banner */
body:has(.beta-banner) .ai-chat-bubble {
    bottom: 52px;
}
body:has(.beta-banner) .ai-chat-panel {
    bottom: 52px;
}
.beta-banner-active .ai-chat-bubble {
    bottom: 52px;
}
.beta-banner-active .ai-chat-panel {
    bottom: 52px;
}

@media (max-width: 480px) {
    .beta-banner {
        font-size: 11px;
        padding: 8px 12px;
        padding-right: 16px;
        flex-wrap: wrap;
        line-height: 1.4;
    }
    body:has(.beta-banner), .beta-banner-active {
        padding-bottom: 56px;
    }
    body:has(.beta-banner) .ai-chat-bubble {
        bottom: 60px;
    }
    body:has(.beta-banner) .ai-chat-panel {
        bottom: 60px;
        right: 12px;
        width: calc(100vw - 24px);
    }
    .beta-banner-active .ai-chat-bubble {
        bottom: 60px;
    }
}

/* ============================================================================
   Support Resources Section
   ============================================================================ */

.support-resources {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px 8px;
}

.support-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.support-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-main);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.support-card:hover {
    border-color: var(--accent);
    background: var(--bg-tertiary);
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.1);
    transform: translateY(-2px);
}

.support-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    background: var(--accent-bg);
    color: var(--accent);
    flex-shrink: 0;
}

.support-card-info h3 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
}

.support-card-info p {
    margin: 0;
    font-size: 13px;
    color: var(--accent);
}

.support-response {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 4px;
    display: block;
}

.support-quick-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.support-quick-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--text-sub);
    text-decoration: none;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.support-quick-links a:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-bg);
}

.support-quick-links a svg {
    opacity: 0.6;
}

.support-quick-links a:hover svg {
    opacity: 1;
    stroke: var(--accent);
}

@media (max-width: 600px) {
    .support-cards {
        grid-template-columns: 1fr;
    }
    .support-card {
        padding: 16px;
    }
    .support-quick-links {
        gap: 6px;
    }
    .support-quick-links a {
        padding: 5px 10px;
        font-size: 11px;
    }
}

/* ============================================================================
   Support Page
   ============================================================================ */

.support-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
    padding-bottom: 80px;
}

.support-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.support-header h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.btn-new-ticket {
    background: var(--accent);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.btn-new-ticket:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.3);
}

.btn-new-ticket:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-new-ticket:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.tickets-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ticket-card {
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

/* Loading bar at top of ticket cards */
.ticket-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    z-index: 1;
}

.ticket-card:hover::before {
    transform: scaleX(1);
}

.ticket-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--glass-shadow-hover);
}

.ticket-card:active {
    transform: translateY(0) scale(0.99);
    transition-duration: 0.1s;
}

.ticket-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    gap: 12px;
}

.ticket-number {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-sub);
}

.ticket-subject {
    font-weight: 600;
    font-size: 15px;
    margin: 4px 0;
}

.ticket-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-sub);
}

.ticket-status {
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.ticket-status.open { background: var(--profit-bg); color: var(--profit); }
.ticket-status.in_progress { background: var(--orange-bg); color: var(--orange); }
.ticket-status.resolved { background: var(--accent-bg); color: var(--teal); }
.ticket-status.closed { background: var(--bg-hover); color: var(--text-sub); }

.ticket-detail-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.ticket-detail-title {
    margin: 8px 0;
}

.ticket-closed-notice {
    text-align: center;
    color: var(--text-sub);
    padding: 20px 0;
}

.ticket-detail-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.messages-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.message {
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    max-width: 85%;
}

.message.user {
    background: var(--accent);
    color: white;
    align-self: flex-end;
}

.message.staff {
    background: rgba(44,44,46,0.92);
    border: 1px solid rgba(255,255,255,0.08);
    align-self: flex-start;
}

:root.light .message.staff {
    background: rgba(255,255,255,0.95);
    border-color: rgba(0,0,0,0.06);
}

.message-meta {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 4px;
}

.reply-form {
    display: flex;
    gap: 12px;
}

.reply-form textarea {
    flex: 1;
    padding: 12px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-main);
    font-family: inherit;
    font-size: 14px;
    resize: none;
    min-height: 60px;
}

.reply-form textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.reply-form button {
    background: var(--accent);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    align-self: flex-end;
    transition: background 0.2s;
}

.reply-form button:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.reply-form button:active {
    transform: translateY(0);
}

.reply-form button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 16px;
}

.back-link:hover {
    text-decoration: underline;
}

.btn-cancel {
    background: var(--bg-main);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 10px 20px;
    border-radius: var(--radius);
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s, opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-cancel:hover {
    background: var(--bg-hover);
}

.btn-cancel:active {
    transform: scale(0.98);
}

.btn-cancel:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-submit {
    background: var(--accent);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-submit:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.3);
}

.btn-submit:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-submit:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

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

/* Support page modal (scoped to avoid conflicts) */
.support-container .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.support-container .modal-overlay.active {
    display: flex;
}

.support-container .modal {
    background: var(--bg-panel);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.support-container .modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.support-container .modal-header h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}

.support-container .modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-sub);
    padding: 0;
    line-height: 1;
}

.support-container .modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.support-container .modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.support-container .form-group {
    margin-bottom: 16px;
}

.support-container .form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 13px;
}

.support-container .form-group input,
.support-container .form-group select,
.support-container .form-group textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-main);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    color: var(--text-main);
    font-family: inherit;
}

.support-container .form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.support-container .form-group input:focus,
.support-container .form-group select:focus,
.support-container .form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.support-container .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-sub);
    background: rgba(44,44,46,0.3);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-xl);
    transition: border-color 0.3s ease;
}

.support-container .empty-state:hover {
    border-color: var(--accent);
}

:root.light .support-container .empty-state {
    background: rgba(255,255,255,0.4);
}

.support-container .empty-state svg {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    opacity: 0.4;
    color: var(--accent);
}

@media (max-width: 768px) {
    .support-container {
        padding: 16px;
    }

    .message {
        max-width: 90%;
    }

    .reply-form {
        flex-direction: column;
    }

    .reply-form button {
        align-self: stretch;
    }

    .back-link {
        padding: 8px 0;
        font-size: 15px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .ticket-detail-header {
        padding-bottom: 12px;
    }

    .ticket-detail-title {
        font-size: 18px;
    }

    .ticket-detail-actions {
        flex-direction: column;
    }

    .ticket-detail-actions .btn-cancel {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .message {
        max-width: 95%;
        padding: 10px 12px;
        font-size: 14px;
    }

    .message-meta {
        font-size: 10px;
    }

    .ticket-status {
        font-size: 10px;
        padding: 2px 6px;
    }
}

/* Hide beta banner on print */
@media print {
    .beta-banner {
        display: none;
    }
}

/* ============================================================================
   DASHBOARD BACKGROUND EFFECTS (v134)
   ============================================================================ */
.dash-bg-effects {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    contain: layout paint;
    will-change: transform;
}

.dash-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.5;
    animation: dashOrbFloat 20s ease-in-out infinite;
    will-change: transform;
    contain: layout style paint;
}

.dash-orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(10, 132, 255, 0.35) 0%, transparent 70%);
    top: -200px;
    right: -100px;
    animation-delay: 0s;
}

.dash-orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(191, 90, 242, 0.28) 0%, transparent 70%);
    bottom: 20%;
    left: -150px;
    animation-delay: -7s;
}

.dash-orb-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(90, 200, 250, 0.22) 0%, transparent 70%);
    top: 50%;
    right: 10%;
    animation-delay: -14s;
}

@keyframes dashOrbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.05); }
    50% { transform: translate(-20px, 20px) scale(0.95); }
    75% { transform: translate(20px, 30px) scale(1.02); }
}

.dash-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

:root.light .dash-orb {
    opacity: 0.85;
}

:root.light .dash-orb-1 {
    background: radial-gradient(circle, rgba(10, 132, 255, 0.5) 0%, transparent 70%);
}

:root.light .dash-orb-2 {
    background: radial-gradient(circle, rgba(191, 90, 242, 0.45) 0%, transparent 70%);
}

:root.light .dash-orb-3 {
    background: radial-gradient(circle, rgba(90, 200, 250, 0.4) 0%, transparent 70%);
}

:root.light .dash-grid-overlay {
    background-image:
        linear-gradient(rgba(0,0,0,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px);
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

/* Green theme orbs (www.cfin.be pages) */
.auth-theme-green .dash-orb-1 {
    background: radial-gradient(circle, rgba(52, 199, 89, 0.35) 0%, transparent 70%);
}
.auth-theme-green .dash-orb-2 {
    background: radial-gradient(circle, rgba(10, 132, 255, 0.28) 0%, transparent 70%);
}
.auth-theme-green .dash-orb-3 {
    background: radial-gradient(circle, rgba(191, 90, 242, 0.22) 0%, transparent 70%);
}

:root.light .auth-theme-green .dash-orb-1 {
    background: radial-gradient(circle, rgba(52, 199, 89, 0.55) 0%, transparent 70%);
}
:root.light .auth-theme-green .dash-orb-2 {
    background: radial-gradient(circle, rgba(10, 132, 255, 0.5) 0%, transparent 70%);
}
:root.light .auth-theme-green .dash-orb-3 {
    background: radial-gradient(circle, rgba(191, 90, 242, 0.45) 0%, transparent 70%);
}

/* Ensure auth page elements sit above background effects */
.auth-page .auth-container,
.auth-page .auth-content,
.auth-page .legal-container {
    position: relative;
    z-index: 1;
}

/* Ensure dashboard elements sit above background effects */
/* NOTE: .beta-banner and .modal-overlay excluded — they are position:fixed */
/* NOTE: .filters-bar gets z-index:10 (set above) so dropdowns are clickable above main-content */
.page-dashboard .dashboard-hero,
.page-dashboard .banner-stack,
.page-dashboard .main-content,
.page-dashboard .site-footer,
.page-dashboard .margin-warning {
    position: relative;
    z-index: 1;
}

/* Dashboard orbs mobile optimization */
@media (max-width: 768px) {
    .dash-orb-1 { width: 350px; height: 350px; }
    .dash-orb-2 { width: 300px; height: 300px; }
    .dash-orb-3 { width: 250px; height: 250px; }
    .dash-grid-overlay { background-size: 40px 40px; }
}
@media (max-width: 480px) {
    .dash-orb-1 { width: 250px; height: 250px; }
    .dash-orb-2 { width: 200px; height: 200px; }
    .dash-orb-3 { width: 150px; height: 150px; }
    .dash-grid-overlay { background-size: 40px 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .dash-orb,
    .aurora-bg::before,
    .aurora-bg::after {
        animation: none;
    }
}

/* ============================================================================
   AURORA BACKGROUND — Animated gradient aurora layer (reactbits-inspired)
   ============================================================================ */
.aurora-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    contain: layout paint;
    will-change: transform;
}

.aurora-bg::before,
.aurora-bg::after {
    content: '';
    position: absolute;
    width: 150%;
    height: 150%;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.07;
    will-change: transform;
}

.aurora-bg::before {
    top: -40%;
    left: -25%;
    background: linear-gradient(135deg,
        rgba(10, 132, 255, 0.6) 0%,
        rgba(191, 90, 242, 0.4) 40%,
        rgba(90, 200, 250, 0.3) 70%,
        transparent 100%);
    animation: auroraShift1 20s ease-in-out infinite;
}

.aurora-bg::after {
    bottom: -40%;
    right: -25%;
    background: linear-gradient(315deg,
        rgba(191, 90, 242, 0.5) 0%,
        rgba(52, 199, 89, 0.3) 35%,
        rgba(10, 132, 255, 0.4) 70%,
        transparent 100%);
    animation: auroraShift2 25s ease-in-out infinite;
}

@keyframes auroraShift1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(5%, 3%) rotate(3deg) scale(1.05); }
    66% { transform: translate(-3%, -2%) rotate(-2deg) scale(0.97); }
}

@keyframes auroraShift2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33% { transform: translate(-4%, -3%) rotate(-3deg) scale(0.95); }
    66% { transform: translate(3%, 4%) rotate(2deg) scale(1.04); }
}

:root.light .aurora-bg::before,
:root.light .aurora-bg::after {
    opacity: 0.09;
}


@media (prefers-reduced-motion: reduce) {
    .aurora-bg::before,
    .aurora-bg::after {
        animation: none;
    }
}

/* ============================================================================
   PARTICLE CANVAS — Positioning for the JS particle system
   ============================================================================ */
.particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* ============================================================================
   CROSS-PAGE CONSISTENCY FIXES (v134)
   ============================================================================ */

/* --- Support page: header card matches trades/stats (full-width) --- */
.page-support .page-header-card {
    margin: 16px auto 12px;
}

/* --- All sub-pages: ensure z-index layering above pseudo background --- */
/* NOTE: .beta-banner intentionally excluded — it is position:fixed and must stay that way */
.page-trades .page-header-card,
.page-trades .kpi-grid,
.page-trades .filters-bar,
.page-trades .main-content,
.page-trades .site-footer,
.page-stats .page-header-card,
.page-stats .filters-bar,
.page-stats .main-content,
.page-stats .site-footer,
.page-support .page-header-card,
.page-support .support-resources,
.page-support .support-container,
.page-support .site-footer,
.page-profile .profile-hero,
.page-profile .profile-stats-grid,
.page-profile .profile-container,
.page-profile .site-footer {
    position: relative;
    z-index: 1;
}

/* --- Page-header-card: better mobile scaling --- */
@media (max-width: 480px) {
    .page-header-card {
        margin: 8px;
        padding: 12px;
        gap: 8px;
    }

    .page-header-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .page-header-icon svg {
        width: 20px;
        height: 20px;
    }

    .page-header-info h1 {
        font-size: 17px;
    }

    .page-header-info p {
        font-size: 11px;
    }

    .page-header-left {
        gap: 10px;
    }
}

/* --- Sub-pages: mobile padding to match dashboard width --- */
@media (max-width: 768px) {
    .page-trades .main-content,
    .page-stats .main-content,
    .page-settings .main-content {
        padding: 0 12px 24px;
    }
}

@media (max-width: 480px) {
    .page-trades .main-content,
    .page-stats .main-content,
    .page-settings .main-content {
        padding: 0 8px 24px;
    }
}

/* --- Filters bar: consistent rounding on all pages --- */
.page-support .filters-bar,
.page-profile .filters-bar {
    width: calc(100% - 48px);
    max-width: 1600px;
    margin: 0 auto 16px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* --- Support page: ticket cards mobile --- */
@media (max-width: 480px) {
    .support-resources {
        padding: 0 8px 8px;
    }

    .support-container {
        padding: 12px 8px;
        padding-bottom: 80px;
    }

    .ticket-card {
        padding: 12px 14px;
    }

    .ticket-header {
        flex-direction: column;
        gap: 6px;
    }

    .ticket-meta {
        gap: 8px;
        flex-wrap: wrap;
    }

    .reply-form textarea {
        min-height: 80px;
    }

    .btn-new-ticket {
        padding: 8px 16px;
        font-size: 13px;
    }
}

/* --- Support page: better modal on small screens --- */
@media (max-width: 480px) {
    .support-container .modal {
        border-radius: var(--radius-lg);
    }

    .support-container .modal-header {
        padding: 14px 16px;
    }

    .support-container .modal-body {
        padding: 16px;
    }

    .support-container .modal-footer {
        padding: 12px 16px;
        flex-direction: column;
    }

    .support-container .modal-footer .btn-cancel,
    .support-container .modal-footer .btn-submit {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* --- Nav actions: ensure consistent spacing on mobile --- */
@media (max-width: 768px) {
    .nav-actions {
        flex: 0 0 auto;
        min-width: auto;
        gap: 4px;
    }

    .nav-actions .btn.btn-icon {
        width: 36px;
        height: 36px;
    }

    .nav-actions .notification-bell {
        width: 36px;
        height: 36px;
    }
}

/* --- Touch devices on mobile: restore 44px minimum tap targets --- */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
    .nav-actions .btn-icon,
    .nav-actions .btn.btn-icon,
    .nav-actions .notification-bell {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .search-clear-btn {
        width: 44px;
        height: 44px;
    }
}

/* --- Footer: improved mobile layout --- */
@media (max-width: 480px) {
    .footer-content {
        gap: 12px;
    }

    .footer-brand {
        justify-content: center;
    }

    .footer-center {
        gap: 10px;
    }

    .footer-links {
        gap: 4px;
        font-size: 11px;
    }

    .footer-social {
        gap: 8px;
    }

    .footer-copyright {
        font-size: 10px;
        text-align: center;
    }

    .footer-risk {
        display: block;
        margin-top: 4px;
    }

    .footer-shortcuts {
        display: none;
    }
}

/* --- AI chat bubble: don't overlap beta banner --- */
body.beta-banner-active .ai-chat-bubble {
    bottom: 48px;
}

body.beta-banner-active .ai-chat-panel {
    bottom: 48px;
}

@media (max-width: 480px) {
    body.beta-banner-active .ai-chat-bubble {
        bottom: 60px;
    }

    body.beta-banner-active .ai-chat-panel {
        bottom: 60px;
    }
}

/* --- Filters bar mobile improvements --- */
@media (max-width: 480px) {
    .page-dashboard .filters-bar,
    .page-trades .filters-bar,
    .page-stats .filters-bar,
    .page-settings .filters-bar {
        width: calc(100% - 16px);
        margin: 0 auto 12px;
    }

    .status-bar-main {
        padding: 8px 12px;
        min-height: 44px;
    }

    .filter-toggle-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .quick-stats {
        gap: 8px;
    }

    .quick-stat-label {
        font-size: 9px;
    }

    .quick-stat-value {
        font-size: 12px;
    }

    .status-indicators {
        gap: 8px;
    }

    .status-text {
        font-size: 11px;
    }

    /* Filters panel compact on small screens */
    .filters-panel .filters-inner {
        flex-direction: column;
        gap: 8px;
    }

    .filter-group {
        width: 100%;
    }

    .filter-group select,
    .filter-group input[type="date"] {
        width: 100%;
    }

    .filter-presets {
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* --- Trades stats grid mobile --- */
@media (max-width: 480px) {
    .trades-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: calc(100% - 16px);
    }
    .trades-stat-card {
        padding: 10px 12px;
    }
    .trades-stat-card .value {
        font-size: 16px;
    }
    .trades-stat-card .label {
        font-size: 9px;
    }
    .trades-stat-card .subtext {
        font-size: 10px;
    }
}

@media (max-width: 360px) {
    .trades-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* --- KPI grid mobile improvements --- */
@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .kpi-card {
        padding: 12px;
    }

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

    .kpi-value {
        font-size: 20px;
    }
}

/* --- Chart panel mobile --- */
@media (max-width: 480px) {
    .chart-panel.full-width {
        margin: 0 -8px;
        border-radius: 0;
    }

    .chart-timeframe-pills {
        gap: 2px;
    }

    .chart-timeframe-pill {
        padding: 4px 8px;
        font-size: 11px;
    }
}

/* --- Calendar mobile improvements --- */
@media (max-width: 480px) {
    .calendar-agenda-wrapper {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .calendar-panel {
        padding: 16px;
    }
}

/* --- Improved empty state styling across pages --- */
.empty-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-sub);
}

.empty-state svg {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    opacity: 0.4;
    color: var(--text-dim);
}

.empty-state p {
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 6px;
}

.empty-state-desc {
    font-size: 13px;
    color: var(--text-dim);
}

/* --- Settings two-column mobile --- */
@media (max-width: 768px) {
    .settings-two-column {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .api-config-row {
        flex-direction: column;
        gap: 12px;
    }

    .api-key-display {
        flex-wrap: wrap;
        gap: 6px;
    }

    .api-key-display code {
        font-size: 11px;
        word-break: break-all;
    }

    .info-banner {
        padding: 12px;
        font-size: 12px;
    }
}

/* ============================================================================
   AI SUPPORT CHAT WIDGET
   ============================================================================ */

.ai-chat-bubble {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--purple, rgb(191, 90, 242));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(191, 90, 242, 0.4);
    z-index: 9989;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ai-chat-bubble:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(191, 90, 242, 0.5);
}

.ai-chat-bubble.hidden {
    display: none;
}

.ai-chat-panel {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 400px;
    max-height: 600px;
    background: var(--bg-panel, rgb(44, 44, 46));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    z-index: 9990;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    animation: aiChatSlideUp 0.25s ease-out;
}

.ai-chat-panel.hidden {
    display: none;
}

@keyframes aiChatSlideUp {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header */
.ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--purple, rgb(191, 90, 242));
    color: #fff;
    flex-shrink: 0;
}

.ai-chat-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-chat-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.ai-chat-header-title {
    font-size: 14px;
    font-weight: 600;
}

.ai-chat-header-status {
    font-size: 11px;
    opacity: 0.85;
}

.ai-chat-header-actions {
    display: flex;
    gap: 4px;
}

.ai-chat-header-btn {
    background: none;
    border: none;
    color: #fff;
    padding: 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.ai-chat-header-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

/* Messages area */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
    max-height: 380px;
    scroll-behavior: smooth;
}

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

.ai-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
    border-radius: var(--radius-xs);
}

.light .ai-chat-messages::-webkit-scrollbar-thumb {
    background: var(--border-subtle);
}

.light .ai-chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--border);
}

/* Message bubbles */
.ai-chat-message {
    display: flex;
    max-width: 85%;
}

.ai-chat-message-user {
    align-self: flex-end;
}

.ai-chat-message-assistant {
    align-self: flex-start;
}

.ai-chat-message-content {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
}

.ai-chat-message-user .ai-chat-message-content {
    background: var(--purple, rgb(191, 90, 242));
    color: #fff;
    border-bottom-right-radius: 4px;
}

.ai-chat-message-assistant .ai-chat-message-content {
    background: var(--bg-main, rgb(28, 28, 30));
    color: var(--text-main, #fff);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-bottom-left-radius: 4px;
}

.ai-chat-message-content code {
    background: rgba(255, 255, 255, 0.1);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    font-size: 12px;
}

.ai-chat-message-content strong {
    font-weight: 600;
}

.ai-chat-bullet {
    display: block;
    padding-left: 12px;
    position: relative;
}

.ai-chat-bullet::before {
    content: "\2022";
    position: absolute;
    left: 0;
}

/* System messages */
.ai-chat-message-system {
    align-self: center;
    font-size: 11px;
    color: var(--text-sub, rgb(152, 152, 157));
    background: rgba(255, 255, 255, 0.05);
    padding: 6px 12px;
    border-radius: var(--radius-lg);
    text-align: center;
}

/* Typing indicator */
.ai-chat-typing {
    padding: 8px 16px;
    display: flex;
    gap: 4px;
    align-items: center;
}

.ai-chat-typing.hidden {
    display: none;
}

.ai-chat-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-sub, rgb(152, 152, 157));
    animation: aiTypingDot 1.2s ease-in-out infinite;
}

.ai-chat-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-chat-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes aiTypingDot {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}

/* Input area */
.ai-chat-input-area {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    background: var(--bg-panel, rgb(44, 44, 46));
}

.ai-chat-input {
    flex: 1;
    background: var(--bg-main, rgb(28, 28, 30));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
    border-radius: var(--radius-lg);
    padding: 10px 14px;
    color: var(--text-main, #fff);
    font-size: 13px;
    line-height: 1.4;
    resize: none;
    max-height: 120px;
    outline: none;
    transition: border-color 0.15s ease;
    font-family: inherit;
}

.ai-chat-input:focus {
    border-color: var(--purple, rgb(191, 90, 242));
}

.ai-chat-input::placeholder {
    color: var(--text-sub, rgb(152, 152, 157));
}

.ai-chat-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--purple, rgb(191, 90, 242));
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.ai-chat-send-btn:hover {
    background: rgb(170, 70, 220);
}

.ai-chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Footer */
.ai-chat-footer {
    padding: 8px 16px 10px;
    text-align: center;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.05));
}

.ai-chat-footer-link {
    font-size: 11px;
    color: var(--text-sub, rgb(152, 152, 157));
    text-decoration: none;
    transition: color 0.15s ease;
}

.ai-chat-footer-link:hover {
    color: var(--purple, rgb(191, 90, 242));
}

/* Mobile responsive */
@media (max-width: 480px) {
    .ai-chat-panel {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 16px 16px 0 0;
    }

    .ai-chat-messages {
        max-height: calc(100vh - 200px);
        max-height: calc(100dvh - 200px);
    }

    .ai-chat-bubble {
        bottom: 16px;
        right: 16px;
    }
}

/* Light mode overrides */
.light .ai-chat-message-assistant .ai-chat-message-content {
    background: rgb(242, 242, 247);
    color: rgb(28, 28, 30);
    border-color: rgba(0, 0, 0, 0.08);
}

.light .ai-chat-input {
    background: rgb(242, 242, 247);
    color: rgb(28, 28, 30);
    border-color: rgba(0, 0, 0, 0.1);
}

.light .ai-chat-message-content code {
    background: rgba(0, 0, 0, 0.06);
}

.light .ai-chat-panel {
    background: rgb(255, 255, 255);
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.light .ai-chat-footer {
    border-top-color: rgba(0, 0, 0, 0.08);
}

.light .ai-chat-messages {
    background: rgb(248, 248, 250);
}

.light .ai-chat-message-user .ai-chat-message-content {
    background: var(--accent, rgb(10, 132, 255));
    color: white;
}

.light .ai-chat-typing span {
    background: rgba(0, 0, 0, 0.25);
}

/* Hide on print */
@media print {
    .ai-chat-bubble,
    .ai-chat-panel {
        display: none !important;
    }
}

/* ============================================================================
   Micro-Interactions & Subtle Animations
   Premium, subtle motion that elevates the UI feel.
   All animations respect prefers-reduced-motion and avoid var() in shorthand
   (Safari compatibility).
   ============================================================================ */

/* --- Notification badge pop --- */
@keyframes badgePop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.2); }
    80%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.notification-badge:not(:empty),
.nav-badge:not(:empty) {
    animation: badgePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Enhanced row hover glow (trades) --- */
.trades-table tbody tr:not(.trade-details-row):hover td {
    box-shadow: inset 0 0 0 0.5px rgba(10, 132, 255, 0.08);
}

/* --- Smooth focus ring expansion --- */
.btn:focus-visible,
.toggle-switch input:focus-visible + .toggle-track,
.nav-link:focus-visible {
    outline: 2px solid rgba(10, 132, 255, 0.8);
    outline-offset: 3px;
    transition: outline-offset 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Nav link underline — defined in base .nav-link::after section */

/* --- Card content fade on refresh --- */
@keyframes contentRefresh {
    0%   { opacity: 1; }
    30%  { opacity: 0.6; }
    100% { opacity: 1; }
}

.card-refreshing {
    animation: contentRefresh 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Staggered card entrance (stats/dashboard) --- */
@keyframes cardRevealUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-stats .stat-card,
.page-stats .chart-panel,
.page-stats .trades-stat-card {
    animation: cardRevealUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-stats .stat-card:nth-child(1) { animation-delay: 0s; }
.page-stats .stat-card:nth-child(2) { animation-delay: 0.05s; }
.page-stats .stat-card:nth-child(3) { animation-delay: 0.1s; }
.page-stats .stat-card:nth-child(4) { animation-delay: 0.15s; }
.page-stats .stat-card:nth-child(5) { animation-delay: 0.2s; }
.page-stats .stat-card:nth-child(6) { animation-delay: 0.25s; }
.page-stats .stat-card:nth-child(n+7) { animation-delay: 0.3s; }

.page-stats .chart-panel:nth-of-type(1) { animation-delay: 0.1s; }
.page-stats .chart-panel:nth-of-type(2) { animation-delay: 0.15s; }
.page-stats .chart-panel:nth-of-type(3) { animation-delay: 0.2s; }

/* --- Smooth checkbox check animation --- */
@keyframes checkPop {
    0%   { transform: scale(0.8); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

input[type="checkbox"]:checked {
    animation: checkPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Subtle shimmer on skeleton placeholders --- */
@keyframes skeletonShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton,
.skeleton-line {
    background: linear-gradient(
        90deg,
        var(--bg-tertiary) 25%,
        var(--bg-panel-dark) 50%,
        var(--bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.8s ease-in-out infinite;
    border-radius: 4px;
}

/* --- Modal backdrop blur transition --- */
.modal-overlay,
.keyboard-help-overlay {
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    transition: backdrop-filter 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                -webkit-backdrop-filter 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.3s ease;
}

.modal-overlay.visible,
.keyboard-help-overlay.visible {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* --- Icon button micro-interaction --- */
.icon-btn,
.action-btn,
.refresh-btn {
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.15s ease,
                background-color 0.15s ease;
}

.icon-btn:active,
.action-btn:active,
.refresh-btn:active {
    transform: scale(0.88);
}

/* --- Smooth accordion expand for settings --- */
.settings-section-content,
.faq-answer {
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.25s ease;
}

/* --- SVG icon rotate on expand --- */
.expand-icon,
.chevron-icon,
.faq-toggle svg {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.expanded .expand-icon,
.expanded .chevron-icon,
.faq-item.active .faq-toggle svg {
    transform: rotate(180deg);
}

/* --- Instance card status glow --- */
.instance-card .status-dot.online {
    box-shadow: 0 0 6px rgba(52, 199, 89, 0.4),
                0 0 12px rgba(52, 199, 89, 0.15);
}

/* --- Subtle hover lift on interactive list items --- */
.agenda-item,
.notification-item,
.ticket-card {
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.2s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.15s ease;
}

.agenda-item:hover,
.notification-item:hover,
.ticket-card:hover {
    transform: translateY(-1px);
}

/* --- Filter chip press feedback --- */
.filter-presets .btn,
.filter-chip,
.tag {
    transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.15s ease,
                color 0.15s ease,
                border-color 0.15s ease,
                box-shadow 0.15s ease;
}

.filter-presets .btn:active,
.filter-chip:active,
.tag:active {
    transform: scale(0.95);
}

/* --- Pagination hover effect --- */
.pagination button {
    transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1),
                background-color 0.15s ease,
                color 0.15s ease,
                border-color 0.15s ease;
}

.pagination button:hover:not(:disabled) {
    transform: translateY(-1px);
}

.pagination button:active:not(:disabled) {
    transform: scale(0.95);
}

/* --- Reduced motion — shorten or disable decorative animations --- */
@media (prefers-reduced-motion: reduce) {
    .notification-badge:not(:empty),
    .nav-badge:not(:empty) {
        animation-duration: 0.01s;
    }

    .column-toggle-item {
        animation: none;
    }

    .page-stats .stat-card,
    .page-stats .chart-panel,
    .page-stats .trades-stat-card {
        animation-duration: 0.01s;
    }

    .trade-details-content {
        animation-duration: 0.01s;
    }

    input[type="checkbox"]:checked {
        animation: none;
    }

    .skeleton,
    .skeleton-line {
        animation: none;
    }

    .card-refreshing {
        animation-duration: 0.01s;
    }

    .settings-section {
        animation-duration: 0.01s;
    }

    .nav-link::after {
        transition-duration: 0.01s;
    }
}

/* Layout containment for scroll perf — prevents repaints from propagating */
.chart-panel,
.calendar-panel,
.agenda-panel,
.open-positions-panel,
.pending-orders-panel,
.kpi-card,
.instance-card,
.stat-card {
    contain: layout style paint;
}

/* ============================================================================
   Mobile Performance Optimizations
   - Disable expensive GPU effects on mobile (backdrop-filter, complex shadows)
   - Pause infinite animations when elements are hidden
   - Simplify hover-only effects (no hover on touch)
   ============================================================================ */

/* --- Disable backdrop-filter on mobile (100x faster with solid overlays) --- */
@media (max-width: 768px) {
    :root {
        --glass-blur: 0px;
    }

    /* Glass cards: use solid semi-transparent background instead of blur */
    .glass-card,
    .stat-card,
    .kpi-card.glass,
    .chart-panel,
    .instance-card,
    .settings-instance-card,
    .dashboard-hero,
    .ticket-card {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--glass-bg);
    }

    /* Notification dropdown */
    .notification-dropdown {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* Modal overlays: solid overlay instead of blur */
    .modal-overlay,
    .keyboard-help-overlay,
    .modal-overlay.visible,
    .keyboard-help-overlay.visible {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(0, 0, 0, 0.75);
    }

    /* Confirm dialog overlay */
    .confirm-overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(0, 0, 0, 0.75);
    }

    /* AI chat overlay */
    .ai-chat-overlay {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: rgba(0, 0, 0, 0.75);
    }

    /* Mobile menu */
    .mobile-nav-dropdown {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    /* --- Reduce box-shadows on mobile --- */
    .kpi-card,
    .stat-card,
    .instance-card,
    .chart-panel,
    .calendar-panel,
    .agenda-panel,
    .open-positions-panel,
    .pending-orders-panel,
    .ticket-card,
    .settings-instance-card {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }

    /* Simplify input focus shadows */
    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus {
        box-shadow: 0 0 0 2px var(--accent-bg);
    }

    /* Remove hover box-shadow effects (no hover on touch) */
    .kpi-card:hover,
    .stat-card:hover,
    .instance-card:hover,
    .chart-panel:hover,
    .ticket-card:hover,
    .btn-social:hover {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }

    /* --- Simplify transitions on mobile --- */
    .kpi-card,
    .stat-card,
    .instance-card {
        transition: none;
    }

    /* Remove transform hover effects (no hover on touch) */
    .kpi-card:hover,
    .stat-card:hover,
    .instance-card:hover {
        transform: none;
    }
}

/* --- Pause infinite animations when elements are hidden or off-screen --- */
.u-hidden .spinner,
.hidden .spinner,
[style*="display: none"] .spinner,
.u-hidden [class*="pulse"],
.hidden [class*="pulse"] {
    animation-play-state: paused;
}

/* Skeleton shimmer: pause when not visible */
.skeleton-line:not(:is(.loading *)) {
    animation: none;
}