/* ============================================================
   六十甲子纳音 · 深沉「古籍刻本」样式
   深色檀木底 + 宣纸刻本面板 + 朱砂印章 + 古金描边
   ============================================================ */
:root{
  --bg:#16100a;          /* 檀木深色底 */
  --bg2:#1f160e;
  --paper:#f1e7cf;       /* 陈年宣纸（刻本正文） */
  --paper3:#FF2121;
  --paper2:#e7d9ba;
  --ink:#241910;         /* 浓墨 */
  --ink2:#4a3c2c;
  --zhu:#a52a1c;         /* 朱砂印泥 */
  --zhu2:#7e1f12;
  --gold:#c19a3f;        /* 古金描线 */
  --gold2:#e0bd63;
  --dai:#52606b;         /* 黛青 */
  --line:rgba(193,154,63,.42);
  --line2:rgba(165,42,28,.55);
  --shadow:0 10px 30px rgba(0,0,0,.55);
  --serif:"Noto Serif CJK SC","Source Han Serif SC","Songti SC","STSong","KaiTi","楷体","AR PL UMing CN",serif;
  --sans:"PingFang SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:var(--sans);
  color:var(--paper);
  background:
    radial-gradient(circle at 15% 10%, rgba(224,189,99,.10), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(165,42,28,.12), transparent 42%),
    radial-gradient(circle at 50% 105%, rgba(82,96,107,.18), transparent 55%),
    linear-gradient(135deg,#1a130b 0%, #16100a 55%, #120c07 100%);
  background-attachment:fixed;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* 古纸 / 木纹噪点 */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.20 0 0 0 0 0.14 0 0 0 0 0.09 0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode:screen;
}
#app{ position:relative; z-index:1; max-width:1120px; margin:0 auto; padding:0 0 96px; }

/* 国风背景：水墨山水（暗化处理）+ 朱红篆刻 */
.bg-art{
  position:fixed; inset:0; z-index:-2; opacity:.16; pointer-events:none;
  background:url('../assets/bg_shanshui.jpg') center/cover no-repeat;
  mix-blend-mode:luminosity;
  filter:sepia(.35) brightness(.6);
}
.bg-seal{
  position:fixed; right:-14px; bottom:70px; z-index:-1; width:160px; height:auto; opacity:.20;
  pointer-events:none; mix-blend-mode:screen; transform:rotate(-6deg);
  filter:invert(1) sepia(1) hue-rotate(-30deg) saturate(3);
}
@media(max-width:760px){ .bg-seal{ width:92px; bottom:80px; } }

/* ---------- 顶部导航（PC）/ 底部标签（手机） ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; margin-bottom:14px;
  background:linear-gradient(180deg,rgba(26,19,11,.96),rgba(22,16,10,.90));
  border-bottom:2px solid var(--zhu);
  backdrop-filter:blur(5px);
}
.brand{ display:flex; align-items:center; gap:9px; flex:1; min-width:0; cursor:pointer; }
.brand .seal{
  width:40px; height:40px; flex:none; border-radius:7px;
  background:var(--zhu); color:var(--paper); font-family:var(--serif); font-weight:700; font-size:16px;
  display:grid; place-items:center; letter-spacing:-2px; line-height:1;
  box-shadow:inset 0 0 0 2px rgba(240,230,207,.35), 0 2px 8px rgba(0,0,0,.5);
}
.brand .seal span{ transform:rotate(-2deg); }
.brand .txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand .t1{ font-family:var(--serif); font-size:19px; letter-spacing:3px; color:var(--paper); }
.brand .t2{ font-size:10px; letter-spacing:2px; color:var(--gold2); }
.nav-links{ display:flex; gap:4px; flex-wrap:wrap; }
.nav-link{
  font-family:var(--serif); font-size:15px; letter-spacing:1px; color:var(--paper2);
  padding:6px 12px; border-radius:4px; cursor:pointer; border:1px solid transparent; background:none; transition:.2s;
}
.nav-link:hover{ color:var(--gold2); }
.nav-link.active{
  color:var(--paper); border-color:var(--line2);
  background:linear-gradient(180deg,#2a1d11,#1c130a);
  box-shadow:inset 0 -2px 0 var(--zhu);
}

/* ---------- 通用面板（刻本双线框） ---------- */
.page{ display:none; animation:fade .4s ease; padding:0 16px; }
.page.active{ display:block; }
@keyframes fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.panel{
  background:
    radial-gradient(circle at 0% 0%, rgba(224,189,99,.06), transparent 40%),
    linear-gradient(180deg,#f3ead4,#ecdfc4);
  color:var(--ink);
  border:1px solid var(--line); border-radius:4px;
  padding:22px 24px; margin-bottom:18px;
  box-shadow:var(--shadow), inset 0 0 40px rgba(120,80,30,.10); position:relative;
}
/* 刻本双线边框 */
.panel::before{
  content:""; position:absolute; inset:5px; border:1px solid rgba(165,42,28,.45); border-radius:2px; pointer-events:none;
}
.panel-title{
  font-family:var(--serif); font-size:18px; letter-spacing:1px; color:var(--ink);
  margin:-4px 0 12px; padding-left:16px; position:relative; font-weight:700;
}
.panel-title .dot{ position:absolute; left:0; top:50%; transform:translateY(-50%); width:9px; height:9px;
  background:var(--zhu); border-radius:1px; rotate:45deg; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
@media(max-width:760px){ .grid-2{ grid-template-columns:1fr; } }

h1,h2,h3{ font-family:var(--serif); }
.muted{ color:#9a8a70; font-size:13px; }
.hint{ font-size:12.5px; color:#8a7a62; margin-top:10px; }
.warn{ background:#f6e2d4; border:1px dashed var(--zhu); color:var(--zhu2); padding:10px 14px; border-radius:4px; margin:12px 0; font-size:13px; }
p{ margin-bottom:10px; }
strong{ color:var(--zhu); }

/* ---------- 首页 Hero（封面刻本） ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(ellipse at 78% 22%, rgba(165,42,28,.22), transparent 55%),
    linear-gradient(160deg,#3a2814,#241710);
  border:1px solid var(--line); border-radius:6px;
  padding:46px 26px 36px; margin:8px 16px 22px; text-align:center; box-shadow:var(--shadow);
}
.hero::after{
  content:""; position:absolute; inset:7px; border:1px solid var(--gold); border-radius:3px; pointer-events:none;
}
.hero::before{
  content:""; position:absolute; inset:11px; border:1px solid rgba(165,42,28,.55); border-radius:2px; pointer-events:none;
}
.hero-seal{
  width:76px; height:76px; margin:0 auto 14px; border-radius:11px;
  background:var(--zhu); color:var(--paper); font-family:var(--serif); font-size:34px; font-weight:700;
  display:grid; place-items:center; letter-spacing:-3px; rotate:-4deg;
  box-shadow:inset 0 0 0 3px rgba(240,230,207,.32), 0 4px 14px rgba(0,0,0,.5);
  position:relative; z-index:2;
}
.hero-cloud{ position:absolute; inset:0; opacity:.30; background:
  radial-gradient(circle at 15% 75%, rgba(82,96,107,.35), transparent 30%),
  radial-gradient(circle at 88% 82%, rgba(82,96,107,.28), transparent 28%); }
.hero-sub{ font-size:13px; letter-spacing:4px; color:var(--gold2); margin-bottom:6px; position:relative; z-index:2; }
.hero-title{ font-size:clamp(42px,11vw,70px); letter-spacing:14px; color:var(--paper); margin-right:-14px; text-shadow:2px 2px 0 var(--zhu), 4px 4px 0 rgba(0,0,0,.4); position:relative; z-index:2; }
.hero-desc{ max-width:620px; margin:16px auto 22px; color:var(--paper2); position:relative; z-index:2; }
.hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative; z-index:2; }
.hero-note{ margin-top:22px; font-size:12px; color:#a99478; letter-spacing:1px; position:relative; z-index:2; }

/* ---------- 按钮（木刻风） ---------- */
.btn{
  font-family:var(--serif); font-size:15px; letter-spacing:1px; color:var(--paper);
  background:linear-gradient(180deg,#2c2012,#1c130a); border:1px solid var(--line); border-radius:4px;
  padding:9px 22px; cursor:pointer; transition:.18s; box-shadow:0 2px 0 rgba(0,0,0,.4);
}
.btn:hover{ transform:translateY(-1px); border-color:var(--gold); color:var(--gold2); }
.btn-primary{
  color:#fbeee4; background:linear-gradient(180deg,#b83928,#8f2719); border-color:var(--zhu2);
  box-shadow:0 3px 0 #5e180e, inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-primary:hover{ color:#fff; filter:brightness(1.08); }
.btn-ghost{ background:transparent; }
.btn-sm{ font-size:13px; padding:6px 14px; }
.back-btn{
  display:inline-block; font-family:var(--serif); font-size:15px; color:var(--gold2);
  background:none; border:none; cursor:pointer; margin:4px 16px 14px; letter-spacing:1px;
}
.back-btn:hover{ color:var(--zhu); text-decoration:underline; }

/* ---------- 纳音卡片 ---------- */
.page-head{ padding:6px 16px 14px; }
.page-head h1{ font-size:28px; letter-spacing:4px; color:var(--paper); }
.card-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; padding:0 16px; margin-bottom:8px;
}
.nayin-card{
  text-align:left; font-family:inherit; color:inherit; cursor:pointer;
  background:linear-gradient(180deg,#f5ecd5,#ecdfc2); color:var(--ink);
  border:1px solid var(--line); border-radius:5px;
  padding:16px; transition:.2s; position:relative; overflow:hidden; box-shadow:0 3px 12px rgba(0,0,0,.35);
}
.nayin-card::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--zhu); transform:scaleX(0); transform-origin:left; transition:.25s;
}
.nayin-card:hover{ transform:translateY(-4px); border-color:var(--gold); box-shadow:0 12px 26px rgba(0,0,0,.5); }
.nayin-card:hover::before{ transform:scaleX(1); }
.nc-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.nc-no{ font-family:var(--serif); font-size:13px; color:#a39170; letter-spacing:1px; }
.nc-name{ font-family:var(--serif); font-size:24px; letter-spacing:2px; color:var(--ink); margin-bottom:4px; }
.nc-pair{ font-size:13px; color:var(--dai); letter-spacing:1px; margin-bottom:8px; }
.nc-yx{ font-size:13px; color:var(--ink2); line-height:1.6; }

.eltag{
  display:inline-block; font-family:var(--serif); font-size:12px; letter-spacing:1px; color:#fff;
  padding:1px 9px; border-radius:3px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);
}
.el-金{ background:#c19a3f; } .el-木{ background:#5b8c5a; } .el-水{ background:#3d6b8f; }
.el-火{ background:#a52a1c; } .el-土{ background:#9a7b4f; }

/* ---------- 筛选 + 分页 ---------- */
.filter-bar{ display:flex; gap:8px; flex-wrap:wrap; padding:4px 16px 14px; }
.chip{
  font-family:var(--serif); font-size:14px; letter-spacing:1px; color:var(--paper2);
  background:#241910; border:1px solid var(--line); border-radius:20px; padding:5px 16px; cursor:pointer; transition:.18s;
}
.chip:hover{ border-color:var(--gold); color:var(--gold2); }
.chip.active{ background:var(--zhu); color:#fbeee4; border-color:var(--zhu2); }
.pager{ display:flex; align-items:center; justify-content:center; gap:14px; padding:16px; }
.pager-info{ font-family:var(--serif); font-size:14px; color:var(--paper2); letter-spacing:1px; }
.pager button:disabled{ opacity:.4; cursor:not-allowed; }

/* ---------- 详情 ---------- */
.detail-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:8px 16px 18px;
}
.dh-left{ flex:1; }
.dh-no{ font-size:13px; letter-spacing:3px; color:var(--gold2); }
.dh-name{ font-family:var(--serif); font-size:44px; letter-spacing:6px; color:var(--paper); line-height:1.1; margin:4px 0 10px; }
.dh-pair{ display:flex; gap:8px; flex-wrap:wrap; }
.pair-chip{
  font-family:var(--serif); font-size:15px; letter-spacing:2px; color:var(--gold2);
  background:#241910; border:1px solid var(--line); border-radius:4px; padding:3px 12px;
}
.detail-meta{ display:flex; flex-wrap:wrap; gap:10px 20px; padding:0 16px 14px; font-size:13px; color:var(--paper2); }
.detail-meta b{ color:var(--gold2); }
.big{ font-family:var(--serif); font-size:17px; line-height:1.9; color:var(--ink); }
.jj{ text-indent:2em; margin-bottom:10px; color:var(--ink); }
.jj:first-child{ text-indent:0; }
.yw{ margin-top:12px; padding-top:10px; border-top:1px dashed rgba(165,42,28,.4); font-size:13px; color:var(--dai); }
.good .panel-title{ color:#3f6b3c; } .bad .panel-title{ color:var(--zhu); }
.good-dot{ background:#5b8c5a; } .bad-dot{ background:var(--zhu); }

/* ---------- 计算器 ---------- */
.calc-form .form-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }
.calc-form label{ display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--paper2); font-family:var(--serif); letter-spacing:1px; }
.calc-form input{
  font-family:var(--sans); font-size:16px; color:var(--ink); text-align:center;
  background:#fbf4e6; border:1px solid var(--line); border-radius:4px; padding:9px 6px; outline:none; transition:.18s;
}
.calc-form input:focus{ border-color:var(--zhu); box-shadow:0 0 0 2px rgba(165,42,28,.25); }
.form-actions{ display:flex; gap:12px; flex-wrap:wrap; }
@media(max-width:600px){ .calc-form .form-row{ grid-template-columns:1fr 1fr; } }
.result-head{ padding:4px 16px 12px; }
.rh-birth{ font-family:var(--serif); font-size:16px; letter-spacing:1px; color:var(--paper2); }
.pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:0 16px 14px; }
@media(max-width:600px){ .pillars{ grid-template-columns:1fr 1fr; } }
.pillar{
  text-align:center; background:linear-gradient(180deg,#f5ecd5,#ecdfc2); color:var(--ink);
  border:1px solid var(--line); border-radius:5px; padding:14px 8px; box-shadow:0 4px 14px rgba(0,0,0,.4); position:relative; overflow:hidden;
}
.pillar::before{ content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--zhu); }
.pl-title{ font-family:var(--serif); font-size:14px; letter-spacing:3px; color:var(--zhu); margin-bottom:8px; }
.pl-gz{ font-family:var(--serif); font-size:34px; letter-spacing:2px; color:var(--ink); line-height:1; }
.pl-z{ color:var(--dai); }
.pl-nayin{ margin:10px auto 6px; max-width:120px; font-family:var(--serif); font-size:15px; letter-spacing:1px; color:var(--ink);
  border:1px solid var(--line); border-radius:4px; padding:4px 6px; background:#fbf4e6; }
.pl-el{ font-size:12px; color:var(--dai); }

.rel-table{ display:flex; flex-direction:column; gap:8px; font-size:14px; }
.rel-row{ display:grid; grid-template-columns:70px 44px 44px 1fr 52px; align-items:center; gap:8px; padding:6px 4px; border-bottom:1px dashed var(--line); }
.rel-row span{ font-family:var(--serif); letter-spacing:1px; color:var(--paper2); }
.rel-row i{ font-style:normal; color:var(--gold2); font-weight:700; }
.rel-row em{ font-style:normal; color:var(--paper2); font-size:12px; }
@media(max-width:520px){ .rel-row{ grid-template-columns:56px 38px 38px 1fr 44px; font-size:12px; } }

/* ---------- 应用 / 学堂 Tabs ---------- */
.tabs{ display:flex; gap:6px; flex-wrap:wrap; padding:4px 16px 14px; }
.tab-link{
  font-family:var(--serif); font-size:15px; letter-spacing:1px; color:var(--paper2);
  background:#241910; border:1px solid var(--line); border-radius:5px 5px 0 0; padding:8px 16px; cursor:pointer; transition:.18s;
}
.tab-link:hover{ color:var(--gold2); border-color:var(--gold); }
.tab-link.active{ color:var(--paper); background:linear-gradient(180deg,#3a2814,#241710); border-bottom-color:transparent; font-weight:700; box-shadow:inset 0 2px 0 var(--zhu); }
.tab-panel{ padding:0 16px; }
.rules{ list-style:none; counter-reset:ru; }
.rules li{ counter-increment:ru; position:relative; padding:9px 8px 9px 38px; border-bottom:1px dashed var(--line); color:var(--ink); }
.rules li::before{
  content:counter(ru); position:absolute; left:0; top:10px; width:22px; height:22px; border-radius:50%;
  background:var(--zhu); color:#fbeee4; font-family:var(--serif); font-size:12px; display:grid; place-items:center;
}
.xq-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.xq-item{ border-left:3px solid var(--c); padding:8px 12px; background:#f5ecd5; border-radius:0 4px 4px 0; }
.xq-name{ display:block; font-family:var(--serif); font-size:16px; letter-spacing:1px; color:var(--c); }
.xq-txt{ font-size:13px; color:var(--ink2); }

/* ---------- 学堂 ---------- */
.jue-box{ font-family:var(--serif); font-size:16px; letter-spacing:1px; line-height:2.1; color:var(--ink); }
.jue-box.big p{ margin-bottom:2px; }
.liuju{ columns:2; column-gap:28px; font-family:var(--serif); font-size:15px; line-height:2.2; letter-spacing:1px; color:var(--ink); }
@media(max-width:560px){ .liuju{ columns:1; } }
.el-groups{ display:grid; gap:12px; }
.el-group{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.el-group-h{ font-family:var(--serif); font-size:20px; letter-spacing:3px; width:44px; text-align:center; color:var(--gold2); }
.el-group-items{ display:flex; gap:8px; flex-wrap:wrap; }
.el-group-items span{ background:#241910; border:1px solid var(--line); border-radius:4px; padding:3px 12px; font-family:var(--serif); font-size:14px; letter-spacing:1px; color:var(--paper); }

.gan-grid,.zhi-grid{ display:grid; gap:8px; margin-bottom:16px; }
.gan-grid{ grid-template-columns:repeat(5,1fr); }
.zhi-grid{ grid-template-columns:repeat(6,1fr); }
@media(max-width:560px){ .gan-grid{grid-template-columns:repeat(5,1fr);} .zhi-grid{grid-template-columns:repeat(4,1fr);} }
.gz-cell{
  text-align:center; background:#f3ead4; border:1px solid var(--line); border-top:3px solid var(--c);
  border-radius:4px; padding:10px 4px; font-family:var(--serif); font-size:22px; letter-spacing:1px; color:var(--c);
}
.gz-cell small{ display:block; font-family:var(--sans); font-size:10px; letter-spacing:0; color:var(--ink2); }

.cs-flow{ display:flex; flex-wrap:wrap; gap:4px; margin:12px 0 16px; }
.cs-flow span{ flex:1; min-width:60px; text-align:center; font-family:var(--serif); font-size:13px; letter-spacing:1px;
  background:linear-gradient(180deg,#3a2814,#241710); color:var(--gold2); border:1px solid var(--line); padding:6px 2px; position:relative; }
.cs-flow span:not(:last-child)::after{ content:"→"; position:absolute; right:-8px; top:50%; transform:translateY(-50%); color:var(--zhu); font-size:12px; z-index:2; }
.cs-list{ display:grid; gap:8px; grid-template-columns:1fr 1fr; }
@media(max-width:600px){ .cs-list{ grid-template-columns:1fr; } }
.cs-list div{ background:#f3ead4; border:1px solid var(--line); border-radius:4px; padding:8px 12px; font-size:13px; color:var(--ink); }
.cs-list b{ color:var(--zhu); }

.dun-table{ width:100%; border-collapse:collapse; margin:10px 0 16px; font-family:var(--serif); font-size:14px; }
.dun-table th,.dun-table td{ border:1px solid var(--line); padding:6px 4px; text-align:center; }
.dun-table th{ background:var(--zhu); color:#fbeee4; font-weight:400; letter-spacing:1px; }
.dun-table td{ background:#f3ead4; color:var(--ink); letter-spacing:1px; }

.faq details{ background:#f3ead4; border:1px solid var(--line); border-radius:4px; margin-bottom:10px; padding:12px 16px; color:var(--ink); }
.faq summary{ font-family:var(--serif); font-size:16px; letter-spacing:1px; cursor:pointer; color:var(--ink); list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"▸"; color:var(--zhu); margin-right:8px; }
.faq details[open] summary::before{ content:"▾"; }
.faq p{ margin:10px 0 0; color:var(--ink2); }

.steps{ list-style:none; counter-reset:s; }
.steps li{ counter-increment:s; position:relative; padding:6px 6px 6px 38px; margin-bottom:6px; color:var(--paper); }
.steps li::before{ content:counter(s); position:absolute; left:0; top:6px; width:24px; height:24px; border-radius:50%;
  background:var(--gold); color:#241710; font-family:var(--serif); font-size:13px; display:grid; place-items:center; }

/* ---------- 综合解读 ---------- */
.comp-h{ font-family:var(--serif); font-size:16px; letter-spacing:1px; color:var(--ink); margin:16px 0 8px; padding-left:12px; border-left:3px solid var(--zhu); }
.comp-overall{ margin-top:8px; font-size:15px; }
.roles{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:6px; }
@media(max-width:600px){ .roles{ grid-template-columns:1fr 1fr; } }
.role{ text-align:center; background:#241910; border:1px solid var(--line); border-radius:5px; padding:10px 6px; }
.role-t{ font-family:var(--serif); font-size:15px; letter-spacing:2px; color:var(--gold2); }
.role-t small{ display:block; font-family:var(--sans); font-size:10px; letter-spacing:0; color:var(--paper2); }
.role-nayin{ margin:8px auto; font-family:var(--serif); font-size:15px; letter-spacing:1px; color:var(--ink); background:#fbf4e6; border:2px solid var(--line); border-radius:4px; padding:4px 2px; }
.role-el{ font-size:11px; color:var(--paper2); }
.pattern-chain{ display:grid; gap:6px; margin-bottom:10px; }
.pc{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; color:var(--ink); background:#241910; border:1px solid var(--line); border-radius:4px; padding:7px 10px; }
.pc i{ font-style:normal; color:var(--gold2); font-family:var(--serif); letter-spacing:1px; }
.pc em{ font-style:normal; color:var(--paper2); font-size:12px; }
.patterns p{ display:flex; align-items:flex-start; gap:8px; margin-bottom:8px; color:var(--ink); }
.patterns .tag{ flex:none; }
.guide{ display:grid; gap:8px; }
.guide div{ display:grid; grid-template-columns:90px 1fr; gap:10px; padding:8px 12px; background:#241910; border:1px solid var(--line); border-radius:4px; color:var(--paper); font-size:13px; }
.guide div span{ color:var(--gold2); font-family:var(--serif); letter-spacing:1px; }
.guide div b{ color:var(--paper); font-weight:400; }
.guide div small{ grid-column:1 / -1; color:#a99478; font-size:11px; }

/* ---------- 计算器通用（合婚 / 团队 / 流年） ---------- */
.tool-form{ display:grid; gap:12px; }
.tool-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media(max-width:600px){ .tool-row{ grid-template-columns:1fr 1fr; } }
.tool-form label{ display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--paper3); font-family:var(--serif); letter-spacing:1px; }
.tool-form select,.tool-form input{
  font-family:var(--sans); font-size:15px; color:var(--ink); text-align:center;
  background:#fbf4e6; border:1px solid var(--line); border-radius:4px; padding:8px 6px; outline:none;
}
.tool-form select:focus,.tool-form input:focus{ border-color:var(--zhu); }
.member-list{ display:grid; gap:10px; }
.member-row{
  display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:end;
  background:#241910; border:1px solid var(--line); border-radius:4px; padding:10px 12px;
}
@media(max-width:600px){ .member-row{ grid-template-columns:1fr 1fr; } }
/* 纳音实时预览（年份 / 日柱） */
.nayin-preview{
  grid-column:1 / -1; margin-top:2px; padding:10px 14px;
  background:#241910; border:1px dashed var(--line); border-radius:4px;
  font-family:var(--serif); font-size:14px; line-height:1.9; color:var(--paper);
}
.nayin-preview:empty{ display:none; }
.nayin-preview div b{ color:var(--gold2); }
.t-prev{ font-family:var(--serif); font-size:13px; color:var(--gold2); white-space:nowrap; }
.member-row .t-prev{ grid-column:2 / 3; align-self:center; padding-bottom:4px; }
.match-result{ display:grid; gap:12px; }
.match-score{
  text-align:center; padding:18px; border:2px solid var(--zhu); border-radius:6px;
  background:linear-gradient(180deg,#3a2814,#241710); color:var(--paper);
}
.match-score .num{ font-family:var(--serif); font-size:52px; letter-spacing:2px; color:var(--gold2); line-height:1; }
.match-score .lbl{ font-size:13px; color:var(--paper3); letter-spacing:2px; margin-top:6px; }
.matrix{ width:100%; border-collapse:collapse; font-family:var(--serif); font-size:14px; }
.matrix th,.matrix td{ border:1px solid var(--line); padding:8px 6px; text-align:center; }
.matrix th{ background:var(--zhu); color:#fbeee4; font-weight:400; }
.matrix td.name{ background:#241910; color:var(--gold2); }
.tag{ display:inline-block; font-size:12px; padding:1px 8px; border-radius:3px; letter-spacing:1px; }
.tag-good{ background:#3f6b3c; color:#eaf3e6; } .tag-bad{ background:var(--zhu); color:#fbeee4; } .tag-mid{ background:#4a5360; color:#eef0f2; }
.flow-list{ display:grid; gap:8px; }
.flow-item{ display:grid; grid-template-columns:90px 1fr; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:4px; background:#241910; }
.flow-item .yr{ font-family:var(--serif); font-size:16px; color:var(--gold2); letter-spacing:1px; }
.flow-item .info{ color:var(--paper); font-size:13px; }
.flow-item .info b{ color:var(--zhu); }

/* ---------- 时辰速查表 ---------- */
.shichen-table{ width:100%; border-collapse:collapse; font-family:var(--serif); font-size:12.5px; }
.shichen-table td{ border:1px solid var(--line); padding:7px 4px; text-align:center; color:var(--paper); }
.shichen-table tr:nth-child(odd) td{ background:#241910; }
.xj-list li{ color:#cfe3c8; } .ej-list li{ color:#f0d3cc; }
.xj-list li::marker{ color:var(--gold2); } .ej-list li::marker{ color:var(--zhu); }

/* ---------- 排盘案例 ---------- */
.case .muted{ color:var(--gold2); letter-spacing:1px; font-family:var(--serif); }
.case-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:14px 0; }
.case-pill{ border:1px solid var(--line2); border-radius:5px; padding:12px 8px; text-align:center;
  background:linear-gradient(180deg,#2a1d10,#1c130a); }
.case-pill p{ margin:6px 0 4px; font-family:var(--serif); }
.case-pill b{ font-size:20px; color:var(--paper); letter-spacing:2px; }
.case-pill span{ display:block; font-size:12px; color:var(--gold2); }
.case-pill small{ font-size:11px; color:var(--paper3); }
@media(max-width:600px){ .case-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- 手机底部导航 ---------- */
.bottombar{ display:none; }
@media(max-width:760px){
  .topbar{ padding:8px 10px; }
  .nav-links{ display:none; }
  .brand .t1{ font-size:16px; }
  .bottombar{
    display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60;
    background:linear-gradient(0deg,rgba(22,16,10,.99),rgba(26,19,11,.96));
    border-top:2px solid var(--zhu); backdrop-filter:blur(5px);
  }
  .bottombar .blink{
    flex:1; text-align:center; padding:7px 2px 6px; cursor:pointer; color:var(--paper2);
    border:none; background:none; font-family:var(--serif); font-size:11px; letter-spacing:.5px; display:flex; flex-direction:column; align-items:center; gap:2px;
  }
  .bottombar .blink .ic{ font-size:19px; line-height:1; color:var(--gold); }
  .bottombar .blink.active{ color:var(--gold2); }
  .bottombar .blink.active .ic{ color:var(--zhu); }
  #app{ padding-bottom:74px; }
}
@media(min-width:761px){
  .bottombar{ display:none !important; }
}
.nav-link{ display:inline-flex; align-items:center; }
@media(max-width:760px){ .nav-link{ display:none; } }