body {
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-x: hidden;
    overflow-y: overlay;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 玻璃效果 */
.liquid-glass {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

html.dark .liquid-glass {
    background: rgba(30, 30, 32, 0.6);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.liquid-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(145deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
    opacity: 0.5;
}

.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E");
}

/* Background Configuration */
.liquid-bg, .liquid-bg-dark {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    transition: opacity 0.8s ease;
}

.liquid-bg { 
    background: #F5F5F7; 
}

.liquid-bg-dark { 
    background: #050505; 
    opacity: 0; 
}

html.dark .liquid-bg { opacity: 0; }
html.dark .liquid-bg-dark { opacity: 1; }

.liquid-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    will-change: transform;
}

.blob-1 { top: -10%; left: -10%; width: 70vw; height: 70vw; background: #aebfff; opacity: 0.04; animation: blob 25s infinite alternate; }
.blob-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: #ffbebe; opacity: 0.04; animation: blob 25s infinite alternate-reverse; } 
.blob-3 { top: 40%; left: 30%; width: 40vw; height: 40vw; background: #ffeeb0; opacity: 0.04; animation: blob 30s infinite alternate; }

html.dark .liquid-blob { display: none; }

/* Scrollbar tweaks */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}