:root,
html[data-theme="dark"] {
  --background: #060510;
  --background-color: #060510;
  --box-color: #12111a;
  --loading: #161522;
  --hover-color: #161522;
  --text-color: #f7f7f7;
  --text-grey: #9899a3;
  --border-color: #474b52;
  --buy-color: #21c95e;
  --sell-color: #ff622e;
  --blue-main: #516af6;
  --blue-background: #516af629;
  --blue-hover: #516af6cc;
}

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] .layoutContainer,
html[data-theme="dark"] .mainContent {
  background: #060510;
  color: #f7f7f7;
}

.fomo-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #060510;
  opacity: 1;
  transition: opacity 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fomo-loader::after {
  position: absolute;
  width: min(70vw, 420px);
  aspect-ratio: 1;
  border: 1px solid rgba(243, 244, 255, 0.08);
  border-radius: 50%;
  content: "";
  transform: scale(0.72);
  animation: fomo-loader-ring 900ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.fomo-loader.is-exiting {
  opacity: 0;
  pointer-events: none;
}

.fomo-loader__mark {
  position: relative;
  z-index: 1;
  width: min(48vw, 220px);
  color: #f7f7f7;
  filter: drop-shadow(0 18px 40px rgba(81, 106, 246, 0.2));
  opacity: 0;
  transform: translateY(8px) scale(0.94);
  animation: fomo-loader-enter 580ms cubic-bezier(0.16, 1, 0.3, 1) 80ms forwards;
}

.fomo-loader__mark .fomo-eye-pupils {
  transform-origin: center;
  animation: fomo-loader-eyes 760ms cubic-bezier(0.65, 0, 0.35, 1) 160ms both;
}

.fomo-eye-mark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.fomo-eye-shell {
  fill: currentColor;
}

.fomo-eye-pupil {
  fill: #516af6;
}

.fomo-eye-glint {
  fill: rgba(255, 255, 255, 0.92);
}

#fomo-hero-eye {
  display: inline-flex;
  width: 1.22em;
  height: 0.78em;
  margin: 0 0.08em;
  align-items: center;
  justify-content: center;
  color: var(--text-color, #f7f7f7);
  vertical-align: -0.11em;
}

#fomo-hero-eye .fomo-eye-mark {
  width: 100%;
  height: 100%;
}

#fomo-hero-eye .fomo-eye-pupils {
  transform-box: view-box;
  transform-origin: center;
  transition: transform 90ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

@keyframes fomo-loader-enter {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fomo-loader-eyes {
  0% { opacity: 0; transform: translateX(-8px); }
  35% { opacity: 1; }
  70% { transform: translateX(7px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes fomo-loader-ring {
  from { opacity: 0; transform: scale(0.72); }
  45% { opacity: 1; }
  to { opacity: 0; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .fomo-loader,
  .fomo-loader::after,
  .fomo-loader__mark,
  .fomo-loader__mark .fomo-eye-pupils,
  #fomo-hero-eye .fomo-eye-pupils {
    animation: none !important;
    transition: none !important;
  }

  .fomo-loader__mark {
    opacity: 1;
    transform: none;
  }
}