@layer base {
  body {
    @apply bg-black text-white font-sans antialiased;
  }
}

.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  @apply bg-transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-white/10 rounded-full hover:bg-white/20 transition-colors;
}

/* Keep MobX transition property for Gauge */
@property --a {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* Feather icon global sizing */
.feather {
  @apply w-full h-full;
}

/* Ensure dotlottie-player transitions smoothly */
dotlottie-player {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  background-color: rgb(0, 0, 0);
}

#root {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  overflow-x: hidden;
  padding-left: 0.5em;
  padding-right: 0.5em;
}


.chart {
  width: 100%;
  height: 100px;
  background: #2a2a2a;
  border-radius: 8px;
  margin-bottom: 15px;
}


dotlottie-player {
  transition: all 0.2s ease-in-out;
}

@property --a {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}


:root {
  --color-table: rgb(112, 202, 209);
  --color-accent: rgba(112, 202, 209, 0.1);
  --color-bg-secondary: rgb(42, 42, 42);
  --border-radius: 8px;
}