@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

/* ============================================================================
   ОБЩИЕ ПЕРЕМЕННЫЕ (не зависят от темы)
   ============================================================================ */
:root {
  --table-layout-mode: auto;
  --col-width-latest-price: 10ch;
  --col-width-change-price: 9ch;
  --col-width-change-percent: 7ch;
  --col-width-high-low: 14ch;
  --col-width-funding-rate: 8ch;
  --col-width-cost: 10ch;
  --col-width-share: 7ch;
  --col-width-pnl: 12ch;
  --col-width-value: 12ch;
  --col-width-gain-loss-percent: 7ch;
  --table-header-height: 25px;
  --theme-transition-duration: 180ms;
  --theme-transition-easing: ease;
  --primary-font-family: "Poppins", sans-serif;
  --table-font-family: var(--primary-font-family);
  --snippet-icon-size: 16px;
  --snippet-add-icon-size: 35px;
  --actions-button-icon-size: 15px;
  --alert-bell-icon-size: 13px;
  --scrollbar-width: 9px;
  --chart-crosshair-style: dashed;
}

/* ============================================================================
   ТЕМНАЯ ТЕМА (по умолчанию)
   ============================================================================ */
:root {
  /* Layout control */
  /* auto layout; widths stabilized via inline spans */

  /* Optional width hints for numeric columns (in ch = width of '0') */
  --body-bg: #353535;
  --body-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 15 15'%3E %3Ccircle cx='1' cy='1' r='1' opacity='0.25' fill='%236B6B6B' /%3E %3Ccircle cx='8' cy='8' r='1' opacity='0.25' fill='%236B6B6B' /%3E %3C/svg%3E");
  --link-color: #666666;
  --text-main: #b3b3b3;

  --status-active-color: rgb(48, 148, 100);
  /* Decoupled from positive change */
  --positive-change-color: rgb(79, 162, 105);
  --negative-change-color: rgb(199, 124, 77);
  --warning-change-color: rgb(175, 108, 26);
  --danger-change-color: rgb(140, 92, 70);


  /* Portfolio table defaults - NOW MANAGED BY PortfolioSettingsModal.js */
  /*
  --portfolio-symbol-bg: #3d3d3d;
  --portfolio-symbol-color: #a38137;
  --portfolio-cell-bg: linear-gradient(#3f3f3f, #3b3b3b);
  --portfolio-cell-shadow: 0 0 10px rgba(31, 31, 31, 0.3);
  --portfolio-cell-text-strong: #818080;
  --portfolio-cell-text-primary: #7d7e83;
  --portfolio-total-bg: linear-gradient(transparent, #363636);
  --portfolio-total-text: #7d7e83;
  */

  /* Modal & form defaults (dark theme) */
  --modal-backdrop-bg: rgba(0, 0, 0, 0.4);
  --modal-surface-bg: #353535;
  --modal-action-bg: #3e3e3e;
  --modal-surface-border: 1px solid #333333;
  --modal-surface-radius: 2px;
  --modal-surface-shadow: 0 0 20px rgba(0, 0, 0, 0.35);
  --modal-text-color: #978c8c;
  --modal-title-color: #999;
  --modal-label-bg: #383838;
  --modal-label-color: #8f7f7f;
  --modal-input-bg: #2c2c2c;
  --modal-input-border: 1px solid #393939;
  --modal-input-color: #868686;
  --modal-input-shadow: inset 0 0 10px rgba(65, 65, 65, 0.5);
  --modal-icon-color: #727272;
  --modal-button-bg: #393939;
  --modal-button-color: #6e6e6e;

  /* Form specific dark overrides (User requested darker inputs) */
  --form-input-bg: #414141;
  --form-input-hover-bg: #434141;
  --form-label-bg: #4a4a4a;
  --form-submit-bg: var(--auth-accent);
  /* reuse accent */
  --form-submit-text: #ffffff;
  --form-submit-hover-bg: #eda326;
  /* Slightly darker/lighter depending on accent logic */

  /* Table defaults (dark theme) */
  --table-header-height: 25px;
  --table-bg: #353535;
  --table-border: 10px solid #343434;
  --table-shadow: -2px -2px 8px #2f2f2f,
    2px 2px 15px #2b2b2b;
  --table-cell-color: #555555;
  --table-header-bg: linear-gradient(transparent, #363636);
  --table-header-border: 1px solid #3b3a3a;
  --table-header-shadow: -2px -2px 10px #2b2b2b,
    5px 5px 15px #2b2b2b;
  --table-header-color: #7a7a7a;

  /* Chart structural colors (dark theme) */
  --chart-grid-color: rgba(200, 200, 200, 0.2);
  /* Светло-серая сетка для темной темы */
  --chart-time-scale-color: #7d7e83;
  --chart-price-scale-color: #7d7e83;
  --chart-axis-line-color: rgba(83, 83, 83, 0.8);
  --chart-zero-line-color: #64B5F6;
  /* Светло-синий для нулевой линии (темная тема) */
  /* Solid spine border */
  --chart-tooltip-bg: rgba(53, 53, 53, 0.9);
  --chart-tooltip-border: rgba(85, 85, 85, 0.5);
  --chart-tooltip-title-color: #b3b3b3;
  --chart-tooltip-body-color: #7d7e83;
  --chart-bg-color: #353535;
  /* Slightly darker than dashboard bg */
  --portfolio-dashboard-bg: #353535;

  /* Navigation (dark theme) */
  --nav-item-active-color: #3d94ff;
  /* Default accent blue */

  /* Payment Info (dark theme) */
  --payment-amount-color: #3d94ff;
  --payment-icon-color: #3d94ff;

  /* Plan Buttons (dark theme) */
  --plan-btn-bg: rgba(93, 93, 93, 0.426);
  --plan-btn-border: transparent;
  --plan-btn-text: #999999;
  --plan-btn-hover-bg: rgba(255, 255, 255, 0.08);
  --plan-btn-active-text: #ffffff;
  --plan-btn-curtain-opacity: 0.2;

  /* Subscription Modal Header (dark theme) */
  --subscription-title-color: #ffffff;
  --subscription-title-size: 1.5rem;
  --subscription-title-weight: 700;

  --sub-card-bg: #414141;
  /* Same as table-bg default for dark */

  /* Calendar / Flatpickr (dark theme) */
  --calendar-text-color: #999999;
  --calendar-active-color: #3d94ff;
  --calendar-active-bg: rgba(255, 255, 255, 0.1);
  /* Light gray background for active day */
  /* Explicit Blue */

  /* Delete Button */
  --delete-button-color: #ff5252;

  /* Date/time component defaults (dark theme) */
  --date-time-color: #7d7e84;
  --date-time-cell-bg: linear-gradient(#3f3f3f, #3b3b3b);
  --date-time-cell-shadow: 0px 0px 10px rgba(31, 31, 31, 0.3);
  --date-component-color: #7b7b7b;

  /* Range slider defaults (dark theme) */
  --range-slider-bg-left: #cd5c5c23;
  --range-slider-bg-center: #cd5c5c;
  --range-slider-bg-center-separator: #ffffff;
  --range-slider-bg-right: #228b22;
  --range-slider-bg-right-end: #228b2222;
  --range-slider-thumb-bg: #69b2d6;
  --range-average-divider-bg: rgb(73, 105, 164);

  /* Rectangular indicator defaults (dark theme) */
  --rect-indicator-bg: #3a3a3a;
  --rect-indicator-fill: #454444;
  --rect-indicator-text: #898989;

  /* Button and icon defaults (dark theme) */
  --edit-button-color: #ffc107;
  --delete-button-color: #ff5a07;
  --notes-button-color: #e1c573;
  --calculator-button-color: #add3f6;
  --actions-button-color: #838383;
  --math-button-color: #d8a830;
  /* Form (dark theme) */
  --form-container-bg: #2d2d2d;
  --form-container-border: #333;
  /* --form-label-bg: #383838; Removed duplicate */
  /* --form-input-bg: #3c3c3c; Removed duplicate */
  --form-input-border: #393939;
  --form-input-text: #6e6e6e;
  --form-input-placeholder: #6e6e6e;
  /* --form-input-hover-bg: #353434; Removed duplicate */
  --form-input-hover-border: #444444;
  --form-submit-bg: #3e3e3e;
  --form-submit-text: #777777;
  --form-submit-hover-bg: #454545;
  --form-container-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  --form-input-shadow: inset 0 0 10px rgba(65, 65, 65, 0.5);
  --form-submit-shadow: inset 0 0 10px rgb(78 78 78 / 50%);
  --form-dropdown-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  --form-select-shadow: inset 0 0 10px rgba(65, 65, 65, 0.5);
  --form-submit-radius: 2px;
  --form-select-radius: 0.25rem;
  --form-panel-bg: rgba(0, 0, 0, 0.1);
  --form-panel-border: #383838;
  --form-panel-radius: 2px;
  --form-panel-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  --form-dropdown-bg: #333333;
  --form-dropdown-text: #818080;
  --form-dropdown-border: #3c3c3c;
  --form-dropdown-separator: #444444;
  --form-dropdown-hover-opacity: 0.7;
  --form-select-bg: #2c2c2c;
  --form-select-text: #6e6e6e;
  /* Action icons + alert bell (dark theme) */
  --alert-bell-hover-opacity: 0.7;

  /* Snippets (dark theme defaults) */
  /* edit/delete icons */
  /* plus icon on add button */

  /* Dropdown defaults (dark theme) */
  --dropdown-bg: #3d3d3d;
  --dropdown-shadow: inset 0 0 10px rgb(78 78 78 / 50%);
  --dropdown-text-color: rgb(192, 192, 192);
  --dropdown-hover-bg: #464646;
  --arrow-color: rgb(77, 87, 142);

  /* Indicator dropdown colors (dark theme) */
  --border-color: #333;
  --border-color-light: #2a2a2a;
  --text-color: #8f8f8f;
  --text-color-dim: #888;
  --hover-bg: rgba(255, 255, 255, 0.05);
  --accent-color: #2196F3;

  /* Profile Menu (dark theme) */
  --profile-menu-bg: rgb(180 180 180 / 15%);
  --profile-menu-border: rgba(72, 72, 72, 0.835);
  --profile-menu-shadow: rgb(75 75 75 / 30%);
  --profile-menu-blur: 12px;

  /* Auth Modal (dark theme) */
  --auth-modal-bg: rgba(60, 60, 60, 1);
  --auth-modal-border: rgba(255, 255, 255, 0.15);
  --auth-modal-shadow: rgb(75 75 75 / 30%);
  --auth-modal-blur: 12px;

  /* Portfolio Overlay (dark theme) */
  --portfolio-overlay-bg: rgba(0, 0, 0, 0.2);
  --portfolio-overlay-blur: 3px;
  --portfolio-loading-wave-start: #ffffff;
  --portfolio-loading-wave-end: #3d94ff;
  --portfolio-loading-text-bg: rgba(255, 255, 255, 0.1);

  /* Additional theme variables (dark theme defaults) */
  --modal-content-bg: #3a3a3a;
  --summary-slider-bg: linear-gradient(#3f3f3f, #3b3b3b);
  --summary-slider-border: 1px solid #3b3a3a;
  --summary-slider-shadow: -2px -2px 10px #2b2b2b,
    5px 5px 15px #2b2b2b;
  --summary-toggle-btn-bg: linear-gradient(#3f3f3f, #3b3b3b);
  --summary-toggle-btn-border: 1px solid #3b3a3a;
  /* Admin Panel Variables (dark theme) */
  --admin-role-admin-bg: rgba(255, 87, 87, 0.15);
  --admin-role-admin-color: #ff5757;
  --admin-role-user-bg: rgba(0, 255, 157, 0.15);
  --admin-role-user-color: #00ff9d;
  --admin-status-ok: #00ff9d;
  --admin-status-err: #ff5757;
  --admin-card-bg: rgba(255, 255, 255, 0.03);
  --admin-card-border: rgba(255, 255, 255, 0.05);
  --admin-table-hover: rgba(255, 255, 255, 0.02);
  --admin-tab-active-bg: rgba(0, 194, 255, 0.1);
  --admin-btn-upgrade-gradient: linear-gradient(135deg, #2196F3 0%, #2962FF 100%);
  --admin-header-border: rgba(255, 255, 255, 0.1);
  --admin-row-border: rgba(255, 255, 255, 0.05);

  /* Subscription Modal Variables (dark theme) */
  --sub-modal-bg: rgba(100, 180, 255, 0.1);
  --sub-modal-border: rgba(255, 255, 255, 0.1);
  --sub-modal-shadow: rgba(0, 0, 0, 0.5);
  --sub-active-bg: rgba(76, 175, 80, 0.15);
  --sub-active-border: rgba(76, 175, 80, 0.2);
  --sub-upgrade-shadow: rgba(41, 98, 255, 0.3);
  --sub-upgrade-hover-shadow: rgba(41, 98, 255, 0.4);
  --crypto-box-bg: rgba(37, 37, 37, 0.2);
  --crypto-row-bg: rgba(255, 255, 255, 0.03);
  --crypto-row-bg: rgba(255, 255, 255, 0.03);

  /* Auth Form Variables (dark theme) */
  --auth-error-bg: rgba(255, 82, 82, 0.1);
  --auth-error-border: rgba(255, 82, 82, 0.2);
  --auth-error-text: #ff5252;
  --auth-rate-limit-accent: rgba(255, 82, 82, 0.073);
  --auth-btn-shadow: rgba(61, 148, 255, 0.3);
  --auth-btn-hover-shadow: rgba(61, 148, 255, 0.4);
  --auth-input-focus-shadow: rgba(61, 148, 255, 0.15);

  /* Profile Icon Color (dark theme) */
  --profile-icon-color: #2fcf91;

  /* Import Modal Variables (dark theme) */
  --import-modal-title-bg: #4a4a4a;
  --file-list-border: 1px solid #444;
  --file-item-date-color: #888;
  --import-modal-close-btn-hover-color: #fff;
  --loading-message-color: #888;
  --no-files-message-color: #888;
  --actions-menu-bg: linear-gradient(#3f3f3f, #3b3b3b);
  --actions-menu-border: 1px solid #3f3f3f;
  --funding-menu-bg: linear-gradient(#3f3f3f, #3b3b3b);
  --funding-menu-border: 1px solid #3f3f3f;
  --funding-rate-color: #7d7e83;

  /* Confirmation dialog defaults (dark theme) */
  --confirmation-dialog-bg: #363636;
  --confirmation-dialog-color: #787878;
  --confirmation-dialog-shadow: -2px -2px 8px #2f2f2f,
    2px 2px 15px #2b2b2b;

  /* Charts defaults (dark theme) */
  --chart-card-border-color: #3b3a3a;
  /* Border color of chart card */
  --chart-header-separator-bg: #555;
  /* Separator line color in chart header */
  --chart-watermark-color: rgba(102, 102, 102, 0.4);
  /* Watermark text color (timeframe) */
  --chart-symbol-watermark-color: rgba(102, 102, 102, 0.4);
  /* Watermark symbol text color */
  --chart-hl-display-color: rgba(128, 128, 128, 0.7);
  /* 24h high/low display color */
  /* Watermark symbol text color */
  --chart-hl-display-color: rgba(128, 128, 128, 0.7);
  /* 24h high/low display color */
  --chart-market-watermark-color: rgba(128, 128, 128, 0.4);
  /* Market/Exchange watermark color */
  --chart-custom-logo-color: rgba(128, 128, 128, 0.4);
  /* Custom logo color */
  /* PNL Overlay positioning adjustments */
  --pnl-overlay-vertical-adjustment: 5px;
  /* Adjust this value to fine-tune vertical positioning of PNL overlay */
  --pnl-overlay-horizontal-position: 10px;
  /* Horizontal position from left edge */
  --pnl-overlay-horizontal-adjustment: 20px;
  /* Fine-tune horizontal positioning via transform */

  /* PNL Overlay styling variables */
  --pnl-overlay-bg-color: rgba(68, 68, 68, 0.95);

  /* Alert Icon Vertical Adjustment */
  --alert-icon-vertical-adjustment: 4px;
  --pnl-overlay-color: white;
  --pnl-overlay-padding: 2px 6px;
  --pnl-overlay-border-radius: 2px;
  --pnl-overlay-min-width: 80px;
  --pnl-overlay-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  --pnl-overlay-font-weight: bold;
  --pnl-overlay-z-index: 2;
  --pnl-overlay-min-width: 80px;
  --pnl-overlay-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  --pnl-overlay-font-weight: bold;
  --pnl-overlay-z-index: 2;
  --chart-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  /* Chart dropdown shadow */
  --chart-dropdown-active-bg: var(--primary-color-light, #4f4f4f);
  /* Active dropdown item background */
  --chart-dropdown-active-color: white;
  /* Active dropdown item text color */
  --chart-submit-btn-bg: #393939;
  ;
  /* Submit button background color */
  --chart-submit-btn-color: #8e8e8e;
  /* Submit button text color */
  --chart-add-btn-compact-text: #e0e0e0;
  /* Compact Add button text color */
  --chart-add-btn-compact-bg: #007aff;
  /* Compact Add button background color */
  --chart-add-btn-compact-hover-text: #ffffff;
  /* Compact Add button hover text color */
  --chart-add-btn-right: 4px;
  /* Add button right position */
  --chart-clear-btn-color: #999;
  /* Clear button color */
  --chart-clear-btn-hover-color: #ccc;
  /* Clear button hover color */
  --chart-clear-btn-right: 50px;
  /* Clear button right position */
  --chart-cancel-btn-bg: #914343;
  /* Cancel button background color */
  --chart-cancel-btn-color: #e2e2e2;
  /* Cancel button text color */
  --chart-slider-thumb-bg: var(--alert-tab-active-border);
  /* Slider thumb background */
  --chart-slider-thumb-border: var(--alert-tab-active-border);
  /* Slider thumb border */
  --chart-flash-green-color: #228b22;
  /* Flash green animation color */
  --chart-flash-red-color: #cd5c5c;
  /* Flash red animation color */
  --chart-highlight-green-bg: rgba(34, 139, 34, 0.3);
  /* Green highlight background */
  --chart-highlight-red-bg: rgba(205, 92, 92, 0.3);
  /* Red highlight background */
  --chart-type-btn-border: #444;
  /* Chart type button border */
  --chart-type-btn-bg: #393939;
  /* Chart type button background */
  --chart-type-btn-color: #b0b0b0;
  /* Chart type button text color */
  --chart-card-bg: #353535;
  /* Chart card background */
  --chart-card-text-color: #8e8c8c;
  /* Chart card text color */
  --chart-header-bg: #3e3e3e;
  /* Chart header background */
  --chart-header-border: #383838;
  /* Chart header border */

  --chart-bottom-panel-bg: #3e3e3e;
  /* Bottom panel background */
  --chart-bottom-panel-border: #383838;
  /* Bottom panel border */
  --chart-bottom-panel-text: #6d6d6d;
  /* Bottom panel text color */
  --chart-bottom-panel-height: 30px;

  --chart-symbol-color: #999;
  /* Symbol text color */
  --chart-last-price-color: #6d6d6d;
  /* Last price text color */
  --chart-rank-color: #287ac2;
  /* Rank display color (Blue) */
  --chart-body-bg: rgba(0, 0, 0, 0.1);
  /* Chart body background */
  --chart-body-border: #383838;
  /* Chart body border */

  /* Autocomplete Badge Colors (Dark Theme) */
  --ac-badge-spot-color: #4caf50;
  --ac-badge-spot-bg: rgba(76, 175, 80, 0.1);
  --ac-badge-spot-border: rgba(76, 175, 80, 0.3);

  --ac-badge-futures-color: #eb9986;
  --ac-badge-futures-bg: rgba(249, 226, 226, 0.1);
  --ac-badge-futures-border: rgba(251, 120, 64, 0.3);

  --ac-badge-exchange-color: #2196F3;
  --ac-badge-exchange-bg: rgba(33, 150, 243, 0.1);
  --ac-badge-exchange-border: rgba(33, 150, 243, 0.3);
  --ac-binance-icon-color: #F3BA2F;
  --ac-mexc-icon-color: #0E72F1;

  --ac-header-bg: var(--symbol-suggestions-bg, #3b3b3b);
  --ac-header-color: #ccc;
  --ac-group-header-bg: rgba(0, 0, 0, 0.1);
  --ac-clear-btn-hover-bg: rgba(205, 92, 92, 0.1);
  --ac-shadow: -2px -2px 8px #2f2f2f, 2px 2px 15px #2b2b2b;

  --chart-tf-btn-bg: #393939;
  /* Timeframe button background */
  --chart-tf-btn-color: #6e6e6e;
  /* Timeframe button text color */
  --chart-tf-btn-hover-bg: #454545;
  /* Timeframe button hover background */
  --chart-tf-btn-active-bg: #565656;
  /* Active timeframe button background */
  --chart-tf-btn-active-color: rgb(192, 192, 192);
  /* Active timeframe button text color */

  /* Scroll buttons for timeframe container */
  --chart-scroll-btn-bg: #4a4a4a;
  /* Scroll button background */
  --chart-scroll-btn-color: #888888;
  /* Scroll button text/icon color */
  --chart-scroll-btn-active-bg: #5a5a5a;
  /* Active scroll button background */
  --chart-scroll-btn-active-color: #cccccc;
  /* Active scroll button text/icon color */
  --chart-close-btn-border: #383838;
  /* Close button border */
  --chart-close-btn-color: #6e6e6e;
  /* Close button text color */
  --chart-close-btn-hover-bg: #393939;
  /* Close button hover background */
  --chart-reset-btn-border: #383838;
  /* Reset button border */
  --chart-reset-btn-bg: #393939;
  /* Reset button background */
  --chart-reset-btn-color: #6e6e6e;
  /* Reset button text color */
  --chart-tf-config-btn-border: #383838;
  /* Timeframe config button border */
  --chart-tf-config-btn-bg: #393939;
  /* Timeframe config button background */
  --chart-tf-config-btn-color: #818181;
  /* Timeframe config button text color */
  --chart-realtime-btn-border: #383838;
  /* Realtime button border */
  --chart-realtime-btn-bg: #393939;
  /* Realtime button background */
  --chart-realtime-btn-color: #6e6e6e;
  /* Realtime button text color */
  --chart-realtime-btn-hover-bg: linear-gradient(#3f3f3f, #3b3b3b);
  /* Realtime button hover background */
  --chart-realtime-btn-hover-color: rgb(192, 192, 192);
  /* Realtime button hover text color */
  --chart-dropdown-bg: #353535;
  /* Chart dropdown background */
  --chart-dropdown-border: #383838;
  /* Chart dropdown border */
  --chart-dropdown-item-color: #6d6d6d;
  /* Chart dropdown item text color */
  --chart-tf-item-btn-color: #e0e0e0;
  /* Timeframe item button color */
  --chart-main-background-color: #393939;
  /* Main chart background */
  --chart-main-text-color: #6d6d6d;
  /* Main chart text color */
  --chart-main-grid-color: #636363ff;
  /* Main chart grid lines color */
  --chart-scale-border-color: #555555;
  /* Price/time scale border color */
  --chart-crosshair-label-bg: #5f5f5f;
  /* Crosshair label background color */
  --chart-crosshair-color: #7b7b7b;
  /* Crosshair line color */
  /* Crosshair line style (solid, dotted, dashed) */
  --chart-price-display-color: rgba(128, 128, 128, 0.7);
  /* Price display text color */
  --chart-line-color: rgb(0, 122, 255);
  /* Line chart color */
  --chart-area-line-color: rgb(0, 122, 255);
  /* Area chart line color */
  --chart-area-top-color: rgba(0, 122, 255, 0.2);
  /* Area chart top fill color */
  --chart-area-bottom-color: rgba(0, 122, 255, 0);
  /* Area chart bottom fill color */
  --chart-baseline-top-color: rgba(38, 166, 154, 0.28);
  /* Baseline chart top fill color */
  --chart-baseline-bottom-color: rgba(239, 83, 80, 0.28);
  /* Baseline chart bottom fill color */
  --chart-baseline-top-line-color: rgb(38, 166, 154);
  /* Baseline chart top line color */
  --chart-baseline-bottom-line-color: rgb(239, 83, 80);
  /* Baseline chart bottom line color */
  --chart-price-label-color: #888888;
  /* Label color for chart displays */
  --chart-draw-tools-bg: #484848;
  /* Background for drawing tools panel */
  --chart-draw-tools-border: #464646;
  /* Border for drawing tools panel */
  --chart-draw-tools-btn-bg: #484848;
  /* Background for drawing tools buttons */
  --chart-draw-tools-btn-color: #8d8d8d;
  /* Color for drawing tools buttons */
  --chart-draw-tools-btn-active-bg: #565656;
  /* Active background for drawing tools buttons */
  --chart-draw-tools-btn-active-color: rgb(192, 192, 192);
  /* Active color for drawing tools buttons */
  --chart-draw-tools-toggle-bg: #484848;
  --chart-draw-tools-toggle-color: #e0e0e0;
  --chart-draw-tools-toggle-border: var(--chart-tf-btn-bg);
  --chart-draw-tools-toggle-hover-bg: var(--chart-tf-btn-active-bg);
  --chart-scale-buttons-bg: #393939;
  /* Background for scale buttons container */
  --chart-scale-buttons-border: #555555;
  /* Border for scale buttons container */
  --chart-scale-btn-bg: transparent;
  /* Background for scale buttons */
  --chart-scale-btn-border: #555555;
  /* Border for scale buttons */
  --chart-scale-btn-color: #6d6d6d;
  /* Text/icon color for scale buttons */
  --chart-scale-btn-hover-bg: #565656;
  /* Hover background for scale buttons */
  --chart-scale-btn-hover-color: #e0e0e0;
  /* Hover text/icon color for scale buttons */
  --chart-realtime-btn-icon-color: #6e6e6e;
  /* Icon color for realtime button (dark theme) */
  --chart-btn-icon-color: #6c6c6c;
  /* Settings/Generic chart button icon color */
  --wl-icon-color: rgba(255, 255, 255, 0.25);
  /* Watchlist icon default color */
  --wl-tab-bg: rgba(255, 255, 255, 0.03);
  --wl-sidebar-bg: rgb(57, 57, 57);
  --wl-tab-hover-bg: rgba(255, 255, 255, 0.06);
  --wl-search-bg: rgba(78, 78, 78, 0.08);
  --wl-search-border: rgba(255, 255, 255, 0.06);

  /* VBP Volume Labels (dark theme) */
  --vbp-volume-label-text: #969191;
  /* VBP volume label text color */
  --vbp-volume-label-up-bg: rgba(34, 139, 34, 0.15);
  /* VBP up volume label background */
  --vbp-volume-label-up-text: #5cb85c;
  /* VBP up volume label text color */
  --vbp-volume-label-down-bg: rgba(190, 91, 48, 0.15);
  /* VBP down volume label background */
  --vbp-volume-label-down-text: #d9534f;
  /* VBP down volume label text color */


  /* Line Toolbar */
  --line-toolbar-bg: #414141;
  --line-toolbar-border: #555;
  --line-toolbar-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  --line-toolbar-drag-btn-color: white;
  --line-toolbar-drag-btn-hover-bg: #555;
  --line-toolbar-delete-btn-color: white;
  --line-toolbar-delete-btn-hover-bg: #555;
  /* Default height of bottom panel */

  /* Close button for modals defaults (dark theme) */
  --modal-close-color: #bc6161;
  --modal-close-hover-color: #333;
  /* Editor (light theme) */
  --editor-toolbar-bg: #f5f5f5;
  --editor-toolbar-border: #ddd;
  --editor-toolbar-dropdown-bg: #ffffff;
  --editor-toolbar-dropdown-border: #ddd;
  --editor-toolbar-surface-bg: #ffffff;
  --editor-toolbar-surface-border: #ddd;
  --editor-toolbar-item-color: #333;
  --editor-toolbar-item-hover-bg: #eaeaea;
  --editor-toolbar-item-hover-color: #333;
  --editor-code-bg: #f7f7f7;
  --editor-code-text: #333;
  --editor-code-border: #ddd;
  --editor-strong-color: #333;
  --editor-link-color: #31689b;
  --editor-blockquote-border: #ccc;
  --editor-blockquote-color: #555;
  --editor-list-marker-color: #555;
  /* Calculator (light theme) */
  --calc-toolbar-bg: #f5f5f5;
  --calc-toolbar-border: #ddd;
  --calc-toolbar-text: #333;
  --calc-btn-bg: #ffffff;
  --calc-btn-text: #333;
  --calc-btn-border: #ccc;
  --calc-btn-bg-hover: #eaeaea;
  --calc-console-bg: #f5f5f5;
  --calc-console-border: #ddd;
  --calc-console-text: #d0453a;
  --calc-divider-bg: #d0d0d0;
  --calc-snippets-dropdown-bg: #ffffff;
  --calc-snippets-dropdown-border: #ddd;
  --calc-snippets-item-text: #333;
  --calc-snippets-item-hover-bg: #f0f0f0;
  /* Editor (dark theme) */
  --editor-toolbar-bg: #444;
  --editor-toolbar-border: #555;
  --editor-toolbar-dropdown-bg: #333;
  --editor-toolbar-dropdown-border: #555;
  --editor-toolbar-surface-bg: #333;
  --editor-toolbar-surface-border: #333;
  --editor-toolbar-item-color: #eee;
  --editor-toolbar-item-hover-bg: #555;
  --editor-toolbar-item-hover-color: #fff;
  --editor-code-bg: #1e1e1e;
  --editor-code-text: #d4d4d4;
  --editor-code-border: #333;
  --editor-strong-color: #fff;
  --editor-link-color: #8ab4f8;
  --editor-blockquote-border: #555;
  --editor-blockquote-color: #bbb;
  --editor-list-marker-color: #eee;
  --editor-list-marker-color: #eee;

  /* VBP Signal Tooltips (Dark Theme) */
  --vbp-tooltip-bg: #38383b;
  --vbp-tooltip-text: #e0e0e0;
  --vbp-tooltip-icon-long-bg: rgba(34, 197, 94, 0.25);
  --vbp-tooltip-icon-long-color: #4ade80;
  --vbp-tooltip-icon-short-bg: rgba(239, 68, 68, 0.25);
  --vbp-tooltip-icon-short-color: #f87171;
  --vbp-tooltip-icon-info-bg: rgba(0, 191, 255, 0.2);
  --vbp-tooltip-icon-info-color: #00BFFF;

  /* Calculator (dark theme) */
  --calc-toolbar-bg: #2d2d2d;
  --calc-toolbar-border: #444;
  --calc-toolbar-text: #e0e0e0;
  --calc-btn-bg: #444;
  --calc-btn-text: #ffffff;
  --calc-btn-border: #555;
  --calc-btn-bg-hover: #555;
  --calc-console-bg: #2d2d2d;
  --calc-console-border: #444;
  --calc-console-text: #ff5555;
  --calc-divider-bg: #5a5a5a;
  --calc-snippets-dropdown-bg: #3a3a3a;
  --calc-snippets-dropdown-border: #444;
  --calc-snippets-item-text: #e0e0e0;
  --calc-snippets-item-hover-bg: #4a4a4a;
  /* Tooltip (light theme) */
  --tooltip-bg: #31689b;
  --tooltip-fg: #ffffff;
  --tooltip-arrow-color: #31689b;
  --funding-tooltip-bg: #7a5b18;
  --funding-tooltip-fg: #ffffff;
  --funding-tooltip-arrow-color: #7a5b18;
  --move-tooltip-bg: #555555;
  --move-tooltip-fg: #ffffff;
  --move-tooltip-arrow-color: #555555;
  /* Tooltip (dark theme) */
  --tooltip-bg: #31689b;
  --tooltip-fg: #ffffff;
  --tooltip-arrow-color: #31689b;
  --funding-tooltip-bg: #7a5b18;
  --funding-tooltip-fg: #ffffff;
  --funding-tooltip-arrow-color: #7a5b18;
  --move-tooltip-bg: #555555;
  --move-tooltip-fg: #ffffff;
  --move-tooltip-arrow-color: #555555;
  /* Close button generic vars (dark theme) */
  --close-btn-bg: #3e3e3e;
  --close-icon-color: var(--modal-close-color);
  /* Close buttons (context-specific, dark theme) */
  --form-close-bg: #3e3e3e;
  --form-close-color: #aaaaaa;
  --editor-close-bg: #3e3e3e;
  --editor-close-color: #aaaaaa;
  --calculator-close-bg: #3e3e3e;
  --calculator-close-color: #aaaaaa;
  --calc-settings-close-bg: #3e3e3e;
  --calc-settings-close-color: #aaaaaa;

  /* Open/Close toggle button defaults (dark theme) */
  --open-close-bg: linear-gradient(#3f3f3f, #3b3b3b);
  --open-close-color: #828282;
  --open-close-shadow: 0px 0px 10px rgba(31, 31, 31, 0.3);

  /* High/Low values defaults (dark theme) */
  --high-low-values-color: #333;

  /* Scrollbar defaults (dark theme) */
  --scrollbar-thumb-bg: linear-gradient(transparent, #404040);
  --scrollbar-thumb-hover-bg: linear-gradient(transparent, #363636);

  /* Add asset title defaults (dark theme) */
  --add-asset-title-font-weight: 500;
  --add-asset-title-font-size: 10px;
  --add-asset-title-color: #767676;
  --add-asset-title-padding: 1px 8px 1px 8px;
  --add-asset-title-background: #404040;

  /* Modal Add Asset defaults (dark theme) */
  --modal-add-asset-display: none;
  --modal-add-asset-position: fixed;
  --modal-add-asset-top: 0;
  --modal-add-asset-left: 0;
  --modal-add-asset-width: 100%;
  --modal-add-asset-height: 100%;
  --modal-add-asset-z-index: 1000;

  /* Open Modal Button defaults (dark theme) */
  --open-modal-btn-position: relative;
  --open-modal-btn-margin-top: 10px;
  --open-modal-btn-margin-left: 2%;
  --open-modal-btn-width: 25px;
  --open-modal-btn-height: 25px;
  --open-modal-btn-cursor: pointer;
  --open-modal-btn-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  --open-modal-btn-transition: opacity 0.3s ease-out;
  --open-modal-btn-hover-opacity: 0.7;

  /* Alert message defaults (dark theme) */
  --alert-message-position: fixed;
  --alert-message-bottom: 20px;
  --alert-message-left: 1.5%;
  --alert-message-transform: translateX(-50%);
  --alert-message-padding: 8px 20px;
  --alert-message-font-family: 'Poppins',
    sans-serif;
  --alert-message-color: #ffffff;
  --alert-message-font-size: 10px;
  --alert-message-font-weight: 500;
  --alert-message-text-transform: uppercase;
  --alert-message-border-radius: 3px;
  --alert-message-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  --alert-message-z-index: 1000;
  --alert-message-display: flex;
  --alert-message-justify-content: center;
  --alert-message-align-items: center;
  --success-message-bg: #375e37;
  --error-message-bg: #914848;
  --reset-message-left: 320px;
  --reset-message-font-size: 12px;
  --reset-message-font-weight: 400;

  /* Alerts module (defaults, dark theme) */
  --alert-modal-bg: #2c2c2e;
  /* alerts surface bg */
  --alert-tab-active-border: #007aff;
  /* active tab highlight */
  --alert-list-item-bg: #3a3a3c;
  --alert-list-item-hover-bg: #4a4a4c;
  --alert-delete-hover-color: #ff453a;
  --alert-add-btn-bg: #3e3e3e;
  --alert-add-btn-color: #8f8f8f;
  --alert-add-btn-shadow: inset 0 0 10px rgba(142, 133, 133, 0.5);
  --alert-reset-btn-bg: #914343;
  --alert-reset-btn-color: #e2e2e2;
  --alert-reset-btn-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
  --toggle-bg-off: #ccc;
  --toggle-bg-on: #4e5ea8;
  --toggle-focus-ring: #2196F3;
  --toggle-knob-bg: #ffffff;

  /* Confirmation dialog defaults (dark theme) */
  --confirmation-content-text-align: center;
  --confirmation-content-p-margin-bottom: 15px;
  --confirmation-content-buttons-margin-top: 15px;
  --confirmation-content-buttons-display: flex;
  --confirmation-content-buttons-justify-content: center;
  --confirmation-content-button-padding: 8px 50px;
  --confirmation-content-button-margin: 0 10px;
  --confirmation-content-button-border-radius: 2px;
  --confirmation-content-button-cursor: pointer;
  --confirmation-content-button-border: none;
  --confirmation-content-button-outline: none;
  --confirmation-content-button-font-size: 14px;
  --confirmation-content-button-bg: transparent;
  --confirmation-content-button-color: #ffffff;
  --confirmation-content-button-transition: background-color 0.3s ease;
  --confirmation-yes-button-bg: rgb(34, 139, 34);
  --confirmation-no-button-bg: rgb(205, 92, 92);
  --confirmation-button-hover-bg: rgba(255, 255, 255, 0.2);

  /* Symbol suggestions defaults (dark theme) */
  --symbol-suggestions-position: absolute;
  --symbol-suggestions-top: 100%;
  --symbol-suggestions-left: 0;
  --symbol-suggestions-right: 0;
  --symbol-suggestions-max-height: 150px;
  --symbol-suggestions-overflow-y: auto;
  --symbol-suggestions-bg: #3b3b3b;
  --symbol-suggestions-z-index: 1000;
  --symbol-suggestions-border-radius: 5px;
  --symbol-suggestions-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  --suggestion-item-padding: 10px;
  --suggestion-item-cursor: pointer;
  --suggestion-item-color: #868686;
  --suggestion-item-font-size: 11px;
  --suggestion-item-text-transform: uppercase;
  --suggestion-item-font-weight: 700;
  --suggestion-item-hover-bg: #454545;

  /* Note modal defaults (dark theme) */
  --note-modal-ctn-max-width: 80%;
  --note-modal-ctn-width: auto;
  --note-modal-ctn-min-width: 300px;
  --note-modal-ctn-min-height: 200px;
  --note-modal-ctn-display: flex;
  --note-modal-ctn-flex-direction: column;
  --note-modal-ctn-justify-content: space-between;
  --note-modal-padding: 20px;
  --note-content-resize: both;
  --note-content-overflow: auto;
  --note-content-min-height: 100px;
  --note-content-width: 100%;
  --note-content-box-sizing: border-box;
  --note-content-bg: #3b3b3b;
  --note-content-color: #dcdcdc;
  --note-content-border: 1px solid #444;
  --note-content-border-radius: 3px;
  --note-content-padding: 10px;
  --note-content-font-size: 14px;
  --note-content-flex-grow: 1;
  --note-form-submit-bg: #3e3e3e;
  --note-form-submit-color: #777;
  --note-form-submit-font-weight: 700;
  --note-form-submit-letter-spacing: 0.5px;
  --note-form-submit-margin-top: 3px;
  --note-form-submit-height: 25px;
  --note-form-submit-border-radius: -2px;
  --note-form-submit-box-shadow: inset 0 0 10px rgb(78 78 78 / 50%);
  --note-form-submit-transition: background-color 0.3s,
    border-color 0.3s;
  --note-form-submit-hover-bg: rgb(55, 55, 55);
  --note-button-width: 20px;
  --note-button-height: 20px;
  --note-button-border: none;
  --note-button-padding: 0;
  --note-button-cursor: pointer;
  --note-button-transition: color 0.3s ease-out;

  /* Funding menu defaults (dark theme) */
  --funding-container-cursor: pointer;
  --funding-menu-position: absolute;
  --funding-menu-padding: 4px 7px 4px 7px;
  --funding-menu-display: none;
  --funding-menu-right: 40px;
  --funding-menu-top: -3px;
  --funding-menu-z-index: 2;
  --funding-menu-border-radius: 2px;
  --funding-menu-transform: translateY(-100%);
  --funding-menu-show-display: flex;

  /* Summary slider defaults (dark theme) */
  --summary-slider-position: absolute;
  --summary-slider-bottom: 15px;
  --summary-slider-right: 15px;
  --summary-slider-width: 270px;
  --summary-slider-z-index: 10;
  --summary-slider-height: 0;
  --summary-slider-overflow: hidden;
  --summary-slider-transition: height 0.3s ease;
  --summary-slider-padding: 0 6px;
  --summary-slider-border-radius: 3px 3px 0 0;
  --summary-slider-open-height: auto;
  --summary-slider-content-display: flex;
  --summary-slider-content-flex-direction: column;
  --summary-slider-content-gap: 6px;
  --summary-slider-content-padding: 12px 0;
  --summary-row-display: flex;
  --summary-row-font-size: 13px;
  --summary-row-color: #959595;
  --summary-row-font-weight: 700;
  --summary-row-white-space: nowrap;
  --summary-row-overflow: hidden;
  --summary-row-text-overflow: ellipsis;
  --summary-row-justify-content: space-between;
  --summary-row-align-content: space-around;
  --summary-label-color: #727070;
  --summary-label-font-size: 12px;
  --summary-label-flex-shrink: 0;
  --summary-separator-color: #7d7e83;
  --summary-separator-font-size: 13px;
  --summary-separator-margin: 0 2px;
  --summary-value-font-size: 13px;
  --summary-value-flex-shrink: 1;
  --summary-value-overflow: hidden;
  --summary-value-text-overflow: ellipsis;
  --summary-toggle-btn-position: absolute;
  /* anchor to table cell */
  --summary-toggle-btn-top: calc((var(--table-header-height, 25px) - var(--summary-toggle-btn-height)) / 2);
  --summary-toggle-btn-right: -18px;
  /* sit just outside table header to the right */
  --summary-toggle-btn-width: 20px;
  --summary-toggle-btn-height: 20px;
  --summary-toggle-btn-border-radius: 3px;
  --summary-toggle-btn-cursor: pointer;
  --summary-toggle-btn-z-index: 11;
  --summary-toggle-btn-display: flex;
  --summary-toggle-btn-align-items: center;
  --summary-toggle-btn-justify-content: center;
  --summary-toggle-btn-hover-opacity: 0.9;

  /* Import modal defaults (dark theme) */
  --import-modal-position: fixed;
  --import-modal-top: 0;
  --import-modal-left: 0;
  --import-modal-width: 100%;
  --import-modal-height: 100%;
  --import-modal-bg: rgba(0, 0, 0, 0.5);
  --import-modal-z-index: 1000;
  --import-modal-display: flex;
  --import-modal-align-items: center;
  --import-modal-justify-content: center;
  --import-modal-opacity: 0;
  --import-modal-transition: opacity 0.3s ease;
  --import-modal-ctn-border-radius: 8px;
  --import-modal-ctn-padding: 20px;
  --import-modal-ctn-width: 400px;
  --import-modal-ctn-max-width: 90%;
  --import-modal-ctn-position: absolute;
  --import-modal-ctn-top: 50%;
  --import-modal-ctn-left: 50%;
  --import-modal-ctn-transform: translate(-50%, -50%);
  --import-modal-ctn-text-align: center;
  --import-modal-title-position: fixed;
  --import-modal-title-left: 5px;
  --import-modal-title-top: 122px;
  --import-modal-title-font-family: "Poppins",
    sans-serif;
  --import-modal-title-font-weight: 500;
  --import-modal-title-font-size: 10px;
  --import-modal-title-color: #bfbfbf;
  --import-modal-title-transform: rotate(-90deg);
  --import-modal-title-transform-origin: left top;
  --import-modal-title-white-space: nowrap;
  --import-modal-title-display: inline-block;
  --import-modal-title-padding: 1px 8px 1px 8px;
  --import-modal-title-display2: none;
  --import-modal-close-btn-position: absolute;
  --import-modal-close-btn-top: 6px;
  --import-modal-close-btn-right: 6px;
  --import-modal-close-btn-font-size: 24px;
  --import-modal-close-btn-cursor: pointer;
  --import-modal-close-btn-color: #888;
  --import-modal-close-btn-width: 22px;
  --import-modal-close-btn-height: 22px;
  --import-modal-close-btn-display: flex;
  --import-modal-close-btn-align-items: center;
  --import-modal-close-btn-justify-content: center;
  --file-list-container-max-height: 270px;
  --file-list-container-overflow-y: auto;
  --file-list-container-padding: 10px 0;
  --file-list-container-margin: 10px 0;
  --file-list-container-border-radius: 4px;
  --import-file-item-padding: 10px 15px;
  --import-file-item-margin: 5px 0;
  --import-file-item-border-radius: 4px;
  --import-file-item-cursor: pointer;
  --import-file-item-transition: background-color 0.2s ease;
  --import-file-item-display: flex;
  --import-file-item-align-items: center;
  --import-file-item-justify-content: space-between;
  --import-file-item-date-font-size: 12px;
  --import-file-item-date-margin-left: 10px;
  --import-file-item-date-font-family: "Poppins",
    sans-serif;
  --loading-indicator-text-align: center;
  --loading-indicator-padding: 20px;
  --no-files-message-text-align: center;
  --no-files-message-padding: 20px;
  --no-files-message-font-style: italic;

  /* Actions menu defaults (dark theme) */
  --actions-menu-position: absolute;
  --actions-menu-padding: 4px 7px 4px 7px;
  --actions-menu-display: none;
  --actions-menu-left: -70px;
  --actions-menu-top: -3px;
  --actions-menu-z-index: 1000;
  --actions-menu-border-radius: 2px;
  --actions-menu-show-display: flex;
  --actions-menu-show-flex-direction: row;
  --actions-menu-show-gap: 8px;
  --actions-button-color: #838383;
  --actions-button-font-size: 15px;
  --math-editor-button-color: #d8a830;
  --math-editor-button-font-size: 11px;

  /* Button defaults (dark theme) */
  --button-position: relative;
  --button-margin-top: 10px;
  --button-margin-left: 0.3%;
  --button-width: 25px;
  --button-height: 25px;
  --button-cursor: pointer;
  --button-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  --button-transition: opacity 0.3s ease-out;
  --button-hover-opacity: 0.7;
  --button-container-display: flex;
  --button-container-margin-left: 125px;
  --button-container-button-margin-right: 3px;

  /* Modal defaults (dark theme) */
  --modal-display: none;
  --modal-position: fixed;
  --modal-top: 0;
  --modal-left: 0;
  --modal-width: 100%;
  --modal-height: 100%;
  --modal-z-index: 9999;
  --modal-overflow: auto;
  --modal-content-position: absolute;
  --modal-content-top: 50%;
  --modal-content-left: 50%;
  --modal-content-transform: translate(-50%, -50%);
  --modal-content-display: flex;
  --modal-content-flex-direction: column;
  --modal-content-max-width: 300px;
  --modal-content-border-radius: 8px;
  --modal-content-padding: 20px;

  /* Preloader defaults (dark theme) */
  --preloader-position: fixed;
  --preloader-left: 0;
  --preloader-top: 0;
  --preloader-z-index: 999;
  --preloader-width: 100%;
  --preloader-height: 100%;
  --preloader-overflow: visible;
  --preloader-background: #353535 url('img/1.svg') no-repeat center center;

  /* Loading icon defaults (dark theme) */
  --loading-icon-width: 16px;
  --loading-icon-height: 16px;
  --loading-icon-display: inline-block;
  --loading-icon-vertical-align: middle;

  /* Main slide panel defaults (dark theme) */
  --main-slide-panel-overflow: hidden;
  --main-slide-panel-position: relative;

  /* Main slide panel toggle button defaults (dark theme) */
  --main-slide-toggle-position: fixed;
  --main-slide-toggle-bottom: -15px;
  --main-slide-toggle-right: 43%;
  --main-slide-toggle-cursor: pointer;
  --main-slide-toggle-padding: 2px 5px;
  --main-slide-toggle-width: 45px;
  --main-slide-toggle-text-align: center;
  --main-slide-toggle-border-radius: 3px;
  --main-slide-toggle-font-size: 15px;
  --main-slide-toggle-transition: opacity 0.3s ease-out;
  --main-slide-toggle-bg: linear-gradient(#3f3f3f, #3b3b3b);
  --main-slide-toggle-color: #828282;
  --main-slide-toggle-shadow: 0px 0px 10px rgba(31, 31, 31, 0.3);

  /* Blinking animation defaults */
  --blinking-animation: blinking 1.5s infinite;
  --blinking-opacity-0: 0.5;
  --blinking-opacity-50: 1;

  /* Theme toggle button defaults (dark theme) */
  --theme-toggle-width: 25px;
  --theme-toggle-height: 25px;
  --theme-toggle-color: #6376b8;
  --theme-toggle-right: 7px;
  --theme-toggle-font-size: 1.4rem;
  --theme-toggle-position: absolute;
  --theme-toggle-bottom: 20px;
  --theme-toggle-left: 20px;
  --theme-toggle-opacity-hover: 1;
  --theme-toggle-outline-focus: none;
  --theme-toggle-svg-display: block;
  --theme-toggle-appendages-transition: none;
  --theme-toggle-appendages-transform: scale(0);
  --theme-toggle-body-transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  --theme-toggle-body-transform: scale(1);

  /* Chart group colors (dark theme) */
  --chart-group-1-bg: #547a99;
  /* Синий */
  --chart-group-2-bg: #3c813e;
  /* Зеленый */
  --chart-group-3-bg: #983e3e;
  /* Красный */
  --chart-group-4-bg: #705c39;
  /* Фиолетовый */

  /* Background history progress indicator (dark theme) */
  --bg-history-progress-bg: rgba(69, 69, 69, 0.7);
  --bg-history-progress-color: #929292;
  --bg-history-progress-border: 1px solid rgba(255, 255, 255, 0.1);

  /* Scale slider (dark theme) */
  --scale-slider-track-bg: rgba(80, 80, 80, 0.5);
  --scale-slider-fill-bg: rgba(86, 86, 86, 0.9);
  --scale-slider-fill-icon: rgba(210, 210, 210, 0.9);
  --scale-slider-divider-bg: rgba(255, 255, 255, 0.35);
  --scale-slider-divider-hover-bg: rgba(255, 255, 255, 0.6);
  --scale-slider-main-divider-bg: rgba(255, 255, 255, 0.5);
  --scale-slider-main-divider-hover-bg: rgba(255, 255, 255, 0.8);
  --scale-slider-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);

  /* ── Scanner / Watchlist (dark theme) ─────────────────────────────────── */
  --scanner-panel-bg: #2e2e2e;
  --scanner-panel-border: #3a3a3a;
  --scanner-header-color: #7a7a7a;
  --scanner-tabs-bg: #2b2b2b;
  --scanner-tab-bg: #333333;
  --scanner-tab-border: #3e3e3e;
  --scanner-tab-color: #6e6e6e;
  --scanner-tab-hover-bg: #3d3d3d;
  --scanner-tab-hover-color: #b0b0b0;
  --scanner-tab-active-bg: #404040;
  --scanner-tab-active-border: var(--nav-item-active-color);
  --scanner-tab-active-color: #d0d0d0;
  --scanner-search-bg: #272727;
  --scanner-search-border: #3a3a3a;
  --scanner-search-color: #a0a0a0;
  --scanner-search-placeholder: #555555;
  --scanner-search-icon-color: #555555;
  --scanner-row-border: rgba(255, 255, 255, 0.04);
  --scanner-row-hover-bg: rgba(255, 255, 255, 0.04);
  --scanner-row-selected-bg: rgba(61, 148, 255, 0.1);
  --scanner-row-symbol-color: #9a9a9a;
  --scanner-row-price-color: #7a7a7a;
  --scanner-fav-color: #8a8a8a;
  --scanner-fav-active-color: #f0c040;
  --scanner-empty-color: #5a5a5a;
  --scanner-main-bg: #303030;
}

html[data-theme='light'] {
  --body-bg: #fffcf3;
  --body-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 15 15'%3E %3Ccircle cx='1' cy='1' r='1' opacity='0.25' fill='%236B6B6B' /%3E %3Ccircle cx='8' cy='8' r='1' opacity='0.25' fill='%236B6B6B' /%3E %3C/svg%3E");
  --link-color: #666666;
  --text-main: #4a4a4a;
  /* Portfolio table overrides - NOW MANAGED BY PortfolioSettingsModal.js */
  /*
  --portfolio-symbol-bg: #f9f5eb;
  --portfolio-symbol-color: #a0a0a0;
  --portfolio-cell-bg: linear-gradient(#fff3e5, #fff8ee);
  --portfolio-cell-shadow: 0 0 10px rgba(187, 187, 187, 0.3);
  --portfolio-cell-text-strong: #818080;
  --portfolio-cell-text-primary: #818080;
  --portfolio-total-bg: linear-gradient(transparent, #faf6ea);
  --portfolio-total-text: #7d7e83;
  */

  --modal-backdrop-bg: rgba(0, 0, 0, 0.4);
  --modal-surface-bg: #fffced;
  --modal-action-bg: #fff8e4;
  --modal-surface-border: 1px solid #dddbdb;
  --modal-surface-shadow: 0 0 20px rgba(0, 0, 0, 0.18);
  --modal-text-color: #333333;
  --modal-title-color: #4a4a4a;
  --modal-label-bg: #ebe0d4;
  --modal-label-color: #555555;
  --modal-input-bg: #fff6e9;

  /* Chart structural colors (light theme) */
  --chart-grid-color: rgba(80, 80, 80, 0.6);
  /* Темно-серая сетка для светлой темы */
  --chart-time-scale-color: #818080;
  --chart-price-scale-color: #818080;
  --chart-axis-line-color: rgba(200, 200, 200, 0.227);
  --chart-zero-line-color: #1565C0;
  /* Темно-синий для нулевой линии (светлая тема) */
  /* Solid spine border */
  --chart-tooltip-bg: rgba(255, 252, 237, 0.9);
  --chart-tooltip-border: rgba(221, 219, 219, 0.8);
  --chart-tooltip-title-color: #4a4a4a;
  --chart-tooltip-body-color: #818080;
  --chart-bg-color: #fffaea;
  /* Deeper beige contrast against fffaea dashboard */
  --portfolio-dashboard-bg: #fffaea;

  /* Chart group colors (light theme) */
  --chart-group-1-bg: #98c5f3;
  /* Более темный синий для светлой темы */
  --chart-group-2-bg: #81cc85;
  /* Более темный зеленый для светлой темы */
  --chart-group-3-bg: #ce7e7e;
  /* Более темный красный для светлой темы */
  --chart-group-4-bg: #c19c65;
  /* Более темный фиолетовый для светлой темы */

  /* Background history progress indicator (light theme) */
  --bg-history-progress-bg: rgb(255 248 228);
  --bg-history-progress-color: #959595;
  --bg-history-progress-border: 1px solid rgb(149 149 149 / 15%);
  ;

  /* Scale slider (light theme) */
  --scale-slider-track-bg: rgba(245, 235, 217, 0.5);
  --scale-slider-fill-bg: rgba(180, 180, 180, 0.9);
  --scale-slider-fill-icon: rgba(110, 110, 110, 0.9);
  --scale-slider-divider-bg: rgba(100, 100, 100, 0.35);
  --scale-slider-divider-hover-bg: rgba(60, 60, 60, 0.6);
  --scale-slider-main-divider-bg: rgba(80, 80, 80, 0.5);
  --scale-slider-main-divider-hover-bg: rgba(40, 40, 40, 0.8);
  --scale-slider-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);

  --modal-input-border: 1px solid #dddbdb;
  --modal-input-color: #888888;
  --modal-input-shadow: inset 0 0 10px rgb(255, 242, 217);
  --modal-icon-color: #555555;
  --modal-button-bg: #fff6e9;
  --modal-button-color: #888888;

  /* Table overrides for light theme */
  --table-bg: #fffaea;
  --table-border: 10px solid #fef9eb;
  --table-shadow: -2px -2px 8px #e7e7e7, 2px 2px 15px #e0e0e0;
  --table-cell-color: #d5d5d5;
  --table-header-bg: linear-gradient(transparent, #fff6eb);
  --table-header-border: 1px solid #fef0d6;
  --table-header-shadow: -2px -2px 10px #faf2f2, 5px 5px 15px #ebeaea;

  /* Date/time component overrides for light theme */
  --date-time-color: #7d7e84;
  --date-time-cell-bg: linear-gradient(#fff3e5, #fff8ee);
  --date-time-cell-shadow: 0px 0px 10px rgb(187 187 187 / 30%);
  --date-component-color: #7b7b7b;

  /* Range slider overrides for light theme */
  --range-slider-bg-left: #cd5c5c23;
  --range-slider-bg-center: #cd5c5c;
  --range-slider-bg-center-separator: #ffffff;
  --range-slider-bg-right: #228b22;
  --range-slider-bg-right-end: #228b2222;
  --range-slider-thumb-bg: #69b2d6;
  --range-average-divider-bg: rgb(73, 105, 164);

  /* Rectangular indicator overrides for light theme */
  --rect-indicator-bg: #fff6e9;
  --rect-indicator-fill: #f5ebd9;
  --rect-indicator-text: #6f6f6f;

  /* Button and icon overrides for light theme */
  --edit-button-color: #ffc107;
  --delete-button-color: #ff5a07;
  --notes-button-color: #e1c573;
  --calculator-button-color: #add3f6;

  --actions-button-color: #797979;
  --math-button-color: #d8a830;
  /* Form (light theme) */
  --form-container-bg: #f5f5f5;
  --form-container-border: #ddd;
  --form-label-bg: #ebe0d4;
  --form-label-text: #555555;
  --form-input-bg: #fff6e9;
  --form-input-border: #dddbdb;
  --form-input-text: #888888;
  --form-input-placeholder: #999999;
  --form-input-hover-bg: #ffffff;

  /* Indicator dropdown colors (light theme) */
  --border-color: #dddbdb;
  --border-color-light: #e0e0e0;
  --text-color: #333333;
  --text-color-dim: #666666;
  --hover-bg: rgba(200, 200, 200, 0.1);
  --accent-color: #2196F3;
  --form-input-hover-border: #999999;
  --form-submit-bg: #9b9b9b;
  --form-submit-text: #858585;
  --form-submit-hover-bg: #e0e0e0;
  --form-container-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  --form-input-shadow: inset 0 0 10px rgb(255 247 231);
  --form-submit-shadow: 0 1px 2px rgba(34, 34, 34, 0.2);
  ;
  --form-dropdown-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  --form-select-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
  --form-submit-radius: 2px;
  --form-select-radius: 0.25rem;
  --form-panel-bg: rgba(224, 204, 182, 0.10);
  --form-panel-border: #f7f4e5;
  --form-panel-radius: 2px;
  --form-panel-shadow: 0px 0px 10px rgb(151 106 33 / 30%);
  --form-dropdown-bg: #ffffff;
  --form-dropdown-text: #333333;
  --form-dropdown-border: #dddddd;
  --form-dropdown-separator: #eeeeee;
  --form-dropdown-hover-opacity: 0.7;
  --form-select-bg: #ffffff;
  --form-select-text: #333333;
  /* Action icons + alert bell (light theme) */
  --actions-button-icon-size: 15px;
  --alert-bell-icon-color: #7a7a7a;
  --alert-bell-icon-size: 13px;
  --alert-bell-hover-opacity: 0.7;

  /* Dropdown overrides for light theme */
  --dropdown-bg: #fff6e9;
  /* light surface */
  --dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  /* soft outer shadow */
  --dropdown-text-color: #555555;
  /* dark text on light */
  --dropdown-hover-bg: #f5ebd9;
  /* light hover */
  --arrow-color: #7a7a7a;

  /* End of Dark Theme (Default) */
}

/* ============================================================================
   СВЕТЛАЯ ТЕМА (Light Theme Overrides)
   ============================================================================ */
html[data-theme='light'] {
  /* Additional overrides for light theme */
  --summary-slider-bg: linear-gradient(#faf6ea, #faf6ea);
  --summary-slider-border: 1px solid #fcfcfc;
  --summary-slider-shadow: -2px -2px 10px #e1e1e1, 5px 5px 15px #bfbfbf;
  --summary-toggle-btn-bg: linear-gradient(#f7f0ec, #fff5db);
  --summary-toggle-btn-border: 1px solid #fcfcfc;
  --import-modal-title-bg: #fffbef;
  --file-list-border: 1px solid #ccc;
  --file-item-date-color: #777;
  --chart-crosshair-color: #7b7b7b;
  --chart-crosshair-style: dashed;
  --import-modal-close-btn-hover-color: #333;
  --loading-message-color: #777;
  --no-files-message-color: #777;
  --actions-menu-bg: linear-gradient(#f7f0ec, #fff5db);
  --actions-menu-border: 1px solid #3f3f3f;
  --funding-menu-bg: linear-gradient(#f7f0ec, #fff5db);
  --funding-menu-border: 1px solid #3f3f3f;
  --funding-rate-color: #818080;

  /* Autocomplete Badge Colors (Light Theme) */
  --ac-badge-spot-color: #388e3c;
  /* Slightly darker green for light theme */
  --ac-badge-spot-bg: rgba(56, 142, 60, 0.1);
  --ac-badge-spot-border: rgba(56, 142, 60, 0.2);

  --ac-badge-futures-color: #9c27b0;
  /* Slightly darker purple for light theme */
  --ac-badge-futures-bg: rgba(156, 39, 176, 0.1);
  --ac-badge-futures-border: rgba(156, 39, 176, 0.2);

  --ac-badge-exchange-color: #1976d2;
  /* Slightly darker blue for light theme */
  --ac-badge-exchange-bg: rgba(25, 118, 210, 0.1);
  --ac-badge-exchange-border: rgba(25, 118, 210, 0.2);
  --ac-binance-icon-color: #D4a428;
  --ac-mexc-icon-color: #0b60cc;

  --ac-header-bg: #f5f5f5;
  --ac-header-color: #666;
  --ac-group-header-bg: rgba(0, 0, 0, 0.05);
  --ac-clear-btn-hover-bg: rgba(205, 92, 92, 0.05);
  --ac-shadow: -2px -2px 8px #2f2f2f, 2px 2px 15px #2b2b2b;

  /* Profile Menu (light theme) */
  --profile-menu-bg: rgba(255 250 234, 65%);
  --profile-menu-border: rgba(0, 0, 0, 0.05);
  --profile-menu-shadow: rgba(0, 0, 0, 0.1);
  --profile-menu-blur: 12px;

  /* Auth Modal (light theme) */
  --auth-modal-bg: rgba(255, 249, 235, 1);
  --auth-modal-border: rgba(0, 0, 0, 0.1);
  --auth-modal-shadow: rgba(0, 0, 0, 0.1);
  --auth-modal-blur: 12px;

  /* Portfolio Overlay (light theme) */
  --portfolio-overlay-bg: rgba(255, 255, 255, 0.2);
  --portfolio-overlay-blur: 3px;
  --portfolio-loading-wave-start: #326384;
  --portfolio-loading-wave-end: #123752;
  --portfolio-loading-text-bg: rgba(0, 0, 0, 0.1);

  /* Snippets (light theme overrides) */
  --snippet-icon-size: 16px;
  --snippet-add-icon-size: 35px;

  /* Admin Panel Variables (light theme overrides) */
  --admin-role-admin-bg: rgba(255, 82, 82, 0.1);
  --admin-role-admin-color: #d32f2f;
  --admin-role-user-bg: rgba(76, 175, 80, 0.1);
  --admin-role-user-color: #388e3c;
  --admin-status-ok: #2e7d32;
  --admin-status-err: #c62828;
  --admin-card-bg: #ffffff;
  --admin-card-border: #e0e0e0;
  --admin-table-hover: #f5f5f5;
  --admin-tab-active-bg: rgba(33, 150, 243, 0.1);
  --admin-btn-upgrade-gradient: linear-gradient(135deg, #42a5f5 0%, #1976d2 100%);
  --admin-header-border: #e0e0e0;
  --admin-row-border: #f0f0f0;

  /* Subscription Modal Variables (light theme overrides) */
  --sub-modal-bg: rgba(255, 255, 255, 0.9);
  --sub-modal-border: #e0e0e0;
  --sub-modal-shadow: rgba(0, 0, 0, 0.1);
  --sub-active-bg: rgba(76, 175, 80, 0.1);
  --sub-active-border: rgba(76, 175, 80, 0.2);
  --sub-upgrade-shadow: rgba(33, 150, 243, 0.3);
  --sub-upgrade-hover-shadow: rgba(33, 150, 243, 0.4);
  --crypto-box-bg: #fff9e7;
  --crypto-row-bg: #ffffff;

  /* Auth Form Variables (light theme overrides) */
  --auth-error-bg: rgba(211, 47, 47, 0.1);
  --auth-error-border: rgba(211, 47, 47, 0.2);
  --auth-error-text: #d32f2f;
  --auth-rate-limit-accent: rgba(255, 82, 82, 0.073);
  --auth-btn-shadow: rgba(33, 150, 243, 0.3);
  --auth-btn-hover-shadow: rgba(33, 150, 243, 0.4);
  --auth-input-focus-shadow: rgba(33, 150, 243, 0.15);

  /* Profile Icon Color (light theme) - darker green for contrast */
  --profile-icon-color: #00b36b;

  /* Alerts module overrides (light theme) */
  --alert-modal-bg: #fffbf1;
  --alert-list-item-bg: #fff6e9;
  --alert-list-item-hover-bg: #f0e6d7;
  --alert-delete-hover-color: #d0453a;
  --alert-add-btn-bg: #fff3e5;
  --alert-add-btn-color: #666666;
  --alert-add-btn-shadow: inset 0 0 10px rgba(200, 200, 200, 0.5);
  --alert-reset-btn-bg: #cd5c5c;
  --alert-reset-btn-color: #ffffff;
  --alert-reset-btn-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
  --toggle-bg-off: #cfcfcf;
  --toggle-bg-on: #2d7ef7;
  --toggle-focus-ring: #2d7ef7;
  --toggle-knob-bg: #ffffff;

  /* Add asset title overrides for light theme */
  --add-asset-title-font-weight: 500;
  --add-asset-title-font-size: 10px;
  --add-asset-title-color: #ffffff;
  --add-asset-title-padding: 1px 8px 1px 8px;
  --add-asset-title-background: #f6ca85;

  /* Modal Add Asset overrides for light theme */
  --modal-add-asset-display: none;
  --modal-add-asset-position: fixed;
  --modal-add-asset-top: 0;
  --modal-add-asset-left: 0;
  --modal-add-asset-width: 100%;
  --modal-add-asset-height: 100%;
  --modal-add-asset-z-index: 1000;

  /* Confirmation dialog overrides for light theme */
  --confirmation-dialog-bg: #f0f0f0;
  --confirmation-dialog-color: #555555;
  --confirmation-dialog-shadow: -2px -2px 8px #e7e7e7, 2px 2px 15px #bfbfbf;

  /* Charts overrides for light theme */
  --chart-card-border-color: #e0e0e0;
  /* Border color of chart card */
  --chart-header-separator-bg: #ccc;
  /* Separator line color in chart header */
  --chart-watermark-color: rgb(208 208 208 / 40%);
  ;
  /* Watermark text color (timeframe) */
  --chart-symbol-watermark-color: rgb(208 208 208 / 40%);
  ;
  /* Watermark symbol text color */
  --chart-hl-display-color: rgba(128, 128, 128, 0.5);
  /* 24h high/low display color */
  /* 24h high/low display color */
  --chart-market-watermark-color: rgb(208 208 208 / 40%);
  ;
  /* Market/Exchange watermark color */
  --chart-custom-logo-color: rgb(208 208 208 / 40%);
  ;
  /* Custom logo color */
  --chart-custom-logo-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  /* Custom logo shadow (lighter for light theme) */

  /* VBP Signal Tooltips (Light Theme) */
  --vbp-tooltip-bg: #fff8e4;
  --vbp-tooltip-text: #333333;
  --vbp-tooltip-icon-long-bg: rgba(46, 125, 50, 0.15);
  --vbp-tooltip-icon-long-color: #2e7d32;
  --vbp-tooltip-icon-short-bg: rgba(198, 40, 40, 0.15);
  --vbp-tooltip-icon-short-color: #c62828;
  --vbp-tooltip-icon-info-bg: rgba(2, 136, 209, 0.15);
  --vbp-tooltip-icon-info-color: #0288d1;

  /* Scrollbar overrides for light theme */
  --scrollbar-width: 9px;
  --scrollbar-thumb-bg: linear-gradient(transparent, #cfcfcf);
  --scrollbar-thumb-hover-bg: linear-gradient(transparent, #a8a8a8);
  --chart-dropdown-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* Chart dropdown shadow */
  --chart-dropdown-active-bg: var(--primary-color-light, #bbbbbb);
  /* Active dropdown item background */
  --chart-dropdown-active-color: white;
  /* Active dropdown item text color */
  --chart-submit-btn-bg: #fff6e9;
  /* Submit button background color */
  --chart-submit-btn-color: #9e9e9e;
  /* Submit button text color */
  --chart-cancel-btn-bg: #f44336;
  /* Cancel button background color */
  --chart-cancel-btn-color: #ffffff;
  /* Cancel button text color */
  --chart-slider-thumb-bg: var(--alert-tab-active-border);
  /* Slider thumb background */
  --chart-slider-thumb-border: var(--alert-tab-active-border);
  /* Slider thumb border */
  --chart-flash-green-color: #4CAF50;
  /* Flash green animation color */
  --chart-flash-red-color: #f44336;
  /* Flash red animation color */
  --chart-highlight-green-bg: rgba(76, 175, 80, 0.2);
  /* Green highlight background */
  --chart-highlight-red-bg: rgba(244, 67, 54, 0.2);
  /* Red highlight background */
  --chart-type-btn-border: #ccc;
  /* Chart type button border */
  --chart-type-btn-bg: #ffffff;
  /* Chart type button background */
  --chart-type-btn-color: #333;
  /* Chart type button text color */
  --chart-card-bg: #fffced;
  /* Chart card background */
  --chart-card-text-color: #333333;
  /* Chart card text color */
  --chart-header-bg: #fff8e4;
  /* Chart header background */
  --chart-header-border: #f7f4e5;
  /* Chart header border */

  --chart-bottom-panel-bg: #fff8e4;
  /* Bottom panel background */
  --chart-bottom-panel-border: #f7f4e5;
  /* Bottom panel border */
  --chart-bottom-panel-text: #6d6d6d;
  /* Bottom panel text color */
  --chart-bottom-panel-height: 30px;

  --chart-rank-color: #1976d2;

  /* Navigation (light theme) */
  --nav-item-active-color: #2196F3;
  /* Light theme accent blue */

  /* Payment Info (light theme) */
  --payment-amount-color: #2196F3;
  --payment-icon-color: #2196F3;

  --status-active-color: #2e7d32;
  /* Decoupled from positive change (approx value, strict decoupling requested) */

  /* Plan Buttons (light theme) */
  --plan-btn-bg: transparent;
  --plan-btn-border: transparent;
  --plan-btn-text: #666666;
  --plan-btn-hover-bg: #f8f9fa;
  --plan-btn-active-text: #333333;
  --plan-btn-curtain-opacity: 0.15;

  --sub-card-bg: #ffffff;
  /* White card for light theme */

  /* Calendar / Flatpickr (light theme) */
  --calendar-text-color: #666666;
  --calendar-active-color: #2196F3;
  --calendar-active-bg: rgba(0, 0, 0, 0.1);

  /* Delete Button */
  --delete-button-color: #d32f2f;
  /* Light gray background for active day */
  /* Explicit Blue */

  /* Subscription Modal Header (light theme) */
  --subscription-title-color: #333333;

  --chart-symbol-color: #4a4a4a;
  /* Symbol text color */
  --chart-last-price-color: #333333;
  /* Last price text color */

  --chart-body-bg: rgba(224, 204, 182, 0.10);
  /* Chart body background */
  --chart-body-border: #fffced;
  /* Chart body border */
  --chart-tf-btn-bg: #fff6e9;
  /* Timeframe button background */
  --chart-tf-btn-color: #888888;
  /* Timeframe button text color */
  --chart-tf-btn-hover-bg: #eee4d6;
  /* Timeframe button hover background */
  --chart-tf-btn-active-bg: #f5ebd9;
  /* Active timeframe button background */
  --chart-tf-btn-active-color: #555555;
  /* Active timeframe button text color */

  /* Scroll buttons for timeframe container (light theme) */
  --chart-scroll-btn-bg: #f5ebd9;
  /* Scroll button background */
  --chart-scroll-btn-color: #666666;
  /* Scroll button text/icon color */
  --chart-scroll-btn-active-bg: #fcf3e2;
  /* Active scroll button background */
  --chart-scroll-btn-active-color: #333333;
  /* Active scroll button text/icon color */

  --chart-close-btn-border: #f7f4e5;
  /* Close button border */
  --chart-close-btn-color: #888888;
  /* Close button text color */
  --chart-close-btn-hover-bg: #fff6e9;
  /* Close button hover background */
  --chart-reset-btn-border: #f7f4e5;
  /* Reset button border */
  --chart-reset-btn-bg: #fff6e9;
  /* Reset button background */
  --chart-reset-btn-color: #888888;
  /* Reset button text color */
  --chart-tf-config-btn-border: #f7f4e5;
  /* Timeframe config button border */
  --chart-tf-config-btn-bg: #fff6e9;
  /* Timeframe config button background */
  --chart-tf-config-btn-color: #888888;
  /* Timeframe config button text color */
  --chart-realtime-btn-border: #f7f4e5;
  /* Realtime button border */
  --chart-realtime-btn-bg: #fff6e9;
  /* Realtime button background */
  --chart-realtime-btn-color: #888888;
  /* Realtime button text color */
  --chart-realtime-btn-hover-bg: linear-gradient(#f7f0ec, #fff5db);
  /* Realtime button hover background */
  --chart-realtime-btn-hover-color: #555555;
  /* Realtime button hover text color */
  --chart-dropdown-bg: #fffced;
  /* Chart dropdown background */
  --chart-dropdown-border: #f7f4e5;
  /* Chart dropdown border */
  --chart-dropdown-item-color: #333333;
  /* Chart dropdown item text color */
  --chart-dropdown-item-hover-bg: #f7f4e5;
  /* Chart dropdown item hover background */
  --chart-tf-item-btn-color: #555;
  /* Timeframe item button color */
  --chart-main-background-color: #fffced;
  /* Main chart background */
  --chart-main-text-color: #333333;
  /* Main chart text color */
  --chart-main-grid-color: #999;
  /* Main chart grid lines color */
  --chart-scale-border-color: #e7e7e7;
  /* Price/time scale border color */
  --chart-crosshair-label-bg: #f7efe0;
  /* Crosshair label background color */
  --chart-price-display-color: rgba(100, 100, 100, 0.7);
  /* Price display text color */
  --chart-line-color: rgb(0, 100, 200);
  /* Line chart color */
  --chart-area-line-color: rgb(0, 100, 200);
  /* Area chart line color */
  --chart-area-top-color: rgba(0, 100, 200, 0.2);
  /* Area chart top fill color */
  --chart-area-bottom-color: rgba(0, 100, 200, 0);
  /* Area chart bottom fill color */
  --chart-baseline-top-color: rgba(0, 150, 136, 0.28);
  /* Baseline chart top fill color */
  --chart-baseline-bottom-color: rgba(244, 67, 54, 0.28);
  /* Baseline chart bottom fill color */
  --chart-baseline-top-line-color: rgb(0, 150, 136);
  /* Baseline chart top line color */
  --chart-baseline-bottom-line-color: rgb(244, 67, 54);
  /* Baseline chart bottom line color */
  --chart-price-label-color: #888888;
  /* Label color for chart displays */
  --chart-draw-tools-bg: #fbf2e2;
  /* Background for drawing tools panel */
  --chart-draw-tools-border: #f5ebd9;
  /* Border for drawing tools panel */
  --chart-draw-tools-btn-bg: #fbf2e2;
  /* Background for drawing tools buttons */
  --chart-draw-tools-btn-color: #888888;
  /* Color for drawing tools buttons */
  --chart-draw-tools-btn-active-bg: #f5ebd9;
  /* Active background for drawing tools buttons */
  --chart-draw-tools-btn-active-color: #555555;
  /* Active color for drawing tools buttons */
  --chart-draw-tools-toggle-bg: #fbf2e2;
  --chart-draw-tools-toggle-color: #737373;
  --chart-draw-tools-toggle-border: var(--chart-tf-btn-bg);
  --chart-draw-tools-toggle-hover-bg: var(--chart-tf-btn-active-bg);
  --chart-scale-buttons-bg: #fffced;
  /* Background for scale buttons container */
  --chart-scale-buttons-border: #e7e7e7;
  /* Border for scale buttons container */
  --chart-scale-btn-bg: transparent;
  /* Background for scale buttons */
  --chart-scale-btn-border: #e7e7e7;
  /* Border for scale buttons */
  --chart-scale-btn-color: #888888;
  /* Text/icon color for scale buttons */
  --chart-scale-btn-hover-bg: #f5ebd9;
  /* Hover background for scale buttons */
  --chart-scale-btn-hover-color: #555555;
  /* Hover text/icon color for scale buttons */
  --chart-realtime-btn-icon-color: #888888;
  /* Icon color for realtime button (light theme) */
  --wl-icon-color: rgba(0, 0, 0, 0.25);
  /* Watchlist icon default color */
  --wl-tab-bg: rgba(0, 0, 0, 0.04);
  --wl-sidebar-bg: rgb(255 252 237);
  --wl-tab-hover-bg: rgba(0, 0, 0, 0.08);
  --wl-search-bg: rgba(0, 0, 0, 0.02);
  --wl-search-border: rgba(0, 0, 0, 0.06);

  /* VBP Volume Labels (light theme) */
  --vbp-volume-label-text: #6f6f6f;
  /* VBP volume label text color */
  --vbp-volume-label-up-bg: rgba(34, 139, 34, 0.1);
  /* VBP up volume label background */
  --vbp-volume-label-up-text: #2d8b2d;
  /* VBP up volume label text color */
  --vbp-volume-label-down-bg: rgba(190, 91, 48, 0.1);
  /* VBP down volume label background */
  --vbp-volume-label-down-text: #b85b30;
  /* VBP down volume label text color */


  /* Line Toolbar */
  --line-toolbar-bg: #fff8e4;
  --line-toolbar-border: #ddd;
  --line-toolbar-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --line-toolbar-drag-btn-color: #333;
  --line-toolbar-drag-btn-hover-bg: #eee;
  --line-toolbar-delete-btn-color: #333;
  --line-toolbar-delete-btn-hover-bg: #eee;

  /* Close button for modals overrides for light theme */
  --modal-close-color: #d58f8f;
  --modal-close-hover-color: #333;
  /* Close button generic vars (light theme) */
  --close-btn-bg: #ccc;
  --close-icon-color: var(--modal-close-color);
  /* Close buttons (context-specific, light theme) */
  --form-close-bg: #ebe0d4;
  --form-close-color: #555555;
  --editor-close-bg: #ebe0d4;
  --editor-close-color: #555555;
  --calculator-close-bg: #ebe0d4;
  --calculator-close-color: #555555;
  --calc-settings-close-bg: #ebe0d4;
  --calc-settings-close-color: #555555;

  /* Open/Close toggle button overrides for light theme */
  --open-close-bg: linear-gradient(#f7f0ec, #fff5db);
  --open-close-color: #828282;
  --open-close-shadow: 0px 0px 10px rgba(31, 31, 31, 0.3);

  /* Main slide panel toggle button overrides for light theme */
  --main-slide-toggle-bg: linear-gradient(#f7f0ec, #fff5db);
  --main-slide-toggle-color: #828282;
  --main-slide-toggle-shadow: 0px 0px 10px rgba(31, 31, 31, 0.3);

  /* Theme toggle button overrides for light theme */
  --theme-toggle-font-size: 1.3rem;
  --theme-toggle-appendages-transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  --theme-toggle-appendages-transform: scale(1);
  --theme-toggle-body-transition: transform 0.5s ease-in-out;
  --theme-toggle-body-transform: scale(1);

  /* Additional missing overrides for light theme */
  --modal-content-bg: #f7f0ec;
  --high-low-values-color: #ffffff;
  --main-slide-panel-overflow: hidden;
  --main-slide-panel-position: relative;
  --blinking-opacity-0: 0.5;
  --blinking-opacity-50: 1;
  --preloader-position: fixed;
  --preloader-left: 0;
  --preloader-top: 0;
  --preloader-z-index: 999;
  --preloader-width: 100%;
  --preloader-height: 100%;
  --preloader-overflow: visible;
  --preloader-background: #fffcf3 url('img/1.svg') no-repeat center center;
  --loading-icon-width: 16px;
  --loading-icon-height: 16px;
  --loading-icon-display: inline-block;
  --loading-icon-vertical-align: middle;
  --button-position: relative;
  --button-margin-top: 10px;
  --button-margin-left: 0.3%;
  --button-width: 25px;
  --button-height: 25px;
  --button-cursor: pointer;
  --button-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  --button-transition: opacity 0.3s ease-out;
  --button-hover-opacity: 0.7;
  --button-container-display: flex;
  --button-container-margin-left: 35px;
  --button-container-button-margin-right: 3px;
  --modal-display: none;
  --modal-position: fixed;
  --modal-top: 0;
  --modal-left: 0;
  --modal-width: 100%;
  --modal-height: 100%;
  --modal-z-index: 1000;
  --modal-overflow: auto;
  --modal-content-position: absolute;
  --modal-content-top: 50%;
  --modal-content-left: 50%;
  --modal-content-transform: translate(-50%, -50%);
  --modal-content-display: flex;
  --modal-content-flex-direction: column;
  --modal-content-max-width: 300px;
  --modal-content-border-radius: 8px;
  --modal-content-padding: 20px;
  --open-modal-btn-position: relative;
  --open-modal-btn-margin-top: 10px;
  --open-modal-btn-margin-left: 2%;
  --open-modal-btn-width: 25px;
  --open-modal-btn-height: 25px;
  --open-modal-btn-cursor: pointer;
  --open-modal-btn-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  --open-modal-btn-transition: opacity 0.3s ease-out;
  --open-modal-btn-hover-opacity: 0.7;
  --alert-message-position: fixed;
  --alert-message-bottom: 20px;
  --alert-message-left: 1.5%;
  --alert-message-transform: translateX(-50%);
  --alert-message-padding: 8px 20px;
  --alert-message-font-family: 'Poppins', sans-serif;
  --alert-message-color: #ffffff;
  --alert-message-font-size: 10px;
  --alert-message-font-weight: 500;
  --alert-message-text-transform: uppercase;
  --alert-message-border-radius: 3px;
  --alert-message-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  --alert-message-z-index: 1000;
  --alert-message-display: flex;
  --alert-message-justify-content: center;
  --alert-message-align-items: center;
  --success-message-bg: #375e37;
  --error-message-bg: #914848;
  --reset-message-left: 320px;
  --reset-message-font-size: 12px;
  --reset-message-font-weight: 400;
  --confirmation-content-text-align: center;
  --confirmation-content-p-margin-bottom: 15px;
  --confirmation-content-buttons-margin-top: 15px;
  --confirmation-content-buttons-display: flex;
  --confirmation-content-buttons-justify-content: center;
  --confirmation-content-button-padding: 8px 50px;
  --confirmation-content-button-margin: 0 10px;
  --confirmation-content-button-border-radius: 2px;
  --confirmation-content-button-cursor: pointer;
  --confirmation-content-button-border: none;
  --confirmation-content-button-outline: none;
  --confirmation-content-button-font-size: 14px;
  --confirmation-content-button-bg: transparent;
  --confirmation-content-button-color: #ffffff;
  --confirmation-content-button-transition: background-color 0.3s ease;
  --confirmation-yes-button-bg: rgb(34, 139, 34);
  --confirmation-no-button-bg: rgb(205, 92, 92);
  --confirmation-button-hover-bg: rgba(255, 255, 255, 0.2);
  --symbol-suggestions-position: absolute;
  --symbol-suggestions-top: 100%;
  --symbol-suggestions-left: 0;
  --symbol-suggestions-right: 0;
  --symbol-suggestions-max-height: 150px;
  --symbol-suggestions-overflow-y: auto;
  --symbol-suggestions-bg: #fffced;
  --symbol-suggestions-z-index: 1000;
  --symbol-suggestions-border-radius: 5px;
  --symbol-suggestions-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  --suggestion-item-padding: 10px;
  --suggestion-item-cursor: pointer;
  --suggestion-item-color: #868686;
  --suggestion-item-font-size: 11px;
  --suggestion-item-text-transform: uppercase;
  --suggestion-item-font-weight: 700;
  --suggestion-item-hover-bg: #f0e6d2;
  --note-modal-ctn-max-width: 80%;
  --note-modal-ctn-width: auto;
  --note-modal-ctn-min-width: 300px;
  --note-modal-ctn-min-height: 200px;
  --note-modal-ctn-display: flex;
  --note-modal-ctn-flex-direction: column;
  --note-modal-ctn-justify-content: space-between;
  --note-modal-padding: 20px;
  --note-content-resize: both;
  --note-content-overflow: auto;
  --note-content-min-height: 100px;
  --note-content-width: 100%;
  --note-content-box-sizing: border-box;
  --note-content-bg: #f9f5eb;
  --note-content-color: #333333;
  --note-content-border: 1px solid #ccc;
  --note-content-border-radius: 3px;
  --note-content-padding: 10px;
  --note-content-font-size: 14px;
  --note-content-flex-grow: 1;
  --note-form-submit-bg: #e0e0e0;
  --note-form-submit-color: #333;
  --note-form-submit-font-weight: 700;
  --note-form-submit-letter-spacing: 0.5px;
  --note-form-submit-margin-top: 3px;
  --note-form-submit-height: 25px;
  --note-form-submit-border-radius: -2px;
  --note-form-submit-box-shadow: inset 0 0 10px rgb(200 200 200 / 50%);
  --note-form-submit-transition: background-color 0.3s, border-color 0.3s;
  --note-form-submit-hover-bg: #d0d0d0;
  --note-button-width: 20px;
  --note-button-height: 20px;
  --note-button-border: none;
  --note-button-padding: 0;
  --note-button-cursor: pointer;
  --note-button-transition: color 0.3s ease-out;
  --funding-container-cursor: pointer;
  --funding-menu-position: absolute;
  --funding-menu-padding: 4px 7px 4px 7px;
  --funding-menu-display: none;
  --funding-menu-right: 40px;
  --funding-menu-top: -3px;
  --funding-menu-z-index: 2;
  --funding-menu-border-radius: 2px;
  --funding-menu-transform: translateY(-100%);
  --funding-menu-show-display: flex;
  --summary-slider-position: absolute;
  --summary-slider-bottom: 15px;
  --summary-slider-right: 15px;
  --summary-slider-width: 270px;
  --summary-slider-z-index: 10;
  --summary-slider-height: 0;
  --summary-slider-overflow: hidden;
  --summary-slider-transition: height 0.3s ease;
  --summary-slider-padding: 0 6px;
  --summary-slider-border-radius: 3px 3px 0 0;
  --summary-slider-open-height: auto;
  --summary-slider-content-display: flex;
  --summary-slider-content-flex-direction: column;
  --summary-slider-content-gap: 6px;
  --summary-slider-content-padding: 12px 0;
  --summary-row-display: flex;
  --summary-row-font-size: 13px;
  --summary-row-color: #848484;
  --summary-row-font-weight: 700;
  --summary-row-white-space: nowrap;
  --summary-row-overflow: hidden;
  --summary-row-text-overflow: ellipsis;
  --summary-row-justify-content: space-between;
  --summary-row-align-content: space-around;
  --summary-label-color: #727070;
  --summary-label-font-size: 12px;
  --summary-label-flex-shrink: 0;
  --summary-separator-color: #7d7e83;
  --summary-separator-font-size: 13px;
  --summary-separator-margin: 0 2px;
  --summary-value-font-size: 13px;
  --summary-value-flex-shrink: 1;
  --summary-value-overflow: hidden;
  --summary-value-text-overflow: ellipsis;
  --summary-toggle-btn-position: absolute;
  /* anchor to table cell */
  --summary-toggle-btn-top: calc((var(--table-header-height, 25px) - var(--summary-toggle-btn-height)) / 2);
  --summary-toggle-btn-right: -18px;
  /* sit just outside table header to the right */
  --summary-toggle-btn-width: 20px;
  --summary-toggle-btn-height: 20px;
  --summary-toggle-btn-border-radius: 3px;
  --summary-toggle-btn-cursor: pointer;
  --summary-toggle-btn-z-index: 11;
  --summary-toggle-btn-display: flex;
  --summary-toggle-btn-align-items: center;
  --summary-toggle-btn-justify-content: center;
  --summary-toggle-btn-hover-opacity: 0.9;
  --import-modal-position: fixed;
  --import-modal-top: 0;
  --import-modal-left: 0;
  --import-modal-width: 100%;
  --import-modal-height: 100%;
  --import-modal-bg: rgba(0, 0, 0, 0.5);
  --import-modal-z-index: 1000;
  --import-modal-display: flex;
  --import-modal-align-items: center;
  --import-modal-justify-content: center;
  --import-modal-opacity: 0;
  --import-modal-transition: opacity 0.3s ease;
  --import-modal-ctn-border-radius: 8px;
  --import-modal-ctn-padding: 20px;
  --import-modal-ctn-width: 400px;
  --import-modal-ctn-max-width: 90%;
  --import-modal-ctn-position: absolute;
  --import-modal-ctn-top: 50%;
  --import-modal-ctn-left: 50%;
  --import-modal-ctn-transform: translate(-50%, -50%);
  --import-modal-ctn-text-align: center;
  --import-modal-title-position: fixed;
  --import-modal-title-left: 5px;
  --import-modal-title-top: 122px;
  --import-modal-title-font-family: "Poppins", sans-serif;
  --import-modal-title-font-weight: 500;
  --import-modal-title-font-size: 10px;
  --import-modal-title-color: #bfbfbf;
  --import-modal-title-transform: rotate(-90deg);
  --import-modal-title-transform-origin: left top;
  --import-modal-title-white-space: nowrap;
  --import-modal-title-display: inline-block;
  --import-modal-title-padding: 1px 8px 1px 8px;
  --import-modal-title-display2: none;
  --import-modal-close-btn-position: absolute;
  --import-modal-close-btn-top: 6px;
  --import-modal-close-btn-right: 6px;
  --import-modal-close-btn-font-size: 24px;
  --import-modal-close-btn-cursor: pointer;
  --import-modal-close-btn-color: #888;
  --import-modal-close-btn-width: 22px;
  --import-modal-close-btn-height: 22px;
  --import-modal-close-btn-display: flex;
  --import-modal-close-btn-align-items: center;
  --import-modal-close-btn-justify-content: center;
  --file-list-container-max-height: 270px;
  --file-list-container-overflow-y: auto;
  --file-list-container-padding: 10px 0;
  --file-list-container-margin: 10px 0;
  --file-list-container-border-radius: 4px;
  --import-file-item-padding: 10px 15px;
  --import-file-item-margin: 5px 0;
  --import-file-item-border-radius: 4px;
  --import-file-item-cursor: pointer;
  --import-file-item-transition: background-color 0.2s ease;
  --import-file-item-display: flex;
  --import-file-item-align-items: center;
  --import-file-item-justify-content: space-between;
  --import-file-item-date-font-size: 12px;
  --import-file-item-date-margin-left: 10px;
  --import-file-item-date-font-family: "Poppins", sans-serif;
  --loading-indicator-text-align: center;
  --loading-indicator-padding: 20px;
  --no-files-message-text-align: center;
  --no-files-message-padding: 20px;
  --no-files-message-font-style: italic;
  --actions-menu-position: absolute;
  --actions-menu-padding: 4px 7px 4px 7px;
  --actions-menu-display: none;
  --actions-menu-left: -70px;
  --actions-menu-top: -3px;
  --actions-menu-z-index: 1000;
  --actions-menu-border-radius: 2px;
  --actions-menu-show-display: flex;
  --actions-menu-show-flex-direction: row;
  --actions-menu-show-gap: 8px;
  --actions-button-color: #838383;
  --actions-button-font-size: 15px;
  --math-editor-button-color: #d8a830;
  --math-editor-button-font-size: 11px;
  --main-slide-toggle-position: fixed;
  --main-slide-toggle-bottom: -15px;
  --main-slide-toggle-right: 43%;
  --main-slide-toggle-cursor: pointer;
  --main-slide-toggle-padding: 2px 5px;
  --main-slide-toggle-width: 45px;
  --main-slide-toggle-text-align: center;
  --main-slide-toggle-border-radius: 3px;
  --main-slide-toggle-font-size: 15px;
  --main-slide-toggle-transition: opacity 0.3s ease-out;
  --main-slide-toggle-bg: linear-gradient(#f7f0ec, #fff5db);
  --main-slide-toggle-color: #828282;
  --main-slide-toggle-shadow: 0px 0px 10px rgba(31, 31, 31, 0.3);

  /* ── Scanner / Watchlist (light theme) ──────────────────────────────────── */
  --scanner-panel-bg: #f3ede3;
  --scanner-panel-border: #e0d8cc;
  --scanner-header-color: #888888;
  --scanner-tabs-bg: #ede7dc;
  --scanner-tab-bg: #e8e1d7;
  --scanner-tab-border: #d9d1c5;
  --scanner-tab-color: #888888;
  --scanner-tab-hover-bg: #e0d9cf;
  --scanner-tab-hover-color: #444444;
  --scanner-tab-active-bg: #dcd5c9;
  --scanner-tab-active-border: var(--nav-item-active-color);
  --scanner-tab-active-color: #333333;
  --scanner-search-bg: #fdf7ee;
  --scanner-search-border: #ddd5c9;
  --scanner-search-color: #555555;
  --scanner-search-placeholder: #aaaaaa;
  --scanner-search-icon-color: #aaaaaa;
  --scanner-row-border: rgba(0, 0, 0, 0.05);
  --scanner-row-hover-bg: rgba(0, 0, 0, 0.04);
  --scanner-row-selected-bg: rgba(61, 148, 255, 0.08);
  --scanner-row-symbol-color: #555555;
  --scanner-row-price-color: #777777;
  --scanner-fav-color: #aaaaaa;
  --scanner-fav-active-color: #d4a010;
  --scanner-empty-color: #aaaaaa;
  --scanner-main-bg: #faf4ea;
}

/* body {
  font-family: var(--primary-font-family);
  background-color: var(--body-bg);
  background-image: var(--body-bg-image);
  transition: color var(--theme-transition-duration) var(--theme-transition-easing), background-color var(--theme-transition-duration) var(--theme-transition-easing);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
} */