/**
 * Bootstrap 5 自定义主题 - 沉思波社群多彩浅色系
 * 基于 Bootstrap 5.3.3 的自定义配色方案
 */

/* ========== CSS 变量覆盖 ========== */
:root {
  /* 主色调 - 浅蓝色 */
  --bs-primary: #4a9eff;
  --bs-primary-rgb: 74, 158, 255;
  --bs-primary-hover: #3080f0;
  
  /* 辅助色 - 多彩浅色系 */
  --bs-secondary: #6c757d;
  --bs-success: #2ecc71;
  --bs-info: #3498db;
  --bs-warning: #f39c12;
  --bs-danger: #e74c3c;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  
  /* 自定义渐变色 - 五大板块主题色 */
  --color-amber: #f59e0b;
  --color-amber-light: #fef3c7;
  --color-amber-gradient: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
  
  --color-emerald: #10b981;
  --color-emerald-light: #d1fae5;
  --color-emerald-gradient: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  
  --color-blue: #3b82f6;
  --color-blue-light: #dbeafe;
  --color-blue-gradient: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  
  --color-purple: #8b5cf6;
  --color-purple-light: #e9d5ff;
  --color-purple-gradient: linear-gradient(135deg, #e9d5ff 0%, #d8b4fe 100%);
  
  --color-pink: #ec4899;
  --color-pink-light: #fbcfe8;
  --color-pink-gradient: linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 100%);
  
  --color-coral: #ff5a3c;
  --color-coral-light: #fff0ed;
  --color-coral-gradient: linear-gradient(135deg, #fff0ed 0%, #ffd6d0 100%);
  
  --color-sky: #2d8cff;
  --color-sky-light: #e8f4ff;
  --color-sky-gradient: linear-gradient(135deg, #e8f4ff 0%, #cce5ff 100%);
  
  --color-mint: #00c853;
  --color-mint-light: #e8fff2;
  --color-mint-gradient: linear-gradient(135deg, #e8fff2 0%, #c8ffe0 100%);
  
  --color-peach: #ff7043;
  --color-peach-light: #fff2eb;
  --color-peach-gradient: linear-gradient(135deg, #fff2eb 0%, #ffdcc8 100%);
  
  --color-teal: #00bfa5;
  --color-teal-light: #e8fffa;
  --color-teal-gradient: linear-gradient(135deg, #e8fffa 0%, #c8fff2 100%);
  
  --color-rose: #ff4081;
  --color-rose-light: #fff0f4;
  --color-rose-gradient: linear-gradient(135deg, #fff0f4 0%, #ffd6e0 100%);
  
  /* 字体 */
  --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  
  /* 圆角 */
  --bs-border-radius: 0.5rem;
  --bs-border-radius-sm: 0.375rem;
  --bs-border-radius-lg: 0.75rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 1.5rem;
  
  /* 阴影 */
  --bs-box-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.02);
  --bs-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  --bs-box-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.06);
  --bs-box-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.08);
}

/* ========== 全局样式 ========== */
body {
  font-family: var(--bs-font-sans-serif);
  background-color: #f5f7fa;
  color: #333;
}

/* ========== 按钮样式 ========== */
.btn-primary {
  --bs-btn-bg: #ffffff;
  --bs-btn-border-color: #ffffff;
  --bs-btn-color: #333333;
  --bs-btn-hover-bg: #f5f5f5;
  --bs-btn-hover-border-color: #f5f5f5;
  --bs-btn-hover-color: #333333;
  --bs-btn-active-bg: #f5f5f5;
  --bs-btn-active-border-color: #f5f5f5;
  --bs-btn-active-color: #333333;
  --bs-btn-disabled-bg: #ffffff;
  --bs-btn-disabled-border-color: #ffffff;
  --bs-btn-disabled-color: #333333;
  border-radius: var(--bs-border-radius-lg);
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--bs-primary-hover);
  --bs-btn-active-border-color: var(--bs-primary-hover);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
  border-radius: var(--bs-border-radius-lg);
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(74, 158, 255, 0.2);
}

/* ========== 卡片样式 ========== */
.card {
  border: none;
  border-radius: var(--bs-border-radius-xl);
  box-shadow: var(--bs-box-shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  background: #fff;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bs-box-shadow-lg);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-weight: 600;
  padding: 1rem 1.25rem;
}

.card-body {
  padding: 1.25rem;
}

.card-img-top {
  border-radius: var(--bs-border-radius-xl) var(--bs-border-radius-xl) 0 0;
}

/* ========== 多彩卡片变体 ========== */
.card-amber {
  background: var(--color-amber-gradient);
  border: 1px solid rgba(245, 158, 11, 0.1);
}

.card-emerald {
  background: var(--color-emerald-gradient);
  border: 1px solid rgba(16, 185, 129, 0.1);
}

.card-blue {
  background: var(--color-blue-gradient);
  border: 1px solid rgba(59, 130, 246, 0.1);
}

.card-purple {
  background: var(--color-purple-gradient);
  border: 1px solid rgba(139, 92, 246, 0.1);
}

.card-pink {
  background: var(--color-pink-gradient);
  border: 1px solid rgba(236, 72, 153, 0.1);
}

.card-coral {
  background: var(--color-coral-gradient);
  border: 1px solid rgba(255, 90, 60, 0.1);
}

.card-sky {
  background: var(--color-sky-gradient);
  border: 1px solid rgba(45, 140, 255, 0.1);
}

.card-mint {
  background: var(--color-mint-gradient);
  border: 1px solid rgba(0, 200, 83, 0.1);
}

.card-peach {
  background: var(--color-peach-gradient);
  border: 1px solid rgba(255, 112, 67, 0.1);
}

.card-teal {
  background: var(--color-teal-gradient);
  border: 1px solid rgba(0, 191, 165, 0.1);
}

.card-rose {
  background: var(--color-rose-gradient);
  border: 1px solid rgba(255, 64, 129, 0.1);
}

/* ========== 徽章样式 ========== */
.badge {
  border-radius: var(--bs-border-radius-sm);
  font-weight: 500;
  padding: 0.35em 0.65em;
}

.badge-primary {
  --bs-badge-bg: var(--bs-primary);
  --bs-badge-color: #fff;
}

/* ========== 导航样式 ========== */
.nav-pills .nav-link {
  border-radius: var(--bs-border-radius-lg);
  padding: 0.5rem 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.nav-pills .nav-link.active {
  background-color: var(--bs-primary);
  box-shadow: 0 4px 12px rgba(74, 158, 255, 0.3);
}

.nav-pills .nav-link:hover:not(.active) {
  background-color: rgba(74, 158, 255, 0.1);
  color: var(--bs-primary);
}

/* ========== 表单样式 ========== */
.form-control {
  border-radius: var(--bs-border-radius-lg);
  border: 1px solid #e0e0e0;
  padding: 0.6rem 1rem;
  transition: all 0.3s ease;
}

.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(74, 158, 255, 0.15);
}

.form-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #555;
}

/* ========== 响应式工具 ========== */
@media (max-width: 768px) {
  .card {
    border-radius: var(--bs-border-radius-lg);
  }
  
  .btn {
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
  }
}

/* ========== 动画效果 ========== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease forwards;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ========== 毛玻璃效果 ========== */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ========== 渐变背景 ========== */
.bg-gradient-primary {
  background: linear-gradient(135deg, #4a9eff 0%, #3080f0 100%);
}

.bg-gradient-success {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
}

.bg-gradient-warning {
  background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
}

.bg-gradient-danger {
  background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
}

/* ========== 文字渐变 ========== */
.text-gradient {
  background: linear-gradient(135deg, #4a9eff 0%, #3080f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========== 阴影增强 ========== */
.shadow-hover {
  transition: box-shadow 0.3s ease;
}

.shadow-hover:hover {
  box-shadow: var(--bs-box-shadow-lg) !important;
}

/* ========== 圆角工具 ========== */
.rounded-4 {
  border-radius: 1.5rem !important;
}

.rounded-5 {
  border-radius: 2rem !important;
}

/* ========== 间距工具 ========== */
.gap-4 {
  gap: 1.5rem !important;
}

.gap-5 {
  gap: 2rem !important;
}

/* ========== 字体大小 ========== */
.fs-7 {
  font-size: 0.875rem !important;
}

.fs-8 {
  font-size: 0.75rem !important;
}