/* ========== 超级无敌吊炸天样式 - 完整版 ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Poppins', 'Segoe UI', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
  position: relative;
  overflow-x: hidden;
  transition: background 0.4s ease, color 0.3s ease;
}

/* 动态流动光线背景 */
body::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.4s ease;
  animation: flowBg 20s linear infinite;
}
@keyframes flowBg {
  0% { transform: rotate(0deg) translate(0, 0); }
  100% { transform: rotate(360deg) translate(10%, 10%); }
}

/* 背景纹路 */
body::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}

/* 设置按钮 */
.settings-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 101;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  animation: btnPulse 2s ease-in-out infinite;
}
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(0,0,0,0.15), 0 0 0 0 rgba(0,160,255,0.2); }
  50% { box-shadow: 0 4px 25px rgba(0,160,255,0.5), 0 0 0 8px rgba(0,160,255,0); }
}
.settings-btn:hover {
  transform: rotate(180deg) scale(1.05);
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 30px rgba(0,160,255,0.8);
}
.settings-btn img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.settings-btn:hover img {
  transform: rotate(-180deg);
}

/* 主题面板 */
.theme-panel {
  position: fixed;
  top: 80px;
  right: -280px;
  width: 200px;
  background: rgba(20,20,30,0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 15px;
  z-index: 100;
  transition: right 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.theme-panel.open { right: 20px; }
.theme-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  margin-bottom: 15px;
  color: white;
  font-weight: bold;
  font-size: 16px;
}
.theme-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.theme-option {
  padding: 10px 15px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 14px;
  font-weight: 500;
  color: white;
  text-align: left;
  position: relative;
  overflow: hidden;
}
.theme-option::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}
.theme-option:hover::before { left: 100%; }
.theme-option:hover {
  transform: translateX(5px);
  filter: brightness(1.1);
}
.theme-option.active {
  border: 2px solid white;
  box-shadow: 0 0 15px rgba(255,255,255,0.5);
  transform: scale(1.02);
}

/* 水泡背景 */
.bubbles {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.bubble {
  position: absolute;
  bottom: -120px;
  border-radius: 50%;
  animation: rise linear infinite;
  backdrop-filter: blur(2px);
  transition: transform 0.1s ease;
}
@keyframes rise {
  0% { transform: translateY(0) scale(0.6); opacity: 0.6; }
  50% { opacity: 0.3; transform: translateY(-60vh) scale(1.2); }
  100% { transform: translateY(-130vh) scale(1.8); opacity: 0; }
}

/* SEO隐藏h1 */
.seo-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
  white-space: nowrap;
}

/* 主标题 */
.hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 2.6rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
  z-index: 2;
  position: relative;
  letter-spacing: 4px;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 0.9s cubic-bezier(0.2, 0.9, 0.4, 1.1) forwards 0.1s;
}
.hero-title span {
  display: inline-block;
  animation: titleGlow 3s ease-in-out infinite;
}
@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 2px currentColor, 0 0 5px currentColor; }
  50% { text-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* 副标题 */
.hero-sub {
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 2px;
  z-index: 2;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease forwards 0.2s;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-size: 200% 200%;
}

/* 头像 */
.avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,0.8);
  margin-bottom: 30px;
  z-index: 2;
  position: relative;
  animation: avatarFloat 3.5s ease-in-out infinite, borderPulse 2s ease-in-out infinite;
  transition: all 0.4s cubic-bezier(0.2, 0.9, 0.6, 1.1);
  background: #fff;
  box-shadow: 0 0 25px rgba(0,0,0,0.2);
}
@keyframes borderPulse {
  0%, 100% { border-color: rgba(255,255,255,0.6); box-shadow: 0 0 15px rgba(255,255,255,0.3); }
  50% { border-color: rgba(255,255,255,1); box-shadow: 0 0 30px rgba(255,255,255,0.6); }
}
.avatar:hover {
  transform: scale(1.08) rotate(3deg);
  box-shadow: 0 0 45px rgba(0,160,255,0.5);
}
@keyframes avatarFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.avatar:hover img { transform: scale(1.05); }

/* 按钮布局 */
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 800px;
  margin: 20px auto 0;
  padding: 0 20px;
  z-index: 2;
  position: relative;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 1s ease forwards 0.3s;
}
.btn {
  padding: 12px 28px;
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  border-radius: 50px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 200px;
  backdrop-filter: blur(4px);
  letter-spacing: 2px;
  border: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.btn:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 12px 25px rgba(0,0,0,0.3);
}
.btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, rgba(255,255,255,0.2), rgba(255,255,255,0.5), rgba(255,255,255,0.2));
  transform: rotate(25deg);
  opacity: 0;
  transition: all 0.6s ease;
}
.btn:hover::before {
  left: 30%;
  opacity: 1;
  animation: shimmer 0.8s linear forwards;
}
@keyframes shimmer {
  0% { transform: translateX(-50%) rotate(25deg); }
  100% { transform: translateX(50%) rotate(25deg); }
}
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: rippleAnim 0.6s linear forwards;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}
@keyframes rippleAnim {
  to { transform: scale(12); opacity: 0; }
}

/* 分割线 */
.category-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 8px 0 8px;
  gap: 8px;
}
.divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: 0.4;
  border-radius: 1px;
  animation: none;
}
.divider-icon {
  font-size: 10px;
  font-weight: 500;
  color: inherit;
  background: transparent;
  padding: 2px 10px;
  border-radius: 20px;
  letter-spacing: 1px;
  white-space: nowrap;
  box-shadow: none;
  text-shadow: none;
  opacity: 0.7;
}

/* 工作卡片 */
.worktime {
  font-size: 14px;
  text-align: center;
  max-width: 90%;
  margin-top: 35px;
  z-index: 2;
  position: relative;
  cursor: default;
  backdrop-filter: blur(12px);
  border-radius: 40px;
  padding: 18px 24px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.worktime:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.worktime > div {
  display: block;
  opacity: 0;
  animation: textFade 0.8s forwards;
  margin-bottom: 0.5em;
  position: relative;
  transition: all 0.3s ease;
  padding: 3px 8px;
  border-radius: 20px;
}
.worktime > div:hover {
  transform: translateX(5px);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(5px);
}
@keyframes textFade {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
.worktime > div:nth-child(1){ animation-delay:0.2s; }
.worktime > div:nth-child(2){ animation-delay:0.5s; }
.worktime > div:nth-child(3){ animation-delay:0.8s; }
.worktime > div:nth-child(4){ animation-delay:1.1s; }
.worktime > div:nth-child(5){ animation-delay:1.4s; }

.content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* 页脚 */
.copyright {
  font-size: 11px;
  text-align: center;
  position: relative;
  margin-top: 40px;
  margin-bottom: 20px;
  width: 100%;
  z-index: 99;
  background: transparent;
  letter-spacing: 1px;
  padding: 10px 0;
}
.copyright a {
  text-decoration: none;
  transition: all 0.3s ease;
}
.copyright a:hover {
  text-shadow: 0 0 8px currentColor;
}

/* ==================== 主题1: 碧海潮生 (蓝色系) ==================== */
body.theme-blue {
  background: linear-gradient(145deg, #cfe9ff 0%, #e6f4ff 30%, #ffffff 100%);
}
body.theme-blue::before {
  background: radial-gradient(circle at 30% 40%, rgba(0,150,255,0.2) 0%, rgba(0,212,255,0.1) 40%, transparent 70%),
              repeating-linear-gradient(45deg, rgba(255,255,255,0.3) 0px, rgba(255,255,255,0.3) 2px, transparent 2px, transparent 8px);
}
body.theme-blue .hero-title { color: #0066ff !important; }
body.theme-blue .hero-sub { background: linear-gradient(135deg, #0077ff, #00c3ff); background-clip: text; -webkit-background-clip: text; color: transparent; }
body.theme-blue .avatar { box-shadow: 0 0 0 0 rgba(0,160,255,0.6), 0 15px 35px rgba(0,0,0,0.2); animation: avatarGlowBlue 2.2s ease-in-out infinite, avatarFloat 3.5s ease-in-out infinite; }
@keyframes avatarGlowBlue {
  0% { box-shadow: 0 0 0 0 rgba(0,140,255,0.5), 0 15px 30px rgba(0,0,0,0.1);}
  50% { box-shadow: 0 0 0 12px rgba(0,150,255,0.25), 0 20px 45px rgba(0,0,0,0.2);}
  100% { box-shadow: 0 0 0 0 rgba(0,140,255,0), 0 15px 30px rgba(0,0,0,0.1);}
}
body.theme-blue .btn-172 { background: linear-gradient(135deg, #0066ff, #0052cc, #003d99); background-size: 200% 100%; animation: btnFlow 3s ease infinite; }
body.theme-blue .btn-haoyi { background: linear-gradient(135deg, #00aaff, #0088dd, #0066aa); background-size: 200% 100%; animation: btnFlow 3s ease infinite 0.5s; }
body.theme-blue .btn-flm { background: linear-gradient(135deg, #00ccff, #00aaff, #0088cc); background-size: 200% 100%; animation: btnFlow 3s ease infinite 0.7s; }
body.theme-blue .btn-haoka { background: linear-gradient(135deg, #3399ff, #0066ff, #0052cc, #003d99); background-size: 300% 100%; animation: btnFlow 3s ease infinite 1s; }
body.theme-blue .worktime { background: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 15px 40px rgba(0,0,0,0.1), 0 0 30px rgba(0,150,255,0.2); }
body.theme-blue .worktime:hover { background: rgba(255,255,255,0.6); box-shadow: 0 20px 50px rgba(0,0,0,0.15), 0 0 40px rgba(0,160,255,0.4); }
body.theme-blue .line1, body.theme-blue .line2, body.theme-blue .line3, body.theme-blue .line4, body.theme-blue .line5 { color: #0066cc; opacity: 0.9; }
body.theme-blue .line1 { color: #0066cc; }
body.theme-blue .line2 { color: #0088dd; }
body.theme-blue .line3 { color: #3399ff; }
body.theme-blue .line4 { color: #00aaff; }
body.theme-blue .line5 { color: #00ccff; }
body.theme-blue .copyright a { color: rgba(0,100,200,0.8); }
body.theme-blue .copyright a:hover { color: #0066ff; text-shadow: 0 0 8px #0066ff; }
body.theme-blue .bubble { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(100,200,255,0.4)); box-shadow: 0 0 25px rgba(0,160,255,0.5), inset 0 0 8px rgba(255,255,255,0.8); }
body.theme-blue .divider-line { background: linear-gradient(90deg, transparent, #0066ff, transparent); opacity: 0.4; }
body.theme-blue .divider-icon { color: #0066ff; }

/* ==================== 主题2: 暗夜星辰 (暗紫色系) ==================== */
body.theme-dark {
  background: linear-gradient(145deg, #0a0a14 0%, #0d0d1a 30%, #12122a 100%);
}
body.theme-dark .hero-title { color: #8a8acc !important; text-shadow: 0 0 8px rgba(138,138,204,0.3); }
body.theme-dark .hero-sub { background: linear-gradient(135deg, #8a8acc, #aa66aa); background-clip: text; -webkit-background-clip: text; color: transparent; }
body.theme-dark .avatar { border-color: rgba(138,138,204,0.4); box-shadow: 0 0 0 0 rgba(138,138,204,0.3); animation: avatarGlowDark 2.2s ease-in-out infinite, avatarFloat 3.5s ease-in-out infinite; }
@keyframes avatarGlowDark {
  0% { box-shadow: 0 0 0 0 rgba(138,138,204,0.2), 0 15px 30px rgba(0,0,0,0.3);}
  50% { box-shadow: 0 0 0 8px rgba(170,100,170,0.2), 0 20px 45px rgba(0,0,0,0.4);}
  100% { box-shadow: 0 0 0 0 rgba(138,138,204,0), 0 15px 30px rgba(0,0,0,0.3);}
}
body.theme-dark .btn-172 { background: linear-gradient(135deg, #5a3a8a, #4a2a7a, #3a1a5a); background-size: 200% 100%; animation: btnFlow 3s ease infinite; border: 1px solid rgba(138,138,204,0.2); }
body.theme-dark .btn-haoyi { background: linear-gradient(135deg, #7a4a8a, #6a3a7a, #5a2a6a); background-size: 200% 100%; animation: btnFlow 3s ease infinite 0.5s; border: 1px solid rgba(204,138,170,0.2); }
body.theme-dark .btn-flm { background: linear-gradient(135deg, #8a5a9a, #7a4a8a, #6a3a7a); background-size: 200% 100%; animation: btnFlow 3s ease infinite 0.7s; border: 1px solid rgba(204,170,138,0.2); }
body.theme-dark .btn-haoka { background: linear-gradient(135deg, #9a6aaa, #8a5a9a, #6a4a7a, #5a3a6a); background-size: 300% 100%; animation: btnFlow 3s ease infinite 1s; border: 1px solid rgba(204,170,138,0.2); }
body.theme-dark .btn:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 12px 30px rgba(0,0,0,0.5); border-color: rgba(138,138,204,0.5); }
body.theme-dark .worktime { background: rgba(15,15,25,0.7); border: 1px solid rgba(138,138,204,0.2); box-shadow: 0 15px 40px rgba(0,0,0,0.4); }
body.theme-dark .worktime:hover { background: rgba(20,20,35,0.85); box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(138,138,204,0.1); border-color: rgba(138,138,204,0.3); }
body.theme-dark .line1 { color: #9a7acc; }
body.theme-dark .line2 { color: #aa8add; }
body.theme-dark .line3 { color: #cc88aa; }
body.theme-dark .line4 { color: #ccaa88; }
body.theme-dark .line5 { color: #7a9acc; }
body.theme-dark .copyright a { color: #8a7aaa; }
body.theme-dark .copyright a:hover { color: #aa9acc; text-shadow: 0 0 8px #aa9acc; }
body.theme-dark .bubble { background: radial-gradient(circle at 30% 30%, rgba(100,80,150,0.35), rgba(60,40,100,0.2)); box-shadow: 0 0 20px rgba(100,80,150,0.3); }
body.theme-dark .divider-line { background: linear-gradient(90deg, transparent, #8a8acc, transparent); opacity: 0.4; }
body.theme-dark .divider-icon { color: #8a8acc; }

/* ==================== 主题3: 幻梦极光 (粉紫色系) ==================== */
body.theme-purple {
  background: linear-gradient(145deg, #0d0b1a 0%, #1a1a3e 30%, #16213e 100%);
}
body.theme-purple::before {
  background: radial-gradient(circle at 30% 40%, rgba(236,72,153,0.2) 0%, rgba(168,85,247,0.15) 40%, transparent 70%);
}
body.theme-purple .hero-title { color: #ec4899 !important; }
body.theme-purple .hero-sub { background: linear-gradient(135deg, #ff88cc, #d090ff, #b070ff); background-clip: text; -webkit-background-clip: text; color: transparent; background-size: 200% 200%; }
body.theme-purple .avatar { box-shadow: 0 0 0 0 rgba(236,72,153,0.5), 0 15px 35px rgba(0,0,0,0.3); animation: avatarGlowPurple 2.2s ease-in-out infinite, avatarFloat 3.5s ease-in-out infinite; }
@keyframes avatarGlowPurple {
  0% { box-shadow: 0 0 0 0 rgba(236,72,153,0.4), 0 15px 30px rgba(0,0,0,0.2);}
  50% { box-shadow: 0 0 0 12px rgba(236,72,153,0.25), 0 20px 45px rgba(0,0,0,0.3);}
  100% { box-shadow: 0 0 0 0 rgba(236,72,153,0), 0 15px 30px rgba(0,0,0,0.2);}
}
body.theme-purple .btn-172 { background: linear-gradient(135deg, #db2777, #be185d, #9d174d); background-size: 200% 100%; animation: btnFlow 3s ease infinite; }
body.theme-purple .btn-haoyi { background: linear-gradient(135deg, #a855f7, #7c3aed, #6d28d9); background-size: 200% 100%; animation: btnFlow 3s ease infinite 0.5s; }
body.theme-purple .btn-flm { background: linear-gradient(135deg, #f472b6, #ec4899, #db2777); background-size: 200% 100%; animation: btnFlow 3s ease infinite 0.7s; }
body.theme-purple .btn-haoka { background: linear-gradient(135deg, #f59e0b, #ec4899, #a855f7, #8b5cf6); background-size: 300% 100%; animation: btnFlow 3s ease infinite 1s; }
body.theme-purple .worktime { background: rgba(30,20,50,0.5); border: 1px solid rgba(236,72,153,0.3); }
body.theme-purple .worktime:hover { background: rgba(40,30,60,0.7); box-shadow: 0 20px 50px rgba(0,0,0,0.3), 0 0 40px rgba(236,72,153,0.2); }
body.theme-purple .line1 { color: #ec4899; }
body.theme-purple .line2 { color: #c084fc; }
body.theme-purple .line3 { color: #f472b6; }
body.theme-purple .line4 { color: #fbbf24; }
body.theme-purple .line5 { color: #a855f7; }
body.theme-purple .bubble { background: radial-gradient(circle at 30% 30%, rgba(236,72,153,0.35), rgba(168,85,247,0.25)); box-shadow: 0 0 25px rgba(236,72,153,0.4); }
body.theme-purple .divider-line { background: linear-gradient(90deg, transparent, #ec4899, transparent); opacity: 0.4; }
body.theme-purple .divider-icon { color: #ec4899; }

/* ==================== 主题4: 薄荷之夏 (绿色系) ==================== */
body.theme-mint {
  background: linear-gradient(145deg, #ccfbf1 0%, #a7f3d0 30%, #d1fae5 100%);
}
body.theme-mint .hero-title { color: #059669 !important; }
body.theme-mint .hero-sub { background: linear-gradient(135deg, #059669, #10b981); background-clip: text; -webkit-background-clip: text; color: transparent; }
body.theme-mint .avatar { box-shadow: 0 0 0 0 rgba(16,185,129,0.5), 0 15px 35px rgba(0,0,0,0.1); animation: avatarGlowMint 2.2s ease-in-out infinite, avatarFloat 3.5s ease-in-out infinite; }
@keyframes avatarGlowMint {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4), 0 15px 30px rgba(0,0,0,0.1);}
  50% { box-shadow: 0 0 0 12px rgba(16,185,129,0.25), 0 20px 45px rgba(0,0,0,0.15);}
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0), 0 15px 30px rgba(0,0,0,0.1);}
}
body.theme-mint .btn-172 { background: linear-gradient(135deg, #047857, #059669, #10b981); background-size: 200% 100%; animation: btnFlow 3s ease infinite; }
body.theme-mint .btn-haoyi { background: linear-gradient(135deg, #10b981, #34d399, #6ee7b7); background-size: 200% 100%; animation: btnFlow 3s ease infinite 0.5s; }
body.theme-mint .btn-flm { background: linear-gradient(135deg, #34d399, #6ee7b7, #a7f3d0); background-size: 200% 100%; animation: btnFlow 3s ease infinite 0.7s; }
body.theme-mint .btn-haoka { background: linear-gradient(135deg, #f59e0b, #f97316, #10b981, #059669); background-size: 300% 100%; animation: btnFlow 3s ease infinite 1s; }
body.theme-mint .worktime { background: rgba(255,255,255,0.4); border: 1px solid rgba(16,185,129,0.3); box-shadow: 0 15px 40px rgba(0,0,0,0.05); }
body.theme-mint .worktime:hover { background: rgba(255,255,255,0.6); box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 0 40px rgba(16,185,129,0.2); }
body.theme-mint .line1 { color: #047857; }
body.theme-mint .line2 { color: #059669; }
body.theme-mint .line3 { color: #ec4899; }
body.theme-mint .line4 { color: #f97316; }
body.theme-mint .line5 { color: #10b981; }
body.theme-mint .bubble { background: radial-gradient(circle at 30% 30%, rgba(100,200,100,0.5), rgba(50,150,50,0.3)); box-shadow: 0 0 20px rgba(50,150,50,0.3); }
body.theme-mint .divider-line { background: linear-gradient(90deg, transparent, #059669, transparent); opacity: 0.4; }
body.theme-mint .divider-icon { color: #059669; }

/* ==================== 主题5: 烈焰黄昏 (橙红色系) ==================== */
body.theme-sunset {
  background: linear-gradient(145deg, #fff5e6 0%, #ffe4cc 30%, #ffd6b3 100%);
}
body.theme-sunset::before {
  background: radial-gradient(circle at 30% 40%, rgba(255,100,50,0.2) 0%, rgba(255,140,80,0.1) 40%, transparent 70%);
}
body.theme-sunset .hero-title { color: #e65c00 !important; }
body.theme-sunset .hero-sub { background: linear-gradient(135deg, #ff7e05, #ff5100); background-clip: text; -webkit-background-clip: text; color: transparent; }
body.theme-sunset .avatar { box-shadow: 0 0 0 0 rgba(255,100,50,0.5), 0 15px 35px rgba(0,0,0,0.1); animation: avatarGlowSunset 2.2s ease-in-out infinite, avatarFloat 3.5s ease-in-out infinite; }
@keyframes avatarGlowSunset {
  0% { box-shadow: 0 0 0 0 rgba(255,100,50,0.4), 0 15px 30px rgba(0,0,0,0.1);}
  50% { box-shadow: 0 0 0 12px rgba(255,100,50,0.25), 0 20px 45px rgba(0,0,0,0.15);}
  100% { box-shadow: 0 0 0 0 rgba(255,100,50,0), 0 15px 30px rgba(0,0,0,0.1);}
}
body.theme-sunset .btn-172 { background: linear-gradient(135deg, #ff6b35, #e85d04, #cc5500); background-size: 200% 100%; animation: btnFlow 3s ease infinite; }
body.theme-sunset .btn-haoyi { background: linear-gradient(135deg, #ff8c42, #f77f00, #e85d04); background-size: 200% 100%; animation: btnFlow 3s ease infinite 0.5s; }
body.theme-sunset .btn-flm { background: linear-gradient(135deg, #ffaa44, #ff8800, #ff6600); background-size: 200% 100%; animation: btnFlow 3s ease infinite 0.7s; }
body.theme-sunset .btn-haoka { background: linear-gradient(135deg, #ffaa44, #ff7700, #ff5500, #ff3300); background-size: 300% 100%; animation: btnFlow 3s ease infinite 1s; }
body.theme-sunset .worktime { background: rgba(255,235,215,0.6); border: 1px solid rgba(255,100,50,0.3); box-shadow: 0 15px 40px rgba(0,0,0,0.05); }
body.theme-sunset .worktime:hover { background: rgba(255,235,215,0.8); box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 0 40px rgba(255,100,50,0.3); }
body.theme-sunset .line1 { color: #cc5500; }
body.theme-sunset .line2 { color: #e65c00; }
body.theme-sunset .line3 { color: #ff3388; }
body.theme-sunset .line4 { color: #ff9900; }
body.theme-sunset .line5 { color: #ff6600; }
body.theme-sunset .copyright a { color: #cc5500; }
body.theme-sunset .copyright a:hover { color: #ff6b35; text-shadow: 0 0 8px #ff6b35; }
body.theme-sunset .bubble { background: radial-gradient(circle at 30% 30%, rgba(255,150,80,0.8), rgba(255,80,40,0.3)); box-shadow: 0 0 20px rgba(255,100,50,0.5); }
body.theme-sunset .divider-line { background: linear-gradient(90deg, transparent, #e65c00, transparent); opacity: 0.4; }
body.theme-sunset .divider-icon { color: #e65c00; }

/* ==================== 主题6: 深海秘境 (深海蓝色系) ==================== */
body.theme-ocean {
  background: linear-gradient(145deg, #0a1628 0%, #0f1a30 30%, #1a2a45 100%);
}
body.theme-ocean::before {
  background: radial-gradient(circle at 30% 40%, rgba(0,100,200,0.25) 0%, rgba(0,150,220,0.15) 40%, transparent 70%);
}
body.theme-ocean .hero-title { color: #00ddff !important; }
body.theme-ocean .hero-sub { background: linear-gradient(135deg, #00ddff, #44aaff, #88ccff); background-clip: text; -webkit-background-clip: text; color: transparent; background-size: 200% 200%; }
body.theme-ocean .avatar { box-shadow: 0 0 0 0 rgba(0,180,255,0.5), 0 15px 35px rgba(0,0,0,0.3); animation: avatarGlowOcean 2.2s ease-in-out infinite, avatarFloat 3.5s ease-in-out infinite; }
@keyframes avatarGlowOcean {
  0% { box-shadow: 0 0 0 0 rgba(0,180,255,0.4), 0 15px 30px rgba(0,0,0,0.2);}
  50% { box-shadow: 0 0 0 12px rgba(0,180,255,0.25), 0 20px 45px rgba(0,0,0,0.3);}
  100% { box-shadow: 0 0 0 0 rgba(0,180,255,0), 0 15px 30px rgba(0,0,0,0.2);}
}
body.theme-ocean .btn-172 { background: linear-gradient(135deg, #0066aa, #004488, #003366); background-size: 200% 100%; animation: btnFlow 3s ease infinite; }
body.theme-ocean .btn-haoyi { background: linear-gradient(135deg, #0088cc, #0066aa, #004488); background-size: 200% 100%; animation: btnFlow 3s ease infinite 0.5s; }
body.theme-ocean .btn-flm { background: linear-gradient(135deg, #00aaff, #0088cc, #0066aa); background-size: 200% 100%; animation: btnFlow 3s ease infinite 0.7s; }
body.theme-ocean .btn-haoka { background: linear-gradient(135deg, #00aaff, #0088cc, #0066aa, #004488); background-size: 300% 100%; animation: btnFlow 3s ease infinite 1s; }
body.theme-ocean .worktime { background: rgba(20,40,70,0.5); border: 1px solid rgba(0,150,200,0.3); box-shadow: 0 15px 40px rgba(0,0,0,0.3); }
body.theme-ocean .worktime:hover { background: rgba(30,60,100,0.7); box-shadow: 0 20px 50px rgba(0,0,0,0.4), 0 0 40px rgba(0,180,255,0.3); }
body.theme-ocean .line1 { color: #00ddff; }
body.theme-ocean .line2 { color: #44aaff; }
body.theme-ocean .line3 { color: #ff66aa; }
body.theme-ocean .line4 { color: #ffaa44; }
body.theme-ocean .line5 { color: #00ccff; }
body.theme-ocean .copyright a { color: #44aaff; }
body.theme-ocean .copyright a:hover { color: #00ddff; text-shadow: 0 0 8px #00ddff; }
body.theme-ocean .bubble { background: radial-gradient(circle at 30% 30%, rgba(0,200,255,0.4), rgba(0,100,150,0.2)); box-shadow: 0 0 25px rgba(0,150,255,0.4); }
body.theme-ocean .divider-line { background: linear-gradient(90deg, transparent, #00ddff, transparent); opacity: 0.4; }
body.theme-ocean .divider-icon { color: #00ddff; }

/* ==================== 主题7: 翠绿森林 (森林绿色系) ==================== */
body.theme-forest {
  background: linear-gradient(145deg, #e8f5e9 0%, #c8e6c9 30%, #a5d6a7 100%);
}
body.theme-forest::before {
  background: radial-gradient(circle at 30% 40%, rgba(50,150,50,0.15) 0%, rgba(100,180,100,0.1) 40%, transparent 70%);
}
body.theme-forest .hero-title { color: #2e7d32 !important; }
body.theme-forest .hero-sub { background: linear-gradient(135deg, #388e3c, #2e7d32); background-clip: text; -webkit-background-clip: text; color: transparent; }
body.theme-forest .avatar { box-shadow: 0 0 0 0 rgba(50,150,50,0.4), 0 15px 35px rgba(0,0,0,0.1); animation: avatarGlowForest 2.2s ease-in-out infinite, avatarFloat 3.5s ease-in-out infinite; }
@keyframes avatarGlowForest {
  0% { box-shadow: 0 0 0 0 rgba(50,150,50,0.3), 0 15px 30px rgba(0,0,0,0.05);}
  50% { box-shadow: 0 0 0 12px rgba(50,150,50,0.2), 0 20px 45px rgba(0,0,0,0.1);}
  100% { box-shadow: 0 0 0 0 rgba(50,150,50,0), 0 15px 30px rgba(0,0,0,0.05);}
}
body.theme-forest .btn-172 { background: linear-gradient(135deg, #1b5e20, #2e7d32, #43a047); background-size: 200% 100%; animation: btnFlow 3s ease infinite; }
body.theme-forest .btn-haoyi { background: linear-gradient(135deg, #43a047, #66bb6a, #81c784); background-size: 200% 100%; animation: btnFlow 3s ease infinite 0.5s; }
body.theme-forest .btn-flm { background: linear-gradient(135deg, #66bb6a, #81c784, #a5d6a7); background-size: 200% 100%; animation: btnFlow 3s ease infinite 0.7s; }
body.theme-forest .btn-haoka { background: linear-gradient(135deg, #ffa726, #ff9800, #43a047, #2e7d32); background-size: 300% 100%; animation: btnFlow 3s ease infinite 1s; }
body.theme-forest .worktime { background: rgba(200,230,200,0.5); border: 1px solid rgba(50,150,50,0.3); box-shadow: 0 15px 40px rgba(0,0,0,0.05); }
body.theme-forest .worktime:hover { background: rgba(200,230,200,0.7); box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 0 40px rgba(50,150,50,0.2); }
body.theme-forest .line1 { color: #2e7d32; }
body.theme-forest .line2 { color: #388e3c; }
body.theme-forest .line3 { color: #e91e63; }
body.theme-forest .line4 { color: #ff8f00; }
body.theme-forest .line5 { color: #43a047; }
body.theme-forest .copyright a { color: #2e7d32; }
body.theme-forest .copyright a:hover { color: #43a047; text-shadow: 0 0 8px #43a047; }
body.theme-forest .bubble { background: radial-gradient(circle at 30% 30%, rgba(100,200,100,0.5), rgba(50,150,50,0.3)); box-shadow: 0 0 20px rgba(50,150,50,0.3); }
body.theme-forest .divider-line { background: linear-gradient(90deg, transparent, #2e7d32, transparent); opacity: 0.4; }
body.theme-forest .divider-icon { color: #2e7d32; }

/* ==================== 主题8: 鎏金圣域 (金色系) ==================== */
body.theme-gold {
  background: linear-gradient(145deg, #fff9e6 0%, #fff4d4 30%, #ffefc8 100%);
}
body.theme-gold::before {
  background: radial-gradient(circle at 30% 40%, rgba(255,215,0,0.3) 0%, rgba(255,235,120,0.2) 40%, transparent 70%),
              repeating-linear-gradient(45deg, rgba(255,215,0,0.1) 0px, rgba(255,215,0,0.1) 2px, transparent 2px, transparent 8px);
}
body.theme-gold .hero-title { color: #d4af37 !important; text-shadow: 0 0 20px rgba(255,215,0,0.8), 0 0 5px rgba(255,200,0,0.5); animation: titleGlowGold 2s ease-in-out infinite; }
@keyframes titleGlowGold {
  0%, 100% { text-shadow: 0 0 10px #ffd700, 0 0 20px #ffaa00; }
  50% { text-shadow: 0 0 25px #ffd700, 0 0 35px #ffcc00; }
}
body.theme-gold .hero-sub { background: linear-gradient(135deg, #ffd700, #ffed4a, #ffcc00, #ffd700); background-clip: text; -webkit-background-clip: text; color: transparent; background-size: 300% 100%; animation: goldFlow 3s ease infinite; }
@keyframes goldFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
body.theme-gold .avatar { border-color: #ffd700; box-shadow: 0 0 0 0 rgba(255,215,0,0.8), 0 15px 35px rgba(0,0,0,0.1); animation: avatarGlowGold 2.2s ease-in-out infinite, avatarFloat 3.5s ease-in-out infinite; }
@keyframes avatarGlowGold {
  0% { box-shadow: 0 0 0 0 rgba(255,215,0,0.6), 0 15px 30px rgba(0,0,0,0.1);}
  50% { box-shadow: 0 0 0 15px rgba(255,215,0,0.35), 0 20px 45px rgba(0,0,0,0.15);}
  100% { box-shadow: 0 0 0 0 rgba(255,215,0,0), 0 15px 30px rgba(0,0,0,0.1);}
}
body.theme-gold .btn-172 { background: linear-gradient(135deg, #e6b800, #d4af37, #c9a03d, #b8860b); background-size: 200% 100%; animation: btnFlow 3s ease infinite; border: 1px solid rgba(255,215,0,0.3); }
body.theme-gold .btn-haoyi { background: linear-gradient(135deg, #f5c400, #e6b800, #d4af37, #c9a03d); background-size: 200% 100%; animation: btnFlow 3s ease infinite 0.4s; border: 1px solid rgba(255,215,0,0.3); }
body.theme-gold .btn-flm { background: linear-gradient(135deg, #ffd700, #ffed4a, #f5c400, #e6b800); background-size: 200% 100%; animation: btnFlow 3s ease infinite 0.7s; border: 1px solid rgba(255,215,0,0.3); }
body.theme-gold .btn-haoka { background: linear-gradient(135deg, #ffe066, #ffd700, #ffcc00, #e6b800, #d4af37); background-size: 300% 100%; animation: btnFlow 4s ease infinite 1s; border: 1px solid rgba(255,215,0,0.4); }
body.theme-gold .btn:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 12px 30px rgba(255,215,0,0.5); border-color: rgba(255,215,0,0.6); }
body.theme-gold .worktime { background: rgba(255,245,200,0.75); border: 1px solid rgba(255,215,0,0.5); box-shadow: 0 15px 40px rgba(0,0,0,0.05), 0 0 30px rgba(255,215,0,0.3); }
body.theme-gold .worktime:hover { background: rgba(255,245,200,0.9); box-shadow: 0 20px 50px rgba(0,0,0,0.1), 0 0 45px rgba(255,215,0,0.5); border-color: rgba(255,215,0,0.7); }
body.theme-gold .line1 { color: #d4af37; }
body.theme-gold .line2 { color: #e6b800; }
body.theme-gold .line3 { color: #ff8c42; }
body.theme-gold .line4 { color: #ffaa33; }
body.theme-gold .line5 { color: #ffd700; }
body.theme-gold .copyright a { color: #d4af37; }
body.theme-gold .copyright a:hover { color: #ffd700; text-shadow: 0 0 10px #ffd700; }
body.theme-gold .bubble { background: radial-gradient(circle at 30% 30%, rgba(255,215,0,0.6), rgba(230,184,0,0.3), rgba(255,215,0,0.1)); box-shadow: 0 0 25px rgba(255,215,0,0.5); }
body.theme-gold .divider-line { background: linear-gradient(90deg, transparent, #d4af37, transparent); opacity: 0.5; }
body.theme-gold .divider-icon { color: #d4af37; }

/* ==================== 移动端适配 ==================== */
@media (max-width: 600px) {
  .settings-btn { top: 10px; right: 10px; width: 40px; height: 40px; }
  .settings-btn img { width: 22px; height: 22px; }
  .theme-panel { width: 180px; top: 65px; }
  .theme-panel.open { right: 10px; }
  .theme-option { font-size: 12px; padding: 8px 12px; }
  .avatar { width: 100px; height: 100px; margin-bottom: 20px; }
  .hero-title { font-size: 1.7rem; letter-spacing: 2px; }
  .hero-sub { font-size: 0.8rem; }
  .nav { flex-direction: column; gap: 15px; margin: 15px 0 0; padding: 0 16px; }
  .btn { width: 260px; min-width: auto; padding: 10px 18px; font-size: 14px; }
  .worktime { font-size: 12px; padding: 15px 18px; margin-top: 25px; }
  .line1 { font-size: 1rem; }
  .category-divider { margin: 12px 0 12px; }
  .divider-icon { font-size: 10px; padding: 2px 10px; }
}
@media (max-width: 380px) {
  .hero-title { font-size: 1.4rem; }
  .btn { width: 240px; padding: 8px 14px; }
}