:root {
  /* === Основні кольори фону === */

  /* --color-bg-main: #14141C;
  --color-bg-light: #FFFFFF0D;
  --color-bg-lighter: #FFFFFF05;
  --color-bg-semi: #FFFFFF26;
  --color-bg-hover: #3636E340;
  --color-bg-hover-strong: #3636E360;
  --color-bg-switcher: #4F4F4F;
  --color-bg-ss: #fff;
  --color-bg-ss-2: #ffffff15;
  --color-bg-ss-btn: #3a3e46;
  --color-bg-ss-pill: #3b48ff;
  --color-bg-btn-controls-active: #37373E;
  --color-bg-pop-up: #14141C;
  --color-bg-back-button: #FFFFFF0D; */

  /* === Основні кольори тексту === */
 /*  --color-text-main: #FFFFFF;
  --color-text-secondary: #1E1E1E;
  --color-text-main-white: #FFFFFF;
  --color-text-dark: #14141C;
  --color-text-muted: #FFFFFF77;
  --color-text-ss-muted: #a6adbb;
  --color-bg-ss-pill-text: #fff;
 */
  /* === Акценти === */
  /* --color-accent: #3636E3;
  --color-accent-hover: #23237A; */

  /* === Кордони і розділювачі === */
  /* --color-border: #FFFFFF80; */

  /* === Скроллбар === */
  /* --color-scroll-thumb: #FFFFFF;
  --color-scroll-track: #14141C; */
  
  
  
  

  /*  New */
  /* Text */
  --color-text-accent: #3636e3;
  --color-text-primary: #ffffff;
  --color-text-cta: #14141C;
  --color-text-secondary: #7979fc;
  --color-text-tertiary: rgba(255, 255, 255, 0.5);
  --color-text-button-accent: #FFFFFF;
  --color-text-cookie-accent: #FFFFFF;

  /* Button */
  --color-button-cta: #fafafa;
  --color-button-accent: #3636e3;
  --color-button-primary: rgba(255, 255, 255, 0.1);
  --color-button-secondary: rgba(255, 255, 255, 0.05);
  --color-button-tertiary: rgba(255, 255, 255, 0.02);
  --color-button-cta-hover: #a1a1a1;
  --color-button-accent-hover: #292980;
  --color-button-cookie-accent: #3636E3;
  --color-button-cookie-secondary: #F0F0F0;

  /* Icon */
  --color-icon-accent: #3636e3;
  --color-icon-cta: #14141c;
  --color-icon-primary: #ffffff;
  --color-icon-toggle-active: #ffffff;
  --color-icon-toggle-inactive: #4f4f4f;
  --color-icon-positive: #1fe654;
  --color-icon-negative: #fb2f2f;

  /* Border */
  --color-border-primary: rgba(255, 255, 255, 0.05);
  --color-border-hover: rgba(255, 255, 255, 0.5);
  --color-border-popup: rgba(255, 255, 255, 0.15);

  /* Background */
  --color-bg-page: #14141c;
  --color-bg-block: #191921;
  --color-bg-cookie: #fafafa;
  --color-bg-title: #1f1f27;
  --color-bg-table-header: #3d3d4c;
  --color-bg-table-0: #191921;
  --color-bg-table-1: #292933;
}

body.light {
  /* === Основні кольори фону === */
  --color-bg-main: #fff;
  --color-bg-light: #f3f3f3;
  --color-bg-lighter: #f3f3f3;
  --color-bg-semi: #FFFFFF26;
  --color-bg-hover: #3636E340;
  --color-bg-hover-strong: #3636E360;
  --color-bg-switcher: #4F4F4F;
  --color-bg-ss: #111111;
  --color-bg-ss-2: #f3f3f3;
  --color-bg-ss-btn: #3a3e46;
  --color-bg-ss-pill: #3b48ff;
  --color-bg-btn-controls-active: #DDD;
  --color-bg-btn-controls-hover-border: #DDD;
   --color-bg-bt-blocs: #e8e8e8;
  --color-bg-pop-up: #FFFFFFBF;
  --color-bg-back-button: #1E1E1E0D;


  /* === Основні кольори тексту === */
  --color-text-main: #1E1E1E;
  --color-text-secondary: #FFF;
  --color-text-main-white: #FFFFFF;
  --color-text-dark: #14141C;
  --color-text-muted: #FFFFFF77;
  --color-text-ss-muted: #a6adbb;
  --color-bg-ss-pill-text: #1E1E1E;

  /* === Акценти === */
  --color-accent: #3636E3;
  --color-accent-hover: #f3f3f3;

  /* === Кордони і розділювачі === */
  --color-border: #a6adbb;

  /* === Скроллбар === */
  --color-scroll-thumb: #1e1e1e2e;
  --color-scroll-track: none;
  
  
  
  
  /* New  */
  /* Text */
  --color-text-accent: #3636e3;
  --color-text-primary: #111111;
  --color-text-cta: #ffffff;
  --color-text-secondary: #5656ed;
  --color-text-tertiary: rgba(17, 17, 17, 0.5);
  --color-text-button-accent: #FFFFFF;
  --color-text-cookie-accent: #FFFFFF;

  /* Button */
  --color-button-cta: #252538;
  --color-button-accent: #3636e3;
  --color-button-primary: rgba(30, 30, 30, 0.1);
  --color-button-secondary: rgba(30, 30, 30, 0.05);
  --color-button-tertiary: rgba(30, 30, 30, 0.02);
  --color-button-cta-hover: #595968;
  --color-button-accent-hover: #292980;
  --color-button-cookie-accent: #3636E3;
  --color-button-cookie-secondary: #202027;

  /* Icon */
  --color-icon-accent: #3636e3;
  --color-icon-cta: #ffffff;
  --color-icon-primary: #1e1e1e;
  --color-icon-toggle-active: #3636e3;
  --color-icon-toggle-inactive: #737373;
  --color-icon-positive: #0a9f31;
  --color-icon-negative: #e72b2b;

  /* Border */
  --color-border-primary: rgba(30, 30, 30, 0.05);
  --color-border-hover: rgba(30, 30, 30, 0.25);
  --color-border-popup: rgba(30, 30, 30, 0.15);

  /* Background */
  --color-bg-page: #ffffff;
  --color-bg-block: #fafafa;
  --color-bg-cookie: #14141C;
  --color-bg-title: #f0f0f0;
  --color-bg-table-header: #f0f0f0;
  --color-bg-table-0: #f0f0f0;
  --color-bg-table-1: #f0f0f0;
}

body.cb-dark {
  /* Text */
  --color-text-accent: #ffffff;
  --color-text-primary: #ffffff;
  --color-text-cta: #14141C;
  --color-text-secondary: #d4d4d4;
  --color-text-tertiary: rgba(255, 255, 255, 0.5);
  --color-text-button-accent: #000000;
  --color-text-cookie-accent: #FFFFFF;

  /* Button */
  --color-button-cta: #fafafa;
  --color-button-accent: #ffffff;
  --color-button-primary: rgba(255, 255, 255, 0.1);
  --color-button-secondary: rgba(255, 255, 255, 0.05);
  --color-button-tertiary: rgba(255, 255, 255, 0.02);
  --color-button-cta-hover: #a1a1a1;
  --color-button-accent-hover: #919191;
  --color-button-cookie-accent: #000000;
  --color-button-cookie-secondary: #F0F0F0;

  /* Icon */
  --color-icon-accent: #ffffff;
  --color-icon-cta: #14141c;
  --color-icon-primary: #ffffff;
  --color-icon-toggle-active: #ffffff;
  --color-icon-toggle-inactive: #4f4f4f;
  --color-icon-positive: #4f4f4f;
  --color-icon-negative: #4f4f4f;

  /* Border */
  --color-border-primary: rgba(255, 255, 255, 0.05);
  --color-border-hover: rgba(255, 255, 255, 0.5);
  --color-border-popup: rgba(255, 255, 255, 0.15);

  /* Background */
  --color-bg-page: #14141c;
  --color-bg-block: #191921;
  --color-bg-cookie: #FAFAFA;
  --color-bg-title: #1f1f27;
  --color-bg-table-header: #1f1f27;
  --color-bg-table-0: #1f1f27;
  --color-bg-table-1: #1f1f27;
}

body.cb-light {
  /* Text */
  --color-text-accent: #000000;
  --color-text-primary: #111111;
  --color-text-cta: #ffffff;
  --color-text-secondary: #3e3e3e;
  --color-text-tertiary: rgba(17, 17, 17, 0.5);
  --color-text-button-accent: #FFFFFF;
  --color-text-cookie-accent: #000000;

  /* Button */
  --color-button-cta: #2e2e2e;
  --color-button-accent: #000000;
  --color-button-primary: rgba(30, 30, 30, 0.1);
  --color-button-secondary: rgba(30, 30, 30, 0.05);
  --color-button-tertiary: rgba(30, 30, 30, 0.02);
  --color-button-cta-hover: #4e4e4e;
  --color-button-accent-hover: #222222;
  --color-button-cookie-accent: #ffffff;
  --color-button-cookie-secondary: #202027;

  /* Icon */
  --color-icon-accent: #000000;
  --color-icon-cta: #ffffff;
  --color-icon-primary: #1e1e1e;
  --color-icon-toggle-active: #000000;
  --color-icon-toggle-inactive: #737373;
  --color-icon-positive: #737373;
  --color-icon-negative: #737373;

  /* Border */
  --color-border-primary: rgba(30, 30, 30, 0.05);
  --color-border-hover: rgba(30, 30, 30, 0.25);
  --color-border-popup: rgba(30, 30, 30, 0.15);

  /* Background */
  --color-bg-page: #ffffff;
  --color-bg-block: #fafafa;
  --color-bg-cookie: #14141C;
  --color-bg-title: #f0f0f0;
  --color-bg-table-header: #f0f0f0;
  --color-bg-table-0: #f0f0f0;
  --color-bg-table-1: #f0f0f0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
}
body {
    background: var(--color-bg-page);
}



/*@media (max-height: 780px) {*/
/*   body { zoom: 0.9 }*/
/*}*/
/*@media (max-height: 700px) {*/
/*    body { zoom: 0.8 }*/
/*}*/
/*@media (min-height: 1024px) {*/
/*    body { zoom: 1.2 }*/
/*}*/
/*@media (min-height: 1200px) {*/
/*    body { zoom: 1.4 }*/
/*}*/

/* Fix for non-standard screen* */
@media (max-height: 780px) {
  #main-block .filters-container { zoom: 0.9 }
  .right-panel-tab-dropdown { zoom: 0.9 }
  .live-chart-tab .time-range-wrapper { zoom: 0.9 }
  .main-buttons { zoom: 0.9 }
  #main-block .main-controls { zoom: 0.9 }
  #main-block .bottom-player-area { zoom: 0.9 }
  .live-chart-tab #right-average-volume { zoom: 0.9 }
  #left-container { zoom: 0.9 }
}
@media (max-height: 700px) {
  #main-block .filters-container { zoom:  0.8 }
  .right-panel-tab-dropdown { zoom:  0.8 }
  .live-chart-tab .time-range-wrapper { zoom:  0.8 }
  .main-buttons { zoom:  0.8 }
  #main-block .main-controls { zoom: 0.8 }
  #main-block .bottom-player-area { zoom: 0.8 }
  .live-chart-tab #right-average-volume { zoom: 0.8 }
  #left-container { zoom: 0.8 }
}
@media (min-height: 1024px) {
  #main-block .filters-container { zoom: 1.2 }
  .right-panel-tab-dropdown { zoom: 1.2 }
  .live-chart-tab .time-range-wrapper { zoom: 1.2 }
  .main-buttons { zoom: 1.2 }
}
@media (min-height: 1200px) {
  #main-block .filters-container { zoom: 1.4 }
  .right-panel-tab-dropdown { zoom: 1.4 }
  .live-chart-tab .time-range-wrapper { zoom: 1.4 }
  .main-buttons { zoom: 1.4 }
}

/* Global Scrollbar Styles */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-button-primary);
    border-radius: 10px;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-hover);
}

/* Disable text selection for buttons, labels, and most popups */
button,
.ss-link,
.ss-beta-text,
.ss-pill-btn .label,
.filters-container .item,
.time-range-wrapper .item,
.view-toggle-buttons .view-btn,
.player-right-column .item,
.nav-arrow,
.tab-dropdown-btn,
.edit-watchlist-btn,
.watchlist-settings-btn,
.variants-container .variant,
.reset-wrapper .item,
.chart-settings-container button,
.mmap-header,
.ss-logo,
.banner-info,
.main-controls,
.bottom-player-area,
.header-buttons,
.chart-header,
.banner-logo,
.legend,
#right-average-volume .title,
.pop-up-container .pop-up {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Allow text selection specifically for the Info popup content */
#info-popup-container .pop-up {
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* Ensure inputs remain selectable, especially the one in the search button */
input, textarea {
    user-select: text !important;
    -webkit-user-select: text !important;
}