/**
 * 主程序现代化UI样式 - 参考灵魂伴侣风格
 * 完全本地化，适合中国大陆使用
 * 版本: 1.0.0
 */

/* ============================================
   主程序整体背景改造（深色渐变主题）
   ============================================ */

/* 改造整体背景 - 从浅色改为深色渐变 */
.xuanzhi-bg {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
  min-height: 100vh !important;
  position: relative !important;
}

/* 添加光晕动画背景（类似灵魂伴侣） */
.xuanzhi-bg::before {
  content: '' !important;
  position: fixed !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.15) 0%, transparent 70%) !important;
  animation: light-pulse 4s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

@keyframes light-pulse {
  0%, 100% { 
    opacity: 0.5; 
    transform: scale(1); 
  }
  50% { 
    opacity: 0.8; 
    transform: scale(1.1); 
  }
}

/* 移除原有的浅色背景 */
.xuanzhi-bg::after {
  display: none !important;
}

/* ============================================
   主程序卡片改造（毛玻璃效果）
   ============================================ */

/* 改造主卡片 - 添加毛玻璃效果和紫色渐变 */
.card-surface {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 
              0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
  transition: all 0.3s ease !important;
}

.card-surface:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-4px) scale(1.01) !important;
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
  border-color: rgba(102, 126, 234, 0.5) !important;
}

/* ============================================
   标题和文字改造（适配深色背景）
   ============================================ */

/* 改造主标题 - 使用白色/浅色文字 */
h1.calligraphy {
  color: #ffffff !important;
  text-shadow: 0 2px 20px rgba(102, 126, 234, 0.5),
               0 0 40px rgba(118, 75, 162, 0.3) !important;
}

h1.calligraphy span {
  color: #fbbf24 !important;
  text-shadow: 0 2px 20px rgba(251, 191, 36, 0.6),
               0 0 40px rgba(251, 191, 36, 0.4) !important;
}

/* 改造副标题和描述文字 */
.text-gray-600,
.text-gray-500 {
  color: rgba(255, 255, 255, 0.8) !important;
}

.text-[#946727],
.text-[#8b5e00],
.text-[#704f1b] {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 改造引用文字 */
.floating-quote,
.text-yellow-700 {
  color: #fbbf24 !important;
  text-shadow: 0 2px 10px rgba(251, 191, 36, 0.5) !important;
}

/* 改造小字提示 */
.text-xs {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================
   按钮改造（统一紫色渐变）
   ============================================ */

/* 改造主按钮 - 使用紫色渐变（类似灵魂伴侣） */
.btn-main {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-main::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  transition: left 0.5s ease !important;
}

.btn-main:hover::before {
  left: 100% !important;
}

.btn-main:hover,
.btn-main:focus {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.3) inset !important;
}

/* 改造操作按钮 - 使用蓝色渐变 */
.btn-action {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-action::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  transition: left 0.5s ease !important;
}

.btn-action:hover::before {
  left: 100% !important;
}

.btn-action:hover,
.btn-action:focus {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.3) inset !important;
}

/* 改造指引按钮 - 使用金色渐变（保留主题） */
#masterGuideBtn {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(251, 191, 36, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
  position: relative !important;
  overflow: hidden !important;
}

#masterGuideBtn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  transition: left 0.5s ease !important;
}

#masterGuideBtn:hover::before {
  left: 100% !important;
}

#masterGuideBtn:hover {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 32px rgba(251, 191, 36, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.3) inset !important;
}

/* ============================================
   输入框改造（半透明毛玻璃效果）
   ============================================ */

/* 改造选择框 */
select {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  transition: all 0.3s ease !important;
}

select:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(102, 126, 234, 0.5) !important;
}

select:focus {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: #667eea !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3) !important;
}

select option {
  background: #1a1a2e !important;
  color: white !important;
}

/* 改造文本输入框 */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  transition: all 0.3s ease !important;
}

input[type="text"]::placeholder,
input[type="number"]::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

input[type="text"]:hover,
input[type="number"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
textarea:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(102, 126, 234, 0.5) !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: #667eea !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3) !important;
  outline: none !important;
}

/* 改造追问输入框 */
#followupInput {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

#followupInput::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

#followupInput:focus {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: #667eea !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3) !important;
}

/* ============================================
   上传区域改造
   ============================================ */

/* 改造上传区域 */
#uploadArea {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 2px dashed rgba(255, 255, 255, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
}

#uploadArea:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(102, 126, 234, 0.6) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3) !important;
}

#uploadPrompt,
#uploadHints {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* ============================================
   聊天框改造（深色主题+光晕效果）
   ============================================ */

/* 改造聊天框容器 */
#chatBox {
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              inset 0 0 40px rgba(102, 126, 234, 0.1) !important;
  position: relative !important;
}

/* 添加光晕效果 */
#chatBox::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.2) 0%, transparent 70%) !important;
  animation: light-pulse 4s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* 改造用户消息气泡 */
#chatBox .bubble-user,
.bubble-user {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
  transition: all 0.3s ease !important;
}

#chatBox .bubble-user:hover,
.bubble-user:hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 8px 28px rgba(102, 126, 234, 0.5),
              0 0 0 1px rgba(255, 255, 255, 0.3) inset !important;
}

/* 改造AI消息气泡 */
#chatBox .bubble-ai,
#chatBox .bubble-assistant,
.bubble-assistant {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: white !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
  transition: all 0.3s ease !important;
}

#chatBox .bubble-ai:hover,
#chatBox .bubble-assistant:hover,
.bubble-assistant:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
}

/* ============================================
   角色标签改造（大师头像和用户头像）
   ============================================ */

/* 改造大师头像标签 - 深色主题 */
.role-assistant,
#chatBox .role-assistant,
.bubble .role-assistant {
  background: rgba(102, 126, 234, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(102, 126, 234, 0.5) !important;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3),
              0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s ease !important;
}

.role-assistant:hover,
#chatBox .role-assistant:hover,
.bubble .role-assistant:hover {
  background: rgba(102, 126, 234, 0.4) !important;
  border-color: rgba(102, 126, 234, 0.7) !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
  transform: translateY(-1px) scale(1.02) !important;
}

/* 改造用户头像标签 - 深色主题 */
.role-user,
#chatBox .role-user,
.bubble .role-user {
  background: rgba(69, 167, 242, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(69, 167, 242, 0.5) !important;
  box-shadow: 0 2px 8px rgba(69, 167, 242, 0.3),
              0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s ease !important;
}

.role-user:hover,
#chatBox .role-user:hover,
.bubble .role-user:hover {
  background: rgba(69, 167, 242, 0.4) !important;
  border-color: rgba(69, 167, 242, 0.7) !important;
  box-shadow: 0 4px 12px rgba(69, 167, 242, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
  transform: translateY(-1px) scale(1.02) !important;
}

/* 确保回复消息的文字颜色为白色 */
#chatBox .bubble-ai,
#chatBox .bubble-assistant,
.bubble-assistant,
.bubble-ai {
  color: rgba(255, 255, 255, 0.95) !important;
}

#chatBox .bubble-ai *,
#chatBox .bubble-assistant *,
.bubble-assistant *,
.bubble-ai * {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* 确保回复消息中的链接颜色 */
#chatBox .bubble-ai a,
#chatBox .bubble-assistant a,
.bubble-assistant a,
.bubble-ai a {
  color: rgba(167, 139, 250, 0.95) !important;
  text-decoration: underline !important;
}

#chatBox .bubble-ai a:hover,
#chatBox .bubble-assistant a:hover,
.bubble-assistant a:hover,
.bubble-ai a:hover {
  color: rgba(200, 181, 255, 1) !important;
}

/* ============================================
   结果区域改造
   ============================================ */

/* 改造结果区域标题 */
#resultBlock h2,
#resultBlock .text-xl {
  color: white !important;
  text-shadow: 0 2px 10px rgba(102, 126, 234, 0.5) !important;
}

#personalizedAddress {
  color: #fbbf24 !important;
  text-shadow: 0 2px 10px rgba(251, 191, 36, 0.5) !important;
}

/* 改造横幅 */
#countBanner {
  background: rgba(102, 126, 234, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3) !important;
}

/* ============================================
   个性化欢迎区域改造
   ============================================ */

/* 改造个性化欢迎区域 */
#personalizedWelcome {
  background: rgba(102, 126, 234, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3) !important;
}

#welcomeText {
  color: white !important;
  text-shadow: 0 2px 10px rgba(102, 126, 234, 0.5) !important;
}

/* ============================================
   引导区域改造
   ============================================ */

/* 改造用户引导区域 - 覆盖内联样式和Tailwind类 */
#userGuide {
  background: rgba(102, 126, 234, 0.2) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(102, 126, 234, 0.4) !important;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
  position: relative !important;
}

/* 添加光晕效果 */
#userGuide::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.15) 0%, transparent 70%) !important;
  animation: light-pulse 4s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: -1 !important;
  border-radius: inherit !important;
}

/* 覆盖Tailwind动态类名 - 使用属性选择器 */
#userGuide[class*="bg-"],
#userGuide[class*="f8e7c7"],
#userGuide[class*="f3ce98"] {
  background: rgba(102, 126, 234, 0.2) !important;
  border-color: rgba(102, 126, 234, 0.4) !important;
}

/* 覆盖所有可能的背景色类 */
#userGuide.bg-\[#f8e7c7dd\],
#userGuide[class*="bg-\[#f8e7c7"],
#userGuide[class*="bg-\[#f8e7c7dd"],
div#userGuide {
  background: rgba(102, 126, 234, 0.2) !important;
}

/* 覆盖所有可能的边框色类 */
#userGuide.border-\[#f3ce98\],
#userGuide[class*="border-\[#f3ce98"],
#userGuide[class*="border"][class*="f3ce98"],
div#userGuide.border {
  border-color: rgba(102, 126, 234, 0.4) !important;
}

/* 改造文字颜色 - 覆盖所有可能的文字颜色类 */
#hintText,
#smartHint,
#userGuide .text-\[#8b5e00\],
#userGuide .text-\[#946727\],
#userGuide [class*="text-\[#8b5e00"],
#userGuide [class*="text-\[#946727"],
#userGuide [class*="text-"][class*="8b5e00"],
#userGuide [class*="text-"][class*="946727"],
#userGuide div[class*="text-"],
div#userGuide div {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 2px 8px rgba(102, 126, 234, 0.5) !important;
}

/* 特别覆盖smartHint和hintText */
#smartHint,
#hintText {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 2px 8px rgba(102, 126, 234, 0.5) !important;
}

/* 覆盖按钮内联样式 */
#masterGuideBtn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

#masterGuideBtn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  transition: left 0.5s ease !important;
}

#masterGuideBtn:hover::before {
  left: 100% !important;
}

#masterGuideBtn:hover,
#masterGuideBtn:focus {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%) !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
}

/* 覆盖按钮的onmouseover/onmouseout内联样式 */
#masterGuideBtn[style*="background: linear-gradient(135deg, #d4af37"],
#masterGuideBtn[style*="background"],
button#masterGuideBtn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
}

/* 使用通配符选择器覆盖所有可能的样式 */
#userGuide * {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* 特别处理所有div和span */
#userGuide div,
#userGuide span {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 2px 8px rgba(102, 126, 234, 0.5) !important;
}

/* 强制覆盖所有可能的背景色 - 使用更具体的选择器 */
div#userGuide[class],
div#userGuide.w-full,
div#userGuide.mb-4,
div#userGuide.rounded-xl {
  background: rgba(102, 126, 234, 0.2) !important;
  border-color: rgba(102, 126, 234, 0.4) !important;
}

/* 覆盖所有包含特定颜色的类名 */
[class*="f8e7c7"],
[class*="f3ce98"] {
  background: rgba(102, 126, 234, 0.2) !important;
  border-color: rgba(102, 126, 234, 0.4) !important;
}

/* 覆盖所有包含特定文字颜色的类名 */
[class*="8b5e00"],
[class*="946727"] {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 2px 8px rgba(102, 126, 234, 0.5) !important;
}

/* ============================================
   强制覆盖userGuide背景 - 最高优先级
   ============================================ */
/* 使用最高优先级选择器，确保覆盖所有可能的样式 */
div#userGuide,
div#userGuide[class],
div#userGuide.w-full,
div#userGuide.mb-4,
div#userGuide.rounded-xl,
div#userGuide.shadow,
div#userGuide.px-3,
div#userGuide.py-2,
div#userGuide.aos-fade-in,
div#userGuide.flex,
div#userGuide.flex-col,
div#userGuide.items-center,
div#userGuide.relative,
div#userGuide.z-10 {
  background: rgba(102, 126, 234, 0.2) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(102, 126, 234, 0.4) !important;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
}

/* 覆盖所有可能的Tailwind类名组合 */
div#userGuide[class*="bg-"],
div#userGuide[class*="f8e7c7"],
div#userGuide[class*="f5e4ba"],
div#userGuide[class*="f3ce98"],
div#userGuide[class*="yellow"],
div#userGuide[class*="amber"] {
  background: rgba(102, 126, 234, 0.2) !important;
  border-color: rgba(102, 126, 234, 0.4) !important;
}

/* 覆盖所有内联样式中的黄色背景 */
div#userGuide[style*="background"],
div#userGuide[style*="bg-"],
div#userGuide[style*="f8e7c7"],
div#userGuide[style*="f5e4ba"],
div#userGuide[style*="yellow"],
div#userGuide[style*="amber"] {
  background: rgba(102, 126, 234, 0.2) !important;
}

/* 确保子元素也是深色主题 */
div#userGuide > div,
div#userGuide > span,
div#userGuide #smartHint,
div#userGuide #hintText {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 2px 8px rgba(102, 126, 234, 0.5) !important;
}

/* ============================================
   免责声明改造
   ============================================ */

/* 改造免责声明 */
div[style*="background:#fff3cd"] {
  background: rgba(251, 191, 36, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(251, 191, 36, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 4px 20px rgba(251, 191, 36, 0.2) !important;
}

div[style*="background:#fff3cd"] a {
  color: #fbbf24 !important;
  text-shadow: 0 2px 10px rgba(251, 191, 36, 0.5) !important;
}

/* ============================================
   标签和单选按钮改造
   ============================================ */

/* 改造标签文字 */
label {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 改造单选按钮和复选框 */
input[type="radio"],
input[type="checkbox"] {
  accent-color: #667eea !important;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3) !important;
}

/* ============================================
   Logo和图片改造
   ============================================ */

/* 改造Logo - 添加光晕效果 */
img[src*="logo.png"] {
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.4),
              0 0 40px rgba(118, 75, 162, 0.3) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  transition: all 0.3s ease !important;
}

img[src*="logo.png"]:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.6),
              0 0 60px rgba(118, 75, 162, 0.5) !important;
}

/* ============================================
   分隔线改造
   ============================================ */

/* 改造分隔线 */
.soft-divider {
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.3) 50%, 
    transparent 100%) !important;
  box-shadow: 0 0 10px rgba(102, 126, 234, 0.3) !important;
}

.divider-cloud {
  opacity: 0.6 !important;
  filter: brightness(0) invert(1) !important;
}

/* ============================================
   快速按钮改造
   ============================================ */

/* 改造快速按钮 */
.btn-quick {
  background: rgba(102, 126, 234, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-quick::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  transition: left 0.5s ease !important;
}

.btn-quick:hover::before {
  left: 100% !important;
}

.btn-quick:hover {
  background: rgba(102, 126, 234, 0.3) !important;
  border-color: rgba(102, 126, 234, 0.5) !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4) !important;
}

/* ============================================
   操作指引改造（深色主题+毛玻璃效果）
   ============================================ */

/* 改造指引遮罩层 */
.guide-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* 改造高亮元素 - 使用紫色光晕 */
.guide-highlight {
  box-shadow: 0 0 0 4px #667eea, 
              0 0 0 8px rgba(102, 126, 234, 0.3),
              0 0 20px rgba(102, 126, 234, 0.5) !important;
  border-radius: 12px !important;
  animation: guide-pulse-modern 2s infinite !important;
}

@keyframes guide-pulse-modern {
  0% { 
    box-shadow: 0 0 0 4px #667eea, 
                0 0 0 8px rgba(102, 126, 234, 0.3),
                0 0 20px rgba(102, 126, 234, 0.5);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 0 6px #667eea, 
                0 0 0 12px rgba(102, 126, 234, 0.4),
                0 0 30px rgba(102, 126, 234, 0.7);
    transform: scale(1.02);
  }
  100% { 
    box-shadow: 0 0 0 4px #667eea, 
                0 0 0 8px rgba(102, 126, 234, 0.3),
                0 0 20px rgba(102, 126, 234, 0.5);
    transform: scale(1);
  }
}

/* 改造工具提示框 - 毛玻璃效果+深色主题 */
.guide-tooltip {
  background: rgba(26, 26, 46, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(102, 126, 234, 0.5) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(102, 126, 234, 0.3) inset,
              0 0 40px rgba(102, 126, 234, 0.3) !important;
  position: relative !important;
}

/* 添加光晕效果 */
.guide-tooltip::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.2) 0%, transparent 70%) !important;
  animation: light-pulse 4s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* 改造工具提示框标题 */
.guide-tooltip h3 {
  color: white !important;
  text-shadow: 0 2px 10px rgba(102, 126, 234, 0.5) !important;
}

/* 改造工具提示框文字 */
.guide-tooltip p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 改造工具提示框按钮 */
.guide-tooltip .guide-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.guide-tooltip .guide-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  transition: left 0.5s ease !important;
}

.guide-tooltip .guide-btn:hover::before {
  left: 100% !important;
}

.guide-tooltip .guide-btn:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%) !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
}

/* 改造指引工具提示框 - 覆盖黄色背景 */
.guide-tooltip {
  background: rgba(26, 26, 46, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(102, 126, 234, 0.5) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(102, 126, 234, 0.3) inset,
              0 0 40px rgba(102, 126, 234, 0.3) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

/* 覆盖工具提示框内的文字颜色 */
.guide-tooltip h3,
.guide-tooltip p,
.guide-tooltip div,
.guide-tooltip span {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 2px 8px rgba(102, 126, 234, 0.4) !important;
}

/* 覆盖工具提示框内的按钮 */
.guide-tooltip button,
.guide-tooltip .guide-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

/* 改造指引弹窗（动态创建的） - 覆盖内联样式 */
.guide-modal > div,
div[style*="background: linear-gradient(135deg, #f8e7c7"],
div[style*="background: linear-gradient(135deg, #f5e4ba"],
div[id="guideModal"] > div,
div[style*="#f8e7c7"] {
  background: rgba(26, 26, 46, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(102, 126, 234, 0.5) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(102, 126, 234, 0.3) inset,
              0 0 40px rgba(102, 126, 234, 0.3) !important;
  color: white !important;
  position: relative !important;
}

/* 覆盖所有可能的弹窗容器 */
body > div[style*="position: fixed"][style*="background: rgba(0, 0, 0"] > div[style*="background: linear-gradient"],
body > div[style*="position: fixed"] > div[style*="background: linear-gradient(135deg, #f8e7c7"] {
  background: rgba(26, 26, 46, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(102, 126, 234, 0.5) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(102, 126, 234, 0.3) inset,
              0 0 40px rgba(102, 126, 234, 0.3) !important;
  color: white !important;
}

/* 添加光晕效果 */
.guide-modal > div::before,
div[style*="background: linear-gradient(135deg, #f8e7c7"]::before,
body > div[style*="position: fixed"] > div[style*="background: linear-gradient"]::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.2) 0%, transparent 70%) !important;
  animation: light-pulse 4s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: -1 !important;
  border-radius: inherit !important;
}

.guide-modal h2,
.guide-modal h3 {
  color: white !important;
  text-shadow: 0 2px 10px rgba(102, 126, 234, 0.5) !important;
}

.guide-modal p,
.guide-modal div[style*="color: #8b5e00"],
.guide-modal div[style*="color: #704f1b"],
.guide-modal div[style*="color: #5b461f"],
.guide-modal div[style*="color: #a67c00"],
.guide-modal h3[style*="color: #704f1b"],
.guide-modal span[style*="color: #a67c00"] {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 改造弹窗标题 */
.guide-modal h3[style*="color: #704f1b"] {
  color: white !important;
  text-shadow: 0 2px 10px rgba(102, 126, 234, 0.5) !important;
}

/* 改造弹窗内容区域 */
.guide-modal div[style*="color: #8b5e00"] strong,
.guide-modal div[style*="color: #a67c00"] strong {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 2px 8px rgba(102, 126, 234, 0.4) !important;
}

.guide-modal button[style*="background: linear-gradient(135deg, #d4af37"],
button[id="guideGotIt"],
button[style*="background: linear-gradient(135deg, #d4af37"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.guide-modal button[style*="background: linear-gradient(135deg, #d4af37"]::before,
button[id="guideGotIt"]::before,
button[style*="background: linear-gradient(135deg, #d4af37"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  transition: left 0.5s ease !important;
}

.guide-modal button[style*="background: linear-gradient(135deg, #d4af37"]:hover::before,
button[id="guideGotIt"]:hover::before,
button[style*="background: linear-gradient(135deg, #d4af37"]:hover::before {
  left: 100% !important;
}

.guide-modal button[style*="background: linear-gradient(135deg, #d4af37"]:hover,
button[id="guideGotIt"]:hover,
button[style*="background: linear-gradient(135deg, #d4af37"]:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%) !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
}

/* 改造关闭按钮 */
.guide-modal button[style*="position: absolute"],
.guide-modal button[onclick*="closest"] {
  color: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.3s ease !important;
}

.guide-modal button[style*="position: absolute"]:hover,
.guide-modal button[onclick*="closest"]:hover {
  color: white !important;
  transform: scale(1.2) rotate(90deg) !important;
}

/* ============================================
   昵称设置模态框改造（深色主题+毛玻璃效果）
   ============================================ */

/* 改造昵称模态框容器 */
.nickname-modal {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* 改造昵称模态框内容 */
.nickname-modal-content {
  background: rgba(26, 26, 46, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(102, 126, 234, 0.5) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(102, 126, 234, 0.3) inset,
              0 0 40px rgba(102, 126, 234, 0.3) !important;
  position: relative !important;
}

/* 添加光晕效果 */
.nickname-modal-content::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.2) 0%, transparent 70%) !important;
  animation: light-pulse 4s ease-in-out infinite !important;
  pointer-events: none !important;
  z-index: -1 !important;
  border-radius: inherit !important;
}

/* 改造标题 */
.nickname-modal-header h3 {
  color: white !important;
  text-shadow: 0 2px 10px rgba(102, 126, 234, 0.5) !important;
}

/* 改造副标题 */
.nickname-modal-header p {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 改造输入框 */
#nickname-input {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
}

#nickname-input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

#nickname-input:focus {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: #667eea !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3) !important;
  outline: none !important;
}

/* 改造推荐昵称标签 */
.suggestion-label {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 改造推荐昵称按钮 */
.suggestion-btn {
  background: rgba(102, 126, 234, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(102, 126, 234, 0.4) !important;
  color: white !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.suggestion-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  transition: left 0.5s ease !important;
}

.suggestion-btn:hover::before {
  left: 100% !important;
}

.suggestion-btn:hover {
  background: rgba(102, 126, 234, 0.3) !important;
  border-color: rgba(102, 126, 234, 0.6) !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4) !important;
}

/* 改造确定按钮 */
.confirm-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
  position: relative !important;
  overflow: hidden !important;
}

.confirm-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent) !important;
  transition: left 0.5s ease !important;
}

.confirm-btn:hover::before {
  left: 100% !important;
}

.confirm-btn:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%) !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6) !important;
}

/* 改造跳过按钮 */
.skip-btn {
  background: rgba(108, 117, 125, 0.3) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: white !important;
  transition: all 0.3s ease !important;
}

.skip-btn:hover {
  background: rgba(108, 117, 125, 0.4) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 4px 20px rgba(108, 117, 125, 0.4) !important;
}

/* ============================================
   响应式优化
   ============================================ */

@media (max-width: 768px) {
  .xuanzhi-bg {
    background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%) !important;
  }
  
  .card-surface {
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
  }
  
  #chatBox {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
  }
}

/* ============================================
   滚动条美化（深色主题）
   ============================================ */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(102, 126, 234, 0.5);
  border-radius: 10px;
  border: 2px solid rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(102, 126, 234, 0.7);
}

/* Firefox滚动条 */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(102, 126, 234, 0.5) rgba(0, 0, 0, 0.2);
}

/* ============================================
   日期选择器改造（深色主题）
   ============================================ */

/* 改造日期输入框 */
#unifiedDatePicker,
#solarDatePicker,
#lunarDatePicker {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(102, 126, 234, 0.4) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
  transition: all 0.3s ease !important;
}

#unifiedDatePicker:hover,
#solarDatePicker:hover,
#lunarDatePicker:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(102, 126, 234, 0.6) !important;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
  transform: translateY(-1px) !important;
}

#unifiedDatePicker:focus,
#solarDatePicker:focus,
#lunarDatePicker:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(102, 126, 234, 0.8) !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3),
              0 6px 20px rgba(102, 126, 234, 0.4) !important;
  outline: none !important;
}

/* 日期输入框内的文字和图标 */
#unifiedDatePicker span,
#solarDatePicker span,
#lunarDatePicker span,
#dateDisplay,
#solarDateDisplay,
#lunarDateDisplay {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* 改造日期选择器弹窗背景遮罩 */
#customCalendarModal,
#solarCalendarModal,
#lunarCalendarModal {
  background: rgba(0, 0, 0, 0.7) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* 改造日期选择器弹窗内容 */
#customCalendarModal > div,
#solarCalendarModal > div,
#lunarCalendarModal > div {
  background: rgba(26, 26, 46, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(102, 126, 234, 0.5) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

/* 弹窗标题 */
#customCalendarModal h3,
#solarCalendarModal h3,
#lunarCalendarModal h3 {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 2px 8px rgba(102, 126, 234, 0.5) !important;
}

/* 关闭按钮 */
#closeCustomCalendar,
#closeSolarCalendar,
#closeLunarCalendar {
  color: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.3s ease !important;
}

#closeCustomCalendar:hover,
#closeSolarCalendar:hover,
#closeLunarCalendar:hover {
  color: rgba(255, 255, 255, 1) !important;
  transform: scale(1.2) rotate(90deg) !important;
  text-shadow: 0 0 10px rgba(102, 126, 234, 0.8) !important;
}

/* 快速跳转区域 */
#customCalendarModal .flex.items-center.justify-center.mb-4,
#customCalendarModal .bg-gray-50 {
  background: rgba(102, 126, 234, 0.15) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(102, 126, 234, 0.3) !important;
  border-radius: 12px !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

#customCalendarModal .text-gray-600 {
  color: rgba(255, 255, 255, 0.8) !important;
}

/* 快速跳转选择器 */
#quickYear,
#quickMonth {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(102, 126, 234, 0.4) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

#quickYear:hover,
#quickMonth:hover,
#quickYear:focus,
#quickMonth:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(102, 126, 234, 0.6) !important;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.3) !important;
  outline: none !important;
}

#quickYear option,
#quickMonth option {
  background: rgba(26, 26, 46, 0.95) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

/* 快速跳转按钮 */
#quickJump {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
  transition: all 0.3s ease !important;
}

#quickJump:hover {
  background: linear-gradient(135deg, #5568d3 0%, #653a8f 100%) !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
}

/* 日历导航按钮 */
#prevMonth,
#nextMonth,
#prevYear,
#nextYear {
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(102, 126, 234, 0.2) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(102, 126, 234, 0.4) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  padding: 8px 12px !important;
}

#prevMonth:hover,
#nextMonth:hover,
#prevYear:hover,
#nextYear:hover {
  background: rgba(102, 126, 234, 0.3) !important;
  border-color: rgba(102, 126, 234, 0.6) !important;
  color: rgba(255, 255, 255, 1) !important;
  transform: scale(1.1) !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

/* 当前月份年份显示 */
#currentMonthYear {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 2px 8px rgba(102, 126, 234, 0.5) !important;
  font-weight: 600 !important;
}

/* 星期标题 */
#customCalendarModal .grid.grid-cols-7.gap-1.mb-2 > div {
  color: rgba(255, 255, 255, 0.8) !important;
  background: rgba(102, 126, 234, 0.1) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  font-weight: 600 !important;
}

/* 日历网格容器 */
#calendarGrid {
  background: rgba(102, 126, 234, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(102, 126, 234, 0.3) !important;
  border-radius: 12px !important;
  padding: 8px !important;
}

/* 日历日期单元格 - 通过CSS覆盖JavaScript内联样式 */
#calendarGrid > div {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(102, 126, 234, 0.3) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

/* 非当前月份的日期 */
#calendarGrid > div[style*="background: #f3f4f6"],
#calendarGrid > div[style*="background:#f3f4f6"] {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* 今天的日期 */
#calendarGrid > div[style*="background: #dbeafe"],
#calendarGrid > div[style*="background:#dbeafe"] {
  background: rgba(102, 126, 234, 0.3) !important;
  border: 2px solid rgba(102, 126, 234, 0.6) !important;
  color: rgba(255, 255, 255, 1) !important;
  font-weight: bold !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

/* 选中的日期 */
#calendarGrid > div[style*="background: #8b5e00"],
#calendarGrid > div[style*="background:#8b5e00"],
#calendarGrid > div[style*="background: rgb(139, 94, 0)"],
#calendarGrid > div[style*="background:rgb(139, 94, 0)"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border: 2px solid rgba(102, 126, 234, 0.8) !important;
  color: white !important;
  font-weight: bold !important;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6),
              0 0 0 2px rgba(255, 255, 255, 0.2) inset !important;
  transform: scale(1.05) !important;
}

/* 日期单元格悬停效果 */
#calendarGrid > div:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(102, 126, 234, 0.6) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

/* 日期单元格内的文字 */
#calendarGrid > div > div {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 农历文字颜色 */
#calendarGrid > div > div[id^="lunar-"] {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.625rem !important;
}

/* 底部按钮 */
#clearDate {
  color: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.3s ease !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
}

#clearDate:hover {
  color: rgba(255, 255, 255, 1) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-2px) !important;
}

#confirmDate {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
  transition: all 0.3s ease !important;
  padding: 8px 24px !important;
  border-radius: 8px !important;
}

#confirmDate:hover {
  background: linear-gradient(135deg, #5568d3 0%, #653a8f 100%) !important;
  transform: translateY(-2px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
}

/* 出生日期标签 */
#birthInputBlock label {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 2px 8px rgba(102, 126, 234, 0.5) !important;
}

/* 出生时间和地点输入框 */
#birthTime,
#birthPlace {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(102, 126, 234, 0.4) !important;
  color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
  transition: all 0.3s ease !important;
}

#birthTime:hover,
#birthPlace:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(102, 126, 234, 0.6) !important;
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
}

#birthTime:focus,
#birthPlace:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(102, 126, 234, 0.8) !important;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.3),
              0 6px 20px rgba(102, 126, 234, 0.4) !important;
  outline: none !important;
}

#birthTime::placeholder,
#birthPlace::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}