/* 星语先生 · 命盘速览 —— 黑金风格（与交付 PDF 同一套配色） */
:root{
  --bg:#0d0d0f; --card:#16161a; --line:#2a2a31;
  --gold:#c9a227; --gold-d:#8c6d1f; --gold-l:#e3c96a;
  --tx:#e8e3d8; --dim:#9a958a; --dim2:#6f6b63;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tx);
  font:15px/1.7 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  padding:0 14px 40px; max-width:920px; margin:0 auto;
}
h1,h2,h3{margin:0;font-weight:600}

/* 顶栏 */
.hd{text-align:center;padding:28px 0 20px;border-bottom:1px solid var(--line);margin-bottom:20px}
.brand{font-size:26px;letter-spacing:.32em;color:var(--gold);text-indent:.32em}
.sub{font-size:12px;letter-spacing:.28em;color:var(--dim2);margin-top:8px;text-indent:.28em}

/* 卡片 */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:18px}

/* 表单 */
label{display:block;font-size:12.5px;color:var(--dim);margin-bottom:12px}
input,select{
  display:block;width:100%;margin-top:6px;padding:11px 12px;font-size:16px;
  background:#0f0f12;border:1px solid var(--line);border-radius:8px;color:var(--tx);
  font-family:inherit;
}
input:focus,select:focus{outline:none;border-color:var(--gold-d)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px}
.full{margin-bottom:12px}
@media(max-width:520px){
  .row3{grid-template-columns:1.4fr 1fr 1fr}
  /* 出生地那一行在手机上改成竖排：两个并排时每格只剩 ~150px，
     地名长一点就看不全，下拉候选也跟着挤成一条。 */
  .row-place{grid-template-columns:1fr}
}

.btn{
  width:100%;margin-top:6px;padding:14px;font-size:16px;font-family:inherit;
  letter-spacing:.3em;text-indent:.3em;cursor:pointer;border-radius:8px;
  background:linear-gradient(180deg,#1d1d22,#131317);color:var(--gold-l);
  border:1px solid var(--gold-d);transition:.15s;
}
.btn:hover{background:linear-gradient(180deg,#26262c,#1a1a20)}
.btn:disabled{opacity:.5;cursor:default}
.btn.gold{background:linear-gradient(180deg,var(--gold),var(--gold-d));color:#14140f;font-weight:600}

.hint{font-size:12.5px;color:var(--gold-l);background:#1f1a0e;border:1px solid #3a2f14;
  border-radius:8px;padding:10px 12px;margin:0 0 12px}
/* 蜜罐栏位：对真人不可见、不参与 tab 顺序，但留在 DOM 里供机器人自动填充 */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}

/* 出生地自动补全。不用 <datalist>：手机浏览器（尤其 iOS）要**开始打字**才出候选，
   多数客户只会点一下、看没反应就自己乱填 → 出生地认不出 → 排不了盘。 */
.ph-wrap{position:relative;display:block}
.sugg{
  position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:40;display:block;
  background:#101013;border:1px solid var(--gold-d);border-radius:9px;
  /* 手机上别让候选把手机键盘顶上去的可见区占满 */
  max-height:min(232px, 32vh);overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:0 10px 28px rgba(0,0,0,.66);
}
.sugg-item{
  display:block;padding:11px 13px;font-size:15px;color:var(--tx);
  border-bottom:1px solid #1d1d22;cursor:pointer;letter-spacing:.02em;
}
.sugg-item:last-child{border-bottom:0}
.sugg-item:hover,.sugg-item:active{background:#1f1a0e;color:var(--gold-l)}
.sugg-empty{display:block;padding:12px 13px;font-size:12.5px;color:var(--dim2);line-height:1.6}
.fine{font-size:11.5px;color:var(--dim2);line-height:1.65;margin:12px 0 0}

/* 结果 */
.result{padding:22px 20px}
.rhead{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px}
.rname{font-size:21px;color:var(--gold-l);letter-spacing:.06em}
.rsex{font-size:12px;color:var(--dim2);border:1px solid var(--line);border-radius:4px;
  padding:1px 7px;margin-left:10px;letter-spacing:0;vertical-align:2px}
.rinfo{font-size:12.5px;color:var(--dim);margin-top:8px;line-height:1.85}
.tag{color:var(--gold);font-weight:600}

.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.cols{grid-template-columns:1fr;gap:22px}}
.col{}
.ctl{font-size:13px;letter-spacing:.22em;color:var(--gold);border-bottom:1px solid var(--line);
  padding-bottom:7px;margin-bottom:12px;text-indent:.22em}

.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.pl{text-align:center;background:#111114;border:1px solid var(--line);border-radius:7px;padding:8px 2px}
.pk{display:block;font-size:11px;color:var(--dim2)}
.pv{display:block;font-size:17px;color:var(--gold-l);letter-spacing:.04em;margin-top:2px}

.kv{font-size:13px;color:var(--tx);padding:4px 0;line-height:1.75}
.kv>span{color:var(--dim2);font-size:12px;margin-right:8px;display:inline-block;min-width:62px}
.kv.big{font-size:15px;color:var(--gold-l)}
.kv.big>span{font-size:12px}
.kv i.dim{font-style:normal;color:var(--dim2);font-size:12px;margin-left:6px}
.kv i.hn{font-style:normal;color:var(--gold);font-size:11.5px;margin-left:8px;
  border:1px solid var(--gold-d);border-radius:4px;padding:0 5px;letter-spacing:.02em}
.kv.note{font-size:11.5px;color:var(--gold-l);line-height:1.6}
.mu{color:#c0392b;font-weight:700;font-size:11px;margin-left:1px;vertical-align:1px}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:10px}
.st{text-align:center;font-size:11px;color:var(--dim);background:#111114;
  border:1px solid var(--line);border-radius:6px;padding:6px 1px;line-height:1.5}
.st i{display:block;font-style:normal;color:var(--dim2);font-size:10px}
.st em{display:block;font-style:normal;color:var(--dim2);font-size:10px}
.st.on{background:#1f1a0e;border-color:var(--gold-d);color:var(--gold-l)}
.st.on i,.st.on em{color:var(--gold-d)}

/* 线索 */
.lead{border-color:var(--gold-d);background:linear-gradient(180deg,#17150f,#131317)}
.lead h3{font-size:16px;color:var(--gold-l);margin-bottom:10px;letter-spacing:.04em}
.lead-p{font-size:13px;color:var(--dim);margin:0 0 16px;line-height:1.85}
.ok{color:var(--gold-l);text-align:center;padding:18px 0;font-size:15px}
.fallback{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--dim)}
#qrcode{margin-top:10px;min-height:1px}

/* 页脚 */
.ft{border-top:1px solid var(--line);margin-top:26px;padding-top:16px;text-align:center}
.ft p{font-size:11.5px;color:var(--dim2);margin:5px 0;line-height:1.7}
.ft .tech{font-size:10.5px;color:#4d4a44;line-height:1.7;max-width:640px;margin:10px auto 0}