/* ---------- 八字测试专属配色（覆盖 shared/style.css 的变量） ----------
   只在加载了本文件的页面（八字测试）生效，不影响历史人物测试和
   占星测试——因为它们没有引用 bazi-style.css。
   配色取自项目所有者提供的原始样板卡片，比全站通用主题更浓郁、
   五行用直觉色区分（木绿/火红/土褐/金黄/水蓝），阅读辨识度更高。
------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");

:root {
  --paper: #eae2cf;
  --paper-raised: #f3ecda;
  --ink: #201c18;
  --ink-soft: #57504a;
  --ink-faint: #8b8073;
  --seal: #9a2b23;
  --seal-soft: rgba(154, 43, 35, 0.09);
  --jade: #a9813f; /* 复用为"次强调色"，实际是样板里的青铜色 bronze */
  --line: rgba(32, 28, 24, 0.16);

  --bronze: #a9813f;
  --bronze-soft: rgba(169, 129, 63, 0.16);

  --font-mono: "Inter", -apple-system, sans-serif; /* 数字/英文标签用 */

  /* 五行直觉色，跟 bazi-charts.js 的 ELEMENT_COLOR 保持一致 */
  --el-wood: #2e7d46;
  --el-fire: #c0392b;
  --el-earth: #8a5a2b;
  --el-metal: #b8901f;
  --el-water: #1f4e79;
}

body {
  background: radial-gradient(ellipse at top left, rgba(169, 129, 63, 0.06), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(31, 78, 121, 0.05), transparent 55%), var(--paper);
}

/* 五行文字颜色（给天干地支单字上色用） */
.el-木 { color: var(--el-wood); }
.el-火 { color: var(--el-fire); }
.el-土 { color: var(--el-earth); }
.el-金 { color: var(--el-metal); }
.el-水 { color: var(--el-water); }

/* ---------- 分区隔断（呼应样板卡片"───大运───"式的装饰分隔） ---------- */

.section-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 18px;
}
.section-divider .rule {
  flex: 1;
  height: 1px;
  background: var(--line);
}
.section-divider .glyph {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--seal);
  letter-spacing: 0.08em;
}

/* ---------- 日主 banner（深底强调条，替代原本的纯文字段落） ---------- */

.dm-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  padding: 16px 20px;
  margin-bottom: 24px;
  gap: 12px;
  flex-wrap: wrap;
}
.dm-banner .dm-banner__text {
  font-size: 14px;
  line-height: 1.6;
}
.dm-banner .dm-banner__text b {
  font-size: 19px;
  color: var(--el-metal);
}
.dm-banner .dm-banner__badge {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  background: var(--seal);
  color: #f3e9d4;
  padding: 4px 12px;
  flex: none;
  white-space: nowrap;
}

/* ---------- 表单元素（八字测试专用，延续纸墨印章主题）---------- */

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.field input[type="date"],
.field input[type="number"],
.field select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
}

.field input:focus,
.field select:focus {
  border-color: var(--seal);
}

.field-row {
  display: flex;
  gap: 10px;
}
.field-row .field {
  flex: 1;
}

.radio-group {
  display: flex;
  gap: 10px;
}

.radio-pill {
  flex: 1;
  text-align: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink-soft);
}

.radio-pill.is-active {
  border-color: var(--seal);
  color: var(--seal);
  background: var(--seal-soft);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: -6px;
  margin-bottom: 18px;
  cursor: pointer;
}

.checkbox-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--seal);
}

/* ---------- 四柱展示 ---------- */

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}

.pillars-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.pillar-col {
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 4px;
}

.pillar-col__label {
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.pillar-col__gan,
.pillar-col__zhi {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
}

.pillar-col__zhi {
  color: var(--ink-soft);
}

.body-strength-badge {
  display: inline-block;
  margin: 0 auto 20px;
  padding: 6px 18px;
  border: 1.5px solid var(--seal);
  color: var(--seal);
  border-radius: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}

.body-strength-wrap {
  text-align: center;
}

.unknown-time-note {
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  margin: -12px 0 20px;
}

/* ---------- 详细四柱卡片 ---------- */

.pillars-detail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}
.pillars-detail.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.pillar-col-detail {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px 4px;
  text-align: center;
}
.pillar-col-detail.is-day {
  border-color: var(--seal);
}

.pcol__label {
  font-size: 10px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.pcol__gan-tag {
  font-size: 10px;
  color: var(--seal);
  min-height: 14px;
  margin-bottom: 2px;
}
.pcol__gan {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}
.pcol__zhi {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.pcol__hidden {
  border-top: 1px dashed var(--line);
  padding-top: 6px;
}
.pcol__hidden-row {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--ink-soft);
  margin-bottom: 2px;
  gap: 2px;
}
.pcol__hidden-tier {
  flex: none;
  width: 12px;
  color: var(--jade);
}
.pcol__hidden-stem {
  flex: none;
  font-weight: 700;
  color: var(--ink);
}
.pcol__hidden-ss {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcol__hidden-score {
  flex: none;
}

/* ---------- 阴阳分布 ---------- */

.yinyang-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}
.yy-dot {
  font-size: 13px;
  font-weight: 700;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 2px solid var(--ink);
  border-radius: 0;
}
.yy-yang {
  background: #f7f2e4;
  color: var(--ink);
}
.yy-yin {
  background: var(--ink);
  color: #f7f2e4;
}

/* ---------- 图表容器 ---------- */

.chart-caption {
  text-align: center;
  font-size: 11px;
  color: var(--ink-soft);
  margin: -4px 0 8px;
}
.chart-wrap {
  margin: 0 auto 16px;
  max-width: 320px;
}
.chart-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- 十二长生参考带 ---------- */

.changsheng-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-bottom: 24px;
}
.cs-cell {
  text-align: center;
  padding: 6px 2px;
  border: 1px solid var(--line);
  border-radius: 3px;
  opacity: 0.4;
}
.cs-cell.is-used {
  opacity: 1;
  border-color: var(--jade);
  background: rgba(75, 99, 88, 0.08);
}
.cs-cell__branch {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
}
.cs-cell__stage {
  font-size: 9px;
  color: var(--ink-soft);
}

/* ---------- 大运时间轴 ---------- */

.dayun-note {
  text-align: center;
  font-size: 11px;
  color: var(--ink-soft);
  margin: -8px 0 12px;
}
.dayun-timeline {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 24px;
  -webkit-overflow-scrolling: touch;
}
.dayun-step {
  flex: none;
  width: 84px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px 4px;
}
.dayun-step.is-current {
  border-color: var(--seal);
  background: var(--seal-soft);
}
.dayun-step__age {
  font-size: 10px;
  color: var(--ink-soft);
}
.dayun-step__ganzhi {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  margin: 4px 0;
}
.dayun-step__meta {
  font-size: 9px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.dayun-step__year {
  font-size: 9px;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* ---------- 流年卡片 ---------- */

.liunian-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.liunian-card {
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 4px;
}
.liunian-card__year {
  font-size: 11px;
  color: var(--ink-soft);
}
.liunian-card__ganzhi {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin: 4px 0;
}
.liunian-card__meta {
  font-size: 10px;
  color: var(--ink-soft);
}
.liunian-card__dayun {
  font-size: 9px;
  color: var(--ink-soft);
  margin-top: 6px;
  opacity: 0.8;
}

/* ---------- Tier3 命理结构 ---------- */

.tier3-block {
  margin-bottom: 18px;
}
.tier3-block h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.tier3-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--seal);
  border: 1px solid var(--seal);
  border-radius: 3px;
  padding: 1px 8px;
}
.tier3-block p {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.75;
}
.tier3-note {
  color: var(--ink-soft) !important;
  font-size: 12px !important;
}

/* ---------- AI 占位区 ---------- */

.ai-placeholder {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px dashed var(--seal);
  border-radius: 4px;
  padding: 16px;
  background: var(--seal-soft);
  margin-bottom: 20px;
}
.ai-placeholder__icon {
  color: var(--seal);
  font-size: 16px;
  flex: none;
  line-height: 1.6;
}
.ai-placeholder__text {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.7;
}