/* ============================================================
   数术统一计算引擎 · 网站样式 v1.0
   设计语言：墨玄 × 鎏金 × 朱砂 —— 深色学术玄学
   ============================================================ */
:root{
  --bg:#0b0e14; --bg2:#10151f; --bg3:#161d2b;
  --card:#121826; --card2:#0e1420; --line:#232c3e; --line2:#31405c;
  --ink:#e9e2d4; --ink2:#a9a294; --ink3:#6b6f7e;
  --gold:#c9a961; --gold2:#e8cd8a; --gold-dim:#8a7440;
  --red:#b3402e; --red2:#d96a55; --teal:#4fa89c; --blue:#7ba7d9;
  --green:#7db77a; --purple:#9a86c9; --pink:#d98ba8;
  --font-serif:"Noto Serif SC","Source Han Serif SC","STZhongsong","SimSun",serif;
  --font-sans:"Noto Sans SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 500px at 50% -100px, rgba(201,169,97,.08), transparent 60%),
    radial-gradient(900px 400px at 90% 10%, rgba(179,64,46,.06), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  min-height:100vh;
}
::selection{background:rgba(201,169,97,.35);color:#fff}

/* ============ 顶部 ============ */
.hero{text-align:center;padding:56px 20px 30px;position:relative}
.hero::before,.hero::after{
  content:"";position:absolute;left:50%;transform:translateX(-50%);
  height:1px;width:min(720px,88%);background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
}
.hero::before{top:34px}.hero::after{bottom:14px}
.hero-badge{
  display:inline-block;font-size:12px;letter-spacing:.35em;color:var(--gold2);
  border:1px solid var(--gold-dim);border-radius:999px;padding:5px 18px 5px 22px;
  background:linear-gradient(180deg,rgba(201,169,97,.12),rgba(201,169,97,.03));
  text-indent:.35em;margin-bottom:18px;
}
.hero h1{
  font-family:var(--font-serif);font-size:clamp(34px,6vw,54px);font-weight:700;
  background:linear-gradient(180deg,#f4e6bd 20%,var(--gold) 70%,#8a7440);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:.12em;text-indent:.12em;
}
.hero-sub{margin-top:14px;color:var(--ink2);font-size:15px;letter-spacing:.06em}
.hero-sub b{color:var(--gold2);font-weight:600}
.hero-note{margin-top:8px;color:var(--ink3);font-size:12px}

/* ============ 输入面板 ============ */
.input-panel{max-width:900px;margin:26px auto 10px;padding:0 16px}
.input-card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:16px;padding:26px 28px 24px;
  box-shadow:0 20px 60px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03);
}
.input-card h2{
  text-align:center;font-family:var(--font-serif);font-size:19px;color:var(--gold2);
  letter-spacing:.3em;text-indent:.3em;margin-bottom:20px;font-weight:600;
}
.tick{color:var(--gold-dim);font-size:13px}
.form-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:12px;color:var(--ink2);letter-spacing:.08em}
.field input,.field select{
  background:var(--bg2);border:1px solid var(--line);color:var(--ink);
  padding:10px 12px;border-radius:10px;font-size:15px;outline:none;width:100%;
  transition:border-color .2s, box-shadow .2s;
  font-family:var(--font-sans);
}
.field input:focus,.field select:focus{border-color:var(--gold-dim);box-shadow:0 0 0 3px rgba(201,169,97,.12)}
.field input::placeholder{color:var(--ink3)}
.form-actions{display:flex;justify-content:center;gap:14px;margin-top:22px}
.btn{
  border:none;cursor:pointer;font-size:15px;font-weight:600;border-radius:10px;
  padding:12px 34px;letter-spacing:.12em;font-family:var(--font-sans);
  transition:transform .15s, filter .2s, box-shadow .2s;
}
.btn-primary{
  background:linear-gradient(135deg,#a8842f,#d4a853 55%,#b8903a);
  color:#241a05;box-shadow:0 8px 24px rgba(201,169,97,.25);
}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.5;cursor:wait;transform:none}
.btn-ghost{
  background:transparent;color:var(--ink2);border:1px solid var(--line2);
}
.btn-ghost:hover{color:var(--gold2);border-color:var(--gold-dim)}
.err-msg{text-align:center;color:var(--red2);font-size:13px;margin-top:12px;min-height:18px}

/* ============ 结果区 ============ */
.result{max-width:1100px;margin:34px auto 60px;padding:0 16px}
.result-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.result-head h2{font-family:var(--font-serif);font-size:24px;color:var(--gold2);letter-spacing:.1em}
.result-meta{color:var(--ink3);font-size:12px}
.result-meta b{color:var(--ink2);font-weight:600}

/* Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:14px}
.tabs button{
  background:transparent;border:1px solid var(--line);color:var(--ink2);
  padding:8px 18px;border-radius:999px;font-size:13px;cursor:pointer;letter-spacing:.1em;
  transition:all .2s;font-family:var(--font-sans);
}
.tabs button:hover{color:var(--gold2);border-color:var(--gold-dim)}
.tabs button.active{
  background:linear-gradient(135deg,rgba(201,169,97,.2),rgba(201,169,97,.08));
  color:var(--gold2);border-color:var(--gold);box-shadow:0 0 18px rgba(201,169,97,.15);
}
.panel{animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hidden{display:none!important}

/* 卡片 */
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:14px;padding:20px 22px;
}
.card h3{
  font-family:var(--font-serif);font-size:16px;color:var(--gold);
  letter-spacing:.15em;margin-bottom:14px;padding-left:12px;border-left:3px solid var(--gold);
  font-weight:600;
}
.card h4{font-size:13px;color:var(--ink2);letter-spacing:.1em;margin:14px 0 8px;font-weight:600}

/* 表 */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:8px 10px;text-align:left;vertical-align:middle}
thead th{color:var(--gold-dim);font-weight:600;font-size:12px;letter-spacing:.12em;border-bottom:1px solid var(--line2)}
tbody td{border-bottom:1px solid rgba(35,44,62,.6);color:var(--ink2)}
tbody tr:last-child td{border-bottom:none}
td.k{color:var(--ink);font-weight:600;white-space:nowrap;width:92px}
td.v{color:var(--ink2)}
.mono{font-family:"Noto Serif SC",serif;letter-spacing:.08em}

/* 四柱大字 */
.bazi-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:6px}
.pillar{
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;
  text-align:center;padding:16px 8px 14px;position:relative;overflow:hidden;
}
.pillar::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,transparent,var(--gold-dim),transparent)}
.pillar .p-label{font-size:11px;color:var(--ink3);letter-spacing:.3em;text-indent:.3em}
.pillar .p-gan{
  font-family:var(--font-serif);font-size:52px;line-height:1.1;color:var(--ink);
  text-shadow:0 0 30px rgba(201,169,97,.2);
}
.pillar .p-zhi{font-family:var(--font-serif);font-size:40px;line-height:1.15;color:var(--gold2)}
.pillar .p-info{font-size:11px;color:var(--ink3);margin-top:6px}
.pillar .p-shishen{
  display:inline-block;margin-top:8px;font-size:11px;letter-spacing:.15em;
  padding:3px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--gold2);
  background:rgba(201,169,97,.06);
}
.pillar.hl{border-color:var(--gold-dim);box-shadow:0 0 24px rgba(201,169,97,.08)}
.pillar.hl .p-label{color:var(--gold2)}

/* 藏干 chips */
.cangan{display:flex;gap:6px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.chip{font-size:10.5px;padding:2px 8px;border-radius:6px;background:var(--bg3);border:1px solid var(--line);color:var(--ink2)}
.chip b{color:var(--gold2);font-weight:600;margin-right:2px}

/* 徽章 */
.badge{
  display:inline-block;font-size:11.5px;padding:3px 12px;border-radius:999px;letter-spacing:.06em;
  border:1px solid var(--line2);color:var(--ink2);background:var(--bg3);margin:2px 4px 2px 0;
}
.badge.gold{color:var(--gold2);border-color:var(--gold-dim);background:rgba(201,169,97,.08)}
.badge.red{color:var(--red2);border-color:rgba(217,106,85,.4);background:rgba(179,64,46,.1)}
.badge.teal{color:var(--teal);border-color:rgba(79,168,156,.4);background:rgba(79,168,156,.08)}
.badge.blue{color:var(--blue);border-color:rgba(123,167,217,.4);background:rgba(123,167,217,.08)}
.badge.green{color:var(--green);border-color:rgba(125,183,122,.4);background:rgba(125,183,122,.08)}
.badge.purple{color:var(--purple);border-color:rgba(154,134,201,.4);background:rgba(154,134,201,.08)}
.badge.pink{color:var(--pink);border-color:rgba(217,139,168,.4);background:rgba(217,139,168,.08)}

/* 大运表 */
.dayun-table td{font-size:12.5px}
.dayun-gz{font-family:var(--font-serif);font-size:16px;color:var(--gold2);letter-spacing:.05em}

/* ============ 紫微十二宫盘 ============ */
.ziwei-board{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px;
  max-width:760px;margin:0 auto;
}
.zgong{
  background:var(--bg3);border:1px solid var(--line);border-radius:10px;
  padding:12px 8px;text-align:center;min-height:118px;position:relative;
  display:flex;flex-direction:column;gap:4px;
}
.zgong.empty{background:transparent;border-color:transparent;min-height:0}
.zgong .z-name{font-family:var(--font-serif);font-size:14px;color:var(--ink);letter-spacing:.2em;font-weight:600}
.zgong .z-zhi{font-size:11px;color:var(--ink3)}
.zgong .z-stars{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.zgong .z-star{font-size:11.5px;color:var(--gold2);letter-spacing:.05em}
.zgong .z-star i{font-style:normal;font-size:10px;margin-left:2px}
.zgong .z-star .hua-l{color:var(--green)} .zgong .z-star .hua-q{color:var(--blue)}
.zgong .z-star .hua-k{color:var(--purple)} .zgong .z-star .hua-j{color:var(--red2)}
.zgong .z-fu{font-size:10px;color:var(--ink3);line-height:1.5}
.zgong.ming{background:linear-gradient(180deg,rgba(201,169,97,.16),rgba(201,169,97,.05));border-color:var(--gold-dim)}
.zgong.ming .z-name{color:var(--gold2)}
.zgong.shen{background:linear-gradient(180deg,rgba(179,64,46,.14),rgba(179,64,46,.04));border-color:rgba(179,64,46,.5)}
.zgong.shen .z-name{color:var(--red2)}
.zgong .z-tag{position:absolute;top:6px;right:6px;font-size:9px;padding:1px 6px;border-radius:4px;background:var(--gold-dim);color:#241a05;letter-spacing:.1em}
.zgong .z-tag.s{background:var(--red);color:#fff}

/* ============ 奇门九宫盘 ============ */
.qimen-board{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px;
  max-width:660px;margin:0 auto;
}
.qgong{
  background:var(--bg3);border:1px solid var(--line);border-radius:10px;
  padding:10px;min-height:150px;display:flex;flex-direction:column;gap:3px;position:relative;
}
.qgong.hl{border-color:var(--gold);box-shadow:0 0 16px rgba(201,169,97,.15)}
.qgong.hl2{border-color:var(--red);box-shadow:0 0 16px rgba(179,64,46,.15)}
.qgong .q-top{display:flex;justify-content:space-between;align-items:center}
.qgong .q-num{font-family:var(--font-serif);font-size:12px;color:var(--gold-dim);letter-spacing:.1em}
.qgong .q-gan{
  font-family:var(--font-serif);font-size:34px;line-height:1;color:var(--ink);
  text-align:center;margin:4px 0 2px;text-shadow:0 0 20px rgba(201,169,97,.15);
}
.qgong .q-star{font-size:12px;color:var(--gold2);text-align:center;letter-spacing:.05em}
.qgong .q-sg{font-size:11px;color:var(--teal);text-align:center}
.qgong .q-men{font-size:13px;color:var(--blue);text-align:center;font-weight:600;letter-spacing:.1em}
.qgong .q-shen{font-size:11px;color:var(--pink);text-align:center}
.qgong .q-zhifu{position:absolute;top:6px;left:6px;font-size:9px;color:#241a05;background:var(--gold);padding:1px 6px;border-radius:4px;letter-spacing:.1em}
.qgong .q-zhishi{position:absolute;top:6px;right:6px;font-size:9px;color:#fff;background:var(--red);padding:1px 6px;border-radius:4px;letter-spacing:.1em}

/* ============ 六壬 ============ */
.sike-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:8px}
.sike{
  background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:12px;text-align:center;
}
.sike .ske-up{font-family:var(--font-serif);font-size:24px;color:var(--gold2);letter-spacing:.05em}
.sike .ske-down{font-family:var(--font-serif);font-size:20px;color:var(--ink);letter-spacing:.05em;margin-top:4px}
.sike .ske-line{width:100%;height:1px;background:var(--line2);margin:6px 0}
.sike .ske-idx{font-size:10px;color:var(--ink3);letter-spacing:.2em}
.sanchuan{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:10px 0 4px}
.schuan{
  background:var(--bg3);border:1px solid var(--line2);border-radius:12px;
  padding:10px 18px;text-align:center;min-width:86px;
}
.schuan .sc-zhi{font-family:var(--font-serif);font-size:26px;color:var(--gold2)}
.schuan .sc-tag{font-size:10px;color:var(--ink3);letter-spacing:.15em;margin-top:2px}
.schuan .sc-qin{font-size:11px;color:var(--teal);margin-top:2px}
.sc-arrow{color:var(--gold-dim);font-size:20px}

/* ============ 梅花 ============ */
.meihua-wrap{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.gua-box{text-align:center}
.gua-box h4{font-size:12px;color:var(--ink3);letter-spacing:.2em;margin-bottom:10px}
.yao{width:86px;height:12px;margin:4px auto;position:relative}
.yao .bar{position:absolute;height:6px;border-radius:3px;background:var(--gold2);box-shadow:0 0 8px rgba(201,169,97,.3)}
.yao.yang .bar{left:0;right:0}
.yao.yin .bar{left:0;width:34px}.yao.yin .bar:nth-child(2){left:auto;right:0}
.yao .dong-dot{position:absolute;top:-4px;right:-14px;font-size:11px;color:var(--red2)}
.gua-name{font-family:var(--font-serif);font-size:17px;color:var(--gold2);margin-top:8px;letter-spacing:.1em}

/* ============ 称骨 / 一掌经 ============ */
.chenggu-total{
  text-align:center;padding:18px 0 10px;
}
.chenggu-total .big{
  font-family:var(--font-serif);font-size:46px;color:var(--gold2);
  text-shadow:0 0 30px rgba(201,169,97,.25);letter-spacing:.06em;
}
.chenggu-total .sub{color:var(--ink3);font-size:12px;margin-top:4px;letter-spacing:.1em}
.chenggu-verse{
  margin-top:12px;padding:14px 16px;background:var(--bg2);border:1px solid var(--line);
  border-radius:10px;color:var(--ink2);font-size:13.5px;line-height:1.9;
  font-family:var(--font-serif);
}
.yizhang-stars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.yz-cell{
  background:var(--bg3);border:1px solid var(--line);border-radius:8px;text-align:center;
  padding:8px 4px;font-size:11px;color:var(--ink2);
}
.yz-cell .yz-zhi{font-family:var(--font-serif);font-size:16px;color:var(--ink);display:block}
.yz-cell .yz-star{color:var(--gold2);display:block;margin-top:2px;font-size:12px}
.yz-cell.hl{border-color:var(--gold-dim);background:rgba(201,169,97,.1)}
.yz-cell.hl .yz-star{color:var(--gold2)}
.yz-poem{
  margin-top:12px;padding:12px 16px;background:var(--bg2);border:1px solid var(--line);
  border-radius:10px;font-family:var(--font-serif);color:var(--gold2);font-size:14px;line-height:2;letter-spacing:.04em;
}
.yz-desc{margin-top:8px;color:var(--ink2);font-size:13px;line-height:1.8}

/* ============ 总览 ============ */
.overview-hero{
  background:linear-gradient(135deg,rgba(201,169,97,.1),rgba(179,64,46,.05));
  border:1px solid var(--line2);border-radius:16px;padding:28px 30px;text-align:center;margin-bottom:18px;
  position:relative;overflow:hidden;
}
.overview-hero::before{
  content:"☯";position:absolute;font-size:220px;opacity:.04;right:-20px;top:-30px;transform:rotate(15deg);
}
.overview-hero .ov-name{font-family:var(--font-serif);font-size:22px;color:var(--gold2);letter-spacing:.15em}
.overview-hero .ov-bazi{
  font-family:var(--font-serif);font-size:clamp(28px,4.5vw,42px);color:var(--ink);
  letter-spacing:.18em;text-indent:.18em;margin:12px 0;text-shadow:0 0 40px rgba(201,169,97,.2);
}
.overview-hero .ov-bazi span{color:var(--gold2)}
.overview-hero .ov-sub{color:var(--ink2);font-size:13px;letter-spacing:.1em}
.overview-hero .ov-sub b{color:var(--teal)}

/* 一致性 */
.consistency{
  display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;
  font-size:12px;letter-spacing:.1em;
}
.consistency.ok{background:rgba(125,183,122,.12);color:var(--green);border:1px solid rgba(125,183,122,.4)}
.consistency.warn{background:rgba(217,106,85,.12);color:var(--red2);border:1px solid rgba(217,106,85,.4)}

/* 加载动画 */
.loading{text-align:center;padding:80px 0;color:var(--ink2)}
.spinner{
  width:52px;height:52px;margin:0 auto 18px;border-radius:50%;
  border:2px solid var(--line2);border-top-color:var(--gold);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ 解读层 ============ */
.jielu{background:linear-gradient(180deg,rgba(201,169,97,.06),rgba(201,169,97,.02));border:1px solid var(--line2)}
.jielu h3{color:var(--gold2)}
.jielu-item{margin:12px 0;padding:12px 14px;background:var(--bg2);border:1px solid var(--line);border-radius:10px}
.jielu-item .j-title{font-size:13px;color:var(--gold);letter-spacing:.12em;margin-bottom:6px;font-weight:600}
.jielu-item .j-title i{font-style:normal;font-size:11px;color:var(--ink3);margin-left:8px;font-weight:400;letter-spacing:.05em}
.jielu-item .j-body{font-size:13px;color:var(--ink2);line-height:1.9}
.jielu-item .j-body b{color:var(--gold2);font-weight:600}
.jielu-item .j-body .key{color:var(--ink);font-weight:600}
.jielu-verse{
  font-family:var(--font-serif);color:var(--gold2);font-size:13.5px;line-height:2;
  padding:10px 14px;background:rgba(201,169,97,.05);border-left:3px solid var(--gold-dim);
  border-radius:6px;margin:8px 0;
}
.jielu-tags{margin-top:8px}
.score-bar{display:flex;align-items:center;gap:10px;margin-top:8px}
.score-track{flex:1;height:6px;background:var(--bg3);border-radius:3px;overflow:hidden}
.score-fill{height:100%;background:linear-gradient(90deg,var(--gold-dim),var(--gold2));border-radius:3px}
.score-num{font-size:12px;color:var(--gold2);min-width:40px;text-align:right}
.jielu-note{margin-top:10px;font-size:11.5px;color:var(--ink3);line-height:1.7}

/* 页脚 */
footer{
  text-align:center;padding:36px 20px 46px;color:var(--ink3);font-size:12px;line-height:2;
  border-top:1px solid var(--line);
}
footer b{color:var(--ink2);font-weight:600}

/* 响应式 */
@media(max-width:860px){
  .form-grid{grid-template-columns:repeat(3,1fr)}
  .bazi-pillars{grid-template-columns:repeat(2,1fr)}
  .ziwei-board{grid-template-columns:repeat(4,1fr)}
  .yz-stars{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .bazi-pillars{grid-template-columns:repeat(2,1fr)}
  .sike-grid{grid-template-columns:repeat(2,1fr)}
  .hero{padding-top:40px}
}