/* 
 * 黑夜模式玻璃容器显示修复
 * 确保开头两个模板底框在黑夜模式下清晰可见
 */

/* 黑夜模式玻璃容器 - 恢复JSON纹理融合效果 */
body:not(.light-theme) .glass-container {
  background: 
    rgba(0, 0, 0, 0.8),
    linear-gradient(135deg, 
      rgba(0, 255, 255, 0.08) 0%,     /* 青色纹理 */
      transparent 25%, 
      rgba(255, 0, 255, 0.06) 50%,    /* 洋红色纹理 */
      transparent 75%, 
      rgba(255, 255, 0, 0.08) 100%    /* 黄色纹理 */
    ),
    radial-gradient(ellipse at 30% 70%, 
      rgba(0, 255, 255, 0.05) 0%, 
      transparent 60%
    ),
    conic-gradient(from 45deg at 80% 20%, 
      rgba(255, 165, 0, 0.04) 0deg,
      transparent 120deg,
      rgba(0, 0, 255, 0.04) 240deg,
      transparent 360deg
    ) !important;
  backdrop-filter: blur(8px) saturate(150%) contrast(110%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(150%) contrast(110%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 
    0 4px 20px 0 rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(0, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
  position: relative !important;
  overflow: hidden !important;
  animation: textureFlow 20s ease infinite !important;
  background-size: 300% 300%, 400% 400%, 200% 200%, 250% 250% !important;
}

/* 导航栏和页头 - 增强JSON纹理效果 */
body:not(.light-theme) .nav.glass-container,
body:not(.light-theme) .header-intro.glass-container {
  background: 
    rgba(0, 0, 0, 0.85),
    linear-gradient(125deg, 
      rgba(0, 255, 255, 0.12) 0%,     /* 青色主导 */
      rgba(255, 0, 255, 0.08) 25%,    /* 洋红色 */
      rgba(255, 255, 0, 0.10) 50%,    /* 黄色 */
      rgba(255, 165, 0, 0.08) 75%,    /* 橙色 */
      rgba(0, 0, 255, 0.10) 100%      /* 蓝色 */
    ),
    radial-gradient(ellipse at 20% 80%, 
      rgba(0, 255, 255, 0.08) 0%, 
      transparent 50%
    ),
    radial-gradient(ellipse at 80% 20%, 
      rgba(255, 0, 255, 0.06) 0%, 
      transparent 50%
    ) !important;
  backdrop-filter: blur(10px) saturate(180%) contrast(120%) brightness(110%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(180%) contrast(120%) brightness(110%) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 
    0 8px 32px 0 rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 255, 255, 0.2),
    0 0 20px rgba(255, 255, 255, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3) !important;
  border-radius: 12px !important;
  position: relative;
  animation: primaryTextureFlow 15s ease infinite !important;
  background-size: 400% 400%, 300% 300%, 200% 200%, 250% 250% !important;
}

/* 统一内边距和间距规范 - 与亮色主题保持一致 */
body:not(.light-theme) .nav.glass-container {
  padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 3) !important;
  margin-bottom: calc(var(--spacing-unit) * 6) !important;
}

body:not(.light-theme) .header-intro.glass-container {
  padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 3) !important;
  margin-bottom: calc(var(--spacing-unit) * 4) !important;
  max-width: 600px !important;
}

body:not(.light-theme) .subscribe.glass-container {
  padding: calc(var(--spacing-unit) * 4) !important;
  margin-top: calc(var(--spacing-unit) * 10) !important;
}

body:not(.light-theme) .status.glass-container {
  padding: calc(var(--spacing-unit) * 2) !important;
  margin-bottom: calc(var(--spacing-unit) * 8) !important;
}

/* 统一字体大小规范 */
body:not(.light-theme) .header-intro p {
  font-size: 1.1rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

body:not(.light-theme) .card-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin-bottom: calc(var(--spacing-unit) * 2) !important;
}

body:not(.light-theme) .subscribe-title {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin-bottom: calc(var(--spacing-unit) * 2) !important;
}

/* 黑夜模式边缘光效 - 恢复JSON纹理动画效果 */
body:not(.light-theme) .edge-glow {
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 0.15),
    0 0 30px rgba(0, 255, 255, 0.1),
    0 0 40px rgba(255, 0, 255, 0.08) !important;
  transition: all 0.3s ease !important;
  animation: subtleGlow 8s ease-in-out infinite !important;
}

body:not(.light-theme) .edge-glow:hover {
  box-shadow: 
    0 0 30px rgba(255, 255, 255, 0.25),
    0 0 50px rgba(0, 255, 255, 0.2),
    0 0 70px rgba(255, 0, 255, 0.15),
    0 0 20px rgba(255, 255, 0, 0.1) !important;
  animation: intenseGlow 2s ease-in-out infinite !important;
}

/* JSON纹理动画关键帧 */
@keyframes subtleGlow {
  0%, 100% { 
    box-shadow: 
      0 0 20px rgba(255, 255, 255, 0.15),
      0 0 30px rgba(0, 255, 255, 0.1),
      0 0 40px rgba(255, 0, 255, 0.08);
  }
  50% { 
    box-shadow: 
      0 0 25px rgba(255, 255, 255, 0.2),
      0 0 35px rgba(0, 255, 255, 0.15),
      0 0 45px rgba(255, 0, 255, 0.12);
  }
}

@keyframes intenseGlow {
  0%, 100% { 
    box-shadow: 
      0 0 30px rgba(255, 255, 255, 0.25),
      0 0 50px rgba(0, 255, 255, 0.2),
      0 0 70px rgba(255, 0, 255, 0.15),
      0 0 20px rgba(255, 255, 0, 0.1);
  }
  50% { 
    box-shadow: 
      0 0 40px rgba(255, 255, 255, 0.35),
      0 0 60px rgba(0, 255, 255, 0.3),
      0 0 80px rgba(255, 0, 255, 0.25),
      0 0 30px rgba(255, 255, 0, 0.2);
  }
}

/* 黑夜模式卡片样式 - 恢复JSON纹理效果 */
body:not(.light-theme) .card {
  background: 
    rgba(0, 0, 0, 0.75),
    linear-gradient(120deg, 
      rgba(0, 255, 255, 0.06) 0%,     /* 青色纹理 */
      transparent 20%, 
      rgba(255, 0, 255, 0.05) 40%,    /* 洋红色纹理 */
      transparent 60%, 
      rgba(255, 255, 0, 0.06) 80%,    /* 黄色纹理 */
      transparent 100%
    ),
    radial-gradient(circle at 70% 30%, 
      rgba(255, 165, 0, 0.04) 0%, 
      transparent 50%
    ),
    conic-gradient(from 0deg at 30% 70%, 
      rgba(0, 0, 255, 0.03) 0deg,
      transparent 90deg,
      rgba(255, 0, 128, 0.04) 180deg,
      transparent 270deg
    ) !important;
  backdrop-filter: blur(6px) saturate(140%) contrast(105%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(140%) contrast(105%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  animation: cardTextureFlow 25s ease infinite !important;
  background-size: 250% 250%, 300% 300%, 200% 200%, 180% 180% !important;
}

body:not(.light-theme) .card:hover {
  background: 
    rgba(0, 0, 0, 0.85),
    linear-gradient(120deg, 
      rgba(0, 255, 255, 0.12) 0%,     /* 增强青色 */
      transparent 20%, 
      rgba(255, 0, 255, 0.10) 40%,    /* 增强洋红色 */
      transparent 60%, 
      rgba(255, 255, 0, 0.12) 80%,    /* 增强黄色 */
      transparent 100%
    ),
    radial-gradient(circle at 70% 30%, 
      rgba(255, 165, 0, 0.08) 0%, 
      transparent 50%
    ),
    conic-gradient(from 0deg at 30% 70%, 
      rgba(0, 0, 255, 0.06) 0deg,
      transparent 90deg,
      rgba(255, 0, 128, 0.08) 180deg,
      transparent 270deg
    ) !important;
  box-shadow: 
    0 10px 35px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(0, 255, 255, 0.2),
    0 0 50px rgba(255, 0, 255, 0.15),
    0 0 0 1px rgba(0, 255, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(0, 255, 255, 0.4) !important;
  transform: translateY(-8px) scale(1.03) !important;
  animation: cardHoverGlow 3s ease infinite !important;
}

@keyframes cardTextureFlow {
  0% { 
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    filter: hue-rotate(0deg) brightness(100%);
  }
  25% { 
    background-position: 100% 25%, 25% 75%, 50% 50%, 30% 70%;
    filter: hue-rotate(3deg) brightness(102%);
  }
  50% { 
    background-position: 50% 75%, 75% 25%, 100% 0%, 70% 30%;
    filter: hue-rotate(6deg) brightness(104%);
  }
  75% { 
    background-position: 25% 100%, 100% 50%, 25% 75%, 40% 60%;
    filter: hue-rotate(3deg) brightness(102%);
  }
  100% { 
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    filter: hue-rotate(0deg) brightness(100%);
  }
}

@keyframes cardHoverGlow {
  0%, 100% { 
    box-shadow: 
      0 10px 35px rgba(0, 0, 0, 0.4),
      0 0 30px rgba(0, 255, 255, 0.2),
      0 0 50px rgba(255, 0, 255, 0.15),
      0 0 0 1px rgba(0, 255, 255, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  50% { 
    box-shadow: 
      0 15px 45px rgba(0, 0, 0, 0.5),
      0 0 40px rgba(0, 255, 255, 0.3),
      0 0 60px rgba(255, 0, 255, 0.25),
      0 0 0 1px rgba(0, 255, 255, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}

/* 黑夜模式按钮样式 - 恢复JSON纹理效果 */
body:not(.light-theme) .subscribe-button,
body:not(.light-theme) .form-submit,
body:not(.light-theme) .resume-download {
  background: 
    linear-gradient(135deg, #00ccff 0%, #0099cc 100%),
    linear-gradient(45deg, 
      rgba(0, 255, 255, 0.1) 0%, 
      transparent 25%, 
      rgba(255, 0, 255, 0.08) 50%, 
      transparent 75%, 
      rgba(255, 255, 0, 0.1) 100%
    ) !important;
  background-size: 100% 100%, 200% 200% !important;
  color: #000000 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 255, 255, 0.3) !important;
  box-shadow: 
    0 4px 15px rgba(0, 204, 255, 0.3),
    0 0 20px rgba(0, 255, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
  animation: buttonGlow 6s ease-in-out infinite !important;
}

body:not(.light-theme) .subscribe-button:hover,
body:not(.light-theme) .form-submit:hover,
body:not(.light-theme) .resume-download:hover {
  background: 
    linear-gradient(135deg, #00ddff 0%, #00aadd 100%),
    linear-gradient(45deg, 
      rgba(0, 255, 255, 0.2) 0%, 
      transparent 25%, 
      rgba(255, 0, 255, 0.15) 50%, 
      transparent 75%, 
      rgba(255, 255, 0, 0.2) 100%
    ) !important;
  box-shadow: 
    0 6px 25px rgba(0, 204, 255, 0.5),
    0 0 30px rgba(0, 255, 255, 0.4),
    0 0 50px rgba(255, 0, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-2px) scale(1.05) !important;
  animation: buttonHoverPulse 1.5s ease infinite !important;
}

@keyframes buttonGlow {
  0%, 100% { 
    background-position: 0% 0%, 0% 0%;
    box-shadow: 
      0 4px 15px rgba(0, 204, 255, 0.3),
      0 0 20px rgba(0, 255, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  50% { 
    background-position: 0% 0%, 100% 100%;
    box-shadow: 
      0 4px 20px rgba(0, 204, 255, 0.4),
      0 0 25px rgba(0, 255, 255, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
}

@keyframes buttonHoverPulse {
  0%, 100% { 
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
      0 6px 25px rgba(0, 204, 255, 0.5),
      0 0 30px rgba(0, 255, 255, 0.4),
      0 0 50px rgba(255, 0, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  50% { 
    transform: translateY(-3px) scale(1.06);
    box-shadow: 
      0 8px 35px rgba(0, 204, 255, 0.6),
      0 0 40px rgba(0, 255, 255, 0.5),
      0 0 60px rgba(255, 0, 255, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
}

/* 黑夜模式表单输入框样式 */
body:not(.light-theme) .subscribe-input,
body:not(.light-theme) .form-input,
body:not(.light-theme) .form-textarea {
  background: rgba(0, 0, 0, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  color: #ffffff !important;
}

body:not(.light-theme) .subscribe-input:focus,
body:not(.light-theme) .form-input:focus,
body:not(.light-theme) .form-textarea:focus {
  border-color: rgba(0, 255, 255, 0.5) !important;
  outline: none !important;
}

/* 确保内容在强化背景下可读 */
body:not(.light-theme) .glass-container * {
  position: relative;
  z-index: 1;
}

/* 针对有视频背景时的特殊处理 - 保持一致的格式规范 */
body.has-video-bg:not(.light-theme) .glass-container {
  background: rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.4) !important;
  border-radius: 12px !important;
}

/* 为玻璃容器添加纹理动画 */
@keyframes textureFlow {
  0% { 
    background-position: 0% 50%, 0% 0%, 0% 0%, 0% 0%;
    filter: hue-rotate(0deg);
  }
  25% { 
    background-position: 50% 100%, 100% 50%, 30% 70%, 25% 75%;
    filter: hue-rotate(5deg);
  }
  50% { 
    background-position: 100% 0%, 50% 100%, 70% 30%, 75% 25%;
    filter: hue-rotate(10deg);
  }
  75% { 
    background-position: 50% 50%, 25% 75%, 40% 60%, 60% 40%;
    filter: hue-rotate(5deg);
  }
  100% { 
    background-position: 0% 50%, 0% 0%, 0% 0%, 0% 0%;
    filter: hue-rotate(0deg);
  }
}

/* 导航栏和页头特殊动画 */
@keyframes primaryTextureFlow {
  0% { 
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    filter: brightness(100%) saturate(150%);
  }
  33% { 
    background-position: 100% 50%, 30% 70%, 50% 25%, 70% 30%;
    filter: brightness(110%) saturate(160%);
  }
  66% { 
    background-position: 50% 100%, 70% 30%, 25% 75%, 30% 70%;
    filter: brightness(105%) saturate(155%);
  }
  100% { 
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    filter: brightness(100%) saturate(150%);
  }
}