/* ===== 增强版设计令牌系统 ===== */
:root {
    /* === 深邃基调色彩系统 === */
    --primary-deep: #1a1d29;
    --primary-medium: #252936;
    --primary-light: #2f3349;
    --primary-lighter: #3a3f5c;
    
    /* === 沉浸式渐变背景 === */
    --bg-gradient-primary: linear-gradient(135deg, 
        #1a1d29 0%, 
        #252936 25%, 
        #2f3349 50%, 
        #1e2a3a 75%, 
        #1a1d29 100%);
    
    --bg-gradient-flow: linear-gradient(135deg,
        #1a1d29 0%,
        #252936 20%,
        #2f3349 40%,
        #1e2a3a 60%,
        #252936 80%,
        #1a1d29 100%);
    
    /* === 音效主题色彩 === */
    --rain-theme: linear-gradient(135deg, #4a6fa5 0%, #2c5282 100%);
    --rain-ambient: #4a6fa5;
    --rain-glow: rgba(74, 111, 165, 0.3);
    
    --waves-theme: linear-gradient(135deg, #2d7dd2 0%, #1a5490 100%);
    --waves-ambient: #2d7dd2;
    --waves-glow: rgba(45, 125, 210, 0.3);
    
    --fire-theme: linear-gradient(135deg, #d69e2e 0%, #b7791f 100%);
    --fire-ambient: #d69e2e;
    --fire-glow: rgba(214, 158, 46, 0.3);
    
    --forest-theme: linear-gradient(135deg, #38a169 0%, #2f855a 100%);
    --forest-ambient: #38a169;
    --forest-glow: rgba(56, 161, 105, 0.3);
    
    --cafe-theme: linear-gradient(135deg, #c05621 0%, #9c4221 100%);
    --cafe-ambient: #c05621;
    --cafe-glow: rgba(192, 86, 33, 0.3);
    
    /* === 毛玻璃效果系统 === */
    --glass-light: rgba(255, 255, 255, 0.08);
    --glass-medium: rgba(255, 255, 255, 0.12);
    --glass-heavy: rgba(255, 255, 255, 0.16);
    --glass-ultra: rgba(255, 255, 255, 0.20);
    
    --glass-border-light: rgba(255, 255, 255, 0.1);
    --glass-border-medium: rgba(255, 255, 255, 0.15);
    --glass-border-heavy: rgba(255, 255, 255, 0.2);
    
    /* === 发光效果系统 === */
    --glow-soft: 0 0 20px rgba(255, 255, 255, 0.08);
    --glow-medium: 0 0 30px rgba(255, 255, 255, 0.12);
    --glow-strong: 0 0 40px rgba(255, 255, 255, 0.16);
    --glow-intense: 0 0 60px rgba(255, 255, 255, 0.2);
    
    /* === 阴影层次系统 === */
    --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.4);
    --shadow-deep: 0 24px 64px rgba(0, 0, 0, 0.5);
    --shadow-profound: 0 32px 80px rgba(0, 0, 0, 0.6);
    
    /* === 字体系统 === */
    --font-primary: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 
                    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', 
                 'Courier New', monospace;
    
    /* 字体大小 */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */
    
    /* 字重系统 */
    --font-thin: 100;
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* 行高系统 */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    
    /* === 文本色彩系统 === */
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-tertiary: rgba(255, 255, 255, 0.55);
    --text-disabled: rgba(255, 255, 255, 0.35);
    
    /* === 动画缓动系统 === */
    --ease-natural: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-gentle: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
    /* === 动画时长系统 === */
    --duration-instant: 0.1s;
    --duration-fast: 0.2s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;
    --duration-slower: 0.8s;
    --duration-slowest: 1.2s;
    
    /* === 圆角系统 === */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 50%;
    
    /* === 间距系统 === */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 0.75rem;   /* 12px */
    --space-lg: 1rem;      /* 16px */
    --space-xl: 1.5rem;    /* 24px */
    --space-2xl: 2rem;     /* 32px */
    --space-3xl: 3rem;     /* 48px */
    --space-4xl: 4rem;     /* 64px */
    
    /* === 声音按钮布局系统 === */
    --sound-btn-count: 7;  /* 当前声音按钮数量 */
    --sound-btn-width: 110px; /* 默认按钮宽度 */
    --sound-btn-gap: var(--space-md); /* 按钮间距 */
    
    /* 计算的容器宽度：按钮数量 × 宽度 + (数量-1) × 间距 + 内边距 */
    --sound-container-width: calc(var(--sound-btn-count) * var(--sound-btn-width) + (var(--sound-btn-count) - 1) * var(--sound-btn-gap) + 2 * var(--space-lg));
    
    /* === 功能色彩 === */
    --success-color: #38a169;
    --success-glow: rgba(56, 161, 105, 0.3);
    --warning-color: #d69e2e;
    --warning-glow: rgba(214, 158, 46, 0.3);
    --error-color: #e53e3e;
    --error-glow: rgba(229, 62, 62, 0.3);
    --info-color: #3182ce;
    --info-glow: rgba(49, 130, 206, 0.3);
    
    /* === 兼容性变量（保持向后兼容） === */
    --primary-color: var(--primary-medium);
    --secondary-color: var(--primary-light);
    --background-color: var(--primary-deep);
    --text-color: var(--text-primary);
    --accent-color: var(--forest-ambient);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --border-radius: var(--radius-md);
    --transition: all var(--duration-normal) var(--ease-natural);
}

/* === 深色模式适配 === */
@media (prefers-color-scheme: dark) {
    :root {
        /* 深色模式下增强对比度 */
        --glass-light: rgba(255, 255, 255, 0.1);
        --glass-medium: rgba(255, 255, 255, 0.15);
        --glass-heavy: rgba(255, 255, 255, 0.2);
        --glass-ultra: rgba(255, 255, 255, 0.25);
        
        --text-primary: rgba(255, 255, 255, 0.98);
        --text-secondary: rgba(255, 255, 255, 0.85);
    }
}

/* === 高对比度模式适配 === */
@media (prefers-contrast: high) {
    :root {
        --glass-light: rgba(255, 255, 255, 0.15);
        --glass-medium: rgba(255, 255, 255, 0.2);
        --glass-heavy: rgba(255, 255, 255, 0.25);
        --glass-ultra: rgba(255, 255, 255, 0.3);
        
        --text-primary: rgba(255, 255, 255, 1);
        --text-secondary: rgba(255, 255, 255, 0.9);
        
        --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.5);
        --shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.6);
        --shadow-deep: 0 24px 64px rgba(0, 0, 0, 0.7);
    }
}

/* === 减少动画偏好适配 === */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-instant: 0.01ms;
        --duration-fast: 0.01ms;
        --duration-normal: 0.01ms;
        --duration-slow: 0.01ms;
        --duration-slower: 0.01ms;
        --duration-slowest: 0.01ms;
    }
}

/* 基础重置和全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: var(--font-primary);
    /* background: var(--bg-gradient-primary); */
    color: var(--text-primary);
    overflow-x: hidden;
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== 深邃沉浸式背景系统 ===== */

/* 全屏背景容器 */
#background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: var(--bg-gradient-flow);
    background-size: 400% 400%;
    animation: backgroundFlow 25s var(--ease-natural) infinite;
    transition: background var(--duration-slower) var(--ease-gentle);
}

/* 背景图片轮播 */
.background-slideshow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.background-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity var(--duration-slowest) var(--ease-gentle);
}

.background-slide.active {
    opacity: 0.3; /* 让背景图片半透明，保持毛玻璃效果 */
}

/* 背景渐变覆盖层 */
.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: var(--bg-gradient-flow);
    background-size: 400% 400%;
    animation: backgroundFlow 25s var(--ease-natural) infinite;
    opacity: 0.8; /* 保持渐变效果但允许背景图片透过 */
}

/* 背景层叠系统 */
#background-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
    animation: float 15s var(--ease-natural) infinite;
}

#background-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.01) 50%, transparent 70%);
    animation: float 20s var(--ease-natural) infinite reverse;
}

/* 音效主题背景类 */
.bg-rain {
    background: linear-gradient(135deg,
        #1a1d29 0%,
        #2c3e50 20%,
        #34495e 40%,
        #2c5282 60%,
        #1a365d 80%,
        #1a1d29 100%) !important;
}

.bg-waves {
    background: linear-gradient(135deg,
        #1a1d29 0%,
        #1e3a8a 20%,
        #1e40af 40%,
        #2563eb 60%,
        #1d4ed8 80%,
        #1a1d29 100%) !important;
}

.bg-fire {
    background: linear-gradient(135deg,
        #1a1d29 0%,
        #92400e 20%,
        #b45309 40%,
        #d97706 60%,
        #f59e0b 80%,
        #1a1d29 100%) !important;
}

.bg-forest {
    background: linear-gradient(135deg,
        #1a1d29 0%,
        #14532d 20%,
        #166534 40%,
        #15803d 60%,
        #16a34a 80%,
        #1a1d29 100%) !important;
}

.bg-cafe {
    background: linear-gradient(135deg,
        #1a1d29 0%,
        #7c2d12 20%,
        #9a3412 40%,
        #c2410c 60%,
        #ea580c 80%,
        #1a1d29 100%) !important;
}

/* 新增主题：白噪音与风声 */
.bg-white-noise {
    background: linear-gradient(135deg,
        #1a1d29 0%,
        #334155 20%,
        #475569 40%,
        #64748b 60%,
        #94a3b8 80%,
        #1a1d29 100%) !important;
}

.bg-wind {
    background: linear-gradient(135deg,
        #1a1d29 0%,
        #0f766e 20%,
        #0891b2 40%,
        #06b6d4 60%,
        #22d3ee 80%,
        #1a1d29 100%) !important;
}

/* 微妙的粒子效果 */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.1;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: particleFloat 8s linear infinite;
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { left: 20%; animation-delay: 1s; }
.particle:nth-child(3) { left: 30%; animation-delay: 2s; }
.particle:nth-child(4) { left: 40%; animation-delay: 3s; }
.particle:nth-child(5) { left: 50%; animation-delay: 4s; }
.particle:nth-child(6) { left: 60%; animation-delay: 5s; }
.particle:nth-child(7) { left: 70%; animation-delay: 6s; }
.particle:nth-child(8) { left: 80%; animation-delay: 7s; }
.particle:nth-child(9) { left: 90%; animation-delay: 8s; }

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-10vh) scale(1);
        opacity: 0;
    }
}

/* ===== 核心动画关键帧系统 ===== */

/* 背景流动动画 */
@keyframes backgroundFlow {
    0% { background-position: 0% 50%; }
    25% { background-position: 100% 25%; }
    50% { background-position: 50% 100%; }
    75% { background-position: 25% 0%; }
    100% { background-position: 0% 50%; }
}

/* 浮现动画 */
@keyframes materialise {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* 呼吸动画 */
@keyframes breathe {
    0%, 100% {
        transform: scale(1);
        box-shadow: var(--glow-soft);
    }
    50% {
        transform: scale(1.02);
        box-shadow: var(--glow-medium);
    }
}

/* 涟漪效果 */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* 脉动发光 */
@keyframes pulse {
    0%, 100% {
        box-shadow: var(--glow-soft);
    }
    50% {
        box-shadow: var(--glow-strong);
    }
}

/* 旋转动画 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 渐入动画 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 上滑动画 */
@keyframes slideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 下滑动画 */
@keyframes slideDown {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

/* 浮动动画 */
@keyframes float {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
    }
    33% { 
        transform: translateY(-10px) rotate(2deg); 
    }
    66% { 
        transform: translateY(5px) rotate(-1deg); 
    }
}

/* ===== 涟漪效果系统 ===== */

/* 涟漪效果元素 */
.ripple-effect {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 1;
}

/* 涟漪动画 */
.ripple-effect.ripple-animate {
    animation: rippleExpand var(--duration-slower) var(--ease-natural);
}

@keyframes rippleExpand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(25);
        opacity: 0;
    }
}

/* 不同大小的涟漪效果 */
.ripple-small .ripple-effect.ripple-animate {
    animation: rippleExpandSmall var(--duration-normal) var(--ease-natural);
}

@keyframes rippleExpandSmall {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(15);
        opacity: 0;
    }
}

.ripple-large .ripple-effect.ripple-animate {
    animation: rippleExpandLarge var(--duration-slowest) var(--ease-natural);
}

@keyframes rippleExpandLarge {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(35);
        opacity: 0;
    }
}

/* 主容器 - 优化单屏体验 */
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--space-md) var(--space-xl);
    position: relative;
    animation: materialise var(--duration-slower) var(--ease-gentle);
    gap: var(--space-md);
    max-width: 1300px; /* 增加以容纳更宽的声音选择器 */
    margin: 0 auto;
    transition: all var(--duration-normal) var(--ease-natural);
}

/* 响应式调整主容器间距 */
@media (max-height: 700px) {
    .main-container {
        gap: var(--space-md);
        padding: var(--space-md) var(--space-lg);
    }
}

@media (max-height: 600px) {
    .main-container {
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
    }
}

/* 应用标题 */
.app-title {
    font-family: var(--font-primary);
    font-weight: var(--font-light);
    font-size: var(--text-4xl);
    color: var(--text-primary);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.1em;
    margin: 0 0 var(--space-sm) 0;
    animation: materialise var(--duration-slower) var(--ease-gentle) 0.2s both;
}

/* ===== 主播放按钮毛玻璃风格 ===== */
.play-button {
    /* 基础尺寸和形状 */
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border-medium);
    
    /* 毛玻璃效果 */
    background: var(--glass-medium);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    /* 文字样式 */
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    
    /* 阴影层次 */
    box-shadow: 
        var(--shadow-float),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    
    /* 交互和动画 */
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-natural);
    position: relative;
    overflow: hidden;
    
    /* 布局 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 防止选中 */
    user-select: none;
    -webkit-user-select: none;
    
    /* 入场动画 */
    animation: materialise var(--duration-slower) var(--ease-gentle) 0.6s both;
}

/* 悬停效果 */
.play-button:hover {
    transform: scale(1.05);
    background: var(--glass-heavy);
    border-color: var(--glass-border-heavy);
    box-shadow: 
        var(--shadow-elevated),
        var(--glow-medium),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* 按压效果 */
.play-button:active {
    transform: scale(0.98);
    transition-duration: var(--duration-fast);
    box-shadow: 
        var(--shadow-float),
        inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 播放状态 */
.play-button.playing {
    background: var(--glass-ultra);
    border-color: var(--glass-border-heavy);
    animation: breathe 3s var(--ease-natural) infinite;
    box-shadow: 
        var(--shadow-elevated),
        var(--glow-strong),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* 加载中状态 */
.play-button.loading {
    pointer-events: none; /* 防止重复点击 */
    background: var(--glass-medium);
    border-color: var(--glass-border-medium);
    animation: spin 1s linear infinite;
    box-shadow: 
        var(--shadow-elevated),
        var(--glow-medium),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    cursor: not-allowed;
}

/* 旋转动画 */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 涟漪效果容器 */
.play-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: all var(--duration-normal) var(--ease-natural);
    pointer-events: none;
}

/* 点击时的涟漪效果 */
.play-button.ripple::before {
    width: 200px;
    height: 200px;
    opacity: 0;
    transition: all var(--duration-slow) var(--ease-natural);
}

/* ===== 音效选择器浮动卡片设计 ===== */
.sound-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--space-xl);
    max-width: 600px;
    width: 100%;
    margin-bottom: var(--space-2xl);
    animation: materialise var(--duration-slower) var(--ease-gentle) 0.4s both;
}

/* ===== 水平滚动声音选择器 ===== */
.sound-selector-horizontal {
    position: relative;
    width: 100%;
    max-width: 900px; /* 增加最大宽度以容纳7个图标 */
    animation: materialise var(--duration-slower) var(--ease-gentle) 0.4s both;
    transition: all var(--duration-normal) var(--ease-natural);
}

/* 声音列表容器 - 水平滚动 */
.sound-list-container {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    scroll-behavior: smooth;
    padding: var(--space-sm) 0;
    
    /* 增强触摸滚动体验 */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    
    /* 确保在所有浏览器中都能水平滚动 */
    white-space: nowrap;
}

/* 隐藏Webkit浏览器的滚动条 */
.sound-list-container::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* 确保在旧版浏览器中也隐藏滚动条 */
.sound-list-container::-webkit-scrollbar-track {
    background: transparent;
}

.sound-list-container::-webkit-scrollbar-thumb {
    background: transparent;
}

/* 声音列表 - Flexbox布局 */
.sound-list {
    display: flex;
    display: -webkit-flex; /* Safari */
    gap: var(--sound-btn-gap); /* 使用CSS变量控制间距 */
    padding: 0 var(--space-md);
    align-items: center;
    -webkit-align-items: center; /* Safari */
    justify-content: center; /* 居中对齐7个图标 */
    -webkit-justify-content: center;
    
    /* 确保不换行 */
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    
    /* 重置white-space以允许flex项目正常显示 */
    white-space: normal;
}

/* 7个声音按钮的完美适配布局 */
.sound-list {
    /* 
     * 当前配置为7个声音按钮的完美适配：
     * - 7个按钮 × 110px = 770px
     * - 6个间距 × 12px = 72px  
     * - 左右内边距 × 2 × 16px = 32px
     * - 总计：874px，在900px容器内完美适配
     * 
     * 如果将来需要添加更多按钮，水平滚动会自动启用
     */
    justify-content: space-evenly; /* 均匀分布所有按钮 */
    -webkit-justify-content: space-evenly;
}

/* 当声音数量为7个时的精确布局 */
.sound-list:has(.sound-btn:nth-child(7):last-child) {
    justify-content: space-evenly;
    -webkit-justify-content: space-evenly;
    padding: 0 var(--space-lg);
}

/* 为不支持:has()的浏览器提供回退 */
@supports not selector(:has(*)) {
    .sound-list {
        justify-content: space-evenly;
        -webkit-justify-content: space-evenly;
        padding: 0 var(--space-lg);
    }
}

/* 滚动指示器 */
.scroll-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-natural);
}

.scroll-indicator-left {
    left: 0;
    background: linear-gradient(to right, 
        rgba(26, 29, 41, 0.8) 0%, 
        transparent 100%);
}

.scroll-indicator-right {
    right: 0;
    background: linear-gradient(to left, 
        rgba(26, 29, 41, 0.8) 0%, 
        transparent 100%);
}

/* 显示滚动指示器 */
.scroll-indicator.visible {
    opacity: 1;
    animation: fadeInGently var(--duration-normal) var(--ease-natural);
}

/* 优雅淡入动画 */
@keyframes fadeInGently {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 音效按钮序列动画 - 水平布局优化 */
.sound-list .sound-btn:nth-child(1) { animation: slideInFromLeft var(--duration-slower) var(--ease-gentle) 0.1s both; }
.sound-list .sound-btn:nth-child(2) { animation: slideInFromLeft var(--duration-slower) var(--ease-gentle) 0.2s both; }
.sound-list .sound-btn:nth-child(3) { animation: slideInFromLeft var(--duration-slower) var(--ease-gentle) 0.3s both; }
.sound-list .sound-btn:nth-child(4) { animation: slideInFromLeft var(--duration-slower) var(--ease-gentle) 0.4s both; }
.sound-list .sound-btn:nth-child(5) { animation: slideInFromLeft var(--duration-slower) var(--ease-gentle) 0.5s both; }
.sound-list .sound-btn:nth-child(6) { animation: slideInFromLeft var(--duration-slower) var(--ease-gentle) 0.6s both; }
.sound-list .sound-btn:nth-child(7) { animation: slideInFromLeft var(--duration-slower) var(--ease-gentle) 0.7s both; }

/* 水平滑入动画 */
@keyframes slideInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px) scale(0.9);
        filter: blur(5px);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

.sound-btn {
    /* 基础布局 */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-xl) var(--space-lg);
    
    /* 水平布局中的固定尺寸 - 优化为7个图标 */
    width: var(--sound-btn-width); /* 使用CSS变量 */
    min-width: var(--sound-btn-width);
    flex-shrink: 0;
    
    /* 毛玻璃卡片效果 */
    background: var(--glass-light);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border-light);
    border-radius: var(--radius-lg);
    
    /* 浮动阴影效果 */
    box-shadow: var(--shadow-float);
    
    /* 交互样式 */
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-natural);
    position: relative;
    overflow: hidden;
    
    /* 防止选中 */
    user-select: none;
    -webkit-user-select: none;
}

/* 播放指示器 */
.play-indicator {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    width: 20px;
    height: 20px;
    background: var(--glass-medium);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-secondary);
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--duration-normal) var(--ease-natural);
}

.sound-btn:hover .play-indicator {
    opacity: 1;
    transform: scale(1);
}

.sound-btn.playing .play-indicator {
    opacity: 1;
    transform: scale(1);
    background: var(--glass-heavy);
    color: var(--text-primary);
    animation: pulse 2s var(--ease-natural) infinite;
}

.sound-btn.playing .play-indicator::before {
    content: '⏸';
}

/* 悬停效果 */
.sound-btn:hover {
    transform: translateY(-4px) scale(1.02);
    background: var(--glass-medium);
    border-color: var(--glass-border-medium);
    box-shadow: var(--shadow-elevated);
    animation: gentleGlow 2s var(--ease-natural) infinite;
}

/* 微妙发光动画 */
@keyframes gentleGlow {
    0%, 100% {
        box-shadow: var(--shadow-elevated);
    }
    50% {
        box-shadow: 
            var(--shadow-elevated),
            0 0 15px rgba(255, 255, 255, 0.1);
    }
}

/* 激活状态 */
.sound-btn.active {
    background: var(--glass-heavy);
    border: 2px solid var(--glass-border-heavy);
    transform: translateY(-2px);
    box-shadow: 
        var(--shadow-elevated),
        0 0 20px rgba(255, 255, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: breathe 4s var(--ease-natural) infinite;
}

/* 激活状态的额外发光效果 */
.sound-btn.active::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        transparent 50%, 
        rgba(255, 255, 255, 0.05) 100%);
    z-index: -1;
}

/* 音效图标 */
.sound-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    transition: all var(--duration-normal) var(--ease-natural);
}

.sound-btn:hover .sound-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.sound-btn.active .sound-icon {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 12px rgba(255, 255, 255, 0.3));
}

/* 音效名称 */
.sound-name {
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    color: var(--text-primary);
    text-align: center;
    letter-spacing: 0.025em;
    transition: all var(--duration-normal) var(--ease-natural);
}

.sound-btn:hover .sound-name {
    color: var(--text-primary);
    transform: translateY(-1px);
}

.sound-btn.active .sound-name {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

/* 涟漪效果 */
.sound-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: all var(--duration-normal) var(--ease-natural);
    pointer-events: none;
    opacity: 0;
}

.sound-btn.ripple::before {
    width: 120px;
    height: 120px;
    opacity: 1;
    animation: ripple var(--duration-slow) var(--ease-natural);
}

/* 音效主题色彩 */
.sound-btn[data-sound="rain"].active {
    box-shadow: 
        var(--shadow-elevated),
        0 0 30px var(--rain-glow);
}

.sound-btn[data-sound="waves"].active {
    box-shadow: 
        var(--shadow-elevated),
        0 0 30px var(--waves-glow);
}

.sound-btn[data-sound="fire"].active {
    box-shadow: 
        var(--shadow-elevated),
        0 0 30px var(--fire-glow);
}

.sound-btn[data-sound="forest"].active {
    box-shadow: 
        var(--shadow-elevated),
        0 0 30px var(--forest-glow);
}

.sound-btn[data-sound="cafe"].active {
    box-shadow: 
        var(--shadow-elevated),
        0 0 30px var(--cafe-glow);
}

/* ===== 控制面板 ===== */
.control-panel {
    display: flex;
    gap: var(--space-4xl);
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    animation: materialise var(--duration-slower) var(--ease-gentle) 0.8s both;
    transition: all var(--duration-normal) var(--ease-natural);
}

/* 音量控制区域 */
.control-panel .volume-control {
    flex: 1;
    max-width: 300px;
}

/* 定时器控制区域 */
.timer-control {
    flex: 1;
    max-width: 400px;
}

.timer-control label {
    display: block;
    margin-bottom: var(--space-md);
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    font-size: var(--text-base);
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.025em;
}

.timer-control .timer-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

/* 定时器状态在控制面板中的样式 */
.control-panel .timer-status {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--glass-medium);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--glow-soft);
    margin-top: var(--space-lg);
}

.control-panel .timer-progress-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-panel .timer-progress-ring {
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
}

.control-panel .timer-progress-bar {
    stroke-dasharray: 157; /* 2 * π * 25 */
    stroke-dashoffset: 157;
    transition: stroke-dashoffset var(--duration-normal) var(--ease-natural);
}

.control-panel #timer-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono);
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.control-panel #cancel-timer {
    padding: var(--space-sm) var(--space-lg);
    background: var(--glass-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border-medium);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.025em;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-natural);
    user-select: none;
    -webkit-user-select: none;
}

.control-panel #cancel-timer:hover {
    background: var(--glass-medium);
    border-color: var(--glass-border-heavy);
    transform: translateY(-1px);
    box-shadow: var(--shadow-float);
}

/* ===== 设置按钮毛玻璃风格 ===== */
.settings-button {
    position: fixed;
    top: var(--space-2xl);
    right: var(--space-2xl);
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-border-light);
    
    /* 毛玻璃效果 */
    background: var(--glass-light);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    
    /* 图标样式 */
    font-size: var(--text-lg);
    color: var(--text-primary);
    
    /* 阴影和交互 */
    box-shadow: var(--shadow-float);
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-natural);
    
    /* 布局 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 防止选中 */
    user-select: none;
    -webkit-user-select: none;
}

.settings-button:hover {
    transform: rotate(90deg) scale(1.1);
    background: var(--glass-medium);
    border-color: var(--glass-border-medium);
    box-shadow: var(--shadow-elevated);
}

/* ===== 全屏毛玻璃模态框 ===== */
.settings-panel {
    /* 全屏覆盖 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    
    /* 背景虚化 */
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* 居中布局 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 初始隐藏 */
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-normal) var(--ease-natural);
}

.settings-panel.visible {
    opacity: 1;
    visibility: visible;
    animation: fadeIn var(--duration-normal) var(--ease-natural);
}

/* 设置内容区域 */
.settings-content {
    /* 尺寸和定位 */
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    
    /* 强烈毛玻璃效果 */
    background: var(--glass-heavy);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    
    /* 边框和圆角 */
    border: 1px solid var(--glass-border-heavy);
    border-radius: var(--radius-2xl);
    
    /* 深层阴影 */
    box-shadow: var(--shadow-deep);
    
    /* 内边距 */
    padding: var(--space-2xl);
    
    /* 浮现动画 */
    transform: translateY(20px) scale(0.95);
    transition: all var(--duration-normal) var(--ease-back);
    position: relative;
    
    /* 滚动处理 */
    overflow-y: auto;
}

.settings-panel.visible .settings-content {
    transform: translateY(0) scale(1);
    animation: materialise var(--duration-normal) var(--ease-back);
}

/* 设置标题 */
.settings-content h3 {
    margin-bottom: var(--space-xl);
    color: var(--text-primary);
    text-align: center;
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-xl);
    letter-spacing: 0.025em;
}

/* ===== 音量控制优化 ===== */
.volume-control {
    margin-bottom: var(--space-2xl);
}

.volume-control label {
    display: block;
    margin-bottom: var(--space-md);
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    font-size: var(--text-base);
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.025em;
}

.volume-slider {
    width: 100%;
    height: 8px;
    border-radius: var(--radius-sm);
    background: var(--glass-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border-light);
    outline: none;
    margin-bottom: var(--space-md);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-natural);
}

.volume-slider:hover {
    background: var(--glass-medium);
    border-color: var(--glass-border-medium);
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--glass-heavy);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 2px solid var(--glass-border-heavy);
    cursor: pointer;
    box-shadow: var(--shadow-float);
    transition: all var(--duration-normal) var(--ease-natural);
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-elevated);
    background: var(--glass-ultra);
}

.volume-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--glass-heavy);
    border: 2px solid var(--glass-border-heavy);
    cursor: pointer;
    box-shadow: var(--shadow-float);
    transition: all var(--duration-normal) var(--ease-natural);
}

/* 音量滑块容器 */
.volume-slider-container {
    position: relative;
    margin-bottom: var(--space-md);
}

/* 音量可视化器 */
.volume-visualizer {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: end;
    gap: 2px;
    height: 20px;
    padding: 0 var(--space-sm);
    pointer-events: none;
}

.volume-bar {
    width: 3px;
    background: var(--glass-medium);
    border-radius: 2px;
    transition: all var(--duration-fast) var(--ease-natural);
    opacity: 0.3;
}

.volume-bar:nth-child(1) { height: 4px; }
.volume-bar:nth-child(2) { height: 6px; }
.volume-bar:nth-child(3) { height: 8px; }
.volume-bar:nth-child(4) { height: 12px; }
.volume-bar:nth-child(5) { height: 16px; }
.volume-bar:nth-child(6) { height: 12px; }
.volume-bar:nth-child(7) { height: 8px; }
.volume-bar:nth-child(8) { height: 6px; }

/* 激活状态的音量条 */
.volume-bar.active {
    background: var(--text-primary);
    opacity: 1;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

/* 音量条动画 */
.volume-bar.animate {
    animation: volumePulse 0.6s var(--ease-natural);
}

@keyframes volumePulse {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1.3);
    }
}

#volume-display {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.05em;
}

/* ===== 定时器选项优化 ===== */
.timer-options h4 {
    margin-bottom: var(--space-lg);
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.025em;
}

.timer-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.timer-btn {
    padding: var(--space-md) var(--space-lg);
    
    /* 毛玻璃按钮效果 */
    background: var(--glass-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border-medium);
    border-radius: var(--radius-md);
    
    /* 文字样式 */
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.025em;
    
    /* 交互效果 */
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-natural);
    position: relative;
    overflow: hidden;
    
    /* 防止选中 */
    user-select: none;
    -webkit-user-select: none;
}

.timer-btn:hover {
    background: var(--glass-medium);
    border-color: var(--glass-border-heavy);
    transform: translateY(-1px);
    box-shadow: var(--shadow-float);
}

.timer-btn.active {
    background: var(--glass-heavy);
    border: 2px solid var(--glass-border-heavy);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    transform: translateY(-1px);
    box-shadow: 
        var(--shadow-float), 
        0 0 15px rgba(255, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ===== 自定义定时器输入优化 ===== */
.custom-timer-input {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

#custom-minutes {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    
    /* 毛玻璃输入框 */
    background: var(--glass-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border-medium);
    border-radius: var(--radius-md);
    
    /* 文字样式 */
    font-family: var(--font-primary);
    font-weight: var(--font-normal);
    font-size: var(--text-base);
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    
    /* 交互效果 */
    outline: none;
    transition: all var(--duration-normal) var(--ease-natural);
}

#custom-minutes::placeholder {
    color: var(--text-tertiary);
    font-style: italic;
}

#custom-minutes:focus {
    background: var(--glass-medium);
    border-color: var(--glass-border-heavy);
    box-shadow: var(--glow-soft);
}

#set-custom-timer {
    padding: var(--space-md) var(--space-lg);
    
    /* 毛玻璃按钮 */
    background: var(--glass-medium);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border-heavy);
    border-radius: var(--radius-md);
    
    /* 文字样式 */
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    font-size: var(--text-sm);
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.025em;
    
    /* 交互效果 */
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-natural);
    position: relative;
    overflow: hidden;
    
    /* 防止选中 */
    user-select: none;
    -webkit-user-select: none;
}

#set-custom-timer:hover {
    background: var(--glass-heavy);
    transform: translateY(-1px);
    box-shadow: var(--shadow-float);
}

/* ===== 定时器状态优化 ===== */
.timer-status {
    text-align: center;
    padding: var(--space-lg);
    
    /* 毛玻璃状态框 */
    background: var(--glass-medium);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border-medium);
    border-radius: var(--radius-lg);
    
    /* 发光效果 */
    box-shadow: var(--glow-soft);
    
    margin-bottom: var(--space-lg);
}

/* 定时器进度容器 */
.timer-progress-container {
    position: relative;
    display: inline-block;
    margin-bottom: var(--space-md);
}

/* 旧的定时器样式已移动到控制面板部分 */

/* cancel-timer样式已移动到控制面板部分 */

/* ===== 关闭按钮 ===== */
.close-button {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    width: 32px;
    height: 32px;
    
    /* 毛玻璃效果 */
    background: var(--glass-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border-light);
    border-radius: var(--radius-full);
    
    /* 图标样式 */
    font-size: var(--text-lg);
    color: var(--text-secondary);
    
    /* 交互效果 */
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-natural);
    
    /* 布局 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 防止选中 */
    user-select: none;
    -webkit-user-select: none;
}

.close-button:hover {
    background: var(--glass-medium);
    border-color: var(--glass-border-medium);
    color: var(--text-primary);
    transform: rotate(90deg) scale(1.1);
    box-shadow: var(--glow-soft);
}

/* ===== 加载指示器优化 ===== */
.loading-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.loading-indicator p {
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    font-size: var(--text-lg);
    color: var(--text-primary);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.025em;
    margin-top: var(--space-lg);
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid var(--glass-light);
    border-top: 4px solid var(--text-primary);
    border-radius: var(--radius-full);
    animation: spin 1s linear infinite;
    box-shadow: var(--glow-soft);
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== 错误提示优化 ===== */
.error-message {
    position: fixed;
    top: var(--space-2xl);
    left: 50%;
    transform: translateX(-50%);
    
    /* 毛玻璃错误框 */
    background: var(--glass-heavy);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--error-glow);
    border-radius: var(--radius-lg);
    
    /* 文字样式 */
    color: var(--text-primary);
    padding: var(--space-lg) var(--space-2xl);
    
    /* 阴影和发光 */
    box-shadow: 
        var(--shadow-elevated),
        0 0 20px var(--error-glow);
    
    z-index: 3000;
    animation: slideDown var(--duration-normal) var(--ease-back);
    
    /* 布局 */
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

@keyframes slideDown {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.error-message p {
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    font-size: var(--text-base);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.025em;
    margin: 0;
}

#close-error {
    padding: var(--space-xs) var(--space-sm);
    
    /* 毛玻璃按钮 */
    background: var(--glass-light);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border-light);
    border-radius: var(--radius-sm);
    
    /* 文字样式 */
    font-family: var(--font-primary);
    font-weight: var(--font-medium);
    font-size: var(--text-xs);
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    
    /* 交互效果 */
    cursor: pointer;
    transition: all var(--duration-normal) var(--ease-natural);
    
    /* 防止选中 */
    user-select: none;
    -webkit-user-select: none;
}

#close-error:hover {
    background: var(--glass-medium);
    border-color: var(--glass-border-medium);
    transform: scale(1.05);
}

/* 响应式过渡优化 */
.responsive-transition {
    transition: all var(--duration-normal) var(--ease-natural);
}

/* 中等屏幕优化 */
@media (min-width: 900px) and (max-width: 1023px) {
    .sound-selector-horizontal {
        max-width: 950px;
    }
    
    .sound-btn {
        width: 115px;
        min-width: 115px;
    }
}

/* 大屏幕优化 - 确保7个图标完美显示 */
@media (min-width: 1024px) {
    .sound-selector-horizontal {
        max-width: 1100px; /* 在大屏幕上增加宽度 */
    }
    
    .sound-btn {
        width: 130px; /* 在大屏幕上增加按钮宽度 */
        min-width: 130px;
    }
    
    .sound-list {
        gap: var(--space-lg); /* 在大屏幕上增加间距 */
        padding: 0 var(--space-xl);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .main-container {
        padding: var(--space-lg);
        gap: var(--space-2xl);
    }
    
    .app-title {
        font-size: var(--text-3xl);
    }
    
    .sound-selector {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: var(--space-lg);
        max-width: 400px;
    }
    
    .sound-btn {
        width: 90px; /* 在平板上稍微缩小 */
        min-width: 90px;
        padding: var(--space-lg) var(--space-sm);
    }
    
    .sound-list {
        gap: var(--space-sm); /* 在平板上减少间距 */
    }
    
    .sound-icon {
        font-size: 2rem;
    }
    
    .sound-name {
        font-size: var(--text-xs);
    }
    
    .control-panel {
        flex-direction: column;
        gap: var(--space-2xl);
        align-items: center;
    }
    
    .control-panel .volume-control,
    .timer-control {
        width: 100%;
        max-width: 350px;
    }
    
    .timer-control .timer-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .main-container {
        gap: var(--space-xl);
    }
    
    .app-title {
        font-size: var(--text-2xl);
    }
    
    .sound-selector {
        grid-template-columns: repeat(3, 1fr);
        max-width: 300px;
        gap: var(--space-md);
    }
    
    .sound-btn {
        width: 70px; /* 在手机上进一步缩小 */
        min-width: 70px;
        padding: var(--space-md) var(--space-xs);
    }
    
    .sound-list {
        gap: var(--space-xs); /* 在手机上最小间距 */
        padding: 0 var(--space-sm);
    }
    
    .sound-selector-horizontal {
        max-width: 100%; /* 在手机上使用全宽 */
    }
    
    .sound-icon {
        font-size: 1.5rem;
    }
    
    .sound-name {
        font-size: var(--text-xs);
    }
    
    .control-panel {
        gap: var(--space-xl);
    }
    
    .timer-control .timer-buttons {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }
}

/* 可访问性增强 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    /* 为减少动画偏好的用户提供即时反馈 */
    .sound-btn:hover {
        animation: none;
    }
    
    .scroll-indicator.visible {
        animation: none;
    }
    
    .sound-list .sound-btn {
        animation: none !important;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    :root {
        --shadow-color: rgba(0, 0, 0, 0.3);
    }
    
    .play-button, .sound-btn, .settings-button {
        border: 2px solid var(--text-color);
    }
}
/* ===== 骨架屏系统样式 ===== */

/* 骨架屏容器 */
.skeleton-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: var(--bg-gradient-flow);
    background-size: 400% 400%;
    animation: backgroundFlow 25s var(--ease-natural) infinite;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--duration-normal) var(--ease-natural);
}

.skeleton-container.skeleton-visible {
    opacity: 1;
}

.skeleton-container.skeleton-hiding {
    opacity: 0;
}

/* 骨架屏主容器 */
.skeleton-main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
    padding: var(--space-2xl);
    width: 100%;
    max-width: 800px;
}

/* 骨架屏基础元素样式 */
.skeleton-element {
    background: var(--glass-light);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass-border-light);
}

/* 骨架屏文本元素 */
.skeleton-text {
    background: linear-gradient(90deg, 
        var(--glass-light) 25%, 
        var(--glass-medium) 50%, 
        var(--glass-light) 75%);
    background-size: 200% 100%;
    position: relative;
}

/* 骨架屏标题 */
.skeleton-title {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.skeleton-title-decoration {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: var(--glass-medium);
    border-radius: var(--radius-sm);
    opacity: 0.5;
}

/* 控制面板骨架屏 */
.skeleton-controls {
    display: flex;
    gap: var(--space-4xl);
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    background: transparent;
    border: none;
}

.skeleton-volume-section,
.skeleton-timer-section {
    flex: 1;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.skeleton-volume-label,
.skeleton-timer-label {
    width: 60px;
    height: 16px;
    background: var(--glass-medium);
    border-radius: var(--radius-sm);
}

.skeleton-volume-slider {
    width: 100%;
    height: 8px;
    background: var(--glass-light);
    border-radius: var(--radius-sm);
    position: relative;
}

.skeleton-volume-slider::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 70%;
    height: 100%;
    background: var(--glass-medium);
    border-radius: var(--radius-sm);
}

.skeleton-timer-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
}

.skeleton-timer-button {
    width: 100%;
    height: 32px;
    background: var(--glass-light);
    border-radius: var(--radius-md);
    border: 1px solid var(--glass-border-light);
}

/* 骨架屏圆形元素 */
.skeleton-circle {
    border-radius: var(--radius-full);
    background: var(--glass-medium);
    border: 2px solid var(--glass-border-medium);
    box-shadow: var(--shadow-float);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 播放图标占位符 */
.skeleton-play-icon {
    width: 24px;
    height: 24px;
    background: var(--glass-heavy);
    border-radius: 0;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    opacity: 0.6;
}

/* 骨架屏光环效果 */
.skeleton-halo {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid var(--glass-border-light);
    border-radius: var(--radius-full);
    opacity: 0;
    animation: skeletonHalo 3s ease-in-out infinite;
}

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

/* 骨架屏网格容器 */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-xl);
    width: 100%;
    max-width: 600px;
    background: transparent;
    border: none;
}

/* 骨架屏网格项 */
.skeleton-grid-item {
    background: var(--glass-light);
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border-light);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    gap: var(--space-md);
}

/* 音效图标占位符 */
.skeleton-sound-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--glass-medium);
    flex-shrink: 0;
}

/* 音效名称占位符 */
.skeleton-sound-name {
    width: 60px;
    height: 14px;
    border-radius: var(--radius-sm);
    background: var(--glass-medium);
}

/* ===== 骨架屏动画效果 ===== */

/* 增强微光动画 */
@keyframes skeletonShimmer {
    0% {
        background-position: -200% 0;
        opacity: 0.6;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        background-position: 200% 0;
        opacity: 0.6;
    }
}

.skeleton-shimmer {
    background: linear-gradient(90deg, 
        var(--glass-light) 0%, 
        var(--glass-light) 25%, 
        var(--glass-heavy) 50%, 
        var(--glass-light) 75%, 
        var(--glass-light) 100%);
    background-size: 200% 100%;
    animation: skeletonShimmer 2s ease-in-out infinite;
    position: relative;
}

/* 微光高光效果 */
.skeleton-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 100%);
    animation: skeletonHighlight 2s ease-in-out infinite;
}

@keyframes skeletonHighlight {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* 增强脉动动画 */
@keyframes skeletonPulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
        box-shadow: var(--shadow-float);
    }
    25% {
        opacity: 0.8;
        transform: scale(1.01);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.03);
        box-shadow: var(--shadow-elevated), 0 0 20px rgba(255, 255, 255, 0.1);
    }
    75% {
        opacity: 0.8;
        transform: scale(1.01);
    }
}

.skeleton-pulse {
    animation: skeletonPulse 3s ease-in-out infinite;
}

/* 播放按钮特殊脉动效果 */
.skeleton-circle.skeleton-pulse .skeleton-play-icon {
    animation: skeletonPlayIconPulse 3s ease-in-out infinite;
}

@keyframes skeletonPlayIconPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.1);
    }
}

/* 延迟微光动画（用于网格项） */
.skeleton-shimmer-delayed .skeleton-grid-item {
    background: linear-gradient(90deg, 
        var(--glass-light) 25%, 
        var(--glass-medium) 50%, 
        var(--glass-light) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
}

/* 骨架屏激活状态 */
.skeleton-animated {
    animation-play-state: running;
}

/* 骨架屏暂停状态 */
.skeleton-element:not(.skeleton-animated) {
    animation-play-state: paused;
}

/* ===== 骨架屏变形过渡动画 ===== */

/* 变形容器 */
.skeleton-morphing {
    transition: all var(--duration-normal) var(--ease-natural);
}

/* 变形出场动画 */
.skeleton-morph-out {
    animation: skeletonMorphOut var(--duration-normal) var(--ease-natural) forwards;
}

@keyframes skeletonMorphOut {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.02) translateY(-2px);
    }
    100% {
        opacity: 0;
        transform: scale(0.98) translateY(4px);
    }
}

/* 入场动画增强 */
.skeleton-element {
    animation: skeletonFadeIn var(--duration-slow) var(--ease-gentle) both;
}

@keyframes skeletonFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 特殊元素的入场动画 */
.skeleton-circle {
    animation: skeletonCircleFadeIn var(--duration-slow) var(--ease-back) both;
}

@keyframes skeletonCircleFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.skeleton-grid-item {
    animation: skeletonItemFadeIn var(--duration-normal) var(--ease-gentle) both;
}

@keyframes skeletonItemFadeIn {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ===== 骨架屏响应式设计 ===== */

/* 移动设备适配 */
@media (max-width: 768px) {
    .skeleton-main-container {
        padding: var(--space-lg);
        gap: var(--space-xl);
    }
    
    .skeleton-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
    }
    
    #play-button-skeleton {
        width: 100px !important;
        height: 100px !important;
    }
    
    .skeleton-grid-item {
        width: 80px !important;
        height: 100px !important;
    }
}

/* 小屏设备适配 */
@media (max-width: 480px) {
    .skeleton-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    #title-skeleton {
        width: 150px !important;
        height: 28px !important;
    }
}

/* 减少动画偏好适配 */
@media (prefers-reduced-motion: reduce) {
    .skeleton-shimmer,
    .skeleton-pulse,
    .skeleton-shimmer-delayed .skeleton-grid-item {
        animation: none;
    }
    
    .skeleton-element {
        opacity: 0.7;
    }
}

/* 高对比度模式适配 */
@media (prefers-contrast: high) {
    .skeleton-element {
        background: var(--glass-medium);
        border-color: var(--glass-border-heavy);
    }
    
    .skeleton-circle {
        background: var(--glass-heavy);
        border-color: var(--glass-border-heavy);
    }
}
/* ===
== 骨架屏系统样式 ===== */

/* 骨架屏容器 */
.skeleton-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: var(--bg-gradient-flow);
    background-size: 400% 400%;
    animation: backgroundFlow 25s var(--ease-natural) infinite;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.skeleton-container.skeleton-visible {
    opacity: 1;
}

.skeleton-container.skeleton-hiding {
    opacity: 0;
}

/* 骨架屏主容器 */
.skeleton-main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 2rem;
    width: 100%;
    max-width: 800px;
}

/* 骨架屏基础元素样式 */
.skeleton-element {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    animation: skeletonPulse 2s ease-in-out infinite;
}

/* 简单的脉动动画 */
@keyframes skeletonPulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.8;
    }
}

/* 骨架屏文本元素 */
.skeleton-text {
    background: rgba(255, 255, 255, 0.1);
}

/* 骨架屏圆形元素 */
.skeleton-circle {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

/* 骨架屏网格容器 */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    width: 100%;
    max-width: 600px;
    background: transparent;
    border: none;
}

/* 骨架屏网格项 */
.skeleton-grid-item {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    gap: 0.75rem;
}

/* 控制面板骨架屏 */
.skeleton-controls {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    max-width: 800px;
    background: transparent;
    border: none;
}

.skeleton-volume-section,
.skeleton-timer-section {
    flex: 1;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.skeleton-volume-label,
.skeleton-timer-label {
    width: 60px;
    height: 16px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}

.skeleton-volume-slider {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.skeleton-timer-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.skeleton-timer-button {
    width: 100%;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .skeleton-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    .skeleton-controls {
        flex-direction: column;
        gap: 2rem;
    }
}
/* 
===== 加载状态指示器样式 ===== */

.loading-status {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 10000;
    background: var(--glass-medium);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border-medium);
    border-radius: 16px;
    padding: 1.5rem 2rem;
    min-width: 320px;
    max-width: 90vw;
    box-shadow: var(--shadow-elevated);
    opacity: 0;
    transition: all var(--duration-normal) var(--ease-natural);
    pointer-events: none;
    display: none;
}

.loading-status.loading-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.loading-status.loading-hiding {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
}

/* 加载进度条 */
.loading-progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 1rem;
    position: relative;
}

.loading-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 0.8) 50%,
        rgba(255, 255, 255, 0.6) 100%);
    border-radius: 2px;
    width: 0%;
    transition: width var(--duration-fast) var(--ease-natural);
    position: relative;
    overflow: hidden;
}

.loading-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%);
    animation: loadingShimmer 2s ease-in-out infinite;
}

@keyframes loadingShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* 加载消息 */
.loading-message {
    color: var(--text-primary);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    text-align: center;
    margin-bottom: 0.5rem;
    line-height: var(--leading-tight);
}

/* 加载详情 */
.loading-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
}

.loading-phase {
    opacity: 0.8;
}

.loading-percentage {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

/* 加载状态动画 */
.loading-status.loading-pulse {
    animation: loadingPulse 2s ease-in-out infinite;
}

@keyframes loadingPulse {
    0%, 100% {
        box-shadow: var(--shadow-elevated);
    }
    50% {
        box-shadow: var(--shadow-elevated), 0 0 20px rgba(255, 255, 255, 0.1);
    }
}

/* 错误状态 */
.loading-status.loading-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.loading-status.loading-error .loading-progress-fill {
    background: linear-gradient(90deg, 
        rgba(239, 68, 68, 0.6) 0%,
        rgba(239, 68, 68, 0.8) 50%,
        rgba(239, 68, 68, 0.6) 100%);
}

.loading-status.loading-error .loading-message {
    color: rgba(239, 68, 68, 0.9);
}

/* 成功状态 */
.loading-status.loading-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
}

.loading-status.loading-success .loading-progress-fill {
    background: linear-gradient(90deg, 
        rgba(34, 197, 94, 0.6) 0%,
        rgba(34, 197, 94, 0.8) 50%,
        rgba(34, 197, 94, 0.6) 100%);
}

.loading-status.loading-success .loading-message {
    color: rgba(34, 197, 94, 0.9);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .loading-status {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        transform: none;
        min-width: auto;
        max-width: none;
        width: calc(100% - 2rem);
    }
    
    .loading-status.loading-visible {
        transform: none;
    }
    
    .loading-status.loading-hiding {
        transform: translateY(20px);
    }
}

/* 减少动画偏好适配 */
@media (prefers-reduced-motion: reduce) {
    .loading-progress-fill::after {
        animation: none;
    }
    
    .loading-status.loading-pulse {
        animation: none;
    }
}

/* 
===== 音效按钮加载状态样式 ===== 
*/

/* 加载中状态 */
.sound-btn.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.sound-btn.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: soundButtonSpin 1s linear infinite;
    z-index: 1;
}

.sound-btn.loading .sound-icon,
.sound-btn.loading .sound-name {
    opacity: 0.3;
}

@keyframes soundButtonSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 加载成功状态 */
.sound-btn.load-success {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.sound-btn.load-success::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    background: rgba(34, 197, 94, 0.9);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    animation: loadSuccessPopIn 0.3s ease-out;
}

@keyframes loadSuccessPopIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 加载错误状态 */
.sound-btn.load-error {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

.sound-btn.load-error::after {
    content: '!';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    animation: loadErrorShake 0.5s ease-in-out;
}

@keyframes loadErrorShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

/* 禁用状态 */
.sound-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.sound-btn:disabled:hover {
    transform: none;
    box-shadow: var(--shadow-float);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .sound-btn.loading::before {
        width: 16px;
        height: 16px;
        margin: -8px 0 0 -8px;
    }
    
    .sound-btn.load-success::after,
    .sound-btn.load-error::after {
        width: 14px;
        height: 14px;
        font-size: 9px;
        top: 6px;
        right: 6px;
    }
}

/* 减少动画偏好适配 */
@media (prefers-reduced-motion: reduce) {
    .sound-btn.loading::before {
        animation: none;
        border: 2px solid rgba(255, 255, 255, 0.5);
    }
    
    .sound-btn.load-success::after {
        animation: none;
    }
    
    .sound-btn.load-error::after {
        animation: none;
    }
}