/* ==========================================================================
   周易在线 · 设计令牌与基础样式
   设计语言参照 daodej.wiki：暖纸底、墨紫正文、金色点缀、宋体正文、左侧竖导航
   ========================================================================== */

:root{
  --paper:#f7f4ec;
  --paper-deep:#f4efe6;
  --paper-light:#fdfbf5;
  --card:#ffffff;
  --ink:#2a2438;
  --ink-2:#3a3348;
  --ink-3:#55476e;
  --ink-4:#6f5f8c;
  --ink-5:#8f7fb3;
  --muted:#8a8378;
  --muted-2:#9a91a6;
  --gold:#d4b26a;
  --gold-2:#e6c46a;
  --gold-3:#b8892a;
  --line:#e8e2d6;
  --line-2:#c9c0b0;
  --line-3:#d8d1e2;
  --seal:#a8443a;
  --serif:"Noto Serif SC","Songti SC",STSong,"Source Han Serif SC",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif;
  --shadow:0 1px 2px rgba(42,36,56,.04),0 8px 24px -12px rgba(42,36,56,.10);
  --shadow-h:0 2px 4px rgba(42,36,56,.05),0 14px 34px -14px rgba(42,36,56,.18);
  --r:10px;
  --nav-w:212px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:16px;line-height:1.9;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 18% 8%,rgba(212,178,106,.07),transparent 46%),
                   radial-gradient(circle at 88% 92%,rgba(85,71,110,.05),transparent 44%);
  background-attachment:fixed;
}
a{color:var(--ink-3);text-decoration:none;transition:color .15s}
a:hover{color:var(--gold-3)}
h1,h2,h3,h4{line-height:1.45;margin:0;font-weight:600}
p{margin:0 0 .9em}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
::selection{background:rgba(212,178,106,.32)}

/* ---------------------------------------------------------------- 布局 */
.wrap{display:flex;min-height:100vh}
.topbar{
  position:fixed;top:0;left:0;right:0;height:56px;z-index:40;
  display:flex;align-items:center;gap:18px;padding:0 22px;
  background:rgba(247,244,236,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:baseline;gap:9px;font-size:17px;letter-spacing:.06em}
.brand b{font-weight:600;color:var(--ink)}
.brand span{font-size:11px;color:var(--muted);letter-spacing:.18em;font-family:var(--sans)}
.topbar .spacer{flex:1}
.topbar .tb-link{font-size:12.5px;color:var(--muted);font-family:var(--sans)}
.topbar .tb-link:hover{color:var(--gold-3)}
.langbtn{
  font-size:12px;font-family:var(--sans);border:1px solid var(--line-2);
  color:var(--ink-3);padding:3px 11px;border-radius:999px;letter-spacing:.05em;
}
.langbtn:hover{border-color:var(--gold);color:var(--gold-3)}

.side{
  position:fixed;top:56px;bottom:0;left:0;width:var(--nav-w);
  overflow-y:auto;border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(253,251,245,.9),rgba(247,244,236,.6));
  padding:20px 0 44px;z-index:30;
}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:3px}
.navgrp{margin-bottom:20px}
.navgrp>h4{
  font-size:10.5px;letter-spacing:.26em;color:var(--gold-3);
  font-family:var(--sans);font-weight:500;padding:0 20px 7px;
}
.navgrp a{
  display:flex;align-items:center;gap:8px;padding:5px 20px;font-size:13.5px;
  color:var(--ink-2);border-left:2px solid transparent;
}
.navgrp a:hover{background:rgba(212,178,106,.09);border-left-color:var(--gold);color:var(--ink)}
.navgrp a.on{color:var(--gold-3);border-left-color:var(--gold-3);background:rgba(212,178,106,.13)}
.navgrp a small{margin-left:auto;font-size:10.5px;color:var(--muted-2);font-family:var(--sans)}

.main{flex:1;margin-left:var(--nav-w);padding:56px 0 0;min-width:0}
.inner{max-width:940px;margin:0 auto;padding:34px 46px 96px}

/* ---------------------------------------------------------------- 通用件 */
.crumb{font-size:12px;color:var(--muted);font-family:var(--sans);margin-bottom:20px;letter-spacing:.04em}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--gold-3)}
.crumb i{font-style:normal;margin:0 7px;color:var(--line-2)}

.pagetitle{font-size:31px;letter-spacing:.09em;margin-bottom:10px}
.pagesub{color:var(--muted);font-size:13.5px;margin-bottom:30px;line-height:1.85}
.rule{height:1px;background:linear-gradient(90deg,var(--line-2),transparent);margin:30px 0}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 30px;box-shadow:var(--shadow);margin-bottom:20px;
}
.card.tight{padding:20px 24px}
.card h3{
  font-size:15px;letter-spacing:.14em;color:var(--gold-3);margin-bottom:14px;
  display:flex;align-items:center;gap:10px;font-weight:500;
}
.card h3::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--line-2),transparent)}
.card h4{font-size:14.5px;letter-spacing:.06em;margin:18px 0 8px;color:var(--ink)}
.card h4:first-child{margin-top:0}

.pill{
  display:inline-block;font-size:11.5px;font-family:var(--sans);
  border:1px solid var(--line-2);border-radius:999px;padding:2px 10px;
  color:var(--ink-3);background:var(--paper-light);letter-spacing:.05em;
}
.pill.gold{border-color:rgba(212,178,106,.65);color:var(--gold-3);background:rgba(212,178,106,.10)}
.pill.seal{border-color:rgba(168,68,58,.4);color:var(--seal);background:rgba(168,68,58,.06)}
.pills{display:flex;flex-wrap:wrap;gap:7px}

.meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--muted);
  font-family:var(--sans);margin-bottom:18px}
.meta b{font-weight:500;color:var(--ink-3)}

.notice{
  border-left:3px solid var(--gold);background:rgba(212,178,106,.09);
  padding:12px 16px;font-size:13px;color:var(--ink-2);border-radius:0 var(--r) var(--r) 0;
  margin-bottom:18px;line-height:1.8;
}
.notice.grey{border-left-color:var(--line-2);background:rgba(201,192,176,.13);color:var(--muted)}

.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1100px){.two,.three{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- 卦画 */
.guafig{display:flex;flex-direction:column;gap:5px;width:62px}
.guafig.big{width:88px;gap:7px}
.yl{display:block;height:9px}
.guafig.big .yl{height:13px}
.yl.yang{background:var(--ink);border-radius:1px}
.yl.yin{display:flex;gap:11px}
.guafig.big .yl.yin{gap:16px}
.yl.yin i{flex:1;background:var(--ink);border-radius:1px}
.yl.yang.chg{background:var(--seal)}
.yl.yin.chg i{background:var(--seal)}

.guahero{display:flex;align-items:center;gap:30px;margin-bottom:8px}
.guahero .txt{min-width:0}
.guahero .nm{font-size:40px;letter-spacing:.12em;line-height:1.2}
.guahero .sub{font-size:13px;color:var(--muted);font-family:var(--sans);letter-spacing:.06em}
.tri2{display:flex;gap:26px;font-size:12.5px;color:var(--ink-3);font-family:var(--sans);
  margin-top:12px}
.tri2 span b{color:var(--gold-3);font-weight:500}

/* ---------------------------------------------------------------- 原经文 */
.text{
  font-size:19.5px;line-height:2.35;letter-spacing:.11em;color:var(--ink);
}
.text.sm{font-size:17px;line-height:2.2}
.tuan{font-size:15.5px;line-height:2.15;letter-spacing:.05em;color:var(--ink-2)}
.bai{font-size:14.5px;line-height:2.05;color:var(--ink-2);letter-spacing:.02em}
.bai.dim{color:var(--muted)}
.tlabel{
  font-size:11px;letter-spacing:.24em;color:var(--gold-3);font-family:var(--sans);
  margin-bottom:9px;
}

/* 爻列表 */
.yaolist{display:flex;flex-direction:column;gap:0}
.yaoitem{border-top:1px solid var(--line);padding:16px 0 15px;display:flex;gap:20px}
.yaoitem:first-child{border-top:0}
.yaoitem .pos{
  flex:0 0 52px;font-size:13px;color:var(--gold-3);font-family:var(--sans);
  letter-spacing:.06em;padding-top:4px;
}
.yaoitem .bd{flex:1;min-width:0}
.yaoitem .yc{font-size:17.5px;line-height:2.05;letter-spacing:.09em;color:var(--ink)}
.yaoitem .xc{font-size:13.5px;line-height:1.95;color:var(--ink-3);margin-top:6px;letter-spacing:.03em}
.yaoitem .bc{font-size:13.5px;line-height:1.95;color:var(--muted);margin-top:7px;
  padding-left:12px;border-left:2px solid var(--line)}
.yaoitem .marks{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}

/* ---------------------------------------------------------------- 目录网格 */
.gridgua{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:11px}
.gcell{
  display:flex;gap:13px;align-items:center;padding:12px 13px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.gcell:hover{transform:translateY(-2px);box-shadow:var(--shadow-h);border-color:var(--gold)}
.gcell .guafig{width:34px;gap:3px;flex:0 0 34px}
.gcell .guafig .yl{height:5px}
.gcell .guafig .yl.yin{gap:6px}
.gcell .info{min-width:0}
.gcell .info b{display:block;font-size:15px;font-weight:600;letter-spacing:.05em;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcell .info small{display:block;font-size:10.5px;color:var(--muted-2);font-family:var(--sans);
  letter-spacing:.05em;margin-top:1px}
.gcell .no{
  position:absolute;font-size:9px;color:var(--line-2);font-family:var(--sans);
}
.gcell{position:relative}

.indexgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.icell{
  display:block;padding:15px 17px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);transition:transform .15s,border-color .15s;
}
.icell:hover{transform:translateY(-2px);border-color:var(--gold)}
.icell b{display:block;font-size:15.5px;font-weight:600;letter-spacing:.05em;margin-bottom:5px;color:var(--ink)}
.icell small{display:block;font-size:12px;color:var(--muted);line-height:1.7}
.icell .pills{margin-top:9px}

/* ---------------------------------------------------------------- 折叠 */
.acc{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  margin-bottom:10px;overflow:hidden}
.acc>summary{
  cursor:pointer;padding:13px 18px;font-size:14px;letter-spacing:.08em;
  display:flex;align-items:center;gap:10px;list-style:none;color:var(--ink-2);
}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::before{content:"▸";color:var(--gold-3);font-size:11px;transition:transform .18s}
.acc[open]>summary::before{transform:rotate(90deg)}
.acc>summary:hover{background:rgba(212,178,106,.07)}
.acc>summary small{margin-left:auto;font-size:11px;color:var(--muted-2);font-family:var(--sans)}
.acc .body{padding:2px 18px 18px;border-top:1px solid var(--line);font-size:14px;line-height:1.95}

/* ---------------------------------------------------------------- 表格 */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:11.5px;letter-spacing:.14em;color:var(--gold-3);font-family:var(--sans);font-weight:500;
  background:rgba(212,178,106,.06)}
tbody tr:hover{background:rgba(212,178,106,.05)}
td.num{font-family:var(--sans);color:var(--muted);font-size:12px}
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.tblwrap table{min-width:520px}

/* ---------------------------------------------------------------- 字墙 */
.wall{display:flex;flex-wrap:wrap;gap:4px;align-items:baseline;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--shadow)}
.wall span{
  display:inline-block;line-height:1.15;color:var(--ink);
  font-family:var(--serif);border-radius:3px;transition:background .15s;
}
.wall span:hover{background:rgba(212,178,106,.3)}
.wall span hot{color:var(--seal)}

.barchart{display:flex;flex-direction:column;gap:9px}
.barrow{display:flex;align-items:center;gap:12px;font-size:13px}
.barrow .lb{flex:0 0 62px;color:var(--ink-3);text-align:right}
.bar{flex:1;height:15px;background:rgba(201,192,176,.28);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-2))}
.bar.s i{background:linear-gradient(90deg,var(--ink-4),var(--ink-5))}
.bar.seal i{background:linear-gradient(90deg,var(--seal),#c4705f)}
.bar v{flex:0 0 62px;font-family:var(--sans);font-size:12px;color:var(--muted)}

/* ---------------------------------------------------------------- 长河 */
.river{display:flex;flex-direction:column;gap:3px}
.rrow{display:flex;align-items:center;gap:12px}
.rrow .lb{flex:0 0 78px;font-size:13.5px;color:var(--ink-2);letter-spacing:.05em}
.strip{flex:1;display:flex;gap:2px}
.strip i{flex:1;height:20px;background:rgba(201,192,176,.3);border-radius:2px;font-style:normal}
.strip i.on{background:linear-gradient(180deg,var(--gold-2),var(--gold))}
.strip i.on.hi{background:linear-gradient(180deg,var(--seal),#c4705f)}
.rscale{display:flex;gap:2px;margin-left:90px;margin-top:6px}
.rscale i{flex:1;font-size:9px;color:var(--muted-2);font-family:var(--sans);text-align:center;font-style:normal}

/* ---------------------------------------------------------------- 星图 */
.starmap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden}
.starmap svg{display:block;width:100%;height:auto}

/* ---------------------------------------------------------------- 检索 */
.searchbox{display:flex;gap:10px;margin-bottom:20px}
.searchbox input{
  flex:1;font-family:var(--serif);font-size:16px;padding:12px 16px;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--card);
  color:var(--ink);outline:none;
}
.searchbox input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,178,106,.18)}
.btn{
  font-family:var(--sans);font-size:13px;padding:11px 20px;border-radius:var(--r);
  border:1px solid var(--gold);background:rgba(212,178,106,.14);color:var(--gold-3);
  cursor:pointer;letter-spacing:.06em;transition:all .15s;
}
.btn:hover{background:var(--gold);color:#fff}
.btn.ghost{border-color:var(--line-2);background:var(--card);color:var(--ink-3)}
.btn.ghost:hover{background:var(--paper-deep);color:var(--ink)}
.hit{padding:15px 0;border-top:1px solid var(--line)}
.hit:first-child{border-top:0}
.hit .h1{font-size:14.5px;letter-spacing:.06em;margin-bottom:5px}
.hit .h1 a{color:var(--ink)}
.hit .h2{font-size:13.5px;color:var(--ink-2);line-height:1.9}
.hit mark{background:rgba(212,178,106,.35);color:var(--ink);border-radius:2px;padding:0 1px}

/* ---------------------------------------------------------------- 背诵 */
.recite{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:34px 36px;box-shadow:var(--shadow);text-align:center}
.recite .rt{font-size:24px;line-height:2.6;letter-spacing:.14em;min-height:120px}
.recite .rt w{display:inline-block;width:.7em;border-bottom:1px solid var(--line-2);
  color:transparent;margin:0 .1em;transition:color .3s}
.recite .rt w.show{color:var(--muted-2)}
.recite .rt w.hint{color:var(--gold-3)}
.hidden{display:none!important}

/* ---------------------------------------------------------------- 静坐 */
.medwrap{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:74vh;text-align:center;gap:30px}
.breath{
  width:236px;height:236px;border-radius:50%;position:relative;
  border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,rgba(212,178,106,.16),transparent 68%);
  transition:transform 4s cubic-bezier(.4,0,.2,1);
}
.breath::after{content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid rgba(212,178,106,.5);animation:none}
.breath .ph{font-size:12.5px;letter-spacing:.3em;color:var(--gold-3);font-family:var(--sans)}
.medlines{max-width:520px}
.medlines .ml{font-size:19px;line-height:2.3;letter-spacing:.12em;color:var(--ink);
  opacity:.28;transition:opacity .5s}
.medlines .ml.on{opacity:1}
.medlines .ml small{display:block;font-size:11.5px;color:var(--muted-2);font-family:var(--sans);
  letter-spacing:.1em;margin-top:4px;opacity:.9}

/* ---------------------------------------------------------------- 文与史 */
.timeline{border-left:1px solid var(--line-2);margin-left:6px;padding-left:26px}
.tl{position:relative;padding-bottom:26px}
.tl::before{content:"";position:absolute;left:-31px;top:8px;width:9px;height:9px;
  border-radius:50%;background:var(--paper);border:2px solid var(--gold)}
.tl .era{font-size:11.5px;letter-spacing:.2em;color:var(--gold-3);font-family:var(--sans);
  margin-bottom:5px}
.tl h4{font-size:16px;letter-spacing:.08em;margin-bottom:7px}
.tl p{margin:0;font-size:14px;line-height:1.95;color:var(--ink-2)}

.steps{counter-reset:s;display:flex;flex-direction:column;gap:0}
.step{display:flex;gap:16px;padding:15px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0}
.step .sn{
  counter-increment:s;flex:0 0 28px;height:28px;border-radius:50%;
  background:rgba(212,178,106,.15);border:1px solid var(--gold);
  color:var(--gold-3);font-family:var(--sans);font-size:12px;
  display:flex;align-items:center;justify-content:center;
}
.step .sn::before{content:counter(s)}
.step .sb b{display:block;font-size:14.5px;margin-bottom:4px;letter-spacing:.05em}
.step .sb p{margin:0;font-size:13.5px;color:var(--ink-3);line-height:1.9}

/* ---------------------------------------------------------------- 页脚 */
.foot{border-top:1px solid var(--line);margin-top:60px;padding-top:26px;
  font-size:12.5px;color:var(--muted);line-height:1.95}
.foot .fl{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:14px;font-family:var(--sans)}
.foot .fl a{color:var(--muted)}
.foot .fl a:hover{color:var(--gold-3)}
.foot .seal{color:var(--seal);letter-spacing:.2em;font-size:11.5px}

.prevnext{display:flex;gap:14px;margin-top:34px}
.prevnext a{
  flex:1;padding:15px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);box-shadow:var(--shadow);transition:border-color .15s,transform .15s;
}
.prevnext a:hover{border-color:var(--gold);transform:translateY(-2px)}
.prevnext small{display:block;font-size:11px;color:var(--muted-2);font-family:var(--sans);
  letter-spacing:.14em;margin-bottom:4px}
.prevnext b{font-size:15px;letter-spacing:.07em}
.prevnext .r{text-align:right}

.fade{animation:fadeUp .5s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media(max-width:860px){
  :root{--nav-w:0px}
  .side{
    position:fixed;top:56px;left:0;right:0;width:auto;max-height:0;overflow:hidden;
    border-right:0;border-bottom:1px solid var(--line);transition:max-height .3s;
  }
  .side.open{max-height:74vh;overflow-y:auto}
  .main{margin-left:0}
  .inner{padding:26px 20px 80px}
  .guahero{flex-direction:column;align-items:flex-start;gap:18px}
  .guahero .nm{font-size:32px}
  #navtoggle{display:inline-flex!important}
}
#navtoggle{display:none;background:none;border:0;font-size:19px;color:var(--ink-3);
  cursor:pointer;padding:0 2px}