/* 断卦 · 八字姻缘页
 * 复用 assets/style.css 的主题变量与基础组件，这里只补命盘相关
 */

/* ---------- 表单 ---------- */
.bz-sex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}
.seg { position: relative; display: block; }
.seg input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.seg span {
  display: block;
  text-align: center;
  padding: 12px 0;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--txt-2);
  font-size: 15px;
  letter-spacing: .18em;
  transition: border-color .18s, color .18s, background .18s;
}
.seg input:checked + span {
  border-color: var(--gold-line);
  background: var(--gold-soft);
  color: var(--gold-2);
}
.seg input:focus-visible + span { outline: 2px solid var(--gold-line); outline-offset: 2px; }

.field select {
  width: 100%;
  min-height: 48px;
  padding: 13px 14px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--txt);
  font-size: 16px;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%),
                    linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field select:focus { outline: none; border-color: var(--gold-line); }

.chk {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 0 2px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dim);
  cursor: pointer;
}
.chk input {
  flex: none;
  width: 18px; height: 18px;
  margin: 2px 0 0;
  accent-color: var(--gold);
}

.bz-hint {
  min-height: 0;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--red-2);
}
.bz-hint:empty { display: none; }

/* ---------- 通用卡 ---------- */
.bz-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin-top: 14px;
  box-shadow: var(--shadow);
}
.bz-card > h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--gold);
}
.bz-card > h2 small {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--dim);
}

/* ---------- 四柱命盘 ---------- */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.pil {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px 4px 9px;
  text-align: center;
}
.pil.is-day {
  border-color: var(--gold-line);
  background: var(--gold-soft);
}
.pil .lab {
  display: block;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--dim);
  margin-bottom: 7px;
}
.pil .gz {
  display: block;
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.24;
  letter-spacing: .04em;
}
.pil .gz i { font-style: normal; display: block; }
.pil .god {
  display: block;
  margin-top: 6px;
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--txt-2);
}
.pil .hid {
  display: block;
  margin-top: 5px;
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--dim);
  word-break: break-all;
}
.pil .ny {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  color: var(--dim);
  opacity: .8;
}
.pil .cs {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--gold);
  opacity: .82;
}
.pil .kong {
  display: inline-block;
  margin-top: 5px;
  padding: 1px 5px;
  border-radius: 5px;
  font-size: 9.5px;
  color: var(--red-2);
  background: var(--red-soft);
}

/* 五行 */
.wx-list { list-style: none; margin: 14px 0 0; padding: 0; }
.wx-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 0;
  font-size: 12px;
}
.wx-list .nm { flex: none; width: 1.4em; color: var(--txt-2); letter-spacing: .04em; }
.wx-list .track {
  flex: 1;
  height: 7px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
}
.wx-list .track i {
  display: block;
  height: 100%;
  border-radius: 99px;
  transition: width .5s cubic-bezier(.2,.8,.3,1);
}
.wx-list .num { flex: none; width: 2.4em; text-align: right; color: var(--dim); font-size: 11px; }

.wx-木 { background: linear-gradient(90deg, #4a8a52, #6fb36f); }
.wx-火 { background: linear-gradient(90deg, #c9483a, #e0604f); }
.wx-土 { background: linear-gradient(90deg, #a07b3c, #c9a45e); }
.wx-金 { background: linear-gradient(90deg, #8f8f9a, #c2c2cc); }
.wx-水 { background: linear-gradient(90deg, #3d6c99, #6a9bc4); }

.c-木 { color: #6fb36f; }
.c-火 { color: #e0604f; }
.c-土 { color: #c9a45e; }
.c-金 { color: #c2c2cc; }
.c-水 { color: #6a9bc4; }

:root[data-theme="light"] .c-木 { color: #2f6b39; }
:root[data-theme="light"] .c-火 { color: #a83a2a; }
:root[data-theme="light"] .c-土 { color: #8a6a1f; }
:root[data-theme="light"] .c-金 { color: #5d5d68; }
:root[data-theme="light"] .c-水 { color: #2b567f; }

.dm-line {
  margin: 14px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--txt-2);
}
.dm-line b { color: var(--gold); font-weight: 600; }

/* ---------- 姻缘指数 ---------- */
.score-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.score-ring {
  position: relative;
  flex: none;
  width: 92px; height: 92px;
}
.score-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring .bgc { stroke: var(--line); }
.score-ring .fgc {
  stroke: var(--gold);
  stroke-linecap: round;
  transition: stroke-dashoffset .9s cubic-bezier(.2,.8,.3,1);
}
.score-ring .txt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.score-ring .txt b {
  font-size: 25px;
  font-weight: 600;
  color: var(--gold-2);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.score-ring .txt span { font-size: 9.5px; color: var(--dim); margin-top: 3px; letter-spacing: .1em; }
.score-say { min-width: 0; }
.score-say b {
  display: block;
  font-size: 17px;
  letter-spacing: .1em;
  color: var(--txt);
  font-weight: 600;
}
.score-say p {
  margin: 5px 0 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--dim);
}

/* ---------- 夫妻宫 / 配偶星 ---------- */
.palace-row {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}
.palace-box {
  flex: 1;
  min-width: 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px 10px;
  text-align: center;
}
.palace-box em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--dim);
  margin-bottom: 6px;
}
.palace-box b {
  display: block;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.2;
  color: var(--txt);
}
.palace-box b small { font-size: 12px; color: var(--dim); font-family: var(--sans); }
.palace-box u {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  text-decoration: none;
  color: var(--txt-2);
}

.rel-line {
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--txt-2);
}
.rel-line b { color: var(--gold); font-weight: 600; }
.rel-line .bad { color: var(--red-2); }
.rel-line .good { color: #6fb36f; }
:root[data-theme="light"] .rel-line .good { color: #2f6b39; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 99px;
  font-size: 11.5px;
  letter-spacing: .04em;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--txt-2);
}
.chip.good { border-color: var(--gold-line); color: var(--gold-2); background: var(--gold-soft); }
.chip.bad { border-color: var(--red-line); color: var(--red-2); background: var(--red-soft); }
.chip i { font-style: normal; opacity: .72; font-size: 10.5px; }

/* ---------- 正缘 ---------- */
.pt-row {
  display: grid;
  grid-template-columns: 4.2em 1fr;
  gap: 8px 10px;
  font-size: 13px;
  line-height: 1.8;
}
.pt-row dt { color: var(--dim); font-size: 12px; letter-spacing: .06em; }
.pt-row dd { margin: 0; color: var(--txt-2); }

/* ---------- 应期 ---------- */
.tm-list { list-style: none; margin: 0; padding: 0; }
.tm-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.7;
}
.tm-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.tm-list .yr {
  flex: none;
  width: 3.5em;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  color: var(--txt);
}
.tm-list .yr small { display: block; font-size: 10px; font-weight: 400; color: var(--dim); }
.tm-list .why { min-width: 0; color: var(--txt-2); font-size: 12px; }
.tm-list .why b { color: var(--gold); font-weight: 600; }
.tier {
  flex: none;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px;
  letter-spacing: .1em;
}
.tier.s3 { background: var(--red-soft); color: var(--red-2); border: 1px solid var(--red-line); }
.tier.s2 { background: var(--gold-soft); color: var(--gold-2); border: 1px solid var(--gold-line); }
.tier.s1 { background: var(--card); color: var(--dim); border: 1px solid var(--line); }

/* ---------- 结果区动画 ---------- */
#out > * { animation: bzIn .42s cubic-bezier(.2,.8,.3,1) both; }
#out > *:nth-child(2) { animation-delay: .05s; }
#out > *:nth-child(3) { animation-delay: .1s; }
#out > *:nth-child(4) { animation-delay: .14s; }
#out > *:nth-child(5) { animation-delay: .18s; }
@keyframes bzIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #out > * { animation: none; }
  .wx-list .track i, .score-ring .fgc { transition: none; }
}

/* ---------- 断语卡（沿用 style.css 的 .ai-* 变量，改金调） ---------- */
#out .ai-card {
  margin-top: 14px;
  border-color: var(--gold-line);
  background: linear-gradient(180deg, var(--gold-soft), var(--card));
}
#out .ai-card .card-head h3 { letter-spacing: .16em; }
#out .ai-card .ai-badge { border-color: var(--gold-line); color: var(--gold-2); }
#out .ai-card .ai-body.streaming::after { background: var(--gold-2); }

/* ---------- 白话注解 ---------- */
.bz-tip {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--dim);
  letter-spacing: .02em;
}
.palace-box .plain {
  display: block;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  font-style: normal;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--dim);
  letter-spacing: .02em;
}
.rel-line .plain {
  display: inline-block;
  margin-top: 5px;
  font-style: normal;
  font-size: 11.5px;
  color: var(--dim);
}

/* ---------- 宽屏 ---------- */
@media (min-width: 620px) {
  .bz-card { padding: 22px 20px; }
  .pil .gz { font-size: 32px; }
  .pil .hid { font-size: 11.5px; }
  .chart-grid { gap: 9px; }
  .palace-row { gap: 12px; }
  .score-ring { width: 104px; height: 104px; }
  .score-ring .txt b { font-size: 29px; }
}