/**
 * 亲戚称呼计算器 - 工具页专属样式
 * 前缀 qq-，主题色：科技蓝 #2563eb（全站主色）
 * 布局：性别分段 → 三步关系链下拉 → 快捷案例 → 结果卡（蓝渐变）
 */

/* ---------- 工具区 ---------- */
.qq-tool {
  padding-top: calc(4 * var(--u)); /* 30px */
  padding-bottom: calc(2 * var(--u));
}

.qq-title {
  font-size: calc(4.4 * var(--u)); /* 33px */
  font-weight: 700;
  color: var(--c-text);
  text-align: center;
}

.qq-sub {
  margin-top: calc(1.2 * var(--u)); /* 9px */
  font-size: calc(2.8 * var(--u)); /* 21px */
  color: #7a8699;
  text-align: center;
}

/* ---------- 工具卡片 ---------- */
.qq-conv {
  margin-top: calc(3.2 * var(--u)); /* 24px */
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: calc(1.6 * var(--u)); /* 12px */
  box-shadow: 0 calc(1.2 * var(--u)) calc(3.6 * var(--u)) rgba(37, 99, 235, 0.1);
  padding: calc(3.2 * var(--u)); /* 24px */
}

/* 标签通用 */
.qq-label {
  display: block;
  font-size: calc(2.8 * var(--u)); /* 21px */
  font-weight: 600;
  color: var(--c-text);
}

.qq-label-tip {
  font-weight: 400;
  font-size: calc(2.2 * var(--u)); /* 16.5px */
  color: #94a3b8;
}

/* 性别分段选择 */
.qq-seg {
  margin-top: calc(1.2 * var(--u));
  display: flex;
  gap: calc(1.6 * var(--u));
}

.qq-seg-btn {
  flex: 1;
  border: 1.5px solid #bfdbfe;
  background: #f8faff;
  color: #1e40af;
  border-radius: calc(1.2 * var(--u));
  font-size: calc(2.8 * var(--u)); /* 21px */
  font-weight: 500;
  font-family: inherit;
  padding: calc(1.4 * var(--u)) 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.8 * var(--u));
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s;
}

.qq-seg-btn .bi {
  font-size: calc(3.2 * var(--u));
  line-height: 1;
}

.qq-seg-btn:hover {
  border-color: #2563eb;
}

.qq-seg-btn.qq-on {
  border-color: transparent;
  background: linear-gradient(120deg, #2563eb, #1d4ed8);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 calc(1 * var(--u)) calc(2.4 * var(--u)) rgba(37, 99, 235, 0.35);
}

/* 三步关系链 */
.qq-chain {
  margin-top: calc(2.4 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(1.6 * var(--u));
}

.qq-step {
  display: flex;
  align-items: center;
  gap: calc(1.2 * var(--u));
}

.qq-step-tag {
  flex-shrink: 0;
  width: calc(9 * var(--u)); /* 67.5px */
  text-align: center;
  font-size: calc(2.2 * var(--u)); /* 16.5px */
  font-weight: 600;
  color: #2563eb;
  background: #dbeafe;
  border-radius: calc(0.8 * var(--u));
  padding: calc(1.05 * var(--u)) 0;
}

.qq-step select {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  height: calc(6.4 * var(--u)); /* 48px */
  border: 1.5px solid #bfdbfe;
  border-radius: calc(1.2 * var(--u));
  outline: none;
  background: #f8faff;
  font-size: calc(2.7 * var(--u)); /* 20.25px */
  color: var(--c-text);
  font-family: inherit;
  padding: 0 calc(1.4 * var(--u));
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.qq-step select:focus {
  border-color: #2563eb;
  background: #fff;
}

/* 快捷案例 */
.qq-cases {
  margin-top: calc(2.4 * var(--u));
}

.qq-chips {
  margin-top: calc(1.2 * var(--u));
  display: flex;
  flex-wrap: wrap;
  gap: calc(1.2 * var(--u));
}

.qq-chip {
  border: 1.5px solid #bfdbfe;
  background: #fff;
  color: #1d4ed8;
  border-radius: calc(3 * var(--u)); /* 胶囊 */
  font-size: calc(2.3 * var(--u)); /* 17.25px */
  font-family: inherit;
  padding: calc(0.7 * var(--u)) calc(1.8 * var(--u));
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.qq-chip:hover {
  border-color: #2563eb;
  background: #dbeafe;
  transform: translateY(-1px);
}

/* 按钮行 */
.qq-btns {
  margin-top: calc(2.4 * var(--u));
  display: flex;
  gap: calc(1.6 * var(--u));
}

.qq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.6 * var(--u));
  border-radius: calc(1.2 * var(--u));
  font-size: calc(2.9 * var(--u)); /* 21.75px */
  font-weight: 500;
  font-family: inherit;
  padding: calc(1.4 * var(--u)) calc(3.2 * var(--u));
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
}

.qq-btn .bi {
  font-size: calc(3 * var(--u));
  line-height: 1;
}

.qq-btn-run {
  flex: 1;
  border: none;
  background: linear-gradient(120deg, #2563eb, #1d4ed8);
  color: #fff;
  box-shadow: 0 calc(1 * var(--u)) calc(2.4 * var(--u)) rgba(37, 99, 235, 0.3);
}

.qq-btn-run:hover {
  transform: translateY(-2px);
  box-shadow: 0 calc(1.4 * var(--u)) calc(3 * var(--u)) rgba(37, 99, 235, 0.35);
}

.qq-btn-reset {
  border: 1.5px solid #bfdbfe;
  background: #fff;
  color: #1d4ed8;
}

.qq-btn-reset:hover {
  border-color: #2563eb;
  background: #eff6ff;
}

/* ---------- 结果卡 ---------- */
.qq-result {
  display: none;
}

.qq-result.qq-show {
  display: block;
  animation: qq-unfold 0.3s ease;
}

@keyframes qq-unfold {
  from { opacity: 0; transform: translateY(calc(1.6 * var(--u))); }
  to { opacity: 1; transform: translateY(0); }
}

.qq-card {
  margin-top: calc(2.4 * var(--u));
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border-radius: calc(1.6 * var(--u));
  padding: calc(3.6 * var(--u)) calc(3.2 * var(--u));
  color: #fff;
  text-align: center;
}

.qq-card-path {
  font-size: calc(2.4 * var(--u)); /* 18px */
  opacity: 0.85;
}

.qq-card-main {
  margin-top: calc(1.2 * var(--u));
  font-size: calc(5.6 * var(--u)); /* 42px */
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 calc(0.4 * var(--u)) calc(0.8 * var(--u)) rgba(0, 0, 0, 0.12);
}

.qq-card-back {
  margin-top: calc(1.2 * var(--u));
  font-size: calc(2.9 * var(--u)); /* 21.75px */
  font-weight: 600;
  background: rgba(255, 255, 255, 0.18);
  border-radius: calc(1 * var(--u));
  display: inline-block;
  padding: calc(0.6 * var(--u)) calc(2 * var(--u));
}

.qq-card-note {
  margin-top: calc(1.2 * var(--u));
  font-size: calc(2.2 * var(--u)); /* 16.5px */
  opacity: 0.8;
  line-height: 1.6;
}

/* ---------- 称呼速查表 ---------- */
.qq-lookup {
  margin-top: calc(3.2 * var(--u));
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: calc(1.6 * var(--u));
  box-shadow: 0 calc(1.2 * var(--u)) calc(3.6 * var(--u)) rgba(37, 99, 235, 0.08);
  padding: calc(3.2 * var(--u));
}

.qq-lookup-group + .qq-lookup-group {
  margin-top: calc(2.8 * var(--u));
}

.qq-lookup-h {
  font-size: calc(3 * var(--u)); /* 22.5px */
  font-weight: 700;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: calc(0.8 * var(--u));
}

.qq-lookup-h .bi {
  color: #2563eb;
  font-size: calc(3.2 * var(--u));
}

.qq-lookup-grid {
  margin-top: calc(1.6 * var(--u));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(1.2 * var(--u));
}

.qq-lookup-item {
  background: #f8faff;
  border: 1px solid #dbeafe;
  border-radius: calc(1 * var(--u));
  padding: calc(1.2 * var(--u)) calc(1.4 * var(--u));
}

.qq-lookup-name {
  font-size: calc(2.7 * var(--u)); /* 20.25px */
  font-weight: 600;
  color: #1d4ed8;
}

.qq-lookup-desc {
  margin-top: calc(0.4 * var(--u));
  font-size: calc(2.2 * var(--u)); /* 16.5px */
  color: #7a8699;
  line-height: 1.5;
}

/* ---------- 介绍 / 说明区块 ---------- */
.qq-intro {
  margin-top: calc(3.2 * var(--u));
  background: #eff6ff;
  border-radius: calc(1.6 * var(--u));
  padding: calc(3.2 * var(--u)) calc(3.2 * var(--u));
}

.qq-intro p {
  font-size: calc(2.8 * var(--u)); /* 21px */
  line-height: 1.8;
  color: #475569;
}

.qq-intro p + p {
  margin-top: calc(1.6 * var(--u));
}

.qq-intro strong {
  color: #1d4ed8;
}