/* ========================================
   Style 8: Modern Dashboard Theme (Light)
   现代仪表板主题（浅色版）
   ======================================== */

/* 全局浅粉色背景 */
body.dark-theme {
    background: #fef1f7 !important;
    color: #1f2937;
}

/* 页面背景渐变 - 浅粉色版本 */
.dark-theme .page-bg-gradient {
    background: linear-gradient(135deg, #fef1f7 0%, #fce7f3 100%) !important;
}

/* 页面背景类 - 支持主题切换 */
/* 浅色主题（默认）- 浅粉色背景 */
.dark-theme .page-background {
    background: linear-gradient(135deg, #fef1f7 0%, #fce7f3 100%) !important;
}

/* 暗黑主题 - 深色背景 */
body:not(.dark-theme) .page-background {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
}

/* 暗黑主题 - 全局样式 */
body:not(.dark-theme) {
    background: #0a0a0a !important;
    color: #e5e7eb !important;
}

/* 暗黑主题 - 卡片样式 */
body:not(.dark-theme) .glass-card {
    background: rgba(17, 17, 17, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body:not(.dark-theme) .glass-card:hover {
    background: rgba(17, 17, 17, 0.95) !important;
    border-color: rgba(249, 115, 22, 0.3) !important;
}

/* 暗黑主题 - 文字颜色 */
body:not(.dark-theme) h1,
body:not(.dark-theme) h2,
body:not(.dark-theme) h3,
body:not(.dark-theme) h4 {
    color: #ffffff !important;
}

body:not(.dark-theme) p,
body:not(.dark-theme) .text-gray-600,
body:not(.dark-theme) .text-gray-700,
body:not(.dark-theme) .text-gray-800 {
    color: #e5e7eb !important;
}

/* 暗黑主题 - Header */
body:not(.dark-theme) header {
    background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body:not(.dark-theme) header * {
    color: #e5e7eb !important;
}

/* Header - 白色主题 立体阴影 */
.dark-theme header {
    background: #ffffff !important;
    border-bottom: none;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.03),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/* Header 文字颜色 */
.dark-theme header,
.dark-theme header * {
    color: #374151 !important;
}

.dark-theme header button {
    color: #6b7280 !important;
}

.dark-theme header button:hover {
    color: #f97316 !important;
}

/* Logo 文字颜色 */
.dark-theme header a span {
    background: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 搜索框 - 白色主题 */
.dark-theme #headerSearchInput {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    color: #1f2937 !important;
}

.dark-theme #headerSearchInput::placeholder {
    color: #9ca3af;
}

.dark-theme #headerSearchInput:focus {
    background: #ffffff !important;
    border-color: #f97316 !important;
    color: #1f2937 !important;
}

.dark-theme #headerSearchButton {
    background: #f9fafb !important;
    border-color: #e5e7eb !important;
    color: #6b7280 !important;
}

.dark-theme #headerSearchButton:hover {
    background: #fef3f2 !important;
    color: #f97316 !important;
}

/* 玻璃卡片 - 立体阴影效果 */
.dark-theme .glass-card {
    background: #ffffff !important;
    border: none !important;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.03),
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 -1px 0 rgba(0, 0, 0, 0.02) inset;
}

.dark-theme .glass-card:hover {
    background: #ffffff !important;
    box-shadow: 
        0 4px 12px rgba(249, 115, 22, 0.15),
        0 8px 24px rgba(236, 72, 153, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 -1px 0 rgba(249, 115, 22, 0.1) inset;
    transform: translateY(-2px);
}

/* 玻璃背景 - 浅粉色 */
.dark-theme .glass-bg {
    background: #ffffff !important;
    border-right: none !important;
    box-shadow: 
        2px 0 4px rgba(0, 0, 0, 0.03),
        4px 0 8px rgba(0, 0, 0, 0.02);
}

/* 主内容区域 */
.dark-theme .main-content {
    background: transparent !important;
}

/* 文字颜色 */
.dark-theme h1,
.dark-theme h2,
.dark-theme h3,
.dark-theme .text-gray-800 {
    color: #1f2937 !important;
}

.dark-theme .text-gray-600 {
    color: #4b5563 !important;
}

.dark-theme .text-gray-500 {
    color: #6b7280 !important;
}

.dark-theme .text-gray-700 {
    color: #374151 !important;
}

/* 侧边栏项目 */
.dark-theme .sidebar-item {
    color: #4b5563;
}

.dark-theme .sidebar-item:hover {
    background: #fef3f2 !important;
    color: #f97316 !important;
}

.dark-theme .sidebar-item.active {
    background: #fff7ed !important;
    color: #f97316 !important;
}

/* 按钮样式 - 橙粉渐变 立体阴影 */
.dark-theme .bg-green-500,
.dark-theme .bg-green-600 {
    background: linear-gradient(135deg, #f97316 0%, #ec4899 100%) !important;
    box-shadow: 
        0 2px 4px rgba(249, 115, 22, 0.2),
        0 4px 8px rgba(236, 72, 153, 0.15),
        0 1px 0 rgba(255, 255, 255, 0.3) inset;
}

.dark-theme .bg-green-500:hover,
.dark-theme .bg-green-600:hover {
    background: linear-gradient(135deg, #ea580c 0%, #db2777 100%) !important;
    box-shadow: 
        0 4px 8px rgba(249, 115, 22, 0.25),
        0 8px 16px rgba(236, 72, 153, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.4) inset;
    transform: translateY(-1px);
}

/* 边框颜色 */
.dark-theme .border-green-200,
.dark-theme .border-green-100 {
    border-color: #fed7aa !important;
}

.dark-theme .border-green-300 {
    border-color: #fdba74 !important;
}

/* 文字强调色 */
.dark-theme .text-green-600,
.dark-theme .text-green-500 {
    color: #f97316 !important;
}

.dark-theme .text-green-700 {
    color: #ea580c !important;
}

/* 背景强调色 */
.dark-theme .bg-green-50 {
    background: #fff7ed !important;
}

.dark-theme .bg-blue-50 {
    background: #eff6ff !important;
}

.dark-theme .bg-purple-50 {
    background: #faf5ff !important;
}

.dark-theme .bg-gray-50 {
    background: #f9fafb !important;
}

/* 热门标签 */
.dark-theme .bg-blue-50.text-blue-600 {
    background: #dbeafe !important;
    color: #2563eb !important;
    border-color: #93c5fd !important;
}

.dark-theme .bg-blue-50.text-blue-600:hover {
    background: #bfdbfe !important;
}

/* 按钮轮廓 */
.dark-theme .btn-outline-green {
    border-color: #fdba74 !important;
    color: #f97316 !important;
}

.dark-theme .btn-outline-green:hover {
    background: #fff7ed !important;
    border-color: #fb923c !important;
}

/* 搜索下拉框 */
.dark-theme .search-dropdown {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
}

.dark-theme .search-item {
    border-color: #f3f4f6 !important;
}

.dark-theme .search-item:hover {
    background: #fff7ed !important;
    border-color: #fdba74 !important;
}

/* 搜索下拉框中的下载图标 - 使用绿色以区分 */
.dark-theme .search-dropdown .text-green-600,
.dark-theme .search-item .text-green-600 {
    color: #10b981 !important;
}

.dark-theme .search-dropdown .fa-download {
    color: #ffffff !important;
}

/* 搜索下拉框中的播放按钮保持橙粉渐变 */
.dark-theme .search-dropdown .bg-gradient-to-r {
    background: linear-gradient(135deg, #f97316 0%, #ec4899 100%) !important;
}

/* 播放进度条 */
.dark-theme .ringtone-progress-bar {
    background: linear-gradient(90deg, #f97316 0%, #ec4899 100%) !important;
}

/* 音频播放器 */
.dark-theme .bg-gradient-to-r.from-blue-50.to-purple-50 {
    background: linear-gradient(135deg, #fff7ed 0%, #fce7f3 100%) !important;
    border-color: #fed7aa !important;
}

.dark-theme .bg-gradient-to-r.from-blue-500.to-purple-500 {
    background: linear-gradient(135deg, #f97316 0%, #ec4899 100%) !important;
}

.dark-theme .bg-gradient-to-r.from-blue-500.to-purple-500:hover {
    background: linear-gradient(135deg, #ea580c 0%, #db2777 100%) !important;
}

/* 下载按钮 */
.dark-theme .bg-gradient-to-r.from-purple-500.to-pink-500 {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%) !important;
}

.dark-theme .bg-gradient-to-r.from-green-500.to-emerald-500 {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.dark-theme .bg-gradient-to-r.from-blue-500.to-cyan-500 {
    background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%) !important;
}

/* 统计卡片样式 - 立体阴影 */
.dark-theme .stats-card {
    background: #ffffff;
    border: none;
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.03),
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 -1px 0 rgba(0, 0, 0, 0.02) inset;
}

.dark-theme .stats-card:hover {
    box-shadow: 
        0 4px 12px rgba(249, 115, 22, 0.15),
        0 8px 24px rgba(236, 72, 153, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 -1px 0 rgba(249, 115, 22, 0.1) inset;
    transform: translateY(-2px);
}

/* 图标颜色 - 多彩配色 */
.dark-theme .text-orange-500 {
    color: #f97316 !important;
}

.dark-theme .text-purple-500 {
    color: #a855f7 !important;
}

.dark-theme .text-blue-500 {
    color: #3b82f6 !important;
}

.dark-theme .text-green-500 {
    color: #10b981 !important;
}

.dark-theme .text-pink-500 {
    color: #ec4899 !important;
}

.dark-theme .text-cyan-500 {
    color: #06b6d4 !important;
}

.dark-theme .text-yellow-500 {
    color: #eab308 !important;
}

.dark-theme .text-red-500 {
    color: #ef4444 !important;
}

.dark-theme .text-indigo-500 {
    color: #6366f1 !important;
}

.dark-theme .text-teal-500 {
    color: #14b8a6 !important;
}

/* 图标背景颜色 - 多彩配色 */
.dark-theme .bg-orange-100 {
    background: #ffedd5 !important;
}

.dark-theme .bg-purple-100 {
    background: #f3e8ff !important;
}

.dark-theme .bg-blue-100 {
    background: #dbeafe !important;
}

.dark-theme .bg-green-100 {
    background: #d1fae5 !important;
}

.dark-theme .bg-pink-100 {
    background: #fce7f3 !important;
}

.dark-theme .bg-cyan-100 {
    background: #cffafe !important;
}

.dark-theme .bg-yellow-100 {
    background: #fef3c7 !important;
}

.dark-theme .bg-red-100 {
    background: #fee2e2 !important;
}

.dark-theme .bg-indigo-100 {
    background: #e0e7ff !important;
}

.dark-theme .bg-teal-100 {
    background: #ccfbf1 !important;
}

/* 语言切换器 */
.dark-theme #langDropdown {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

.dark-theme #langDropdown a {
    color: #374151 !important;
}

.dark-theme #langDropdown a:hover {
    background: #fff7ed !important;
    color: #f97316 !important;
}

.dark-theme #langDropdown a.bg-green-100 {
    background: #fff7ed !important;
}

.dark-theme .hover\\:bg-green-50:hover {
    background: #fff7ed !important;
}

/* 移动端侧边栏切换按钮 */
.dark-theme #mobileSidebarToggle {
    background: #f3f4f6 !important;
    color: #374151 !important;
}

.dark-theme #mobileSidebarToggle:hover {
    background: #e5e7eb !important;
}

/* 移动端搜索按钮 */
.dark-theme #mobileSearchToggle {
    background: #f3f4f6 !important;
    color: #374151 !important;
}

.dark-theme #mobileSearchToggle:hover {
    background: #e5e7eb !important;
}

/* 面包屑导航 */
.dark-theme nav a {
    color: #6b7280;
}

.dark-theme nav a:hover {
    color: #f97316 !important;
}

/* 滚动条样式 */
.dark-theme ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.dark-theme ::-webkit-scrollbar-track {
    background: #f9fafb;
}

.dark-theme ::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.dark-theme ::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* 分类卡片背景 - 白色版本 */
.dark-theme .category-header-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
}

/* 响应式优化 */
@media (max-width: 768px) {
    .dark-theme .glass-card {
        background: #ffffff !important;
    }
}

/* 平滑过渡 - 包含阴影和变换 */
.dark-theme * {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.dark-theme .glass-card,
.dark-theme .stats-card,
.dark-theme .rounded-2xl {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 输入框焦点状态 */
.dark-theme input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.5);
}

/* 链接悬停效果 */
.dark-theme a:hover {
    color: #f97316 !important;
}

/* 卡片阴影效果 - 立体感 */
.dark-theme .shadow-sm {
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.05),
        0 1px 0 rgba(255, 255, 255, 0.5) inset !important;
}

.dark-theme .shadow-md {
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.03),
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 -1px 0 rgba(0, 0, 0, 0.02) inset !important;
}

.dark-theme .shadow-lg {
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.05),
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 -1px 0 rgba(0, 0, 0, 0.03) inset !important;
}

.dark-theme .shadow-2xl {
    box-shadow: 
        0 8px 16px rgba(0, 0, 0, 0.1),
        0 16px 32px rgba(0, 0, 0, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 -2px 0 rgba(0, 0, 0, 0.05) inset !important;
}

/* 渐变文字效果 */
.dark-theme .gradient-text {
    background: linear-gradient(135deg, #f97316 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 热门铃声卡片特殊样式 - 立体阴影 */
.dark-theme .rounded-2xl.border.border-green-100 {
    background: #ffffff !important;
    border: none !important;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.03),
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 -1px 0 rgba(0, 0, 0, 0.02) inset !important;
}

.dark-theme .rounded-2xl.border.border-green-100:hover {
    box-shadow: 
        0 4px 12px rgba(249, 115, 22, 0.15),
        0 8px 24px rgba(236, 72, 153, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 -1px 0 rgba(249, 115, 22, 0.1) inset !important;
    transform: translateY(-2px);
}

/* 进度条容器 */
.dark-theme .progress-bar-container {
    background: #f3f4f6 !important;
}

.dark-theme .progress-bar {
    background: linear-gradient(90deg, #f97316 0%, #ec4899 100%) !important;
}

/* Footer背景类 - 支持主题切换 */
/* 浅色主题 - 白色背景 */
.dark-theme .footer-background {
    background: #ffffff !important;
    border-top: none;
    box-shadow: 
        0 -2px 4px rgba(0, 0, 0, 0.05),
        0 -4px 8px rgba(0, 0, 0, 0.03);
}

/* 暗黑主题 - 深色背景 */
body:not(.dark-theme) .footer-background {
    background: linear-gradient(135deg, #111111 0%, #1a1a1a 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Footer 白色主题 立体阴影 */
.dark-theme footer {
    background: #ffffff !important;
    border-top: none;
    box-shadow: 
        0 -2px 4px rgba(0, 0, 0, 0.05),
        0 -4px 8px rgba(0, 0, 0, 0.03);
}

.dark-theme footer .glass-card {
    background: #ffffff !important;
    border: none !important;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.03),
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 -1px 0 rgba(0, 0, 0, 0.02) inset !important;
}

.dark-theme footer .text-green-300 {
    color: #f97316 !important;
}

.dark-theme footer .text-gray-200,
.dark-theme footer .text-gray-300 {
    color: #6b7280 !important;
}

.dark-theme footer a:hover {
    color: #f97316 !important;
}

.dark-theme footer .border-white {
    border-color: #e5e7eb !important;
}

/* 通用立体卡片效果 */
.dark-theme .bg-white {
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.05),
        0 4px 8px rgba(0, 0, 0, 0.03),
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 -1px 0 rgba(0, 0, 0, 0.02) inset !important;
}

/* 输入框立体效果 */
.dark-theme input,
.dark-theme textarea,
.dark-theme select {
    box-shadow: 
        inset 0 1px 2px rgba(0, 0, 0, 0.05),
        0 1px 0 rgba(255, 255, 255, 0.5) !important;
}

.dark-theme input:focus,
.dark-theme textarea:focus,
.dark-theme select:focus {
    box-shadow: 
        inset 0 1px 2px rgba(249, 115, 22, 0.1),
        0 0 0 2px rgba(249, 115, 22, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* ========================================
   分类页面动画背景
   ======================================== */

/* 基础动画背景容器 */
.category-header-animated,
.category-header-card {
    position: relative;
}

.category-header-animated {
    background: linear-gradient(135deg, #fef1f7 0%, #fce7f3 100%);
}

.category-animated-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* 动画1: 波浪效果 - 适合音乐、流行类 */
@keyframes wave-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.category-animated-bg.wave-bg {
    background: linear-gradient(
        45deg,
        #f97316 0%,
        #ec4899 25%,
        #8b5cf6 50%,
        #3b82f6 75%,
        #f97316 100%
    );
    background-size: 400% 400%;
    animation: wave-animation 15s ease infinite;
}

/* 动画2: 粒子漂浮 - 适合电影、游戏类 */
@keyframes particle-float {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-20px) translateX(10px);
    }
    50% {
        transform: translateY(-10px) translateX(-10px);
    }
    75% {
        transform: translateY(-30px) translateX(5px);
    }
}

.category-animated-bg.particle-bg::before,
.category-animated-bg.particle-bg::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.3) 0%, transparent 70%);
    animation: particle-float 8s ease-in-out infinite;
}

.category-animated-bg.particle-bg::before {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.category-animated-bg.particle-bg::after {
    top: 60%;
    right: 15%;
    animation-delay: 2s;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.3) 0%, transparent 70%);
}

/* 动画3: 脉冲效果 - 适合通知、闹钟类 */
@keyframes pulse-animation {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

.category-animated-bg.pulse-bg {
    background: radial-gradient(
        circle at 30% 50%,
        rgba(249, 115, 22, 0.2) 0%,
        transparent 50%
    ),
    radial-gradient(
        circle at 70% 50%,
        rgba(236, 72, 153, 0.2) 0%,
        transparent 50%
    );
    animation: pulse-animation 4s ease-in-out infinite;
}

/* 动画4: 渐变旋转 - 适合DJ、电子音乐类 */
@keyframes gradient-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.category-animated-bg.rotate-bg::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        rgba(249, 115, 22, 0.1),
        rgba(236, 72, 153, 0.1),
        rgba(139, 92, 246, 0.1),
        rgba(59, 130, 246, 0.1),
        rgba(249, 115, 22, 0.1)
    );
    animation: gradient-rotate 20s linear infinite;
}

/* 动画5: 闪烁星星 - 适合自然、环境音类 */
@keyframes twinkle {
    0%, 100% {
        opacity: 0.2;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.2);
    }
}

.category-animated-bg.twinkle-bg {
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(249, 115, 22, 0.5), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(236, 72, 153, 0.5), transparent),
        radial-gradient(2px 2px at 50% 50%, rgba(139, 92, 246, 0.5), transparent),
        radial-gradient(2px 2px at 80% 10%, rgba(59, 130, 246, 0.5), transparent),
        radial-gradient(2px 2px at 90% 60%, rgba(249, 115, 22, 0.5), transparent);
    background-size: 200% 200%;
    animation: twinkle 3s ease-in-out infinite;
}

/* 动画6: 流动线条 - 适合古典、爵士类 */
@keyframes flow-lines {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 100% 100%;
    }
}

.category-animated-bg.flow-bg {
    background: 
        linear-gradient(45deg, transparent 30%, rgba(249, 115, 22, 0.1) 30%, rgba(249, 115, 22, 0.1) 70%, transparent 70%),
        linear-gradient(-45deg, transparent 30%, rgba(236, 72, 153, 0.1) 30%, rgba(236, 72, 153, 0.1) 70%, transparent 70%);
    background-size: 60px 60px;
    animation: flow-lines 20s linear infinite;
}

/* 动画7: 气泡上升 - 适合儿童、卡通类 */
@keyframes bubble-rise {
    0% {
        transform: translateY(100%) scale(0);
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        transform: translateY(-100%) scale(1);
        opacity: 0;
    }
}

.category-animated-bg.bubble-bg::before,
.category-animated-bg.bubble-bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.3) 0%, transparent 70%);
    animation: bubble-rise 10s ease-in-out infinite;
}

.category-animated-bg.bubble-bg::before {
    left: 20%;
    animation-delay: 0s;
}

.category-animated-bg.bubble-bg::after {
    left: 70%;
    animation-delay: 5s;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.3) 0%, transparent 70%);
}

/* 动画8: 网格闪烁 - 适合科技、游戏类 */
@keyframes grid-pulse {
    0%, 100% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.5;
    }
}

.category-animated-bg.grid-bg {
    background-image: 
        linear-gradient(rgba(249, 115, 22, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(236, 72, 153, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: grid-pulse 3s ease-in-out infinite;
}

/* 暗黑主题下的动画背景 */
body:not(.dark-theme) .category-header-animated {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
}

body:not(.dark-theme) .category-animated-bg {
    opacity: 0.3 !important;
}