/* ============================================================================
 * 星命学 · 玄机  —  中国传统神秘视觉风格
 * 玄墨(ink) + 朱砂(vermillion) + 赤金(gold) + 宣纸(rice-paper)
 * ==========================================================================*/
:root{
  --ink-900:#07060d; --ink-800:#0d0b18; --ink-700:#15122a; --ink-600:#1f1a3a;
  --ink-500:#2a2348; --ink-line:rgba(201,162,39,.18);
  --paper:#efe6d2; --paper-2:#e6dac0; --paper-line:#cdbf9d;
  --zhu:#d6402c; --zhu-2:#e85b3e; --zhu-deep:#a32a1c;
  --gold:#c9a227; --gold-2:#e3c45a; --gold-soft:rgba(201,162,39,.55);
  --jade:#3fae6b; --azure:#3a7bd5; --violet:#8a6fd4;
  --text:#ece3cf; --text-dim:#b9ad92; --text-faint:#8c8268;
  --xiang-dong:#2f8f57; --xiang-bei:#3a6fd0; --xiang-xi:#c9b94e; --xiang-nan:#d6402c;
  --radius:14px; --radius-sm:9px;
  --serif:"Songti SC","STSong","SimSun","Noto Serif SC",serif;
  --kai:"STKaiti","KaiTi","Kaiti SC","Noto Serif SC",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--text);
  background:
    radial-gradient(1200px 700px at 75% -10%,rgba(138,111,212,.16),transparent 60%),
    radial-gradient(900px 600px at 10% 110%,rgba(214,64,44,.12),transparent 55%),
    linear-gradient(160deg,var(--ink-900),var(--ink-800) 40%,var(--ink-700));
  background-attachment:fixed; min-height:100vh; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
/* 星点底纹 */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 70% 60%,rgba(255,255,255,.35),transparent),
    radial-gradient(1.4px 1.4px at 45% 80%,rgba(227,196,90,.5),transparent),
    radial-gradient(1px 1px at 85% 20%,rgba(255,255,255,.4),transparent),
    radial-gradient(1px 1px at 35% 15%,rgba(255,255,255,.3),transparent);
}
#starfield{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.85}
.wrap{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:0 18px}

/* ---------- 导航 ---------- */
.nav{
  position:sticky;top:0;z-index:30;backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(7,6,13,.92),rgba(7,6,13,.55));
  border-bottom:1px solid var(--ink-line);
}
.nav-inner{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:18px;padding:12px 18px;flex-wrap:wrap}
.brand{font-family:var(--kai);font-size:22px;letter-spacing:3px;color:var(--gold-2);display:flex;align-items:center;gap:10px;font-weight:700}
.brand .seal-mini{width:30px;height:30px;border:1.5px solid var(--zhu);color:var(--zhu);display:grid;place-items:center;border-radius:6px;font-size:15px;background:rgba(214,64,44,.08)}
.nav-links{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.nav-links a{padding:7px 13px;border-radius:20px;color:var(--text-dim);font-size:14px;letter-spacing:1px;transition:.25s;border:1px solid transparent}
.nav-links a:hover{color:var(--gold-2);border-color:var(--ink-line)}
.nav-links a.active{color:var(--ink-900);background:linear-gradient(135deg,var(--gold-2),var(--gold));font-weight:700}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--ink-line);color:var(--gold-2);border-radius:8px;padding:6px 12px;font-size:18px;cursor:pointer}

/* ---------- 通用容器 ---------- */
.section{padding:46px 0}
.eyebrow{color:var(--zhu-2);letter-spacing:5px;font-size:13px;font-family:var(--kai)}
.title{font-family:var(--kai);font-size:clamp(26px,4vw,40px);color:var(--gold-2);letter-spacing:2px;margin:6px 0 8px;text-shadow:0 0 22px rgba(227,196,90,.25)}
.lead{color:var(--text-dim);max-width:760px;font-size:15.5px}

/* ---------- 卡片 / 宣纸 ---------- */
.card{
  background:linear-gradient(180deg,rgba(21,18,42,.72),rgba(13,11,24,.72));
  border:1px solid var(--ink-line);border-radius:var(--radius);
  padding:22px;position:relative;overflow:hidden;
}
.card.paper{
  background:
    repeating-linear-gradient(0deg,rgba(205,191,157,.04) 0 2px,transparent 2px 5px),
    linear-gradient(180deg,var(--paper),var(--paper-2));
  color:#3a2f1c;border:1px solid var(--paper-line);
}
.card.paper .eyebrow{color:var(--zhu-deep)}
.card.paper .title{color:var(--zhu-deep);text-shadow:none}
.card.paper p{color:#5a4a30}
.card h3{font-family:var(--kai);color:var(--gold-2);font-size:19px;letter-spacing:1px;margin-bottom:10px}
.card.paper h3{color:var(--zhu-deep)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:none;
  font-family:var(--kai);letter-spacing:2px;font-size:15px;padding:11px 22px;border-radius:30px;
  background:linear-gradient(135deg,var(--zhu),var(--zhu-deep));color:#fff;
  box-shadow:0 6px 22px rgba(214,64,44,.35);transition:.25s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(214,64,44,.5)}
.btn.gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#231a05;box-shadow:0 6px 22px rgba(201,162,39,.35)}
.btn.ghost{background:transparent;border:1px solid var(--gold-soft);color:var(--gold-2);box-shadow:none}
.btn.ghost:hover{background:rgba(201,162,39,.1)}

/* ---------- 标签 / 印章 ---------- */
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12.5px;letter-spacing:1px;border:1px solid var(--ink-line);color:var(--text-dim);background:rgba(255,255,255,.02)}
.pill.zhu{color:var(--zhu-2);border-color:rgba(214,64,44,.4)}
.pill.gold{color:var(--gold-2);border-color:var(--gold-soft)}
.pill.ji{color:var(--jade);border-color:rgba(63,174,107,.4)}
.pill.xiong{color:var(--zhu-2);border-color:rgba(214,64,44,.45)}
.seal{font-family:var(--kai);color:#fff;background:var(--zhu);border-radius:8px;padding:6px 8px;writing-mode:vertical-rl;letter-spacing:3px;font-size:14px;box-shadow:0 4px 14px rgba(163,42,28,.5);display:inline-block}

/* ---------- 网格 ---------- */
.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* ---------- 表 ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--ink-line)}
.tbl th{color:var(--gold-2);font-family:var(--kai);font-weight:600;letter-spacing:1px;border-bottom:1px solid var(--gold-soft)}
.tbl tr:hover td{background:rgba(201,162,39,.05)}
.tbl.paper th{color:var(--zhu-deep);border-bottom:1px solid var(--paper-line)}
.tbl.paper td{border-bottom:1px solid rgba(205,191,157,.5);color:#4a3c24}

/* ---------- Hero ---------- */
.hero{position:relative;text-align:center;padding:70px 0 40px;z-index:2}
.hero .big{font-family:var(--kai);font-size:clamp(54px,12vw,128px);line-height:1;letter-spacing:10px;color:transparent;
  background:linear-gradient(180deg,#fff 0%,var(--gold-2) 45%,var(--zhu) 100%);-webkit-background-clip:text;background-clip:text;
  text-shadow:0 0 50px rgba(227,196,90,.25);position:relative}
.hero .big .spark{position:absolute;right:-2%;top:6%;color:var(--zhu);-webkit-text-fill-color:var(--zhu);font-size:.4em}
.hero-sub{margin-top:14px;color:var(--text-dim);letter-spacing:6px;font-family:var(--kai);font-size:clamp(14px,2.4vw,20px)}
.hero-desc{max-width:680px;margin:20px auto 0;color:var(--text-faint);font-size:15px}
.hero-cta{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.baguamini{display:inline-grid;grid-template-columns:repeat(3,16px);gap:3px;margin:26px auto 0;opacity:.8}
.baguamini span{width:16px;height:16px;border:1px solid var(--gold-soft);display:grid;place-items:center;font-size:10px;color:var(--gold-2);border-radius:3px}

/* ---------- 排盘输入 ---------- */
.form-grid{display:grid;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;color:var(--text-dim);letter-spacing:1px}
.field input,.field select{
  background:rgba(7,6,13,.6);border:1px solid var(--ink-line);color:var(--text);
  padding:10px 12px;border-radius:var(--radius-sm);font-size:15px;font-family:var(--sans);width:100%
}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold-soft);box-shadow:0 0 0 2px rgba(201,162,39,.15)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row .field{flex:1;min-width:90px}
.toggle-row{display:flex;gap:10px;align-items:center}
.switch{display:inline-flex;border:1px solid var(--ink-line);border-radius:30px;overflow:hidden}
.switch button{background:none;border:none;color:var(--text-dim);padding:8px 16px;cursor:pointer;font-family:var(--kai);letter-spacing:1px;font-size:14px}
.switch button.on{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#231a05;font-weight:700}

/* ---------- 星盘 SVG ---------- */
.chart-wrap{display:flex;justify-content:center;position:relative}
.chart-svg{width:100%;max-width:520px;height:auto}
.legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.legend .lg{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-dim)}
.dot{width:11px;height:11px;border-radius:50%;display:inline-block}

/* ---------- 诗赋 / 文 ---------- */
.poem{font-family:var(--kai);font-size:16px;line-height:2.1;color:var(--text)}
.poem .t{color:var(--gold-2);font-weight:700}
.scroll-note{border-left:3px solid var(--zhu);padding:4px 0 4px 14px;color:var(--text-dim);font-size:13.5px;font-style:italic}

/* ---------- 二十八宿百科卡 ---------- */
.xiu-card{position:relative;border:1px solid var(--ink-line);border-radius:var(--radius);overflow:hidden;background:linear-gradient(180deg,rgba(21,18,42,.7),rgba(13,11,24,.7));transition:.25s}
.xiu-card:hover{transform:translateY(-4px);border-color:var(--gold-soft);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.xiu-top{display:flex;align-items:center;gap:12px;padding:16px 16px 10px}
.xiu-glyph{font-family:var(--kai);font-size:40px;line-height:1;width:62px;height:62px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--gold-soft)}
.xiu-meta{font-size:12.5px;color:var(--text-dim)}
.xiu-name{font-family:var(--kai);font-size:20px;color:var(--text);letter-spacing:1px}
.xiu-body{padding:0 16px 16px;font-size:13.5px;color:var(--text-faint)}
.xiu-el{position:absolute;top:12px;right:12px;font-family:var(--kai);font-size:13px;padding:2px 8px;border-radius:6px}

/* ---------- 页脚 ---------- */
.foot{position:relative;z-index:2;border-top:1px solid var(--ink-line);margin-top:40px;padding:30px 0 50px;text-align:center;color:var(--text-faint);font-size:13px}
.foot .links{display:flex;gap:16px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
.foot .links a{color:var(--text-dim)}
.foot .links a:hover{color:var(--gold-2)}

/* ---------- 杂项 ---------- */
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.kv b{color:var(--gold-2);font-family:var(--kai);font-weight:600;letter-spacing:1px;text-align:right}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--ink-line),transparent);margin:22px 0}
.tag-wu{font-family:var(--kai)}
.glow{text-shadow:0 0 18px currentColor}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:80;display:none;align-items:center;justify-content:center;padding:20px}
.modal-bg.show{display:flex}
.modal{background:var(--ink-700);border:1px solid var(--gold-soft);border-radius:var(--radius);max-width:460px;width:100%;padding:24px;max-height:88vh;overflow:auto}
.modal h3{font-family:var(--kai);color:var(--gold-2);margin-bottom:12px}
.close-x{float:right;cursor:pointer;color:var(--text-dim);font-size:22px;line-height:1}

/* ---------- 响应式 ---------- */
@media(max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .nav-links{display:none;width:100%;flex-direction:column;gap:4px;margin-top:10px}
  .nav-links.open{display:flex}
  .nav-toggle{display:block}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .section{padding:32px 0}
  .hero{padding:44px 0 26px}
}