:root{
  --ink:#2b2118;
  --paper:#f5ecd8;
  --paper-deep:#efe2c4;
  --vermilion:#b22222;
  --vermilion-deep:#8c1a1a;
  --gold:#b8860b;
  --gold-light:#d4af37;
  --jade:#3a7d6e;
  --line:#c9b48a;
  --shadow:rgba(80,50,20,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Noto Serif SC","Songti SC",STSong,"SimSun",serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 10%, #fbf3df 0%, #f3e8cc 45%, #ecdab6 100%);
  min-height:100vh;
  line-height:1.7;
  position:relative;
}
.paper-grain{
  position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    radial-gradient(rgba(150,110,60,.06) 1px, transparent 1px),
    radial-gradient(rgba(150,110,60,.05) 1px, transparent 1px);
  background-size:22px 22px, 14px 14px;
  background-position:0 0, 7px 7px;
}
.site-header,.container,.site-footer{position:relative;z-index:1}

/* Header */
.site-header{
  text-align:center;
  padding:26px 16px 10px;
  border-bottom:2px solid var(--line);
  background:linear-gradient(180deg, rgba(178,34,34,.06), transparent);
}
.brand{display:inline-flex;align-items:center;gap:16px;justify-content:center}
.brand-seal{
  width:62px;height:62px;border-radius:8px;
  background:var(--vermilion);color:#fdf3e0;
  display:flex;align-items:center;justify-content:center;
  font-family:"Ma Shan Zheng","Noto Serif SC",serif;
  font-size:42px;line-height:1;
  box-shadow:0 3px 10px var(--shadow), inset 0 0 0 2px rgba(255,255,255,.25);
}
.brand-text h1{
  font-family:"Ma Shan Zheng","Noto Serif SC",serif;
  font-size:40px;letter-spacing:6px;color:var(--vermilion-deep);
  text-shadow:1px 1px 0 rgba(212,175,55,.4);
}
.brand-text p{font-size:13px;color:var(--gold);letter-spacing:2px;margin-top:2px}

.top-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}
.nav-btn{
  font-family:inherit;font-size:15px;letter-spacing:2px;
  padding:9px 22px;cursor:pointer;
  color:var(--ink);background:transparent;
  border:1px solid var(--line);border-radius:4px;
  transition:.25s;
}
.nav-btn:hover{background:rgba(184,134,11,.12)}
.nav-btn.active{
  background:var(--vermilion);color:#fdf3e0;border-color:var(--vermilion-deep);
  box-shadow:0 2px 8px var(--shadow);
}

/* Layout */
.container{max-width:960px;margin:24px auto;padding:0 16px}
.panel-card{
  background:linear-gradient(180deg,#fbf4e2,#f4e8cd);
  border:1px solid var(--line);border-radius:10px;
  padding:26px 28px;margin-bottom:20px;
  box-shadow:0 6px 20px var(--shadow);
  position:relative;
}
.panel-card::before{
  content:"";position:absolute;inset:6px;border:1px solid rgba(184,134,11,.35);
  border-radius:6px;pointer-events:none;
}
.panel-title{
  font-family:"Ma Shan Zheng","Noto Serif SC",serif;
  font-size:28px;color:var(--vermilion-deep);text-align:center;letter-spacing:3px;
}
.panel-sub{text-align:center;color:var(--gold);font-size:13px;margin:6px 0 20px}

.tab-panel{display:none;animation:fade .4s ease}
.tab-panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Forms */
.form-row{display:flex;align-items:center;gap:12px;margin:12px 0;flex-wrap:wrap}
.form-row.inline{justify-content:center}
.form-row label{min-width:74px;font-weight:600;color:var(--vermilion-deep)}
.field{
  font-family:inherit;font-size:15px;padding:8px 12px;
  border:1px solid var(--line);border-radius:5px;
  background:#fffdf6;color:var(--ink);flex:1;min-width:160px;
}
.field.small{width:90px;flex:none;min-width:auto;text-align:center}
select.field{cursor:pointer}
.btn{
  font-family:inherit;font-size:15px;letter-spacing:1px;cursor:pointer;
  padding:9px 22px;border-radius:5px;border:1px solid var(--vermilion-deep);
  background:#fff7e8;color:var(--vermilion-deep);transition:.2s;
}
.btn:hover{background:#fdeccd}
.btn-primary{
  background:linear-gradient(180deg,var(--vermilion),var(--vermilion-deep));
  color:#fdf3e0;border-color:var(--vermilion-deep);
  box-shadow:0 3px 10px var(--shadow);
}
.btn-primary:hover{filter:brightness(1.06)}

/* Almanac */
.almanac-result{margin-top:18px}
.alm-head{text-align:center;padding:14px 0;border-bottom:1px dashed var(--line);margin-bottom:14px}
.alm-date-big{font-family:"Ma Shan Zheng",serif;font-size:34px;color:var(--vermilion-deep)}
.alm-sub{color:var(--gold);font-size:14px;margin-top:4px}
.alm-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.alm-box{background:#fffdf6;border:1px solid var(--line);border-radius:6px;padding:14px}
.alm-box h4{color:var(--vermilion);font-size:15px;margin-bottom:8px;border-left:3px solid var(--gold);padding-left:8px}
.tag-list{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-block;background:rgba(58,125,110,.12);color:var(--jade);border:1px solid rgba(58,125,110,.4);border-radius:4px;padding:3px 10px;font-size:14px}
.tag.bad{background:rgba(178,34,34,.1);color:var(--vermilion);border-color:rgba(178,34,34,.4)}
.alm-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.alm-meta div{background:#fffdf6;border:1px solid var(--line);border-radius:6px;padding:8px;text-align:center;font-size:13px}
.alm-meta b{display:block;color:var(--gold);font-size:12px;font-weight:400;margin-bottom:2px}

/* Bazi */
.bazi-form{max-width:520px;margin:0 auto}
.bazi-result{margin-top:22px}
.pillar-row{display:flex;justify-content:center;gap:10px;margin:14px 0}
.pillar{
  background:linear-gradient(180deg,#fffdf6,#f6ecd2);
  border:1px solid var(--line);border-radius:8px;
  width:104px;padding:10px 6px;text-align:center;position:relative;
}
.pillar .col-label{font-size:12px;color:var(--gold);margin-bottom:6px}
.pillar .gan{font-size:30px;font-weight:700;line-height:1.1}
.pillar .zhi{font-size:30px;font-weight:700;line-height:1.1;margin-top:2px}
.pillar .wuxing{font-size:12px;margin-top:6px;color:#fff;display:inline-block;border-radius:3px;padding:1px 8px}
.pillar .shishen{font-size:12px;color:var(--vermilion);margin-top:5px}
.gan.wood,.zhi.wood{color:#2e7d32}.gan.fire,.zhi.fire{color:#c62828}
.gan.earth,.zhi.earth{color:#8d6e2f}.gan.metal,.zhi.metal{color:#757575}
.gan.water,.zhi.water{color:#1565c0}
.wuxing.wood{background:#2e7d32}.wuxing.fire{background:#c62828}
.wuxing.earth{background:#8d6e2f}.wuxing.metal{background:#757575}.wuxing.water{background:#1565c0}
.bazi-section{background:#fffdf6;border:1px solid var(--line);border-radius:8px;padding:16px;margin-top:14px}
.bazi-section h4{color:var(--vermilion);font-size:16px;margin-bottom:10px;border-left:3px solid var(--gold);padding-left:8px}
.wuxing-bars{display:flex;gap:8px;flex-wrap:wrap}
.wbar{flex:1;min-width:90px;text-align:center;background:#fbf3df;border-radius:6px;padding:8px 4px;border:1px solid var(--line)}
.wbar .wname{font-size:13px;color:var(--gold)}
.wbar .wcount{font-size:24px;font-weight:700;margin:2px 0}
.wbar .wword{font-size:12px;color:var(--vermilion)}
.dayun-list{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.dayun-item{background:#fbf3df;border:1px solid var(--line);border-radius:6px;padding:6px 9px;text-align:center;min-width:58px}
.dayun-item .dy-gz{font-size:18px;font-weight:700}
.dayun-item .dy-age{font-size:11px;color:var(--gold)}
.analysis-text{font-size:14px;line-height:1.9;color:var(--ink)}
.analysis-text b{color:var(--vermilion-deep)}

/* 命盘解说 */
.bazi-detail{margin-top:14px;border:1px solid var(--gold);border-radius:10px;background:#fffdf6;padding:0;overflow:hidden}
.bazi-detail>summary{cursor:pointer;list-style:none;padding:14px 18px;font-size:17px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--vermilion),var(--vermilion-deep));user-select:none}
.bazi-detail>summary::-webkit-details-marker{display:none}
.bazi-detail>summary::before{content:"▾ ";font-size:14px}
.bazi-detail:not([open])>summary::before{content:"▸ "}
.bazi-detail[open] summary{margin-bottom:0}
.cmt-block{padding:14px 18px;border-bottom:1px dashed var(--line)}
.cmt-block:last-of-type{border-bottom:none}
.cmt-block h4{color:var(--vermilion);font-size:15px;margin-bottom:8px;border-left:3px solid var(--gold);padding-left:8px}
.cmt-block p{font-size:14px;line-height:2;color:var(--ink);text-align:justify}
.cmt-block p b{color:var(--vermilion-deep)}
.cmt-pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:4px}
.cmt-p{background:#fbf3df;border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.cmt-p-head{font-size:15px;font-weight:700;color:var(--gold);margin-bottom:4px}
.cmt-p-head .cmt-lab{display:inline-block;background:var(--vermilion);color:#fff;font-size:12px;border-radius:4px;padding:1px 6px;margin-right:6px;font-weight:400}
.cmt-p-pos{font-size:12px;color:var(--gold);margin-bottom:4px}
.cmt-p-desc{font-size:13px;line-height:1.8;color:var(--ink)}
.cmt-note{margin:0;padding:12px 18px;font-size:12px;color:var(--gold);background:#f3e8cc;text-align:center}
@media(max-width:520px){.cmt-pillars{grid-template-columns:1fr}}

/* 周易占卜 */
.gua-process{margin:6px 0 4px}
.toss-list{display:flex;flex-direction:column;gap:4px;max-width:340px;margin:0 auto}
.toss-item{display:flex;align-items:center;justify-content:space-between;background:#fbf3df;border:1px solid var(--line);border-radius:6px;padding:5px 12px;font-size:13px}
.toss-no{color:var(--gold);font-weight:700}
.toss-coins{letter-spacing:2px;color:var(--ink);font-size:15px}
.toss-type{padding:1px 8px;border-radius:10px;background:#efe2c4;color:var(--gold)}
.toss-type.changing{background:var(--vermilion);color:#fff}

.gua-result-head{margin:16px 0 8px;font-size:16px;font-weight:700;color:var(--vermilion-deep);border-bottom:2px solid var(--gold);padding-bottom:4px}
.gua-card{background:#fffdf6;border:1px solid var(--line);border-radius:10px;padding:16px;margin-top:10px;max-width:640px;margin-left:auto;margin-right:auto}
.gua-card-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.gua-symbol{font-size:44px;line-height:1;color:var(--vermilion)}
.gua-name{font-size:22px;font-weight:700;color:var(--ink)}
.gua-sub{font-size:13px;color:var(--gold)}

.gua-lines{display:flex;flex-direction:column;gap:7px;align-items:center;margin:10px 0 14px;padding:10px 0;background:#fbf3df;border-radius:8px}
.line{display:flex;align-items:center;justify-content:center}
.bar{background:var(--ink);border-radius:2px}
.line.yang .bar{width:130px;height:11px}
.line.yin .bar.half{width:54px;height:11px}
.line .gap{width:18px}
.line.changing .bar{background:var(--vermilion)}
.change-mark{margin-left:10px;color:var(--vermilion);font-weight:700;font-size:16px}

.gua-block{text-align:left;margin-top:12px}
.gua-block h4{color:var(--vermilion);font-size:15px;margin-bottom:6px;border-left:3px solid var(--gold);padding-left:8px}
.gua-block p{font-size:14px;line-height:1.9}
.gua-xiang{color:var(--jade);font-style:italic}
.gua-yao{display:flex;flex-direction:column;gap:8px}
.yao-item{background:#fbf3df;border:1px solid var(--line);border-radius:6px;padding:8px 12px}
.yao-item.active{background:#fdecec;border-color:var(--vermilion);box-shadow:0 0 0 2px rgba(178,34,34,.15)}
.yao-head{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.yao-name{font-weight:700;color:var(--vermilion-deep)}
.yao-tag{font-size:11px;background:var(--vermilion);color:#fff;border-radius:10px;padding:1px 8px}
.yao-ci{font-size:14px;line-height:1.8}
.yao-xiang{font-size:12px;color:var(--jade);margin-top:2px}
.gua-jie{background:#f3e8cc;border-radius:8px;padding:12px 14px}

/* 起卦方式切换 */
.method-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:6px 0 4px;
  border-bottom:1px solid var(--line);padding-bottom:10px}
.method-btn{font-family:"Ma Shan Zheng","STKaiti","KaiTi",serif;font-size:17px;
  padding:5px 22px;border:1px solid var(--gold);border-radius:20px;
  background:#fffdf6;color:var(--gold);cursor:pointer;transition:.2s}
.method-btn:hover{background:#fbf3df}
.method-btn.active{background:var(--vermilion);border-color:var(--vermilion);color:#fff;
  box-shadow:0 2px 8px rgba(178,34,34,.3)}
.method-panel{display:none}
.method-panel.active{display:block}
.method-desc{font-size:13px;line-height:1.9;color:var(--ink);opacity:.85;
  background:#fbf3df;border:1px dashed var(--line);border-radius:8px;
  padding:10px 14px;margin:12px auto 10px;max-width:640px;text-align:left}
.method-desc b{color:var(--vermilion-deep)}

/* 起卦信息条 */
.zy-meta{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:14px 0 4px}
.zy-meta-item{font-size:12px;color:var(--gold);background:#fbf3df;
  border:1px solid var(--line);border-radius:14px;padding:3px 12px}
.zy-meta-item b{color:var(--vermilion-deep)}

/* 体用总览 */
.tiyong-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  max-width:640px;margin:8px auto 0}
.ty-cell{background:#fffdf6;border:1px solid var(--line);border-radius:8px;padding:10px 12px;text-align:left}
.ty-label{font-size:12px;color:var(--gold);margin-bottom:3px}
.ty-main{font-size:15px;font-weight:700;color:var(--vermilion-deep);line-height:1.5}
.ty-sub{font-size:12px;color:var(--ink);opacity:.75;line-height:1.6;margin-top:3px}

/* 蓍草过程 */
.yarrow-list{display:flex;flex-direction:column;gap:8px;max-width:640px;margin:0 auto}
.yarrow-item{background:#fbf3df;border:1px solid var(--line);border-radius:8px;padding:8px 12px;text-align:left}
.yarrow-item.changing{background:#fdecec;border-color:var(--vermilion)}
.yarrow-no{font-size:13px;font-weight:700;color:var(--gold);margin-bottom:4px}
.yarrow-detail{display:flex;flex-direction:column;gap:2px}
.yarrow-bian{font-size:11.5px;color:var(--ink);opacity:.8;letter-spacing:.2px}
.yarrow-result{font-size:13.5px;color:var(--vermilion-deep);margin-top:5px}

/* 时间起卦算式 */
.time-formula{max-width:640px;margin:10px auto 0;background:#fbf3df;
  border:1px solid var(--line);border-radius:8px;padding:10px 14px;
  font-size:13px;line-height:2;color:var(--ink);text-align:left}
.time-formula b{color:var(--vermilion-deep)}

/* 分维度解卦 */
.dim-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.dim-card{background:#fffdf6;border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:8px;padding:12px 14px;text-align:left}
.dim-card.lv-ji{border-left-color:#2e7d32}
.dim-card.lv-ping{border-left-color:#c9a227}
.dim-card.lv-xiong{border-left-color:#b22222}
.dim-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;
  border-bottom:1px solid var(--line);padding-bottom:6px}
.dim-badge{display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:var(--vermilion);color:#fff;
  font-size:13px;font-weight:700;font-family:"Ma Shan Zheng","STKaiti",serif}
.dim-name{font-size:15px;font-weight:700;color:var(--ink);flex:1}
.dim-level{font-size:12px;font-weight:700;padding:1px 10px;border-radius:10px;color:#fff}
.dim-card.lv-ji .dim-level{background:#2e7d32}
.dim-card.lv-ping .dim-level{background:#c9a227}
.dim-card.lv-xiong .dim-level{background:#b22222}
.dim-text{font-size:13px;line-height:1.95;color:var(--ink)}
.dim-text b{color:var(--vermilion-deep)}

.zy-note{margin:16px auto 0;max-width:640px;font-size:12px;line-height:1.8;
  color:var(--gold);text-align:center;border-top:1px dashed var(--line);padding-top:10px}

@media(max-width:520px){
  .gua-symbol{font-size:36px}
  .gua-name{font-size:19px}
  .gua-card-head{gap:8px}
  .line.yang .bar{width:100px}
  .line.yin .bar.half{width:40px}
  .tiyong-grid{grid-template-columns:1fr 1fr}
  .dim-grid{grid-template-columns:1fr}
  .method-btn{font-size:15px;padding:5px 16px}
  .yarrow-bian{font-size:10.5px}
}

/* Hepan */
.hepan-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:14px 0}
.hepan-col{background:#fffdf6;border:1px solid var(--line);border-radius:8px;padding:16px}
.hepan-col h3{text-align:center;color:var(--vermilion);margin-bottom:8px;font-family:"Ma Shan Zheng",serif;font-size:22px}
.hepan-result{margin-top:18px}
.score-ring{text-align:center;margin:10px 0 18px}
.score-num{font-family:"Ma Shan Zheng",serif;font-size:56px;color:var(--vermilion-deep)}
.score-label{color:var(--gold);font-size:14px}
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.match-box{background:#fffdf6;border:1px solid var(--line);border-radius:8px;padding:14px}
.match-box h4{color:var(--vermilion);font-size:15px;margin-bottom:8px;border-left:3px solid var(--gold);padding-left:8px}

/* Guanyin */
/* 观音圣像 */
.guanyin-portrait{text-align:center;margin:16px 0 12px}
.guanyin-portrait img{
  display:inline-block;
  max-width:320px;
  width:100%;
  height:auto;
  border-radius:10px;
  border:3px solid var(--gold);
  box-shadow:0 4px 20px var(--shadow),0 0 40px rgba(184,134,11,.15);
  background:#f5ecd8;
}
.guanyin-caption{
  display:block;
  margin-top:8px;
  font-size:16px;
  letter-spacing:4px;
  color:var(--vermilion-deep);
  font-weight:700
}
@media(max-width:520px){
  .guanyin-portrait img{max-width:240px}
  .guanyin-caption{font-size:14px;letter-spacing:2px}
}

.guanyin-actions{display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;margin:10px 0 18px}
.lot-result{margin-top:10px}
.lot-card{
  background:linear-gradient(180deg,#fffdf6,#f6ecd2);
  border:1px solid var(--gold);border-radius:10px;padding:24px;
  text-align:center;box-shadow:0 6px 20px var(--shadow);
  animation:pop .5s ease;
}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.lot-no{font-family:"Ma Shan Zheng",serif;font-size:30px;color:var(--vermilion-deep)}
.lot-level{display:inline-block;margin:8px 0;padding:3px 16px;border-radius:20px;font-size:15px;letter-spacing:2px;color:#fff}
.lot-level.up{background:linear-gradient(90deg,#c62828,#e53935)}
.lot-level.mid{background:linear-gradient(90deg,#b8860b,#d4af37)}
.lot-level.down{background:linear-gradient(90deg,#5d4037,#795548)}
.lot-poem{font-family:"Noto Serif SC",serif;font-size:20px;line-height:2;color:var(--ink);margin:14px auto;max-width:460px}
.lot-poem span{display:block}
.lot-block{text-align:left;max-width:620px;margin:14px auto 0;background:#fffdf6;border:1px solid var(--line);border-radius:8px;padding:14px 18px}
.lot-block h4{color:var(--vermilion);font-size:15px;margin-bottom:6px;border-left:3px solid var(--gold);padding-left:8px}
.lot-block p{font-size:14px;line-height:1.9}
.lot-xianji{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 18px;font-size:13px}
.lot-xianji div{display:flex;justify-content:space-between;border-bottom:1px dotted var(--line);padding:2px 0}
.lot-xianji b{color:var(--gold);font-weight:400}
.lot-allusion{font-style:italic;color:var(--jade)}

/* Footer */
.site-footer{text-align:center;padding:24px 16px 36px;color:var(--gold);font-size:12px}

@media(max-width:680px){
  .alm-grid,.match-grid,.hepan-grid{grid-template-columns:1fr}
  .brand-text h1{font-size:32px}
  .pillar{width:72px}
  .pillar .gan,.pillar .zhi{font-size:22px}
  .lot-xianji{grid-template-columns:1fr}
}