/* ==========================================
   西浦交友 - 专属配色主题系统 (头部粉色版)
   ========================================== */

/* 1. 定义核心颜料 (CSS 变量) */
:root {
  --brand-color: #845EC2;      /* 主题紫 */
  --accent-color: #00C9A7;     /* 强调青 */
  
  /* 【还原】：还原柔和米黄色作为全局大背景 */
  --bg-color: #FEFEDF;         
  
  /* 【定义】：亮粉色现在专门用作网页头部横幅 */
  --header-bg-color: #F3C5FF;   
  
  /* 辅助颜色，确保卡片本身清晰 */
  --text-primary: #333;
  --text-secondary: #666;
  --card-bg: white;
}

/* 2. 应用基础背景色 (现在是干净的米黄色底色) */
body {
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* ==========================================
   【核心新增】：定义头部横幅区域
   ========================================== */
.match-header-bg {
  background-color: var(--header-bg-color); /* 粉色背景 */
  padding: 80px 0 120px 0; /* 增加上下 padding，尤其是底部，为卡片留下悬浮空间 */
  color: var(--brand-color); /* 头部文字用紫色 */
}

/* ==========================================
   【核心修改】：让卡片“悬浮”起来
   ========================================= */
.match-card {
  max-width: 450px;
  margin: -80px auto 60px auto; /* 关键：负的 top-margin 让卡片“上浮”覆盖在粉色头部上 */
  padding: 40px;
  border-radius: 20px;
  background-color: var(--card-bg);
  
  /* 优雅的、带有紫色调的悬浮阴影，增强立体感 */
  box-shadow: 0 20px 50px rgba(132, 94, 194, 0.15); 
  border: 1px solid rgba(132, 94, 194, 0.05);
  
  /* 确保卡片在阴影之上 */
  position: relative;
  z-index: 2;
}

/* 4. 定义文字与 Badge 样式 (配合粉色背景微调) */
.text-brand { color: var(--brand-color) !important; }
.text-accent { color: var(--accent-color) !important; }

/* 【修改】：配合粉色背景，Badge 改用纯白背景，紫色文字 */
.badge-on-pink {
  background-color: white !important; 
  color: var(--brand-color) !important;
}

/* 5. 焦点样式 (紫色保持) */
.form-control:focus {
  border-color: var(--brand-color) !important; 
  box-shadow: 0 0 0 0.25rem rgba(132, 94, 194, 0.25) !important; 
}

/* 6. 按钮样式 (保持不变) */
.btn-brand {
  background-color: var(--brand-color);
  color: white;
  border: none;
  transition: all 0.3s ease;
}
.btn-brand:hover {
  background-color: #6a46a6;
  color: white;
  transform: translateY(-2px);
}
.btn-accent {
  background-color: var(--accent-color);
  color: white;
  border: none;
}
.btn-accent:hover {
  background-color: #00b393;
  color: white;
}