/**
 * 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);
    --orange: rgb(255, 149, 0);          /* iOS system orange */
    --orange-bg: rgba(255, 149, 0, 0.15);
    --yellow: rgb(255, 204, 0);          /* iOS system yellow */

    /* Extended background levels */
    --bg-tertiary: rgb(58, 58, 60);       /* Third-level background */
    --bg-elevated: rgb(50, 50, 52);       /* Elevated surface */

    /* 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);

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

    /* Sizing & Spacing */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --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);

    /* Animation - Unified timing */
    --transition: 0.2s ease;
    --transition-slow: 0.4s ease;
    --transition-fast: 0.15s ease;
    --cubic: cubic-bezier(0.22, 1, 0.36, 1);
    --cubic-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Typography */
    --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
}

/* ============================================================================
   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, 205, 65);
    --profit-bg: rgba(40, 205, 65, 0.1);
    --loss: rgb(255, 59, 48);
    --loss-bg: rgba(255, 59, 48, 0.1);
    --accent: rgb(0, 122, 255);
    --accent-hover: rgb(0, 102, 235);
    --accent-bg: rgba(0, 122, 255, 0.1);
    --purple: rgb(175, 82, 222);
    --purple-bg: rgba(175, 82, 222, 0.1);
    --teal: rgb(85, 190, 240);
    --teal-bg: rgba(85, 190, 240, 0.1);
    --bg-tertiary: rgb(229, 229, 234);
    --bg-elevated: rgb(238, 238, 243);
    --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);
    --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);
}

/* ============================================================================
   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;
}

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

/* Overscroll behavior for better feel */
body {
    overscroll-behavior-y: contain;
}

/* 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;
    }
}

/* Focus-visible styles for keyboard navigation accessibility */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

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

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

/* ============================================================================
   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);
    animation: focusRing 0.2s ease-out;
}

@keyframes focusRing {
    0% {
        outline-offset: 0;
        box-shadow: 0 0 0 0 var(--accent-bg);
    }
    100% {
        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;
}

/* Subtle lift on focus */
input:focus,
select:focus,
textarea:focus {
    transform: translateY(-1px);
}

/* Reset transform for inline inputs */
.filter-group input:focus,
.filter-group select:focus,
.editable-select:focus {
    transform: none;
}

/* 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;
}

::-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: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 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: all 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: 100px;
    position: relative;
    transition: all 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: all 0.25s cubic-bezier(0.4, 0, 0.2, 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: all 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: all 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: -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;
    overflow-x: hidden;
    /* Smooth theme transitions */
    transition: background-color 0.4s ease, color 0.3s ease;
}

/* ============================================================================
   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;
    }
}

/* Keep nav completely stable during transitions - no animation at all */
.nav-container {
    view-transition-name: nav;
    position: relative;
    z-index: 1000;
}

::view-transition-old(nav),
::view-transition-new(nav) {
    animation: none;
    position: fixed;
}

/* 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; }
}

/* Navigation loading state */
.nav.nav-loading .nav-link.active::after {
    animation: navLoadingPulse 1s ease-in-out infinite;
}

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

/* 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;
}

/* Fallback animations reuse the same fade keyframes defined above */
@keyframes fallbackContentOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

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

/* Page fade-in animation (initial page load) */
@keyframes pageReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    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.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Staggered reveal for sections */
body.page-loaded .section-title {
    opacity: 0;
    animation: fadeInUp 0.4s ease 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.4s ease forwards 0.1s;
}

body.page-loaded .chart-panel {
    opacity: 0;
    animation: fadeInUp 0.4s ease forwards 0.2s;
}

body.page-loaded .instances-grid {
    opacity: 0;
    animation: fadeInUp 0.4s ease forwards 0.25s;
}

body.page-loaded .calendar-agenda-wrapper {
    opacity: 0;
    animation: fadeInUp 0.4s ease 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; }
}

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

/* Staggered reveal for cards and panels */
.kpi-card,
.chart-panel,
.calendar-panel,
.agenda-panel,
.instance-card {
    opacity: 0;
    animation: pageReveal 0.4s 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; }

/* 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;
        text-shadow: none;
    }
    30% {
        color: var(--profit);
        text-shadow: 0 0 8px rgba(52, 199, 89, 0.4);
    }
    100% {
        color: inherit;
        text-shadow: none;
    }
}

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

@keyframes valueDecrease {
    0% {
        color: inherit;
        text-shadow: none;
    }
    30% {
        color: var(--loss);
        text-shadow: 0 0 8px rgba(255, 69, 58, 0.4);
    }
    100% {
        color: inherit;
        text-shadow: none;
    }
}

/* 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);
}

/* Theme icon visibility with animation - matching refresh button speed (0.8s) */
#theme-icon-dark,
#theme-icon-light {
    transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

#theme-icon-dark.hidden,
#theme-icon-light.hidden {
    opacity: 0;
    transform: scale(0.7) rotate(-20deg);
    position: absolute;
    pointer-events: none;
}

#theme-icon-dark:not(.hidden),
#theme-icon-light:not(.hidden) {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Smooth transitions for theme-dependent elements */
.nav,
.nav-container,
.filters-bar,
.chart-panel,
.kpi-card,
.calendar-panel,
.agenda-panel,
.table-container,
.trades-table th,
.trades-table td,
.login-box,
.agenda-item,
.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: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
    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);
}

/* ============================================================================
   Login Page - Dashboard Preview Overlay
   ============================================================================ */

/* Login page body */
body.login-page {
    overflow: hidden;
}

/* 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, #ff6b35, #f7931e);
    border-radius: 10px;
    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: 4px;
}

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

.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: 4px;
    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: 4px;
}

/* 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 */
.floating-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 1;
}

.floating-orb.orb-1 {
    width: 350px;
    height: 350px;
    background: var(--accent);
    top: 5%;
    left: 5%;
    animation: floatOrb1 12s ease-in-out infinite;
}

.floating-orb.orb-2 {
    width: 300px;
    height: 300px;
    background: var(--purple);
    bottom: 10%;
    right: 5%;
    animation: floatOrb2 15s ease-in-out infinite;
}

.floating-orb.orb-3 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: floatOrb3 18s 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.25;
}

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

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

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

/* 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 {
    background: rgba(44, 44, 46, 0.95);
    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);
    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(20px);
    }
    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: 16px;
    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: 20px;
    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: all 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: all 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 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.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); }
}

/* ============================================================================
   Navigation
   ============================================================================ */
.nav-container {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-header);
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    /* 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: 9px;
    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: 12px;
    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: 6px;
    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;
    background: var(--bg-panel-dark);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
}

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


/* 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: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform: translateX(-50%);
    opacity: 0;
}

.nav-link:hover {
    color: var(--text-main);
    background: var(--bg-panel);
    transform: translateY(-1px);
}

.nav-link:hover::after {
    width: 20px;
    opacity: 0.6;
}

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

.nav-link.active {
    color: var(--accent);
    background: var(--bg-main);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    /* No font-weight change to prevent layout shift */
}

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

.nav-link.active::after {
    width: calc(100% - 20px);
    opacity: 0.8;
    background: linear-gradient(90deg, var(--accent), var(--purple));
}

/* 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: 100px;
    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 {
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

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

/* Desktop logout button - with accent border */
.nav-logout-desktop {
    display: inline-flex;
    border: 1px solid var(--loss) !important;
    color: var(--loss) !important;
    background: transparent !important;
    transition: all 0.15s ease;
}

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

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

.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: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-panel-dark);
    color: var(--text-sub);
    transition: all 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: 7px;
}

/* ============================================================================
   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: all 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);
}

.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;
}

.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-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) {
    .btn-sm {
        padding: 10px 16px;
        min-height: 44px;
    }

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

.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: #2fb866;
    border-color: #2fb866;
    box-shadow: 0 6px 20px rgba(52, 199, 89, 0.35), 0 2px 8px rgba(52, 199, 89, 0.2);
    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: #e6342a;
    border-color: #e6342a;
    box-shadow: 0 6px 20px rgba(255, 69, 58, 0.35), 0 2px 8px rgba(255, 69, 58, 0.2);
    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(-1px);
}

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

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

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

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

.card:hover {
    border-color: var(--border);
    box-shadow: var(--shadow-card-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: 20px;
}

.card-header {
    padding: 16px 20px;
    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: 12px 20px;
    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;
}

/* 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: all 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: 10px;
    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);
}

/* 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 paint;
}

.filters-panel.expanded {
    max-height: 300px;
    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);
    }
}

.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: all 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);
    transform: translateY(-1px);
}

.filter-group select:active {
    transform: scale(0.98);
}

/* 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: all 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: all 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: all 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: all var(--transition), width 0.2s ease;
    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: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 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: all 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: all 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: 8px;
    }

    .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 {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
    animation: contentFadeIn 0.4s ease;
}

@keyframes contentFadeIn {
    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: 16px;
    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;
}

/* 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: 100px;
    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: 24px;
    margin-bottom: 24px;
    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-bottom: 16px;
}

@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: 16px;
    margin-bottom: 24px;
}

@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: 8px;
    }
    .kpi-card {
        padding: 12px 14px;
        min-height: 90px;
    }
    .kpi-label {
        font-size: 10px;
    }
    .kpi-value {
        font-size: 18px;
    }
    .kpi-sub {
        font-size: 10px;
    }
}

.kpi-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    transition: box-shadow var(--transition), border-color var(--transition), transform 0.15s ease;
    position: relative;
    overflow: hidden;
    animation: kpiSlideIn 0.4s var(--cubic) backwards;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    min-height: 120px;
}

.kpi-card:hover {
    /* 3D tilt is applied via JS - don't override transform here */
    box-shadow: var(--shadow-card-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,
.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,
    .chart-panel {
        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,
.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),
.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: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.kpi-value {
    font-size: 32px;
    font-weight: 600;
    font-feature-settings: 'tnum' 1;
    letter-spacing: -1px;
}

/* KPI value row - for P/L + percentage side by side */
.kpi-value-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

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

.kpi-pct {
    font-size: 18px;
    font-weight: 500;
    font-feature-settings: 'tnum' 1;
    opacity: 0.85;
}

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

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

/* 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: 13px;
    margin-top: 8px;
    color: var(--text-sub);
}

.kpi-change .positive { color: var(--profit); }
.kpi-change .negative { 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: 48px;
    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: 48px; /* Room for sparkline at bottom */
    padding-right: 24px; /* Reset right padding */
}

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

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

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

/* Compact KPI cards (no sparkline) - used on Statistics page */
.kpi-card-compact {
    padding-bottom: 20px !important;
    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-compact {
        padding: 16px 18px !important;
        min-height: auto;
    }

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

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

/* 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: 24px;
    margin-bottom: 24px;
}

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

.chart-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    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(--shadow);
    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;
}

.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.equity { background: var(--profit); }
.legend-dot.balance { background: var(--accent); }
.legend-dot.drawdown { background: var(--loss); }

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

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

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

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

/* Instance row - keeps same symbols together on the same line */
.instance-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
}

.instance-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 16px;
    transition: box-shadow var(--transition), border-color var(--transition), transform 0.15s ease;
    animation: cardFadeIn 0.35s var(--cubic) backwards;
    /* Auto-fit: all same-symbol cards fit on one row */
    flex: 1 1 0;
    min-width: 180px;
    max-width: 400px;
    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(--shadow-card-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-row {
        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-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--border);
}

.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);
}

/* 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: 100px;
    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: 8px;
    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: 12px;
    padding: 4px 6px;
    margin: 0 -6px;
    border-radius: var(--radius-sm);
    transition: background var(--transition);
}

.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);
}

.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: 8px;
        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: 4px;
    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;
}

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

.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 {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 16px;
    /* 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::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: all 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;
    /* No max-width - grid will fill available space */
}

.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: 6px;
    background: var(--bg-main);
    cursor: pointer;
    transition: all 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: 8px;
    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;
    }
}

/* Daily Agenda Panel (side-by-side with calendar) */
.agenda-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 16px;
    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::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: all 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 var(--cubic);
}

.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: 4px;
}

.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;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    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: 4px;
    color: var(--text-dim);
    cursor: pointer;
    opacity: 0;
    transform: scale(0.85);
    transition: all 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 var(--cubic);
}

.copy-btn.copied svg {
    animation: checkPop 0.3s var(--cubic-bounce);
}

@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;
}

/* 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: 10px;
    padding: 8px 12px;
    transition: all 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: 14px;
    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: 10px;
    transition: all 0.15s ease;
    margin: 2px 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: 4px;
}

.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 - subtle styling */
.relative-time-toggle {
    font-size: 13px;
    color: var(--text-sub);
    border-top: 1px solid var(--border-subtle);
    margin: 4px 0 0;
    padding: 10px 12px !important;
    border-radius: 0 0 10px 10px !important;
}

.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 !important;
}

.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 !important;
}

.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 - no expand indicator */
.trade-details-row td:first-child::before {
    display: none !important;
}

.trade-details-row {
    background: var(--bg-panel) !important;
    cursor: default;
}

.trade-details-row td {
    padding: 0 !important;
    background: var(--bg-panel) !important;
    border-bottom: 2px solid var(--border);
}

.trade-details-row td:first-child {
    padding-left: 0 !important;
    box-shadow: none !important;
}

.trade-details-row td:first-child::before {
    display: none !important;
}

.trade-details-cell {
    box-shadow: inset 3px 0 0 var(--accent) !important;
}

.trade-details-content {
    padding: 20px 28px;
}

/* 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: all 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: 100px;
    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: all 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
   ============================================================================ */

/* 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;
        -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: 9px;
    }
}

/* 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 {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    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 {
    box-shadow: var(--shadow-card-hover);
}

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

.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.7s cubic-bezier(0.4, 0, 0.2, 1) 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;
}

@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: all 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);
}

/* ============================================================================
   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: all 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: all 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: all 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;
    }
}

/* 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: 7px;
        box-shadow: 0 2px 6px rgba(10, 132, 255, 0.2);
    }

    .nav-title {
        display: none; /* Hide title on mobile, logo is enough */
    }

    .nav-account {
        font-size: 10px;
        padding: 3px 7px;
        margin-left: 4px;
        border-radius: 5px;
    }

    /* 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: 9px;
        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: all 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 {
        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-dim);
        border-radius: 0;
        transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease;
        opacity: 0.7;
    }

    .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: 12px;
        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: 10px;
        font-size: 15px;
        font-weight: 500;
        background: transparent;
        border: none;
        box-shadow: none;
        min-width: unset;
        min-height: 48px;
        transition: all 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: all 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: rgba(255, 69, 58, 0.1);
        color: var(--loss);
    }

    .nav.expanded .nav-link-logout:active {
        background: rgba(255, 69, 58, 0.15);
        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 smaller */
    .nav-actions .btn-icon {
        width: 32px;
        height: 32px;
        border-radius: 7px;
    }

    .nav-actions .btn-icon:first-child {
        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 */
    .status-bar-main {
        padding: 12px 16px;
        gap: 12px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 56px;
    }

    /* 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: all 0.15s ease, transform 0.1s ease;
    }

    .filter-group select:active {
        background: var(--bg-selected);
        transform: scale(0.97);
        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: all 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) - full width on mobile */
    .filter-group.filter-actions {
        grid-column: 1 / -1;
        justify-content: center;
        margin-left: 0;
        margin-top: 8px;
    }

    .filter-group.filter-actions .btn {
        width: 100%;
        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);
    }

    .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: 6px;
        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: 4px;
        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);
    }

    /* 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: 6px;
    }

    .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-row {
        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);
    }

    /* 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: 8px;
        padding: 1px 3px;
    }

    .page-settings .instance-stats,
    .page-stats .instance-stats,
    .settings-instances-grid .instance-stats {
        font-size: 8px;
    }

    .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: 8px;
        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: 9px;
    }

    .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%;
    }

    /* Login page - mobile optimized */
    .login-container {
        padding: 16px;
    }

    .login-overlay {
        padding: 16px;
        padding-top: max(16px, env(safe-area-inset-top));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
        align-items: flex-start;
        padding-top: max(60px, env(safe-area-inset-top, 60px));
    }

    .login-box {
        padding: 32px 24px;
        max-width: 100%;
        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: 14px;
        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: 10px;
    }

    .password-toggle {
        right: 10px;
        bottom: 10px;
        padding: 6px;
    }

    .login-box button[type="submit"] {
        padding: 14px;
        font-size: 16px;
        border-radius: 10px;
        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: 8px;
    }

    .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: 3px;
    }

    .calendar-day .date {
        font-size: 10px;
    }

    .instance-chart {
        height: 60px;
    }

    .trades-table th,
    .trades-table td {
        padding: 8px 10px;
    }

    .trades-table {
        font-size: 11px;
    }

    .trades-table th {
        font-size: 9px;
    }

    /* 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"],
    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 - Always 4 per row on extra small screens */
    .page-settings .instance-card,
    .page-stats .instance-card,
    .settings-instances-grid .instance-card {
        padding: 4px;
        flex: 0 0 calc(25% - 3px);
        width: calc(25% - 3px);
        max-width: calc(25% - 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: 7px;
        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(40px, env(safe-area-inset-top, 40px));
    }

    .login-box {
        padding: 28px 20px;
        border-radius: 16px;
    }

    .login-logo {
        width: 48px;
        height: 48px;
        font-size: 20px;
        border-radius: 12px;
        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);
        border-radius: var(--radius-lg);
    }

    /* 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(12px, env(safe-area-inset-left));
        padding-right: max(12px, 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.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

/* KPI cards with staggered reveal */
.kpi-card {
    opacity: 0;
    animation: pageReveal 0.4s 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.4s 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;
}

/* Hidden theme icon state */
#theme-icon-dark.hidden,
#theme-icon-light.hidden {
    opacity: 0;
    transform: scale(0.6) rotate(-30deg);
    position: absolute;
    pointer-events: none;
}

/* Visible theme icon state */
#theme-icon-dark:not(.hidden),
#theme-icon-light:not(.hidden) {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    animation: scaleIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Theme icon hover effect - only rotate the icon, not the button */
.btn-icon:hover svg:not(.hidden) {
    transform: rotate(20deg);
}

/* ============================================================================
   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,
.table-container,
.trades-table th,
.trades-table td,
.login-box,
.login-container,
.agenda-item,
.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;
}

@keyframes skeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* 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: 4px;
}

.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 var(--cubic);
    font-size: 13px;
    color: var(--text-main);
}

.network-status.visible {
    transform: translateX(-50%) translateY(0);
}

.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: 4px;
    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: 6px;
    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: translateY(4px);
    }
    to {
        opacity: 1;
        transform: 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: scaleIn 0.25s var(--cubic);
}

@keyframes scaleIn {
    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: all 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: 4px;
    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: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.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: 3px;
}

/* 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: 3px;
    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: 10px;
    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: 3px;
}

.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 {
    padding: 48px 24px;
    text-align: center;
}

.empty-state svg {
    color: var(--text-dim);
    margin-bottom: 16px;
}

.empty-state h4 {
    color: var(--text-sub);
    font-size: 14px;
    margin-bottom: 8px;
}

.empty-state p {
    color: var(--text-dim);
    font-size: 12px;
}

.empty-state-sm {
    padding: 16px;
    text-align: center;
    color: 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: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease, 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);
    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;
}

.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: all 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;
    max-height: calc(100vh - 200px);
}

/* 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: rgba(0, 0, 0, 0.02);
}

/* 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: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-close:hover {
    color: var(--text-main);
    background: rgba(255, 255, 255, 0.1);
}

.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;
    }
}

/* ============================================================================
   Site Footer - Unified Footer for All Pages
   ============================================================================ */
.site-footer {
    margin-top: 48px;
    padding: 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;
}

/* 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: all 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);
}

.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: 7px;
    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: 9px;
    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: all 0.15s ease;
    padding: 4px 8px;
    border-radius: 4px;
    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:hover::after {
    transform: scaleX(1);
}

.footer-divider {
    color: var(--border);
    font-size: 10px;
}

.footer-version {
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 4px 10px;
    background: var(--bg-panel);
    border-radius: 6px;
    border: 1px solid var(--border-subtle);
    transition: all 0.2s ease;
}

.footer-version:hover {
    color: var(--text-sub);
    border-color: var(--border);
}

.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;
}

/* 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: 8px;
    color: var(--text-dim);
    font-size: 11px;
    cursor: pointer;
    transition: all 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: 5px;
    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: all 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: 5px;
    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: 4px;
}

kbd.kbd-lg {
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    font-size: 13px;
    border-radius: 6px;
}

/* 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: 599px) {
    .site-footer {
        padding: 16px 16px;
        margin-top: 32px;
        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;
    }
}

/* ============================================================================
   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: all 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;
}

/* 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;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-content {
    text-align: center;
    max-width: 300px;
    padding: 20px;
}

.loading-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, var(--accent), var(--purple));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: white;
    box-shadow: 0 8px 32px rgba(10, 132, 255, 0.3);
    animation: logoPulse 2s ease-in-out infinite;
}

@keyframes logoPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 8px 32px rgba(10, 132, 255, 0.3);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 12px 40px rgba(10, 132, 255, 0.4);
    }
}

.loading-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-main);
    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.9s 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: 200px;
    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 */
body:not(.loading-dashboard) .nav-container,
body:not(.loading-dashboard) .filters-bar,
body:not(.loading-dashboard) .main-content,
body:not(.loading-dashboard) .site-footer {
    opacity: 1;
    animation: fadeInContent 0.5s ease forwards;
}

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

/* Staggered reveal for different sections */
body:not(.loading-dashboard) .nav-container {
    animation-delay: 0s;
}

body:not(.loading-dashboard) .filters-bar {
    animation-delay: 0.05s;
}

body:not(.loading-dashboard) .main-content {
    animation-delay: 0.1s;
}

body:not(.loading-dashboard) .site-footer {
    animation-delay: 0.15s;
}

/* Light mode adjustments for loading screen */
:root.light .loading-screen {
    background: var(--bg-main);
}

:root.light .loading-logo {
    box-shadow: 0 8px 32px rgba(0, 122, 255, 0.25);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 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: all 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: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    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);
}

/* ============================================================================
   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 0.2s ease, transform 0.2s ease, visibility 0.2s;
    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: #333;
    color: white;
}

:root.light [data-tooltip]::before {
    border-top-color: #333;
}

:root.light [data-tooltip-position="bottom"]::before {
    border-top-color: transparent;
    border-bottom-color: #333;
}

:root.light [data-tooltip-position="left"]::before {
    border-top-color: transparent;
    border-left-color: #333;
}

:root.light [data-tooltip-position="right"]::before {
    border-top-color: transparent;
    border-right-color: #333;
}

/* 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: all 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: 6px;
    margin-left: 8px;
    border: 1px solid var(--border-subtle);
    transition: all var(--transition);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-account:hover {
    background: var(--bg-selected);
    border-color: var(--border);
}

/* 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: all 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 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.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: 4px;
    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: 4px;
    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: 24px;
    padding-bottom: 24px;
    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: all 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: all 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: 12px 8px;
    }

    .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;
    }
}