/* ============ 六爻研习 · 样式 ============ */
:root{
  --paper:#f7f2e7;
  --paper-2:#fffdf7;
  --ink:#221d18;
  --ink-2:#4a423a;
  --ink-3:#8a7f72;
  --line:#e0d6c3;
  --line-2:#cdbfa6;
  --cinnabar:#a8332c;
  --cinnabar-2:#c94b3d;
  --jade:#2f7d5b;
  --gold:#b08d3f;
  --wood:#2f8f5b;
  --fire:#cf3a2a;
  --earth:#a9741f;
  --metal:#6f7d86;
  --water:#1f6fb2;
  --shadow:0 1px 2px rgba(60,45,25,.06),0 8px 24px rgba(60,45,25,.07);
  --radius:12px;
  --serif:"Songti SC","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif;
  --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans CJK SC",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(circle at 12% 8%, rgba(176,141,63,.10), transparent 45%),
    radial-gradient(circle at 88% 92%, rgba(47,125,91,.08), transparent 45%),
    var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--cinnabar);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.35;margin:0}
p{margin:.4em 0}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(247,242,231,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:18px;min-height:64px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none;color:inherit;cursor:pointer;border-radius:10px;transition:opacity .15s ease}
.brand:hover{opacity:.82}
.brand:focus-visible{outline:2px solid var(--cinnabar);outline-offset:3px}
.brand-text{display:flex;flex-direction:column;justify-content:center}
.brand h1{margin:0}
.brand .seal{
  width:38px;height:38px;border-radius:8px;
  background:var(--cinnabar);color:#fff;
  font-family:var(--serif);font-size:22px;
  display:grid;place-items:center;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);
}
.brand h1{font-size:18px;letter-spacing:.06em}
.brand p{margin:0;font-size:11px;color:var(--ink-3);letter-spacing:.08em}
.nav{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto}
.nav a{
  padding:6px 11px;border-radius:8px;color:var(--ink-2);
  font-size:14px;white-space:nowrap;
}
.nav a:hover{background:rgba(168,51,44,.07);text-decoration:none}
.nav a.active{background:var(--cinnabar);color:#fff}

/* ---------- 页面 ---------- */
main{padding:26px 0 60px;min-height:60vh}
.page-head{margin-bottom:18px}
.page-head h2{font-size:26px;letter-spacing:.04em}
.page-head p{color:var(--ink-3);margin:2px 0 0;font-size:13.5px}
.sec-title{
  display:flex;align-items:center;gap:8px;margin:26px 0 12px;
  font-family:var(--serif);font-size:18px;color:var(--ink);letter-spacing:.04em;
}
.sec-title::before{content:"";width:4px;height:18px;background:var(--cinnabar);border-radius:2px}
.sec-title small{font-family:var(--sans);font-size:12px;color:var(--ink-3);font-weight:400;letter-spacing:0}

/* ---------- 卡片 ---------- */
.card{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:var(--shadow);
}
.card h3{font-size:16px;margin-bottom:6px}
.card p{font-size:13.5px;color:var(--ink-2)}
.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card.link{cursor:pointer;transition:transform .16s ease,border-color .16s ease}
.card.link:hover{transform:translateY(-2px);border-color:var(--line-2)}

/* 入口大卡 */
.entry{
  position:relative;overflow:hidden;
  background:var(--paper-2);border:1px solid var(--line);border-radius:14px;
  padding:18px;box-shadow:var(--shadow);cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease;
}
.entry:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(60,45,25,.13)}
.entry .big{font-family:var(--serif);font-size:40px;line-height:1;color:var(--cinnabar);opacity:.16;position:absolute;right:12px;top:6px}
.entry h3{font-size:17px;margin-bottom:4px}
.entry p{font-size:13px;color:var(--ink-3);margin:0}
.entry .meta{margin-top:10px;font-size:12px;color:var(--cinnabar)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
  font-family:var(--sans);font-size:14px;
  padding:8px 16px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--paper-2);color:var(--ink);
  transition:all .14s ease;user-select:none;
}
.btn:hover{border-color:var(--cinnabar);color:var(--cinnabar)}
.btn.primary{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff}
.btn.primary:hover{background:var(--cinnabar-2);border-color:var(--cinnabar-2);color:#fff}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 11px;font-size:13px;border-radius:8px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- 标签 / 筛选 ---------- */
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.chip{
  padding:5px 13px;border-radius:20px;font-size:13px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--paper-2);color:var(--ink-2);
  transition:all .12s ease;
}
.chip:hover{border-color:var(--cinnabar)}
.chip.active{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff}
.tag{
  display:inline-block;padding:1px 8px;border-radius:6px;font-size:12px;
  background:rgba(176,141,63,.13);color:#7a5f22;border:1px solid rgba(176,141,63,.25);
}
.tag.red{background:rgba(168,51,44,.1);color:var(--cinnabar);border-color:rgba(168,51,44,.28)}
.tag.green{background:rgba(47,125,91,.1);color:var(--jade);border-color:rgba(47,125,91,.28)}
.tag.blue{background:rgba(31,111,178,.1);color:var(--water);border-color:rgba(31,111,178,.25)}

/* ---------- 五行配色 ---------- */
.wx{font-weight:600}
.wx-木{color:var(--wood)}
.wx-火{color:var(--fire)}
.wx-土{color:var(--earth)}
.wx-金{color:var(--metal)}
.wx-水{color:var(--water)}
.bg-木{background:rgba(47,143,91,.12)}
.bg-火{background:rgba(207,58,42,.1)}
.bg-土{background:rgba(169,116,31,.12)}
.bg-金{background:rgba(111,125,134,.13)}
.bg-水{background:rgba(31,111,178,.1)}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:7px 9px;text-align:left;border-bottom:1px solid var(--line)}
th{font-family:var(--serif);font-size:13px;color:var(--ink-3);font-weight:600;background:rgba(224,214,195,.22)}
tbody tr:hover{background:rgba(224,214,195,.18)}
.table-wrap{overflow-x:auto;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}

/* ---------- 卦象盘 ---------- */
.gua-board{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 12px;box-shadow:var(--shadow);overflow-x:auto;
}
.gua-board-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px;padding:0 4px}
.gua-board-head .gname{font-family:var(--serif);font-size:20px}
.gua-board-head .gsub{font-size:12.5px;color:var(--ink-3)}
table.gua{font-size:14px;min-width:430px}
table.gua tr{height:34px}
table.gua td{border-bottom:1px dashed var(--line);padding:6px 8px;vertical-align:middle}
table.gua tr:last-child td{border-bottom:none}
table.gua .c-pos{width:26px;color:var(--ink-3);font-size:12px;text-align:center}
table.gua .c-ls{width:52px;font-size:13px;color:var(--ink-2)}
table.gua .c-fs{width:96px;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
table.gua .c-lq{width:60px;font-family:var(--serif);font-size:14px;white-space:nowrap}
table.gua .c-nayin{width:92px;white-space:nowrap;font-size:13.5px}
table.gua .c-yao{width:104px}
table.gua .c-mark{width:44px;text-align:center}
table.gua .c-change{width:96px;font-size:12.5px;color:var(--ink-3)}
.yao-bars{display:flex;align-items:center;gap:5px;width:104px;max-width:104px}
.yao-bars .bar{height:11px;border-radius:2px;background:var(--ink);flex:1}
.yao-bars .bar.yin{flex:1}
.yao-bars .gap{width:16px;flex:none}
.yao-bars.moving .bar{background:var(--cinnabar)}
.yao-bars .dot{font-size:13px;color:var(--cinnabar);width:14px;text-align:center;flex:none}
.mark-shi,.mark-ying{
  display:inline-block;min-width:20px;text-align:center;
  font-family:var(--serif);font-size:13px;border-radius:5px;padding:0 4px;
}
.mark-shi{background:var(--cinnabar);color:#fff}
.mark-ying{background:rgba(176,141,63,.18);color:#7a5f22;border:1px solid rgba(176,141,63,.35)}
.fushen{font-size:12px;color:var(--ink-3);border-left:2px solid var(--line-2);padding-left:4px;display:inline-block}

/* ---------- 闪卡 ---------- */
.fc-stage{display:flex;flex-direction:column;align-items:center;gap:16px;padding:6px 0 4px}
.fc{
  width:min(560px,100%);min-height:240px;
  perspective:1200px;cursor:pointer;
}
.fc-inner{position:relative;width:100%;min-height:240px;transition:transform .5s cubic-bezier(.4,.2,.2,1);transform-style:preserve-3d}
.fc.flipped .fc-inner{transform:rotateY(180deg)}
.fc-face{
  position:absolute;inset:0;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;padding:22px;
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:16px;
  box-shadow:0 10px 30px rgba(60,45,25,.10);
}
.fc-face.back{transform:rotateY(180deg);background:linear-gradient(180deg,#fffdf7,#f6efdf)}
.fc-q{font-family:var(--serif);font-size:30px;letter-spacing:.06em}
.fc-hint{font-size:12.5px;color:var(--ink-3)}
.fc-a{font-family:var(--serif);font-size:22px;color:var(--cinnabar);letter-spacing:.04em}
.fc-sub{font-size:13.5px;color:var(--ink-2);max-width:92%}
.fc-count{font-size:12.5px;color:var(--ink-3)}

/* ---------- 选择题 ---------- */
.q-card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.q-title{font-family:var(--serif);font-size:19px;margin-bottom:4px;line-height:1.5}
.q-note{font-size:12.5px;color:var(--ink-3);margin-bottom:12px}
.opts{display:grid;gap:9px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{
  text-align:left;padding:11px 14px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--paper-2);color:var(--ink);
  font-family:var(--sans);font-size:14.5px;transition:all .13s ease;
}
.opt:hover:not(:disabled){border-color:var(--cinnabar);background:rgba(168,51,44,.04)}
.opt:disabled{cursor:default}
.opt.correct{background:rgba(47,125,91,.12);border-color:var(--jade);color:#1f5c42;font-weight:600}
.opt.wrong{background:rgba(168,51,44,.1);border-color:var(--cinnabar);color:var(--cinnabar)}
.opt.dim{opacity:.5}
.feedback{margin-top:12px;padding:11px 14px;border-radius:10px;font-size:13.5px;display:none}
.feedback.show{display:block}
.feedback.ok{background:rgba(47,125,91,.09);border:1px solid rgba(47,125,91,.3);color:#1f5c42}
.feedback.no{background:rgba(168,51,44,.07);border:1px solid rgba(168,51,44,.28);color:#8d2a24}

/* ---------- 进度 ---------- */
.bar{height:8px;background:rgba(224,214,195,.6);border-radius:20px;overflow:hidden}
.bar>i{display:block;height:100%;background:linear-gradient(90deg,var(--cinnabar),var(--cinnabar-2));border-radius:20px;transition:width .35s ease}
.stat{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--ink-2)}
.stat b{font-family:var(--serif);font-size:20px;color:var(--cinnabar);display:block;line-height:1.2}

/* ---------- 步骤条 ---------- */
.steps{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 14px}
.step{
  font-size:12.5px;padding:4px 10px;border-radius:20px;
  background:rgba(224,214,195,.42);color:var(--ink-3);border:1px solid transparent;
}
.step.active{background:var(--cinnabar);color:#fff}
.step.done{background:rgba(47,125,91,.14);color:var(--jade);border-color:rgba(47,125,91,.3)}

/* ---------- 八卦方位图 ---------- */
.bagua-map{
  position:relative;width:330px;height:330px;margin:0 auto;
  border:1px solid var(--line-2);border-radius:50%;
  background:radial-gradient(circle,#fffdf7 40%,#f6efdf 100%);
}
.bagua-map .cell{
  position:absolute;transform:translate(-50%,-50%);
  text-align:center;font-size:12.5px;line-height:1.35;width:80px;
}
.bagua-map .cell b{font-family:var(--serif);font-size:19px;display:block}
.bagua-map .cell span{color:var(--ink-3);font-size:11.5px}
.bagua-map .center{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;font-family:var(--serif);color:var(--ink-3);font-size:13px;
}

/* ---------- 知识条目 ---------- */
.kb h4{font-family:var(--serif);font-size:16px;margin:16px 0 6px;color:var(--cinnabar)}
.kb p{font-size:14px;color:var(--ink-2);margin:.35em 0}
.kb ul{margin:.3em 0 .8em;padding-left:1.2em;font-size:14px;color:var(--ink-2)}
.kb li{margin:.16em 0}
.kb blockquote{
  margin:10px 0;padding:10px 14px;border-left:3px solid var(--line-2);
  background:rgba(224,214,195,.2);font-family:var(--serif);font-size:14.5px;color:var(--ink-2);border-radius:0 8px 8px 0;
}

/* ---------- 其他 ---------- */
.hint{font-size:12.5px;color:var(--ink-3)}
.mono{font-family:ui-monospace,"Cascadia Code",Consolas,monospace}
.center{text-align:center}
.mt{margin-top:14px}
.mt2{margin-top:24px}
.mb0{margin-bottom:0}
.hidden{display:none!important}
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
/* 首页入口 / 卦库网格（响应式在文件末尾统一处理） */
.grid.entries{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.lib{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))}
.toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:9px 18px;border-radius:10px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:all .25s ease;z-index:99;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* 用于折叠面板 */
details.set{margin-top:8px}
details.set>summary{cursor:pointer;font-size:13px;color:var(--cinnabar);padding:6px 0;user-select:none;list-style:none}
details.set>summary::-webkit-details-marker{display:none}
details.set>summary::before{content:'▸ ';font-family:var(--sans)}
details.set[open]>summary::before{content:'▾ '}
/* 仅显示爻象时的迷你卦盘 */
.gua-board.mini{padding:16px 10px}
.gua-board.mini table.gua{width:auto;min-width:170px;margin:0 auto}
.gua-board.mini table.gua td{border-bottom:none;padding:3px 8px}
.gua-board.mini table.gua .c-yao{width:auto}
.gua-board.mini table.gua .yao-bars{width:132px;max-width:132px}
footer{border-top:1px solid var(--line);padding:18px 0 34px;color:var(--ink-3);font-size:12.5px}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.coin{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-size:15px;
  background:linear-gradient(145deg,#e9d8a8,#cbb06a);color:#6b4d12;
  box-shadow:inset 0 0 0 2px rgba(107,77,18,.35),0 3px 8px rgba(60,45,25,.2);
}
.coin.spin{animation:coinsp .7s ease-in-out}
@keyframes coinsp{0%{transform:rotateY(0)}50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}

/* =========================================================
 * 移动端适配（手机 / 平板 / 触摸设备）
 * ========================================================= */
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
a,button,.chip,.opt,.card.link,.entry,label{-webkit-tap-highlight-color:transparent}
input[type=search]{-webkit-appearance:none;appearance:none}

/* 底部标签栏：桌面隐藏，窄屏固定于底部 */
.tabbar{display:none}

@media (max-width:820px){
  body{font-size:15px}
  .wrap{padding:0 13px}
  main{padding:16px 0 calc(86px + env(safe-area-inset-bottom))}
  .topbar .wrap{min-height:52px;gap:10px;padding-top:6px;padding-bottom:6px}
  .topbar .nav{display:none}
  .brand .seal{width:32px;height:32px;font-size:19px;border-radius:7px}
  .brand h1{font-size:16px}
  .brand p{display:none}

  .page-head h2{font-size:21px}
  .page-head p{font-size:12.5px}
  .sec-title{font-size:16px;margin:20px 0 10px}
  .card{padding:14px 15px}
  .entry{padding:15px}
  .entry .big{font-size:30px;opacity:.13}
  .entry h3{font-size:16px}
  .entry p{font-size:12.5px}
  .entry .meta{font-size:11.5px}
  .split{grid-template-columns:1fr}
  .grid.c2,.grid.c3,.grid.c4,.grid.entries{grid-template-columns:1fr}
  .grid.lib{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid.lib .card.link{padding:10px 11px}
  .grid.lib .card.link h3{font-size:14.5px}
  .grid.lib .hint{font-size:11px}

  /* 触控友好尺寸 */
  .btn{padding:10px 15px;font-size:14.5px;min-height:42px}
  .btn.sm{padding:8px 12px;min-height:36px;font-size:13.5px}
  .opt{padding:13px 14px;font-size:15px}
  .chip{padding:7px 13px;min-height:34px;display:inline-flex;align-items:center}
  .chips{gap:7px;margin:8px 0}
  .btn-row{gap:8px}

  /* 闪卡 */
  .fc,.fc-inner{min-height:215px}
  .fc-q{font-size:24px}
  .fc-face{padding:16px}
  .fc-a{font-size:19px}
  .fc-sub{font-size:13px}
  .fc-stage{gap:12px}

  /* 卦盘：窄屏压缩列宽；伏神列与变爻列改由盘下文字给出 */
  .gua-board{padding:10px 8px}
  .gua-board-head .gname{font-size:18px}
  .gua-board-head .gsub{font-size:11.5px}
  table.gua{min-width:0;font-size:13px}
  table.gua td{padding:6px 3px}
  table.gua tr{height:32px}
  table.gua .c-pos{width:16px;font-size:11px}
  table.gua .c-ls{width:38px;font-size:12px}
  table.gua .c-fs{display:none}
  table.gua .c-lq{width:44px;font-size:13px}
  table.gua .c-nayin{width:70px;font-size:12.5px}
  table.gua .c-yao{width:80px}
  table.gua .c-mark{width:32px}
  table.gua .c-change{display:none}
  .yao-bars{width:80px;max-width:80px;gap:4px}
  .yao-bars .bar{height:9px}
  .yao-bars .gap{width:11px}
  .fushen{font-size:11px}

  /* 先后天方位图 */
  .bagua-map{width:min(88vw,320px);height:min(88vw,320px)}
  .bagua-map .cell{width:64px;font-size:11px}
  .bagua-map .cell b{font-size:16px}

  /* 宽表横向滚动 */
  .table-wrap{-webkit-overflow-scrolling:touch}
  .table-wrap table{font-size:12.5px}
  th,td{padding:6px 7px}
  .kb p,.kb ul,.kb li{font-size:13.5px}

  .stat{gap:14px}
  .stat b{font-size:18px}
  .step{font-size:11.5px;padding:3px 9px}
  .steps{gap:5px}
  .q-title{font-size:17px}

  footer{padding:14px 0 calc(96px + env(safe-area-inset-bottom));font-size:11.5px}
  footer .wrap{flex-direction:column;gap:6px}}

/* 底部标签栏（手机 / 窄屏） */
@media (max-width:820px){
  .tabbar{
    display:grid;grid-template-columns:repeat(7,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:rgba(255,253,247,.98);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    box-shadow:0 -4px 16px rgba(60,45,25,.06);
    padding:5px 2px calc(5px + env(safe-area-inset-bottom));
  }
  .tabbar a{
    display:flex;flex-direction:column;align-items:center;gap:1px;
    font-size:9.5px;color:var(--ink-3);padding:3px 0 2px;border-radius:8px;letter-spacing:-.02em;
  }
  .tabbar a .ic{font-family:var(--serif);font-size:14px;line-height:1.2;color:var(--ink-2)}
  .tabbar a.active{color:var(--cinnabar);background:rgba(168,51,44,.07)}
  .tabbar a.active .ic{color:var(--cinnabar)}
  .tabbar a:hover,.tabbar a:focus{text-decoration:none}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom));font-size:12.5px;padding:8px 15px}
}

/* 平板：入口卡两列 */
@media (min-width:821px) and (max-width:1024px){
  .grid.entries{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 触摸设备：去掉悬停位移效果 */
@media (hover:none){
  .card.link:hover,.entry:hover{transform:none}
  .chip:hover{border-color:var(--line-2)}
  .btn:hover{border-color:var(--line-2);color:var(--ink)}
  .btn.primary:hover{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff}
  .opt:hover:not(:disabled){border-color:var(--line-2);background:var(--paper-2)}
}

/* =========================================================
 * 账号入口 / 个人主页 / 图示 / 64 卦牌
 * ========================================================= */

/* ---- 顶栏账号入口 ---- */
.me-chip{
  margin-left:auto;flex:none;font-size:13px;padding:5px 12px;border-radius:20px;
  border:1px solid var(--line-2);color:var(--ink-2);max-width:120px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.me-chip:hover{border-color:var(--cinnabar);color:var(--cinnabar);text-decoration:none}
.topbar .nav{margin-left:auto}
@media (max-width:820px){
  .me-chip{margin-left:auto;font-size:12.5px;padding:4px 10px;max-width:92px}
}

/* ---- 卦库：每行 8 个 ---- */
.grid.lib{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px}
.lib-card{padding:9px 9px 10px;border-radius:10px;overflow:hidden}
.lib-top{display:flex;align-items:flex-start;justify-content:space-between;gap:5px}
.lib-name{font-family:var(--serif);font-size:13.5px;font-weight:600;line-height:1.25}
.lib-sub{font-size:10px;color:var(--ink-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-tags{display:flex;gap:3px;flex-wrap:wrap;margin-top:4px;min-height:14px}
.lib-tags .tag{font-size:9.5px;padding:0 4px;line-height:1.6}
@media (max-width:1023px){.grid.lib{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:820px){.grid.lib{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.lib-name{font-size:13px}}
@media (max-width:430px){.grid.lib{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- 图示 ---- */
.dg-block{margin:12px 0 16px}
.dg-block .dg-title{font-family:var(--serif);font-size:13.5px;color:var(--ink-2);margin-bottom:6px}
.dg-wrap{
  background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:8px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.dg-wrap svg.dg{display:block;margin:0 auto;width:100%;max-width:480px;height:auto}
.dg-wrap svg.dg-palace,.dg-wrap svg.dg-steps,.dg-wrap svg.dg-liushen{max-width:100%}
.dg-wrap svg.dg-bagua{max-width:460px}
.dg-note{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.65}
.dg-links{font-size:12px;margin-top:4px;color:var(--ink-3)}
.dg-links a{color:var(--cinnabar)}

/* ---- 64 卦牌：默认每行 8 张（紧凑），可切「大卡」 ---- */
.deck{display:grid;gap:8px;grid-template-columns:repeat(8,minmax(0,1fr))}
.deck.big{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
@media (max-width:1023px){
  .deck{grid-template-columns:repeat(6,minmax(0,1fr))}
  .deck.big{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
}
@media (max-width:820px){
  .deck{grid-template-columns:repeat(3,minmax(0,1fr))}
  .deck.big{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:430px){
  .deck{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.deck-card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:8px 7px;
  cursor:pointer;box-shadow:var(--shadow);
  transition:transform .15s ease,border-color .15s ease;
}
.deck-card:hover{transform:translateY(-2px);border-color:var(--line-2)}
.deck-card .dc-face{display:flex;flex-direction:column;gap:4px;height:100%}
.deck-card .dc-back{display:none}
.deck-card.flipped .dc-front{display:none}
.deck-card.flipped .dc-back{display:flex}
.deck-card.hide-name .dc-name{color:transparent;text-shadow:0 0 8px rgba(34,29,24,.55);user-select:none}
.dc-name{font-family:var(--serif);font-size:13px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-bars{display:flex;flex-direction:column;align-items:center;gap:2px;margin:2px 0 3px}
.dc-bars .yao-bars{width:100%;max-width:94px}
.dc-bars .bar{height:8px}
.dc-meta{font-size:9.5px;color:var(--ink-3);text-align:center;line-height:1.5;margin-top:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-rows{display:flex;flex-direction:column;gap:1px}
.dc-row{display:grid;gap:2px;align-items:center;font-size:10px}
.deck.compact .dc-row{grid-template-columns:12px 40px 1fr}
.deck.big .dc-row{grid-template-columns:14px 42px 12px 34px;font-size:11px}
.dc-p{color:var(--ink-3);font-size:9.5px;text-align:center;font-family:var(--serif)}
.dc-p.is-mark{color:var(--cinnabar);font-weight:700;font-size:10px}
.dc-gz{font-family:var(--serif);white-space:nowrap}
.dc-wx{font-size:10px}
.dc-lq{font-family:var(--serif);font-size:10px;white-space:nowrap}
.dc-foot{font-size:9px;color:var(--ink-3);margin-top:4px;border-top:1px dashed var(--line);padding-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deck.big .dc-name{font-size:15px}
.deck.big .dc-bars .yao-bars{max-width:112px}
.deck.big .dc-bars .bar{height:9px}
.deck.big .dc-meta{font-size:10.5px}
.deck.big .dc-foot{font-size:10px}
.deck-toggle{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);margin:8px 12px 0 0;cursor:pointer}
.deck-toggle input{width:16px;height:16px;accent-color:#a8332c}

/* ---- 摇卦台 · 手动录入 ---- */
.manual-grid{display:grid;gap:8px;max-width:430px}
.manual-row{display:flex;align-items:center;gap:10px}
.manual-pos{width:44px;font-family:var(--serif);font-size:13px;color:var(--ink-2);text-align:right;flex:none}
.manual-select{
  flex:1;padding:9px 10px;border:1px solid var(--line-2);border-radius:9px;background:var(--paper-2);
  font-size:14px;font-family:var(--sans);color:var(--ink);min-height:40px;
}
.manual-select:focus{outline:none;border-color:var(--cinnabar);box-shadow:0 0 0 3px rgba(168,51,44,.1)}
@media (max-width:820px){.manual-grid{max-width:100%}.manual-pos{width:40px}}

/* ---- 账号 / 个人主页 ---- */
.auth-card{max-width:440px;margin:0 auto}
.field{margin:10px 0}
.field label{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:4px}
.field input{
  width:100%;padding:10px 12px;border:1px solid var(--line-2);border-radius:9px;
  background:var(--paper-2);font-size:15px;font-family:var(--sans);color:var(--ink);
}
.field input:focus{outline:none;border-color:var(--cinnabar);box-shadow:0 0 0 3px rgba(168,51,44,.1)}

/* ---- 实例分析（案例库） ---- */
.case-list{display:flex;flex-direction:column;gap:14px;max-width:960px}
.case-card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:14px 16px;
  box-shadow:var(--shadow);transition:border-color .15s ease,box-shadow .15s ease;
}
.case-card.hl{border-color:var(--cinnabar);box-shadow:0 0 0 3px rgba(168,51,44,.12)}
.case-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.case-id{font-family:var(--serif);font-size:12.5px;color:var(--ink-3)}
.case-ask{font-family:var(--serif);font-size:16.5px;font-weight:600;letter-spacing:.02em}
.case-meta{font-size:12.5px;color:var(--ink-2);margin:8px 0 10px;line-height:1.7}
.src-tag{
  font-size:11.5px;padding:2px 10px;border-radius:20px;border:1px solid;
  white-space:nowrap;display:inline-flex;gap:6px;align-items:center;font-weight:600;
}
.src-tag.red{background:rgba(168,51,44,.1);color:var(--cinnabar);border-color:rgba(168,51,44,.4)}
.src-tag.blue{background:rgba(31,111,178,.1);color:var(--water);border-color:rgba(31,111,178,.4)}
.src-tag.gold{background:rgba(176,141,63,.16);color:#7a5f22;border-color:rgba(176,141,63,.5)}
.src-tag .src-sub{opacity:.7;font-weight:400;font-size:10.5px}
.src-tag a{color:inherit;text-decoration:underline}
.case-body{display:none;margin-top:8px}
.case-body.open{display:block}
.case-quote{
  background:rgba(224,214,195,.18);border-left:3px solid var(--line-2);border-radius:0 8px 8px 0;
  padding:10px 14px;font-family:var(--serif);font-size:14px;line-height:1.9;color:var(--ink-2);
}
.case-boards{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.case-boards .gua-board{padding:8px 10px}
.case-boards .gua-board table.gua{font-size:12px}
.case-boards .gua-board table.gua td{padding:3px 4px;white-space:nowrap}
.case-boards .gua-board .c-ls,.case-boards .gua-board .c-pos{white-space:nowrap}
.case-boards .gua-board .c-lquad{white-space:nowrap}
.case-boards .gua-board .gname{font-size:14px}
.case-boards .gua-board .gsub{font-size:10.5px}
@media (max-width:560px){.case-boards .gua-board table.gua{font-size:11px}}
@media (max-width:900px){.case-boards{grid-template-columns:1fr}}
.ai-box{margin-top:10px;padding:11px 14px;border-radius:10px;background:rgba(168,51,44,.05);border:1px solid rgba(168,51,44,.22)}
.ai-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.ai-tag{font-size:11.5px;font-weight:700;color:#fff;background:var(--cinnabar);border-radius:20px;padding:2px 10px;letter-spacing:.03em}
.ai-list{margin:0;padding-left:1.15em;font-size:13px;line-height:1.85;color:var(--ink-2)}
.ai-list li{margin:.25em 0}
.ai-list b{color:var(--ink)}
.case-mini{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:8px 10px;border:1px solid var(--line);border-radius:9px;margin-top:8px;background:rgba(224,214,195,.12);
}
.case-mini-ask{font-family:var(--serif);font-size:13.5px;font-weight:600}
.case-mini-go{font-size:12.5px;color:var(--cinnabar);margin-left:auto;white-space:nowrap}
.zy-plain{
  margin:6px 0 10px;padding:9px 13px;border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.85;color:var(--ink-2);
  background:rgba(47,125,91,.07);border-left:3px solid rgba(47,125,91,.5);
}
.zy-plain-tag{
  display:inline-block;font-size:10.5px;color:#1f5c42;background:rgba(47,125,91,.15);
  border:1px solid rgba(47,125,91,.35);border-radius:6px;padding:0 6px;margin-right:7px;
}
table.zy-yao{font-size:13px;min-width:0}
table.zy-yao td{vertical-align:top;line-height:1.8}
.zy-label{font-family:var(--serif);color:var(--ink-3);white-space:nowrap;font-size:12.5px}
.zy-text{font-family:var(--serif);color:var(--ink)}
.zy-plain-cell{color:var(--ink-2);font-size:12.5px}
.case-plain{
  margin-top:8px;padding:10px 14px;border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.9;color:var(--ink-2);
  background:rgba(47,125,91,.07);border-left:3px solid rgba(47,125,91,.5);
}
.case-plain-tag{
  display:inline-block;font-size:10.5px;color:#1f5c42;background:rgba(47,125,91,.15);
  border:1px solid rgba(47,125,91,.35);border-radius:6px;padding:0 6px;margin-right:7px;
}
.case-drill{margin-top:10px;font-size:13px;color:var(--ink-2)}
.case-drill ol{margin:.3em 0 0;padding-left:1.2em}
.case-drill li{margin:.2em 0}
@media (max-width:820px){
  .case-card{padding:12px}
  .case-ask{font-size:15px}
  .src-tag{font-size:10.5px;padding:2px 8px}
}
.form-msg{font-size:13px;margin-top:8px;min-height:18px}
.form-msg.err{color:var(--cinnabar)}
.form-msg.ok{color:var(--jade)}
.avatar{
  width:54px;height:54px;border-radius:50%;background:var(--cinnabar);color:#fff;flex:none;
  display:grid;place-items:center;font-family:var(--serif);font-size:26px;
}
.profile-head{display:flex;align-items:center;gap:14px}
.profile-head h2{margin:0;font-size:20px}
.me-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
@media (max-width:820px){
  .me-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-head h2{font-size:18px}
}
.settings-card .field,.settings-card .form-msg,.settings-card>.btn-row,.settings-card>.btn-row+.form-msg{max-width:460px}
.settings-card .btn-row{flex-wrap:wrap}