/* ======================================
       FINANCIAL COLOR MANAGER VARIABLES
       ====================================== */
    
    /* Default Classic Blue Theme Variables */
    :root {
      /* Financial Color Manager - Classic Blue Theme */
      --finance-primary: #288cfa;
      --finance-secondary: #7ebcf9;
      --finance-accent: #103766;
      --finance-background: #bdc4d0;
      --finance-backgroundSecondary: #d4dae3;
      --finance-backgroundTertiary: #e8ecf2;
      --finance-backgroundDeep: #103766;
      --finance-textPrimary: #242c34;
      --finance-textSecondary: #3c4852;
      --finance-textMuted: #5a6670;
      --finance-textOnPrimary: #ffffff;
      --finance-textOnDark: #ffffff;
      --finance-positive: #22c55e;
      --finance-negative: #ef4444;
      --finance-neutral: #6b7280;
      --finance-warning: #f59e0b;
      --finance-candleUp: #059669;
      --finance-candleDown: #dc2626;
      --finance-candleUpBorder: #047857;
      --finance-candleDownBorder: #b91c1c;
      --finance-volumeUp: rgba(5, 150, 105, 0.6);
      --finance-volumeDown: rgba(220, 38, 38, 0.6);
      --finance-grid: #c1c9d2;
      --finance-axis: #8892a0;
      --finance-border: #9ca8b4;
      --finance-hover: #1d4ed8;
      --finance-active: #1e40af;
      --finance-focus: #2563eb;
      --finance-disabled: #9ca3af;
    }

    /* TradingView Theme Variables - Enhanced with Finance Colors */
    :root {
      --tv-color-platform-background: var(--finance-background, #ffffff);
      --tv-color-pane-background: var(--finance-backgroundSecondary, #ffffff);
      --tv-color-pane-background-secondary: var(--finance-backgroundTertiary, #ffffff);
      --tv-color-border: var(--finance-border, #e0e0e0);
      --tv-color-text: var(--finance-textPrimary, #000000) !important;
      --tv-color-text-secondary: var(--finance-textSecondary, #000000) !important;
      --tv-color-text-tertiary: var(--finance-textMuted, #000000) !important;
      --tv-color-item-active-text: var(--finance-textOnPrimary, #000000) !important;
      --tv-color-toolbar-button-background-hover: var(--finance-hover, #f5f5f5);
      --tv-color-toolbar-button-background-active: var(--finance-primary, #007bff);
      --tv-color-success: var(--finance-positive, #00c851);
      --tv-color-danger: var(--finance-negative, #ff4444);
      --tv-color-warning: var(--finance-warning, #ffbb33);
      --tv-color-info: var(--finance-primary, #33b5e5);
      --tv-color-volume-up: var(--finance-positive, #00c851);
      --tv-color-volume-down: var(--finance-negative, #ff4444);
      --tv-color-candle-up: var(--finance-candleUp, #00c851);
      --tv-color-candle-down: var(--finance-candleDown, #ff4444);
      --tv-color-candle-border-up: var(--finance-candleUpBorder, #00a841);
      --tv-color-candle-border-down: var(--finance-candleDownBorder, #e53e3e);
      --tv-color-grid: var(--finance-grid, #f0f0f0);
      --tv-color-watermark: var(--finance-border, #e5e5e5);
      --tv-font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
      --tv-border-radius: 4px;
      --tv-border-radius-small: 2px;
      
      /* Enhanced transparency colors using finance variables */
      --tv-color-success-alpha-10: rgba(34, 197, 94, 0.1);
      --tv-color-success-alpha-20: rgba(34, 197, 94, 0.2);
      --tv-color-danger-alpha-10: rgba(239, 68, 68, 0.1);
      --tv-color-danger-alpha-20: rgba(239, 68, 68, 0.2);
      --tv-color-warning-alpha-10: rgba(245, 158, 11, 0.1);
      --tv-color-info-alpha-10: rgba(40, 140, 250, 0.1);
      --tv-color-info-alpha-20: rgba(40, 140, 250, 0.2);
      --tv-color-info-alpha-30: rgba(40, 140, 250, 0.3);
      --tv-color-info-alpha-40: rgba(40, 140, 250, 0.4);
      --tv-color-info-alpha-60: rgba(40, 140, 250, 0.6);
      --tv-color-info-alpha-80: rgba(40, 140, 250, 0.8);
      --tv-color-overlay: rgba(255, 255, 255, 0.95);
      --tv-color-shadow: rgba(0, 0, 0, 0.08);
      --tv-color-chart-background: var(--finance-background, rgba(255, 255, 255, 1));
    }

    /* TradingView Theme Variables - Pure Black Text on White Background */
    :root {
      --tv-color-platform-background: #ffffff;
      --tv-color-pane-background: #ffffff;
      --tv-color-pane-background-secondary: #ffffff;
      --tv-color-border: #e0e0e0;
      --tv-color-text: #000000 !important;
      --tv-color-text-secondary: #000000 !important;
      --tv-color-text-tertiary: #000000 !important;
      --tv-color-item-active-text: #000000 !important;
      --tv-color-toolbar-button-background-hover: #f5f5f5;
      --tv-color-toolbar-button-background-active: #007bff;
      --tv-color-success: #00c851;
      --tv-color-danger: #ff4444;
      --tv-color-warning: #ffbb33;
      --tv-color-info: #33b5e5;
      --tv-color-volume-up: #00c851;
      --tv-color-volume-down: #ff4444;
      --tv-color-candle-up: #00c851;
      --tv-color-candle-down: #ff4444;
      --tv-color-candle-border-up: #00a841;
      --tv-color-candle-border-down: #e53e3e;
      --tv-color-grid: #f0f0f0;
      --tv-color-watermark: #e5e5e5;
      --tv-font-family: -apple-system, BlinkMacSystemFont, 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
      --tv-border-radius: 4px;
      --tv-border-radius-small: 2px;
      
      /* Transparency Colors - Light Finance Theme */
      --tv-color-success-alpha-10: rgba(0, 200, 81, 0.1);
      --tv-color-success-alpha-20: rgba(0, 200, 81, 0.2);
      --tv-color-danger-alpha-10: rgba(255, 68, 68, 0.1);
      --tv-color-danger-alpha-20: rgba(255, 68, 68, 0.2);
      --tv-color-warning-alpha-10: rgba(255, 187, 51, 0.1);
      --tv-color-info-alpha-10: rgba(51, 181, 229, 0.1);
      --tv-color-info-alpha-20: rgba(51, 181, 229, 0.2);
      --tv-color-info-alpha-30: rgba(51, 181, 229, 0.3);
      --tv-color-info-alpha-40: rgba(51, 181, 229, 0.4);
      --tv-color-info-alpha-60: rgba(51, 181, 229, 0.6);
      --tv-color-info-alpha-80: rgba(51, 181, 229, 0.8);
      --tv-color-overlay: rgba(255, 255, 255, 0.95);
      --tv-color-shadow: rgba(0, 0, 0, 0.08);
      --tv-color-chart-background: rgba(255, 255, 255, 1);
    }

    /* Light Theme Variables - Pure Black Text on White Background */
    html:not(.dark) {
      --tv-color-platform-background: #ffffff;
      --tv-color-pane-background: #ffffff;
      --tv-color-pane-background-secondary: #ffffff;
      --tv-color-border: #e0e0e0;
      --tv-color-text: #000000 !important;
      --tv-color-text-secondary: #000000 !important;
      --tv-color-text-tertiary: #000000 !important;
      --tv-color-item-active-text: #000000 !important;
      --tv-color-toolbar-button-background-hover: #f5f5f5;
      --tv-color-toolbar-button-background-active: #007bff;
      --tv-color-grid: #f0f0f0;
      --tv-color-watermark: #e5e5e5;
      --tv-color-overlay: rgba(255, 255, 255, 0.95);
      --tv-color-shadow: rgba(0, 0, 0, 0.08);
      --tv-color-chart-background: rgba(255, 255, 255, 1);
      
      /* Finance Light Colors - Professional Financial Theme */
      --tv-color-success: #00c851;       /* Bright green for gains */
      --tv-color-danger: #ff4444;        /* Bright red for losses */
      --tv-color-warning: #ffbb33;       /* Light amber for warnings */
      --tv-color-info: #33b5e5;          /* Light blue for info */
      --tv-color-volume-up: #00c851;
      --tv-color-volume-down: #ff4444;
      --tv-color-candle-up: #00c851;
      --tv-color-candle-down: #ff4444;
      --tv-color-candle-border-up: #00a841;
      --tv-color-candle-border-down: #e53e3e;
      
      /* Light theme transparency colors with finance accent */
      --tv-color-success-alpha-10: rgba(0, 200, 81, 0.1);
      --tv-color-success-alpha-20: rgba(0, 200, 81, 0.2);
      --tv-color-danger-alpha-10: rgba(255, 68, 68, 0.1);
      --tv-color-danger-alpha-20: rgba(255, 68, 68, 0.2);
      --tv-color-warning-alpha-10: rgba(255, 187, 51, 0.1);
      --tv-color-info-alpha-10: rgba(51, 181, 229, 0.1);
      --tv-color-info-alpha-20: rgba(51, 181, 229, 0.2);
      --tv-color-info-alpha-30: rgba(51, 181, 229, 0.3);
      --tv-color-info-alpha-40: rgba(51, 181, 229, 0.4);
      --tv-color-info-alpha-60: rgba(51, 181, 229, 0.6);
      --tv-color-info-alpha-80: rgba(51, 181, 229, 0.8);
    }

    /* Dark Theme Variables (default) */
    html.dark {
      --tv-color-platform-background: #131722;
      --tv-color-pane-background: #1e222d;
      --tv-color-pane-background-secondary: #2a2e39;
      --tv-color-border: #363a45;
      --tv-color-text: #d1d4dc;
      --tv-color-text-secondary: #787b86;
      --tv-color-text-tertiary: #555960;
      --tv-color-item-active-text: #ffffff;
      --tv-color-toolbar-button-background-hover: #2a2e39;
      --tv-color-grid: #363a45;
      --tv-color-watermark: #434651;
      --tv-color-overlay: rgba(0, 0, 0, 0.6);
      --tv-color-shadow: rgba(0, 0, 0, 0.3);
      --tv-color-chart-background: rgba(15, 23, 42, 0.9);
    }

    /* TradingView Base Styles */
    * { box-sizing: border-box; }
    
    body {
      background: var(--tv-color-platform-background);
      color: var(--tv-color-text);
      font-family: var(--tv-font-family);
      margin: 0;
      padding: 0;
    }
    
    /* Force black text in light theme */
    html:not(.dark) * {
      color: #000000 !important;
    }
    
    /* Exception for specific elements that should keep their colors */
    html:not(.dark) .tv-color-success,
    html:not(.dark) .tv-color-danger,
    html:not(.dark) .tv-color-warning,
    html:not(.dark) .tv-color-info,
    html:not(.dark) [class*="success"],
    html:not(.dark) [class*="danger"], 
    html:not(.dark) [class*="warning"],
    html:not(.dark) [class*="info"],
    html:not(.dark) [class*="green"],
    html:not(.dark) [class*="red"] {
      color: inherit !important;
    }
    
    /* TradingView Layout Components */
    .tv-header-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .tv-streaming-status {
      margin-left: 16px;
    }
    
    .tv-status-info {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    
    .tv-tick-rate {
      color: var(--tv-color-success);
    }
    
    /* Trial Timer Styles */
    .tv-trial-timer {
      margin-right: 12px;
    }
    
    .tv-timer-container {
      display: flex;
      align-items: center;
      gap: 6px;
      background: linear-gradient(135deg, var(--tv-color-danger) 0%, #e03e3e 100%);
      padding: 6px 12px;
      border-radius: 20px;
      border: 1px solid var(--tv-color-danger);
      box-shadow: 0 2px 8px rgba(242, 54, 69, 0.3);
      animation: pulse-timer 2s infinite;
    }
    
    .tv-timer-icon {
      color: white;
      animation: tick 1s infinite;
    }
    
    .tv-timer-label {
      color: white;
      font-size: 11px;
      font-weight: 500;
      white-space: nowrap;
    }
    
    .tv-timer-value {
      color: white;
      font-size: 12px;
      font-weight: 700;
      font-family: 'Courier New', monospace;
      min-width: 45px;
      text-align: center;
    }
    
    /* Timer animations */
    @keyframes pulse-timer {
      0% { box-shadow: 0 2px 8px rgba(242, 54, 69, 0.3); }
      50% { box-shadow: 0 2px 16px rgba(242, 54, 69, 0.6); }
      100% { box-shadow: 0 2px 8px rgba(242, 54, 69, 0.3); }
    }
    
    @keyframes tick {
      0% { transform: rotate(0deg); }
      50% { transform: rotate(15deg); }
      100% { transform: rotate(0deg); }
    }
    
    /* Timer warning states */
    .tv-timer-container.warning {
      background: linear-gradient(135deg, var(--tv-color-warning) 0%, #e6a700 100%);
      border-color: var(--tv-color-warning);
      box-shadow: 0 2px 8px rgba(255, 167, 38, 0.3);
    }
    
    .tv-timer-container.critical {
      background: linear-gradient(135deg, #ff5555 0%, #e03e3e 100%);
      border-color: #ff5555;
      box-shadow: 0 2px 8px rgba(255, 23, 68, 0.4);
      animation: pulse-critical 1s infinite;
    }
    
    @keyframes pulse-critical {
      0% { transform: scale(1); box-shadow: 0 2px 8px rgba(255, 23, 68, 0.4); }
      50% { transform: scale(1.05); box-shadow: 0 4px 16px rgba(255, 23, 68, 0.7); }
      100% { transform: scale(1); box-shadow: 0 2px 8px rgba(255, 23, 68, 0.4); }
    }

    /* Authentication Styles */
    .tv-auth-section {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .tv-auth-free, .tv-auth-pro {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .tv-auth-badge {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .tv-auth-badge-free {
      background: rgba(255, 187, 51, 0.1);
      color: var(--tv-color-warning);
      border: 1px solid rgba(255, 187, 51, 0.3);
    }
    
    .tv-auth-badge-pro {
      background: linear-gradient(135deg, #ffaa22 0%, #e6a700 100%);
      color: white;
      border: 1px solid #ffaa22;
      box-shadow: 0 2px 8px rgba(255, 170, 34, 0.3);
    }
    
    .tv-user-info {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .tv-user-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 2px solid var(--tv-color-border);
      object-fit: cover;
    }
    
    .tv-user-name {
      font-size: 12px;
      font-weight: 500;
      color: var(--tv-color-text);
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .tv-button-primary {
      background: var(--tv-color-info);
      color: white;
      border: 1px solid var(--tv-color-info);
    }
    
    .tv-button-primary:hover {
      background: var(--tv-color-info);
      opacity: 0.9;
      transform: translateY(-1px);
    }
    
    .tv-button-ghost {
      background: transparent;
      color: var(--tv-color-text-secondary);
      border: 1px solid var(--tv-color-border);
    }
    
    .tv-button-ghost:hover {
      background: var(--tv-color-toolbar-button-background-hover);
      color: var(--tv-color-text);
    }
    
    .tv-button-success {
      background: var(--tv-color-success);
      color: white;
      border: 1px solid var(--tv-color-success);
    }
    
    .tv-button-success:hover {
      background: var(--tv-color-success);
      opacity: 0.9;
      transform: translateY(-1px);
    }
    
    .tv-button-warning {
      background: var(--tv-color-warning);
      color: white;
      border: 1px solid var(--tv-color-warning);
    }
    
    .tv-button-warning:hover {
      background: var(--tv-color-warning);
      opacity: 0.9;
      transform: translateY(-1px);
    }
    
    /* Enhanced Upgrade Button */
    #btnUpgradeToPro {
      background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
      color: white;
      border: 1px solid #ff9800;
      box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
      animation: glow 2s ease-in-out infinite alternate;
    }
    
    #btnUpgradeToPro:hover {
      background: linear-gradient(135deg, #f57c00 0%, #ef6c00 100%);
      box-shadow: 0 4px 12px rgba(255, 152, 0, 0.5);
      transform: translateY(-2px);
    }
    
    @keyframes glow {
      from { box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3); }
      to { box-shadow: 0 2px 12px rgba(255, 152, 0, 0.6); }
    }

    /* ===============================================
       FINANCIAL THEME SELECTOR STYLES
       =============================================== */
    
    /* Theme Selector Container */
    .tv-theme-selector-container {
      position: relative;
      display: flex;
      align-items: center;
    }
    
    .tv-theme-selector-wrapper {
      position: relative;
    }
    
    /* Theme Toggle Button */
    .tv-theme-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      background: var(--finance-backgroundSecondary);
      border: 1px solid var(--finance-border);
      border-radius: 8px;
      color: var(--finance-textPrimary);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      min-height: 36px;
    }
    
    .tv-theme-toggle:hover {
      background: var(--finance-hover);
      color: var(--finance-textOnPrimary);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .tv-theme-toggle.active {
      background: var(--finance-primary);
      color: var(--finance-textOnPrimary);
      border-color: var(--finance-primary);
    }
    
    .tv-theme-label {
      white-space: nowrap;
    }
    
    /* Theme Dropdown Panel */
    .tv-theme-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 420px;
      background: var(--finance-backgroundTertiary);
      border: 1px solid var(--finance-border);
      border-radius: 12px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
      z-index: 1000;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      animation: fadeInScale 0.2s ease;
    }
    
    .tv-theme-dropdown.hidden {
      display: none;
    }
    
    @keyframes fadeInScale {
      from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }
    
    /* Dropdown Header */
    .tv-theme-dropdown-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--finance-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .tv-theme-dropdown-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: var(--finance-textPrimary);
    }
    
    .tv-theme-time-indicator {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      background: var(--finance-backgroundSecondary);
      border-radius: 6px;
      font-size: 11px;
      color: var(--finance-textSecondary);
    }
    
    /* Theme Grid */
    .tv-theme-grid {
      padding: 16px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      max-height: 400px;
      overflow-y: auto;
    }
    
    /* Theme Card */
    .tv-theme-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      background: var(--finance-backgroundSecondary);
      border: 2px solid transparent;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .tv-theme-card:hover {
      background: var(--finance-hover);
      color: var(--finance-textOnPrimary);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    }
    
    .tv-theme-card.active {
      background: var(--finance-primary);
      color: var(--finance-textOnPrimary);
      border-color: var(--finance-accent);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    }
    
    /* Theme Preview */
    .tv-theme-preview {
      width: 50px;
      height: 40px;
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--finance-border);
      position: relative;
      flex-shrink: 0;
    }
    
    .tv-theme-color-bar {
      display: flex;
      height: 100%;
    }
    
    .tv-theme-color-bar span {
      flex: 1;
      height: 100%;
    }
    
    /* Theme Info */
    .tv-theme-info {
      flex: 1;
      min-width: 0;
    }
    
    .tv-theme-name {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 2px;
      color: inherit;
    }
    
    .tv-theme-description {
      font-size: 11px;
      opacity: 0.8;
      margin-bottom: 4px;
      color: inherit;
    }
    
    .tv-theme-time {
      font-size: 10px;
      padding: 2px 6px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 4px;
      display: inline-block;
      color: inherit;
    }
    
    /* Dropdown Footer */
    .tv-theme-dropdown-footer {
      padding: 16px 20px;
      border-top: 1px solid var(--finance-border);
      background: var(--finance-backgroundSecondary);
      border-radius: 0 0 12px 12px;
    }
    
    /* Auto Switch Toggle */
    .tv-theme-auto-switch {
      margin-bottom: 12px;
    }
    
    .tv-theme-switch-label {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      font-size: 13px;
      color: var(--finance-textPrimary);
    }
    
    .tv-theme-checkbox {
      display: none;
    }
    
    .tv-theme-switch-slider {
      position: relative;
      width: 44px;
      height: 24px;
      background: var(--finance-neutral);
      border-radius: 12px;
      transition: background 0.3s ease;
      flex-shrink: 0;
    }
    
    .tv-theme-switch-slider::before {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 20px;
      height: 20px;
      background: white;
      border-radius: 50%;
      transition: transform 0.3s ease;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    .tv-theme-checkbox:checked + .tv-theme-switch-slider {
      background: var(--finance-primary);
    }
    
    .tv-theme-checkbox:checked + .tv-theme-switch-slider::before {
      transform: translateX(20px);
    }
    
    .tv-theme-switch-text {
      font-weight: 500;
    }
    
    /* Current Status */
    .tv-theme-current-status {
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: space-between;
    }
    
    .tv-theme-status-label {
      font-size: 12px;
      color: var(--finance-textSecondary);
    }
    
    .tv-theme-status-value {
      font-size: 12px;
      font-weight: 600;
      color: var(--finance-primary);
      padding: 2px 8px;
      background: rgba(var(--finance-primary-rgb, 40, 140, 250), 0.1);
      border-radius: 4px;
    }
    
    /* Responsive Design */
    @media (max-width: 768px) {
      .tv-theme-dropdown {
        width: 320px;
        right: -50px;
      }
      
      .tv-theme-grid {
        max-height: 300px;
      }
      
      .tv-theme-toggle .tv-theme-label {
        display: none;
      }
    }
    
    @media (max-width: 480px) {
      .tv-theme-dropdown {
        width: 280px;
        right: -80px;
      }
      
      .tv-theme-card {
        padding: 8px;
        gap: 8px;
      }
      
      .tv-theme-preview {
        width: 40px;
        height: 32px;
      }
      
      .tv-theme-dropdown-header,
      .tv-theme-dropdown-footer {
        padding: 12px 16px;
      }
    }

    /* ===============================================
       SIDEBAR THEME SELECTOR STYLES
       =============================================== */
    
    /* Current Theme Display */
    .tv-sidebar-current-theme {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px;
      background: var(--finance-backgroundSecondary);
      border: 1px solid var(--finance-border);
      border-radius: 8px;
      margin-bottom: 8px;
    }
    
    .tv-sidebar-theme-preview {
      width: 40px;
      height: 32px;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid var(--finance-border);
      flex-shrink: 0;
    }
    
    .tv-sidebar-color-dots {
      display: flex;
      height: 100%;
    }
    
    .tv-color-dot {
      flex: 1;
      height: 100%;
    }
    
    .tv-sidebar-theme-info {
      flex: 1;
      min-width: 0;
    }
    
    .tv-sidebar-theme-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--finance-textPrimary);
      margin-bottom: 2px;
    }
    
    .tv-sidebar-theme-desc {
      font-size: 11px;
      color: var(--finance-textSecondary);
      opacity: 0.8;
    }
    
    /* Quick Theme Grid */
    .tv-sidebar-theme-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-top: 8px;
    }
    
    .tv-sidebar-theme-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 8px 6px;
      background: var(--finance-backgroundSecondary);
      border: 2px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      min-height: 60px;
    }
    
    .tv-sidebar-theme-btn:hover {
      background: var(--finance-hover);
      color: var(--finance-textOnPrimary);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .tv-sidebar-theme-btn.active {
      background: var(--finance-primary);
      color: var(--finance-textOnPrimary);
      border-color: var(--finance-accent);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    .tv-sidebar-theme-preview-mini {
      width: 24px;
      height: 16px;
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid var(--finance-border);
      display: flex;
      flex-shrink: 0;
    }
    
    .tv-sidebar-theme-preview-mini span {
      flex: 1;
      height: 100%;
    }
    
    .tv-sidebar-theme-preview-mini.auto-mini {
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(45deg, #288cfa 0%, #059669 50%, #ea580c 100%);
      color: white;
    }
    
    .tv-sidebar-theme-label {
      font-size: 10px;
      font-weight: 500;
      text-align: center;
      color: inherit;
    }
    
    .tv-sidebar-auto-btn {
      background: linear-gradient(135deg, var(--finance-primary) 0%, var(--finance-secondary) 100%);
      color: var(--finance-textOnPrimary);
    }
    
    .tv-sidebar-auto-btn:hover {
      background: linear-gradient(135deg, var(--finance-hover) 0%, var(--finance-primary) 100%);
    }
    
    /* Time Information */
    .tv-sidebar-time-info {
      background: var(--finance-backgroundTertiary);
      border-radius: 6px;
      padding: 8px;
      margin-top: 8px;
    }
    
    .tv-sidebar-time-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }
    
    .tv-sidebar-time-row:last-child {
      margin-bottom: 0;
    }
    
    .tv-sidebar-time-label {
      font-size: 11px;
      color: var(--finance-textSecondary);
    }
    
    .tv-sidebar-time-value {
      font-size: 11px;
      font-weight: 600;
      color: var(--finance-primary);
    }
    
    /* Auto Switch Toggle */
    .tv-sidebar-switch-container {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }
    
    .tv-sidebar-switch {
      position: relative;
      display: inline-block;
      width: 40px;
      height: 20px;
      flex-shrink: 0;
    }
    
    .tv-sidebar-switch-input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .tv-sidebar-switch-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--finance-neutral);
      transition: 0.3s;
      border-radius: 10px;
    }
    
    .tv-sidebar-switch-slider:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 2px;
      bottom: 2px;
      background-color: white;
      transition: 0.3s;
      border-radius: 50%;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
    
    .tv-sidebar-switch-input:checked + .tv-sidebar-switch-slider {
      background-color: var(--finance-primary);
    }
    
    .tv-sidebar-switch-input:checked + .tv-sidebar-switch-slider:before {
      transform: translateX(20px);
    }
    
    .tv-sidebar-switch-label {
      font-size: 12px;
      color: var(--finance-textPrimary);
      flex: 1;
    }
    
    .tv-sidebar-switch-help {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-top: 6px;
      padding: 6px 8px;
      background: rgba(var(--finance-primary-rgb, 40, 140, 250), 0.1);
      border-radius: 4px;
    }
    
    .tv-sidebar-switch-help span {
      font-size: 10px;
      color: var(--finance-textSecondary);
      line-height: 1.2;
    }
    
    /* Theme Actions */
    .tv-sidebar-actions {
      display: flex;
      gap: 8px;
      margin-top: 8px;
    }
    
    .tv-sidebar-action-btn {
      flex: 1;
      padding: 8px 12px;
      font-size: 11px;
      min-height: 32px;
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
      .tv-sidebar-theme-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .tv-sidebar-actions {
        flex-direction: column;
      }
      
      .tv-sidebar-action-btn {
        width: 100%;
      }
    }

    /* Steps Guide Styles */
    .tv-steps-guide {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.8);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
    }
    
    .tv-steps-container {
      background: var(--tv-color-pane-background);
      border: 1px solid var(--tv-color-border);
      border-radius: 16px;
      max-width: 600px;
      width: 90vw;
      max-height: 80vh;
      overflow-y: auto;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
      animation: slideInUp 0.3s ease;
    }
    
    @keyframes slideInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .tv-steps-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px 24px 16px;
      border-bottom: 1px solid var(--tv-color-border);
    }
    
    .tv-steps-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      font-size: 20px;
      font-weight: 600;
      color: var(--tv-color-text);
    }
    
    .tv-steps-close {
      background: none;
      border: none;
      color: var(--tv-color-text-secondary);
      cursor: pointer;
      padding: 8px;
      border-radius: 4px;
      transition: all 0.2s ease;
    }
    
    .tv-steps-close:hover {
      background: var(--tv-color-toolbar-button-background-hover);
      color: var(--tv-color-text);
    }
    
    .tv-steps-content {
      padding: 24px;
    }
    
    .tv-steps-list {
      margin-bottom: 32px;
    }
    
    .tv-step {
      display: flex;
      gap: 16px;
      margin-bottom: 24px;
      opacity: 0.5;
      transition: all 0.3s ease;
    }
    
    .tv-step.active {
      opacity: 1;
    }
    
    .tv-step.completed {
      opacity: 0.8;
    }
    
    .tv-step.completed .tv-step-number {
      background: var(--tv-color-success);
      color: white;
    }
    
    .tv-step.completed .tv-step-number::after {
      content: "✓";
      font-size: 12px;
    }
    
    .tv-step-indicator {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    
    .tv-step-number {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--tv-color-border);
      color: var(--tv-color-text-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      transition: all 0.3s ease;
      z-index: 1;
    }
    
    .tv-step.active .tv-step-number {
      background: var(--tv-color-info);
      color: white;
      transform: scale(1.1);
      box-shadow: 0 0 0 4px rgba(41, 98, 255, 0.2);
    }
    
    .tv-step-line {
      width: 2px;
      height: 40px;
      background: var(--tv-color-border);
      margin-top: 8px;
      transition: all 0.3s ease;
    }
    
    .tv-step.completed .tv-step-line {
      background: var(--tv-color-success);
    }
    
    .tv-step:last-child .tv-step-line {
      display: none;
    }
    
    .tv-step-content {
      flex: 1;
      padding-top: 4px;
    }
    
    .tv-step-title {
      margin: 0 0 8px 0;
      font-size: 16px;
      font-weight: 600;
      color: var(--tv-color-text);
    }
    
    .tv-step-description {
      margin: 0;
      font-size: 14px;
      color: var(--tv-color-text-secondary);
      line-height: 1.5;
    }
    
    .tv-step-highlight {
      position: absolute;
      pointer-events: none;
      border: 2px solid var(--tv-color-info);
      border-radius: 4px;
      background: rgba(41, 98, 255, 0.1);
      z-index: 999;
      opacity: 0;
      transition: all 0.3s ease;
      animation: pulse-highlight 2s infinite;
    }
    
    .tv-step-highlight.active {
      opacity: 1;
    }
    
    @keyframes pulse-highlight {
      0% { box-shadow: 0 0 0 0 rgba(41, 98, 255, 0.4); }
      70% { box-shadow: 0 0 0 10px rgba(41, 98, 255, 0); }
      100% { box-shadow: 0 0 0 0 rgba(41, 98, 255, 0); }
    }
    
    .tv-steps-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      padding-top: 16px;
      border-top: 1px solid var(--tv-color-border);
    }
    
    .tv-button-secondary {
      background: var(--tv-color-pane-background-secondary);
      color: var(--tv-color-text);
      border: 1px solid var(--tv-color-border);
    }
    
    .tv-button-secondary:hover {
      background: var(--tv-color-toolbar-button-background-hover);
      border-color: var(--tv-color-info);
    }

    /* Pro Upgrade Modal Styles */
    .tv-modal-pro {
      max-width: 900px;
      width: 90vw;
      max-height: 90vh;
      overflow-y: auto;
      background: var(--tv-color-pane-background);
      border: 1px solid var(--tv-color-border);
      border-radius: 12px;
    }
    
    .tv-modal-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 24px;
      font-weight: 700;
      color: var(--tv-color-text);
      margin: 0;
    }
    
    .tv-pro-features {
      margin-bottom: 32px;
    }
    
    .tv-features-title {
      font-size: 20px;
      font-weight: 600;
      color: var(--tv-color-text);
      margin-bottom: 20px;
      text-align: center;
    }
    
    .tv-features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }
    
    .tv-feature-item {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: var(--tv-color-pane-background-secondary);
      border: 1px solid var(--tv-color-border);
      border-radius: 8px;
      transition: all 0.2s ease;
    }
    
    .tv-feature-item:hover {
      border-color: var(--tv-color-info);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .tv-feature-icon {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.1);
      border-radius: 6px;
    }
    
    .tv-feature-content h4 {
      margin: 0 0 4px 0;
      font-size: 14px;
      font-weight: 600;
      color: var(--tv-color-text);
    }
    
    .tv-feature-content p {
      margin: 0;
      font-size: 12px;
      color: var(--tv-color-text-secondary);
      line-height: 1.4;
    }
    
    .tv-pricing-plans {
      margin-bottom: 32px;
    }
    
    .tv-pricing-title {
      font-size: 20px;
      font-weight: 600;
      color: var(--tv-color-text);
      margin-bottom: 20px;
      text-align: center;
    }
    
    .tv-plans-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }
    
    .tv-plan-card {
      position: relative;
      padding: 24px;
      background: var(--tv-color-pane-background-secondary);
      border: 2px solid var(--tv-color-border);
      border-radius: 12px;
      transition: all 0.3s ease;
      text-align: center;
    }
    
    .tv-plan-card:hover {
      border-color: var(--tv-color-info);
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    }
    
    .tv-plan-popular {
      border-color: var(--tv-color-success);
      background: linear-gradient(135deg, var(--tv-color-pane-background-secondary) 0%, rgba(8, 153, 129, 0.05) 100%);
    }
    
    .tv-plan-badge {
      position: absolute;
      top: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--tv-color-success);
      color: white;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
    }
    
    .tv-plan-name {
      font-size: 18px;
      font-weight: 600;
      color: var(--tv-color-text);
      margin: 0 0 12px 0;
    }
    
    .tv-plan-price {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 2px;
      margin-bottom: 8px;
    }
    
    .tv-price-currency {
      font-size: 16px;
      color: var(--tv-color-text-secondary);
    }
    
    .tv-price-amount {
      font-size: 32px;
      font-weight: 700;
      color: var(--tv-color-text);
    }
    
    .tv-price-period {
      font-size: 14px;
      color: var(--tv-color-text-secondary);
    }
    
    .tv-plan-savings {
      font-size: 12px;
      color: var(--tv-color-success);
      font-weight: 600;
      margin-bottom: 16px;
    }
    
    .tv-plan-features ul {
      list-style: none;
      padding: 0;
      margin: 0 0 20px 0;
    }
    
    .tv-plan-features li {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 0;
      font-size: 13px;
      color: var(--tv-color-text-secondary);
    }
    
    .tv-plan-features li i {
      color: var(--tv-color-success);
      flex-shrink: 0;
    }
    
    .tv-plan-button {
      width: 100%;
      padding: 10px 16px;
      font-weight: 600;
    }
    
    .tv-payment-section {
      border-top: 1px solid var(--tv-color-border);
      padding-top: 24px;
    }
    
    .tv-payment-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--tv-color-text);
      margin-bottom: 16px;
      text-align: center;
    }
    
    .tv-payment-methods {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      margin-bottom: 24px;
    }
    
    .tv-payment-method {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 16px;
      background: var(--tv-color-pane-background-secondary);
      border: 2px solid var(--tv-color-border);
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      color: var(--tv-color-text);
    }
    
    .tv-payment-method:hover {
      border-color: var(--tv-color-info);
      background: var(--tv-color-toolbar-button-background-hover);
    }
    
    .tv-payment-method.selected {
      border-color: var(--tv-color-success);
      background: rgba(8, 153, 129, 0.1);
    }
    
    .tv-payment-method span {
      font-size: 14px;
      font-weight: 600;
    }
    
    .tv-payment-method small {
      font-size: 11px;
      color: var(--tv-color-text-secondary);
    }
    
    .tv-payment-actions {
      display: flex;
      gap: 12px;
      justify-content: center;
    }
    
    .tv-payment-actions .tv-button {
      padding: 10px 24px;
      font-weight: 600;
    }
    
    /* Welcome Modal Styles */
    .tv-modal-welcome {
      max-width: 900px;
      width: 90vw;
      background: var(--tv-color-pane-background);
      border: 1px solid var(--tv-color-border);
      border-radius: 12px;
      padding: 0;
      overflow: hidden;
    }
    
    .tv-welcome-header {
      text-align: center;
      padding: 32px 32px 24px;
      background: linear-gradient(135deg, var(--tv-color-info) 0%, var(--tv-color-success) 100%);
      color: white;
    }
    
    .tv-welcome-header h2 {
      margin: 0 0 8px;
      font-size: 28px;
      font-weight: 700;
    }
    
    .tv-welcome-header p {
      margin: 0;
      opacity: 0.9;
      font-size: 16px;
    }
    
    .tv-plans-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
      padding: 32px;
    }
    
    .tv-plan-card {
      background: var(--tv-color-pane-background-secondary);
      border: 2px solid var(--tv-color-border);
      border-radius: 12px;
      padding: 24px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    
    .tv-plan-card:hover {
      transform: translateY(-4px);
      border-color: var(--tv-color-info);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }
    
    .tv-plan-free {
      border-color: var(--tv-color-text-secondary);
    }
    
    .tv-plan-pro {
      border-color: var(--tv-color-warning);
    }
    
    .tv-plan-popular::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--tv-color-info), var(--tv-color-success));
    }
    
    .tv-plan-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      background: var(--tv-color-warning);
      color: var(--tv-color-pane-background);
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
    }
    
    .tv-plan-header h3 {
      margin: 0 0 12px;
      font-size: 20px;
      color: var(--tv-color-text);
    }
    
    .tv-plan-price {
      font-size: 32px;
      font-weight: 700;
      color: var(--tv-color-text);
      margin-bottom: 8px;
    }
    
    .tv-plan-price span {
      font-size: 16px;
      color: var(--tv-color-text-secondary);
    }
    
    .tv-plan-save {
      color: var(--tv-color-success);
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 16px;
    }
    
    .tv-plan-features {
      margin: 20px 0;
      text-align: left;
    }
    
    .tv-feature {
      padding: 8px 0;
      color: var(--tv-color-text-secondary);
      font-size: 14px;
    }
    
    .tv-plan-btn {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .tv-btn-free {
      background: var(--tv-color-text-secondary);
      color: var(--tv-color-pane-background);
    }
    
    .tv-btn-free:hover {
      background: var(--tv-color-text);
    }
    
    .tv-btn-pro {
      background: linear-gradient(135deg, var(--tv-color-info), var(--tv-color-success));
      color: white;
    }
    
    .tv-btn-pro:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .tv-welcome-footer {
      text-align: center;
      padding: 24px;
      background: var(--tv-color-pane-background-secondary);
      color: var(--tv-color-text-secondary);
    }
    
    /* Credits Modal Styles */
    .tv-modal-credits {
      max-width: 600px;
      width: 90vw;
      background: var(--tv-color-pane-background);
      border: 1px solid var(--tv-color-border);
      border-radius: 12px;
      padding: 0;
      overflow: hidden;
    }
    
    .tv-credits-header {
      text-align: center;
      padding: 32px;
      background: linear-gradient(135deg, var(--tv-color-warning) 0%, var(--tv-color-danger) 100%);
      color: white;
    }
    
    .tv-credits-icon {
      font-size: 48px;
      margin-bottom: 16px;
    }
    
    .tv-credits-header h3 {
      margin: 0 0 8px;
      font-size: 24px;
      font-weight: 700;
    }
    
    .tv-credits-options {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
      padding: 24px;
    }
    
    .tv-credits-option {
      background: var(--tv-color-pane-background-secondary);
      border: 2px solid var(--tv-color-border);
      border-radius: 12px;
      padding: 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
    }
    
    .tv-credits-option:hover {
      transform: translateY(-2px);
      border-color: var(--tv-color-info);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    .tv-credits-recommended {
      border-color: var(--tv-color-success);
    }
    
    .tv-credits-badge {
      position: absolute;
      top: -8px;
      right: 8px;
      background: var(--tv-color-success);
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
    }
    
    .tv-credits-option h4 {
      margin: 0 0 12px;
      font-size: 16px;
      color: var(--tv-color-text);
    }
    
    .tv-credits-price {
      font-size: 24px;
      font-weight: 700;
      color: var(--tv-color-info);
      margin-bottom: 8px;
    }
    
    .tv-credits-amount {
      font-size: 14px;
      color: var(--tv-color-text-secondary);
      margin-bottom: 4px;
    }
    
    .tv-credits-time {
      font-size: 12px;
      color: var(--tv-color-text-tertiary);
    }
    
    .tv-credits-footer {
      padding: 24px;
      text-align: center;
      background: var(--tv-color-pane-background-secondary);
    }
    
    .tv-btn-secondary {
      background: var(--tv-color-text-secondary);
      color: var(--tv-color-pane-background);
      border: none;
      padding: 12px 24px;
      border-radius: 8px;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.3s ease;
    }
    
    .tv-btn-secondary:hover {
      background: var(--tv-color-text);
    }
    
    /* Credits Widget Styles */
    .tv-credits-widget {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background: var(--tv-color-pane-background);
      border: 1px solid var(--tv-color-border);
      border-radius: 12px;
      padding: 12px 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      min-width: 150px;
    }
    
    .tv-credits-content {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    
    .tv-credits-widget .tv-credits-icon {
      font-size: 20px;
      color: var(--tv-color-warning);
    }
    
    .tv-credits-info {
      text-align: center;
    }
    
    .tv-credits-count {
      font-size: 18px;
      font-weight: 700;
      color: var(--tv-color-text);
      line-height: 1;
    }
    
    .tv-credits-label {
      font-size: 12px;
      color: var(--tv-color-text-secondary);
      line-height: 1;
    }
    
    .tv-credits-widget .tv-credits-time {
      font-size: 14px;
      color: var(--tv-color-text-secondary);
      font-weight: 600;
    }
    
    /* Low credits warning */
    .tv-credits-widget.low-credits {
      border-color: var(--tv-color-warning);
      animation: pulse 2s infinite;
    }
    
    .tv-credits-widget.critical-credits {
      border-color: var(--tv-color-danger);
      animation: pulse 1s infinite;
    }
    
    @keyframes pulse {
      0% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
      50% { box-shadow: 0 4px 20px rgba(255, 193, 7, 0.4); }
      100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
    }
    
    /* Responsive design for new modals */
    @media (max-width: 768px) {
      .tv-modal-welcome {
        width: 95vw;
        margin: 20px;
      }
      
      .tv-plans-grid {
        grid-template-columns: 1fr;
        padding: 20px;
      }
      
      .tv-modal-credits {
        width: 95vw;
        margin: 20px;
      }
      
      .tv-credits-options {
        grid-template-columns: 1fr;
        padding: 20px;
      }
      
      .tv-credits-widget {
        right: 10px;
        top: 10px;
        min-width: 120px;
      }
    }
    
    /* Selected states */
    .tv-plan-card.selected {
      border-color: var(--tv-color-success);
      background: linear-gradient(135deg, var(--tv-color-pane-background-secondary) 0%, rgba(8, 153, 129, 0.1) 100%);
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(8, 153, 129, 0.2);
    }
    
    /* Modal animations */
    .modal-content {
      transition: all 0.2s ease;
      transform: scale(0.9);
      opacity: 0;
    }
    
    /* Responsive design for Pro modal */
    @media (max-width: 768px) {
      .tv-modal-pro {
        width: 95vw;
        margin: 20px;
      }
      
      .tv-features-grid {
        grid-template-columns: 1fr;
      }
      
      .tv-plans-grid {
        grid-template-columns: 1fr;
      }
      
      .tv-payment-methods {
        grid-template-columns: 1fr;
      }
    }
    
    .tv-price-flash {
      color: var(--tv-color-text);
    }
    
    .tv-latency {
      color: var(--tv-color-text-secondary);
    }
    
    .tv-layout {
      display: flex;
      flex: 1;
    }
    
    .tv-button-full {
      width: 100%;
    }
    
    .tv-button-full-mb {
      width: 100%;
      margin-bottom: 8px;
    }
    
    .tv-hidden {
      display: none;
    }
    
    .tv-market-info {
      display: flex;
      align-items: center;
      gap: 20px;
      font-size: 12px;
      color: var(--tv-color-text-secondary);
    }
    
    .tv-volume {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .tv-volume-bar {
      width: 30px;
      height: 6px;
      background: var(--tv-color-border);
      border-radius: 3px;
      overflow: hidden;
    }
    
    .tv-volume-fill {
      height: 100%;
      background: var(--tv-color-success);
      width: 0%;
      transition: width 0.3s ease;
    }
    
    .tv-chart-controls {
      position: absolute;
      top: 16px;
      right: 16px;
      display: flex;
      gap: 8px;
      z-index: 10;
    }
    
    .tv-chart-btn {
      background: var(--tv-color-pane-background-secondary);
      border: 1px solid var(--tv-color-border);
      color: var(--tv-color-text);
      padding: 8px 12px;
      border-radius: var(--tv-border-radius);
      font-size: 12px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    
    .tv-chart-btn:hover {
      background: #363a45;
      border-color: #434651;
    }
    
    .tv-chart-btn.active {
      background: #2962ff;
      border-color: #2962ff;
      color: white;
    }
    
    /* Chart Controls Specific Styles */
    .tv-chart-btn[data-control="auto-scale"].active {
      background: var(--tv-color-success);
      border-color: var(--tv-color-success);
    }
    
    .tv-chart-btn[data-control="log-scale"].active {
      background: var(--tv-color-warning);
      border-color: var(--tv-color-warning);
    }
    
    .tv-chart-btn[data-control="percent-scale"].active {
      background: var(--tv-color-info);
      border-color: var(--tv-color-info);
    }
    
    .tv-chart-btn[data-control="fullscreen"].active {
      background: #9c27b0;
      border-color: #9c27b0;
    }
    
    .tv-chart-btn[data-control="screenshot"] {
      position: relative;
    }
    
    .tv-chart-btn[data-control="screenshot"].active {
      background: var(--tv-color-success);
      border-color: var(--tv-color-success);
      animation: flash 0.3s ease;
    }
    
    @keyframes flash {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    
    /* Chart Controls Status Indicators */
    .tv-control-indicator {
      display: inline-block;
      margin: 0 2px;
      padding: 2px 4px;
      border-radius: 3px;
      background: var(--tv-color-success);
      color: white;
      font-size: 10px;
      font-weight: bold;
      opacity: 1;
      transition: all 0.3s ease;
    }
    
    .tv-control-indicator.tv-inactive {
      background: var(--tv-color-border);
      color: var(--tv-color-text-secondary);
      opacity: 0.5;
    }
    
    .tv-control-indicator[data-type="log"] {
      background: var(--tv-color-warning);
    }
    
    .tv-control-indicator[data-type="percent"] {
      background: var(--tv-color-info);
    }
    
    .tv-control-indicator[data-type="fullscreen"] {
      background: #9c27b0;
    }
    
    /* Fullscreen Mode Styles */
    .tv-main:fullscreen {
      background: var(--tv-color-background);
      padding: 0;
      margin: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .tv-main:-webkit-full-screen {
      background: var(--tv-color-background);
      padding: 0;
      margin: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .tv-main:-moz-full-screen {
      background: var(--tv-color-background);
      padding: 0;
      margin: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .tv-main:-ms-fullscreen {
      background: var(--tv-color-background);
      padding: 0;
      margin: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    /* Chart area in fullscreen */
    .tv-main:fullscreen .tv-chart-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    
    .tv-main:fullscreen .tv-chart {
      flex: 1;
      height: calc(100vh - 120px) !important;
    }
    
    .tv-main:fullscreen .tv-chart-toolbar {
      background: var(--tv-color-pane-background);
      border-bottom: 1px solid var(--tv-color-border);
      z-index: 1000;
    }
    
    .tv-main:fullscreen .tv-chart-controls {
      z-index: 1001;
    }
    
    .tv-main:fullscreen .tv-chart-footer {
      background: var(--tv-color-pane-background);
      border-top: 1px solid var(--tv-color-border);
      z-index: 1000;
    }
    
    /* Body in fullscreen mode */
    body.tv-fullscreen-mode {
      overflow: hidden;
      margin: 0;
      padding: 0;
    }
    
    /* Hide sidebar in fullscreen */
    body.tv-fullscreen-mode .tv-sidebar {
      display: none;
    }
    
    /* Fullscreen exit hint */
    .tv-fullscreen-hint {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 12px;
      z-index: 10000;
      opacity: 1;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
    
    .tv-fullscreen-hint.fade-out {
      opacity: 0;
    }
    
    .tv-indicator-buttons {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    
    .tv-balance {
      font-size: 18px;
      font-weight: bold;
      color: #26a69a;
    }
    
    .tv-trade-buttons {
      display: flex;
      gap: 8px;
    }
    
    .tv-trade-btn {
      flex: 1;
    }
    
    .tv-position-info {
      font-size: 14px;
      color: #d1d4dc;
    }

    /* Alerts Panel */
    .tv-alerts-list {
      max-height: 150px;
      overflow-y: auto;
      border: 1px solid #2a2e39;
      border-radius: 4px;
      background: #1e222d;
      padding: 8px;
    }
    
    .tv-alert-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 8px;
      background: #2a2e39;
      border-radius: 3px;
      margin-bottom: 4px;
      font-size: 12px;
    }
    
    .tv-alert-item:last-child {
      margin-bottom: 0;
    }
    
    .tv-alert-price {
      color: var(--tv-color-info);
      font-weight: 600;
    }
    
    .tv-alert-direction {
      color: var(--tv-color-text-secondary);
      font-size: 11px;
    }
    
    .tv-alert-remove {
      background: none;
      border: none;
      color: var(--tv-color-danger);
      cursor: pointer;
      padding: 2px;
      border-radius: var(--tv-border-radius-small);
      transition: background-color 0.2s;
    }
    
    .tv-alert-remove:hover {
      background: rgba(242, 54, 69, 0.1);
    }
    
    .tv-no-alerts {
      color: #787b86;
      font-size: 12px;
      text-align: center;
      padding: 12px;
    }
    
    .tv-input-group {
      display: flex;
      gap: 8px;
    }
    
    .tv-input-group .tv-input {
      flex: 1;
    }
    
    .tv-input-group .tv-button {
      min-width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Performance Metrics */
    .tv-performance-metrics {
      background: #2a2e39;
      border-radius: 4px;
      padding: 8px;
      font-size: 12px;
    }
    
    .tv-metric-row {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px;
    }
    
    .tv-metric-row:last-child {
      margin-bottom: 0;
    }
    
    .tv-metric-value {
      font-weight: 600;
      color: #d1d4dc;
    }
    
    /* Trend Indicator */
    .tv-trend-indicator {
      background: #2a2e39;
      border-radius: 4px;
      padding: 8px;
    }
    
    .tv-trend-text {
      font-size: 12px;
      font-weight: 600;
      display: block;
      margin-bottom: 6px;
    }
    
    .tv-trend-bar {
      height: 6px;
      background: #1e222d;
      border-radius: 3px;
      position: relative;
      overflow: hidden;
    }
    
    .tv-trend-fill {
      height: 100%;
      background: linear-gradient(90deg, #f23645 0%, #ffa726 50%, #089981 100%);
      border-radius: 3px;
      transition: width 0.3s ease;
      width: 50%;
    }
    
    /* RSI Indicator */
    .tv-rsi-indicator {
      background: #2a2e39;
      border-radius: 4px;
      padding: 8px;
    }
    
    .tv-rsi-text {
      font-size: 12px;
      font-weight: 600;
      display: block;
      margin-bottom: 6px;
    }
    
    .tv-rsi-bar {
      height: 6px;
      background: #1e222d;
      border-radius: 3px;
      position: relative;
      overflow: hidden;
    }
    
    .tv-rsi-fill {
      height: 100%;
      background: #2962FF;
      border-radius: 3px;
      transition: width 0.3s ease;
      width: 50%;
    }
    
    .tv-rsi-zones {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
    }
    
    .tv-rsi-oversold {
      position: absolute;
      left: 0;
      width: 30%;
      height: 100%;
      background: rgba(242, 54, 69, 0.2);
      border-radius: 3px 0 0 3px;
    }
    
    .tv-rsi-overbought {
      position: absolute;
      right: 0;
      width: 30%;
      height: 100%;
      background: rgba(242, 54, 69, 0.2);
      border-radius: 0 3px 3px 0;
    }
    
    /* Volatility Indicator */
    .tv-volatility-indicator {
      background: #2a2e39;
      border-radius: 4px;
      padding: 8px;
      text-align: center;
    }
    
    .tv-volatility-text {
      font-size: 12px;
      font-weight: 600;
      display: block;
      margin-bottom: 6px;
    }
    
    .tv-volatility-level {
      height: 4px;
      background: #089981;
      border-radius: 2px;
      margin: 0 auto;
      width: 60%;
      transition: all 0.3s ease;
    }
    
    .tv-volatility-level.low { width: 30%; background: #089981; }
    .tv-volatility-level.medium { width: 60%; background: #ffa726; }
    .tv-volatility-level.high { width: 90%; background: #f23645; }

    /* Advanced Statistics */
    .tv-stats-grid {
      display: grid;
      gap: 6px;
    }
    
    .tv-stat-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 8px;
      background: #2a2e39;
      border-radius: 3px;
      font-size: 11px;
    }
    
    .tv-stat-label {
      color: #787b86;
    }
    
    .tv-stat-value {
      font-weight: 600;
      color: #d1d4dc;
    }
    
    .tv-header {
      background: #1e222d;
      border-bottom: 1px solid #363a45;
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: between;
      gap: 16px;
    }
    
    .tv-sidebar {
      background: #1e222d;
      border-right: 1px solid #363a45;
      width: 280px;
      min-width: 200px;
      max-width: 500px;
      padding: 16px;
      overflow-y: auto;
      position: relative;
      transition: width 0.3s ease, margin-left 0.3s ease;
    }
    
    .tv-sidebar.collapsed {
      width: 0px;
      min-width: 0px;
      padding: 0;
      margin-left: -280px;
      overflow: hidden;
    }
    
    .tv-sidebar-resizer {
      position: absolute;
      top: 0;
      right: -3px;
      width: 6px;
      height: 100%;
      cursor: ew-resize;
      background: transparent;
      z-index: 10;
      transition: background-color 0.2s ease;
    }
    
    .tv-sidebar-resizer:hover {
      background-color: rgba(41, 98, 255, 0.3);
    }
    
    .tv-sidebar-resizer.dragging {
      background-color: #2962ff;
      box-shadow: 0 0 10px rgba(41, 98, 255, 0.5);
    }
    
    .tv-sidebar-resizer::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 2px;
      height: 20px;
      background: rgba(120, 123, 134, 0.5);
      border-radius: 1px;
      transition: all 0.2s ease;
    }
    
    .tv-sidebar-resizer:hover::before {
      background: rgba(41, 98, 255, 0.8);
      height: 30px;
    }
    
    .tv-sidebar-resizer.dragging::before {
      background: white;
      height: 40px;
    }
    
    .tv-sidebar-toggle {
      position: absolute;
      top: 50%;
      right: -15px;
      transform: translateY(-50%);
      width: 30px;
      height: 60px;
      background: #1e222d;
      border: 1px solid #363a45;
      border-radius: 0 8px 8px 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 11;
      transition: all 0.2s ease;
    }
    
    .tv-sidebar-toggle:hover {
      background: #2a2e39;
      border-color: #434651;
    }
    
    .tv-sidebar-toggle svg {
      color: #787b86;
      transition: transform 0.3s ease;
    }
    
    .tv-sidebar.collapsed .tv-sidebar-toggle {
      right: -30px;
    }
    
    .tv-sidebar.collapsed .tv-sidebar-toggle svg {
      transform: rotate(180deg);
    }
    
    /* Width indicator during resize */
    .tv-sidebar-width-indicator {
      position: absolute;
      top: 10px;
      right: 20px;
      background: rgba(41, 98, 255, 0.9);
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 600;
      z-index: 20;
      opacity: 0;
      transform: translateY(-10px);
      transition: all 0.2s ease;
      pointer-events: none;
    }
    
    .tv-sidebar-width-indicator.show {
      opacity: 1;
      transform: translateY(0);
    }
    
    /* Prevent text selection during resize */
    body.tv-resizing {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: ew-resize !important;
    }
    
    body.tv-resizing * {
      cursor: ew-resize !important;
    }
    
    /* Visual feedback for resizing */
    .tv-layout:has(.tv-sidebar-resizer.dragging) {
      position: relative;
    }
    
    .tv-layout:has(.tv-sidebar-resizer.dragging)::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(41, 98, 255, 0.05);
      pointer-events: none;
      z-index: 5;
    }
    
    .tv-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: var(--tv-color-platform-background);
    }
    
    .tv-chart-area {
      flex: 1;
      position: relative;
      background: var(--tv-color-chart-background);
      border: 1px solid var(--tv-color-border);
      border-radius: var(--tv-border-radius);
      overflow: hidden;
      transition: all 0.3s ease;
    }
    
    /* Chart area hover effect */
    .tv-chart-area:hover {
      box-shadow: 0 2px 8px var(--tv-color-shadow);
    }
    
    /* Chart area focus state */
    .tv-chart-area:focus-within {
      border-color: var(--tv-color-info);
      box-shadow: 0 0 0 2px var(--tv-color-info-alpha-20);
    }
    
    /* TradingView Panels - Modern Light Theme Design */
    .tv-panel {
      background: #ffffff;
      border: 1px solid #e1e8ed;
      border-radius: 8px;
      margin-bottom: 8px;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      overflow: hidden;
    }
    
    .tv-panel:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      border-color: #d1dce5;
    }
    
    .tv-panel.collapsed {
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
    }
    
    .tv-panel-header {
      background: #fafbfc;
      border-bottom: 1px solid #e1e8ed;
      padding: 12px 16px;
      font-size: 13px;
      font-weight: 600;
      color: #131722 !important;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      min-height: 44px;
    }
    
    .tv-panel-header:hover {
      background: #f0f3f6;
    }
    
    .tv-panel-header-content {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #131722 !important;
      font-weight: 600;
    }
    
    .tv-panel-toggle {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      color: #787b86;
      background: transparent;
      border: none;
      cursor: pointer;
    }
    
    .tv-panel-toggle:hover {
      background: #e1e8ed;
      color: #131722;
      transform: scale(1.05);
    }
    
    .tv-panel-toggle svg {
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      width: 16px;
      height: 16px;
    }
    
    .tv-panel.collapsed .tv-panel-toggle svg {
      transform: rotate(-90deg);
    }
    
    .tv-panel.collapsed .tv-panel-header {
      border-bottom: none;
      border-bottom-left-radius: 8px;
      border-bottom-right-radius: 8px;
    }
    
    .tv-panel-content {
      padding: 16px;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      background: #ffffff;
      color: #131722 !important;
    }
    
    .tv-panel.collapsed .tv-panel-content {
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
    }
    
    /* Panel animation when collapsing/expanding */
    .tv-panel-content {
      max-height: 2000px;
      visibility: visible;
      transform: translateY(0);
    }
    
    /* Enhanced panel variants */
    .tv-panel.tv-panel-primary {
      border-color: #1976d2;
      box-shadow: 0 1px 3px rgba(25, 118, 210, 0.1);
    }
    
    .tv-panel.tv-panel-primary .tv-panel-header {
      background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
      color: white !important;
      border-bottom-color: #1565c0;
    }
    
    .tv-panel.tv-panel-primary .tv-panel-header-content {
      color: white !important;
    }
    
    .tv-panel.tv-panel-primary .tv-panel-toggle {
      color: rgba(255, 255, 255, 0.8);
    }
    
    .tv-panel.tv-panel-primary .tv-panel-toggle:hover {
      color: white;
      background: rgba(255, 255, 255, 0.1);
    }
    
    /* Smooth transitions for all panel elements */
    .tv-panel * {
      transition: inherit;
    }
    
    /* Active panel state */
    .tv-panel:hover .tv-panel-header {
      background: #f0f3f6;
    }
    
    .tv-panel.collapsed:hover .tv-panel-header {
      background: #f0f3f6;
    }
    
    /* TradingView Panel Enhancements - Professional UI/UX */
    .tv-panel-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      padding-left: 12px;
    }
    
    .tv-panel-action {
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      background: transparent;
      border: none;
      color: #787b86;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .tv-panel-action:hover {
      background: #e1e8ed;
      color: #131722;
      transform: scale(1.05);
    }
    
    .tv-panel-action.active {
      background: #2962ff;
      color: white;
    }
    
    .tv-panel-badge {
      background: #2962ff;
      color: white;
      font-size: 10px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 10px;
      margin-left: 8px;
      min-width: 18px;
      text-align: center;
    }
    
    .tv-panel-badge.success {
      background: #00c851;
    }
    
    .tv-panel-badge.warning {
      background: #ffbb33;
      color: #000;
    }
    
    .tv-panel-badge.danger {
      background: #ff4444;
    }
    
    /* Panel status indicators */
    .tv-panel-status {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #9ca3af;
      margin-right: 8px;
      flex-shrink: 0;
    }
    
    .tv-panel-status.active {
      background: #00c851;
      animation: pulse-green 2s infinite;
    }
    
    .tv-panel-status.warning {
      background: #ffbb33;
      animation: pulse-amber 2s infinite;
    }
    
    .tv-panel-status.error {
      background: #ff4444;
      animation: pulse-red 2s infinite;
    }
    
    @keyframes pulse-green {
      0%, 100% { box-shadow: 0 0 0 0 rgba(0, 200, 81, 0.4); }
      50% { box-shadow: 0 0 0 4px rgba(0, 200, 81, 0); }
    }
    
    @keyframes pulse-amber {
      0%, 100% { box-shadow: 0 0 0 0 rgba(255, 187, 51, 0.4); }
      50% { box-shadow: 0 0 0 4px rgba(255, 187, 51, 0); }
    }
    
    @keyframes pulse-red {
      0%, 100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.4); }
      50% { box-shadow: 0 0 0 4px rgba(255, 68, 68, 0); }
    }
    
    /* Panel content enhancements */
    .tv-panel-content .tv-panel-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid #f0f3f6;
    }
    
    .tv-panel-content .tv-panel-row:last-child {
      border-bottom: none;
    }
    
    .tv-panel-label {
      font-size: 12px;
      font-weight: 500;
      color: #6b7280 !important;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    .tv-panel-value {
      font-size: 13px;
      font-weight: 600;
      color: #131722 !important;
    }
    
    .tv-panel-value.positive {
      color: #00c851 !important;
    }
    
    .tv-panel-value.negative {
      color: #ff4444 !important;
    }
    
    /* Panel loading state */
    .tv-panel.loading {
      opacity: 0.7;
      pointer-events: none;
    }
    
    .tv-panel.loading .tv-panel-header::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 50px;
      width: 16px;
      height: 16px;
      border: 2px solid #e1e8ed;
      border-top: 2px solid #2962ff;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: translateY(-50%) rotate(0deg); }
      100% { transform: translateY(-50%) rotate(360deg); }
    }
    
    /* Panel focus state for accessibility */
    .tv-panel:focus-within {
      outline: 2px solid #2962ff;
      outline-offset: 2px;
    }
    
    /* TradingView Buttons */
    .tv-button {
      background: transparent;
      border: 1px solid #363a45;
      color: #d1d4dc;
      padding: 6px 12px;
      border-radius: 4px;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.15s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    
    .tv-button:hover {
      background: #363a45;
      border-color: #434651;
    }
    
    .tv-button.active {
      background: #2962ff;
      border-color: #2962ff;
      color: white;
    }
    
    .tv-button.success {
      background: #26a69a;
      border-color: #26a69a;
      color: white;
    }
    
    .tv-button.danger {
      background: #ef5350;
      border-color: #ef5350;
      color: white;
    }
    
    /* TradingView Inputs */
    .tv-input {
      background: #2a2e39;
      border: 1px solid #363a45;
      color: #d1d4dc;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 13px;
      width: 100%;
    }
    
    .tv-input:focus {
      outline: none;
      border-color: #2962ff;
      box-shadow: 0 0 0 1px #2962ff;
    }
    
    .tv-select {
      background: #2a2e39;
      border: 1px solid #363a45;
      color: #d1d4dc;
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 13px;
    }
    
    /* TradingView Symbol & Price Display */
    .tv-symbol {
      font-size: 18px;
      font-weight: 600;
      color: #d1d4dc;
    }
    
    .tv-price {
      font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
      font-weight: 600;
      font-size: 28px;
    }
    
    .tv-price.up { color: #26a69a; }
    .tv-price.down { color: #ef5350; }
    .tv-price.neutral { color: #d1d4dc; }
    
    .tv-change {
      font-family: "SF Mono", Monaco, monospace;
      font-size: 14px;
      font-weight: 500;
    }
    
    .tv-change.up { color: #26a69a; }
    .tv-change.down { color: #ef5350; }
    
    /* TradingView Timeframe Selector */
    .tv-timeframes {
      display: flex;
      background: #1e222d;
      border: 1px solid #363a45;
      border-radius: 4px;
      overflow: hidden;
    }
    
    .tv-timeframes button {
      background: transparent;
      border: none;
      color: #787b86;
      padding: 8px 16px;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.15s ease;
      border-right: 1px solid #363a45;
    }
    
    .tv-timeframes button:last-child {
      border-right: none;
    }
    
    .tv-timeframes button:hover {
      background: #363a45;
      color: #d1d4dc;
    }
    
    .tv-timeframes button.active {
      background: #2962ff;
      color: white;
    }
    
    /* TradingView Status Indicators */
    .tv-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #1e222d;
      border: 1px solid #363a45;
      border-radius: 4px;
      padding: 6px 10px;
      font-size: 12px;
      color: #787b86;
    }
    
    .tv-status.online {
      border-color: #26a69a;
      color: #26a69a;
    }
    
    .tv-status.offline {
      border-color: #787b86;
      color: #787b86;
    }
    
    .tv-status-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
    }
    
    /* TradingView Chart Container */
    .tv-chart {
      background: #131722;
      border: 1px solid #363a45;
      border-radius: 0;
      width: 100%;
      height: 600px;
    }
    
    /* TradingView Streaming Bar */
    .tv-streaming-bar {
      background: #1e222d;
      border-top: 1px solid #363a45;
      border-bottom: 1px solid #363a45;
      padding: 8px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
    }
    
    .tv-streaming-indicator {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .tv-streaming-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #787b86;
      animation: tv-pulse 2s infinite;
    }
    
    .tv-streaming-dot.active {
      background: #26a69a;
    }
    
    @keyframes tv-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    
    /* TradingView Controls Grid */
    .tv-controls {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 8px;
      margin-bottom: 12px;
    }
    
    .tv-control-group {
      margin-bottom: 16px;
    }
    
    .tv-control-label {
      font-size: 12px;
      color: #787b86;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    /* TradingView Loading */
    .tv-loading {
      background: linear-gradient(90deg, #2a2e39 25%, #363a45 50%, #2a2e39 75%);
      background-size: 200% 100%;
      animation: tv-loading 1.5s infinite;
      border-radius: 4px;
    }
    
    @keyframes tv-loading {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* Enhanced Controls Styles */
    .tv-status-panel {
      background: #2a2e39;
      border: 1px solid #363a45;
      border-radius: 4px;
      padding: 8px;
    }

    /* Market Details Panel Styles */
    .tv-market-details {
      background: #1e222d;
      border-bottom: 1px solid #363a45;
      padding: 12px 16px;
      position: relative;
      max-height: 300px;
      overflow-y: auto;
      transition: max-height 0.3s ease, padding 0.3s ease;
    }
    
    .tv-market-details.collapsed {
      max-height: 0;
      padding: 0 16px;
      overflow: hidden;
    }
    
    .tv-details-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 16px;
      margin-bottom: 8px;
    }
    
    .tv-detail-section {
      background: #2a2e39;
      border: 1px solid #363a45;
      border-radius: 6px;
      padding: 12px;
    }
    
    .tv-section-title {
      font-size: 12px;
      font-weight: 600;
      color: #d1d4dc;
      margin: 0 0 8px 0;
      padding-bottom: 4px;
      border-bottom: 1px solid #363a45;
    }
    
    .tv-detail-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
      font-size: 11px;
    }
    
    .tv-detail-row:last-child {
      margin-bottom: 0;
    }
    
    .tv-detail-label {
      color: #787b86;
      font-weight: 500;
    }
    
    .tv-detail-value {
      color: #d1d4dc;
      font-weight: 600;
      text-align: right;
    }
    
    .tv-detail-value.price {
      font-family: 'Courier New', monospace;
    }
    
    .tv-detail-value.positive {
      color: #26a69a;
    }
    
    .tv-detail-value.negative {
      color: #ef5350;
    }
    
    .tv-details-toggle {
      position: relative;
      bottom: auto;
      left: auto;
      transform: none;
      background: #2a2e39;
      border: 1px solid #363a45;
      border-radius: 6px;
      width: 32px;
      height: 24px;
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: #d1d4dc;
      transition: all 0.2s ease;
      visibility: visible !important;
      opacity: 1 !important;
      z-index: 1000;
      margin-left: 12px;
      vertical-align: middle;
    }
    
    .tv-details-toggle:hover {
      background: #2962ff;
      border-color: #1848cc;
      color: #ffffff;
      transform: scale(1.05);
    }
    
    .tv-details-toggle.collapsed i {
      transform: rotate(180deg);
    }
    
    @media (max-width: 768px) {
      .tv-details-grid {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      
      .tv-detail-section {
        padding: 8px;
      }
      
      .tv-detail-row {
        font-size: 10px;
      }
    }

    /* Symbol Autocomplete Styles */
    .tv-symbol-autocomplete-container {
      position: relative;
    }
    
    .tv-autocomplete-dropdown {
      position: absolute !important;
      top: calc(100% + 2px) !important;
      left: 0 !important;
      right: 0 !important;
      background: var(--tv-color-pane-background) !important;
      border: 1px solid var(--tv-color-border) !important;
      border-radius: 6px;
      max-height: 300px;
      min-width: 100%;
      overflow-y: auto;
      z-index: 99999 !important;
      display: none !important;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }
    
    .tv-autocomplete-dropdown.show {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    .tv-autocomplete-loading {
      padding: 12px;
      text-align: center;
      color: #787b86;
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    
    .tv-autocomplete-empty {
      padding: 12px;
      text-align: center;
      color: #787b86;
      font-size: 12px;
      display: none;
    }
    
    .tv-autocomplete-results {
      padding: 4px 0;
    }
    
    .tv-autocomplete-item {
      padding: 8px 12px;
      cursor: pointer;
      border-bottom: 1px solid rgba(54, 58, 69, 0.3);
      transition: background-color 0.15s ease;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .tv-autocomplete-item:last-child {
      border-bottom: none;
    }
    
    .tv-autocomplete-item:hover,
    .tv-autocomplete-item.highlighted {
      background: #363a45;
    }
    
    .tv-autocomplete-symbol {
      font-weight: 600;
      color: #d1d4dc;
      font-size: 13px;
    }
    
    .tv-autocomplete-name {
      color: #787b86;
      font-size: 11px;
      margin-top: 2px;
      max-width: 220px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.3;
    }
    
    .tv-autocomplete-exchange {
      background: rgba(38, 166, 154, 0.2);
      color: #26a69a;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 10px;
      font-weight: 500;
      white-space: nowrap;
    }
    
    .tv-autocomplete-exchange[data-type="ETF"] {
      background: rgba(255, 193, 7, 0.2);
      color: #ffc107;
    }
    
    .tv-autocomplete-exchange[data-type="SEARCH"] {
      background: rgba(33, 150, 243, 0.2);
      color: #2196f3;
    }
    
    .tv-autocomplete-item-left {
      flex: 1;
      min-width: 0;
    }
    
    .tv-autocomplete-item-right {
      margin-left: 8px;
    }
    
    .tv-autocomplete-footer {
      padding: 8px 12px;
      background: rgba(54, 58, 69, 0.3);
      border-top: 1px solid #363a45;
      font-size: 10px;
      color: #787b86;
      text-align: center;
    }
    
    /* Animation for autocomplete */
    @keyframes autocomplete-slide-down {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .tv-autocomplete-dropdown.show {
      animation: autocomplete-slide-down 0.2s ease;
    }
    
    /* Focus state for input with autocomplete */
    .tv-symbol-autocomplete-container .tv-input:focus {
      border-radius: 6px 6px 0 0;
    }
    
    .tv-symbol-autocomplete-container .tv-input:focus + .tv-autocomplete-dropdown {
      border-top: 1px solid #2196f3;
    }
    
    .tv-status-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
    }
    
    .tv-status-item:last-child {
      margin-bottom: 0;
    }
    
    .tv-status-label {
      font-size: 11px;
      color: #787b86;
    }
    
    .tv-status-value {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 6px;
      border-radius: 3px;
    }
    
    .tv-status-value.running {
      background: rgba(38, 166, 154, 0.2);
      color: #26a69a;
    }
    
    .tv-status-value.paused {
      background: rgba(255, 193, 7, 0.2);
      color: #ffc107;
    }
    
    .tv-status-value.stopped {
      background: rgba(244, 67, 54, 0.2);
      color: #f44336;
    }
    
    .tv-performance-panel {
      background: #2a2e39;
      border: 1px solid #363a45;
      border-radius: 4px;
      padding: 8px;
    }
    
    .tv-perf-meter {
      margin-bottom: 8px;
    }
    
    .tv-perf-meter:last-child {
      margin-bottom: 0;
    }
    
    .tv-perf-label {
      font-size: 10px;
      color: #787b86;
      margin-bottom: 2px;
    }
    
    .tv-perf-bar {
      background: #363a45;
      height: 6px;
      border-radius: 3px;
      position: relative;
      overflow: hidden;
    }
    
    .tv-perf-fill {
      height: 100%;
      background: linear-gradient(90deg, #26a69a, #4caf50);
      border-radius: 3px;
      transition: width 0.3s ease;
    }
    
    .tv-perf-fill.high {
      background: linear-gradient(90deg, #ff9800, #f44336);
    }
    
    .tv-perf-value {
      font-size: 10px;
      color: #d1d4dc;
      margin-top: 2px;
      display: block;
    }
    
    /* Button variants */
    .tv-button.warning {
      background: rgba(255, 193, 7, 0.1);
      border-color: #ffc107;
      color: #ffc107;
    }
    
    .tv-button.warning:hover {
      background: rgba(255, 193, 7, 0.2);
      border-color: #ffcd38;
    }
    
    .tv-button.info {
      background: rgba(33, 150, 243, 0.1);
      border-color: #2196f3;
      color: #2196f3;
    }
    
    .tv-button.info:hover {
      background: rgba(33, 150, 243, 0.2);
      border-color: #42a5f5;
    }

    /* Advanced Technical Indicators Styles */
    .tv-indicator-panel {
      background: var(--tv-color-pane-background-secondary);
      border: 1px solid var(--tv-color-border);
      border-radius: var(--tv-border-radius);
      margin-bottom: 8px;
    }

    .tv-indicator-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      background: var(--tv-color-pane-background);
      border-bottom: 1px solid var(--tv-color-border);
      font-size: 12px;
      font-weight: 600;
      color: var(--tv-color-text);
    }

    .tv-indicator-controls {
      display: flex;
      gap: 4px;
    }

    .tv-indicator-btn {
      background: none;
      border: none;
      color: var(--tv-color-text-secondary);
      cursor: pointer;
      padding: 2px;
      border-radius: 2px;
      transition: all 0.2s;
    }

    .tv-indicator-btn:hover {
      background: var(--tv-color-toolbar-button-background-hover);
      color: var(--tv-color-text);
    }

    .tv-indicator-content {
      padding: 12px;
    }

    .tv-indicator-value {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .tv-indicator-description {
      font-size: 11px;
      color: var(--tv-color-text-secondary);
      margin-bottom: 8px;
    }

    /* MACD Indicator */
    .tv-macd-display {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .tv-macd-line {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
    }

    .tv-macd-macd { color: var(--tv-color-info); }
    .tv-macd-signal { color: var(--tv-color-warning); }
    .tv-macd-histogram { color: var(--tv-color-text-secondary); }

    /* Stochastic Indicator */
    .tv-stoch-display {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
    }

    .tv-stoch-k { color: var(--tv-color-info); }
    .tv-stoch-d { color: var(--tv-color-warning); }

    /* ATR Indicator */
    .tv-atr-display {
      text-align: center;
    }

    .tv-atr-value {
      font-size: 16px;
      font-weight: bold;
      color: var(--tv-color-text);
    }

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

    .tv-atr-change.positive { color: var(--tv-color-success); }
    .tv-atr-change.negative { color: var(--tv-color-danger); }

    /* Volume Profile */
    .tv-volume-profile {
      background: var(--tv-color-pane-background-secondary);
      border: 1px solid var(--tv-color-border);
      border-radius: var(--tv-border-radius);
      padding: 8px;
    }

    .tv-volume-bar-chart {
      display: flex;
      align-items: end;
      height: 40px;
      gap: 1px;
      margin: 8px 0;
    }

    .tv-volume-bar-item {
      flex: 1;
      background: var(--tv-color-success);
      min-height: 2px;
      border-radius: 1px;
      transition: all 0.2s;
    }

    .tv-volume-bar-item.down {
      background: var(--tv-color-danger);
    }

    /* Advanced Chart Controls */
    .tv-chart-toolbar {
      position: absolute;
      top: 16px;
      left: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      z-index: 20;
    }

    .tv-toolbar-group {
      display: flex;
      gap: 4px;
      background: var(--tv-color-pane-background);
      border: 1px solid var(--tv-color-border);
      border-radius: var(--tv-border-radius);
      padding: 4px;
    }

    .tv-tool-btn {
      background: none;
      border: none;
      color: var(--tv-color-text);
      padding: 6px 8px;
      border-radius: 3px;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .tv-tool-btn:hover {
      background: var(--tv-color-toolbar-button-background-hover);
    }

    .tv-tool-btn.active {
      background: var(--tv-color-toolbar-button-background-active);
      color: white;
      box-shadow: 0 0 8px rgba(41, 98, 255, 0.4);
      border: 1px solid var(--tv-color-info);
    }
    
    .tv-tool-btn.active i {
      color: white !important;
    }

    /* Chart Type Selector */
    .tv-chart-type-selector {
      display: flex;
      gap: 2px;
    }

    .tv-chart-type-btn {
      padding: 4px 6px;
      font-size: 10px;
      min-width: 32px;
      text-align: center;
    }

    /* Drawing Tools - Enhanced for Light Theme */
    .tv-drawing-tools {
      flex-direction: column;
      background: var(--tv-color-pane-background);
      border: 1px solid var(--tv-color-border);
      border-radius: 8px;
      padding: 12px;
      margin: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .tv-drawing-tool {
      justify-content: flex-start;
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 500;
      background: transparent;
      color: var(--tv-color-text) !important;
      border: 1px solid transparent;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      margin: 2px 0;
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .tv-drawing-tool:hover {
      background: var(--tv-color-toolbar-button-background-hover);
      border-color: var(--tv-color-border);
      transform: translateY(-1px);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .tv-drawing-tool.active,
    .tv-drawing-tool.selected {
      background: #2962ff !important;
      color: white !important;
      border-color: #1976d2;
      box-shadow: 0 2px 8px rgba(41, 98, 255, 0.3);
    }
    
    .tv-drawing-tool.active::after,
    .tv-drawing-tool.selected::after {
      content: '';
      position: absolute;
      right: 8px;
      width: 6px;
      height: 6px;
      background: #4caf50;
      border-radius: 50%;
      animation: pulse-green 2s infinite;
    }
    
    /* Drawing tool icons */
    .tv-drawing-tool .icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }
    
    .tv-drawing-tool.active .icon,
    .tv-drawing-tool.selected .icon {
      color: white;
    }
    
    /* Show overlay controls when any tool is active */
    .tv-drawing-tools:has(.tv-drawing-tool.active) ~ #drawing-overlay,
    .tv-drawing-tools:has(.tv-drawing-tool.selected) ~ #drawing-overlay {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    
    /* Enhanced tool states */
    .tv-drawing-tool[data-tool="line"].active ~ #drawing-overlay {
      cursor: crosshair;
    }
    
    .tv-drawing-tool[data-tool="rectangle"].active ~ #drawing-overlay {
      cursor: crosshair;
    }
    
    .tv-drawing-tool[data-tool="circle"].active ~ #drawing-overlay {
      cursor: crosshair;
    }
    
    .tv-drawing-tool[data-tool="text"].active ~ #drawing-overlay {
      cursor: text;
    }
    
    /* Drawing overlay - Only visible when tools are active */
    #drawing-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 10;
      background: transparent !important;
      opacity: 0;
      visibility: hidden;
      backdrop-filter: none;
      background-color: transparent !important;
      background-image: none !important;
      transition: opacity 0.2s ease, visibility 0.2s ease;
    }
    
    /* Show overlay when drawing tools are selected/active */
    #drawing-overlay.drawing-mode,
    #drawing-overlay.tool-active,
    #drawing-overlay.tool-selected,
    body.drawing-tool-active #drawing-overlay,
    body.has-drawing-tool #drawing-overlay,
    .chart-container.drawing-active #drawing-overlay {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      cursor: crosshair;
      background: transparent !important;
      background-color: transparent !important;
    }
    
    /* Specific tool states */
    #drawing-overlay.line-tool-active,
    #drawing-overlay.rectangle-tool-active,
    #drawing-overlay.circle-tool-active,
    #drawing-overlay.arrow-tool-active,
    #drawing-overlay.text-tool-active,
    #drawing-overlay.fibonacci-tool-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    
    /* Alternative selectors for different implementations */
    .drawing-tools-panel.active ~ #drawing-overlay,
    .tv-panel.drawing-tools.active ~ #drawing-overlay,
    [data-drawing-active="true"] #drawing-overlay {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }

    /* Real-time data indicators */
    .tv-realtime-indicator {
      position: absolute;
      top: 16px;
      right: 16px;
      background: var(--tv-color-pane-background);
      border: 1px solid var(--tv-color-border);
      border-radius: var(--tv-border-radius);
      padding: 8px 12px;
      font-size: 11px;
      z-index: 20;
    }

    .tv-ping-indicator {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 4px;
    }

    .tv-ping-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--tv-color-success);
      animation: ping 2s infinite;
    }

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

    .tv-ping-dot.warning {
      background: var(--tv-color-warning);
    }

    .tv-ping-dot.error {
      background: var(--tv-color-danger);
    }

    /* Enhanced Performance Metrics */
    .tv-performance-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      margin-top: 8px;
    }

    .tv-performance-card {
      background: var(--tv-color-pane-background);
      border: 1px solid var(--tv-color-border);
      border-radius: 4px;
      padding: 6px 8px;
      text-align: center;
    }

    .tv-performance-title {
      font-size: 9px;
      color: var(--tv-color-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .tv-performance-value {
      font-size: 12px;
      font-weight: 600;
      color: var(--tv-color-text);
    }

    .tv-performance-value.positive {
      color: var(--tv-color-success);
    }

    .tv-performance-value.negative {
      color: var(--tv-color-danger);
    }

    /* Market Heat Map */
    .tv-heatmap {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2px;
      margin: 8px 0;
    }

    .tv-heatmap-cell {
      aspect-ratio: 1;
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      font-weight: 600;
      color: white;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }

    .tv-heatmap-cell.positive {
      background: var(--tv-color-success);
    }

    .tv-heatmap-cell.negative {
      background: var(--tv-color-danger);
    }

    .tv-heatmap-cell.neutral {
      background: var(--tv-color-text-secondary);
    }

    /* Economic Calendar Styles */
    .tv-events-list {
      background: var(--tv-color-pane-background-secondary);
      border: 1px solid var(--tv-color-border);
      border-radius: var(--tv-border-radius);
      max-height: 150px;
      overflow-y: auto;
    }

    .tv-event-item {
      display: flex;
      align-items: center;
      padding: 8px 12px;
      border-bottom: 1px solid var(--tv-color-border);
      font-size: 11px;
    }

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

    .tv-event-time {
      color: var(--tv-color-text-secondary);
      font-weight: 600;
      min-width: 35px;
      font-size: 10px;
    }

    .tv-event-content {
      flex: 1;
      margin-left: 8px;
    }

    .tv-event-title {
      color: var(--tv-color-text);
      font-weight: 500;
      margin-bottom: 2px;
    }

    .tv-event-impact {
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: inline-block;
      margin-right: 6px;
    }

    .tv-event-impact.high {
      color: var(--tv-color-danger);
    }

    .tv-event-impact.medium {
      color: var(--tv-color-warning);
    }

    .tv-event-impact.low {
      color: var(--tv-color-text-secondary);
    }

    .tv-event-currency {
      font-size: 8px;
      color: var(--tv-color-text-secondary);
      background: var(--tv-color-pane-background);
      padding: 1px 4px;
      border-radius: 2px;
      display: inline-block;
    }

    .tv-calendar-filters {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    /* Advanced Chart Toolbar Styles */
    .tv-chart-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: var(--tv-color-pane-background);
      border-top: 1px solid var(--tv-color-border);
      padding: 6px 12px;
      font-size: 10px;
      color: var(--tv-color-text-secondary);
    }

    .tv-chart-footer-left,
    .tv-chart-footer-right {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* Enhanced Checkbox Styles */
    .tv-checkbox-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: var(--tv-color-text);
      cursor: pointer;
      padding: 2px 0;
      transition: color 0.2s;
    }

    .tv-checkbox-label:hover {
      color: var(--tv-color-text);
    }

    .tv-checkbox {
      width: 12px;
      height: 12px;
      border: 1px solid var(--tv-color-border);
      border-radius: 2px;
      background: var(--tv-color-pane-background);
      cursor: pointer;
      position: relative;
      transition: all 0.2s;
    }

    .tv-checkbox:checked {
      background: var(--tv-color-toolbar-button-background-active);
      border-color: var(--tv-color-toolbar-button-background-active);
    }

    .tv-checkbox:checked::after {
      content: '✓';
      position: absolute;
      top: -2px;
      left: 1px;
      color: white;
      font-size: 10px;
      font-weight: bold;
    }

    /* Enhanced Slider Styles */
    .tv-slider {
      width: 100%;
      height: 4px;
      border-radius: 2px;
      background: var(--tv-color-border);
      outline: none;
      cursor: pointer;
      -webkit-appearance: none;
      appearance: none;
    }

    .tv-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--tv-color-toolbar-button-background-active);
      cursor: pointer;
      border: 2px solid white;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    .tv-slider::-moz-range-thumb {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--tv-color-toolbar-button-background-active);
      cursor: pointer;
      border: 2px solid white;
      box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    .tv-slider-value {
      font-size: 10px;
      color: var(--tv-color-text-secondary);
      margin-left: 6px;
    }

    /* Pattern Recognition Styles */
    .tv-pattern-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 8px;
      background: var(--tv-color-pane-background);
      border-radius: 3px;
      margin-bottom: 4px;
      font-size: 11px;
      border-left: 3px solid var(--tv-color-info);
    }

    .tv-pattern-item:last-child {
      margin-bottom: 0;
    }

    .tv-pattern-name {
      color: var(--tv-color-text);
      font-weight: 500;
    }

    .tv-pattern-confidence {
      color: var(--tv-color-info);
      font-weight: 600;
      font-size: 10px;
    }

    .tv-pattern-settings {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .tv-pattern-sensitivity {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
    }

    /* Backtest Results Styles */
    .tv-backtest-settings {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 12px;
    }

    .tv-backtest-controls {
      display: flex;
      gap: 6px;
      margin-top: 8px;
    }

    .tv-backtest-results {
      background: var(--tv-color-pane-background-secondary);
      border: 1px solid var(--tv-color-border);
      border-radius: var(--tv-border-radius);
      padding: 8px;
    }

    .tv-result-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0;
      border-bottom: 1px solid var(--tv-color-border);
      font-size: 11px;
    }

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

    .tv-result-label {
      color: var(--tv-color-text-secondary);
    }

    .tv-result-value {
      font-weight: 600;
      color: var(--tv-color-text);
    }

    /* Enhanced Input Styles */
    .tv-input-group {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-bottom: 6px;
    }

    .tv-input-group .tv-control-label {
      min-width: 80px;
      font-size: 10px;
      margin-bottom: 0;
    }

    /* Responsive improvements */
    @media (max-width: 1200px) {
      .tv-sidebar {
        width: 260px;
      }
      
      .tv-chart-toolbar {
        left: 8px;
        top: 8px;
      }
      
      .tv-toolbar-group {
        padding: 2px;
      }
    }

    @media (max-width: 900px) {
      .tv-layout {
        flex-direction: column;
      }
      
      .tv-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--tv-color-border);
        max-height: 40vh;
        overflow-y: auto;
      }
      
      .tv-chart-toolbar {
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 8px;
      }
      
      .tv-toolbar-group {
        flex-wrap: wrap;
      }
      
      .tv-realtime-indicator {
        position: relative;
        top: 0;
        right: 0;
        margin-bottom: 8px;
      }
    }

    /* Animation enhancements */
    .tv-panel {
      animation: slideInFromLeft 0.3s ease-out;
    }

    @keyframes slideInFromLeft {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .tv-tool-btn:active {
      transform: scale(0.95);
    }

    /* Disabled state for toolbar buttons */
    .tv-tool-btn.tv-disabled,
    .tv-tool-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      background: rgba(43, 48, 60, 0.3) !important;
      border-color: rgba(62, 68, 81, 0.3) !important;
      color: rgba(209, 212, 220, 0.4) !important;
      transform: none !important;
      pointer-events: none;
    }

    .tv-tool-btn.tv-disabled:hover,
    .tv-tool-btn:disabled:hover {
      background: rgba(43, 48, 60, 0.3) !important;
      border-color: rgba(62, 68, 81, 0.3) !important;
      box-shadow: none !important;
    }

    /* Undo/Redo specific styling */
    #undoTool.tv-disabled,
    #redoTool.tv-disabled {
      filter: grayscale(1);
    }

    .tv-indicator-panel {
      animation: fadeInUp 0.3s ease-out;
    }

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

    /* Tooltip styles */
    .tv-tooltip {
      position: absolute;
      background: var(--tv-color-pane-background);
      border: 1px solid var(--tv-color-border);
      border-radius: var(--tv-border-radius);
      padding: 6px 8px;
      font-size: 11px;
      color: var(--tv-color-text);
      z-index: 1000;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.2s;
      box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }

    .tv-tooltip.show {
      opacity: 1;
    }
    
    /* TradingView Scrollbars */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    
    ::-webkit-scrollbar-track {
      background: #1e222d;
    }
    
    ::-webkit-scrollbar-thumb {
      background: #363a45;
      border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: #434651;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
      .tv-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #363a45;
      }
      
      .tv-controls {
        grid-template-columns: 1fr 1fr;
      }
      
      .tv-timeframes {
        overflow-x: auto;
      }
    }
  

    /* Improved animations */
    .fade-in {
      animation: fadeIn 0.5s ease-in-out;
    }

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

    .pulse-glow {
      animation: pulseGlow 2s infinite;
    }

    @keyframes pulseGlow {
      0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); }
      50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.6); }
    }

    /* Enhanced status indicators */
    .status-online {
      position: relative;
    }
    .status-online::before {
      content: '';
      position: absolute;
      top: -2px;
      right: -2px;
      width: 8px;
      height: 8px;
      background: #10b981;
      border-radius: 50%;
      animation: pulse 2s infinite;
    }

    /* Improved modal */
    .modal-backdrop {
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      background: rgba(0, 0, 0, 0.6);
    }

    /* Enhanced toast notifications */
    .toast-enter {
      animation: toastEnter 0.3s ease-out;
    }

    /* Market Depth / Order Book Styles */
    .tv-orderbook {
      background: var(--tv-color-pane-background-secondary);
      border: 1px solid var(--tv-color-border);
      border-radius: var(--tv-border-radius);
      overflow: hidden;
    }

    .tv-orderbook-header {
      display: flex;
      justify-content: space-between;
      padding: 8px 12px;
      background: var(--tv-color-pane-background);
      border-bottom: 1px solid var(--tv-color-border);
      font-size: 11px;
      font-weight: 600;
      color: var(--tv-color-text-secondary);
    }

    .tv-orderbook-asks,
    .tv-orderbook-bids {
      max-height: 120px;
      overflow-y: auto;
    }

    .tv-orderbook-row {
      display: flex;
      justify-content: space-between;
      padding: 4px 12px;
      font-size: 11px;
      font-family: var(--tv-font-family);
      border-bottom: 1px solid var(--tv-color-border);
      position: relative;
    }

    .tv-orderbook-row:hover {
      background: var(--tv-color-toolbar-button-background-hover);
    }

    .tv-orderbook-asks .tv-orderbook-row {
      background: linear-gradient(90deg, transparent 70%, rgba(242, 54, 69, 0.1) 100%);
      color: var(--tv-color-danger);
    }

    .tv-orderbook-bids .tv-orderbook-row {
      background: linear-gradient(90deg, transparent 70%, rgba(8, 153, 129, 0.1) 100%);
      color: var(--tv-color-success);
    }

    .tv-orderbook-spread {
      display: flex;
      justify-content: space-between;
      padding: 8px 12px;
      background: var(--tv-color-pane-background);
      border-top: 1px solid var(--tv-color-border);
      border-bottom: 1px solid var(--tv-color-border);
      font-size: 11px;
      font-weight: 600;
    }

    .tv-spread-label {
      color: var(--tv-color-text-secondary);
    }

    .tv-spread-value {
      color: var(--tv-color-warning);
    }

    .tv-depth-settings {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    /* Pattern Analysis Styles */
    .tv-patterns-list {
      background: var(--tv-color-pane-background-secondary);
      border: 1px solid var(--tv-color-border);
      border-radius: var(--tv-border-radius);
      max-height: 150px;
      overflow-y: auto;
    }

    .tv-pattern-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 12px;
      border-bottom: 1px solid var(--tv-color-border);
      font-size: 12px;
    }

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

    .tv-pattern-item:hover {
      background: var(--tv-color-toolbar-button-background-hover);
    }

    .tv-pattern-name {
      color: var(--tv-color-text);
      font-weight: 500;
    }

    .tv-pattern-confidence {
      color: var(--tv-color-success);
      font-weight: 600;
      font-size: 11px;
    }

    .tv-pattern-settings {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .tv-checkbox-label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--tv-color-text);
      cursor: pointer;
    }

    .tv-checkbox {
      width: 16px;
      height: 16px;
      accent-color: var(--tv-color-toolbar-button-background-active);
    }

    .tv-pattern-sensitivity {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }

    .tv-slider {
      flex: 1;
      height: 4px;
      background: var(--tv-color-border);
      border-radius: 2px;
      outline: none;
      accent-color: var(--tv-color-toolbar-button-background-active);
    }

    .tv-slider-value {
      color: var(--tv-color-text);
      font-weight: 600;
      font-size: 11px;
      min-width: 20px;
      text-align: center;
    }

    /* Advanced Indicators Styles */
    .tv-indicators-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .tv-indicators-list .tv-checkbox-label {
      padding: 4px 8px;
      border-radius: var(--tv-border-radius-small);
      transition: background-color 0.2s;
    }

    .tv-indicators-list .tv-checkbox-label:hover {
      background: var(--tv-color-toolbar-button-background-hover);
    }

    /* Control Groups */
    .tv-control-group {
      margin-bottom: 16px;
    }

    .tv-control-group:last-child {
      margin-bottom: 0;
    }

    .tv-control-label {
      display: block;
      color: var(--tv-color-text-secondary);
      font-size: 11px;
      font-weight: 600;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* Backtesting Styles */
    .tv-backtest-settings {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .tv-input-group {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .tv-input-group .tv-control-label {
      margin-bottom: 4px;
      font-size: 10px;
    }

    .tv-backtest-controls {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
    }

    .tv-backtest-results {
      background: var(--tv-color-pane-background-secondary);
      border: 1px solid var(--tv-color-border);
      border-radius: var(--tv-border-radius);
      padding: 12px;
    }

    .tv-result-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 4px 0;
      border-bottom: 1px solid var(--tv-color-border);
      font-size: 11px;
    }

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

    .tv-result-label {
      color: var(--tv-color-text-secondary);
    }

    .tv-result-value {
      color: var(--tv-color-text);
      font-weight: 600;
    }

    .tv-result-value.positive {
      color: var(--tv-color-success);
    }

    .tv-result-value.negative {
      color: var(--tv-color-danger);
    }

    /* News & Events Styles */
    .tv-news-list {
      background: var(--tv-color-pane-background-secondary);
      border: 1px solid var(--tv-color-border);
      border-radius: var(--tv-border-radius);
      max-height: 200px;
      overflow-y: auto;
    }

    .tv-news-item {
      display: flex;
      gap: 8px;
      padding: 8px 12px;
      border-bottom: 1px solid var(--tv-color-border);
      font-size: 11px;
    }

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

    .tv-news-item:hover {
      background: var(--tv-color-toolbar-button-background-hover);
    }

    .tv-news-time {
      color: var(--tv-color-text-secondary);
      font-weight: 600;
      min-width: 35px;
      font-size: 10px;
    }

    .tv-news-content {
      flex: 1;
    }

    .tv-news-title {
      color: var(--tv-color-text);
      font-weight: 500;
      margin-bottom: 2px;
    }

    .tv-news-impact {
      font-size: 9px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .tv-news-impact.high {
      color: var(--tv-color-danger);
    }

    .tv-news-impact.medium {
      color: var(--tv-color-warning);
    }

    .tv-news-impact.low {
      color: var(--tv-color-text-secondary);
    }

    .tv-news-settings {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .tv-news-filter {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 8px;
    }

    .tv-news-filter .tv-control-label {
      margin-bottom: 4px;
      font-size: 10px;
    }

    /* Responsive Design Improvements */
    @media (max-width: 768px) {
      .chart-container { 
        height: 400px; 
        min-height: 350px; 
      }
      
      .chip {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
      }
      
      .info-card {
        padding: 1rem;
      }
      
      .glass {
        padding: 1rem;
      }
    }
    
    @media (max-width: 640px) {
      .chart-container { 
        height: 350px; 
        min-height: 300px; 
      }
      
      .grid.md\\:grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 1rem;
      }
      
      .flex.flex-wrap {
        justify-content: center;
      }
    }

    @keyframes toastEnter {
      from { 
        opacity: 0; 
        transform: translateX(100%) scale(0.8); 
      }
      to { 
        opacity: 1; 
        transform: translateX(0) scale(1); 
      }
    }
    
    /* Custom classes to replace inline styles */
    .tv-minus-icon { transform: rotate(0deg); }
    .tv-minus-rotated { transform: rotate(90deg); }
    .tv-chart-info { font-size: 10px; color: var(--tv-color-text-secondary); }
    .tv-toolbar-column { flex-direction: column; }
    .tv-chart-footer-fixed { 
      position: absolute; 
      bottom: 0; 
      left: 0; 
      right: 0; 
      background: var(--tv-color-pane-background); 
      border-top: 1px solid var(--tv-color-border); 
      padding: 8px 16px; 
      font-size: 11px; 
      color: var(--tv-color-text-secondary); 
      display: flex; 
      justify-content: space-between;
      z-index: 100; 
    }
    .tv-footer-spacing { margin-left: 16px; }

    /* Modal Styles */
    body.modal-open {
      overflow: hidden;
      position: fixed;
      width: 100%;
    }

    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      -webkit-backdrop-filter: blur(8px) saturate(180%);
      backdrop-filter: blur(8px) saturate(180%);
      animation: modalOverlayFadeIn 0.3s ease-out;
    }

    .modal::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(circle at 20% 80%, rgba(41, 98, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(8, 153, 129, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 167, 38, 0.05) 0%, transparent 50%);
      pointer-events: none;
    }

    @keyframes modalOverlayFadeIn {
      from {
        opacity: 0;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
      }
      to {
        opacity: 1;
        -webkit-backdrop-filter: blur(8px) saturate(180%);
        backdrop-filter: blur(8px) saturate(180%);
      }
    }

    .modal-content {
      background: var(--tv-color-pane-background);
      border: 1px solid var(--tv-color-border);
      border-radius: 16px;
      max-width: 90vw;
      max-height: 90vh;
      width: 600px;
      transform: scale(0.9) translateY(20px);
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      overflow: hidden;
      box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        0 10px 20px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.05);
      position: relative;
    }

    .modal-content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, 
        transparent, 
        rgba(41, 98, 255, 0.5), 
        rgba(8, 153, 129, 0.5), 
        transparent);
      z-index: 1;
    }

    .modal-content.modal-show {
      transform: scale(1) translateY(0);
      opacity: 1;
    }

    .modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24px;
      border-bottom: 1px solid var(--tv-color-border);
      background: var(--tv-color-pane-background-secondary);
    }

    .tv-modal-title {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 20px;
      font-weight: 600;
      color: var(--tv-color-text);
      margin: 0;
    }

    .modal-close {
      padding: 8px;
      border-radius: 6px;
      transition: all 0.2s ease;
    }

    .modal-close:hover {
      background: var(--tv-color-toolbar-button-background-hover);
    }

    .modal-body {
      padding: 24px;
      max-height: 70vh;
      overflow-y: auto;
    }

    /* Guest Plans Modal Specific Styles */
    #guestPlansModal {
      background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.8), 
        rgba(13, 17, 28, 0.9), 
        rgba(0, 0, 0, 0.8));
    }

    #guestPlansModal::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: 
        radial-gradient(circle at 25% 25%, rgba(41, 98, 255, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(8, 153, 129, 0.15) 0%, transparent 50%);
      animation: overlayPulse 4s ease-in-out infinite alternate;
      pointer-events: none;
    }

    @keyframes overlayPulse {
      0% {
        opacity: 0.3;
        transform: scale(1);
      }
      100% {
        opacity: 0.6;
        transform: scale(1.1);
      }
    }

    .tv-guest-welcome {
      text-align: center;
      margin-bottom: 32px;
      padding: 24px;
      background: linear-gradient(135deg, 
        var(--tv-color-info-alpha-10), 
        var(--tv-color-success-alpha-10),
        var(--tv-color-info-alpha-10));
      border-radius: 12px;
      border: 1px solid var(--tv-color-border);
      position: relative;
      overflow: hidden;
    }

    .tv-guest-welcome::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(41, 98, 255, 0.05) 50%, 
        transparent 70%);
      animation: welcomeShine 3s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes welcomeShine {
      0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
      }
      50% {
        transform: translateX(0%) translateY(0%) rotate(45deg);
      }
      100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
      }
    }

    .tv-welcome-title {
      font-size: 24px;
      font-weight: 700;
      color: var(--tv-color-text);
      margin: 0 0 12px 0;
    }

    .tv-welcome-text {
      font-size: 16px;
      color: var(--tv-color-text-secondary);
      margin: 0;
      line-height: 1.5;
    }

    .tv-current-plan {
      margin-bottom: 32px;
    }

    .tv-plan-section-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--tv-color-text);
      margin: 0 0 16px 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .tv-plan-card {
      background: var(--tv-color-pane-background-secondary);
      border: 1px solid var(--tv-color-border);
      border-radius: 12px;
      padding: 24px;
      transition: all 0.2s ease;
    }

    .tv-plan-free {
      border-color: var(--tv-color-text-tertiary);
    }

    .tv-plan-header {
      margin-bottom: 20px;
    }

    .tv-plan-name {
      font-size: 20px;
      font-weight: 600;
      color: var(--tv-color-text);
      margin: 0 0 8px 0;
    }

    .tv-plan-price {
      display: flex;
      align-items: baseline;
      gap: 4px;
    }

    .tv-price-amount {
      font-size: 32px;
      font-weight: 700;
      color: var(--tv-color-text);
    }

    .tv-price-period {
      font-size: 16px;
      color: var(--tv-color-text-secondary);
    }

    .tv-plan-features ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .tv-plan-features li {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 0;
      font-size: 14px;
      color: var(--tv-color-text-secondary);
    }

    .tv-plan-status {
      margin-top: 20px;
      text-align: center;
    }

    .tv-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .tv-status-active {
      background: var(--tv-color-success-alpha-20);
      color: var(--tv-color-success);
      border: 1px solid var(--tv-color-success-alpha-20);
    }

    .tv-plans-comparison {
      margin-bottom: 32px;
    }

    .tv-plans-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 24px;
      margin-top: 20px;
    }

    .tv-plan-card {
      background: var(--tv-color-pane-background-secondary);
      border: 2px solid var(--tv-color-border);
      border-radius: 16px;
      padding: 24px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .tv-plan-free {
      border-color: var(--tv-color-text-tertiary);
    }

    .tv-plan-pro {
      border-color: var(--tv-color-warning);
      box-shadow: 0 8px 32px rgba(255, 167, 38, 0.2);
    }

    .tv-plan-badge {
      position: absolute;
      top: -1px;
      right: 20px;
      padding: 8px 16px;
      border-radius: 0 0 12px 12px;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .tv-badge-free {
      background: var(--tv-color-text-tertiary);
      color: var(--tv-color-text);
    }

    .tv-badge-pro {
      background: linear-gradient(135deg, var(--tv-color-warning), #ffa726);
      color: white;
    }

    .tv-plan-description {
      font-size: 14px;
      color: var(--tv-color-text-secondary);
      margin: 8px 0 0 0;
      font-style: italic;
    }

    .tv-plan-savings {
      background: var(--tv-color-success-alpha-20);
      color: var(--tv-color-success);
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      margin-top: 12px;
      text-align: center;
      border: 1px solid var(--tv-color-success);
    }

    .tv-plan-features h5 {
      font-size: 14px;
      font-weight: 600;
      color: var(--tv-color-text);
      margin: 16px 0 8px 0;
    }

    .tv-plan-actions {
      margin-top: 24px;
    }

    .tv-plan-button {
      width: 100%;
      padding: 12px 20px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 12px;
      transition: all 0.3s ease;
    }

    .tv-plan-button:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .tv-auth-options-mini {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .tv-auth-btn-mini {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 10px 16px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
    }

    .tv-trial-info {
      display: block;
      text-align: center;
      font-size: 12px;
      color: var(--tv-color-text-secondary);
      font-style: italic;
    }

    .tv-additional-benefits {
      background: var(--tv-color-pane-background);
      border: 1px solid var(--tv-color-border);
      border-radius: 12px;
      padding: 20px;
      margin-top: 24px;
    }

    .tv-benefits-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 16px;
      margin-top: 16px;
    }

    .tv-benefit-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px;
      background: var(--tv-color-pane-background-secondary);
      border-radius: 8px;
      font-size: 14px;
      color: var(--tv-color-text);
      transition: all 0.2s ease;
    }

    .tv-benefit-item:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    /* Platform Block Overlay */
    .platform-block-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, 
        rgba(0, 0, 0, 0.9), 
        rgba(13, 17, 28, 0.95), 
        rgba(0, 0, 0, 0.9));
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      animation: blockOverlayFadeIn 0.5s ease-out;
    }

    .block-overlay-content {
      background: var(--tv-color-pane-background);
      border: 2px solid var(--tv-color-danger);
      border-radius: 20px;
      padding: 40px;
      text-align: center;
      max-width: 400px;
      width: 90%;
      box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(242, 54, 69, 0.3);
      animation: blockContentBounce 0.6s ease-out;
    }

    .block-overlay-icon {
      margin-bottom: 20px;
      color: var(--tv-color-danger);
      animation: lockPulse 2s ease-in-out infinite;
    }

    .block-overlay-title {
      font-size: 24px;
      font-weight: 700;
      color: var(--tv-color-text);
      margin: 0 0 16px 0;
    }

    .block-overlay-message {
      font-size: 16px;
      color: var(--tv-color-text-secondary);
      margin: 0 0 24px 0;
      line-height: 1.5;
    }

    .block-overlay-actions {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .block-overlay-actions .tv-button {
      padding: 12px 20px;
      border-radius: 8px;
      font-weight: 600;
      transition: all 0.3s ease;
    }

    .block-overlay-actions .tv-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }

    @keyframes blockOverlayFadeIn {
      from {
        opacity: 0;
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
      }
      to {
        opacity: 1;
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
      }
    }

    @keyframes blockContentBounce {
      0% {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
      }
      60% {
        opacity: 1;
        transform: scale(1.05) translateY(-5px);
      }
      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

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

    .tv-auth-options {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 20px;
    }

    .tv-auth-btn {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 20px;
      text-align: left;
      border-radius: 12px;
      transition: all 0.2s ease;
      min-height: 60px;
    }

    .tv-btn-content {
      flex: 1;
    }

    .tv-btn-title {
      display: block;
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .tv-btn-subtitle {
      font-size: 12px;
      opacity: 0.8;
    }

    .tv-pro-preview {
      margin-bottom: 32px;
    }

    .tv-features-title {
      font-size: 18px;
      font-weight: 600;
      color: var(--tv-color-text);
      margin: 0 0 20px 0;
      text-align: center;
    }

    .tv-features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 16px;
    }

    .tv-feature-item {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: var(--tv-color-pane-background-secondary);
      border: 1px solid var(--tv-color-border);
      border-radius: 8px;
      transition: all 0.2s ease;
    }

    .tv-feature-item:hover {
      border-color: var(--tv-color-info);
      transform: translateY(-2px);
    }

    .tv-feature-icon {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--tv-color-pane-background);
      border-radius: 8px;
    }

    .tv-feature-content h4 {
      font-size: 14px;
      font-weight: 600;
      color: var(--tv-color-text);
      margin: 0 0 4px 0;
    }

    .tv-feature-content p {
      font-size: 12px;
      color: var(--tv-color-text-secondary);
      margin: 0;
      line-height: 1.4;
    }

    .tv-cta-section {
      text-align: center;
      padding: 24px;
      background: linear-gradient(135deg, 
        var(--tv-color-warning-alpha-10), 
        rgba(255, 167, 38, 0.05),
        var(--tv-color-warning-alpha-10));
      border-radius: 12px;
      border: 1px solid var(--tv-color-warning);
      position: relative;
      overflow: hidden;
    }

    .tv-cta-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 167, 38, 0.2), 
        transparent);
      animation: ctaGlow 2s ease-in-out infinite;
    }

    @keyframes ctaGlow {
      0% {
        left: -100%;
      }
      50% {
        left: 100%;
      }
      100% {
        left: 100%;
      }
    }

    .tv-cta-text {
      font-size: 14px;
      color: var(--tv-color-text);
      margin: 0 0 16px 0;
      position: relative;
      z-index: 2;
    }

    .tv-cta-button {
      font-size: 16px;
      font-weight: 600;
      padding: 12px 24px;
      border-radius: 8px;
      position: relative;
      z-index: 2;
      transition: all 0.3s ease;
    }

    .tv-cta-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(255, 167, 38, 0.3);
    }

    /* Floating Particles Effect */
    .modal::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: 
        radial-gradient(2px 2px at 20px 30px, rgba(41, 98, 255, 0.3), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(8, 153, 129, 0.3), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(255, 167, 38, 0.4), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(41, 98, 255, 0.3), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(8, 153, 129, 0.3), transparent);
      background-repeat: repeat;
      background-size: 200px 100px;
      animation: floatingParticles 20s linear infinite;
      pointer-events: none;
      opacity: 0.6;
    }

    @keyframes floatingParticles {
      0% {
        transform: translateY(0px) rotate(0deg);
      }
      100% {
        transform: translateY(-100px) rotate(360deg);
      }
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .modal-content {
        width: 95vw;
        margin: 20px;
        border-radius: 12px;
      }
      
      .tv-plans-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      
      .tv-plan-card {
        padding: 20px;
      }
      
      .tv-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
      
      .tv-features-grid {
        grid-template-columns: 1fr;
      }
      
      .tv-auth-options {
        gap: 12px;
      }
      
      .tv-auth-btn {
        padding: 12px 16px;
        min-height: 50px;
      }

      .modal::after {
        background-size: 100px 50px;
      }
      
      .tv-plan-badge {
        right: 16px;
        font-size: 11px;
        padding: 6px 12px;
      }
      
      .tv-benefit-item {
        font-size: 13px;
        padding: 10px;
      }
    }

    @media (max-width: 480px) {
      .tv-benefits-grid {
        grid-template-columns: 1fr;
      }
      
      .tv-welcome-title {
        font-size: 20px;
      }
      
      .tv-plan-price .tv-price-amount {
        font-size: 28px;
      }
    }

    /* Light Theme Component Improvements */
    html:not(.dark) {
      /* Enhanced button styles for light theme */
      .tv-button-primary {
        background: linear-gradient(135deg, var(--tv-color-info) 0%, #1e40af 100%);
        box-shadow: 0 2px 8px rgba(29, 78, 216, 0.25);
        border: 1px solid rgba(29, 78, 216, 0.2);
      }
      
      .tv-button-primary:hover {
        background: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
        box-shadow: 0 4px 16px rgba(29, 78, 216, 0.35);
        border-color: rgba(29, 78, 216, 0.4);
        transform: translateY(-1px);
      }
      
      .tv-button-ghost {
        background: rgba(29, 78, 216, 0.06);
        border: 1.5px solid rgba(29, 78, 216, 0.25);
        color: var(--tv-color-info);
      }
      
      .tv-button-ghost:hover {
        background: rgba(29, 78, 216, 0.12);
        border-color: rgba(29, 78, 216, 0.4);
        transform: translateY(-1px);
      }
      
      .tv-button-success {
        background: linear-gradient(135deg, var(--tv-color-success) 0%, #15803d 100%);
        box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25);
        border: 1px solid rgba(22, 163, 74, 0.2);
      }
      
      .tv-button-success:hover {
        background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
        box-shadow: 0 4px 16px rgba(22, 163, 74, 0.35);
        border-color: rgba(22, 163, 74, 0.4);
        transform: translateY(-1px);
      }
      
      .tv-button-warning {
        background: linear-gradient(135deg, var(--tv-color-warning) 0%, #ea580c 100%);
        box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25);
        border: 1px solid rgba(217, 119, 6, 0.2);
      }
      
      .tv-button-warning:hover {
        background: linear-gradient(135deg, #ea580c 0%, #d97706 100%);
        box-shadow: 0 4px 16px rgba(217, 119, 6, 0.35);
        border-color: rgba(217, 119, 6, 0.4);
        transform: translateY(-1px);
      }
      
      /* Enhanced modal styles for light theme */
      .tv-modal-pro {
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
        -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);
        border: 1.5px solid rgba(203, 213, 225, 0.6);
        box-shadow: 
          0 25px 50px -12px rgba(15, 23, 42, 0.15),
          0 10px 20px -5px rgba(15, 23, 42, 0.08);
      }
      
      .tv-modal-welcome,
      .tv-modal-credits {
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
        -webkit-backdrop-filter: blur(24px);
        backdrop-filter: blur(24px);
        border: 1.5px solid rgba(203, 213, 225, 0.6);
        box-shadow: 
          0 25px 50px -12px rgba(15, 23, 42, 0.15),
          0 10px 20px -5px rgba(15, 23, 42, 0.08);
      }
      
      /* Enhanced card styles */
      .tv-plan-card {
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
        border: 1.5px solid rgba(203, 213, 225, 0.7);
        box-shadow: 
          0 4px 6px -1px rgba(15, 23, 42, 0.1),
          0 2px 4px -1px rgba(15, 23, 42, 0.06);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
      }
      
      .tv-plan-card:hover {
        transform: translateY(-3px);
        box-shadow: 
          0 20px 25px -5px rgba(15, 23, 42, 0.12),
          0 10px 10px -5px rgba(15, 23, 42, 0.04);
        border-color: rgba(29, 78, 216, 0.4);
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(241, 245, 249, 0.95) 100%);
      }
      
      /* Enhanced input styles */
      .tv-input,
      input,
      select,
      textarea {
        background: rgba(255, 255, 255, 0.9);
        border: 1.5px solid rgba(203, 213, 225, 0.8);
        color: var(--tv-color-text);
        box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
      }
      
      .tv-input:focus,
      input:focus,
      select:focus,
      textarea:focus {
        border-color: var(--tv-color-info);
        box-shadow: 
          0 0 0 3px rgba(29, 78, 216, 0.12),
          0 1px 2px 0 rgba(15, 23, 42, 0.05);
        background: rgba(255, 255, 255, 0.98);
        outline: none;
      }
      
      /* Enhanced floating particles for light theme */
      .modal::after {
        background-image: 
          radial-gradient(2px 2px at 20px 30px, rgba(29, 78, 216, 0.12), transparent),
          radial-gradient(2px 2px at 40px 70px, rgba(22, 163, 74, 0.12), transparent),
          radial-gradient(1px 1px at 90px 40px, rgba(217, 119, 6, 0.15), transparent),
          radial-gradient(1px 1px at 130px 80px, rgba(29, 78, 216, 0.12), transparent),
          radial-gradient(2px 2px at 160px 30px, rgba(22, 163, 74, 0.12), transparent);
        opacity: 0.3;
      }
      
      /* Enhanced header and toolbar styles */
      .tv-header,
      .tv-toolbar {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border-bottom: 1.5px solid rgba(203, 213, 225, 0.7);
        box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.1);
      }
      
      /* Enhanced sidebar and panels */
      .tv-sidebar,
      .tv-panel {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 252, 0.97) 100%);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-right: 1.5px solid rgba(203, 213, 225, 0.6);
        box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.08);
      }
      
      /* Enhanced chart container */
      .tv-chart-container {
        background: var(--tv-color-chart-background);
        border: 1.5px solid rgba(203, 213, 225, 0.4);
        box-shadow: 
          0 1px 3px 0 rgba(15, 23, 42, 0.1),
          0 1px 2px 0 rgba(15, 23, 42, 0.06);
        border-radius: 8px;
      }
      
      /* Enhanced streaming bar */
      .tv-streaming-bar {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(241, 245, 249, 0.9) 100%);
        border-bottom: 1px solid rgba(203, 213, 225, 0.5);
        box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.06);
      }
      
      /* Enhanced panel styling */
      .tv-panel {
        border-radius: 8px;
        margin-bottom: 8px;
        border: 1px solid rgba(203, 213, 225, 0.5);
      }
      
      .tv-panel-header {
        background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(241, 245, 249, 0.6) 100%);
        border-bottom: 1px solid rgba(203, 213, 225, 0.3);
      }
      
      /* Enhanced dropdown and select styles */
      .tv-dropdown,
      .tv-select {
        background: rgba(255, 255, 255, 0.97);
        border: 1.5px solid rgba(203, 213, 225, 0.8);
        box-shadow: 
          0 10px 15px -3px rgba(15, 23, 42, 0.1),
          0 4px 6px -2px rgba(15, 23, 42, 0.05);
        border-radius: 8px;
      }
      
      /* Enhanced table styles */
      .tv-table {
        background: rgba(255, 255, 255, 0.9);
        border: 1.5px solid rgba(203, 213, 225, 0.6);
        border-radius: 8px;
        overflow: hidden;
      }
      
      .tv-table th {
        background: linear-gradient(180deg, rgba(241, 245, 249, 0.95) 0%, rgba(226, 232, 240, 0.8) 100%);
        border-bottom: 1.5px solid rgba(203, 213, 225, 0.7);
        color: var(--tv-color-text);
        font-weight: 600;
      }
      
      .tv-table tr:hover {
        background: rgba(29, 78, 216, 0.06);
      }
      
      .tv-table tr:nth-child(even) {
        background: rgba(248, 250, 252, 0.5);
      }
      
      /* Enhanced notification styles */
      .tv-notification,
      .tv-alert,
      .tv-toast {
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 250, 252, 0.95) 100%);
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        border: 1.5px solid rgba(203, 213, 225, 0.7);
        box-shadow: 
          0 20px 25px -5px rgba(15, 23, 42, 0.1),
          0 10px 10px -5px rgba(15, 23, 42, 0.04);
        border-radius: 12px;
      }
      
      /* Enhanced text contrast and readability */
      .tv-symbol {
        color: var(--tv-color-text);
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
      }
      
      .tv-price {
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
      }
      
      .tv-price.up {
        color: var(--tv-color-success);
      }
      
      .tv-price.down {
        color: var(--tv-color-danger);
      }
      
      .tv-change {
        font-weight: 600;
      }
      
      .tv-change.up {
        color: var(--tv-color-success);
        background: var(--tv-color-success-alpha-10);
        border: 1px solid var(--tv-color-success-alpha-20);
      }
      
      .tv-change.down {
        color: var(--tv-color-danger);
        background: var(--tv-color-danger-alpha-10);
        border: 1px solid var(--tv-color-danger-alpha-20);
      }
      
      /* Enhanced button states */
      .tv-button {
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        font-weight: 500;
      }
      
      .tv-button:active {
        transform: translateY(0) scale(0.98);
      }
      
      /* Enhanced scrollbars for webkit browsers */
      .tv-sidebar::-webkit-scrollbar,
      .tv-panel::-webkit-scrollbar {
        width: 6px;
      }
      
      .tv-sidebar::-webkit-scrollbar-track,
      .tv-panel::-webkit-scrollbar-track {
        background: rgba(241, 245, 249, 0.5);
      }
      
      .tv-sidebar::-webkit-scrollbar-thumb,
      .tv-panel::-webkit-scrollbar-thumb {
        background: rgba(203, 213, 225, 0.7);
        border-radius: 3px;
      }
      
      .tv-sidebar::-webkit-scrollbar-thumb:hover,
      .tv-panel::-webkit-scrollbar-thumb:hover {
        background: rgba(148, 163, 184, 0.8);
      }
    }

    /* ========================
       STREAMING INDICATORS
       ======================== */
    
    .tv-streaming-active {
      color: var(--tv-color-success);
      font-weight: 600;
      animation: pulse 2s infinite;
    }
    
    .tv-streaming-stopped {
      color: var(--tv-color-text-secondary);
    }
    
    .tv-price-flash {
      font-weight: 600;
      font-family: var(--font-mono);
      transition: all 0.3s ease;
    }
    
    .tv-price-up {
      color: var(--tv-color-success);
      background-color: var(--tv-color-success-alpha-10);
      border-radius: var(--tv-border-radius-small);
      padding: 2px 4px;
      animation: flash-up 0.5s ease;
    }
    
    .tv-price-down {
      color: var(--tv-color-danger);
      background-color: var(--tv-color-danger-alpha-10);
      border-radius: var(--tv-border-radius-small);
      padding: 2px 4px;
      animation: flash-down 0.5s ease;
    }
    
    .tv-tick-rate {
      font-family: var(--font-mono);
      font-weight: 600;
      color: var(--tv-color-info);
    }
    
    .tv-latency {
      font-family: var(--font-mono);
      font-size: 0.9em;
    }
    
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    
    @keyframes flash-up {
      0% { background-color: var(--tv-color-success-alpha-20); }
      100% { background-color: var(--tv-color-success-alpha-10); }
    }
    
    @keyframes flash-down {
      0% { background-color: var(--tv-color-danger-alpha-20); }
      100% { background-color: var(--tv-color-danger-alpha-10); }
    }
    
    /* Button states */
    .tv-button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Performance Panel Grid Styles */
    .tv-perf-info-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-top: 12px;
      padding: 8px;
      background: rgba(19, 23, 34, 0.5);
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .tv-perf-info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 8px;
      background: rgba(255, 255, 255, 0.02);
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, 0.05);
      transition: all 0.2s ease;
    }

    .tv-perf-info-item:hover {
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .tv-perf-info-label {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.7);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .tv-perf-info-value {
      display: flex;
      align-items: center;
      gap: 4px;
      text-align: right;
    }

    .tv-perf-value {
      font-size: 12px;
      font-weight: 600;
      color: #ffffff;
      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    }

    .tv-perf-value-small {
      font-size: 10px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.6);
      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    }

    .tv-perf-charging-indicator {
      font-size: 10px;
      padding: 2px 4px;
      border-radius: 3px;
      font-weight: 500;
      background: rgba(34, 197, 94, 0.2);
      color: #22c55e;
      border: 1px solid rgba(34, 197, 94, 0.3);
    }

    .tv-perf-charging-indicator.charging {
      background: rgba(34, 197, 94, 0.2);
      color: #22c55e;
      border-color: rgba(34, 197, 94, 0.3);
    }

    .tv-perf-charging-indicator.not-charging {
      background: rgba(251, 191, 36, 0.2);
      color: #fbbf24;
      border-color: rgba(251, 191, 36, 0.3);
    }

    /* Network quality indicators */
    .tv-perf-value.network-4g {
      color: #22c55e;
    }

    .tv-perf-value.network-3g {
      color: #fbbf24;
    }

    .tv-perf-value.network-2g {
      color: #f87171;
    }

    /* Battery level indicators */
    .tv-perf-value.battery-high {
      color: #22c55e;
    }

    .tv-perf-value.battery-medium {
      color: #fbbf24;
    }

    .tv-perf-value.battery-low {
      color: #f87171;
    }

    /* RTT indicators */
    .tv-perf-value.rtt-good {
      color: #22c55e;
    }

    .tv-perf-value.rtt-medium {
      color: #fbbf24;
    }

    .tv-perf-value.rtt-poor {
      color: #f87171;
    }

    /* Responsive adjustments */
    @media (max-width: 640px) {
      .tv-perf-info-grid {
        grid-template-columns: 1fr;
      }
      
      .tv-perf-info-item {
        padding: 8px;
      }
      
      .tv-perf-info-label {
        font-size: 12px;
      }
      
      .tv-perf-value {
        font-size: 13px;
      }
    }

    /* Header Brand Styles */
    .tv-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-right: 24px;
    }

    .tv-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, #2563eb, #1d4ed8);
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    }

    .tv-title-group {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .tv-title {
      font-size: 24px;
      font-weight: 700;
      color: var(--tv-color-text);
      margin: 0;
      line-height: 1.2;
    }

    .tv-subtitle {
      font-size: 12px;
      font-weight: 500;
      color: var(--tv-color-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .tv-symbol-section {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    /* Responsive adjustments for brand */
    @media (max-width: 768px) {
      .tv-brand {
        gap: 8px;
        margin-right: 16px;
      }

      .tv-logo {
        width: 40px;
        height: 40px;
      }

      .tv-title {
        font-size: 18px;
      }

      .tv-subtitle {
        font-size: 10px;
      }
    }

    /* TradingView Panel System - Uniform Styling */
    .tv-panel {
      border-bottom: 1px solid var(--tv-color-platform-divider);
      transition: all 0.2s ease;
      margin-bottom: 0;
    }

    .tv-panel:last-child {
      border-bottom: none;
    }

    .tv-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      background: var(--tv-color-platform-background);
      border-bottom: 1px solid var(--tv-color-platform-divider);
      cursor: pointer;
      user-select: none;
      transition: background-color 0.2s ease;
      min-height: 44px;
      box-sizing: border-box;
    }

    .tv-panel-header:hover {
      background: var(--tv-color-pane-background);
    }

    .tv-panel-header-content {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 500;
      font-size: 13px;
      color: var(--tv-color-text-main);
      line-height: 1.4;
    }

    .tv-panel-header-content i {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .tv-panel-toggle {
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }

    .tv-panel-toggle i {
      width: 12px;
      height: 12px;
    }

    .tv-panel[data-collapsed="true"] .tv-panel-toggle {
      transform: rotate(-90deg);
    }

    .tv-panel-content {
      padding: 16px;
      background: var(--tv-color-pane-background);
      border-bottom: 1px solid var(--tv-color-platform-divider);
      transition: all 0.2s ease;
      line-height: 1.5;
    }

    .tv-panel[data-collapsed="true"] .tv-panel-content {
      display: none;
    }

    /* Uniform Card Styling */
    .tv-card {
      background: var(--tv-color-pane-background);
      border: 1px solid var(--tv-color-platform-divider);
      border-radius: 6px;
      padding: 16px;
      margin-bottom: 12px;
      transition: all 0.2s ease;
    }

    .tv-card:last-child {
      margin-bottom: 0;
    }

    .tv-card:hover {
      border-color: var(--tv-color-brand-active);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .tv-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--tv-color-platform-divider);
    }

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

    .tv-card-title i {
      width: 16px;
      height: 16px;
    }

    .tv-card-content {
      font-size: 13px;
      color: var(--tv-color-text-secondary);
      line-height: 1.5;
    }

    /* Form Elements Uniformity */
    .tv-input,
    .tv-select,
    .tv-textarea {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid var(--tv-color-platform-divider);
      border-radius: 4px;
      background: var(--tv-color-platform-background);
      color: var(--tv-color-text-main);
      font-size: 13px;
      transition: all 0.2s ease;
      box-sizing: border-box;
    }

    .tv-input:focus,
    .tv-select:focus,
    .tv-textarea:focus {
      outline: none;
      border-color: var(--tv-color-brand-active);
      box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.1);
    }

    .tv-label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: var(--tv-color-text-secondary);
      margin-bottom: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .tv-form-group {
      margin-bottom: 16px;
    }

    .tv-form-group:last-child {
      margin-bottom: 0;
    }

    /* Button Group Uniformity */
    .tv-button-group {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 12px;
    }

    .tv-button-group .tv-button {
      flex: 1;
      min-width: auto;
    }

    /* List Items Uniformity */
    .tv-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .tv-list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid var(--tv-color-platform-divider);
      font-size: 13px;
      color: var(--tv-color-text-main);
    }

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

    .tv-list-item:hover {
      background: var(--tv-color-platform-divider);
      margin: 0 -8px;
      padding-left: 8px;
      padding-right: 8px;
      border-radius: 4px;
    }

    .tv-badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .tv-badge-success {
      background: rgba(76, 175, 80, 0.1);
      color: #4CAF50;
      border: 1px solid rgba(76, 175, 80, 0.2);
    }

    .tv-badge-warning {
      background: rgba(255, 152, 0, 0.1);
      color: #FF9800;
      border: 1px solid rgba(255, 152, 0, 0.2);
    }

    .tv-badge-error {
      background: rgba(244, 67, 54, 0.1);
      color: #F44336;
      border: 1px solid rgba(244, 67, 54, 0.2);
    }

    /* Uniform Spacing for Panel Content */
    .tv-panel-content > *:first-child {
      margin-top: 0;
    }

    .tv-panel-content > *:last-child {
      margin-bottom: 0;
    }

    .tv-panel-content .tv-form-group:not(:last-child) {
      margin-bottom: 16px;
    }

    /* Uniform Spacing for sidebar sections */
    .tv-sidebar .tv-panel-content {
      padding: 16px;
    }

    .tv-sidebar .tv-panel-content .space-y-3 > *:not(:last-child) {
      margin-bottom: 12px;
    }

    .tv-sidebar .tv-panel-content .space-y-4 > *:not(:last-child) {
      margin-bottom: 16px;
    }

    /* Make input fields consistent in sidebar */
    .tv-sidebar input,
    .tv-sidebar select,
    .tv-sidebar textarea {
      padding: 8px 12px;
      border: 1px solid var(--tv-color-platform-divider);
      border-radius: 4px;
      background: var(--tv-color-platform-background);
      color: var(--tv-color-text-main);
      font-size: 13px;
      width: 100%;
      box-sizing: border-box;
    }

    .tv-sidebar input:focus,
    .tv-sidebar select:focus,
    .tv-sidebar textarea:focus {
      outline: none;
      border-color: var(--tv-color-brand-active);
      box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.1);
    }

    /* Uniform button styling in sidebar */
    .tv-sidebar button {
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 500;
      transition: all 0.2s ease;
      display: flex;
      align-items: center;
      gap: 6px;
      justify-content: center;
    }

    .tv-sidebar button:not(.tv-panel-toggle) {
      min-height: 32px;
    }

    /* Timeframe buttons specific styling */
    .tv-timeframes {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    .tv-timeframes .tv-button {
      padding: 6px 8px;
      font-size: 12px;
      min-height: 28px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .tv-timeframes .tv-button:hover {
      background: var(--tv-color-pane-background);
      border-color: var(--tv-color-brand-active);
    }

    .tv-timeframes .tv-button.tv-button-active,
    .tv-timeframes .tv-button.active {
      background: var(--tv-color-brand-active);
      color: white;
      border-color: var(--tv-color-brand-active);
    }

    /* Toggle button styles in sidebar */
    .tv-sidebar .tv-button.tv-button-active,
    .tv-sidebar .tv-button.active {
      background: var(--tv-color-brand-active);
      color: white;
      border-color: var(--tv-color-brand-active);
    }

    .tv-sidebar .tv-button.tv-button-active:hover,
    .tv-sidebar .tv-button.active:hover {
      background: var(--tv-color-brand-hover, #1e40af);
    }

    /* Market details improvements */
    .tv-market-details {
      margin-bottom: 0;
    }

    .tv-market-details .space-y-3 > * {
      margin-bottom: 12px;
    }

    .tv-market-details .space-y-3 > *:last-child {
      margin-bottom: 0;
    }

    /* Responsive timeframes for smaller sidebars */
    @media (max-width: 320px) {
      .tv-timeframes {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* Indicators and gauges in cards */
    .tv-card .tv-trend-indicator,
    .tv-card .tv-rsi-indicator,
    .tv-card .tv-volatility-indicator {
      margin-top: 8px;
    }

    .tv-trend-bar,
    .tv-rsi-bar,
    .tv-volatility-level {
      height: 6px;
      background: var(--tv-color-platform-divider);
      border-radius: 3px;
      overflow: hidden;
      margin-top: 6px;
      position: relative;
    }

    .tv-trend-fill,
    .tv-rsi-fill {
      height: 100%;
      background: var(--tv-color-brand-active);
      border-radius: 3px;
      transition: width 0.3s ease;
    }

    /* Custom list styling for sidebar */
    .tv-sidebar .tv-list-item {
      padding: 6px 0;
      font-size: 13px;
    }

    .tv-sidebar .tv-list-item button {
      padding: 4px 8px;
      min-height: 24px;
      font-size: 11px;
    }

    /* Ensure consistent spacing in all panels */
    .tv-panel-content .tv-card + .tv-card {
      margin-top: 12px;
    }

    .tv-panel-content .tv-form-group + .tv-card,
    .tv-panel-content .tv-card + .tv-form-group {
      margin-top: 16px;
    }

    /* Performance optimizations for hover states */
    .tv-card,
    .tv-button,
    .tv-list-item {
      will-change: auto;
    }

    .tv-card:hover,
    .tv-button:hover,
    .tv-list-item:hover {
      will-change: transform, box-shadow, background-color;
    }

    /* Uniform Modal System */
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }

    .modal.active {
      opacity: 1;
      visibility: visible;
    }

    .modal-content {
      background: var(--tv-color-pane-background);
      border: 1px solid var(--tv-color-platform-divider);
      border-radius: 12px;
      max-width: 90vw;
      max-height: 90vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      transform: scale(0.9) translateY(20px);
      transition: all 0.3s ease;
    }

    .modal.active .modal-content {
      transform: scale(1) translateY(0);
    }

    .modal-header {
      padding: 20px 24px;
      border-bottom: 1px solid var(--tv-color-platform-divider);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--tv-color-platform-background);
      border-radius: 12px 12px 0 0;
    }

    .tv-modal-title {
      font-size: 20px;
      font-weight: 600;
      color: var(--tv-color-text-main);
      margin: 0;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .modal-body {
      padding: 24px;
    }

    .modal-close {
      padding: 8px;
      border-radius: 6px;
    }

    /* Plan Cards in Modals */
    .tv-plan-card {
      background: var(--tv-color-pane-background);
      border: 1px solid var(--tv-color-platform-divider);
      border-radius: 8px;
      padding: 20px;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
    }

    .tv-plan-card:hover {
      border-color: var(--tv-color-brand-active);
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

    .tv-plan-badge {
      position: absolute;
      top: 16px;
      right: 16px;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .tv-badge-free {
      background: rgba(76, 175, 80, 0.1);
      color: #4CAF50;
      border: 1px solid rgba(76, 175, 80, 0.2);
    }

    .tv-badge-pro {
      background: rgba(255, 152, 0, 0.1);
      color: #FF9800;
      border: 1px solid rgba(255, 152, 0, 0.2);
    }

    .tv-plan-header {
      margin-bottom: 20px;
    }

    .tv-plan-name {
      font-size: 18px;
      font-weight: 600;
      color: var(--tv-color-text-main);
      margin: 0 0 8px 0;
    }

    .tv-plan-price {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin: 8px 0;
    }

    .tv-price-amount {
      font-size: 24px;
      font-weight: 700;
      color: var(--tv-color-brand-active);
    }

    .tv-price-period {
      font-size: 14px;
      color: var(--tv-color-text-secondary);
    }

    .tv-plan-description {
      color: var(--tv-color-text-secondary);
      font-size: 14px;
      margin: 8px 0 0 0;
    }

    .tv-plan-features {
      margin: 20px 0;
    }

    .tv-plan-features h5 {
      font-size: 14px;
      font-weight: 600;
      color: var(--tv-color-text-main);
      margin: 16px 0 8px 0;
    }

    .tv-plan-features ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .tv-plan-features li {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 0;
      font-size: 13px;
      color: var(--tv-color-text-secondary);
    }

    .tv-plan-actions {
      margin-top: 20px;
    }

    .tv-plan-button {
      width: 100%;
      justify-content: center;
      padding: 12px 20px;
      font-weight: 600;
    }

    /* Feature Grid in Modals */
    .tv-feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 16px;
      margin: 20px 0;
    }

    .tv-feature-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 16px;
      background: var(--tv-color-platform-background);
      border: 1px solid var(--tv-color-platform-divider);
      border-radius: 8px;
    }

    .tv-feature-icon {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      background: linear-gradient(135deg, var(--tv-color-brand-active), var(--tv-color-info));
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .tv-feature-content h4 {
      font-size: 14px;
      font-weight: 600;
      color: var(--tv-color-text-main);
      margin: 0 0 4px 0;
    }

    .tv-feature-content p {
      font-size: 13px;
      color: var(--tv-color-text-secondary);
      margin: 0;
    }

    /* Chart Toolbar Uniformity */
    .tv-chart-toolbar {
      background: var(--tv-color-platform-background);
      border-bottom: 1px solid var(--tv-color-platform-divider);
      padding: 8px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      min-height: 48px;
    }

    /* Vertical Chart Toolbar for Right Panel */
    .tv-chart-toolbar-vertical {
      flex-direction: column;
      align-items: stretch;
      border-bottom: none;
      padding: 12px;
      gap: 16px;
      min-height: auto;
    }

    .tv-toolbar-section-vertical {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 0;
      border-right: none;
      border-bottom: 1px solid var(--tv-color-platform-divider);
      padding-bottom: 12px;
    }

    .tv-toolbar-section-vertical:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .tv-toolbar-group-vertical {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .tv-chart-toolbar-vertical .tv-tool-btn {
      width: 100%;
      height: auto;
      padding: 8px 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      justify-content: flex-start;
      border-radius: 6px;
      text-align: left;
      transition: all 0.2s ease;
      position: relative;
      overflow: hidden;
    }

    .tv-chart-toolbar-vertical .tv-tool-btn:hover {
      background: var(--tv-color-pane-background);
      transform: translateX(2px);
    }

    .tv-chart-toolbar-vertical .tv-tool-btn.active {
      background: var(--tv-color-brand-active);
      color: white;
      transform: translateX(4px);
      box-shadow: 0 2px 8px rgba(41, 98, 255, 0.3);
    }

    .tv-chart-toolbar-vertical .tv-tool-btn span {
      font-size: 12px;
      font-weight: 500;
      white-space: nowrap;
    }

    .tv-chart-toolbar-vertical .tv-tool-btn i {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    /* Panel collapse animation for toolbar */
    .tv-panel[data-panel-id="chart-tools"] .tv-panel-content {
      transition: all 0.3s ease;
    }

    .tv-panel[data-panel-id="chart-tools"].collapsed .tv-panel-content {
      max-height: 0;
      opacity: 0;
      overflow: hidden;
    }

    .tv-toolbar-group {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 0 8px;
      border-right: 1px solid var(--tv-color-platform-divider);
    }

    .tv-toolbar-group:last-child {
      border-right: none;
    }

    .tv-tool-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 4px;
      color: var(--tv-color-text-secondary);
      cursor: pointer;
      transition: all 0.2s ease;
      position: relative;
    }

    .tv-tool-btn:hover {
      background: var(--tv-color-pane-background);
      border-color: var(--tv-color-platform-divider);
      color: var(--tv-color-text-main);
    }

    .tv-tool-btn.active {
      background: var(--tv-color-brand-active);
      border-color: var(--tv-color-brand-active);
      color: white;
    }

    .tv-tool-btn i {
      width: 14px;
      height: 14px;
    }

    /* Toolbar separators */
    .tv-toolbar-separator {
      width: 1px;
      height: 20px;
      background: var(--tv-color-platform-divider);
      margin: 0 4px;
    }

    /* Period Selector Styles */
    .tv-period-selector {
      display: flex;
      align-items: center;
      gap: 4px;
      background: var(--tv-color-pane-background);
      border: 1px solid var(--tv-color-platform-divider);
      border-radius: 6px;
      padding: 2px;
      margin: 0 12px;
      position: relative;
    }

    .tv-period-selector::before {
      content: '';
      position: absolute;
      left: -24px;
      top: 50%;
      transform: translateY(-50%);
      width: 14px;
      height: 14px;
      background: var(--tv-color-text-secondary);
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12,6 12,12 16,14'/%3E%3C/svg%3E") no-repeat center;
      mask-size: contain;
    }

    .tv-period-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px 12px;
      background: transparent;
      border: none;
      border-radius: 4px;
      color: var(--tv-color-text-secondary);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
      min-width: 32px;
      white-space: nowrap;
    }

    .tv-period-btn:hover {
      background: var(--tv-color-platform-background);
      color: var(--tv-color-text-main);
    }

    .tv-period-btn.active {
      background: var(--tv-color-brand-active);
      color: white;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
      position: relative;
      overflow: hidden;
    }

    .tv-period-btn.active::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      animation: tv-period-shine 2s ease-in-out infinite;
    }

    @keyframes tv-period-shine {
      0% { left: -100%; }
      50% { left: 100%; }
      100% { left: 100%; }
    }

    /* Enhanced Toolbar Groups */
    .tv-toolbar-group-title {
      font-size: 10px;
      color: var(--tv-color-text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 4px;
      padding: 0 4px;
      font-weight: 600;
    }

    .tv-toolbar-group.tv-group-vertical {
      flex-direction: column;
      align-items: flex-start;
      padding: 8px;
      border-right: 1px solid var(--tv-color-platform-divider);
      gap: 6px;
    }

    .tv-toolbar-group.tv-group-vertical .tv-tool-group {
      display: flex;
      gap: 2px;
    }

    .tv-toolbar-group-label {
      font-size: 10px;
      color: var(--tv-color-text-tertiary);
      margin-bottom: 4px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* TradingView Style Toolbar Sections */
    .tv-toolbar-section {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      border-right: 1px solid var(--tv-color-platform-divider);
    }

    .tv-toolbar-section:last-child {
      border-right: none;
    }

    .tv-toolbar-section-title {
      font-size: 10px;
      color: var(--tv-color-text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-right: 8px;
      font-weight: 600;
      white-space: nowrap;
    }

    /* Enhanced Tool Button with Labels */
    .tv-tool-btn-labeled {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 6px 8px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 4px;
      color: var(--tv-color-text-secondary);
      cursor: pointer;
      transition: all 0.2s ease;
      min-width: 40px;
      font-size: 10px;
      gap: 2px;
    }

    .tv-tool-btn-labeled:hover {
      background: var(--tv-color-pane-background);
      border-color: var(--tv-color-platform-divider);
      color: var(--tv-color-text-main);
    }

    .tv-tool-btn-labeled.active {
      background: var(--tv-color-brand-active);
      border-color: var(--tv-color-brand-active);
      color: white;
    }

    .tv-tool-btn-labeled i {
      width: 16px;
      height: 16px;
    }

    .tv-tool-btn-labeled span {
      font-size: 9px;
      line-height: 1;
      text-transform: uppercase;
      letter-spacing: 0.3px;
    }

    /* Responsive toolbar */
    @media (max-width: 768px) {
      .tv-chart-toolbar {
        padding: 6px 12px;
        gap: 8px;
        flex-wrap: wrap;
      }
      
      .tv-toolbar-section {
        padding: 0 6px;
        gap: 4px;
      }
      
      .tv-toolbar-section-title {
        display: none; /* Hide section titles on mobile */
      }
      
      .tv-period-selector {
        order: -1; /* Move period selector to top on mobile */
        width: 100%;
        justify-content: space-between;
        margin: 0 0 8px 0;
      }
      
      .tv-period-btn {
        padding: 4px 8px;
        font-size: 11px;
        min-width: auto;
        flex: 1;
      }
      
      /* Hide some less important toolbar sections on mobile */
      .tv-toolbar-section:nth-child(n+6) {
        display: none;
      }
      
      /* Vertical toolbar adjustments for mobile */
      .tv-chart-toolbar-vertical {
        padding: 8px;
        gap: 12px;
      }
      
      .tv-chart-toolbar-vertical .tv-tool-btn {
        padding: 6px 8px;
        font-size: 11px;
      }
      
      .tv-chart-toolbar-vertical .tv-tool-btn span {
        font-size: 11px;
      }
      
      .tv-toolbar-section-vertical {
        gap: 6px;
        padding-bottom: 8px;
      }
    }
    
    @media (max-width: 480px) {
      .tv-period-selector {
        gap: 2px;
        padding: 1px;
      }
      
      .tv-period-btn {
        padding: 3px 6px;
        font-size: 10px;
      }
      
      /* Show only essential periods on very small screens */
      .tv-period-btn[data-period="5D"],
      .tv-period-btn[data-period="3M"],
      .tv-period-btn[data-period="5Y"] {
        display: none;
      }
    }

    /* Enhanced hover effects */
    .tv-toolbar-section:hover .tv-toolbar-section-title {
      color: var(--tv-color-text-main);
    }

    /* Keyboard navigation support */
    .tv-period-btn:focus,
    .tv-tool-btn:focus {
      outline: 2px solid var(--tv-color-brand-active);
      outline-offset: 2px;
    }

    /* Animation for period selection */
    .tv-period-btn {
      transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    .tv-period-btn.active {
      transform: scale(1.05);
    }

    /* Loading state for period changes */
    .tv-period-loading .tv-period-btn {
      opacity: 0.6;
      pointer-events: none;
    }

    .tv-period-loading .tv-period-btn.active {
      position: relative;
    }

    .tv-period-loading .tv-period-btn.active::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 12px;
      height: 12px;
      margin: -6px 0 0 -6px;
      border: 2px solid transparent;
      border-top: 2px solid currentColor;
      border-radius: 50%;
      animation: tv-spin 1s linear infinite;
    }

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

    /* Mobile specific toolbar adjustments */
    @media (max-width: 768px) {
      .tv-toolbar-group {
        padding: 0 4px;
        gap: 2px;
      }

      .tv-tool-btn {
        width: 28px;
        height: 28px;
      }
    }

    /* Form elements consistency across all components */
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="password"],
    input[type="date"],
    select,
    textarea {
      padding: 8px 12px;
      border: 1px solid var(--tv-color-platform-divider);
      border-radius: 4px;
      background: var(--tv-color-platform-background);
      color: var(--tv-color-text-main);
      font-size: 13px;
      transition: all 0.2s ease;
      box-sizing: border-box;
    }

    input[type="text"]:focus,
    input[type="number"]:focus,
    input[type="email"]:focus,
    input[type="password"]:focus,
    input[type="date"]:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: var(--tv-color-brand-active);
      box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.1);
    }

    /* Button variants uniformity */
    .tv-button-primary {
      background: var(--tv-color-brand-active);
      color: white;
      border: 1px solid var(--tv-color-brand-active);
    }

    .tv-button-primary:hover {
      background: var(--tv-color-toolbar-button-background-active);
    }

    .tv-button-success {
      background: var(--tv-color-success);
      color: white;
      border: 1px solid var(--tv-color-success);
    }

    .tv-button-warning {
      background: var(--tv-color-warning);
      color: white;
      border: 1px solid var(--tv-color-warning);
    }

    .tv-button-danger {
      background: var(--tv-color-danger);
      color: white;
      border: 1px solid var(--tv-color-danger);
    }

    .tv-button-ghost {
      background: transparent;
      color: var(--tv-color-text-secondary);
      border: 1px solid var(--tv-color-platform-divider);
    }

    .tv-button-ghost:hover {
      background: var(--tv-color-pane-background);
      color: var(--tv-color-text-main);
    }

    .tv-button-outline {
      background: transparent;
      color: var(--tv-color-brand-active);
      border: 1px solid var(--tv-color-brand-active);
    }

    .tv-button-outline:hover {
      background: var(--tv-color-brand-active);
      color: white;
    }

    .tv-button-active {
      background: var(--tv-color-brand-active);
      color: white;
      border: 1px solid var(--tv-color-brand-active);
    }

    /* Legacy class compatibility */
    .tv-button-full {
      width: 100%;
      justify-content: center;
    }

    .tv-button.info {
      background: var(--tv-color-info);
      color: white;
      border: 1px solid var(--tv-color-info);
    }

    /* Ensure consistent sizing across all interactive elements */
    .tv-sidebar button,
    .tv-sidebar input,
    .tv-sidebar select {
      min-height: 32px;
      font-size: 13px;
    }

    /* Grid layouts uniformity */
    .tv-details-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 16px;
      padding: 20px;
    }

    .tv-plans-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      margin: 20px 0;
    }

    /* Ensure spacing consistency */
    .tv-panel-content > .tv-form-group:first-child {
      margin-top: 0;
    }

    .tv-panel-content > .tv-form-group:last-child {
      margin-bottom: 0;
    }

    .tv-panel-content > .tv-card:first-child {
      margin-top: 0;
    }

    .tv-panel-content > .tv-card:last-child {
      margin-bottom: 0;
    }

    /* Scrollbar styling for consistent look */
    .tv-sidebar::-webkit-scrollbar,
    .tv-panel-content::-webkit-scrollbar,
    .modal-content::-webkit-scrollbar {
      width: 6px;
    }

    .tv-sidebar::-webkit-scrollbar-track,
    .tv-panel-content::-webkit-scrollbar-track,
    .modal-content::-webkit-scrollbar-track {
      background: var(--tv-color-platform-background);
    }

    .tv-sidebar::-webkit-scrollbar-thumb,
    .tv-panel-content::-webkit-scrollbar-thumb,
    .modal-content::-webkit-scrollbar-thumb {
      background: var(--tv-color-platform-divider);
      border-radius: 3px;
    }

    .tv-sidebar::-webkit-scrollbar-thumb:hover,
    .tv-panel-content::-webkit-scrollbar-thumb:hover,
    .modal-content::-webkit-scrollbar-thumb:hover {
      background: var(--tv-color-text-secondary);
    }

    /* Animation consistency */
    .tv-panel,
    .tv-card,
    .tv-button,
    .tv-input,
    .tv-select,
    .tv-list-item {
      transition: all 0.2s ease;
    }

    /* Focus states consistency */
    .tv-button:focus,
    .tv-tool-btn:focus {
      outline: 2px solid var(--tv-color-brand-active);
      outline-offset: 2px;
    }

    /* Drawing Tools Toggle States */
    .tv-drawing-tools-hidden .tv-drawing-tool:not(#toggleDrawingTools) {
      display: none;
    }

    .tv-drawing-tools-hidden #toggleDrawingTools i {
      opacity: 0.5;
    }

    #toggleDrawingTools {
      position: relative;
      transition: all 0.3s ease;
    }

    #toggleDrawingTools.tools-hidden {
      background-color: var(--tv-color-background-secondary);
    }

    #toggleDrawingTools.tools-hidden i {
      transform: scale(0.9);
      opacity: 0.6;
    }

    /* Mobile responsiveness for uniformity */
    @media (max-width: 480px) {
      .tv-details-grid {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 12px;
      }

      .tv-plans-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .tv-button-group {
        flex-direction: column;
      }

      .tv-button-group .tv-button {
        width: 100%;
      }
    }

    /* TradingView 3-Column Layout System */
    .tv-layout {
      display: grid;
      grid-template-columns: 280px 1fr 320px;
      grid-template-areas: "sidebar main rightpanel";
      height: calc(100vh - 60px);
      overflow: hidden;
      position: relative;
      gap: 1px;
      background: var(--tv-color-platform-divider);
    }

    .tv-sidebar {
      grid-area: sidebar;
      background: var(--tv-color-pane-background);
      border-right: 1px solid var(--tv-color-platform-divider);
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      z-index: 10;
    }

    /* Sidebar Toggle Button */
    .tv-sidebar-toggle {
      position: absolute;
      top: 50%;
      right: -20px;
      transform: translateY(-50%);
      width: 40px;
      height: 60px;
      background: var(--tv-color-pane-background);
      border: 2px solid var(--tv-color-platform-divider);
      border-left: none;
      border-radius: 0 12px 12px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 15;
      transition: all 0.3s ease;
      box-shadow: 4px 0 12px rgba(0, 0, 0, 0.2);
      animation: slideInFromRight 0.5s ease-out;
    }

    /* Hover area expansion */
    .tv-sidebar-toggle::before {
      content: '';
      position: absolute;
      left: -10px;
      top: -10px;
      right: -10px;
      bottom: -10px;
      background: transparent;
      border-radius: 0 12px 12px 0;
    }

    @keyframes slideInFromRight {
      from {
        right: -50px;
        opacity: 0;
      }
      to {
        right: -20px;
        opacity: 1;
      }
    }

    @keyframes slideInFromLeft {
      from {
        left: -50px;
        opacity: 0;
      }
      to {
        left: -20px;
        opacity: 1;
      }
    }

    .tv-sidebar-toggle:hover {
      background: var(--tv-color-platform-background);
      border-color: var(--tv-color-brand-active);
      transform: translateY(-50%) scale(1.1);
      box-shadow: 6px 0 16px rgba(0, 0, 0, 0.3);
      right: -15px;
    }

    .tv-sidebar-toggle:active {
      transform: translateY(-50%) scale(0.95);
    }

    /* Pulse effect when sidebar is collapsed */
    .tv-sidebar.tv-sidebar-collapsed .tv-sidebar-toggle {
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% {
        box-shadow: -3px 0 8px rgba(0, 0, 0, 0.15);
      }
      50% {
        box-shadow: -3px 0 12px rgba(33, 150, 243, 0.3);
      }
    }

    .tv-sidebar-toggle i {
      color: var(--tv-color-text-secondary);
      transition: all 0.2s ease;
      width: 18px;
      height: 18px;
    }

    .tv-sidebar-toggle:hover i {
      color: var(--tv-color-brand-active);
      transform: scale(1.2);
    }

    /* Sidebar visible edge indicator */
    .tv-sidebar::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 4px;
      background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--tv-color-brand-active) 25%,
        var(--tv-color-brand-active) 75%,
        transparent 100%
      );
      opacity: 0.6;
      transition: all 0.3s ease;
    }

    .tv-sidebar:hover::after {
      opacity: 1;
      width: 6px;
    }
    .tv-sidebar.tv-sidebar-collapsed {
      width: 50px !important; /* Força largura de 50px quando colapsado */
      margin-left: 0; /* Remove margem negativa - o grid já reserva apenas 50px */
      cursor: pointer; /* Indica que a área é clicável */
      position: relative; /* Para permitir pseudo-elementos */
      transition: transform 0.2s ease, box-shadow 0.2s ease; /* Transição suave */
      overflow: hidden; /* Esconde conteúdo que não cabe */
      background: var(--tv-color-pane-bg); /* Fundo visível */
      border-right: 1px solid var(--tv-color-border); /* Borda para definir limite */
    }

    /* Esconde todo o conteúdo do sidebar quando colapsado */
    .tv-sidebar.tv-sidebar-collapsed > *:not(.tv-sidebar-toggle) {
      display: none;
    }

    .tv-sidebar.tv-sidebar-collapsed::before {
      content: '◀';
      position: absolute;
      left: 50%; /* Centraliza horizontalmente */
      top: 60%; /* Posiciona abaixo do centro para não sobrepor o botão */
      transform: translateX(-50%) translateY(-50%);
      color: var(--tv-color-brand-active);
      font-size: 16px;
      font-weight: bold;
      opacity: 0.7;
      transition: opacity 0.2s ease;
    }

    .tv-sidebar.tv-sidebar-collapsed:hover {
      transform: translateX(10px); /* Move ligeiramente para a direita ao hover */
      box-shadow: 2px 0 10px rgba(41, 98, 255, 0.3); /* Sombra para destacar */
    }

    .tv-sidebar.tv-sidebar-collapsed:hover::before {
      opacity: 1;
    }

    .tv-sidebar.tv-sidebar-collapsed .tv-sidebar-toggle {
      right: auto; /* Remove posicionamento à direita */
      left: 50%; /* Centraliza horizontalmente */
      transform: translateX(-50%) translateY(-50%) rotateY(180deg); /* Centraliza e rotaciona */
      background: var(--tv-color-brand-light);
      border-color: var(--tv-color-brand-active);
    }

    /* Right Panel Toggle Button */
  .tv-right-panel-toggle {
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 60px;
    background: var(--tv-color-pane-background);
    border: 2px solid var(--tv-color-platform-divider);
    border-right: none;
    border-radius: 12px 0 0 12px;
    display: flex !important; /* Força sempre visível */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 16; /* Z-index mais alto que outros elementos */
    color: var(--tv-color-text-secondary);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2);
    animation: slideInFromLeft 0.5s ease-out;
    opacity: 1; /* Garante opacidade total */
    visibility: visible !important; /* Força visibilidade */
  }

  /* Hover area expansion */
  .tv-right-panel-toggle::before {
    content: '';
    position: absolute;
    left: -10px;
    top: -10px;
    right: -10px;
    bottom: -10px;
    background: transparent;
    border-radius: 12px 0 0 12px;
  }

  .tv-right-panel-toggle:hover {
    background: var(--tv-color-platform-background);
    border-color: var(--tv-color-brand-active);
    transform: translateY(-50%) scale(1.1);
    box-shadow: -6px 0 16px rgba(0, 0, 0, 0.3);
    color: var(--tv-color-brand-active);
    left: -15px;
  }

  .tv-right-panel-toggle:active {
    transform: translateY(-50%) scale(0.95);
  }

  /* Pulse effect when right panel is collapsed */
  .tv-right-panel-collapsed .tv-right-panel-toggle {
    animation: pulse 2s infinite;
  }

  .tv-right-panel-toggle i {
    width: 18px;
    height: 18px;
    transition: all 0.2s ease;
  }

  .tv-right-panel-toggle:hover i {
    transform: scale(1.2);
  }

  /* Right Panel visible edge indicator */
  .tv-right-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      var(--tv-color-brand-active) 25%,
      var(--tv-color-brand-active) 75%,
      transparent 100%
    );
    opacity: 0.6;
    transition: all 0.3s ease;
  }

  .tv-right-panel:hover::before {
    opacity: 1;
    width: 6px;
  }

  .tv-right-panel-collapsed {
    width: 50px !important; /* Força largura de 50px quando colapsado */
    margin-right: 0; /* Remove margem negativa - o grid já reserva apenas 50px */
    cursor: pointer; /* Indica que a área é clicável */
    position: relative; /* Para permitir pseudo-elementos */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Transição suave */
    overflow: visible !important; /* Permite que o toggle seja visível */
    background: var(--tv-color-pane-bg); /* Fundo visível */
    border-left: 1px solid var(--tv-color-border); /* Borda para definir limite */
  }

  /* Esconde todo o conteúdo do painel direito quando colapsado */
  .tv-right-panel-collapsed > *:not(.tv-right-panel-toggle) {
    display: none;
  }

  /* Garante que o toggle sempre seja visível */
  .tv-right-panel .tv-right-panel-toggle {
    display: flex !important;
    visibility: visible !important;
  }

  .tv-right-panel-collapsed::before {
    content: '▶';
    position: absolute;
    left: 50%; /* Centraliza horizontalmente */
    top: 60%; /* Posiciona abaixo do centro para não sobrepor o botão */
    transform: translateX(-50%) translateY(-50%);
    color: var(--tv-color-brand-active);
    font-size: 16px;
    font-weight: bold;
    opacity: 0.7;
    transition: opacity 0.2s ease;
  }

  .tv-right-panel-collapsed:hover {
    transform: translateX(-10px); /* Move ligeiramente para a esquerda ao hover */
    box-shadow: -2px 0 10px rgba(41, 98, 255, 0.3); /* Sombra para destacar */
  }

  .tv-right-panel-collapsed:hover::before {
    opacity: 1;
  }

  .tv-right-panel-collapsed .tv-right-panel-toggle {
    display: flex !important; /* Força a exibição */
    visibility: visible !important; /* Garante visibilidade */
    left: 15px; /* Posiciona mais à direita do painel colapsado */
    top: 50%;
    transform: translateY(-50%); /* Apenas centraliza verticalmente */
    background: var(--tv-color-brand-light);
    border-color: var(--tv-color-brand-active);
    z-index: 25; /* Z-index ainda mais alto */
    animation: pulse 2s infinite; /* Adiciona animação para chamar atenção */
    opacity: 1 !important;
    width: 40px;
    height: 60px;
    border-radius: 0 12px 12px 0; /* Inverte o border-radius para ficar do lado direito */
    border-left: 2px solid var(--tv-color-brand-active);
    border-right: none;
    box-shadow: 4px 0 12px rgba(41, 98, 255, 0.3);
  }

  /* Icon adjustment for collapsed right panel */
  .tv-right-panel-collapsed .tv-right-panel-toggle i {
    transform: rotate(180deg); /* Rotaciona o ícone para apontar para a esquerda */
    color: var(--tv-color-brand-active);
  }

  /* Debug: Ensure right panel toggle is always visible */
  .tv-right-panel-toggle {
    background-color: var(--tv-color-brand-light) !important;
    border: 2px solid var(--tv-color-brand-active) !important;
    opacity: 1 !important;
    z-index: 999 !important;
  }

  /* Hover effect for collapsed right panel */
  .tv-right-panel-collapsed:hover .tv-right-panel-toggle {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 6px 0 16px rgba(41, 98, 255, 0.4);
  }

  /* Right Panel Resizer */
  .tv-right-panel-resizer {
    position: absolute;
    top: 0;
    left: -2px;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 12;
    transition: background 0.2s ease;
  }

  .tv-right-panel-resizer:hover {
    background: var(--tv-color-brand-active);
  }

  /* Right Panel Width Indicator */
  .tv-right-panel-width-indicator {
    position: absolute;
    top: 10px;
    left: 8px;
    font-size: 10px;
    color: var(--tv-color-text-secondary);
    background: var(--tv-color-platform-background);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid var(--tv-color-platform-divider);
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 13;
  }

  .tv-right-panel-resizer:hover + .tv-right-panel-width-indicator,
  .tv-right-panel-width-indicator.tv-show {
    opacity: 1;
  }
    .tv-sidebar-resizer {
      position: absolute;
      top: 0;
      right: -2px;
      width: 4px;
      height: 100%;
      cursor: col-resize;
      background: transparent;
      z-index: 12;
      transition: background 0.2s ease;
    }

    .tv-sidebar-resizer:hover {
      background: var(--tv-color-brand-active);
    }

    /* Width Indicator */
    .tv-sidebar-width-indicator {
      position: absolute;
      top: 10px;
      right: 8px;
      font-size: 10px;
      color: var(--tv-color-text-secondary);
      background: var(--tv-color-platform-background);
      padding: 2px 6px;
      border-radius: 3px;
      border: 1px solid var(--tv-color-platform-divider);
      opacity: 0;
      pointer-events: none;
      transition: all 0.2s ease;
      z-index: 13;
    }

    .tv-sidebar-resizer:hover + .tv-sidebar-width-indicator,
    .tv-sidebar-width-indicator.tv-show {
      opacity: 1;
    }

    .tv-main {
      grid-area: main;
      background: var(--tv-color-platform-background);
      overflow: hidden;
      position: relative;
      z-index: 1;
    }

    .tv-right-panel {
      grid-area: rightpanel;
      background: var(--tv-color-pane-background);
      border-left: 1px solid var(--tv-color-platform-divider);
      overflow-y: auto;
      overflow-x: hidden;
      position: relative;
      z-index: 10;
    }

    /* Responsive breakpoints for 3-column layout */
    @media (max-width: 1200px) {
      .tv-layout {
        grid-template-columns: 260px 1fr 280px;
      }
    }

    @media (max-width: 1024px) {
      .tv-layout {
        grid-template-columns: 240px 1fr 260px;
      }
    }

    @media (max-width: 768px) {
      .tv-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "main";
        grid-template-rows: 1fr;
      }

      .tv-sidebar,
      .tv-right-panel {
        display: none;
      }

      .tv-sidebar.tv-sidebar-mobile-open {
        display: block;
        position: fixed;
        top: 60px;
        left: 0;
        width: 280px;
        height: calc(100vh - 60px);
        z-index: 1000;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
      }

      .tv-right-panel.tv-right-panel-mobile-open {
        display: block;
        position: fixed;
        top: 60px;
        right: 0;
        width: 320px;
        height: calc(100vh - 60px);
        z-index: 1000;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
      }
    }

    /* Scrollbar styling for right panel */
    .tv-right-panel::-webkit-scrollbar {
      width: 6px;
    }

    .tv-right-panel::-webkit-scrollbar-track {
      background: var(--tv-color-platform-background);
      border-radius: 3px;
    }

    .tv-right-panel::-webkit-scrollbar-thumb {
      background: var(--tv-color-platform-divider);
      border-radius: 3px;
    }

    .tv-right-panel::-webkit-scrollbar-thumb:hover {
      background: var(--tv-color-text-secondary);
    }

    /* Panel uniformity for right panel */
    .tv-right-panel .tv-panel {
      border-bottom: 1px solid var(--tv-color-platform-divider);
    }

    .tv-right-panel .tv-panel:last-child {
      border-bottom: none;
    }

    .tv-right-panel .tv-panel-content {
      padding: 16px;
    }

    .tv-right-panel .tv-card {
      margin-bottom: 12px;
    }

    .tv-right-panel .tv-card:last-child {
      margin-bottom: 0;
    }

    /* Market Depth / Orderbook Styling */
    .tv-orderbook {
      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
      font-size: 11px;
    }

    .tv-orderbook-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 2px 8px;
      position: relative;
      min-height: 20px;
      border-radius: 3px;
      margin-bottom: 1px;
    }

    .tv-orderbook-price {
      font-weight: 600;
      min-width: 60px;
      text-align: left;
    }

    .tv-orderbook-size {
      font-weight: 500;
      color: var(--tv-color-text-secondary);
      min-width: 50px;
      text-align: right;
    }

    .tv-orderbook-bar {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      border-radius: 3px;
      z-index: 0;
      opacity: 0.2;
      transition: all 0.3s ease;
    }

    .tv-orderbook-bar-ask {
      background: linear-gradient(90deg, transparent 0%, rgba(244, 67, 54, 0.3) 100%);
    }

    .tv-orderbook-bar-bid {
      background: linear-gradient(90deg, transparent 0%, rgba(76, 175, 80, 0.3) 100%);
    }

    .tv-orderbook-row:hover .tv-orderbook-bar {
      opacity: 0.4;
    }

    .tv-price-ask {
      color: #f44336;
    }

    .tv-price-bid {
      color: #4caf50;
    }

    .tv-orderbook-row .tv-orderbook-price,
    .tv-orderbook-row .tv-orderbook-size {
      position: relative;
      z-index: 1;
    }

    /* Spread Info Styling */
    .tv-spread-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      background: rgba(255, 193, 7, 0.1);
      border: 1px solid rgba(255, 193, 7, 0.2);
      border-radius: 6px;
    }

    .tv-spread-value {
      font-weight: 600;
      font-size: 14px;
      color: #ffc107;
      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    }

    .tv-spread-percentage {
      font-size: 11px;
      color: var(--tv-color-text-secondary);
      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    }

    /* Statistics Grid Styling */
    .tv-stats-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .tv-stat-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 0;
      border-bottom: 1px solid var(--tv-color-platform-divider);
    }

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

    .tv-stat-label {
      font-size: 11px;
      font-weight: 500;
      color: var(--tv-color-text-secondary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .tv-stat-value {
      font-size: 12px;
      font-weight: 600;
      font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    }

    /* Empty State Styling */
    .tv-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      text-align: center;
      color: var(--tv-color-text-secondary);
    }

    .tv-empty-state i {
      margin-bottom: 8px;
      opacity: 0.5;
    }

    .tv-empty-state p {
      margin: 0;
      opacity: 0.7;
    }

    /* Mobile Toggle Buttons */
    .tv-mobile-panel-toggle {
      display: none;
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1001;
      padding: 8px;
      background: var(--tv-color-pane-background);
      border: 1px solid var(--tv-color-platform-divider);
      border-radius: 6px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .tv-mobile-sidebar-toggle {
      left: 10px;
    }

    .tv-mobile-right-panel-toggle {
      right: 10px;
    }

    @media (max-width: 768px) {
      .tv-mobile-panel-toggle {
        display: block;
      }
    }

    /* Range Controls for Point Movement Speed */
    .tv-range-container {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
    }

    .tv-range {
      flex: 1;
      height: 4px;
      border-radius: 2px;
      background: var(--tv-color-border);
      outline: none;
      -webkit-appearance: none;
      appearance: none;
      cursor: pointer;
    }

    .tv-range::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--tv-color-info);
      cursor: pointer;
      border: 2px solid var(--tv-color-pane-background);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
      transition: all 0.2s ease;
    }

    .tv-range::-webkit-slider-thumb:hover {
      transform: scale(1.1);
      background: var(--tv-color-info-alpha-80);
    }

    .tv-range::-moz-range-thumb {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--tv-color-info);
      cursor: pointer;
      border: 2px solid var(--tv-color-pane-background);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
      transition: all 0.2s ease;
    }

    .tv-range::-moz-range-thumb:hover {
      transform: scale(1.1);
      background: var(--tv-color-info-alpha-80);
    }

    .tv-range-value {
      min-width: 40px;
      text-align: center;
      font-size: 11px;
      font-weight: 600;
      color: var(--tv-color-info);
      background: var(--tv-color-info-alpha-10);
      padding: 2px 6px;
      border-radius: var(--tv-border-radius-small);
      border: 1px solid var(--tv-color-info-alpha-20);
    }

    /* Mobile Range Styles */
    input[type="range"].w-full {
      background: linear-gradient(to right, var(--tv-color-info) 0%, var(--tv-color-info) var(--range-progress, 20%), var(--tv-color-border) var(--range-progress, 20%), var(--tv-color-border) 100%);
    }

    input[type="range"].w-full::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--tv-color-info);
      cursor: pointer;
      border: 2px solid white;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    input[type="range"].w-full::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--tv-color-info);
      cursor: pointer;
      border: 2px solid white;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

/* ============== WALLET360 LOADING SCREEN ============== */
.wallet360-loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--tv-color-platform-background) 0%, var(--tv-color-pane-background) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.wallet360-loading-screen.fade-out {
  opacity: 0;
  visibility: hidden;
}

.wallet360-loading-container {
  text-align: center;
  max-width: 450px;
  padding: 1.5rem;
  color: var(--tv-color-text);
  max-height: 85vh;
  overflow-y: auto;
}

/* Logo Section */
.wallet360-logo-section {
  margin-bottom: 1.5rem;
}

.wallet360-logo-animated {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--tv-color-info-alpha-20);
  border-radius: 50%;
  margin-bottom: 1rem;
  animation: wallet360-pulse 2s ease-in-out infinite;
}

.wallet360-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  background: linear-gradient(135deg, var(--tv-color-info), #00d4ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wallet360-subtitle {
  font-size: 1rem;
  color: var(--tv-color-text-secondary);
  font-weight: 500;
}

/* Loading Animation */
.wallet360-loading-animation {
  margin-bottom: 1.5rem;
}

.wallet360-spinner {
  position: relative;
  width: 45px;
  height: 45px;
  margin: 0 auto 1rem;
}

.wallet360-spinner-inner {
  width: 100%;
  height: 100%;
  border: 3px solid var(--tv-color-border);
  border-top: 3px solid var(--tv-color-info);
  border-radius: 50%;
  animation: wallet360-spin 1s linear infinite;
}

.wallet360-loading-text {
  font-size: 1rem;
  color: var(--tv-color-text);
  font-weight: 500;
  animation: wallet360-fade 2s ease-in-out infinite;
}

/* Progress Bar */
.wallet360-progress-container {
  margin-bottom: 1.5rem;
}

.wallet360-progress-bar {
  width: 100%;
  height: 4px;
  background: var(--tv-color-border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.wallet360-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tv-color-info), var(--tv-color-success));
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s ease;
  animation: wallet360-progress-glow 2s ease-in-out infinite;
}

.wallet360-progress-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--tv-color-text-secondary);
}

#progressPercent {
  font-weight: 600;
  color: var(--tv-color-info);
}

/* Loading Steps */
.wallet360-loading-steps {
  margin-bottom: 1.25rem;
  text-align: left;
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
}

.wallet360-step {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.375rem;
  background: var(--tv-color-pane-background);
  border-radius: var(--tv-border-radius);
  border: 1px solid var(--tv-color-border);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.wallet360-step.active {
  background: var(--tv-color-info-alpha-10);
  border-color: var(--tv-color-info-alpha-30);
  transform: translateX(5px);
}

.wallet360-step.completed {
  background: var(--tv-color-success-alpha-10);
  border-color: var(--tv-color-success);
}

.wallet360-step i {
  margin-right: 0.5rem;
  color: var(--tv-color-text-secondary);
  transition: color 0.3s ease;
}

.wallet360-step.active i {
  color: var(--tv-color-info);
}

.wallet360-step.completed i {
  color: var(--tv-color-success);
}

.wallet360-step span {
  flex: 1;
  font-size: 0.8rem;
  color: var(--tv-color-text);
}

.wallet360-step-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tv-color-border);
  transition: background 0.3s ease;
}

.wallet360-step.active .wallet360-step-status {
  background: var(--tv-color-info);
  animation: wallet360-pulse-dot 1.5s ease-in-out infinite;
}

.wallet360-step.completed .wallet360-step-status {
  background: var(--tv-color-success);
}

/* System Information */
.wallet360-system-info {
  margin-bottom: 1.25rem;
  padding: 0.75rem;
  background: var(--tv-color-pane-background-secondary);
  border-radius: var(--tv-border-radius);
  border: 1px solid var(--tv-color-border);
}

.wallet360-info-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  color: var(--tv-color-text-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  transition: all 0.2s ease;
}

.wallet360-info-item.cursor-pointer:hover {
  background-color: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
  color: var(--tv-color-text-primary);
}

.wallet360-info-item.cursor-pointer:active {
  transform: translateY(0);
}

.wallet360-info-item:last-child {
  margin-bottom: 0;
}

.wallet360-info-item i {
  margin-right: 0.375rem;
  color: var(--tv-color-info);
}

#loadingLatency {
  color: var(--tv-color-text);
  font-weight: 500;
}

/* Loading Tips */
.wallet360-loading-tips {
  padding: 0.75rem;
  background: var(--tv-color-warning-alpha-10);
  border-radius: var(--tv-border-radius);
  border: 1px solid rgba(255, 167, 38, 0.2);
}

.wallet360-tip {
  font-size: 0.8rem;
  color: var(--tv-color-text);
  line-height: 1.3;
  animation: wallet360-tip-fade 4s ease-in-out infinite;
}

/* Animations */
@keyframes wallet360-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes wallet360-pulse {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--tv-color-info-alpha-40);
  }
  50% { 
    transform: scale(1.05);
    box-shadow: 0 0 0 15px transparent;
  }
}

@keyframes wallet360-fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes wallet360-progress-glow {
  0%, 100% { box-shadow: 0 0 5px var(--tv-color-info-alpha-30); }
  50% { box-shadow: 0 0 15px var(--tv-color-info-alpha-60); }
}

@keyframes wallet360-pulse-dot {
  0%, 100% { 
    transform: scale(1);
    box-shadow: 0 0 0 0 var(--tv-color-info-alpha-40);
  }
  50% { 
    transform: scale(1.2);
    box-shadow: 0 0 0 8px transparent;
  }
}

@keyframes wallet360-tip-fade {
  0%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.8; }
  50% { opacity: 0.9; }
}

/* Responsive Design */
@media (max-width: 1200px) {
  .wallet360-loading-container {
    max-width: 450px;
    padding: 1.5rem;
  }
}

@media (max-width: 992px) {
  .wallet360-loading-container {
    max-width: 400px;
    padding: 1.25rem;
  }
  
  .wallet360-title {
    font-size: 2.25rem;
  }
  
  .wallet360-logo-animated {
    width: 70px;
    height: 70px;
  }
  
  .wallet360-logo-animated .w-16 {
    width: 3.5rem;
    height: 3.5rem;
  }
}

@media (max-width: 768px) {
  .wallet360-loading-container {
    padding: 0.75rem;
    max-width: 90%;
    margin: 0 auto;
    max-height: 90vh;
  }
  
  .wallet360-title {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
  }
  
  .wallet360-subtitle {
    font-size: 0.9rem;
  }
  
  .wallet360-logo-animated {
    width: 50px;
    height: 50px;
    margin-bottom: 0.75rem;
  }
  
  .wallet360-logo-animated .w-12 {
    width: 2.5rem;
    height: 2.5rem;
  }
  
  .wallet360-logo-section {
    margin-bottom: 1.25rem;
  }
  
  .wallet360-loading-animation {
    margin-bottom: 1.25rem;
  }
  
  .wallet360-spinner {
    width: 40px;
    height: 40px;
    margin-bottom: 0.75rem;
  }
  
  .wallet360-loading-text {
    font-size: 0.9rem;
  }
  
  .wallet360-progress-container {
    margin-bottom: 1.25rem;
  }
  
  .wallet360-loading-steps {
    max-width: 100%;
    margin-bottom: 1rem;
  }
  
  .wallet360-step {
    padding: 0.375rem 0.5rem;
    margin-bottom: 0.25rem;
  }
  
  .wallet360-step span {
    font-size: 0.75rem;
  }
  
  .wallet360-step i {
    margin-right: 0.375rem;
  }
  
  .wallet360-system-info {
    margin-bottom: 1rem;
    padding: 0.5rem;
  }
  
  .wallet360-info-item {
    font-size: 0.7rem;
    margin-bottom: 0.25rem;
  }
  
  .wallet360-loading-tips {
    padding: 0.5rem;
  }
  
  .wallet360-tip {
    font-size: 0.75rem;
  }
}

@media (max-width: 576px) {
  .wallet360-loading-container {
    padding: 0.5rem;
    max-width: 95%;
    max-height: 95vh;
  }
  
  .wallet360-title {
    font-size: 1.5rem;
  }
  
  .wallet360-subtitle {
    font-size: 0.8rem;
  }
  
  .wallet360-logo-animated {
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
  }
  
  .wallet360-logo-animated .w-12 {
    width: 2rem;
    height: 2rem;
  }
  
  .wallet360-logo-section {
    margin-bottom: 1rem;
  }
  
  .wallet360-loading-animation {
    margin-bottom: 1rem;
  }
  
  .wallet360-spinner {
    width: 35px;
    height: 35px;
    margin-bottom: 0.5rem;
  }
  
  .wallet360-loading-text {
    font-size: 0.8rem;
  }
  
  .wallet360-progress-container {
    margin-bottom: 1rem;
  }
  
  .wallet360-progress-text {
    font-size: 0.7rem;
  }
  
  .wallet360-loading-steps {
    margin-bottom: 0.75rem;
  }
  
  .wallet360-step {
    padding: 0.25rem 0.375rem;
    margin-bottom: 0.2rem;
  }
  
  .wallet360-step span {
    font-size: 0.7rem;
  }
  
  .wallet360-step i {
    margin-right: 0.25rem;
  }
  
  .wallet360-step i.w-4 {
    width: 0.75rem;
    height: 0.75rem;
  }
  
  .wallet360-step-status {
    width: 6px;
    height: 6px;
  }
  
  .wallet360-system-info {
    margin-bottom: 0.75rem;
    padding: 0.375rem;
  }
  
  .wallet360-info-item {
    font-size: 0.65rem;
    margin-bottom: 0.2rem;
    flex-direction: column;
    text-align: center;
    gap: 0.125rem;
  }
  
  .wallet360-info-item i {
    margin-right: 0;
  }
  
  .wallet360-loading-tips {
    padding: 0.375rem;
  }
  
  .wallet360-tip {
    font-size: 0.7rem;
    line-height: 1.2;
  }
}

@media (max-width: 375px) {
  .wallet360-loading-container {
    padding: 0.5rem;
    max-width: 98%;
  }
  
  .wallet360-title {
    font-size: 1.5rem;
  }
  
  .wallet360-subtitle {
    font-size: 0.8rem;
  }
  
  .wallet360-logo-animated {
    width: 40px;
    height: 40px;
  }
  
  .wallet360-logo-animated .w-16 {
    width: 2rem;
    height: 2rem;
  }
  
  .wallet360-spinner {
    width: 35px;
    height: 35px;
  }
  
  .wallet360-loading-text {
    font-size: 0.8rem;
  }
  
  .wallet360-step {
    padding: 0.25rem 0.375rem;
  }
  
  .wallet360-step span {
    font-size: 0.7rem;
  }
  
  .wallet360-system-info {
    padding: 0.375rem;
  }
  
  .wallet360-info-item {
    font-size: 0.65rem;
  }
  
  .wallet360-tip {
    font-size: 0.7rem;
  }
}

/* Landscape orientation adjustments for mobile */
@media (max-height: 600px) and (orientation: landscape) {
  .wallet360-loading-container {
    padding: 0.25rem;
    max-width: 70%;
    transform: scale(0.7);
    max-height: 95vh;
    overflow-y: auto;
  }
  
  .wallet360-logo-section {
    margin-bottom: 0.5rem;
  }
  
  .wallet360-logo-animated {
    width: 30px;
    height: 30px;
    margin-bottom: 0.25rem;
  }
  
  .wallet360-title {
    font-size: 1.25rem;
    margin-bottom: 0.125rem;
  }
  
  .wallet360-subtitle {
    font-size: 0.7rem;
  }
  
  .wallet360-loading-animation {
    margin-bottom: 0.5rem;
  }
  
  .wallet360-spinner {
    width: 25px;
    height: 25px;
    margin-bottom: 0.25rem;
  }
  
  .wallet360-loading-text {
    font-size: 0.7rem;
  }
  
  .wallet360-progress-container {
    margin-bottom: 0.5rem;
  }
  
  .wallet360-progress-text {
    font-size: 0.6rem;
  }
  
  .wallet360-loading-steps {
    margin-bottom: 0.5rem;
  }
  
  .wallet360-step {
    padding: 0.125rem 0.25rem;
    margin-bottom: 0.125rem;
  }
  
  .wallet360-step span {
    font-size: 0.6rem;
  }
  
  .wallet360-system-info {
    margin-bottom: 0.5rem;
    padding: 0.25rem;
  }
  
  .wallet360-info-item {
    font-size: 0.55rem;
    margin-bottom: 0.125rem;
  }
  
  .wallet360-loading-tips {
    padding: 0.25rem;
  }
  
  .wallet360-tip {
    font-size: 0.6rem;
    line-height: 1.1;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .wallet360-spinner-inner {
    border-width: 2px;
  }
  
  .wallet360-progress-bar {
    height: 4px;
  }
  
  .wallet360-step {
    border-width: 1px;
  }
}

/* Light mode specific adjustments (inverso do tema dark) */
@media (prefers-color-scheme: light) {
  .wallet360-loading-screen {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  }
  
  .wallet360-logo-animated {
    background: rgba(41, 98, 255, 0.12);
    box-shadow: 0 4px 20px rgba(41, 98, 255, 0.15);
  }
  
  .wallet360-title {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
  }
  
  .wallet360-subtitle {
    color: #64748b;
  }
  
  .wallet360-loading-text {
    color: #334155;
  }
  
  .wallet360-progress-bar {
    background: #e2e8f0;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .wallet360-progress-fill {
    background: linear-gradient(90deg, #2563eb, #3b82f6);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  }
  
  .wallet360-progress-text {
    color: #475569;
  }
  
  #progressPercent {
    color: #2563eb;
    font-weight: 600;
  }
  
  .wallet360-step {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  .wallet360-step.active {
    background: rgba(37, 99, 235, 0.05);
    border-color: rgba(37, 99, 235, 0.2);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
  }
  
  .wallet360-step.completed {
    background: rgba(34, 197, 94, 0.05);
    border-color: #22c55e;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1);
  }
  
  .wallet360-step i {
    color: #64748b;
  }
  
  .wallet360-step.active i {
    color: #2563eb;
  }
  
  .wallet360-step.completed i {
    color: #22c55e;
  }
  
  .wallet360-step span {
    color: #334155;
  }
  
  .wallet360-step-status {
    background: #cbd5e1;
  }
  
  .wallet360-step.active .wallet360-step-status {
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
  }
  
  .wallet360-step.completed .wallet360-step-status {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
  }
  
  .wallet360-system-info {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  
  .wallet360-info-item {
    color: #64748b;
  }
  
  .wallet360-info-item i {
    color: #2563eb;
  }
  
  #loadingLatency {
    color: #334155;
  }
  
  .wallet360-loading-tips {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.2);
    box-shadow: 0 1px 3px rgba(251, 191, 36, 0.1);
  }
  
  .wallet360-tip {
    color: #92400e;
  }
  
  /* Spinner customization for light mode */
  .wallet360-spinner-inner {
    border-color: #e2e8f0;
    border-top-color: #2563eb;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
  }
  
  /* Ajustes para contraste melhor no tema light */
  .wallet360-loading-container {
    color: #1e293b;
  }
}

/* Dark mode specific adjustments */
@media (prefers-color-scheme: dark) {
  .wallet360-loading-screen {
    background: linear-gradient(135deg, #0a0a0b 0%, #1a1a1d 100%);
  }
  
  .wallet360-logo-animated {
    background: rgba(41, 98, 255, 0.15);
  }
  
  .wallet360-system-info {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  .wallet360-loading-tips {
    background: rgba(255, 167, 38, 0.08);
    border-color: rgba(255, 167, 38, 0.15);
  }
}

/* Forced Light Theme (usando class) */
.light-theme .wallet360-loading-screen,
html.light .wallet360-loading-screen {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
}

.light-theme .wallet360-info-item.cursor-pointer:hover,
html.light .wallet360-info-item.cursor-pointer:hover {
  background-color: rgba(37, 99, 235, 0.08) !important;
  color: var(--tv-color-primary) !important;
}

.light-theme .wallet360-logo-animated,
html.light .wallet360-logo-animated {
  background: rgba(37, 99, 235, 0.12) !important;
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.15) !important;
}

.light-theme .wallet360-title,
html.light .wallet360-title {
  background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.light-theme .wallet360-subtitle,
html.light .wallet360-subtitle {
  color: #64748b !important;
}

.light-theme .wallet360-loading-text,
html.light .wallet360-loading-text {
  color: #334155 !important;
}

.light-theme .wallet360-progress-bar,
html.light .wallet360-progress-bar {
  background: #e2e8f0 !important;
}

.light-theme .wallet360-progress-fill,
html.light .wallet360-progress-fill {
  background: linear-gradient(90deg, #2563eb, #3b82f6) !important;
}

.light-theme .wallet360-step,
html.light .wallet360-step {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

.light-theme .wallet360-step.active,
html.light .wallet360-step.active {
  background: rgba(37, 99, 235, 0.05) !important;
  border-color: rgba(37, 99, 235, 0.2) !important;
}

.light-theme .wallet360-step.completed,
html.light .wallet360-step.completed {
  background: rgba(34, 197, 94, 0.05) !important;
  border-color: #22c55e !important;
}

/* Light Theme Chart Styles */
.light-theme .chart-container,
html.light .chart-container {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

.light-theme .tv-chart-container,
html.light .tv-chart-container {
  background: #ffffff !important;
}

.light-theme .glass,
html.light .glass {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  backdrop-filter: blur(20px) !important;
}

.light-theme .card,
html.light .card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.light-theme .card-header,
html.light .card-header {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #334155 !important;
}

.light-theme .card-content,
html.light .card-content {
  background: #ffffff !important;
  color: #334155 !important;
}

.light-theme .btn,
html.light .btn {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

.light-theme .btn:hover,
html.light .btn:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
}

.light-theme .btn-primary,
html.light .btn-primary {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

.light-theme .btn-primary:hover,
html.light .btn-primary:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

/* Light Theme Text Colors */
.light-theme .text-primary,
html.light .text-primary {
  color: #1f2937 !important;
}

.light-theme .text-secondary,
html.light .text-secondary {
  color: #6b7280 !important;
}

.light-theme .text-muted,
html.light .text-muted {
  color: #9ca3af !important;
}

/* Light Theme Chart Text Variables */
.light-theme,
html.light {
  --tv-color-text-primary: #1f2937 !important;
  --tv-color-text-secondary: #6b7280 !important;
  --tv-color-text-tertiary: #9ca3af !important;
  --tv-color-background: #ffffff !important;
  --tv-color-background-secondary: #f8fafc !important;
  --tv-color-border: #e2e8f0 !important;
  --tv-color-grid: #f1f5f9 !important;
  --tv-color-axis: #94a3b8 !important;
}

/* Light Theme Status Colors */
.light-theme .text-up-500,
html.light .text-up-500 {
  color: #059669 !important;
}

.light-theme .text-down-500,
html.light .text-down-500 {
  color: #dc2626 !important;
}

.light-theme .text-neutral-400,
html.light .text-neutral-400 {
  color: #9ca3af !important;
}

/* Light Theme ECharts Variables */
.light-theme,
html.light {
  --chart-bg-color: #ffffff !important;
  --chart-grid-color: #f1f5f9 !important;
  --chart-text-color: #374151 !important;
  --chart-axis-color: #9ca3af !important;
  --chart-border-color: #e5e7eb !important;
  --chart-tooltip-bg: #ffffff !important;
  --chart-tooltip-border: #d1d5db !important;
  --chart-tooltip-shadow: rgba(0, 0, 0, 0.1) !important;
  
  /* Candlestick colors for light theme */
  --chart-candle-up: #059669 !important;
  --chart-candle-down: #dc2626 !important;
  --chart-candle-up-border: #047857 !important;
  --chart-candle-down-border: #b91c1c !important;
  
  /* Volume colors */
  --chart-volume-up: rgba(5, 150, 105, 0.6) !important;
  --chart-volume-down: rgba(220, 38, 38, 0.6) !important;
}

.light-theme .wallet360-system-info,
html.light .wallet360-system-info {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
}

.light-theme .wallet360-loading-tips,
html.light .wallet360-loading-tips {
  background: rgba(251, 191, 36, 0.08) !important;
  border-color: rgba(251, 191, 36, 0.2) !important;
}

.light-theme .wallet360-tip,
html.light .wallet360-tip {
  color: #92400e !important;
}

.light-theme .wallet360-spinner-inner,
html.light .wallet360-spinner-inner {
  border-color: #e2e8f0 !important;
  border-top-color: #2563eb !important;
}

/* Forced Dark Theme (usando class) */
.dark-theme .wallet360-loading-screen,
html.dark .wallet360-loading-screen {
  background: linear-gradient(135deg, #0a0a0b 0%, #1a1a1d 100%) !important;
}

.dark-theme .wallet360-logo-animated,
html.dark .wallet360-logo-animated {
  background: rgba(41, 98, 255, 0.15) !important;
}

.dark-theme .wallet360-system-info,
html.dark .wallet360-system-info {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-theme .wallet360-loading-tips,
html.dark .wallet360-loading-tips {
  background: rgba(255, 167, 38, 0.08) !important;
  border-color: rgba(255, 167, 38, 0.15) !important;
}

/* Device-specific classes */
.wallet360-loading-container.mobile-device {
  padding: 0.75rem;
  max-width: 95%;
}

.wallet360-loading-container.mobile-device .wallet360-title {
  font-size: 1.75rem;
}

.wallet360-loading-container.mobile-device .wallet360-subtitle {
  font-size: 0.9rem;
}

.wallet360-loading-container.mobile-device .wallet360-logo-animated {
  width: 50px;
  height: 50px;
}

.wallet360-loading-container.tablet-device {
  padding: 1.25rem;
  max-width: 85%;
}

.wallet360-loading-container.tablet-device .wallet360-title {
  font-size: 2.25rem;
}

.wallet360-loading-container.desktop-device {
  padding: 2rem;
  max-width: 500px;
}

/* Orientation-specific classes */
.wallet360-loading-container.landscape-mode.mobile-device {
  transform: scale(0.8);
  max-height: 90vh;
  overflow-y: auto;
}

.wallet360-loading-container.landscape-mode.mobile-device .wallet360-logo-section {
  margin-bottom: 1rem;
}

/* ============== Chart Theme Enhancements ============== */

/* Chart container theming */
.tv-chart-area canvas {
  background: var(--tv-color-chart-background) !important;
}

/* Chart loading state */
.tv-chart-area .chart-loading {
  background: var(--tv-color-pane-background);
  color: var(--tv-color-text);
  border: 1px solid var(--tv-color-border);
  border-radius: var(--tv-border-radius);
}

/* Chart error state */
.tv-chart-area .chart-error {
  background: var(--tv-color-danger-alpha-10);
  color: var(--tv-color-danger);
  border: 1px solid var(--tv-color-danger);
  border-radius: var(--tv-border-radius);
  padding: 20px;
  text-align: center;
}

/* Chart empty state */
.tv-chart-area .chart-empty {
  background: var(--tv-color-pane-background);
  color: var(--tv-color-text-secondary);
  border: 2px dashed var(--tv-color-border);
  border-radius: var(--tv-border-radius);
  padding: 40px 20px;
  text-align: center;
}

/* Chart watermark theming */
.tv-chart-area .chart-watermark {
  color: var(--tv-color-watermark);
  opacity: 0.6;
}

/* Price labels and crosshair */
.tv-chart-area .price-label {
  background: var(--tv-color-pane-background);
  color: var(--tv-color-text);
  border: 1px solid var(--tv-color-border);
  border-radius: var(--tv-border-radius-small);
  box-shadow: 0 2px 4px var(--tv-color-shadow);
}

.tv-chart-area .crosshair-label {
  background: var(--tv-color-info);
  color: var(--tv-color-item-active-text);
  border-radius: var(--tv-border-radius-small);
}

/* Volume bars theming */
.tv-chart-area .volume-up {
  fill: var(--tv-color-volume-up);
}

.tv-chart-area .volume-down {
  fill: var(--tv-color-volume-down);
}

/* Technical indicators */
.tv-chart-area .indicator-line {
  opacity: 0.8;
}

.tv-chart-area .indicator-fill {
  opacity: 0.1;
}

/* Chart grid lines */
.tv-chart-area .grid-line {
  stroke: var(--tv-color-grid);
  stroke-width: 1;
  opacity: 0.5;
}

/* Chart axes */
.tv-chart-area .axis-text {
  fill: var(--tv-color-text-secondary);
  font-size: 11px;
}

/* Light theme specific chart adjustments */
html:not(.dark) .tv-chart-area {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

html:not(.dark) .tv-chart-area .grid-line {
  opacity: 0.3;
}

html:not(.dark) .tv-chart-area .chart-watermark {
  opacity: 0.4;
}

/* Dark theme specific chart adjustments */
html.dark .tv-chart-area {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html.dark .tv-chart-area .grid-line {
  opacity: 0.6;
}

/* Responsive chart theming */
@media (max-width: 768px) {
  .tv-chart-area {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  
  .tv-chart-area .price-label {
    font-size: 10px;
    padding: 2px 4px;
  }
  
  .tv-chart-area .axis-text {
    font-size: 9px;
  }
}

/* ======================================
   FINANCIAL COLOR MANAGER STYLES
   ====================================== */

/* Theme Selector Container */
.theme-selector-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--finance-backgroundSecondary);
  border: 1px solid var(--finance-border);
  border-radius: 6px;
  margin: 8px;
}

.theme-selector-container label {
  font-size: 12px;
  font-weight: 500;
  color: var(--finance-textSecondary);
  white-space: nowrap;
}

#themeSelector {
  padding: 4px 8px;
  border: 1px solid var(--finance-border);
  border-radius: 4px;
  background: var(--finance-background);
  color: var(--finance-textPrimary);
  font-size: 12px;
  min-width: 200px;
  transition: all 0.2s ease;
}

#themeSelector:hover {
  border-color: var(--finance-primary);
  box-shadow: 0 0 0 2px rgba(40, 140, 250, 0.1);
}

#themeSelector:focus {
  outline: none;
  border-color: var(--finance-primary);
  box-shadow: 0 0 0 3px rgba(40, 140, 250, 0.2);
}

#currentThemeIndicator {
  font-size: 11px;
  font-weight: 600;
  color: var(--finance-primary);
  padding: 2px 6px;
  background: rgba(40, 140, 250, 0.1);
  border-radius: 4px;
  white-space: nowrap;
}

/* Enhanced Financial Components */
.tv-price-positive {
  color: var(--finance-positive) !important;
  font-weight: 600;
}

.tv-price-negative {
  color: var(--finance-negative) !important;
  font-weight: 600;
}

.tv-price-neutral {
  color: var(--finance-neutral) !important;
}

/* Financial Cards with Theme Support */
.tv-financial-card {
  background: var(--finance-backgroundSecondary);
  border: 1px solid var(--finance-border);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.2s ease;
}

.tv-financial-card:hover {
  border-color: var(--finance-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(40, 140, 250, 0.15);
}

.tv-financial-card-header {
  color: var(--finance-textPrimary);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}

.tv-financial-card-value {
  color: var(--finance-primary);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

.tv-financial-card-subtitle {
  color: var(--finance-textMuted);
  font-size: 12px;
}

/* Enhanced Buttons with Financial Colors */
.tv-btn-primary {
  background: var(--finance-primary);
  color: var(--finance-textOnPrimary);
  border: 1px solid var(--finance-primary);
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.tv-btn-primary:hover {
  background: var(--finance-hover);
  border-color: var(--finance-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(40, 140, 250, 0.3);
}

.tv-btn-secondary {
  background: var(--finance-backgroundSecondary);
  color: var(--finance-textPrimary);
  border: 1px solid var(--finance-border);
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.tv-btn-secondary:hover {
  background: var(--finance-backgroundTertiary);
  border-color: var(--finance-primary);
}

/* Trading Status Indicators */
.tv-status-positive {
  background: var(--finance-positive);
  color: var(--finance-textOnPrimary);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.tv-status-negative {
  background: var(--finance-negative);
  color: var(--finance-textOnPrimary);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.tv-status-warning {
  background: var(--finance-warning);
  color: var(--finance-textOnPrimary);
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

/* Chart Container Enhancement */
.tv-chart-container {
  background: var(--finance-background);
  border: 1px solid var(--finance-border);
  border-radius: 8px;
  overflow: hidden;
}

/* Financial Data Tables */
.tv-financial-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--finance-backgroundSecondary);
  border-radius: 8px;
  overflow: hidden;
}

.tv-financial-table th {
  background: var(--finance-backgroundDeep);
  color: var(--finance-textOnDark);
  padding: 12px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tv-financial-table td {
  padding: 12px;
  border-bottom: 1px solid var(--finance-border);
  color: var(--finance-textPrimary);
  font-size: 13px;
}

.tv-financial-table tr:hover {
  background: var(--finance-backgroundTertiary);
}

/* Enhanced Tooltips */
.tv-tooltip-financial {
  background: var(--finance-backgroundDeep);
  color: var(--finance-textOnDark);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(16, 55, 102, 0.3);
  border: 1px solid var(--finance-primary);
}

/* Time-based Theme Indicators */
.tv-time-indicator {
  position: fixed;
  top: 10px;
  right: 10px;
  background: var(--finance-backgroundDeep);
  color: var(--finance-textOnDark);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  z-index: 1000;
  opacity: 0.8;
}

/* ===============================================
   DYNAMIC THEME APPLICATION SYSTEM
   =============================================== */

/* Classic Blue Theme - Professional Financial */
[data-theme="classic-blue"] {
  --theme-bg-rgb: 189, 196, 208;
  --theme-text-rgb: 36, 44, 52;
  --theme-accent-rgb: 40, 140, 250;
  
  /* Apply Classic Blue Finance Variables */
  --finance-primary: #288cfa;
  --finance-secondary: #7ebcf9;
  --finance-accent: #103766;
  --finance-background: #bdc4d0;
  --finance-backgroundSecondary: #d4dae3;
  --finance-backgroundTertiary: #e8ecf2;
  --finance-backgroundDeep: #103766;
  --finance-textPrimary: #242c34;
  --finance-textSecondary: #3c4852;
  --finance-textMuted: #5a6670;
  --finance-textOnPrimary: #ffffff;
  --finance-textOnDark: #ffffff;
  --finance-positive: #22c55e;
  --finance-negative: #ef4444;
  --finance-neutral: #6b7280;
  --finance-warning: #f59e0b;
  --finance-grid: #c1c9d2;
  --finance-axis: #8892a0;
  --finance-border: #9ca8b4;
  --finance-hover: #1d4ed8;
  --finance-active: #1e40af;
  --finance-focus: #2563eb;
  --finance-disabled: #9ca3af;
  
  /* Apply to TradingView variables */
  --tv-color-platform-background: var(--finance-background);
  --tv-color-pane-background: var(--finance-backgroundSecondary);
  --tv-color-pane-background-secondary: var(--finance-backgroundTertiary);
  --tv-color-text: var(--finance-textPrimary) !important;
  --tv-color-border: var(--finance-border);
  --tv-color-chart-background: var(--finance-background);
}

/* Navy Professional Theme - Corporate Excellence */
[data-theme="navy-professional"] {
  --theme-bg-rgb: 241, 245, 249;
  --theme-text-rgb: 15, 23, 42;
  --theme-accent-rgb: 30, 64, 175;
  
  /* Apply Navy Professional Variables */
  --finance-primary: #1e40af;
  --finance-secondary: #3b82f6;
  --finance-accent: #0f172a;
  --finance-background: #f1f5f9;
  --finance-backgroundSecondary: #e2e8f0;
  --finance-backgroundTertiary: #cbd5e1;
  --finance-backgroundDeep: #0f172a;
  --finance-textPrimary: #0f172a;
  --finance-textSecondary: #334155;
  --finance-textMuted: #64748b;
  --finance-textOnPrimary: #ffffff;
  --finance-textOnDark: #ffffff;
  --finance-positive: #059669;
  --finance-negative: #dc2626;
  --finance-neutral: #6b7280;
  --finance-warning: #d97706;
  --finance-grid: #e2e8f0;
  --finance-axis: #94a3b8;
  --finance-border: #cbd5e1;
  --finance-hover: #1d4ed8;
  --finance-active: #1e40af;
  --finance-focus: #2563eb;
  --finance-disabled: #9ca3af;
  
  /* Apply to TradingView variables */
  --tv-color-platform-background: var(--finance-background);
  --tv-color-pane-background: var(--finance-backgroundSecondary);
  --tv-color-pane-background-secondary: var(--finance-backgroundTertiary);
  --tv-color-text: var(--finance-textPrimary) !important;
  --tv-color-border: var(--finance-border);
  --tv-color-chart-background: var(--finance-background);
}

/* Emerald Wealth Theme - Prosperity Focus */
[data-theme="emerald-wealth"] {
  --theme-bg-rgb: 236, 253, 245;
  --theme-text-rgb: 6, 78, 59;
  --theme-accent-rgb: 5, 150, 105;
  
  /* Apply Emerald Wealth Variables */
  --finance-primary: #059669;
  --finance-secondary: #10b981;
  --finance-accent: #064e3b;
  --finance-background: #ecfdf5;
  --finance-backgroundSecondary: #d1fae5;
  --finance-backgroundTertiary: #a7f3d0;
  --finance-backgroundDeep: #064e3b;
  --finance-textPrimary: #064e3b;
  --finance-textSecondary: #047857;
  --finance-textMuted: #065f46;
  --finance-textOnPrimary: #ffffff;
  --finance-textOnDark: #ffffff;
  --finance-positive: #059669;
  --finance-negative: #dc2626;
  --finance-neutral: #6b7280;
  --finance-warning: #d97706;
  --finance-grid: #d1fae5;
  --finance-axis: #6ee7b7;
  --finance-border: #a7f3d0;
  --finance-hover: #047857;
  --finance-active: #059669;
  --finance-focus: #10b981;
  --finance-disabled: #9ca3af;
  
  /* Apply to TradingView variables */
  --tv-color-platform-background: var(--finance-background);
  --tv-color-pane-background: var(--finance-backgroundSecondary);
  --tv-color-pane-background-secondary: var(--finance-backgroundTertiary);
  --tv-color-text: var(--finance-textPrimary) !important;
  --tv-color-border: var(--finance-border);
  --tv-color-chart-background: var(--finance-background);
}

/* Sunset Trading Theme - Warm Energy */
[data-theme="sunset-trading"] {
  --theme-bg-rgb: 255, 247, 237;
  --theme-text-rgb: 124, 45, 18;
  --theme-accent-rgb: 234, 88, 12;
  
  /* Apply Sunset Trading Variables */
  --finance-primary: #ea580c;
  --finance-secondary: #fb923c;
  --finance-accent: #7c2d12;
  --finance-background: #fff7ed;
  --finance-backgroundSecondary: #fed7aa;
  --finance-backgroundTertiary: #fdba74;
  --finance-backgroundDeep: #7c2d12;
  --finance-textPrimary: #7c2d12;
  --finance-textSecondary: #9a3412;
  --finance-textMuted: #c2410c;
  --finance-textOnPrimary: #ffffff;
  --finance-textOnDark: #ffffff;
  --finance-positive: #059669;
  --finance-negative: #dc2626;
  --finance-neutral: #6b7280;
  --finance-warning: #d97706;
  --finance-grid: #fed7aa;
  --finance-axis: #fb923c;
  --finance-border: #fdba74;
  --finance-hover: #c2410c;
  --finance-active: #ea580c;
  --finance-focus: #fb923c;
  --finance-disabled: #9ca3af;
  
  /* Apply to TradingView variables */
  --tv-color-platform-background: var(--finance-background);
  --tv-color-pane-background: var(--finance-backgroundSecondary);
  --tv-color-pane-background-secondary: var(--finance-backgroundTertiary);
  --tv-color-text: var(--finance-textPrimary) !important;
  --tv-color-border: var(--finance-border);
  --tv-color-chart-background: var(--finance-background);
}

/* Midnight Trader Theme - Professional Dark */
[data-theme="midnight-trader"] {
  --theme-bg-rgb: 15, 23, 42;
  --theme-text-rgb: 248, 250, 252;
  --theme-accent-rgb: 59, 130, 246;
  
  /* Apply Midnight Trader Variables */
  --finance-primary: #3b82f6;
  --finance-secondary: #60a5fa;
  --finance-accent: #1e293b;
  --finance-background: #0f172a;
  --finance-backgroundSecondary: #1e293b;
  --finance-backgroundTertiary: #334155;
  --finance-backgroundDeep: #020617;
  --finance-textPrimary: #f8fafc;
  --finance-textSecondary: #e2e8f0;
  --finance-textMuted: #cbd5e1;
  --finance-textOnPrimary: #ffffff;
  --finance-textOnDark: #ffffff;
  --finance-positive: #22c55e;
  --finance-negative: #ef4444;
  --finance-neutral: #6b7280;
  --finance-warning: #f59e0b;
  --finance-grid: #334155;
  --finance-axis: #64748b;
  --finance-border: #475569;
  --finance-hover: #2563eb;
  --finance-active: #3b82f6;
  --finance-focus: #60a5fa;
  --finance-disabled: #64748b;
  
  /* Apply to TradingView variables */
  --tv-color-platform-background: var(--finance-background);
  --tv-color-pane-background: var(--finance-backgroundSecondary);
  --tv-color-pane-background-secondary: var(--finance-backgroundTertiary);
  --tv-color-text: var(--finance-textPrimary) !important;
  --tv-color-border: var(--finance-border);
  --tv-color-chart-background: var(--finance-background);
}

/* Theme Application Animation */
[data-theme] {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Apply theme colors to all elements */
[data-theme] * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Force immediate application of theme styles */
[data-theme] body {
  background: var(--finance-background) !important;
  color: var(--finance-textPrimary) !important;
}

[data-theme] .tv-main {
  background: var(--finance-background) !important;
}

[data-theme] .tv-sidebar {
  background: var(--finance-backgroundSecondary) !important;
  border-color: var(--finance-border) !important;
}

[data-theme] .tv-panel {
  background: var(--finance-backgroundSecondary) !important;
  border-color: var(--finance-border) !important;
}

[data-theme] .tv-panel-header {
  background: var(--finance-backgroundTertiary) !important;
  color: var(--finance-textPrimary) !important;
  border-color: var(--finance-border) !important;
}

[data-theme] .tv-panel-content {
  background: var(--finance-backgroundSecondary) !important;
  color: var(--finance-textPrimary) !important;
}

[data-theme] .tv-chart-area {
  background: var(--finance-background) !important;
  border-color: var(--finance-border) !important;
}

[data-theme] .tv-header {
  background: var(--finance-backgroundSecondary) !important;
  border-color: var(--finance-border) !important;
}

/* Theme-specific text color enforcement */
[data-theme] h1, [data-theme] h2, [data-theme] h3, 
[data-theme] h4, [data-theme] h5, [data-theme] h6,
[data-theme] p, [data-theme] span, [data-theme] div,
[data-theme] label, [data-theme] button {
  color: var(--finance-textPrimary) !important;
}

[data-theme] .tv-theme-card .tv-theme-name,
[data-theme] .tv-theme-card .tv-theme-description {
  color: inherit !important;
}

/* Theme card active state override */
[data-theme] .tv-theme-card.active {
  background: var(--finance-primary) !important;
  color: var(--finance-textOnPrimary) !important;
}

[data-theme] .tv-theme-card.active .tv-theme-name,
[data-theme] .tv-theme-card.active .tv-theme-description {
  color: var(--finance-textOnPrimary) !important;
}

/* ===============================================
   TRADINGVIEW INSPIRED THEMES
   =============================================== */

/* TradingView Dark Theme */
[data-theme="tradingview-dark"] {
  --theme-bg-rgb: 19, 23, 34;
  --theme-text-rgb: 209, 212, 220;
  --theme-accent-rgb: 41, 98, 255;
  
  --finance-primary: #2962ff;
  --finance-secondary: #5d7df8;
  --finance-accent: #1848cc;
  --finance-background: #131722;
  --finance-backgroundSecondary: #1e222d;
  --finance-backgroundTertiary: #2a2e39;
  --finance-backgroundDeep: #0f1419;
  --finance-textPrimary: #d1d4dc;
  --finance-textSecondary: #787b86;
  --finance-textMuted: #555960;
  --finance-textOnPrimary: #ffffff;
  --finance-textOnDark: #d1d4dc;
  --finance-positive: #089981;
  --finance-negative: #f23645;
  --finance-neutral: #787b86;
  --finance-warning: #ff9800;
  --finance-grid: #363a45;
  --finance-axis: #555960;
  --finance-border: #434651;
  --finance-hover: #4285f4;
  --finance-active: #2962ff;
  --finance-focus: #5d7df8;
  --finance-disabled: #555960;
  
  --tv-color-platform-background: var(--finance-background);
  --tv-color-pane-background: var(--finance-backgroundSecondary);
  --tv-color-pane-background-secondary: var(--finance-backgroundTertiary);
  --tv-color-text: var(--finance-textPrimary) !important;
  --tv-color-border: var(--finance-border);
  --tv-color-chart-background: var(--finance-background);
}

/* TradingView Light Theme */
[data-theme="tradingview-light"] {
  --theme-bg-rgb: 255, 255, 255;
  --theme-text-rgb: 19, 23, 34;
  --theme-accent-rgb: 41, 98, 255;
  
  --finance-primary: #2962ff;
  --finance-secondary: #5d7df8;
  --finance-accent: #1848cc;
  --finance-background: #ffffff;
  --finance-backgroundSecondary: #f7f9fb;
  --finance-backgroundTertiary: #eff3f7;
  --finance-backgroundDeep: #e8ecf2;
  --finance-textPrimary: #131722;
  --finance-textSecondary: #5d6588;
  --finance-textMuted: #9598a1;
  --finance-textOnPrimary: #ffffff;
  --finance-textOnDark: #ffffff;
  --finance-positive: #089981;
  --finance-negative: #f23645;
  --finance-neutral: #787b86;
  --finance-warning: #ff9800;
  --finance-grid: #e8ecf2;
  --finance-axis: #9598a1;
  --finance-border: #d9dde4;
  --finance-hover: #4285f4;
  --finance-active: #2962ff;
  --finance-focus: #5d7df8;
  --finance-disabled: #9598a1;
  
  --tv-color-platform-background: var(--finance-background);
  --tv-color-pane-background: var(--finance-backgroundSecondary);
  --tv-color-pane-background-secondary: var(--finance-backgroundTertiary);
  --tv-color-text: var(--finance-textPrimary) !important;
  --tv-color-border: var(--finance-border);
  --tv-color-chart-background: var(--finance-background);
}

/* Monokai Pro Theme */
[data-theme="monokai-pro"] {
  --theme-bg-rgb: 45, 42, 46;
  --theme-text-rgb: 252, 252, 250;
  --theme-accent-rgb: 252, 97, 141;
  
  --finance-primary: #fc618d;
  --finance-secondary: #fd9353;
  --finance-accent: #948ae3;
  --finance-background: #2d2a2e;
  --finance-backgroundSecondary: #403e41;
  --finance-backgroundTertiary: #5b595c;
  --finance-backgroundDeep: #19181a;
  --finance-textPrimary: #fcfcfa;
  --finance-textSecondary: #c1c0c0;
  --finance-textMuted: #939293;
  --finance-textOnPrimary: #ffffff;
  --finance-textOnDark: #fcfcfa;
  --finance-positive: #5fb3a3;
  --finance-negative: #fc618d;
  --finance-neutral: #939293;
  --finance-warning: #fce566;
  --finance-grid: #5b595c;
  --finance-axis: #939293;
  --finance-border: #6a6868;
  --finance-hover: #fd9353;
  --finance-active: #fc618d;
  --finance-focus: #948ae3;
  --finance-disabled: #6a6868;
  
  --tv-color-platform-background: var(--finance-background);
  --tv-color-pane-background: var(--finance-backgroundSecondary);
  --tv-color-pane-background-secondary: var(--finance-backgroundTertiary);
  --tv-color-text: var(--finance-textPrimary) !important;
  --tv-color-border: var(--finance-border);
  --tv-color-chart-background: var(--finance-background);
}

/* Nord Theme */
[data-theme="nord-theme"] {
  --theme-bg-rgb: 59, 66, 82;
  --theme-text-rgb: 236, 239, 244;
  --theme-accent-rgb: 94, 129, 172;
  
  --finance-primary: #5e81ac;
  --finance-secondary: #81a1c1;
  --finance-accent: #88c0d0;
  --finance-background: #3b4252;
  --finance-backgroundSecondary: #434c5e;
  --finance-backgroundTertiary: #4c566a;
  --finance-backgroundDeep: #2e3440;
  --finance-textPrimary: #eceff4;
  --finance-textSecondary: #d8dee9;
  --finance-textMuted: #a3be8c;
  --finance-textOnPrimary: #2e3440;
  --finance-textOnDark: #eceff4;
  --finance-positive: #a3be8c;
  --finance-negative: #bf616a;
  --finance-neutral: #d8dee9;
  --finance-warning: #ebcb8b;
  --finance-grid: #4c566a;
  --finance-axis: #81a1c1;
  --finance-border: #5e81ac;
  --finance-hover: #88c0d0;
  --finance-active: #5e81ac;
  --finance-focus: #8fbcbb;
  --finance-disabled: #616e88;
  
  --tv-color-platform-background: var(--finance-background);
  --tv-color-pane-background: var(--finance-backgroundSecondary);
  --tv-color-pane-background-secondary: var(--finance-backgroundTertiary);
  --tv-color-text: var(--finance-textPrimary) !important;
  --tv-color-border: var(--finance-border);
  --tv-color-chart-background: var(--finance-background);
}

/* Cyberpunk Neon Theme */
[data-theme="cyberpunk-neon"] {
  --theme-bg-rgb: 13, 17, 23;
  --theme-text-rgb: 240, 246, 252;
  --theme-accent-rgb: 0, 255, 255;
  
  --finance-primary: #00ffff;
  --finance-secondary: #ff00ff;
  --finance-accent: #ffff00;
  --finance-background: #0d1117;
  --finance-backgroundSecondary: #161b22;
  --finance-backgroundTertiary: #21262d;
  --finance-backgroundDeep: #010409;
  --finance-textPrimary: #f0f6fc;
  --finance-textSecondary: #8b949e;
  --finance-textMuted: #6e7681;
  --finance-textOnPrimary: #0d1117;
  --finance-textOnDark: #f0f6fc;
  --finance-positive: #00ff41;
  --finance-negative: #ff0055;
  --finance-neutral: #8b949e;
  --finance-warning: #ffeb3b;
  --finance-grid: #30363d;
  --finance-axis: #484f58;
  --finance-border: #8b949e;
  --finance-hover: #58a6ff;
  --finance-active: #00ffff;
  --finance-focus: #ff00ff;
  --finance-disabled: #484f58;
  
  --tv-color-platform-background: var(--finance-background);
  --tv-color-pane-background: var(--finance-backgroundSecondary);
  --tv-color-pane-background-secondary: var(--finance-backgroundTertiary);
  --tv-color-text: var(--finance-textPrimary) !important;
  --tv-color-border: var(--finance-border);
  --tv-color-chart-background: var(--finance-background);
}

/* Minimalist White Theme */
[data-theme="minimalist-white"] {
  --theme-bg-rgb: 255, 255, 255;
  --theme-text-rgb: 0, 0, 0;
  --theme-accent-rgb: 0, 0, 0;
  
  --finance-primary: #000000;
  --finance-secondary: #333333;
  --finance-accent: #666666;
  --finance-background: #ffffff;
  --finance-backgroundSecondary: #fafafa;
  --finance-backgroundTertiary: #f5f5f5;
  --finance-backgroundDeep: #eeeeee;
  --finance-textPrimary: #000000;
  --finance-textSecondary: #333333;
  --finance-textMuted: #666666;
  --finance-textOnPrimary: #ffffff;
  --finance-textOnDark: #ffffff;
  --finance-positive: #4caf50;
  --finance-negative: #f44336;
  --finance-neutral: #999999;
  --finance-warning: #ff9800;
  --finance-grid: #e0e0e0;
  --finance-axis: #bdbdbd;
  --finance-border: #dddddd;
  --finance-hover: #757575;
  --finance-active: #424242;
  --finance-focus: #000000;
  --finance-disabled: #bdbdbd;
  
  --tv-color-platform-background: var(--finance-background);
  --tv-color-pane-background: var(--finance-backgroundSecondary);
  --tv-color-pane-background-secondary: var(--finance-backgroundTertiary);
  --tv-color-text: var(--finance-textPrimary) !important;
  --tv-color-border: var(--finance-border);
  --tv-color-chart-background: var(--finance-background);
}

/* Matrix Green Theme */
[data-theme="matrix-green"] {
  --theme-bg-rgb: 0, 0, 0;
  --theme-text-rgb: 0, 255, 0;
  --theme-accent-rgb: 0, 255, 0;
  
  --finance-primary: #00ff00;
  --finance-secondary: #33ff33;
  --finance-accent: #66ff66;
  --finance-background: #000000;
  --finance-backgroundSecondary: #001100;
  --finance-backgroundTertiary: #002200;
  --finance-backgroundDeep: #000000;
  --finance-textPrimary: #00ff00;
  --finance-textSecondary: #00cc00;
  --finance-textMuted: #009900;
  --finance-textOnPrimary: #000000;
  --finance-textOnDark: #00ff00;
  --finance-positive: #00ff00;
  --finance-negative: #ff3333;
  --finance-neutral: #888888;
  --finance-warning: #ffff00;
  --finance-grid: #003300;
  --finance-axis: #006600;
  --finance-border: #009900;
  --finance-hover: #66ff66;
  --finance-active: #00ff00;
  --finance-focus: #99ff99;
  --finance-disabled: #004400;
  
  --tv-color-platform-background: var(--finance-background);
  --tv-color-pane-background: var(--finance-backgroundSecondary);
  --tv-color-pane-background-secondary: var(--finance-backgroundTertiary);
  --tv-color-text: var(--finance-textPrimary) !important;
  --tv-color-border: var(--finance-border);
  --tv-color-chart-background: var(--finance-background);
}

/* Responsive Theme Selector */
@media (max-width: 768px) {
  .theme-selector-container {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 6px;
  }
  
  .theme-selector-container label {
    font-size: 11px;
  }
  
  #themeSelector {
    font-size: 11px;
    min-width: auto;
  }
  
  #currentThemeIndicator {
    font-size: 10px;
    text-align: center;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .tv-chart-area {
    border-width: 2px;
  }
  
  .tv-chart-area .grid-line {
    opacity: 0.8;
    stroke-width: 1.5;
  }
  
  .tv-chart-area .price-label {
    border-width: 2px;
    font-weight: bold;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .tv-chart-area,
  .tv-chart-area * {
    transition: none !important;
    animation: none !important;
  }
}

.wallet360-loading-container.landscape-mode.mobile-device .wallet360-loading-animation {
  margin-bottom: 1rem;
}

.wallet360-loading-container.landscape-mode.mobile-device .wallet360-loading-steps {
  margin-bottom: 1rem;
}

/* Performance optimizations for mobile */
.wallet360-loading-container.mobile-device .wallet360-spinner-inner {
  will-change: transform;
}

.wallet360-loading-container.mobile-device .wallet360-progress-fill {
  will-change: width;
}

.wallet360-loading-container.mobile-device .wallet360-step {
  will-change: transform, background-color;
}

/* Touch-friendly adjustments */
.wallet360-loading-container.mobile-device .wallet360-step {
  min-height: 44px; /* iOS touch target minimum */
  padding: 0.5rem 0.75rem;
}

.wallet360-loading-container.mobile-device .wallet360-system-info {
  padding: 0.75rem;
}

.wallet360-loading-container.mobile-device .wallet360-info-item {
  min-height: 32px;
  padding: 0.25rem 0;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .wallet360-spinner-inner {
    animation: none;
  }
  
  .wallet360-logo-animated {
    animation: none;
  }
  
  .wallet360-progress-fill {
    animation: none;
  }
  
  .wallet360-step.active .wallet360-step-status {
    animation: none;
  }
}