/* ============================================================
   吉福取名页专属样式
   移植自 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); }

/* 侧栏热门好名 */
.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); }