/* ==========================================================================
   STALCRAFT EXCHANGE - CSS STYLESHEET
   Version: 2.0 (Standalone Exchange Site)
   Last Updated: 2026-03-30
   
   QUICK REFERENCE FOR AI DEVELOPERS:
   ===================================
   This stylesheet is organized into 11 logical sections:
   
   📦 SECTION 1: CSS Variables & Theme Configuration (Lines 1-95)
      ├─ Root variables (--primary, --accent, etc.)
      └─ Theme overrides (binance, discord, green, dark)
   
   🎨 SECTION 2: Reset & Base Styles (Lines 96-148)
      ├─ Global reset (*) and body defaults
      └─ WordPress theme removal (legacy cleanup)
   
   🏗️  SECTION 3: Exchange Layout Structure (Lines 149-209)
      ├─ Page container (.exchange-wrap)
      ├─ Responsive width limits
      └─ Large monitor optimizations (2000px+, 2800px+)
   
   📐 SECTION 4: Flexbox Layout - Sidebar + Workspace (Lines 210-270)
      ├─ Two-column layout (.exchange-layout)
      ├─ Instrument sidebar structure
      └─ Chart host boundaries
   
   🧰 SECTION 5: Instrument Panel Components (Lines 271-377)
      ├─ Panel card styling (.instrument-panel)
      ├─ Search input & tabs
      ├─ Close button & header
      └─ Loading progress indicator
   
   ⚡ SECTION 6: Workspace Grid & Resizable Regions (Lines 378-553)
      ├─ CSS Grid workspace (.workspace-grid)
      ├─ Layout splitters (drag handles)
      ├─ Toolbar buttons
      └─ Flexible panel arrangement
   
   🎯 SECTION 7: Pair Selection Components (Lines 554-850)
      ├─ Pair trigger button (.pair-trigger)
      ├─ Liquidity ticker widget
      ├─ Tab navigation (.pair-tabs)
      ├─ Sorting controls (.pair-list-sort-btn)
      └─ Pair list items (.pair-option-row)
   
   📊 SECTION 8: Chart Area & Canvas (Lines 851-1100)
      ├─ Chart card container (.chart-card)
      ├─ Canvas stack & overlays
      ├─ Y-axis price strip
      ├─ Measurement tools & ruler
      └─ Chart toolbar buttons
   
   ⚙️  SECTION 9: Settings Panel & Controls (Lines 1101-1300)
      ├─ Panel card (.panel-card)
      ├─ Date range inputs
      ├─ Chart mode selector
      ├─ Candlestick timeframe buttons
      └─ Anomaly filter toggle
   
   🔘 SECTION 10: Buttons & Interactive Elements (Lines 1301-1450)
      ├─ All clickable buttons
      ├─ Toolbar controls
      ├─ Favorite star buttons
      └─ Hover/active states
   
   ✨ SECTION 11: Animations, Utilities & Responsive (Lines 1451-1813)
      ├─ Keyframe animations (@keyframes)
      ├─ Custom scrollbar
      ├─ Text selection styling
      ├─ Mobile breakpoints (@media)
      └─ Helper classes
   
   EDITING GUIDELINES:
   ===================
   • Each section is self-contained - edit without affecting others
   • Comments use [Bracketed Labels] for quick scanning
   • Russian comments translated to English for clarity
   • Related styles grouped together (e.g., all .pair-trigger rules)
   • Mobile responsive rules kept near desktop counterparts
   
   COLOR SCHEME QUICK LOOKUP:
   ==========================
   Backgrounds: var(--dark) #181a1d | var(--darker) #121418
   Cards:       var(--card-bg) #25282d | var(--input-bg) #1c1f24
   Borders:     var(--card-border) #343840
   Text:        var(--text) #e3e5e8 | var(--text-secondary) #a0a4a9
   Accents:     var(--accent) #4a6cf7 (default) | changes per theme
   Profit:      var(--profit) #2ecc71 (green)
   Loss:        var(--loss) #e74c3c (red)
   Warning:     var(--warning) #f39c12 (orange)
   
   ========================================================================== */


/* ==========================================================================
   SECTION 1: CSS VARIABLES & THEME CONFIGURATION
   Purpose: Define all color schemes, themes, and global design tokens
   Used by: All components throughout the application
   ========================================================================== */

/* --- Root Variables (Default Theme) --- */
/* These variables control colors, backgrounds, and UI element styling */
:root {
    /* [Color Palette] Professional grayscale with dark emerald accents */
    --primary: #1a1d21;           /* Main background - charcoal gray */
    --secondary: #23272d;         /* Secondary backgrounds - slate gray */
    --accent: #2d6b5a;            /* Dark emerald accent - professional green */
    --accent-light: #3d7a66;      /* Lighter emerald for gradients */
    --accent-dark: #1b4d3e;       /* Dark emerald for depth */
    
    /* Grayscale hierarchy */
    --dark: #181a1d;              /* Dark background */
    --darker: #0f1114;            /* Darkest background - near black */
    --darkest: #0a0c0e;           /* Ultra dark for contrast */
    --gray-900: #1e2227;          /* Very dark gray */
    --gray-800: #2d3238;          /* Dark gray */
    --gray-700: #3a3f47;          /* Medium-dark gray */
    --gray-600: #5c6168;          /* Medium gray */
    --gray-500: #8a8f96;          /* Neutral gray */
    --gray-400: #c4c8cd;          /* Light gray */
    --gray-300: #e8ebef;          /* Very light gray */
    
    /* Text colors */
    --text: #e8ebef;              /* Primary text - crisp white-gray */
    --text-secondary: #c4c8cd;    /* Secondary text - muted gray */
    --text-muted: #8a8f96;        /* Muted text - subtle gray */
    --text-disabled: #5c6168;     /* Disabled text - dark gray */
    
    /* Profit/Loss - Dark professional colors */
    --profit: #2d5a4a;            /* Dark green profit */
    --profit-bright: #3d7a66;     /* Slightly brighter profit for hover */
    --loss: #5a2d2d;              /* Dark red loss */
    --loss-bright: #7a3d3d;       /* Slightly brighter loss for hover */
    --warning: #b8860b;           /* Dark gold warning */
    
    /* Special category colors */
    --crates: #6c757d;            /* Muted gray for crates */
    --other: #5a6b7c;             /* Steel blue alternative */
    
    /* [UI Elements] Component-specific variables */
    --card-bg: #1e2227;           /* Card background - gradient start */
    --card-bg-end: #16191d;       /* Card background - gradient end */
    --card-border: #3a3f47;       /* Border color - medium gray */
    --card-border-light: rgba(58, 63, 71, 0.6);  /* Semi-transparent border */
    --card-border-strong: rgba(58, 63, 71, 0.9); /* Strong border */
    
    --input-bg: #14171b;          /* Form input background */
    --input-border: #2a2f36;      /* Input border */
    --input-border-focus: rgba(45, 107, 90, 0.8); /* Focus border with green tint */
    
    --hover-bg: rgba(45, 107, 90, 0.08);    /* Hover state - subtle green tint */
    --active-bg: rgba(45, 107, 90, 0.15);   /* Active state - stronger green tint */
    --selected-bg: rgba(45, 107, 90, 0.2);  /* Selected state - emerald background */
    
    /* Shadows & Depth */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.6);
    --shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    --shadow-glow: 0 0 20px rgba(27, 77, 62, 0.15);
    --shadow-glow-strong: 0 0 40px rgba(27, 77, 62, 0.35);
    
    /* Borders */
    --border-radius-sm: 3px;      /* Small radius for buttons/inputs */
    --border-radius-md: 4px;      /* Medium radius for panels */
    --border-radius-lg: 6px;      /* Large radius for modals */
    --border-width: 1px;
    
    /* Spacing System */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;
    
    /* [Performance Mode] Runtime optimization flags */
    --performance-mode: 'auto';
    --animation-duration: 0.3s;
    --transition-duration: 0.2s;
    --use-gradients: true;
    --use-shadows: true;
    --use-backdrop-filter: true;
    --chart-animations: true;
    --hover-effects: true;
}

/* --- Theme Definitions --- */
/* Each theme overrides specific accent colors while maintaining the base palette */

/* [Binance Theme] Yellow-gold accent scheme - darkened for professional look */
html[data-theme="binance"] {
    --accent: #b8860b;            /* Dark gold */
    --accent-light: #d4a017;
    --accent-dark: #8b6914;
    --hover-bg: rgba(184, 134, 11, 0.08);
    --active-bg: rgba(184, 134, 11, 0.15);
}

/* [Discord Theme] Blurple accent scheme - muted for consistency */
html[data-theme="discord"] {
    --accent: #4752c4;            /* Muted blurple */
    --accent-light: #5d65d9;
    --accent-dark: #3a44a8;
    --hover-bg: rgba(71, 82, 196, 0.08);
    --active-bg: rgba(71, 82, 196, 0.15);
}

/* [Green Theme] Enhanced emerald accent - matches default professional theme */
html[data-theme="green"] {
    --accent: #2d6b5a;            /* Dark emerald */
    --accent-light: #3d7a66;
    --accent-dark: #1b4d3e;
    --hover-bg: rgba(45, 107, 90, 0.08);
    --active-bg: rgba(45, 107, 90, 0.15);
}

/* [Dark Theme] Enhanced blue-gray - deeper and more professional */
html[data-theme="dark"] {
    --accent: #3a4a5a;            /* Deep steel blue */
    --accent-light: #4a5a6a;
    --accent-dark: #2a3a4a;
    --hover-bg: rgba(58, 74, 90, 0.08);
    --active-bg: rgba(58, 74, 90, 0.15);
}


/* ==========================================================================
   SECTION 2: RESET & BASE STYLES
   Purpose: Establish consistent baseline across browsers
   Applied to: Global scope
   ========================================================================== */

/* [Global Reset] Remove default browser margins/padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rajdhani', 'Segoe UI', 'Roboto Condensed', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* [Body Defaults] Base page styling - Enhanced with technical background */
body {
    background-color: var(--darkest);
    color: var(--text);
    min-height: 100vh;
    padding: 20px;
    line-height: 1.5;
    letter-spacing: 0.03em;
    background-image: 
        radial-gradient(
            ellipse at top,
            rgba(45, 107, 90, 0.05) 0%,
            transparent 60%
        ),
        radial-gradient(
            ellipse at bottom,
            rgba(27, 77, 62, 0.08) 0%,
            transparent 60%
        ),
        linear-gradient(
            180deg,
            var(--darkest) 0%,
            var(--darker) 50%,
            var(--dark) 100%
        );
    background-attachment: fixed;
    position: relative;
}

/* Subtle grid pattern overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 99px,
            rgba(58, 63, 71, 0.03) 99px,
            rgba(58, 63, 71, 0.03) 100px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 99px,
            rgba(58, 63, 71, 0.03) 99px,
            rgba(58, 63, 71, 0.03) 100px
        );
    background-size: 100px 100px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

/* --- Typography Enhancements --- */

h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

h1 { font-size: 1.4rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.9rem; }
h6 { font-size: 0.8rem; }

p {
    letter-spacing: 0.03em;
    line-height: 1.6;
}

small {
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

/* --- Text Selection Styling --- */

::selection {
    background: rgba(45, 107, 90, 0.3);
    color: var(--text);
    text-shadow: none;
}

::-moz-selection {
    background: rgba(45, 107, 90, 0.3);
    color: var(--text);
}

/* --- Link Styling --- */

a {
    color: var(--accent-light);
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
}

a:hover {
    color: var(--text);
    border-bottom-color: rgba(45, 107, 90, 0.4);
    text-shadow: 0 0 8px rgba(45, 107, 90, 0.3);
}

/* ========================================
   3. RESPONSIVE DESIGN
   ======================================== */ */


/* ==========================================================================
   SECTION 3: EXCHANGE LAYOUT STRUCTURE
   Purpose: Main application container, workspace grid, responsive behavior
   Components: .exchange-wrap, .exchange-layout, .workspace-grid
   ========================================================================== */

/* --- Page Container & Responsive Limits --- */
/* Prevent horizontal scroll and control page height */
:root {
    /* Maximum page height = 2x viewport (topbar + chart + panel visible without zoom) */
    --app-page-max-height: 200dvh;
    /* Content width scales with viewport: base 1760px → max ~3200px on ultrawide */
    --exchange-wrap-max: min(100%, max(1760px, calc(82vw + 120px)), 3200px);
}

html {
    overflow-x: hidden;           /* No horizontal scroll */
    max-width: 100%;
    height: 100%;                 /* Full viewport height */
}

body {
    overflow-x: hidden;           /* No horizontal scroll */
    overflow-y: auto;             /* Vertical scrolling enabled */
    margin: 0;
    max-width: 100%;
    min-height: 100dvh;           /* Minimum viewport height */
    height: auto;
    max-height: var(--app-page-max-height);  /* Cap at 2x viewport */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* [Main Container] Exchange wrapper with adaptive padding */
.exchange-wrap {
    max-width: var(--exchange-wrap-max);
    margin: 0 auto;               /* Center horizontally */
    padding: clamp(8px, 1.8vw, 16px);  /* Responsive padding: 8-16px */
    padding-left: max(clamp(8px, 1.8vw, 16px), env(safe-area-inset-left));
    padding-right: max(clamp(8px, 1.8vw, 16px), env(safe-area-inset-right));
    box-sizing: border-box;
    width: 100%;
    flex: 1 1 auto;               /* Grow/shrink as needed */
    min-height: 0;                /* Allow shrinking below content size */
    max-height: var(--app-page-max-height);
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: visible;
    animation: fadeIn 260ms ease-out;  /* Fade in on load */
}

/* [Large Monitors 2000px+] Increase max width and typography */
@media (min-width: 2000px) {
    :root {
        --exchange-wrap-max: min(100%, max(1760px, calc(84vw + 100px)), 3400px);
    }
    html {
        font-size: 106.25%;       /* Slightly larger text */
    }
    .exchange-wrap {
        padding: clamp(12px, 1.2vw, 28px);
    }
}

/* [Ultra-Wide 2800px+] Further expansion */
@media (min-width: 2800px) {
    :root {
        --exchange-wrap-max: min(100%, max(2000px, calc(86vw + 80px)), 3840px);
    }
    html {
        font-size: 112.5%;        /* Larger text for 4K+ displays */
    }
}


/* ==========================================================================
   SECTION 4: FLEXBOX LAYOUT - SIDEBAR + WORKSPACE
   Purpose: Two-column layout with instrument sidebar and main workspace
   Components: .exchange-layout, .instrument-sidebar, .exchange-main
   ========================================================================== */

/* [Main Layout] Left sidebar (instruments) + right workspace (chart/panel) */
.exchange-layout {
    --instr-sidebar-w: 380px;     /* Sidebar width variable */
    --analytics-panel-w: 380px;   /* Analytics panel width variable */
    display: flex;
    align-items: stretch;         /* Equal height columns */
    width: 100%;
    max-width: 100%;
    min-width: 0;                 /* Allow shrinking below content size */
    flex: 1;                      /* Fill parent height */
    min-height: 0;
    max-height: var(--app-page-max-height);
    gap: 0;                       /* No gap between columns */
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
    box-sizing: border-box;
}

/* [Chart Host] Ensure chart area respects boundaries */
#chart-host,
.workspace-chart-host {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.3);  /* White border */
}

/* [Analytics Sidebar] Left column container (replaces instrument-sidebar when analytics-active) */
.analytics-sidebar {
    grid-area: instr;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    align-self: stretch;
    overflow: hidden;
    border-right: none;
    outline: none;
    background: #0a0a0a;
    box-sizing: border-box;
    /* Important for resize to work */
    resize: horizontal;
    position: relative;
}

/* Hide analytics sidebar when not active */
.analytics-sidebar[hidden] {
    display: none !important;
}

/* Hide instrument sidebar when analytics is active */
.exchange-layout.analytics-active .instrument-sidebar {
    display: none !important;
}

/* When analytics sidebar is active: show and constrain - HIGHER SPECIFICITY */
.exchange-layout.analytics-active .analytics-sidebar,
.exchange-layout.analytics-active .analytics-sidebar[hidden] {
    display: flex !important;
    max-height: 100%;
    overflow: hidden;
    overscroll-behavior: contain;
    padding: 0;
    flex-shrink: 0;
}

/* [Analytics Panel] Uses the same gradient and style as panel-card, instrument-panel, chart-card */
.analytics-panel {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    min-height: 0;
    height: 100% !important;
    max-height: none;
    display: flex !important;
    flex-direction: column;
    /* Match panel-card/instrument-panel/chart-card gradient */
    background: linear-gradient(
        135deg,
        var(--card-bg) 0%,
        var(--card-bg-end) 100%
    ) !important;
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.03);
    padding: 0;
    margin: 0;
    overflow: visible !important;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    /* Ensure it fills the parent sidebar */
    align-self: stretch;
}

/* Analytics panel header - clean */
.analytics-panel-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px 6px;
    margin: 0;
    border-bottom: none;
    flex-shrink: 0;
    min-width: 0;
    visibility: visible !important;
}

/* [Analytics Panel Title] Match instrument-panel-title and panel-title */
.analytics-panel-title {
    font-size: 0.98rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--text-primary, #f3f4f6);
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.25;
    padding-right: 4px;
}

.analytics-panel-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.analytics-panel-content {
    flex: 1 1 auto !important;
    min-height: 0;
    height: 100%;
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 0;
    display: block !important;
    visibility: visible !important;
}

/* Analytics panel scrollbar styling */
.analytics-panel-content::-webkit-scrollbar {
    width: 6px;
}

.analytics-panel-content::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.1);
    border-radius: 3px;
}

.analytics-panel-content::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
}

.analytics-panel-content::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* [Analytics Item Grid] Display when "Показать товар" is clicked */
.analytics-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 16px;
    animation: fadeIn 0.3s ease;
}

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

.analytics-grid-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.6));
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-md);
    padding: 16px 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: scaleIn 0.3s ease forwards;
    opacity: 0;
    position: relative;
    overflow: hidden;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.analytics-grid-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.analytics-grid-card:hover {
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 4px 16px rgba(34, 211, 238, 0.15), 0 0 0 1px rgba(34, 211, 238, 0.3);
    transform: translateY(-4px) scale(1.02);
}

.analytics-grid-card:hover::before {
    opacity: 1;
}

.analytics-grid-card:active {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 2px 8px rgba(34, 211, 238, 0.1);
}

.analytics-grid-icon-wrap {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.analytics-grid-icon {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 8px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
    transition: transform 0.25s ease;
}

.analytics-grid-card:hover .analytics-grid-icon {
    transform: scale(1.1);
}

.analytics-grid-icon-placeholder {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: rgba(148, 163, 184, 0.1);
    border-radius: 8px;
    border: 2px dashed rgba(148, 163, 184, 0.3);
}

.analytics-grid-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary, #f3f4f6);
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
    position: relative;
    z-index: 1;
    transition: color 0.2s ease;
}

.analytics-grid-card:hover .analytics-grid-name {
    color: #22d3ee;
}

/* Analysis metric badge on grid cards */
.analytics-grid-metric {
    margin-top: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid currentColor;
    opacity: 0.9;
    transition: all 0.2s ease;
}

.analytics-grid-card:hover .analytics-grid-metric {
    opacity: 1;
    transform: scale(1.05);
}

.analytics-grid-metric.volatility {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.5);
}

/* Analysis Loading Animation */
.analysis-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 30px;
    min-height: 400px;
    gap: 20px;
}

.analysis-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(34, 211, 238, 0.2);
    border-top-color: #22d3ee;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.3);
}

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

.analysis-status {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary, #f3f4f6);
    text-align: center;
    animation: pulse 2s ease-in-out infinite;
}

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

.analysis-progress {
    width: 100%;
    max-width: 400px;
    height: 8px;
    background: rgba(148, 163, 184, 0.2);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.analysis-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #22d3ee, #06b6d4);
    border-radius: 4px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
    position: relative;
    overflow: hidden;
}

.analysis-progress-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer 1.5s infinite;
}

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

.analysis-detail {
    font-size: 0.9rem;
    color: var(--text-secondary, #9ca3af);
    text-align: center;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.02em;
}

/* AI Analysis Modal */
.ai-analysis-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    animation: modalFadeIn 0.2s ease;
}

/* Full-screen analysis view (replaces modal overlay) */
.ai-analysis-fullscreen {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.98), rgba(31, 41, 55, 0.98));
    border-radius: 12px;
    position: relative;
    overflow-y: auto;
    animation: fadeIn 0.3s ease;
}

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

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

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

.ai-analysis-modal {
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.98), rgba(31, 41, 55, 0.98));
    border: 1px solid rgba(107, 114, 128, 0.4);
    border-radius: 16px;
    max-width: 900px;
    width: 90%;
    margin-top: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(107, 114, 128, 0.2);
    position: relative;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ai-modal-close {
    position: sticky;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    background: rgba(30, 41, 59, 0.95);
    color: var(--text-primary, #f3f4f6);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    float: right;
    margin: 16px;
}

.ai-modal-close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
    transform: rotate(90deg);
}

.ai-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.1), transparent);
}

.ai-modal-icon,
.ai-modal-icon-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: contain;
    flex-shrink: 0;
}

.ai-modal-icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: rgba(148, 163, 184, 0.1);
    border: 2px dashed rgba(148, 163, 184, 0.3);
}

.ai-modal-title-wrap {
    flex: 1;
    min-width: 0;
}

.ai-modal-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary, #f3f4f6);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.ai-modal-subtitle {
    font-size: 0.85rem;
    color: #9ca3af;
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ai-modal-body {
    padding: 24px;
}

/* For fullscreen mode, allow full height scrolling */
.ai-analysis-fullscreen .ai-modal-body {
    max-height: none;
    overflow-y: visible;
}

.ai-modal-body::-webkit-scrollbar {
    width: 6px;
}

.ai-modal-body::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.1);
    border-radius: 3px;
}

.ai-modal-body::-webkit-scrollbar-thumb {
    background: rgba(107, 114, 128, 0.4);
    border-radius: 3px;
}

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

.ai-section:last-child {
    margin-bottom: 0;
}

.ai-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #d1d5db;
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(107, 114, 128, 0.2);
}

.ai-text {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--text-primary, #f3f4f6);
    margin: 0;
    white-space: normal;
}

.ai-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ai-steps li {
    position: relative;
    padding: 10px 12px 10px 36px;
    margin-bottom: 8px;
    background: rgba(107, 114, 128, 0.08);
    border: 1px solid rgba(107, 114, 128, 0.2);
    border-radius: 8px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary, #f3f4f6);
    transition: all 0.2s ease;
}

.ai-steps li::before {
    content: '→';
    position: absolute;
    left: 12px;
    top: 10px;
    color: #9ca3af;
    font-weight: 700;
    font-size: 1.1rem;
}

.ai-steps li:hover {
    background: rgba(107, 114, 128, 0.12);
    border-color: rgba(107, 114, 128, 0.35);
    transform: translateX(4px);
}

.ai-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    padding: 16px;
    background: rgba(55, 65, 81, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 12px;
    margin-top: 20px;
}

.ai-metric-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-metric-label {
    font-size: 0.78rem;
    color: var(--text-secondary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.ai-metric-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #f3f4f6);
    font-variant-numeric: tabular-nums;
}

/* AI Filter Dialog */
.ai-filter-dialog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modalFadeIn 0.2s ease;
}

.ai-filter-dialog {
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.98), rgba(31, 41, 55, 0.98));
    border: 2px solid rgba(107, 114, 128, 0.5);
    border-radius: 16px;
    max-width: 550px;
    width: 100%;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(107, 114, 128, 0.2);
    animation: modalSlideIn 0.3s ease;
}

.ai-filter-icon {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 16px;
    animation: pulse 2s ease-in-out infinite;
}

.ai-filter-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #d1d5db;
    text-align: center;
    margin: 0 0 20px 0;
}

.ai-filter-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-primary, #f3f4f6);
    margin: 0 0 24px 0;
    padding: 16px;
    background: rgba(107, 114, 128, 0.08);
    border-left: 3px solid #9ca3af;
    border-radius: 8px;
}

.ai-filter-text strong {
    color: #d1d5db;
    display: block;
    margin-bottom: 8px;
}

.ai-filter-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-filter-btn {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
}

.ai-filter-btn-yes {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.15));
    border-color: rgba(34, 197, 94, 0.5);
    color: #22c55e;
}

.ai-filter-btn-yes:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.25));
    border-color: rgba(34, 197, 94, 0.7);
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.3);
    transform: translateY(-2px);
}

.ai-filter-btn-no {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(220, 38, 38, 0.1));
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

.ai-filter-btn-no:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(220, 38, 38, 0.2));
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.2);
    transform: translateY(-2px);
}

.ai-filter-btn-cancel {
    background: rgba(148, 163, 184, 0.1);
    border-color: rgba(148, 163, 184, 0.3);
    color: var(--text-secondary, #9ca3af);
}

.ai-filter-btn-cancel:hover {
    background: rgba(148, 163, 184, 0.2);
    border-color: rgba(148, 163, 184, 0.5);
    color: var(--text-primary, #f3f4f6);
}

/* 48-Hour Analysis Section */
.ai-48h-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    padding: 16px;
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 8px;
    margin-bottom: 20px;
}

.ai-48h-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ai-48h-label {
    font-size: 0.78rem;
    color: var(--text-secondary, #9ca3af);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.ai-48h-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #67e8f9;
    font-variant-numeric: tabular-nums;
}

.ai-opportunity-block {
    margin-top: 12px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid;
}

.ai-buy-opportunity {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.3);
}

.ai-sell-opportunity {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}

/* Toggle Header */
.ai-opportunity-header-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.ai-opportunity-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary, #f3f4f6);
    flex: 1;
}

.ai-toggle-btn {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 6px;
    background: rgba(30, 41, 59, 0.6);
    color: var(--text-primary, #f3f4f6);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ai-toggle-btn:hover {
    background: rgba(107, 114, 128, 0.3);
    border-color: rgba(107, 114, 128, 0.5);
    transform: scale(1.05);
}

.ai-toggle-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.ai-toggle-btn[aria-expanded="false"] .ai-toggle-arrow {
    transform: rotate(-90deg);
}

.ai-opportunity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ai-opportunity-list li {
    padding: 8px 10px;
    margin-bottom: 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border-left: 3px solid;
    transition: all 0.2s ease;
}

.ai-buy-opportunity .ai-opportunity-list li {
    border-left-color: #22c55e;
}

.ai-sell-opportunity .ai-opportunity-list li {
    border-left-color: #ef4444;
}

.ai-opportunity-list li:hover {
    background: rgba(0, 0, 0, 0.4);
    transform: translateX(4px);
}

.ai-opportunity-time {
    font-size: 0.78rem;
    color: var(--text-secondary, #9ca3af);
    margin-bottom: 4px;
    font-family: 'Courier New', monospace;
}

.ai-opportunity-details {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.ai-price {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary, #f3f4f6);
}

.ai-discount {
    font-size: 0.82rem;
    font-weight: 700;
    color: #22c55e;
    padding: 2px 6px;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 4px;
}

.ai-premium {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ef4444;
    padding: 2px 6px;
    background: rgba(239, 68, 68, 0.15);
    border-radius: 4px;
}

.ai-transactions {
    font-size: 0.75rem;
    color: var(--text-secondary, #9ca3af);
}

.ai-commission-note {
    font-size: 0.78rem;
    color: #fbbf24;
    font-style: italic;
    padding-top: 4px;
    border-top: 1px solid rgba(251, 191, 36, 0.2);
}

.ai-no-opportunities {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary, #9ca3af);
    font-style: italic;
    background: rgba(148, 163, 184, 0.08);
    border-radius: 8px;
    margin-top: 16px;
}

/* Best Strategy Block */
.ai-best-strategy {
    margin: 20px 0;
    padding: 20px;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.12), rgba(6, 182, 212, 0.08));
    border: 2px solid rgba(34, 211, 238, 0.4);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(34, 211, 238, 0.2);
}

.ai-strategy-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #67e8f9;
    margin: 0 0 16px 0;
    text-align: center;
}

.ai-strategy-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-strategy-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ai-strategy-label {
    font-size: 0.88rem;
    color: var(--text-secondary, #9ca3af);
    font-weight: 600;
    min-width: 180px;
}

.ai-strategy-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ai-strategy-value.buy {
    color: #22c55e;
}

.ai-strategy-value.sell {
    color: #ef4444;
}

.ai-strategy-value.profit {
    color: #fbbf24;
    font-size: 1.15rem;
}

.ai-strategy-time {
    font-size: 0.82rem;
    color: var(--text-secondary, #9ca3af);
    font-family: 'Courier New', monospace;
}

.ai-strategy-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.3), transparent);
    margin: 8px 0;
}

.ai-profit-row {
    padding-top: 8px;
    border-top: 1px solid rgba(251, 191, 36, 0.2);
}

/* Opportunity Intro */
.ai-opportunity-intro {
    font-size: 0.82rem;
    color: var(--text-primary, #f3f4f6);
    margin: 0 0 8px 0;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border-left: 3px solid currentColor;
}

.ai-buy-opportunity .ai-opportunity-intro {
    border-left-color: #22c55e;
}

.ai-sell-opportunity .ai-opportunity-intro {
    border-left-color: #ef4444;
}

.ai-opportunity-intro strong {
    color: #fbbf24;
    font-weight: 700;
}

/* Opportunity Header */
.ai-opportunity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

/* Opportunity Prices */
.ai-opportunity-prices {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.ai-price-label,
.ai-range-label,
.ai-commission-label,
.ai-net-label {
    font-size: 0.78rem;
    color: var(--text-secondary, #9ca3af);
}

.ai-range {
    font-size: 0.85rem;
    color: var(--text-primary, #f3f4f6);
    font-family: 'Courier New', monospace;
}

/* Commission Calculation */
.ai-commission-calc {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    margin: 6px 0;
    border-top: 1px dashed rgba(239, 68, 68, 0.3);
    border-bottom: 1px dashed rgba(239, 68, 68, 0.3);
}

.ai-commission-amount {
    font-size: 0.9rem;
    font-weight: 700;
    color: #ef4444;
}

/* Net Receive */
.ai-net-receive {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}

.ai-net-amount {
    font-size: 1.05rem;
    font-weight: 700;
    color: #22c55e;
}

/* Strategy Probabilities */
.ai-strategy-probabilities {
    margin: 10px 0;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border-left: 3px solid #22d3ee;
}

.ai-probability-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary, #9ca3af);
    margin-bottom: 8px;
    font-weight: 600;
}

.ai-probability-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-probability-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    background: rgba(34, 211, 238, 0.08);
    border-radius: 6px;
    flex-wrap: wrap;
    transition: all 0.2s ease;
}

.ai-probability-list li:hover {
    background: rgba(34, 211, 238, 0.15);
    transform: translateX(4px);
}

.ai-prob-time {
    font-size: 0.85rem;
    font-weight: 600;
    color: #67e8f9;
    min-width: 140px;
}

.ai-prob-count {
    font-size: 0.82rem;
    color: var(--text-secondary, #9ca3af);
    font-style: italic;
}

.ai-prob-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
}

/* Strategy Reasons */
.ai-strategy-reasons {
    margin: 10px 0;
    padding: 12px;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 8px;
    border-left: 3px solid #3b82f6;
}

.ai-reason-label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary, #9ca3af);
    margin-bottom: 8px;
    font-weight: 600;
}

.ai-reason-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ai-reason-list li {
    font-size: 0.85rem;
    color: var(--text-primary, #f3f4f6);
    padding: 6px 10px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 6px;
    position: relative;
    padding-left: 24px;
}

.ai-reason-list li::before {
    content: '→';
    position: absolute;
    left: 10px;
    top: 6px;
    color: #3b82f6;
    font-weight: 700;
}

/* Profit Target Modal */
.profit-target-modal[hidden] {
    display: none !important;
}

.profit-target-modal {
    position: relative;
    margin-top: 12px;
    width: 100%;
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.98), rgba(31, 41, 55, 0.98));
    border: 2px solid rgba(107, 114, 128, 0.5);
    border-radius: 12px;
    padding: 0;
    z-index: 10;
    animation: slideDownModal 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(107, 114, 128, 0.2);
    /* Ensure it stays in normal document flow */
    display: block;
}

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

.profit-target-content {
    max-width: 100%;
    padding: 24px;
}

.profit-target-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(107, 114, 128, 0.3);
}

.profit-target-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #d1d5db;
    margin: 0;
}

.profit-target-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border-radius: 50%;
}

.profit-target-close:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    transform: rotate(90deg);
}

.profit-target-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.profit-target-question {
    font-size: 1.05rem;
    color: var(--text-primary, #f3f4f6);
    text-align: center;
    margin: 0;
    font-weight: 600;
}

/* Profit Slider */
.profit-slider-container {
    padding: 20px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.profit-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #22c55e, #fbbf24, #ef4444);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    margin-bottom: 12px;
}

.profit-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #6b7280;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 0 12px rgba(107, 114, 128, 0.6);
    transition: all 0.2s ease;
}

.profit-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(107, 114, 128, 0.8);
}

.profit-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #6b7280;
    cursor: pointer;
    border: 3px solid #fff;
    box-shadow: 0 0 12px rgba(107, 114, 128, 0.6);
    transition: all 0.2s ease;
}

.profit-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 20px rgba(107, 114, 128, 0.8);
}

.profit-slider-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.profit-label-min,
.profit-label-max {
    font-size: 0.85rem;
    color: var(--text-secondary, #9ca3af);
    font-weight: 600;
}

.profit-current-value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    background: rgba(34, 211, 238, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(34, 211, 238, 0.3);
}

.profit-value-label {
    font-size: 0.95rem;
    color: var(--text-secondary, #9ca3af);
    font-weight: 600;
}

.profit-value-amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
}

/* Calculate Button */
.profit-target-btn {
    padding: 14px 28px;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.3), rgba(6, 182, 212, 0.25));
    border: 2px solid rgba(34, 211, 238, 0.5);
    border-radius: 10px;
    color: #22d3ee;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
}

.profit-target-btn:hover {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.4), rgba(6, 182, 212, 0.35));
    border-color: rgba(34, 211, 238, 0.7);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
    transform: translateY(-2px);
}

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

/* Profit Strategy Display */
.profit-strategy-container {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.profit-strategy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 2px solid rgba(34, 211, 238, 0.3);
}

/* AI Recommendation Block */
.strategy-ai-recommendation {
    animation: fadeInRecommendation 0.5s ease;
}

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

.profit-strategy-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #22d3ee;
    margin: 0;
}

.profit-strategy-target {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 8px;
}

.target-label {
    font-size: 0.9rem;
    color: var(--text-secondary, #9ca3af);
    font-weight: 600;
}

.target-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fbbf24;
    font-variant-numeric: tabular-nums;
}

/* Strategy Overview Cards */
.strategy-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.strategy-card {
    padding: 20px;
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.8), rgba(31, 41, 55, 0.8));
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.strategy-card:hover {
    transform: translateY(-4px);
    border-color: rgba(34, 211, 238, 0.6);
    box-shadow: 0 8px 24px rgba(34, 211, 238, 0.2);
}

.strategy-card-icon {
    font-size: 2rem;
}

.strategy-card-label {
    font-size: 0.85rem;
    color: var(--text-secondary, #9ca3af);
    text-align: center;
    font-weight: 600;
}

.strategy-card-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: #22d3ee;
    font-variant-numeric: tabular-nums;
}

/* Strategy Sections */
.strategy-section {
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(34, 211, 238, 0.2);
}

.strategy-section-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #22d3ee;
    margin: 0 0 16px 0;
}

/* Items Grid */
.strategy-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.strategy-item-card {
    padding: 16px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.6), rgba(15, 23, 42, 0.6));
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.strategy-item-card:hover {
    border-color: rgba(59, 130, 246, 0.8);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
    cursor: pointer;
}

.strategy-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

/* Strategy Item Icon */
.strategy-item-icon-wrap {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.strategy-item-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(15, 23, 42, 0.5);
    padding: 2px;
}

.strategy-item-icon-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.strategy-item-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #22d3ee, #06b6d4);
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
}

.strategy-item-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #f3f4f6);
    flex: 1;
}

.strategy-item-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.strategy-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.strategy-item-label {
    font-size: 0.85rem;
    color: var(--text-secondary, #9ca3af);
}

.strategy-item-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary, #f3f4f6);
    font-variant-numeric: tabular-nums;
}

/* Time Grid */
.strategy-time-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.strategy-time-block {
    padding: 16px;
    border-radius: 10px;
    border: 1px solid;
}

.strategy-time-block.buy-time {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.3);
}

.strategy-time-block.sell-time {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
}

.strategy-time-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.buy-time .strategy-time-title {
    color: #22c55e;
}

.sell-time .strategy-time-title {
    color: #ef4444;
}

.strategy-time-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.strategy-time-list li {
    font-size: 0.88rem;
    color: var(--text-primary, #f3f4f6);
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    position: relative;
    padding-left: 24px;
}

.strategy-time-list li::before {
    content: '→';
    position: absolute;
    left: 10px;
    top: 8px;
    font-weight: 700;
}

.buy-time .strategy-time-list li::before {
    color: #22c55e;
}

.sell-time .strategy-time-list li::before {
    color: #ef4444;
}

.strategy-monitoring {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    background: rgba(34, 211, 238, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(34, 211, 238, 0.3);
}

.monitoring-label {
    font-size: 0.95rem;
    color: var(--text-secondary, #9ca3af);
    font-weight: 600;
}

.monitoring-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fbbf24;
}

/* Risk Management Grid */
.strategy-risk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.strategy-risk-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border-left: 3px solid #fbbf24;
}

.risk-label {
    font-size: 0.85rem;
    color: var(--text-secondary, #9ca3af);
    font-weight: 600;
}

.risk-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #f3f4f6);
}

/* Tools List */
.strategy-tools-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.strategy-tools-list li {
    font-size: 0.92rem;
    color: var(--text-primary, #f3f4f6);
    padding: 10px 14px;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 8px;
    border-left: 3px solid #3b82f6;
    position: relative;
    padding-left: 32px;
}

.strategy-tools-list li::before {
    content: '✓';
    position: absolute;
    left: 12px;
    top: 10px;
    color: #3b82f6;
    font-weight: 700;
    font-size: 1.1rem;
}

/* Footer Disclaimer */
.strategy-footer {
    padding: 16px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 10px;
}

.strategy-disclaimer {
    font-size: 0.88rem;
    color: var(--text-secondary, #9ca3af);
    margin: 0;
    line-height: 1.6;
}

.strategy-disclaimer strong {
    color: #fbbf24;
}

/* AI Humor Toast Messages */
.ai-humor-toast {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.95), rgba(31, 41, 55, 0.95));
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 12px;
    color: var(--text-primary, #f3f4f6);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    z-index: 3000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 255, 255, 0.2);
    animation: toastSlideIn 0.3s ease;
    max-width: 90%;
    width: 600px;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(-50%) translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.ai-humor-toast.fade-out {
    animation: toastFadeOut 0.3s ease forwards;
}

@keyframes toastFadeOut {
    from {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    to {
        transform: translateX(-50%) translateY(-20px);
        opacity: 0;
    }
}

/* Liquidity Badge */
.ai-liquid-badge {
    display: inline-block;
    padding: 2px 8px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(245, 158, 11, 0.15));
    border: 1px solid rgba(251, 191, 36, 0.5);
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fbbf24;
    letter-spacing: 0.05em;
    animation: pulse 2s ease-in-out infinite;
}

/* Liquidity Info */
.ai-liquidity-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    margin: 6px 0;
    border-top: 1px dashed rgba(251, 191, 36, 0.3);
    border-bottom: 1px dashed rgba(251, 191, 36, 0.3);
}

.ai-liquidity-label {
    font-size: 0.82rem;
    color: var(--text-secondary, #9ca3af);
}

.ai-liquidity-value {
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* [Analytics Splitter] Resizable handle */
.layout-splitter--analytics {
    flex: 0 0 auto;
    cursor: ew-resize;
    width: 6px;
    min-width: 6px;
    max-width: 6px;
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden;
    pointer-events: auto;
    align-self: stretch;
    transition: background 0.15s ease;
}

.layout-splitter--analytics:hover,
.layout-splitter--analytics.is-dragging {
    background: rgba(148, 163, 184, 0.42);
}

/* [Instrument Sidebar] Left column container */
.instrument-sidebar {
    grid-area: instr;
    flex: 0 0 auto;               /* Don't grow/shrink */
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: row;          /* Panel + splitter horizontally */
    align-items: stretch;
    align-self: stretch;
    overflow: hidden;
    border-right: none;
    outline: none;
    background: transparent;
    box-sizing: border-box;
}

/* When sidebar is open: constrain height and enable internal scrolling */
.exchange-layout.instrument-open .instrument-sidebar {
    max-height: 100%;
    overflow: hidden;             /* Scroll happens inside panel */
    overscroll-behavior: contain; /* Prevent scroll chaining */
    padding: 0;
    flex-shrink: 0;
}
/* ==========================================================================
   SECTION 5: INSTRUMENT PANEL COMPONENTS
   Purpose: Instrument selection sidebar UI elements
   Components: .instrument-panel, search, tabs, pair list
   ========================================================================== */

/* [Instrument Panel] Card styling with cyan accent border */
.instrument-panel {
    flex: 1 1 auto;               /* Fill available space */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;       /* Stack children vertically */
    background: rgba(8, 12, 18, 0.98);  /* Dark semi-transparent */
    border: 1px solid rgba(148, 163, 184, 0.35);  /* White-gray border */
    border-radius: 14px;
    padding: 12px 14px;
    overflow: hidden;             /* Internal scrolling only */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    box-sizing: border-box;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.instrument-panel:hover {
    border-color: rgba(148, 163, 184, 0.55);  /* Brighter white-gray on hover */
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);  /* Deeper shadow */
}

/* [Panel Header] Title + close button row */
.instrument-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 0 8px;             /* Bottom padding only */
    margin: 0 0 6px;
    border-bottom: 1px solid rgba(34, 211, 238, 0.14);  /* Divider */
    flex-shrink: 0;               /* Don't shrink */
    min-width: 0;                 /* Allow text truncation */
}

/* [Loading Progress] Small text indicator */
.exchange-load-progress {
    font-size: 0.72rem;
    color: #94a3b8;               /* Muted gray */
    margin-top: 3px;
    line-height: 1.2;
}

/* [Panel Title] Bold heading text */
.instrument-panel-title {
    font-size: 0.98rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--text-primary, #f3f4f6);
    flex: 1 1 auto;               /* Take available space */
    min-width: 0;                 /* Enable truncation */
    line-height: 1.25;
    padding-right: 4px;
}

/* [Search Input Wrapper] Top section */
.instrument-search-wrap {
    padding: 0 0 8px;             /* Bottom spacing */
    flex-shrink: 0;
    min-width: 0;
    box-sizing: border-box;
}

/* [Close Button] X button in header */
.instrument-panel-close {
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(255, 255, 255, 0.04);
    color: #cbd5e1;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;               /* Fixed size */
}

.instrument-panel-close:hover {
    background: rgba(34, 211, 238, 0.12);  /* Cyan tint */
    color: #f8fafc;               /* Brighter text */
}

.exchange-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    max-height: var(--app-page-max-height);
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-x: hidden;
    overflow-y: visible;
    transition: flex-basis 0.24s ease;
}

/* Единая рабочая зона: верхняя полоса + график + панель; размеры тянутся разделителями */
.exchange-workspace {
    position: relative;
    flex: 1;
    min-height: 0;
    max-height: var(--app-page-max-height);
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
}
.layout-toolbar-floating {
    position: absolute;
    top: 2px;
    right: 4px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    max-width: min(100%, 420px);
    opacity: 0.42;
    transition: opacity 0.2s ease;
    pointer-events: auto;
}
.exchange-workspace:hover .layout-toolbar-floating,
.layout-toolbar-floating:focus-within {
    opacity: 1;
}
.layout-toolbar-btn {
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(8, 12, 18, 0.92);
    color: #cbd5e1;
    font-size: 0.68rem;
    padding: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}
.layout-toolbar-btn:hover {
    border-color: rgba(45, 212, 191, 0.55);
    color: #f1f5f9;
}
.workspace-grid {
    flex: 1;
    min-height: 0;
    max-height: var(--app-page-max-height);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "topbar"
        "split1"
        "main"
        "split2"
        "bottom";
    gap: 0;
    overflow-x: hidden;
    overflow-y: visible;
}
/* Полоса снизу: график → split2 → полоса пары → split1 → нижний отступ (без «дыры» между графиком и парой) */
.workspace-grid[data-topbar-pos="bottom"] {
    grid-template-areas:
        "main"
        "split2"
        "topbar"
        "split1"
        "bottom";
}
.workspace-topbar-wrap {
    grid-area: topbar;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
}
.layout-splitter--row-top {
    grid-area: split1;
}
.layout-splitter--row-bottom {
    grid-area: split2;
}
.workspace-bottom-spacer {
    grid-area: bottom;
    min-height: 0;
    min-width: 0;
    background: transparent;
}
/* Внешняя сетка: колонка инструмента (панель + сплиттер справа) | график+панель настроек */
.workspace-middle {
    grid-area: main;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "instr inner";
    grid-template-columns: 0px minmax(0, 1fr);
    align-items: stretch;
    min-width: 0;
    min-height: 0;
    max-height: var(--app-page-max-height);
    gap: 0;
    overflow-x: hidden;
    overflow-y: visible;
}
.exchange-layout.instrument-open .workspace-middle {
    grid-template-columns: minmax(0, min(var(--instr-sidebar-w, 380px), min(32vw, calc(100% - 24px)))) minmax(0, 1fr);
}

.exchange-layout.instrument-open .instrument-sidebar {
    max-height: 100%;
    overflow: hidden;             /* Scroll happens inside panel */
    overscroll-behavior: contain; /* Prevent scroll chaining */
    padding: 0;
    flex-shrink: 0;
}

/* Analytics-active: analytics-sidebar on left (takes remaining space), panel-card on right (resizable via CSS variable) */
.exchange-layout.analytics-active .workspace-middle {
    /* Left: analytics-sidebar (flexible), Right: panel-card (resizable via --analytics-panel-w) */
    grid-template-columns: 1fr minmax(280px, var(--analytics-panel-w, 380px)) !important;
    grid-template-areas: "analytics panel" !important;
    display: grid !important;
}

.exchange-layout.analytics-active .analytics-sidebar {
    display: flex !important;
    grid-area: analytics !important;
    /* Let grid control the width via --analytics-sidebar-w variable */
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    height: 100% !important;
    max-height: 100%;
    overflow: visible !important;
    overscroll-behavior: contain;
    padding: 0;
    flex-shrink: 0;
    flex-direction: row;
    align-items: stretch;
    visibility: visible !important;
    opacity: 1 !important;
}

/* workspace-inner becomes the panel container on the right */
.exchange-layout.analytics-active .workspace-inner {
    display: flex !important;
    grid-area: panel !important;
    flex-direction: column;
    height: 100% !important;
    min-height: 0;
}

/* Hide chart-host completely */
.exchange-layout.analytics-active .workspace-chart-host {
    display: none !important;
}

/* Hide the main splitter */
.exchange-layout.analytics-active #splitter-col-main {
    display: none !important;
}

/* Panel-card fills the workspace-inner */
.exchange-layout.analytics-active .panel-card {
    display: flex !important;
    flex-direction: column;
    visibility: visible !important;
    width: 100%;
    height: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.workspace-inner {
    grid-area: inner;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "chart split panel";
    align-items: stretch;
    min-width: 0;
    min-height: 0;
    max-height: var(--app-page-max-height);
    gap: 0;
    overflow-x: hidden;
    overflow-y: visible;
}

.workspace-middle[data-chart-side="right"] .workspace-inner {
    grid-template-areas: "panel split chart";
}
.workspace-chart-host {
    grid-area: chart;
    min-width: 0;
    min-height: 0;
    max-height: var(--app-page-max-height);
    display: flex;
    flex-direction: column;
    /* Предотвращаем переполнение при активированных инструментах рисования */
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.3);  /* White border */
}

/* Analytics Panel grid area */
.analytics-panel {
    grid-area: analytics;
    min-width: 0;
    min-height: 0;
    display: none;
}

.workspace-inner.analytics-active .analytics-panel {
    display: flex;
}

/* Analytics splitter grid area */
.layout-splitter--analytics {
    grid-area: split-analytics;
}
/* Карточка графика заполняет ячейку сетки при ручной раскладке */
.workspace-middle .chart-card {
    flex: 1 1 auto;
    min-height: 0;
    max-height: var(--app-page-max-height);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* Высота области графика: лимит привязан к --app-page-max-height (2× окно), не к одному 100dvh */
.workspace-middle .chart-box {
    flex: 1 1 auto;
    min-height: 160px;
    max-height: min(78vh, calc(var(--app-page-max-height) - 160px));
    height: auto !important;
    overflow: hidden;
    position: relative;
}
.workspace-middle .layout-splitter--col {
    grid-area: split;
}
.workspace-middle .panel-card {
    grid-area: panel;
    min-height: 0;
    max-height: var(--app-page-max-height);
    align-self: stretch;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.layout-splitter {
    flex-shrink: 0;
    background: rgba(100, 116, 139, 0.22);
    box-sizing: border-box;
    transition: background 0.15s ease;
    touch-action: none;
    z-index: 6;
}
.layout-splitter:hover,
.layout-splitter.is-dragging {
    background: rgba(45, 212, 191, 0.42);
}
.layout-splitter--row {
    cursor: ns-resize;
    height: 6px;
    min-height: 6px;
}
.layout-splitter--col {
    cursor: ew-resize;
    width: 6px;
    min-width: 6px;
}
/* Справа от .instrument-panel — как layout-splitter--col у графика/панели */
.instrument-sidebar .layout-splitter--instrument {
    flex: 0 0 auto;
    cursor: ew-resize;
    width: 0;
    min-width: 0;
    max-width: 0;
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden;
    pointer-events: none;
    align-self: stretch;
}
.exchange-layout.instrument-open .instrument-sidebar .layout-splitter--instrument {
    width: 6px;
    min-width: 6px;
    max-width: 6px;
    pointer-events: auto;
}

.exchange-topbar {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(
        135deg,
        rgba(30, 34, 39, 0.95) 0%,
        rgba(22, 25, 29, 0.97) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(58, 63, 71, 0.5);
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.pair-trigger {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid rgba(58, 63, 71, 0.5);
    background: linear-gradient(
        135deg,
        rgba(30, 34, 39, 0.7) 0%,
        rgba(22, 25, 29, 0.8) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pair-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(87, 92, 100, 0.2);
    border-color: rgba(87, 92, 100, 0.6);
    background: linear-gradient(
        135deg,
        rgba(35, 40, 48, 0.75) 0%,
        rgba(28, 32, 37, 0.85) 100%
    );
}

.exchange-layout.instrument-open .pair-trigger {
    border-color: rgba(87, 92, 100, 0.7);
    box-shadow: 
        0 0 0 1px rgba(87, 92, 100, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.4);
}

.pair-trigger:focus-visible {
    outline: 2px solid rgba(87, 92, 100, 0.6);
    outline-offset: 2px;
}

.pair-trigger:focus:not(:focus-visible) {
    outline: none;
}
.pair-main {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    flex: 1;
}
.pair-brand {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
}
.pair-titles {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
    min-width: 0;
}
.pair-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
    border: 1px solid var(--card-border, #374151);
    background: transparent;
    flex-shrink: 0;
}
.pair-name {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-align: left;
}
.pair-sub {
    color: var(--text-secondary, #9ca3af);
    font-size: 0.75rem;
    line-height: 1.2;
    text-align: left;
    margin: 0;
}
.pair-head-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}
.liquidity-ticker {
    position: relative;
    min-width: 0;
    flex: 1 1 55%;
    height: 30px;
    overflow: hidden;
    border: 1px solid rgba(58, 63, 71, 0.5);
    border-radius: 999px;
    background: linear-gradient(
        135deg,
        rgba(30, 34, 39, 0.7) 0%,
        rgba(22, 25, 29, 0.8) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 2px 8px rgba(0, 0, 0, 0.3);
}
.liquidity-track {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: 22px;
    white-space: nowrap;
    padding: 5px 16px 5px 14px;
    height: 100%;
    animation: tickerRun 184s linear infinite;
    will-change: transform;
}
.liquidity-ticker:hover .liquidity-track {
    animation-play-state: paused;
}
.ticker-item,
.ticker-item-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.ticker-item-btn {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.82rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px 6px;
    margin: 0;
    border-radius: 8px;
    transition: all 0.15s ease;
}
.ticker-item-btn:hover {
    background: rgba(87, 92, 100, 0.15);
    color: var(--text);
    box-shadow: 0 0 0 1px rgba(87, 92, 100, 0.2);
}
.ticker-item-btn:focus-visible {
    outline: none;
    background: rgba(87, 92, 100, 0.2);
    box-shadow: 
        0 0 0 2px rgba(87, 92, 100, 0.4),
        0 0 8px rgba(58, 63, 71, 0.3);
}
.ticker-item-btn:active {
    transform: scale(0.98);
}
.ticker-item img,
.ticker-item-btn img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    border-radius: 3px;
    background: transparent;
}
.ticker-sep {
    width: 1px;
    height: 12px;
    background: rgba(34, 211, 238, 0.25);
    flex-shrink: 0;
}
.ticker-change {
    font-weight: 700;
    font-size: 0.78rem;
    margin-left: 4px;
}
.ticker-change.pos { color: #4ade80; }
.ticker-change.neg { color: #f87171; }
.ticker-change.flat { color: #94a3b8; }
.pair-chevron {
    flex-shrink: 0;
    color: #67e8f9;
    font-size: 0.75rem;
    opacity: 0.85;
}
.pair-search {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
    border: 1px solid rgba(58, 63, 71, 0.5);
    background: linear-gradient(
        135deg,
        rgba(30, 34, 39, 0.8) 0%,
        rgba(22, 25, 29, 0.9) 100%
    ) !important;
    background-color: rgba(30, 34, 39, 0.8) !important;
    color: var(--text-secondary);
    border-radius: 6px;
    padding: 9px 11px;
    font-size: 0.88rem;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pair-search:focus {
    outline: none;
    border-color: rgba(87, 92, 100, 0.6);
    box-shadow: 
        0 0 0 2px rgba(87, 92, 100, 0.1),
        0 0 12px rgba(58, 63, 71, 0.2);
}
.pair-search::placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}
.pair-search:-webkit-autofill,
.pair-search:-webkit-autofill:hover,
.pair-search:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px rgba(30, 34, 39, 0.9) inset !important;
    -webkit-text-fill-color: var(--text-secondary) !important;
    caret-color: var(--text);
}
.pair-tabs-wrap {
    position: relative;
    padding: 0 0 4px;
    flex-shrink: 0;
}
.pair-tabs-hint {
    font-size: clamp(0.6rem, 2.2vw, 0.65rem);
    color: #9ca3af;
    padding: 0 0 6px;
    letter-spacing: 0.02em;
    line-height: 1.35;
}
/* Видимая зона ~3–4 вкладки, остальные — горизонтальный скролл / ползунок */
.pair-tabs-viewport {
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 143, 150, 0.5) rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    border: 1px solid rgba(87, 92, 100, 0.6);
    background: linear-gradient(
        135deg,
        rgba(30, 34, 39, 0.6) 0%,
        rgba(22, 25, 29, 0.7) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    max-width: 100%;
    box-sizing: border-box;
}
.pair-tabs-viewport::-webkit-scrollbar {
    height: 6px;
}
.pair-tabs-viewport::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        rgba(139, 143, 150, 0.6) 0%,
        rgba(107, 114, 128, 0.7) 100%
    );
    border-radius: 6px;
}
.pair-tabs-scroll {
    display: flex;
    gap: 5px;
    padding: 6px 8px 7px;
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
}
.pair-tab-btn {
    flex: 0 0 auto;
    scroll-snap-align: start;
    border: 1px solid rgba(87, 92, 100, 0.5);
    background: linear-gradient(
        135deg,
        rgba(30, 34, 39, 0.5) 0%,
        rgba(22, 25, 29, 0.6) 100%
    );
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 0.72rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pair-tab-btn:hover {
    border-color: rgba(139, 143, 150, 0.6);
    background: linear-gradient(
        135deg,
        rgba(35, 40, 48, 0.6) 0%,
        rgba(28, 32, 37, 0.7) 100%
    );
    color: var(--text);
    box-shadow: 
        0 0 0 1px rgba(139, 143, 150, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.3);
}

.pair-tab-btn.active {
    color: var(--text);
    border-color: rgba(139, 143, 150, 0.8);
    background: linear-gradient(
        135deg,
        rgba(55, 60, 68, 0.7) 0%,
        rgba(45, 50, 58, 0.8) 100%
    );
    box-shadow: 
        0 0 0 1px rgba(139, 143, 150, 0.3),
        0 2px 12px rgba(0, 0, 0, 0.4);
}
.pair-list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 0 4px;
    min-width: 0;
    border-top: 1px solid rgba(87, 92, 100, 0.4);
    font-size: 0.72rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.pair-list-col-h {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pair-list-sort-btn {
    font: inherit;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    background: transparent;
    border: 0;
    padding: 2px 4px;
    margin: 0;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
    transition: color 0.12s ease, background 0.12s ease;
}
.pair-list-sort-btn:first-child {
    justify-content: flex-start;
    flex: 1 1 auto;
}
.pair-list-sort-btn:hover {
    color: #e5e7eb;
    background: rgba(34, 211, 238, 0.08);
}
.pair-list-sort-btn.is-active {
    color: #d1fae5;
}
.pair-sort-arrow {
    font-size: 0.7rem;
    opacity: 0.95;
    min-width: 0.65em;
}
/* Список: все пары в DOM; видимая зона ~15–22 строки, остальное — скролл только внутри */
.pair-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: min(640px, calc(100dvh - 220px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid rgba(34, 211, 238, 0.14);
    scrollbar-width: thin;
    scrollbar-color: rgba(34, 211, 238, 0.35) rgba(255, 255, 255, 0.04);
}
.pair-list::-webkit-scrollbar {
    width: 7px;
}
.pair-list::-webkit-scrollbar-thumb {
    background: rgba(34, 211, 238, 0.35);
    border-radius: 6px;
}
.pair-option-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: stretch;
    border-bottom: 1px solid rgba(55, 65, 81, 0.65);
    padding-left: 4px;
    box-sizing: border-box;
}
.pair-option-row:last-child {
    border-bottom: 0;
}
.pair-option-row:hover {
    background: rgba(34, 211, 238, 0.06);
}
.pair-option-main {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text-primary, #f3f4f6);
    text-align: left;
    padding: 8px 10px 8px 0;
    cursor: pointer;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}
.pair-option-star {
    border: 0;
    background: transparent;
    color: #64748b;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    align-self: center;
    justify-self: center;
}
.pair-option-star.is-favorite {
    color: #facc15;
}
.pair-option-star:hover {
    color: #e2e8f0;
}
.pair-option-name {
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.pair-option-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pair-option-volume {
    color: var(--text-secondary, #9ca3af);
    font-size: 0.8rem;
}
.pair-option-meta {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.pair-option-change {
    font-size: 0.75rem;
    font-weight: 700;
}
.pair-option-change.pos { color: #22c55e; }
.pair-option-change.neg { color: #ef4444; }
.pair-option-change.flat { color: #cbd5e1; }
.pair-option-icon {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: contain;
    border: 1px solid var(--card-border, #374151);
    background: transparent;
    flex-shrink: 0;
}
.pair-list-hint {
    padding: 10px;
    color: var(--text-secondary, #9ca3af);
    font-size: 0.8rem;
    border-top: 1px dashed rgba(148, 163, 184, 0.22);
    background: rgba(45, 50, 55, 0.6);
}

.chart-card {
    background: rgba(8, 12, 18, 0.98);
    border: 1px solid rgba(34, 211, 238, 0.24);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.chart-card:hover {
    border-color: rgba(34, 211, 238, 0.45);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}

.chart-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.chart-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.chart-tools {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    margin-right: 2px;
    padding: 4px 8px;
    border-radius: 22px;
    background: rgba(8, 12, 18, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.35);  /* White-gray border */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    flex-wrap: nowrap;
}
.chart-tools .chart-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 15px;
    background: transparent;
    color: rgba(203, 213, 225, 0.88);
    cursor: pointer;
    transition:
        background 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease;
}
.chart-tools .chart-tool-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #f1f5f9;
}
.chart-tools .chart-tool-btn:focus-visible {
    outline: 2px solid rgba(45, 212, 191, 0.55);
    outline-offset: 1px;
}
.chart-tools .chart-tool-btn.is-tool-active {
    color: #2dd4bf;
    background: rgba(45, 212, 191, 0.12);
    box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.5);
}
.chart-tools .chart-tool-icon {
    display: block;
    flex-shrink: 0;
    pointer-events: none;
}

/* Tooltip styles for chart tools - dark theme with bottom positioning */
.chart-tools .chart-tool-btn[title] {
    position: relative;
}

/* Hide default browser tooltip by removing title attribute on hover */
.chart-tools .chart-tool-btn[title]:hover {
    position: relative;
}

/* Custom tooltip - appears after a short delay */
.chart-tools .chart-tool-btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: -36px; /* Position below the button */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.98);
    color: #e2e8f0;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    z-index: 10000;
    animation: tooltipFadeIn 0.15s ease-out;
    pointer-events: none;
    letter-spacing: 0.2px;
}

/* Arrow pointing up to the button */
.chart-tools .chart-tool-btn[title]:hover::before {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 6px solid rgba(15, 23, 42, 0.98);
    z-index: 10001;
    animation: tooltipFadeIn 0.15s ease-out;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Custom tooltip styles - positioned above buttons, not integrated */
.custom-tooltip {
    position: absolute;
    display: none;
    z-index: 10002; /* Higher than most UI elements */
    pointer-events: none;
}

.custom-tooltip-text {
    display: inline-block;
    background: rgba(15, 23, 42, 0.98);
    color: #e2e8f0;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 11px;
    font-weight: 500;
    white-space: pre-line; /* Allow line breaks */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.2px;
    animation: tooltipFadeIn 0.15s ease-out;
    max-width: 280px; /* Limit width for better readability */
    line-height: 1.4; /* Better line spacing */
}

.custom-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 5px solid transparent;
}

/* Bottom position (default) */
.custom-tooltip[data-position="bottom"] {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
}

.custom-tooltip[data-position="bottom"] .custom-tooltip-arrow {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: rgba(15, 23, 42, 0.98);
}

/* Top position */
.custom-tooltip[data-position="top"] {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
}

.custom-tooltip[data-position="top"] .custom-tooltip-arrow {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: rgba(15, 23, 42, 0.98);
}

/* Show tooltip on hover */
[data-original-title]:hover .custom-tooltip {
    display: block;
}

/* Ensure parent has relative positioning */
[data-original-title] {
    position: relative;
}

/* Special handling for buttons in panel - ensure tooltips appear above */
.panel-btn[data-original-title],
.field-input[data-original-title] {
    position: relative;
    z-index: 1; /* Create stacking context */
}
.chart-tools-sep {
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: rgba(148, 163, 184, 0.22);
    flex-shrink: 0;
}
.chart-tools .favorite-star-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
}
.chart-tools .favorite-star-btn.chart-tool-fav-btn {
    opacity: 1;
    transform: scale(1);
    width: 34px;
    height: 30px;
    min-width: 34px;
    min-height: 30px;
    border-radius: 15px;
    border: none;
    font-size: 0;
    line-height: 0;
    color: rgba(203, 213, 225, 0.88);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
}
.chart-tools .favorite-star-btn.chart-tool-fav-btn .chart-tool-icon {
    display: block;
    margin: 0;
    flex-shrink: 0;
}
.chart-tools .favorite-star-btn.chart-tool-fav-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #f1f5f9;
}
.chart-tools .favorite-star-btn.chart-tool-fav-btn.is-favorite {
    color: #facc15;
    background: rgba(250, 204, 21, 0.1);
    box-shadow: none;
    border: none;
}
.chart-tools .favorite-star-btn.chart-tool-fav-btn.is-favorite:hover {
    background: rgba(250, 204, 21, 0.16);
}
.chart-canvas-stack {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
    /* Как у .chart-overlay-canvas: единое скругление и обрезка обоих canvas */
    border-radius: 4px;
    overflow: hidden;
    /* Предотвращаем бесконечный рост при активированных инструментах */
    max-height: calc(100vh - 300px);
}

.chart-canvas-stack > canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: 100%;
    object-fit: contain;
}
/** Отдельный слой только под ось цен (не график): приоритет над привязкой к данным */
.chart-y-axis-strip {
    position: absolute;
    top: 0;
    width: 0;
    /* Поверх overlay — иначе ЛКМ по полосе «просачивается» и захват указателя на canvas ломается */
    z-index: 3;
    cursor: ns-resize;
    pointer-events: auto;
    touch-action: none;
    background: transparent;
    border-radius: 0 4px 4px 0;
    box-sizing: border-box;
}
.chart-y-axis-hover-badge {
    position: absolute;
    right: 0;
    top: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 4;
    text-align: right;
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    padding: 5px 8px;
    border-radius: 4px 0 0 4px;
    background: rgba(30, 34, 39, 0.98);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-right: none;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    /* Prevent stretching across entire chart */
    max-width: 220px;
    width: auto;
}
.chart-overlay-canvas {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    max-height: 100%;
    pointer-events: none;
    z-index: 2;
    border-radius: 4px;
}
.chart-canvas-stack.tools-pointer .chart-y-axis-strip {
    pointer-events: none;
    z-index: 1;
}
.chart-canvas-stack.tools-pointer .chart-overlay-canvas {
    pointer-events: auto;
    cursor: crosshair;
}
.chart-measure-result {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px dashed rgba(148, 163, 184, 0.35);
    font-size: 0.8rem;
    color: #cbd5e1;
    background: rgba(45, 50, 55, 0.65);
    line-height: 1.45;
}
.chart-measure-result strong {
    color: #5eead4;
}
/* Текст линейки рисуется на canvas внутри рамки; div оставлен скрытым */
.chart-ruler-float {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    visibility: hidden;
    overflow: hidden;
    width: 0;
    height: 0;
}
.chart-ruler-float[hidden] {
    display: none !important;
}
.favorite-star-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.favorite-star-btn {
    border: 1px solid rgba(34, 211, 238, 0.28);
    background: rgba(255, 255, 255, 0.04);
    color: #9ca3af;
    border-radius: 999px;
    width: 24px;
    height: 24px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 180ms ease, transform 180ms ease, color 180ms ease, border-color 180ms ease;
}
.favorite-star-btn.pop {
    animation: starPop 360ms ease;
}
.chart-card:hover .favorite-star-btn,
.favorite-star-btn.is-favorite {
    opacity: 1;
    transform: scale(1);
}
.favorite-star-btn.is-favorite {
    color: #facc15;
    border-color: rgba(250, 204, 21, 0.6);
    background: rgba(250, 204, 21, 0.12);
}
.favorite-tooltip {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 4px 7px;
    border-radius: 6px;
    background: rgba(2, 6, 23, 0.95);
    border: 1px solid rgba(34, 211, 238, 0.36);
    color: #cbd5e1;
    font-size: 0.7rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
    transition-delay: 2.2s;
}
.favorite-star-wrap:hover .favorite-tooltip {
    opacity: 1;
}
.favorite-star-wrap.show-toast .favorite-tooltip {
    opacity: 1;
    transition-delay: 0s;
}

.chart-item-name {
    font-weight: 700;
    margin: 0;
    font-size: 1rem;
    color: #f8fafc;
}

.chart-item-key {
    margin: 0 0 2px;
    color: var(--text-secondary, #9ca3af);
    font-size: 0.75rem;
    line-height: 1.2;
}
.chart-icon {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    object-fit: contain;
    border: 1px solid var(--card-border, #374151);
    background: transparent;
}

.metrics {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0 14px;
    margin: 2px 0 6px;
    padding: 4px 0;
    font-size: 0.82rem;
    line-height: 1.25;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    min-width: 0;
}
.metrics::-webkit-scrollbar {
    height: 5px;
}
.metrics::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 4px;
}
.metric-item {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    flex: 0 0 auto;
    white-space: nowrap;
}
.metric-item + .metric-item {
    padding-left: 14px;
    border-left: 1px solid rgba(148, 163, 184, 0.2);
}

.metric-label {
    color: var(--text-secondary, #9ca3af);
    flex-shrink: 0;
}

.metric-value {
    font-weight: 600;
    text-align: left;
}
.metric-value.pos { color: #22c55e; }
.metric-value.neg { color: #ef4444; }
.metric-value.flat { color: #cbd5e1; }

.chart-box {
    width: 100%;
    min-width: 0;
    /* Больше высоты под canvas после компактной строки метрик */
    height: clamp(260px, 58vh, 700px);
    max-height: min(86vh, 800px);
    min-height: 220px;
    position: relative;
}
.chart-hint {
    margin-top: 8px;
    padding: 8px 10px;
    border: 1px dashed rgba(58, 63, 71, 0.5);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.82rem;
    background: linear-gradient(
        135deg,
        rgba(30, 34, 39, 0.6) 0%,
        rgba(22, 25, 29, 0.7) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.panel-card {
    background: linear-gradient(180deg, rgba(8, 12, 18, 0.98), rgba(7, 10, 15, 0.98));
    border: 1px solid rgba(34, 211, 238, 0.18);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.panel-title {
    margin: 0 0 10px;
    font-size: 0.98rem;
    font-weight: 700;
}
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    padding: 8px 10px;
    border: 1px solid var(--card-border, #374151);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    font-size: 0.85rem;
}

/* AI Assistant Toggle Switch */
.ai-assistant-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(34, 211, 238, 0.25);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.05), rgba(15, 23, 42, 0.6));
    transition: all 0.3s ease;
}

.ai-assistant-toggle:hover {
    border-color: rgba(34, 211, 238, 0.45);
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(15, 23, 42, 0.7));
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.15);
}

.ai-assistant-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #f3f4f6);
    letter-spacing: 0.02em;
}

.switch-toggle {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(55, 65, 81, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 28px;
    border: 1px solid rgba(75, 85, 99, 0.5);
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: linear-gradient(135deg, #9ca3af, #6b7280);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.switch-toggle input:checked + .slider {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.3), rgba(6, 182, 212, 0.4));
    border-color: rgba(34, 211, 238, 0.6);
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.3);
}

.switch-toggle input:checked + .slider:before {
    transform: translateX(24px);
    background: linear-gradient(135deg, #22d3ee, #06b6d4);
    box-shadow: 0 0 10px rgba(34, 211, 238, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.switch-toggle input:focus-visible + .slider {
    outline: 2px solid rgba(34, 211, 238, 0.6);
    outline-offset: 2px;
}

/* AI Show Item Button (appears below toggle when AI is active) */
.ai-show-item-wrap {
    margin-bottom: 10px;
}

.ai-show-item-btn {
    width: 100%;
    border: 1px solid rgba(107, 114, 128, 0.35);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(75, 85, 99, 0.1));
    color: var(--text-primary, #f3f4f6);
    padding: 9px 12px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ai-show-item-btn:hover {
    border-color: rgba(107, 114, 128, 0.6);
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2), rgba(75, 85, 99, 0.15));
    box-shadow: 0 0 12px rgba(107, 114, 128, 0.15);
    transform: translateY(-1px);
}

.ai-show-item-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Active state for Show Item button (when grid is displayed) */
.ai-show-item-btn.active {
    border-color: rgba(107, 114, 128, 0.8);
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.3), rgba(75, 85, 99, 0.25));
    box-shadow: 0 0 16px rgba(107, 114, 128, 0.3), inset 0 0 12px rgba(107, 114, 128, 0.1);
    color: #d1d5db;
}

.ai-show-item-btn.active:hover {
    border-color: rgba(107, 114, 128, 1);
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.35), rgba(75, 85, 99, 0.3));
    box-shadow: 0 0 20px rgba(107, 114, 128, 0.4), inset 0 0 16px rgba(107, 114, 128, 0.15);
    transform: translateY(-1px);
}

.ai-show-item-btn.active:active {
    transform: translateY(0);
    box-shadow: 0 0 12px rgba(107, 114, 128, 0.25), inset 0 0 8px rgba(107, 114, 128, 0.1);
}

/* AI Analyze Dropdown (appears below Show Item button when AI is active) */
.ai-analyze-wrap {
    margin-bottom: 10px;
    position: relative;
    z-index: 50;
}

.ai-analyze-wrap .profit-target-modal {
    position: relative;
    margin-top: 8px;
    width: 100%;
}

.ai-analyze-dropdown {
    position: relative;
    width: 100%;
}

.ai-analyze-btn {
    width: 100%;
    border: 1px solid rgba(107, 114, 128, 0.35);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.15), rgba(75, 85, 99, 0.1));
    color: var(--text-primary, #f3f4f6);
    padding: 9px 12px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ai-analyze-arrow {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
    opacity: 0.7;
}

.ai-analyze-btn[aria-expanded="true"] .ai-analyze-arrow {
    transform: rotate(180deg);
}

.ai-analyze-btn:hover {
    border-color: rgba(107, 114, 128, 0.6);
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2), rgba(75, 85, 99, 0.15));
    box-shadow: 0 0 12px rgba(107, 114, 128, 0.15);
    transform: translateY(-1px);
}

.ai-analyze-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.ai-analyze-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 100;
    background: linear-gradient(135deg, rgba(55, 65, 81, 0.98), rgba(31, 41, 55, 0.98));
    border: 1px solid rgba(107, 114, 128, 0.3);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(107, 114, 128, 0.1);
    overflow: hidden;
    animation: menuSlideDown 0.2s ease;
}

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

.ai-analyze-menu-item {
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-primary, #f3f4f6);
    padding: 10px 12px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.ai-analyze-menu-item:last-child {
    border-bottom: none;
}

.ai-analyze-menu-item:hover {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2), rgba(75, 85, 99, 0.15));
    color: #d1d5db;
    padding-left: 16px;
}

.ai-analyze-menu-item:active {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.25), rgba(75, 85, 99, 0.2));
}
.field-select {
    width: 100%;
    border: 1px solid var(--card-border, #374151);
    background: var(--darker, #111827);
    color: var(--text-primary, #f3f4f6);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 0.9rem;
}
.field-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary, #9ca3af);
    margin: 0 0 5px;
}
.field-input {
    width: 100%;
    border: 1px solid var(--card-border, #374151);
    background: var(--darker, #111827);
    color: var(--text-primary, #f3f4f6);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 10px;
    font-size: 0.9rem;
}
.panel-btn {
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(180deg, #6b7280, #4b5563);
    color: #f3f4f6;
    padding: 9px 10px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 10px;
    transition: transform 150ms ease, filter 150ms ease;
}
.panel-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}
.filter-anomalies-btn {
    width: 100%;
    border: 1px solid var(--card-border, #374151);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary, #f3f4f6);
    padding: 9px 10px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 10px;
}
.filter-anomalies-btn.active {
    border-color: #2dd4bf;
    background: rgba(45, 212, 191, 0.12);
    color: #a7f3d0;
}
.mini-metrics {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 6px;
}
.mini-metric {
    border: 1px solid rgba(58, 63, 71, 0.5);
    border-radius: 4px;
    padding: 8px 10px;
    background: linear-gradient(
        135deg,
        rgba(30, 34, 39, 0.6) 0%,
        rgba(22, 25, 29, 0.7) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    transition: all 0.2s ease;
}
.mini-metric:hover {
    border-color: rgba(87, 92, 100, 0.6);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(87, 92, 100, 0.2);
}
.mini-label {
    color: var(--text-muted);
    font-size: 0.7rem;
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.mini-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes tickerRun {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes starPop {
    0% { transform: scale(0.9); }
    45% { transform: scale(1.25); }
    100% { transform: scale(1); }
}
.instrument-backdrop {
    display: none;
}
@media (max-width: 1100px) {
    /* Оверлей: колонка инструмента в сетке не резервирует место */
    .exchange-layout.instrument-open .workspace-middle {
        grid-template-columns: 0 minmax(0, 1fr) !important;
    }
    .exchange-layout.instrument-open .instrument-sidebar {
        position: fixed;
        left: max(0px, env(safe-area-inset-left));
        top: 0;
        bottom: 0;
        width: min(400px, calc(100vw - 16px));
        min-width: min(400px, calc(100vw - 16px));
        max-width: min(400px, calc(100vw - 16px));
        max-height: 100dvh;
        z-index: 80;
        box-shadow: 12px 0 40px rgba(0, 0, 0, 0.55);
        padding: 8px 10px 10px 8px;
        box-sizing: border-box;
        overflow-x: visible;
        overflow-y: auto;
    }
    .exchange-layout.instrument-open .instrument-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 70;
        border: 0;
        padding: 0;
        margin: 0;
        background: rgba(0, 0, 0, 0.52);
        cursor: default;
    }
    .exchange-layout.instrument-open .instrument-panel {
        min-height: 0;
        max-height: 100%;
        height: 100%;
        flex: 1 1 auto;
    }
    .exchange-layout.instrument-open .pair-list {
        max-height: min(50dvh, calc(100dvh - 300px));
    }
}
@media (max-width: 1000px) {
    /* На узком экране снова разрешаем обычную прокрутку страницы */
    html {
        height: auto;
    }
    body {
        height: auto;
        min-height: 100dvh;
        max-height: none;
        overflow-y: auto;
    }
    .exchange-wrap {
        max-height: none;
        overflow: visible;
    }
    .exchange-layout {
        max-height: none;
        overflow: visible;
    }
    .exchange-main {
        max-height: none;
        overflow: visible;
    }
    .exchange-workspace {
        height: auto;
        max-height: none;
        overflow: visible;
    }
    .liquidity-ticker {
        display: none;
    }
    .workspace-grid {
        display: flex !important;
        flex-direction: column !important;
        height: auto;
        max-height: none;
        overflow: visible;
    }
    .workspace-grid[data-topbar-pos="bottom"] {
        flex-direction: column-reverse !important;
    }
    .workspace-middle {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto;
        min-height: 200px;
        height: auto;
        max-height: none;
        overflow: visible;
    }
    .workspace-inner {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto;
        min-height: 200px;
        height: auto;
        max-height: none;
        overflow: visible;
    }
    .workspace-middle[data-chart-side="right"] .workspace-chart-host {
        order: 2;
    }
    .workspace-middle[data-chart-side="right"] .panel-card {
        order: 1;
    }
    .workspace-middle .layout-splitter--col {
        display: none !important;
        width: 0 !important;
        min-width: 0 !important;
        height: 0 !important;
    }
    .layout-splitter--row {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
    }
    .layout-splitter--instrument {
        display: none !important;
    }
    .chart-box {
        height: clamp(220px, 50vh, 560px);
        max-height: 75vh;
    }
    .workspace-middle .chart-box {
        height: clamp(220px, 50vh, 560px) !important;
        max-height: 75vh !important;
        flex: 0 1 auto;
    }
    .metrics {
        flex-wrap: wrap;
        row-gap: 6px;
    }
}

@media (max-width: 520px) {
    .exchange-wrap {
        padding: 6px;
    }
    .pair-name {
        font-size: clamp(0.85rem, 4vw, 1rem);
    }
    .pair-trigger {
        padding: 8px 10px;
    }
    .instrument-panel-head {
        padding: 0 0 8px;
        margin-bottom: 6px;
    }
    .pair-list {
        max-height: min(50dvh, calc(100dvh - 260px));
    }
    .metrics {
        font-size: clamp(0.75rem, 3.5vw, 0.86rem);
    }
}

/* Timeframe selector for candlestick chart */
.timeframe-selector {
    display: flex;
    gap: 6px;
    padding: 8px 0;
    flex-wrap: wrap;
}
.timeframe-btn {
    flex: 1;
    min-width: 48px;
    padding: 8px 10px;
    border: 1px solid rgba(34, 211, 238, 0.28);
    background: rgba(15, 23, 42, 0.85);
    color: #94a3b8;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.timeframe-btn:hover {
    background: rgba(34, 211, 238, 0.12);
    color: #e2e8f0;
    border-color: rgba(34, 211, 238, 0.45);
}
.timeframe-btn.active {
    background: rgba(34, 211, 238, 0.18);
    color: #22d3ee;
    border-color: rgba(34, 211, 238, 0.65);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.15);
}
.timeframe-btn:focus-visible {
    outline: 2px solid rgba(45, 212, 191, 0.65);
    outline-offset: 2px;
}

/* Candlestick chart styles */
.candle-green {
    fill: #00C853;
    stroke: #00C853;
}
.candle-red {
    fill: #FF5252;
    stroke: #FF5252;
}
.candle-gray {
    fill: #9E9E9E;
    stroke: #9E9E9E;
}

/* Inline style replacement classes */
.pair-sort-name {
    flex: 1;
    min-width: 0;
    text-align: left;
}
.pair-sort-change {
    width: 88px;
    text-align: right;
    flex-shrink: 0;
}
.pair-sort-volume {
    width: 118px;
    text-align: right;
    flex-shrink: 0;
}
.toggle-candles-btn {
    display: none;
    margin-top: 8px;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(7, 14, 24, 0.85));
    border: 1px solid rgba(34, 211, 238, 0.45);
}
.candle-timeframe-hidden {
    display: none;
}
.reset-range-btn {
    background: #374151;
}
.pair-not-found {
    padding: 10px;
    color: #9ca3af;
    background: rgba(45, 50, 55, 0.6);  /* Gray background instead of dark green */
    border-radius: 6px;
}
.pair-list-hint-no-margin {
    margin: 0;
    border-top: 0;
}

/* Полноэкранный режим графика */
.chart-fullscreen-active .chart-fullscreen-hidden {
    display: none !important;
}

.chart-fullscreen-active #chart-host.chart-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #070e18;
    padding: 20px;
    overflow: hidden;
}

.chart-fullscreen-active .workspace-inner {
    height: 100vh;
}

.chart-fullscreen-active .workspace-middle {
    height: 100%;
}

.chart-fullscreen-active .exchange-workspace {
    height: 100%;
}

.chart-fullscreen-active .layout-splitter {
    display: none;
}

.chart-fullscreen-active .panel-card {
    display: none;
}

.chart-fullscreen-active .instrument-panel {
    display: none;
}

.chart-fullscreen-active .exchange-topbar {
    display: none;
}

.chart-fullscreen-active .layout-toolbar-floating {
    display: none;
}

.chart-fullscreen-active .instrument-panel-title {
    display: none;
}

/* Chart host in fullscreen */
.chart-fullscreen-active .workspace-chart-host {
    height: 100% !important;
    min-height: 0 !important;
}

.chart-fullscreen-active .chart-hint {
    display: none;
}

.chart-fullscreen-active .chart-measure-result {
    display: none;
}

/* Chart box in fullscreen - fill all available space */
.chart-fullscreen-active .chart-box {
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
}

.chart-fullscreen-active .chart-canvas-stack {
    height: 100%;
}

/* Палитра цветов для рисования */
.chart-color-picker {
    background: linear-gradient(
        135deg,
        rgba(30, 34, 39, 0.98) 0%,
        rgba(22, 25, 29, 0.99) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(58, 63, 71, 0.6);
    border-radius: 6px;
    padding: 12px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(58, 63, 71, 0.3) inset;
    min-width: 220px;
    position: relative;
}

/* Subtle grid pattern overlay */
.chart-color-picker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 49px,
            rgba(58, 63, 71, 0.03) 49px,
            rgba(58, 63, 71, 0.03) 50px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 49px,
            rgba(58, 63, 71, 0.03) 49px,
            rgba(58, 63, 71, 0.03) 50px
        );
    background-size: 50px 50px;
    pointer-events: none;
    opacity: 0.4;
    z-index: 0;
}

.color-picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    margin-bottom: 10px;
    padding: 12px;
    background: linear-gradient(
        135deg,
        rgba(20, 23, 27, 0.5) 0%,
        rgba(15, 17, 20, 0.6) 100%
    );
    border: 1px solid rgba(58, 63, 71, 0.5);
    border-radius: 4px;
}

.color-preset-btn {
    width: 28px;
    height: 28px;
    border: 2px solid rgba(58, 63, 71, 0.6);
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.color-preset-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
    pointer-events: none;
}

.color-preset-btn:hover {
    transform: scale(1.12);
    border-color: rgba(45, 107, 90, 0.6);
    box-shadow: 
        0 0 12px rgba(45, 107, 90, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.4);
}

.color-preset-btn:active {
    transform: scale(0.95);
}

.color-custom-row,
.color-width-row {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 8px;
    background: rgba(20, 23, 27, 0.4);
    border: 1px solid rgba(42, 47, 54, 0.4);
    border-radius: 3px;
}

.color-custom-row label,
.color-width-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    font-weight: 600;
}

#custom-color-input {
    width: 40px;
    height: 28px;
    border: 2px solid rgba(58, 63, 71, 0.6);
    border-radius: 3px;
    cursor: pointer;
    background: transparent;
    transition: all 0.2s ease;
}

#custom-color-input:hover {
    border-color: rgba(45, 107, 90, 0.5);
    box-shadow: 0 0 8px rgba(45, 107, 90, 0.2);
}

#draw-width-slider {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(
        90deg,
        rgba(45, 107, 90, 0.3) 0%,
        rgba(27, 77, 62, 0.2) 100%
    );
    border-radius: 3px;
    outline: none;
    border: 1px solid rgba(58, 63, 71, 0.4);
}

#draw-width-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--accent-light) 0%,
        var(--accent) 100%
    );
    border: 2px solid rgba(45, 107, 90, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 0 8px rgba(45, 107, 90, 0.3);
}

#draw-width-slider::-webkit-slider-thumb:hover {
    background: linear-gradient(
        135deg,
        var(--accent) 0%,
        var(--accent-dark) 100%
    );
    box-shadow: 
        0 2px 6px rgba(0, 0, 0, 0.5),
        0 0 12px rgba(45, 107, 90, 0.4);
    transform: scale(1.1);
}

#draw-width-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--accent-light) 0%,
        var(--accent) 100%
    );
    border: 2px solid rgba(45, 107, 90, 0.6);
    cursor: pointer;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.4),
        0 0 8px rgba(45, 107, 90, 0.3);
}

#draw-width-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #22d3ee;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    border: none;
}

#width-value {
    min-width: 35px;
    text-align: right;
    font-weight: 600;
    color: #22d3ee;
}

/* Timeframe dropdown styles */
.chart-timeframe-dropdown {
    position: relative;
    display: inline-block;
}

/* Chart mode dropdown styles */
.chart-mode-dropdown {
    position: relative;
    display: inline-block;
}

.chart-mode-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 6px;
    color: #6366f1;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.85rem;
    font-weight: 500;
}

.chart-mode-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
}

.chart-mode-btn .chart-tool-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.chart-mode-btn[aria-expanded="true"] .chart-tool-icon {
    transform: rotate(180deg);
}

.mode-label {
    font-weight: 600;
}

.mode-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #1a1f2e;
    border: 1px solid rgba(99, 102, 241, 0.35);
    border-radius: 6px;
    padding: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    min-width: 220px;
    z-index: 10001;
    display: none;
    gap: 4px;
}

.mode-dropdown-menu:not([hidden]) {
    display: flex;
    flex-direction: column;
}

.mode-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #e2e8f0;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.85rem;
    text-align: left;
}

.mode-menu-item:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
}

.mode-menu-item.active {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.5);
    color: #818cf8;
    font-weight: 600;
}

.mode-icon {
    font-size: 1.1rem;
    width: 20px;
    display: inline-block;
    text-align: center;
}

.mode-text {
    flex: 1;
}

.chart-timeframe-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.3);
    border-radius: 6px;
    color: #22d3ee;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.85rem;
    font-weight: 500;
}

.chart-timeframe-btn:hover {
    background: rgba(34, 211, 238, 0.2);
    border-color: rgba(34, 211, 238, 0.5);
}

.chart-timeframe-btn .chart-tool-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s;
}

.chart-timeframe-btn[aria-expanded="true"] .chart-tool-icon {
    transform: rotate(180deg);
}

.timeframe-label {
    font-weight: 600;
}

.timeframe-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: linear-gradient(
        135deg,
        rgba(30, 34, 39, 0.98) 0%,
        rgba(22, 25, 29, 0.99) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(58, 63, 71, 0.6);
    border-radius: 6px;
    padding: 6px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(58, 63, 71, 0.3) inset;
    min-width: 200px;
    z-index: 10001;
    display: none;
    gap: 2px;
}

.timeframe-dropdown-menu:not([hidden]) {
    display: grid;
}

.timeframe-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.timeframe-group:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.timeframe-group:first-child {
    padding-top: 0;
}

.timeframe-group-label {
    grid-column: 1 / -1;
    font-size: 0.7rem;
    color: rgba(203, 213, 225, 0.5);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
    padding-left: 4px;
}

.timeframe-menu-item {
    padding: 4px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 3px;
    color: #cbd5e1;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.12s;
    text-align: center;
    white-space: nowrap;
}

.timeframe-menu-item:hover {
    background: rgba(34, 211, 238, 0.15);
    border-color: rgba(34, 211, 238, 0.3);
    color: #22d3ee;
}

.timeframe-menu-item:active {
    background: rgba(34, 211, 238, 0.25);
}

/* Volume dropdown menu */
.chart-volume-dropdown {
    position: relative;
    display: inline-flex;
}

.volume-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: linear-gradient(
        135deg,
        rgba(30, 34, 39, 0.98) 0%,
        rgba(22, 25, 29, 0.99) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(58, 63, 71, 0.6);
    border-radius: 6px;
    padding: 4px;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(58, 63, 71, 0.3) inset;
    min-width: 180px;
    z-index: 10001;
    display: none;
    flex-direction: column;
    gap: 2px;
}

.volume-dropdown-menu:not([hidden]) {
    display: flex;
}

.volume-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #cbd5e1;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.12s;
    text-align: left;
    white-space: nowrap;
}

.volume-menu-item:hover {
    background: rgba(34, 211, 238, 0.15);
    border-color: rgba(34, 211, 238, 0.3);
    color: #22d3ee;
}

.volume-menu-item.active {
    background: rgba(34, 211, 238, 0.2);
    border-color: rgba(34, 211, 238, 0.5);
    color: #22d3ee;
    font-weight: 600;
}

.volume-menu-item:active {
    background: rgba(34, 211, 238, 0.25);
}

.volume-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    font-size: 1rem;
    font-weight: 700;
}

.volume-text {
    flex: 1;
}

.chart-volume-btn.is-tool-active {
    background: rgba(34, 211, 238, 0.15);
    border-color: rgba(34, 211, 238, 0.6);
    color: #22d3ee;
}

/* Volume Container - separate canvas below main chart */
.chart-volume-container {
    width: 100%;
    height: 120px; /* Increased from 80px to 120px (~1.5x) */
    margin-top: 4px;
    overflow: hidden;
    display: none;
}

.chart-volume-container.visible {
    display: block;
}

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

/* Volume Tooltip */
.chart-volume-tooltip {
    position: absolute;
    background: linear-gradient(135deg, rgba(30, 34, 39, 0.96) 0%, rgba(22, 25, 29, 0.98) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(58, 63, 71, 0.7);
    border-radius: 6px;
    padding: 8px 12px;
    color: #e2e8f0;
    font-size: 12px;
    font-weight: 500;
    pointer-events: none;
    z-index: 10002;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(58, 63, 71, 0.3) inset;
    display: none;
    line-height: 1.6;
}

.chart-volume-tooltip.visible {
    display: block;
}

.chart-volume-tooltip .tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.chart-volume-tooltip .tooltip-label {
    color: #94a3b8;
}

.chart-volume-tooltip .tooltip-value {
    color: #22d3ee;
    font-weight: 600;
}

/* ==========================================================================
   SECTION: ENHANCED ANIMATIONS & VISUAL EFFECTS
   Purpose: Professional-grade animations, transitions, and visual polish
   Style: Industrial HUD aesthetic with subtle motion
   ========================================================================== */

/* --- Keyframe Animations --- */

/* [Pulse Animation] Subtle breathing effect for active elements */
@keyframes evePulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 20px rgba(27, 77, 62, 0.15);
    }
    50% {
        opacity: 0.85;
        box-shadow: 0 0 40px rgba(27, 77, 62, 0.35);
    }
}

/* [Scan Animation] Horizontal scanning line effect */
@keyframes eveScan {
    0% {
        transform: translateX(-100%);
        background-position: 0% 50%;
    }
    100% {
        transform: translateX(100%);
        background-position: 100% 50%;
    }
}

/* [Glow Animation] Intensity modulation for emerald glow */
@keyframes eveGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(27, 77, 62, 0.15),
                    0 0 40px rgba(45, 107, 90, 0.1),
                    inset 0 0 0 rgba(45, 107, 90, 0);
    }
    50% {
        box-shadow: 0 0 40px rgba(27, 77, 62, 0.35),
                    0 0 80px rgba(45, 107, 90, 0.2),
                    inset 0 0 20px rgba(45, 107, 90, 0.1);
    }
}

/* [Fade In] Smooth entrance animation with upward motion */
@keyframes eveFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* [Shimmer] Metallic light sweep effect */
@keyframes eveShimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* [Float] Gentle hovering motion */
@keyframes eveFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

/* [Border Flow] Animated border gradient */
@keyframes eveBorderFlow {
    0% {
        border-color: rgba(45, 107, 90, 0.3);
    }
    50% {
        border-color: rgba(45, 107, 90, 0.8);
    }
    100% {
        border-color: rgba(45, 107, 90, 0.3);
    }
}

/* [Data Stream] Vertical scrolling data effect */
@keyframes eveDataStream {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100px;
    }
}

/* --- Animation Utility Classes --- */

.eve-animate-pulse {
    animation: evePulse 2s ease-in-out infinite;
}

.eve-animate-glow {
    animation: eveGlow 3s ease-in-out infinite;
}

.eve-animate-fade-in {
    animation: eveFadeIn 0.4s ease-out forwards;
}

.eve-animate-float {
    animation: eveFloat 3s ease-in-out infinite;
}

.eve-loading {
    position: relative;
    overflow: hidden;
}

.eve-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(45, 107, 90, 0.1),
        rgba(61, 122, 102, 0.15),
        rgba(45, 107, 90, 0.1),
        transparent
    );
    animation: eveScan 1.5s ease-in-out infinite;
}

/* --- Background Effects --- */

/* Technical grid pattern background */
.bg-technical-grid {
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 49px,
            rgba(58, 63, 71, 0.3) 49px,
            rgba(58, 63, 71, 0.3) 50px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 49px,
            rgba(58, 63, 71, 0.3) 49px,
            rgba(58, 63, 71, 0.3) 50px
        ),
        linear-gradient(
            135deg,
            var(--darker),
            var(--dark)
        );
    background-size: 50px 50px, 50px 50px, 100% 100%;
}

/* Metallic texture overlay */
.bg-metallic {
    background-image: 
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.03) 0%,
            transparent 50%,
            rgba(0, 0, 0, 0.05) 100%
        ),
        linear-gradient(
            45deg,
            var(--primary),
            var(--secondary)
        );
    background-blend-mode: overlay;
}

/* Gradient mesh background */
.bg-gradient-mesh {
    background-image: 
        radial-gradient(
            ellipse at 20% 30%,
            rgba(45, 107, 90, 0.08) 0%,
            transparent 50%
        ),
        radial-gradient(
            ellipse at 80% 70%,
            rgba(27, 77, 62, 0.1) 0%,
            transparent 50%
        ),
        linear-gradient(
            180deg,
            var(--darkest),
            var(--darker) 50%,
            var(--dark) 100%
        );
    background-size: 100% 100%, 100% 100%, 100% 100%;
}

/* --- Corner Decorations (HUD Style) --- */

.corner-decoration {
    position: relative;
}

.corner-decoration::before,
.corner-decoration::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(45, 107, 90, 0.4);
    transition: all 0.3s ease;
}

.corner-decoration::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
}

.corner-decoration::after {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
}

.corner-decoration:hover::before,
.corner-decoration:hover::after {
    border-color: rgba(45, 107, 90, 0.8);
    width: 16px;
    height: 16px;
}

/* Enhanced corner brackets */
.corner-brackets {
    position: relative;
    padding: var(--spacing-md);
}

.corner-brackets::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image: 
        linear-gradient(45deg, rgba(45, 107, 90, 0.3) 0%, transparent 20%),
        linear-gradient(-45deg, rgba(45, 107, 90, 0.3) 0%, transparent 20%),
        linear-gradient(135deg, rgba(45, 107, 90, 0.3) 0%, transparent 20%),
        linear-gradient(-135deg, rgba(45, 107, 90, 0.3) 0%, transparent 20%);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 
        top left,
        top right,
        bottom left,
        bottom right;
}

/* --- Button Hover Effects --- */

.btn-shimmer {
    position: relative;
    overflow: hidden;
}

.btn-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transition: left 0.5s ease;
}

.btn-shimmer:hover::before {
    left: 100%;
}

/* Glow on hover */
.hover-glow {
    transition: all 0.3s ease;
}

.hover-glow:hover {
    box-shadow: 
        0 0 20px rgba(45, 107, 90, 0.4),
        0 0 40px rgba(27, 77, 62, 0.2),
        inset 0 0 10px rgba(45, 107, 90, 0.05);
}

/* Lift effect */
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

/* --- Panel Enhancements --- */

.panel-elevated {
    background: linear-gradient(
        135deg,
        var(--card-bg) 0%,
        var(--card-bg-end) 100%
    );
    box-shadow: 
        var(--shadow-md),
        0 0 0 1px rgba(58, 63, 71, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.panel-industrial {
    background-image: 
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.02) 0%,
            transparent 50%,
            rgba(0, 0, 0, 0.03) 100%
        ),
        linear-gradient(
            180deg,
            var(--gray-900),
            var(--darker)
        );
    border: 1px solid var(--card-border);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* --- Chart Area Effects --- */

.chart-enhanced {
    background: linear-gradient(
        180deg,
        var(--darkest) 0%,
        var(--darker) 50%,
        var(--dark) 100%
    );
    box-shadow: 
        inset 0 0 40px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(27, 77, 62, 0.1);
}

/* Grid overlay for chart */
.chart-grid-overlay {
    position: relative;
}

.chart-grid-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background-image: 
        linear-gradient(
            rgba(45, 107, 90, 0.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(45, 107, 90, 0.03) 1px,
            transparent 1px
        );
    background-size: 50px 50px;
    background-position: center;
    opacity: 0.6;
}

/* --- Backdrop Blur Effects --- */

.backdrop-blur {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(30, 34, 39, 0.85);
}

.backdrop-blur-strong {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(15, 17, 20, 0.9);
}

/* ==========================================================================
   ENHANCED BUTTON & PANEL STYLES
   Professional industrial-grade interactive elements
   ========================================================================== */

/* --- Button Base Styles --- */

button,
.btn,
.panel-btn,
.chart-tool-btn {
    position: relative;
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(58, 63, 71, 0.5);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
}

/* Gradient button background */
button:not([disabled]):hover,
.btn:not([disabled]):hover {
    background: linear-gradient(
        135deg,
        rgba(45, 107, 90, 0.15) 0%,
        rgba(27, 77, 62, 0.1) 100%
    );
    border-color: rgba(45, 107, 90, 0.5);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(45, 107, 90, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

button:active,
.btn:active {
    transform: translateY(0);
    box-shadow: 
        0 1px 4px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

button:disabled,
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(100%);
}

/* --- Panel Card Enhancements --- */

.panel-card,
.instrument-panel,
.chart-card {
    background: linear-gradient(
        135deg,
        var(--card-bg) 0%,
        var(--card-bg-end) 100%
    );
    border: 1px solid var(--card-border);
    box-shadow: 
        var(--shadow-md),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
    border-radius: var(--border-radius-md);
    position: relative;
}

/* Corner accent decorations - REMOVED */
/* .panel-card::before,
.instrument-panel::before,
.chart-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-image: 
        linear-gradient(
            45deg,
            transparent 50%,
            rgba(45, 107, 90, 0.3) 50%
        );
    border-top-left-radius: var(--border-radius-md);
    pointer-events: none;
}

.panel-card::after,
.instrument-panel::after,
.chart-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background-image: 
        linear-gradient(
            -135deg,
            transparent 50%,
            rgba(45, 107, 90, 0.3) 50%
        );
    border-bottom-right-radius: var(--border-radius-md);
    pointer-events: none;
} */

/* Hover state for panels */
.panel-card:hover,
.instrument-panel:hover,
.chart-card:hover {
    box-shadow: 
        var(--shadow-lg),
        0 0 0 1px rgba(45, 107, 90, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* --- Input Fields Enhancement --- */

.field-input,
input[type="text"],
input[type="date"],
input[type="number"],
select,
textarea {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: all 0.2s ease;
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.3),
        inset 0 0 0 rgba(45, 107, 90, 0);
}

.field-input:focus,
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--input-border-focus);
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.3),
        0 0 0 3px rgba(45, 107, 90, 0.1),
        0 0 20px rgba(27, 77, 62, 0.15);
}

.field-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* --- Toggle Switch Enhancement --- */

.toggle-switch input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 36px;
    height: 20px;
    background: var(--gray-700);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(58, 63, 71, 0.5);
}

.toggle-switch input[type="checkbox"]:checked {
    background: linear-gradient(
        135deg,
        var(--accent) 0%,
        var(--accent-dark) 100%
    );
    border-color: rgba(45, 107, 90, 0.6);
    box-shadow: 0 0 12px rgba(27, 77, 62, 0.4);
}

.toggle-switch input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: linear-gradient(
        180deg,
        var(--gray-400) 0%,
        var(--gray-500) 100%
    );
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toggle-switch input[type="checkbox"]:checked::before {
    left: 18px;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        var(--gray-300) 100%
    );
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(45, 107, 90, 0.4);
}

/* --- Chart Tool Buttons --- */

.chart-tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    min-height: 30px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.chart-tool-btn:hover {
    color: var(--text);
    background: rgba(45, 107, 90, 0.1);
    border-color: rgba(45, 107, 90, 0.4);
}

.chart-tool-btn.active,
.chart-tool-btn:active {
    background: rgba(45, 107, 90, 0.2);
    border-color: rgba(45, 107, 90, 0.6);
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(27, 77, 62, 0.2);
}

/* --- Mode Dropdown Menu --- */

.mode-dropdown-menu,
.timeframe-dropdown-menu {
    background: linear-gradient(
        180deg,
        rgba(30, 34, 39, 0.95) 0%,
        rgba(22, 25, 29, 0.98) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(58, 63, 71, 0.6);
    box-shadow: 
        var(--shadow-xl),
        0 0 0 1px rgba(45, 107, 90, 0.1);
}

.mode-menu-item,
.timeframe-menu-item {
    color: var(--text-secondary);
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.mode-menu-item:hover,
.timeframe-menu-item:hover {
    background: rgba(45, 107, 90, 0.12);
    border-color: rgba(45, 107, 90, 0.3);
    color: var(--text);
    box-shadow: 
        inset 0 0 0 1px rgba(45, 107, 90, 0.05),
        0 0 8px rgba(27, 77, 62, 0.15);
}

.mode-menu-item.active,
.timeframe-menu-item.active {
    background: linear-gradient(
        135deg,
        rgba(45, 107, 90, 0.25) 0%,
        rgba(27, 77, 62, 0.15) 100%
    );
    border-color: rgba(45, 107, 90, 0.5);
    color: var(--text);
    box-shadow: 
        inset 0 0 0 1px rgba(45, 107, 90, 0.2),
        0 0 12px rgba(27, 77, 62, 0.25);
}

/* ========================================
   CUSTOM SCROLLBAR - Enhanced Industrial Style
   ======================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--darker);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        var(--gray-600) 0%,
        var(--gray-700) 100%
    );
    border-radius: 4px;
    border: 1px solid rgba(58, 63, 71, 0.5);
    transition: all 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        var(--gray-500) 0%,
        var(--gray-600) 100%
    );
    box-shadow: 
        0 0 8px rgba(100, 116, 139, 0.4),
        0 0 16px rgba(87, 92, 100, 0.2);
}

::-webkit-scrollbar-thumb:active {
    background: var(--accent-dark);
}

/* Corner decoration for scrollbars */
::-webkit-scrollbar-corner {
    background: var(--darker);
}

/* Firefox scrollbar - Enhanced */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-600) var(--darker);
}

*:hover {
    scrollbar-color: var(--gray-500) var(--darker);
}

/* ========================================
   WORDPRESS THEME OVERRIDES
   ======================================== */
/* Hide WordPress theme elements */
.entry-header.ast-no-thumbnail.ast-no-title.ast-header-without-markup {
    display: none !important;
}

body {
    background-color: var(--dark) !important;
}

.container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 20px !important;
}

.site-content #primary {
    padding: 0 !important;
    margin: 0 !important;
}

#secondary {
    display: none !important;
}

header.site-header#masthead {
    display: none !important;
}

/* ============================================================================
   Экран блокировки (ввод пароля)
   ============================================================================ */
.lock-screen {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(45, 107, 90, 0.35), transparent 60%),
        radial-gradient(900px 500px at 100% 110%, rgba(20, 40, 35, 0.6), transparent 55%),
        linear-gradient(160deg, #0b1a16 0%, #0e1f1a 45%, #071210 100%);
    font-family: inherit;
}

.lock-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 44px 44px;
    pointer-events: none;
}

.lock-screen--hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.lock-screen[hidden] {
    display: none !important;
}

.lock-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 40px 36px 32px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(24, 46, 40, 0.95), rgba(15, 30, 26, 0.95));
    border: 1px solid rgba(80, 150, 130, 0.35);
    box-shadow:
        0 30px 60px -20px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: lockCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.lock-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(45, 107, 90, 0.5), rgba(22, 56, 47, 0.5));
    border: 1px solid rgba(120, 200, 175, 0.35);
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.6);
}

.lock-title {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    color: #e8f5ef;
    letter-spacing: 0.2px;
}

.lock-subtitle {
    margin: 0 0 28px;
    font-size: 13.5px;
    line-height: 1.5;
    text-align: center;
    color: rgba(200, 220, 212, 0.7);
}

.lock-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.lock-input-wrap {
    position: relative;
}

.lock-input {
    width: 100%;
    height: 52px;
    padding: 0 50px 0 16px;
    font-size: 15px;
    color: #e8f5ef;
    background: rgba(8, 18, 15, 0.7);
    border: 1px solid rgba(90, 160, 140, 0.4);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lock-input::placeholder {
    color: rgba(180, 205, 195, 0.45);
}

.lock-input:focus {
    border-color: rgba(120, 200, 175, 0.7);
    box-shadow: 0 0 0 3px rgba(45, 107, 90, 0.3);
}

.lock-input.lock-input-error {
    border-color: rgba(235, 90, 90, 0.8);
    box-shadow: 0 0 0 3px rgba(235, 90, 90, 0.15);
}

.lock-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(180, 205, 195, 0.7);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.lock-toggle:hover {
    color: #e8f5ef;
    background: rgba(255, 255, 255, 0.06);
}

.lock-toggle.lock-toggle-on {
    color: rgba(120, 200, 175, 1);
}

.lock-error {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
    color: #ffb3b3;
    background: rgba(235, 90, 90, 0.12);
    border: 1px solid rgba(235, 90, 90, 0.35);
    border-radius: 10px;
}

.lock-error[hidden] {
    display: none;
}

.lock-submit {
    height: 52px;
    font-size: 15px;
    font-weight: 700;
    color: #06211a;
    background: linear-gradient(180deg, #4fc08f, #2f9e76);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(47, 158, 118, 0.7);
    transition: filter 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.lock-submit:hover {
    filter: brightness(1.08);
    box-shadow: 0 10px 24px -8px rgba(47, 158, 118, 0.85);
}

.lock-submit:active {
    transform: translateY(1px);
}

.lock-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    filter: none;
}

.lock-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
    font-size: 12px;
    color: rgba(180, 205, 195, 0.5);
}

.lock-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4fc08f;
    box-shadow: 0 0 8px rgba(79, 192, 143, 0.9);
    animation: lockPulse 2s infinite;
}

@keyframes lockPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (max-width: 480px) {
    .lock-card {
        padding: 30px 22px 26px;
    }
    .lock-title {
        font-size: 19px;
    }
}
/*