/* ============================================================
   百泽趣味测试 - 全局样式 main.css
   设计系统：淡紫主色 + 测试板块辅助色
   --------------------------------------------------------- */

/* ---------- 1. 主题变量 ---------- */
:root {
  /* 主色调（淡紫渐变） */
  --brand-50:  #f5f3ff;
  --brand-100: #ede9fe;
  --brand-200: #ddd6fe;
  --brand-300: #c4b5fd;
  --brand-400: #a78bfa;
  --brand-500: #8b5cf6;
  --brand-600: #7c3aed;
  --brand-700: #6d28d9;

  /* MBTI 冷色系（靛蓝紫） */
  --mbti-from: #6366f1;
  --mbti-to:   #8b5cf6;

  /* 星座梦幻色系（粉紫蓝渐变） */
  --star-from: #ec4899;
  --star-to:   #8b5cf6;

  /* 恋爱暖色系（粉橙） */
  --love-from: #fb7185;
  --love-to:   #f472b6;

  /* 中性色 */
  --ink:       #1f2937;
  --ink-soft:  #4b5563;
  --ink-mute:  #9ca3af;
  --line:      #e5e7eb;

  /* 圆角 / 阴影统一规范 */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --shadow-card: 0 10px 40px -10px rgba(124, 58, 237, 0.18);
  --shadow-soft: 0 4px 20px -4px rgba(0,0,0,0.06);
}

/* ---------- 2. 全局基础 ---------- */
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: linear-gradient(135deg, #fdf4ff 0%, #f5f3ff 50%, #eff6ff 100%);
  min-height: 100vh;
}

/* ---------- 3. 滚动条美化（PC） ---------- */
@media (min-width: 768px) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--brand-300);
    border-radius: 4px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--brand-500); }
}

/* ---------- 4. 通用组件 ---------- */
/* 玻璃拟态卡片 */
.bz-glass {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-card);
}

/* 主按钮 */
.bz-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .85rem 1.75rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: .95rem;
  transition: all .25s ease;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.bz-btn-primary {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: white;
  box-shadow: 0 8px 24px -8px rgba(124,58,237,.5);
}
.bz-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(124,58,237,.6); }
.bz-btn-primary:active { transform: translateY(0); }

.bz-btn-ghost {
  background: white;
  color: var(--brand-700);
  border: 2px solid var(--brand-200);
}
.bz-btn-ghost:hover { background: var(--brand-50); border-color: var(--brand-400); }

/* 测试板块专属按钮 */
.bz-btn-mbti  { background: linear-gradient(135deg, var(--mbti-from), var(--mbti-to)); color:#fff; }
.bz-btn-star  { background: linear-gradient(135deg, var(--star-from), var(--star-to)); color:#fff; }
.bz-btn-love  { background: linear-gradient(135deg, var(--love-from), var(--love-to)); color:#fff; }

/* 板块卡片 */
.bz-card {
  background: white;
  border-radius: var(--r-lg);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-card);
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative; overflow: hidden;
}
.bz-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px -10px rgba(124,58,237,.25); }

.bz-card-mbti::before, .bz-card-star::before, .bz-card-love::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.bz-card-mbti::before { background: linear-gradient(90deg, var(--mbti-from), var(--mbti-to)); }
.bz-card-star::before { background: linear-gradient(90deg, var(--star-from), var(--star-to)); }
.bz-card-love::before { background: linear-gradient(90deg, var(--love-from), var(--love-to)); }

/* 答题选项 */
.bz-option {
  display: block; width: 100%;
  padding: 1rem 1.25rem;
  background: white;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  text-align: left;
  cursor: pointer;
  transition: all .2s ease;
  font-size: .95rem;
}
.bz-option:hover {
  border-color: var(--brand-400);
  background: var(--brand-50);
  transform: translateX(4px);
}
.bz-option.selected {
  border-color: var(--brand-500);
  background: linear-gradient(135deg, var(--brand-50), var(--brand-100));
  color: var(--brand-700);
  font-weight: 600;
}
.bz-option .bz-opt-letter {
  display: inline-block; width: 28px; height: 28px;
  background: var(--brand-100); color: var(--brand-700);
  border-radius: 50%; text-align: center; line-height: 28px;
  font-weight: 700; margin-right: .75rem; font-size: .85rem;
  transition: all .2s;
}
.bz-option.selected .bz-opt-letter { background: var(--brand-500); color: white; }

/* 进度条 */
.bz-progress {
  width: 100%; height: 8px;
  background: var(--brand-100);
  border-radius: 9999px; overflow: hidden;
}
.bz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  border-radius: 9999px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}

/* ---------- 5. 动画 ---------- */
@keyframes bz-fade-in { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform:none; } }
@keyframes bz-fade-out { from { opacity:1; } to { opacity:0; transform: translateY(-12px); } }
@keyframes bz-pop { 0% { transform: scale(.95); opacity:0; } 100% { transform:scale(1); opacity:1; } }
@keyframes bz-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.bz-anim-in   { animation: bz-fade-in .5s ease both; }
.bz-anim-out  { animation: bz-fade-out .25s ease both; }
.bz-anim-pop  { animation: bz-pop .35s cubic-bezier(.34,1.56,.64,1) both; }
.bz-anim-float { animation: bz-float 3s ease-in-out infinite; }

/* ---------- 6. 顶部导航 ---------- */
.bz-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(229,231,235,.5);
}
.bz-nav-link {
  position: relative;
  padding: .5rem .25rem;
  color: var(--ink-soft);
  font-weight: 500;
  transition: color .2s;
}
.bz-nav-link:hover { color: var(--brand-600); }
.bz-nav-link.active { color: var(--brand-600); }
.bz-nav-link.active::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  border-radius: 2px;
}

/* ---------- 7. 返回顶部 ---------- */
.bz-top-btn {
  position: fixed; right: 1.25rem; bottom: 1.25rem;
  width: 44px; height: 44px;
  background: white; color: var(--brand-600);
  border-radius: 50%;
  box-shadow: var(--shadow-card);
  display: none; align-items: center; justify-content: center;
  cursor: pointer; z-index: 40;
  transition: all .2s;
}
.bz-top-btn:hover { background: var(--brand-500); color: white; transform: translateY(-2px); }
.bz-top-btn.show { display: flex; }

/* ---------- 8. Toast ---------- */
.bz-toast {
  position: fixed; bottom: 5rem; left: 50%; transform: translateX(-50%);
  background: rgba(31,41,55,0.95); color: white;
  padding: .75rem 1.25rem; border-radius: 9999px;
  font-size: .85rem; z-index: 100;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  animation: bz-pop .3s ease, bz-fade-out .3s ease 1.7s both;
}

/* ---------- 9. 移动端适配 ---------- */
@media (max-width: 640px) {
  .bz-card { padding: 1.5rem 1.25rem; }
  .bz-btn { padding: .75rem 1.5rem; font-size: .9rem; }
  .bz-option { padding: .85rem 1rem; font-size: .9rem; }
}

/* ---------- 新板块卡片顶条 ---------- */
.bz-card-couple::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #f43f5e, #ec4899, #f472b6);
}
.bz-card-career::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #f59e0b, #f97316, #fbbf24);
}
.bz-card-introvert::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #38bdf8, #0ea5e9, #6366f1);
}

/* 情侣配对按钮 */
.bz-btn-couple {
  background: linear-gradient(135deg, #f43f5e, #ec4899);
  color: #fff;
}
.bz-btn-career {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  color: #fff;
}
.bz-btn-introvert {
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  color: #fff;
}
.bz-btn-download {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
}

/* 情侣匹配模式选择按钮 */
.bz-couple-mode {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1rem .75rem;
  background: white;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all .2s ease;
  text-align: center;
}
.bz-couple-mode:hover {
  border-color: #f9a8d4;
  transform: translateY(-2px);
}
.bz-couple-mode.active {
  border-color: #ec4899;
  background: linear-gradient(135deg, #fdf2f8, #fce7f3);
  box-shadow: 0 4px 16px -4px rgba(236,72,153,.25);
}

/* 情侣匹配下拉框 */
.bz-select {
  display: block; width: 100%;
  padding: .75rem 1rem;
  background: white;
  border: 2px solid var(--line);
  border-radius: 9999px;
  font-size: .9rem;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 1rem;
  cursor: pointer;
  transition: border-color .2s;
}
.bz-select:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px rgba(139,92,246,.12);
}

/* 情侣匹配结果推荐卡片 */
.bz-match-rec-card {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: 1rem .5rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: all .2s;
}
.bz-match-rec-card:hover {
  border-color: var(--brand-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

/* ---------- 10. 结果页特殊 ---------- */
.bz-result-banner {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: white;
  position: relative; overflow: hidden;
}
.bz-result-banner::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.25), transparent 60%);
  pointer-events: none;
}
.bz-result-banner > * { position: relative; z-index: 1; }

/* 结果维度条形图 */
.bz-dim-bar {
  height: 12px; border-radius: 9999px;
  background: var(--brand-100); overflow: hidden;
  display: flex;
}
.bz-dim-fill-l { background: linear-gradient(90deg, var(--brand-500), var(--brand-400)); height: 100%; }
.bz-dim-fill-r { background: var(--brand-100); height: 100%; }

/* 历史记录卡片 */
.bz-history-card {
  display: flex; align-items: center; gap: 1rem;
  background: white;
  padding: 1rem 1.25rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  transition: all .2s;
  cursor: pointer;
}
.bz-history-card:hover {
  border-color: var(--brand-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.bz-history-emoji {
  font-size: 2rem; flex-shrink: 0;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50);
  border-radius: var(--r-md);
}

/* 标签 chip */
.bz-tag {
  display: inline-flex; align-items: center;
  padding: .25rem .75rem;
  background: var(--brand-50); color: var(--brand-700);
  border-radius: 9999px;
  font-size: .75rem; font-weight: 600;
}

/* 隐藏滚动条 */
.bz-no-scrollbar::-webkit-scrollbar { display: none; }
.bz-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 加载占位 */
.bz-skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: bz-skeleton 1.5s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes bz-skeleton { 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }