/* ============================================================
   吉福取名页专属样式
   移植自 docs/07-prototype/pages/qiming.html <style>
   ============================================================ */
.qm-hero { background:
  radial-gradient(120% 120% at 0 0, rgba(184,134,11,.07), transparent 55%),
  var(--c-paper-card); }

/* 表单 */
.qm-form { display:grid; gap:var(--sp-4); }
.field { display:grid; gap:8px; }
.field > label { font-family:var(--font-serif); font-weight:700; font-size:var(--t-sm); color:var(--c-ink); display:flex; align-items:center; gap:6px; }
.field > label .req { color:var(--c-primary); }
.field input[type=text], .field input[type=date], .field select {
  font:inherit; font-size:var(--t-body); padding:10px 12px; width:100%;
  border:1px solid var(--c-line); border-radius:var(--radius); background:#fff; color:var(--c-ink);
}
.field input:focus, .field select:focus { outline:0; border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-primary-soft); }
.field-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:420px){ .field-2 { grid-template-columns:1fr; } }

/* 可点选 pill（选中态 .sel，亦支持原生 :has(:checked) 渐进增强） */
.opt { cursor:pointer; user-select:none; position:relative; }
.opt input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.opt.sel.pill-ghost, .opt.pill-ghost:has(input:checked) { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
.opt.sel.pill-yi, .opt.pill-yi:has(input:checked) { background:var(--c-yi); color:#fff; border-color:var(--c-yi); }
.opt.sel.pill-ji, .opt.pill-ji:has(input:checked) { background:var(--c-primary); color:#fff; border-color:var(--c-primary); }
.opt.sel.pill-gold, .opt.pill-gold:has(input:checked) { background:linear-gradient(160deg,var(--c-gold-light),var(--c-gold)); color:#4a3403; border-color:var(--c-gold); }

/* 结果候选卡 */
.name-list { display:grid; gap:var(--sp-3); }
.name-card { border:1px solid var(--c-line); border-radius:var(--radius-lg); background:#fff; padding:var(--sp-4); }
.name-card.top { border-color:var(--c-gold-light); box-shadow:inset 0 0 0 1px var(--c-gold-light), var(--shadow-sm); background:
  radial-gradient(120% 120% at 100% 0, rgba(184,134,11,.06), transparent 55%), #fff; }
.nc-head { display:flex; align-items:center; gap:var(--sp-4); flex-wrap:wrap; }
.nc-name { font-family:var(--font-serif); font-weight:900; font-size:30px; color:var(--c-primary-deep); letter-spacing:3px; line-height:1; }
.nc-score { margin-left:auto; text-align:center; flex:none; }
.nc-score .val { font-family:var(--font-serif); font-weight:900; font-size:30px; line-height:1; color:var(--c-gold); }
.nc-score .lab { font-size:11px; color:var(--c-ink-3); }
.grade { font-size:var(--t-xs); padding:3px 9px; border-radius:var(--radius-pill); font-family:var(--font-serif); }
.grade.shang { background:linear-gradient(160deg,var(--c-gold-light),var(--c-gold)); color:#4a3403; }
.grade.daji { background:var(--c-primary-soft); color:var(--c-primary-deep); }
.bar { height:7px; border-radius:999px; background:var(--c-line); overflow:hidden; margin:var(--sp-3) 0; }
.bar > i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--c-gold-light),var(--c-gold)); }
.sange { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.sange .g { display:flex; flex-direction:column; align-items:center; min-width:52px; padding:5px 4px; border:1px solid var(--c-line); border-radius:var(--radius); background:var(--c-paper); }
.sange .g small { font-size:10px; color:var(--c-ink-3); }
.sange .g b { font-family:var(--font-mono); font-size:15px; color:var(--c-ink); }
.sange .g i { font-style:normal; font-size:10px; }
.sange .g i.ji { color:var(--c-yi); } .sange .g i.xiong { color:var(--c-bad); }
.nc-wx { font-family:var(--font-serif); color:var(--c-gold); font-size:var(--t-sm); margin-right:6px; }
.nc-mean { font-size:var(--t-sm); color:var(--c-ink-2); line-height:1.7; margin:0; }
.nc-mean b { color:var(--c-ink); font-family:var(--font-serif); font-weight:500; }
.nc-actions { display:flex; gap:8px; margin-top:var(--sp-3); }

/* 五行色 */
.wx-金 { color:#c9a227; } .wx-木 { color:#3a9d5d; } .wx-水 { color:#2b7fc4; } .wx-火 { color:#c0392b; } .wx-土 { color:#a9762f; }
.bg-金 { background:#c9a227; } .bg-木 { background:#3a9d5d; } .bg-水 { background:#2b7fc4; } .bg-火 { background:#c0392b; } .bg-土 { background:#a9762f; }

/* 喜用来源 pane */
.qm-pane { display:grid; gap:var(--sp-4); padding:var(--sp-3) 0 0; border-top:1px dashed var(--c-line); }

/* 八字五行分析块 */
.qm-bazi { margin-top:var(--sp-3); }
.qm-pillars { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 12px; }
.qm-pillars .qp { display:flex; flex-direction:column; align-items:center; min-width:56px; padding:6px 10px; border:1px solid var(--c-line); border-radius:var(--radius); background:#fff; }
.qm-pillars .qp small { font-size:10px; color:var(--c-ink-3); }
.qm-pillars .qp b { font-family:var(--font-serif); font-size:17px; color:var(--c-primary-deep); }
.qm-wx { display:flex; align-items:flex-end; justify-content:center; gap:16px; height:120px; margin:6px 0; }
.qm-wx-col { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; flex:1; max-width:54px; }
.qm-wx-col .v { font-size:.78rem; font-weight:700; margin-bottom:3px; }
.qm-wx-col .b { width:60%; min-width:20px; border-radius:5px 5px 0 0; min-height:3px; }
.qm-wx-col .n { margin-top:5px; font-family:var(--font-serif); font-weight:700; }
.qm-facts { display:flex; flex-wrap:wrap; gap:8px 18px; font-size:var(--t-sm); color:var(--c-ink-2); margin:6px 0; }
.qm-facts b { color:var(--c-ink); font-family:var(--font-serif); }
.qm-why { margin:8px 0 0; font-size:var(--t-sm); line-height:1.75; color:var(--c-ink); background:rgba(201,154,46,.08); border-left:3px solid var(--c-gold,#c9a227); border-radius:0 8px 8px 0; padding:8px 12px; }

/* 候选卡 拼音行 */
.qm-py { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:var(--t-sm); color:var(--c-ink-2); margin:0 0 8px; }
.qm-py b { font-family:var(--font-mono); color:var(--c-ink); letter-spacing:.5px; }

/* 侧栏热门好名 */
.hot-name { display:flex; align-items:baseline; gap:8px; padding:7px 0; border-bottom:1px dashed var(--c-line); }
.hot-name:last-child { border-bottom:0; }
.hot-name b { font-family:var(--font-serif); font-size:16px; color:var(--c-primary-deep); }
.hot-name span { font-size:var(--t-xs); color:var(--c-ink-3); }
.hot-name .s { margin-left:auto; font-family:var(--font-mono); color:var(--c-gold); font-size:var(--t-sm); }