@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
.mud-main-content {
    min-height: 100vh;
}
.mud-main-content > .mud-container {    
    padding-bottom: var(--mud-appbar-height) !important;
}
.mud-input-slot {
    background-color: var(--mud-palette-surface) !important; 
    font-size: 14px !important;
}
.mud-input-outlined-border {    
    border-radius: 0px !important;
}
.with-appbar {    
    padding-top: 56px !important;
}
.bottom-nav.mud-appbar .mud-toolbar-appbar {
    width: 100% !important;
    display: flex !important;
    padding: 0 !important;
    justify-content: center !important;
}
.bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-decoration: none !important;
    color: var(--mud-palette-text-secondary);
    transition: all 0.2s ease;
}
.bottom-nav a.active {
    color: var(--mud-palette-primary) !important;
}
.marquee-container {
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center;
    /* 确保容器有明确的边界 */
    width: 0; 
    flex-grow: 1; 
}
.marquee-track {
    display: inline-flex;
    align-items: center;
    gap: 64px; 
    padding-left: 100%;
    animation: marquee-move 30s linear infinite;
    will-change: transform;
}
.marquee-item {
    flex-shrink: 0;
    user-select: none;
}
@keyframes marquee-move {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
.gradient-primary {
    background: linear-gradient(
        135deg,
        var(--app-color-primary-start),
        var(--app-color-primary-end)
    );
}
.gradient-primary:disabled {
    opacity: 0.5 !important;
 }
.gradient-secondary {
    background: linear-gradient(
        135deg,
        var(--app-color-secondary-start),
        var(--app-color-secondary-end)
    );
}
.gradient-text {
    background: linear-gradient(
        135deg,
        var(--app-color-text-start),
        var(--app-color-text-end)
    );
/* stylelint-disable-next-line */
    -webkit-background-clip: text;
/* stylelint-disable-next-line */
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--app-color-text-start);
}
.border-1 {
    border-width: 1px !important;
}
.border-default {
    border-color: var(--mud-palette-lines-default) !important;
}

.bg-surface {
    background-color: var(--mud-palette-surface) !important;
}

.text-32 {
    font-size: 32px !important;
}
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.w-16 {
    width: 64px !important;
}
.w-full {
    width: 100% !important;
}
.h-16 {
    height: 64px !important;
}

.h-full {
    
    height: 100% !important;
}

.h-screen {
    height: 100vh;
}
.size-5 {    
    width: 20px !important;
    height: 20px !important;
}

.size-4 {    
    width: 16px !important;
    height: 16px !important;
}

.size-6 {    
    width: 24px !important;
    height: 24px !important;
}

.size-12 {    
    width: 48px !important;
    height: 48px !important;
}

.size-16 {
    width: 64px !important;
    height: 64px !important;
    font-size: 1.5rem !important;
}

.size-18 {
    width: 72px !important;
    height: 72px !important;
    font-size: 1.5rem !important;
}

.size-24 {
    width: 96px !important;
    height: 96px !important;
}
.rounded-1 {    
    border-radius: 4px !important;
}
.rounded-2 {    
    border-radius: 8px !important;
}
.rounded-3 {    
    border-radius: 12px !important;
}
.rounded-4 {    
    border-radius: 16px !important;
}
.rounded-5 {    
    border-radius: 20px !important;
}
.opacity-0   { opacity: 0 !important; }
.opacity-25  { opacity: 0.25 !important; }
.opacity-50  { opacity: 0.5 !important; }
.opacity-75  { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

.icon-warning {
    color: var(--mud-palette-warning-lighten);
}

.text-primary-dark {
    color: oklch(55% .2 300) !important;
}

.text-muted {
    color: var(--mud-palette-background-gray) !important;
}

.bg-white {
    background-color: #fff !important;
}
.bg-success {
    
    background-color: var(--mud-palette-success) !important;
}
.bg-error{
    background-color: var(--mud-palette-error) !important;
}
.bg-error-low {
    background-color: color-mix(in oklab, var(--mud-palette-error) 10%, transparent) !important;
}
.font-bold {
    font-weight: 700 !important;
}

.primary-button {    
    background: linear-gradient(135deg, var(--app-color-primary-lighten), var(--app-color-primary-darken));
    font-weight: 600 !important; 
    letter-spacing: 0.015em;   
}
.primary-button:disabled {
    background: linear-gradient(135deg, var(--app-color-primary-lighten), var(--app-color-primary-darken));
    opacity: 0.5 !important;
 }

    .spin {
        display: inline-block;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        100% { transform: rotate(360deg); }
    }
    
    @keyframes coinFloat {
        0%, 100% {
    transform: translateY(0px) rotate(0deg);
}
        50% {
    transform: translateY(-5px) rotate(6deg);
}
    }

    @keyframes bannerShimmer{
0% {
    transform: translateX(-100%) skewX(-20deg);
}
100% {
    transform: translateX(400%) skewX(-20deg);
}
    }
    
    @keyframes coinFloat2 {
0%, 100% {
    transform: translateY(0px) rotate(0deg);
}
50% {
    transform: translateY(-7px) rotate(-8deg);
}
    }

    @keyframes sparkle {
        0%, 100% {
    opacity: 0;
    transform: scale(0.3);
}
        50% {
    opacity: 1;
    transform: scale(1);
}
    }

    @keyframes heroSlideIn{
        0% {
    opacity: 0;
    transform: translateX(-60px);
}
    }
    
    @keyframes heroFadeUp{
        0% {
    opacity: 0;
    transform: translateY(16px);
}
    }

    @keyframes barCoinFloat{
        0%, 100% {
    transform: translateY(-50%) translateX(0) scale(1);
    opacity: 0.9;
}
25% {
    transform: translateY(-70%) translateX(2px) scale(1.1);
    opacity: 1;
}
50% {
    transform: translateY(-40%) translateX(-1px) scale(0.95);
    opacity: 0.85;
}
75% {
    transform: translateY(-60%) translateX(1px) scale(1.05);
    opacity: 0.95;
}
    }

    .left-4 {
    left: calc(.25rem * 4);
}
    .-translate-y-1\/2 {
     --tw-translate-y: -50%; 
     translate: 0 -50%; 
}
    .top-1\/2 {
    top: 50%;
}
:root {
    /* Primary Gradient */
    --app-color-primary-start: #7c3aed;
    --app-color-primary-end: #6366f1;

    /* Secondary Gradient */
    --app-color-secondary-start: #6366f1;
    --app-color-secondary-end: #4f46e5;

    /* Text Gradient */
    --app-color-text-start: #c4b5fd;
    --app-color-text-end: #818cf8;

}