/* =============================================
   CookieTune 动态四大高对比度主题系统 (themes.css)
   ============================================= */

/* 自定义壁纸激活时的专属全屏渲染层 */
[data-has-custom-bg="true"] .bg-image-layer {
  background-image: var(--custom-bg-url) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  opacity: 1 !important;
  filter: blur(var(--custom-bg-blur, 0px)) brightness(var(--custom-bg-brightness, 0.95)) !important;
}

[data-has-custom-bg="true"] .bg-gradient-overlay {
  background: rgba(10, 6, 16, 0.28) !important;
  backdrop-filter: blur(2px) !important;
}

/* =============================================
   🌈 全新目录主题配色系统 (High-Contrast Theme Palettes)
   ============================================= */

/* 1. 🌸 诗词歌曲主题 (国风水墨 · 桃花微雨 · 青瓷烟雨黛粉) */
[data-theme="poetry"] {
  --primary-color: #ff8fa3;
  --primary-gradient: linear-gradient(135deg, #ff758c 0%, #ff8fa3 45%, #e0c3fc 100%);
  --accent-color: #8ec5fc;
  --btn-bg: rgba(255, 143, 163, 0.25);
  --btn-border: rgba(255, 175, 189, 0.55);
  --glass-bg: rgba(28, 16, 32, 0.65);
  --glass-border: rgba(255, 182, 193, 0.3);
  --bg-overlay: rgba(16, 8, 20, 0.45);
  --theme-font: var(--font-serif);
}

[data-theme="poetry"] .bg-image-layer {
  background-image: radial-gradient(circle at 18% 22%, rgba(255, 143, 163, 0.35) 0%, transparent 45%),
                    radial-gradient(circle at 82% 78%, rgba(142, 197, 252, 0.25) 0%, transparent 50%),
                    linear-gradient(to bottom, #180a1c, #26112a);
}

[data-theme="poetry"] .category-badge,
[data-theme="poetry"] .badge-cat {
  background: rgba(255, 182, 193, 0.25);
  border: 1px solid rgba(255, 182, 193, 0.6);
  color: #ffc2d1;
}

/* 2. 🏮 中文歌曲主题 (国潮朱砂 · 温暖赤霞与琥珀金) */
[data-theme="chinese"] {
  --primary-color: #ff6b6b;
  --primary-gradient: linear-gradient(135deg, #ff416c 0%, #ff4b2b 45%, #f9d423 100%);
  --accent-color: #ffd166;
  --btn-bg: rgba(255, 107, 107, 0.25);
  --btn-border: rgba(255, 107, 107, 0.55);
  --glass-bg: rgba(34, 14, 20, 0.65);
  --glass-border: rgba(255, 107, 107, 0.32);
  --bg-overlay: rgba(18, 6, 10, 0.45);
}

[data-theme="chinese"] .bg-image-layer {
  background-image: radial-gradient(circle at 20% 25%, rgba(255, 65, 108, 0.35) 0%, transparent 45%),
                    radial-gradient(circle at 80% 75%, rgba(249, 212, 35, 0.28) 0%, transparent 50%),
                    linear-gradient(to bottom, #220a14, #14040a);
}

[data-theme="chinese"] .category-badge,
[data-theme="chinese"] .badge-cat {
  background: rgba(255, 107, 107, 0.25);
  border: 1px solid rgba(255, 107, 107, 0.6);
  color: #ffd166;
}

/* 3. 🍡 日文歌曲/日语歌曲主题 (和风落樱 · 霓虹幻彩二次元紫藤) */
[data-theme="japanese"] {
  --primary-color: #b388ff;
  --primary-gradient: linear-gradient(135deg, #f77062 0%, #fe5196 40%, #b388ff 100%);
  --accent-color: #80d0c7;
  --btn-bg: rgba(179, 136, 255, 0.25);
  --btn-border: rgba(254, 81, 150, 0.55);
  --glass-bg: rgba(24, 14, 40, 0.65);
  --glass-border: rgba(179, 136, 255, 0.32);
  --bg-overlay: rgba(12, 6, 24, 0.45);
}

[data-theme="japanese"] .bg-image-layer {
  background-image: radial-gradient(circle at 75% 20%, rgba(254, 81, 150, 0.35) 0%, transparent 45%),
                    radial-gradient(circle at 20% 80%, rgba(128, 208, 199, 0.25) 0%, transparent 50%),
                    linear-gradient(to bottom, #160a26, #0e041c);
}

[data-theme="japanese"] .category-badge,
[data-theme="japanese"] .badge-cat {
  background: rgba(179, 136, 255, 0.28);
  border: 1px solid rgba(254, 81, 150, 0.6);
  color: #fbc2eb;
}

/* 4. 🎧 英文歌曲主题 (欧美黑胶 · 赛博深蓝与霓虹青微醺) */
[data-theme="english"] {
  --primary-color: #00e5ff;
  --primary-gradient: linear-gradient(135deg, #00c6ff 0%, #0072ff 50%, #8a2be2 100%);
  --accent-color: #ff007f;
  --btn-bg: rgba(0, 229, 255, 0.22);
  --btn-border: rgba(0, 229, 255, 0.55);
  --glass-bg: rgba(10, 18, 36, 0.68);
  --glass-border: rgba(0, 229, 255, 0.3);
  --bg-overlay: rgba(6, 10, 22, 0.45);
}

[data-theme="english"] .bg-image-layer {
  background-image: radial-gradient(circle at 80% 20%, rgba(0, 229, 255, 0.32) 0%, transparent 40%),
                    radial-gradient(circle at 20% 75%, rgba(138, 43, 226, 0.3) 0%, transparent 50%),
                    linear-gradient(to bottom, #081020, #040812);
}

[data-theme="english"] .category-badge,
[data-theme="english"] .badge-cat {
  background: rgba(0, 229, 255, 0.25);
  border: 1px solid rgba(0, 229, 255, 0.6);
  color: #00e5ff;
}

/* 4.5 🎤 翻唱歌曲主题 (流行幻彩 · 霓虹碧蓝与落日珊瑚) */
[data-theme="covers"] {
  --primary-color: #38bdf8;
  --primary-gradient: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #a855f7 100%);
  --accent-color: #f43f5e;
  --btn-bg: rgba(56, 189, 248, 0.22);
  --btn-border: rgba(56, 189, 248, 0.55);
  --glass-bg: rgba(12, 20, 36, 0.68);
  --glass-border: rgba(56, 189, 248, 0.3);
  --bg-overlay: rgba(6, 12, 24, 0.45);
}

[data-theme="covers"] .bg-image-layer {
  background-image: radial-gradient(circle at 75% 25%, rgba(6, 182, 212, 0.35) 0%, transparent 45%),
                    radial-gradient(circle at 25% 75%, rgba(168, 85, 247, 0.3) 0%, transparent 50%),
                    linear-gradient(to bottom, #091322, #040812);
}

[data-theme="covers"] .category-badge,
[data-theme="covers"] .badge-cat {
  background: rgba(56, 189, 248, 0.25);
  border: 1px solid rgba(56, 189, 248, 0.6);
  color: #a5f3fc;
}

/* 4.6 🍃 纯音乐 / BGM 主题 (空灵治愈 · 翡翠极光与深邃星海) */
[data-theme="bgm"] {
  --primary-color: #2dd4bf;
  --primary-gradient: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #06b6d4 100%);
  --accent-color: #38bdf8;
  --btn-bg: rgba(45, 212, 191, 0.22);
  --btn-border: rgba(45, 212, 191, 0.55);
  --glass-bg: rgba(8, 28, 26, 0.68);
  --glass-border: rgba(45, 212, 191, 0.35);
  --bg-overlay: rgba(4, 16, 15, 0.45);
}

[data-theme="bgm"] .bg-image-layer {
  background-image: radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.35) 0%, transparent 45%),
                    radial-gradient(circle at 20% 80%, rgba(6, 182, 212, 0.3) 0%, transparent 50%),
                    linear-gradient(to bottom, #061917, #020c0b);
}

[data-theme="bgm"] .category-badge,
[data-theme="bgm"] .badge-cat {
  background: rgba(45, 212, 191, 0.25);
  border: 1px solid rgba(45, 212, 191, 0.6);
  color: #99f6e4;
}

/* 5. 🎀 Cookie 原创歌曲主题 (甜美治愈 · 梦幻星光金粉与璀璨香槟金) */
[data-theme="original"] {
  --primary-color: #ffd700;
  --primary-gradient: linear-gradient(135deg, #ff4e50 0%, #f9d423 50%, #ffd700 100%);
  --accent-color: #ff758c;
  --btn-bg: rgba(255, 215, 0, 0.28);
  --btn-border: rgba(255, 215, 0, 0.65);
  --glass-bg: rgba(38, 18, 28, 0.68);
  --glass-border: rgba(255, 215, 0, 0.4);
  --bg-overlay: rgba(20, 8, 16, 0.45);
}

[data-theme="original"] .bg-image-layer {
  background-image: radial-gradient(circle at 25% 25%, rgba(255, 78, 80, 0.38) 0%, transparent 45%),
                    radial-gradient(circle at 80% 70%, rgba(249, 212, 35, 0.32) 0%, transparent 50%),
                    linear-gradient(to bottom, #260c1c, #14040e);
}

[data-theme="original"] .original-badge {
  background: linear-gradient(135deg, #ffd700, #ff4e50);
  color: #2b0800;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  animation: badge-glow 1.8s infinite alternate;
}

/* 6. ❤️ 我的收藏主题 (心动星芒 · 璀璨极光玫红与紫霞) */
[data-theme="favorites"] {
  --primary-color: #ff2d75;
  --primary-gradient: linear-gradient(135deg, #ff2d75 0%, #ff839d 50%, #ffd166 100%);
  --accent-color: #ffeaa7;
  --btn-bg: rgba(255, 45, 117, 0.25);
  --btn-border: rgba(255, 45, 117, 0.55);
  --glass-bg: rgba(36, 14, 30, 0.65);
  --glass-border: rgba(255, 45, 117, 0.35);
  --bg-overlay: rgba(18, 6, 16, 0.45);
}

[data-theme="favorites"] .bg-image-layer {
  background-image: radial-gradient(circle at 20% 20%, rgba(255, 45, 117, 0.35) 0%, transparent 45%),
                    radial-gradient(circle at 80% 80%, rgba(255, 209, 102, 0.25) 0%, transparent 50%),
                    linear-gradient(to bottom, #220a1c, #12040e);
}

/* 7. ✨ 全部歌曲主题 (浩瀚星云 · 梦幻深空星河与极光紫) */
[data-theme="all"] {
  --primary-color: #e056fd;
  --primary-gradient: linear-gradient(135deg, #686de0 0%, #e056fd 50%, #ff7979 100%);
  --accent-color: #badc58;
  --btn-bg: rgba(224, 86, 253, 0.24);
  --btn-border: rgba(224, 86, 253, 0.55);
  --glass-bg: rgba(22, 16, 36, 0.65);
  --glass-border: rgba(224, 86, 253, 0.32);
  --bg-overlay: rgba(12, 8, 22, 0.45);
}

[data-theme="all"] .bg-image-layer {
  background-image: radial-gradient(circle at 30% 20%, rgba(104, 109, 224, 0.35) 0%, transparent 45%),
                    radial-gradient(circle at 75% 75%, rgba(224, 86, 253, 0.3) 0%, transparent 50%),
                    linear-gradient(to bottom, #140c24, #0a0614);
}

/* 预设壁纸预览格样式 */
.preset-wallpapers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 10px;
}

.wp-preset-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: var(--transition-smooth);
}

.wp-preset-card:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.wp-preset-card.active {
  border-color: var(--primary-color);
  box-shadow: 0 0 20px rgba(255, 117, 140, 0.5);
  background: rgba(255, 255, 255, 0.25);
}

.wp-preview {
  width: 100%;
  height: 70px;
  border-radius: var(--radius-sm);
}

.wp-poetry {
  background: linear-gradient(135deg, #ff758c 0%, #ff9a9e 50%, #2f1730 100%);
}

.wp-sakura {
  background: linear-gradient(135deg, #f64f59 0%, #c471ed 50%, #10061e 100%);
}

.wp-starry {
  background: linear-gradient(135deg, #ff4e50 0%, #ffd700 50%, #180612 100%);
}

.wp-noir {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 50%, #060914 100%);
}

/* =============================================
   🌟 动态全屏全层浪漫氛围特效系统 (Ambient FX Particles)
   ============================================= */
.particles-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 998;
}

/* 1. 🌸 浪漫落樱 (Sakura Petals) */
.petal-particle {
  position: absolute;
  top: -30px;
  border-radius: 180% 0 180% 0;
  background: linear-gradient(135deg, rgba(255, 182, 193, 0.9) 0%, rgba(255, 105, 180, 0.7) 60%, rgba(255, 240, 245, 0.5) 100%);
  box-shadow: 0 0 12px rgba(255, 182, 193, 0.6);
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(255, 105, 180, 0.35));
  animation: fall-sway linear infinite;
  transform-origin: center center;
}

/* 2. ❄️ 初雪银霜 (Snowfall Crystals) */
.snow-particle {
  position: absolute;
  top: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 10%, rgba(224, 242, 254, 0.9) 50%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.9), 0 0 24px rgba(186, 230, 253, 0.6);
  pointer-events: none;
  animation: snow-drift linear infinite;
}

/* 3. ✨ 梦幻萤火 (Fireflies & Floating Glow) */
.firefly-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fef08a 0%, #a3e635 60%, rgba(163, 230, 53, 0) 100%);
  box-shadow: 0 0 16px #a3e635, 0 0 32px rgba(250, 204, 21, 0.85);
  pointer-events: none;
  animation: firefly-wander ease-in-out infinite alternate;
}

/* 4. 💖 悸动心尘 (Heart Sparks) */
.heart-particle {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: heart-wander ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(244, 63, 94, 0.6));
}

/* 5. 🌠 璀璨星尘 (Cosmic Stardust) */
.stardust-particle {
  position: absolute;
  background: radial-gradient(circle, #ffffff 20%, #c084fc 60%, transparent 100%);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 0 28px rgba(192, 132, 252, 0.7);
  clip-path: polygon(50% 0%, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0% 50%, 37% 37%);
  pointer-events: none;
  animation: stardust-twinkle ease-in-out infinite;
}

/* 6. 🍂 枫叶秋语 (Autumn Leaves) */
.leaf-particle {
  position: absolute;
  top: -30px;
  border-radius: 120% 0 120% 0;
  background: linear-gradient(135deg, #fbbf24 0%, #f97316 50%, #dc2626 100%);
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.5);
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(220, 38, 38, 0.35));
  animation: leaf-tumble linear infinite;
  transform-origin: center center;
}

.floating-hearts-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}

.floating-heart {
  position: absolute;
  font-size: 24px;
  animation: float-up-fade 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  pointer-events: none;
}

/* 樱花飘落动效 */
@keyframes fall-sway {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0.8);
    opacity: 0.95;
  }
  25% {
    transform: translate(35px, 25vh) rotate(60deg) scale(1.05);
    opacity: 0.85;
  }
  50% {
    transform: translate(70px, 50vh) rotate(180deg) scale(0.9);
    opacity: 0.8;
  }
  75% {
    transform: translate(20px, 75vh) rotate(270deg) scale(1);
    opacity: 0.7;
  }
  100% {
    transform: translate(-30px, 105vh) rotate(360deg) scale(0.75);
    opacity: 0;
  }
}

/* 雪花悠扬飘落动效 */
@keyframes snow-drift {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 0.95;
  }
  50% {
    transform: translate(40px, 50vh) scale(1.1);
    opacity: 0.85;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translate(-20px, 105vh) scale(0.75);
    opacity: 0;
  }
}

/* 萤火光点缓慢漂浮移动动效 */
@keyframes firefly-wander {
  0% {
    transform: translate(0, 0) scale(0.7);
    opacity: 0.2;
  }
  30% {
    opacity: 1;
    transform: translate(30px, -40px) scale(1.2);
  }
  65% {
    opacity: 0.4;
    transform: translate(-25px, -80px) scale(0.85);
  }
  100% {
    opacity: 0.95;
    transform: translate(40px, -130px) scale(1.1);
  }
}

/* 悸动心尘悬浮动效 */
@keyframes heart-wander {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
    transform: translateY(-20px) scale(1.1);
  }
  50% {
    transform: translateY(-60px) translateX(25px) scale(0.95);
    opacity: 0.8;
  }
  85% {
    opacity: 0.7;
    transform: translateY(-110px) translateX(-15px) scale(1.05);
  }
  100% {
    transform: translateY(-160px) translateX(10px) scale(0.5);
    opacity: 0;
  }
}

/* 星尘闪烁飘移动效 */
@keyframes stardust-twinkle {
  0% {
    transform: translate(0, 0) scale(0.2) rotate(0deg);
    opacity: 0;
  }
  25% {
    opacity: 1;
    transform: translate(15px, -20px) scale(1.2) rotate(45deg);
  }
  60% {
    opacity: 0.5;
    transform: translate(-10px, -45px) scale(0.8) rotate(90deg);
  }
  85% {
    opacity: 0.9;
    transform: translate(20px, -70px) scale(1.1) rotate(135deg);
  }
  100% {
    transform: translate(0, -95px) scale(0.2) rotate(180deg);
    opacity: 0;
  }
}

/* 枫叶翻滚飞落动效 */
@keyframes leaf-tumble {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0.7);
    opacity: 0.95;
  }
  30% {
    transform: translate(50px, 30vh) rotate(120deg) scale(1);
    opacity: 0.85;
  }
  65% {
    transform: translate(-20px, 65vh) rotate(240deg) scale(0.9);
    opacity: 0.8;
  }
  100% {
    transform: translate(60px, 105vh) rotate(400deg) scale(0.7);
    opacity: 0;
  }
}

@keyframes float-up-fade {
  0% {
    opacity: 1;
    transform: translate(-50%, 0) scale(0.6);
  }
  50% {
    transform: translate(-50%, -60px) scale(1.3) rotate(-10deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -120px) scale(1.6) rotate(15deg);
  }
}

@keyframes badge-glow {
  0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
  100% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.9); }
}

/* =============================================
   功能开关卡片 (Toggle Switch Component)
   ============================================= */
.theme-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 14px 18px;
  border-radius: var(--radius-md);
  transition: var(--transition-smooth);
}

.theme-switch-row:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

.theme-switch-info {
  flex: 1;
}

.theme-switch-info h4 {
  font-size: 14px;
  color: #fff;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.theme-switch-info .section-desc {
  margin-bottom: 0;
  line-height: 1.4;
  font-size: 12px;
  color: var(--text-muted);
}

/* 现代极光光效滑动开关 */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 30px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--primary-gradient);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 14px rgba(255, 117, 140, 0.55);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(24px);
}