@import "https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,700&display=swap&subset=cyrillic,cyrillic-ext,latin-ext,vietnamese";

/* Updated Color Variables */
:host, :root {
  /* Primary Brand Colors */
  --brand-green: hsl(122, 39%, 49%);
  --brand-gold: #FFD700;
  --brand-dark-blue: #003366;
  
  /* Derived Colors */
  --brand-green-light: #66BB6A;
  --brand-green-dark: #388E3C;
  --brand-gold-light: #FFEB3B;
  --brand-gold-dark: #FFC107;
  --brand-blue-light: #1565C0;
  --brand-blue-dark: #002244;
  
  /* Updated Color Mappings */
  --brand-white: #fff;
  --brand-dark-grey: #0e0e0e;
  --brand-red-coral: #4CAF50; /* Changed to green */
  --brand-orange: #FFD700; /* Changed to gold */
  --brand-purple-coral: #003366; /* Changed to dark blue */
  --brand-blue-coral: #4CAF50; /* Changed to green */
  --brand-secondary: #4CAF50; /* Changed to green */
  
  /* Text sizes and other non-color variables remain the same */
  --text-size-xxxxs: .8rem;
  --text-size-xxxs: 1rem;
  --text-size-xxs: 1.2rem;
  --text-size-xs: 1.4rem;
  --text-size-s: 1.6rem;
  --text-size-xsm: 1.8rem;
  --text-size-sm: 2rem;
  --text-size-m: 2.4rem;
  --text-size-l: 3.2rem;
  --text-size-xl: 4.8rem;
  --text-size-xxl: 6.4rem;
  --text-lh-xxs: 1;
  --text-lh-xs: 1.25;
  --text-lh-s: 1.4;
  --text-lh-m: 1.5;
  --text-lh-l: 1.75;
  --text-lh-xl: 2;
  --text-lh-xxl: 2.4;
  --text-weight-lighter: lighter;
  --text-weight-normal: normal;
  --text-weight-bold: bold;
  --text-weight-bolder: bolder;
  --text-align-left: start;
  --text-align-right: right;
  --text-align-center: center;
  
  /* Gradient updates */
  --app-card-virtual: linear-gradient(274.25deg, #003366 9.01%, #1565C0 103.31%);
  --app-card-virtual-swap-free: linear-gradient(58.51deg, #002244 28.06%, #003366 93.51%);
  --tw-border-opacity: 1;
}

/* Light Theme Updates */
:host .theme--light, :root .theme--light {
  --general-main-1: #fff;
  --general-main-2: #fff;
  --general-main-3: #999;
  --general-main-4: #ffffffb3;
  --general-section-1: #f2f3f4;
  --general-section-2: #f2f3f4;
  --general-section-3: #fafafa;
  --general-section-4: #f5f7fa;
  --general-section-5: #f2f3f4;
  --general-section-6: #f2f3f4;
  --general-disabled: #eaeced;
  --general-hover: #e6e9e9;
  --general-active: #d6dadb;
  --icons: #4CAF50; /* Changed to green */
  --text-general: black;
  --text-primary: #999;
  --text-less-prominent: black;
  --text-prominent:#4CAF50 ; /* Changed to dark blue */
  --text-disabled: black;
  --text-disabled-1: black;
  --text-loss-danger: #ec3f3f;
  --text-profit-success: #4CAF50; /* Changed to green */
  --text-warning: #FFD700; /* Changed to gold */
  --text-red: #4CAF50; /* Changed to green */
  --text-green: #4CAF50; /* Updated green */
  --text-blue: #003366; /* Changed to dark blue */
  --text-info-blue: #003366; /* Changed to dark blue */
  --text-info-blue-background: #E3F2FD;
  --text-colored-background: #fff;
  --icon-light-background: #5c5c5c;
  --icon-dark-background: #fff;
  --icon-grey-background: #f2f3f4;
  --icon-black-plus: #000;
  --text-status-info-blue: #003366; /* Changed to dark blue */
  --text-hint: #003366; /* Changed to dark blue */
  --purchase-main-1: #4CAF50; /* Changed to green */
  --purchase-section-1: #388E3C; /* Darker green */
  --purchase-main-2: #ec3f3f;
  --purchase-section-2: #d33636;
  --purchase-disabled-main: #eaeced;
  --purchase-disabled-section: #e6e9e9;
  --button-primary-default: var(--brand-dark-blue);
  --button-secondary-default: #999;
  --button-tertiary-default: transparent;
  --button-primary-light-default: #4CAF5029; /* Green with transparency */
  --button-primary-hover: #002244; /* Darker blue */
  --button-secondary-hover: #00000014;
  --button-tertiary-hover: #4CAF5014; /* Green with transparency */
  --button-primary-light-hover: #4CAF503d; /* Green with transparency */
  --button-toggle-primary: #4CAF50; /* Changed to green */
  --button-toggle-secondary: #d6dadb;
  --button-toggle-alternate: #fff;
  --overlay-outside-dialog: #000000b8;
  --overlay-inside-dialog: #fffffff5;
  --shadow-menu: #00000029;
  --shadow-menu-2: #00000029;
  --shadow-drop: #00000014;
  --shadow-box: #0006;
  --state-normal: #fff;
  --state-hover: #e6e9e9;
  --state-active: #d6dadb;
  --state-disabled: #eaeced;
  --checkbox-disabled-grey: #d6d6d6;
  --sidebar-tab: #d6d6d6;
  --border-normal: #d6dadb;
  --border-normal-1: #d6dadb;
  --border-normal-2: #d6dadb;
  --border-normal-3: #d6d6d6;
  --border-hover: #4CAF50; /* Changed to green */
  --border-hover-1: #388E3C; /* Darker green */
  --border-active: var(--brand-green);
  --border-disabled: #eaeced;
  --border-divider: #f2f3f4;
  --fill-normal: #fff;
  --fill-normal-1: #c2c2c2;
  --fill-hover: #4CAF50; /* Changed to green */
  --fill-active: var(--brand-green);
  --fill-disabled: #eaeced;
  --status-default: #eaeced;
  --status-adjustment: #FFD700; /* Changed to gold */
  --status-danger: #ec3f3f;
  --status-success: #4CAF50; /* Changed to green */
  --status-warning: #FFD700; /* Changed to gold */
  --status-warning-transparent: #FFD70029; /* Gold with transparency */
  --status-transfer: #FFD700; /* Changed to gold */
  --status-info: #003366; /* Changed to dark blue */
  --status-colored-background: #fff;
  --status-alert-background: #FFD70029; /* Gold with transparency */
  --dashboard-swap-free: linear-gradient(58.51deg, #002244 28.06%, #003366 93.51%);
  --dashboard-app: linear-gradient(274.25deg, #003366 9.01%, #1565C0 103.31%);
  --transparent-success: #4CAF50eb; /* BotGreen with transparency */
  --transparent-info: #00336629; /* Dark blue with transparency */
  --transparent-hint: #00336614; /* Dark blue with transparency */
  --transparent-danger: #4caf4f; /* Green with transparency */
  --transparent-correct-message: #4CAF5029; /* Green with transparency */
  --transparent-fake-message: #ec3f3f29;
  --gradient-success: linear-gradient(to top, #fff, #4CAF5029);
  --gradient-danger: linear-gradient(to top, #fff, #4CAF5029);
  --contract-gradient-danger: linear-gradient(to top, #fff 85%, #4CAF5029);
  --gradient-right-edge: linear-gradient(to right, #fff0 -5%, #fff 71%);
  --gradient-blue: linear-gradient(90deg, #003366 0%, #1565C0 104.41%);
  --gradient-gold: linear-gradient(90deg, #FFD700 0%, #FFC107 104.41%);
  --gradient-green: linear-gradient(90deg, #4CAF50 0%, #66BB6A 104.41%);
  --badge-white: #fff;
  --badge-blue: #003366; /* Changed to dark blue */
  --badge-violet: #003366; /* Changed to dark blue */
  --badge-green: #4CAF50; /* Changed to green */
  --traders-hub-banner-border-color: #e6e9e9;
  --demo-text-color-1: #c2c2c2;
  --demo-text-color-2: #fff;
  --header-background-mt5: #E8F5E8; /* Light green background */
  --header-background-others: #FFF9C4; /* Light gold background */
}

/* Dark Theme Updates */
:host .theme--dark, :root .theme--dark {
  --general-main-1: #0e0e0e;
  --general-main-2: #151717;
  --general-main-3: #1d1f20;
  --general-main-4: #0e0e0e80;
  --general-section-1: #151717;
  --general-section-2: #0e0e0e;
  --general-section-3: #242828;
  --general-section-4: #242828;
  --general-section-5: #242828;
  --general-section-6: #6e6e6e;
  --general-disabled: #1d1f20;
  --general-hover: #242828;
  --general-active: #323738;
  --icons: #4CAF50; /* Changed to green */
  --text-prominent: #fff;
  --text-general: #c2c2c2;
  --text-less-prominent: #6e6e6e;
  --text-primary: #999;
  --text-disabled: #3e3e3e;
  --text-disabled-1: #3e3e3e;
  --text-profit-success: #4CAF50; /* Changed to green */
  --text-loss-danger: #cc2e3d;
  --text-red: #4CAF50; /* Changed to green */
  --text-colored-background: #fff;
  --text-info-blue: #66BB6A; /* Light green */
  --text-info-blue-background: #1B5E20; /* Dark green background */
  --text-status-info-blue: #003366; /* Changed to dark blue */
  --text-hint: #c2c2c2;
  --icon-light-background: #5c5c5c;
  --icon-dark-background: #fff;
  --icon-grey-background: #333;
  --icon-black-plus: #fff;
  --purchase-main-1: #4CAF50; /* Changed to green */
  --purchase-section-1: #2E7D32; /* Darker green */
  --purchase-main-2: #cc2e3d;
  --purchase-section-2: #a32430;
  --purchase-disabled-main: #1d1f20;
  --purchase-disabled-section: #0e0e0e;
  --button-primary-default: var(--brand-dark-blue);
  --button-secondary-default: #6e6e6e;
  --button-tertiary-default: transparent;
  --button-primary-light-default: #4CAF5029; /* Green with transparency */
  --button-primary-hover: #002244; /* Darker blue */
  --button-secondary-hover: #ffffff14;
  --button-tertiary-hover: #4CAF5014; /* Green with transparency */
  --button-primary-light-hover: #4CAF503d; /* Green with transparency */
  --button-toggle-primary: #4CAF50; /* Changed to green */
  --button-toggle-secondary: #323738;
  --button-toggle-alternate: #323738;
  --button-get-started-bg: #fff;
  --overlay-outside-dialog: #000000b8;
  --overlay-inside-dialog: #0e0e0ef5;
  --shadow-menu: #000000d6;
  --shadow-menu-2: #000000b8;
  --shadow-drop: #000000a3;
  --shadow-box: #555975;
  --state-normal: #0e0e0e;
  --state-hover: #242828;
  --state-active: #323738;
  --state-disabled: #1d1f20;
  --checkbox-disabled-grey: #d6d6d6;
  --sidebar-tab: #6e6e6e;
  --border-normal: #323738;
  --border-normal-1: #d6dadb;
  --border-normal-2: #999;
  --border-normal-3: #6e6e6e;
  --border-hover: #4CAF50; /* Changed to green */
  --border-hover-1: #388E3C; /* Darker green */
  --border-active: var(--brand-green);
  --border-disabled: #1d1f20;
  --border-divider: #2e2e2e;
  --fill-normal: #0e0e0e;
  --fill-normal-1: #333;
  --fill-hover: #4CAF50; /* Changed to green */
  --fill-active: var(--brand-green);
  --fill-disabled: #1d1f20;
  --status-default: #eaeced;
  --status-adjustment: #FFD700; /* Changed to gold */
  --status-danger: #cc2e3d;
  --status-warning: #FFD700; /* Changed to gold */
  --status-warning-transparent: #FFD70029; /* Gold with transparency */
  --status-success: #4CAF50; /* Changed to green */
  --status-transfer: #FFD700; /* Changed to gold */
  --status-info: #003366; /* Changed to dark blue */
  --status-colored-background: #fff;
  --status-alert-background: #FFD70029; /* Gold with transparency */
  --transparent-success: #4CAF50eb; /* Green with transparency */
  --transparent-info: #00336629; /* Dark blue with transparency */
  --transparent-hint: #4CAF5029; /* Green with transparency */
  --transparent-danger: #4CAF5029; /* Green with transparency */
  --transparent-correct-message: #4CAF5029; /* Green with transparency */
  --transparent-fake-message: #ec3f3f29;
  --gradient-success: linear-gradient(to top, #0e0e0e, #4CAF5029);
  --gradient-danger: linear-gradient(to top, #0e0e0e, #4CAF5029);
  --contract-gradient-danger: linear-gradient(to top, #0e0e0e 85%, #4CAF5029);
  --gradient-right-edge: linear-gradient(to right, #0e0e0e00 -5%, #0e0e0e 71%);
  --gradient-blue: linear-gradient(90deg, #003366 0%, #1565C0 104.41%);
  --gradient-gold: linear-gradient(90deg, #FFD700 0%, #FFC107 104.41%);
  --gradient-green: linear-gradient(90deg, #4CAF50 0%, #66BB6A 104.41%);
  --badge-white: #fff;
  --badge-blue: #003366; /* Changed to dark blue */
  --badge-violet: #003366; /* Changed to dark blue */
  --badge-green: #4CAF50; /* Changed to green */
  --traders-hub-banner-border-color: #242828;
  --demo-text-color-1: #333;
  --demo-text-color-2: #333;
  --header-background-mt5: #1B5E20; /* Dark green background */
  --header-background-others: #F57F17; /* Dark gold background */
}

/* Loader Container Updates */
.loader-container {
  color: #fff;
  background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0a1428 100%);
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  flex-direction: column;
}

.loader-content {
  text-align: center;
  background: rgba(20, 20, 40, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(100, 200, 255, 0.1);
  border-radius: 16px;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 480px;
  padding: 60px 40px;
  display: flex;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.binarytool-loader__logo-container {
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
  display: flex;
  display: none;
}

.binary-part {
  color: #4CAF50; /* Changed to green */
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 3rem;
  font-weight: 700;
}

.fx-part {
  color: #FFD700; /* Changed to gold */
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 3rem;
  font-weight: 700;
}

.binarytool-loader__welcome {
  opacity: 1;
  margin-bottom: 30px;
  transition: opacity .5s;
}

.binarytool-loader__welcome-subtext {
  color: #aaa;
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.binarytool-loader__welcome-tagline {
  color: #e0e0ff;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.3px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.spinner-pro {
  border: 5px solid #4CAF504d; /* Green with transparency */
  border-top-color: #4CAF50; /* Green */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin-bottom: 30px;
  animation: 1s ease-in-out infinite spin;
}

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

.comment-text {
  color: #b0b5d4;
  min-height: 20px;
  margin-bottom: 30px;
  font-size: 0.95rem;
  letter-spacing: 0.2px;
}

.progress-bar {
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  width: 100%;
  height: 5px;
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid rgba(100, 200, 255, 0.1);
}

.progress-fill {
  background: linear-gradient(90deg, #00d4ff, #64c8ff);
  height: 100%;
  transition: width .1s linear;
  box-shadow: 0 0 10px rgba(100, 200, 255, 0.5);
}

.progress-text {
  color: #64c8ff;
  margin-bottom: 40px;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.footer-text {
  color: #999;
  margin-top: 20px;
  font-size: .8rem;
}

.powered-by-deriv {
  position: absolute;
  bottom: 30px;
  color: #888;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.powered-by-deriv::before {
  content: '';
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #888);
}

.powered-by-deriv::after {
  content: '';
  width: 20px;
  height: 2px;
  background: linear-gradient(90deg, #888, transparent);
}

/* Rest of the CSS remains the same with updated color references... */
/* (The remaining CSS classes would continue with the original structure but referencing the updated color variables) */

body {
  background: var(--general-main-1);
  font-family: IBM Plex Sans, sans-serif;
}

.icon-general-fill-path path,
.icon-general-fill-g-path g path {
  fill: var(--text-general);
}