/* ============================================================
   皮肤风格样式 - 7种主题
   ============================================================ */

/* ========== 默认风格 (不做任何覆盖) ========== */
body.skin-default { }

/* ========== 中元节风格 ========== */
body.skin-zhongyuan {
  --bg-primary: #0d0714;
  --bg-secondary: #1a0f24;
  --bg-card: rgba(26, 15, 36, 0.9);
  --text-primary: #e8d5f0;
  --text-secondary: #b89cc9;
  --text-muted: #7a6288;
  --accent: #9b59b6;
  --accent-glow: rgba(155, 89, 182, 0.4);
  --accent-secondary: #8e44ad;
  --gradient-primary: linear-gradient(135deg, #9b59b6 0%, #6c3483 100%);
  --gradient-hero: linear-gradient(135deg, #0d0714 0%, #2d1b3d 50%, #0d0714 100%);
  --border-color: rgba(155, 89, 182, 0.2);
  --border-hover: rgba(155, 89, 182, 0.5);
  --shadow-glow: 0 0 40px rgba(155, 89, 182, 0.2);
}

body.skin-zhongyuan .hero-glow {
  background: radial-gradient(ellipse, rgba(155, 89, 182, 0.3) 0%, transparent 70%);
}

body.skin-zhongyuan .hero-grid {
  background-image:
    linear-gradient(rgba(155, 89, 182, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 89, 182, 0.05) 1px, transparent 1px);
}

/* 中元节特色：飘动的灯笼 */
body.skin-zhongyuan::before {
  content: '🏮';
  position: fixed;
  top: 80px;
  right: 40px;
  font-size: 36px;
  z-index: 1;
  animation: lanternFloat 4s ease-in-out infinite;
  opacity: 0.6;
  pointer-events: none;
}

body.skin-zhongyuan::after {
  content: '🏮';
  position: fixed;
  top: 120px;
  left: 60px;
  font-size: 28px;
  z-index: 1;
  animation: lanternFloat 5s ease-in-out infinite reverse;
  opacity: 0.5;
  pointer-events: none;
}

@keyframes lanternFloat {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

/* ========== 中秋节风格 ========== */
body.skin-zhongqiu {
  --bg-primary: #1a1408;
  --bg-secondary: #2a2010;
  --bg-card: rgba(42, 32, 16, 0.9);
  --text-primary: #f5e6c8;
  --text-secondary: #d4b896;
  --text-muted: #8a7556;
  --accent: #f4a460;
  --accent-glow: rgba(244, 164, 96, 0.4);
  --accent-secondary: #daa520;
  --gradient-primary: linear-gradient(135deg, #f4a460 0%, #daa520 100%);
  --gradient-hero: linear-gradient(135deg, #1a1408 0%, #3d2e15 50%, #1a1408 100%);
  --border-color: rgba(244, 164, 96, 0.2);
  --border-hover: rgba(244, 164, 96, 0.5);
  --shadow-glow: 0 0 40px rgba(244, 164, 96, 0.2);
}

body.skin-zhongqiu .hero-glow {
  background: radial-gradient(ellipse, rgba(244, 164, 96, 0.3) 0%, transparent 70%);
}

/* 中秋月亮 */
body.skin-zhongqiu::before {
  content: '';
  position: fixed;
  top: 100px;
  right: 80px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8dc, #f4a460);
  box-shadow: 0 0 60px rgba(244, 164, 96, 0.6), 0 0 100px rgba(244, 164, 96, 0.3);
  z-index: 1;
  pointer-events: none;
  animation: moonGlow 4s ease-in-out infinite alternate;
}

@keyframes moonGlow {
  from { box-shadow: 0 0 60px rgba(244, 164, 96, 0.5), 0 0 100px rgba(244, 164, 96, 0.2); }
  to { box-shadow: 0 0 80px rgba(244, 164, 96, 0.7), 0 0 120px rgba(244, 164, 96, 0.4); }
}

/* 中秋云朵 */
body.skin-zhongqiu::after {
  content: '☁️';
  position: fixed;
  top: 90px;
  right: 50px;
  font-size: 40px;
  z-index: 2;
  opacity: 0.4;
  pointer-events: none;
  animation: cloudDrift 20s linear infinite;
}

@keyframes cloudDrift {
  0% { transform: translateX(0); }
  100% { transform: translateX(-200px); }
}

/* ========== 国庆节风格 ========== */
body.skin-guoqing {
  --bg-primary: #1a0505;
  --bg-secondary: #2d0a0a;
  --bg-card: rgba(45, 10, 10, 0.9);
  --text-primary: #ffe5e5;
  --text-secondary: #e8b4b4;
  --text-muted: #9a6b6b;
  --accent: #de2910;
  --accent-glow: rgba(222, 41, 16, 0.5);
  --accent-secondary: #ff4500;
  --gradient-primary: linear-gradient(135deg, #de2910 0%, #ff4500 50%, #ffd700 100%);
  --gradient-hero: linear-gradient(135deg, #1a0505 0%, #4a0e0e 50%, #1a0505 100%);
  --border-color: rgba(222, 41, 16, 0.25);
  --border-hover: rgba(255, 215, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(222, 41, 16, 0.25);
}

body.skin-guoqing .hero-glow {
  background: radial-gradient(ellipse, rgba(222, 41, 16, 0.35) 0%, transparent 70%);
}

body.skin-guoqing .hero-title {
  background: linear-gradient(180deg, #ffd700 0%, #de2910 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 国庆五星 */
body.skin-guoqing::before {
  content: '★';
  position: fixed;
  top: 90px;
  right: 60px;
  font-size: 48px;
  color: #ffd700;
  z-index: 1;
  text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
  pointer-events: none;
  animation: starSpin 8s linear infinite;
}

@keyframes starSpin {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
}

/* 国庆小星 */
body.skin-guoqing::after {
  content: '★ ★ ★ ★';
  position: fixed;
  top: 150px;
  right: 40px;
  font-size: 16px;
  color: #ffd700;
  z-index: 1;
  letter-spacing: 8px;
  opacity: 0.7;
  pointer-events: none;
}

/* ========== 圣诞节风格 ========== */
body.skin-christmas {
  --bg-primary: #0a1f0a;
  --bg-secondary: #0d2818;
  --bg-card: rgba(13, 40, 24, 0.9);
  --text-primary: #e8f5e9;
  --text-secondary: #a5d6a7;
  --text-muted: #66bb6a;
  --accent: #c62828;
  --accent-glow: rgba(198, 40, 40, 0.4);
  --accent-secondary: #2e7d32;
  --gradient-primary: linear-gradient(135deg, #c62828 0%, #2e7d32 100%);
  --gradient-hero: linear-gradient(135deg, #0a1f0a 0%, #1b3d1b 50%, #0a1f0a 100%);
  --border-color: rgba(46, 125, 50, 0.3);
  --border-hover: rgba(198, 40, 40, 0.5);
  --shadow-glow: 0 0 40px rgba(46, 125, 50, 0.2);
}

body.skin-christmas .hero-glow {
  background: radial-gradient(ellipse, rgba(46, 125, 50, 0.3) 0%, transparent 70%);
}

/* 圣诞雪花 */
body.skin-christmas::before {
  content: '❄️ ❄️ ❄️ ❄️ ❄️ ❄️ ❄️ ❄️ ❄️ ❄️';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.3);
  z-index: 1;
  pointer-events: none;
  animation: snowfall 10s linear infinite;
  letter-spacing: 80px;
  line-height: 80px;
  overflow: hidden;
}

@keyframes snowfall {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* 圣诞装饰球 */
body.skin-christmas::after {
  content: '🎄';
  position: fixed;
  bottom: 100px;
  left: 30px;
  font-size: 60px;
  z-index: 1;
  pointer-events: none;
  animation: treeShake 3s ease-in-out infinite;
}

@keyframes treeShake {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

/* ========== 新年风格 ========== */
body.skin-newyear {
  --bg-primary: #1a0000;
  --bg-secondary: #2d0505;
  --bg-card: rgba(45, 5, 5, 0.92);
  --text-primary: #fff0e0;
  --text-secondary: #f0c8a0;
  --text-muted: #a07850;
  --accent: #ff1744;
  --accent-glow: rgba(255, 23, 68, 0.5);
  --accent-secondary: #ff6d00;
  --gradient-primary: linear-gradient(135deg, #ff1744 0%, #ff6d00 50%, #ffd700 100%);
  --gradient-hero: linear-gradient(135deg, #1a0000 0%, #4a0a0a 50%, #1a0000 100%);
  --border-color: rgba(255, 23, 68, 0.25);
  --border-hover: rgba(255, 215, 0, 0.5);
  --shadow-glow: 0 0 40px rgba(255, 23, 68, 0.25);
}

body.skin-newyear .hero-glow {
  background: radial-gradient(ellipse, rgba(255, 23, 68, 0.35) 0%, transparent 70%);
}

body.skin-newyear .hero-title {
  background: linear-gradient(180deg, #ffd700 0%, #ff6d00 50%, #ff1744 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 新年灯笼 */
body.skin-newyear::before {
  content: '🏮';
  position: fixed;
  top: 80px;
  right: 50px;
  font-size: 48px;
  z-index: 1;
  pointer-events: none;
  animation: lanternSwing 3s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255, 23, 68, 0.6));
}

body.skin-newyear::after {
  content: '🏮';
  position: fixed;
  top: 80px;
  left: 50px;
  font-size: 48px;
  z-index: 1;
  pointer-events: none;
  animation: lanternSwing 3.5s ease-in-out infinite reverse;
  filter: drop-shadow(0 0 20px rgba(255, 23, 68, 0.6));
}

@keyframes lanternSwing {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

/* ========== 果玉杰冰雪限定风格 ========== */
body.skin-bingxue {
  --bg-primary: #0a1628;
  --bg-secondary: #0f2137;
  --bg-card: rgba(15, 33, 55, 0.88);
  --text-primary: #e3f2fd;
  --text-secondary: #90caf9;
  --text-muted: #5c8fc4;
  --accent: #00bcd4;
  --accent-glow: rgba(0, 188, 212, 0.45);
  --accent-secondary: #29b6f6;
  --gradient-primary: linear-gradient(135deg, #00bcd4 0%, #29b6f6 50%, #81d4fa 100%);
  --gradient-hero: linear-gradient(135deg, #0a1628 0%, #1a3a5c 50%, #0a1628 100%);
  --border-color: rgba(0, 188, 212, 0.2);
  --border-hover: rgba(129, 212, 250, 0.5);
  --shadow-glow: 0 0 40px rgba(0, 188, 212, 0.2);
}

body.skin-bingxue .hero-glow {
  background: radial-gradient(ellipse, rgba(0, 188, 212, 0.3) 0%, transparent 70%);
}

body.skin-bingxue .hero-grid {
  background-image:
    linear-gradient(rgba(0, 188, 212, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 188, 212, 0.05) 1px, transparent 1px);
}

body.skin-bingxue .hero-title {
  background: linear-gradient(180deg, #e3f2fd 0%, #81d4fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 冰雪飘落 */
body.skin-bingxue::before {
  content: '❄️ ❄ ❄️ ❄ ❄️ ❄ ❄️ ❄ ❄️ ❄';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: rgba(129, 212, 250, 0.4);
  z-index: 1;
  pointer-events: none;
  animation: iceSnow 12s linear infinite;
  letter-spacing: 100px;
  line-height: 100px;
  overflow: hidden;
}

@keyframes iceSnow {
  0% { transform: translateY(-100%) rotate(0deg); }
  100% { transform: translateY(100%) rotate(360deg); }
}

/* 冰晶装饰 */
body.skin-bingxue::after {
  content: '❄️';
  position: fixed;
  bottom: 80px;
  right: 40px;
  font-size: 56px;
  z-index: 1;
  pointer-events: none;
  animation: iceSpin 6s linear infinite;
  opacity: 0.5;
  filter: drop-shadow(0 0 15px rgba(0, 188, 212, 0.6));
}

@keyframes iceSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 冰雪风格提示条特殊样式 */
body.skin-bingxue .skin-tip {
  background: linear-gradient(135deg, #00bcd4, #29b6f6, #81d4fa);
  box-shadow: 0 4px 20px rgba(0, 188, 212, 0.5);
}

/* ========== 皮肤卡片预览色 ========== */
.skin-preview-default { background: linear-gradient(135deg, #111827, #1f2937); }
.skin-preview-zhongyuan { background: linear-gradient(135deg, #2d1b3d, #4a2c5e); }
.skin-preview-zhongqiu { background: linear-gradient(135deg, #3d2e15, #5a4520); }
.skin-preview-guoqing { background: linear-gradient(135deg, #4a0e0e, #8b1a1a); }
.skin-preview-christmas { background: linear-gradient(135deg, #1b3d1b, #c62828); }
.skin-preview-newyear { background: linear-gradient(135deg, #4a0a0a, #ff6d00); }
.skin-preview-bingxue { background: linear-gradient(135deg, #1a3a5c, #00bcd4); }