@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;
}


.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;
}