/* ============ 六爻排盘 · 国风视觉 ============ */
:root {
  --bg: #15110c; --bg2: #0d0b08; --paper: #221c15; --paper2: #1b1610;
  --ink: #ede4d1; --ink-soft: #a89b81; --line: rgba(214,178,98,.18);
  --gold: #d8b463; --gold-bright: #f0cc7a;
  --accent: #db5e42; --accent-deep: #b8472f; --accent-soft: #e8825f;
  --azure: #74a6d6;
  --shi: var(--accent); --ying: var(--azure); --move: var(--gold);
  --shadow: 0 18px 46px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.42);
  --glow: rgba(216,180,99,.18);
  --kai: "LXGW WenKai Screen R", "Songti SC", "STSong", "Noto Serif CJK SC", serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); line-height: 1.7; font-size: 16px;
  font-family: var(--kai);
  background:
    radial-gradient(120% 75% at 50% -8%, var(--glow), transparent 48%),
    radial-gradient(110% 65% at 50% 118%, rgba(216,94,66,.12), transparent 52%),
    linear-gradient(165deg, #1a150f, #0c0a07 70%);
  background-attachment: fixed; min-height: 100vh;
  position: relative; padding: 4vh 16px 14vh;
}
/* 微噪点纹理 */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .04;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main { max-width: 720px; margin: 0 auto; position: relative; z-index: 1; }

/* ---------- 头部 · 太极八卦 ---------- */
.site-head { text-align: center; margin-bottom: 30px; }
.bagua-hero { width: 108px; height: 108px; margin: 0 auto 16px; filter: drop-shadow(0 0 22px rgba(216,180,99,.28)); }
.bagua-svg { width: 100%; height: 100%; overflow: visible; }
.ring-out { fill: none; stroke: var(--gold); stroke-width: 1.3; opacity: .72; }
.ring-in { fill: none; stroke: var(--gold); stroke-width: .6; opacity: .4; }
.trigrams text { fill: var(--gold); font-size: 15px; text-anchor: middle; dominant-baseline: central; opacity: .9; }
.taiji { transform-origin: 100px 100px; animation: tj-rot 26s linear infinite; }
.tj-base { fill: #ece3d0; stroke: var(--gold); stroke-width: 1; }
.tj-dark { fill: #15110c; }
.tj-dot-d { fill: #15110c; }
.tj-dot-l { fill: #ece3d0; }
@keyframes tj-rot { to { transform: rotate(360deg); } }
.site-head h1 {
  font-family: var(--kai); font-size: 2.5rem; margin: 0; font-weight: 700;
  letter-spacing: .36em; text-indent: .36em; color: var(--accent);
  text-shadow: 0 2px 26px rgba(219,94,66,.42);
}
.site-head h1::after {
  content: ""; display: block; width: 64px; height: 2px; margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.tagline { color: var(--ink-soft); font-size: .84rem; margin: 12px 0 0; line-height: 1.9; letter-spacing: .04em; }
.head-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.pill-btn {
  font: inherit; font-family: var(--kai); font-size: .9rem; cursor: pointer;
  padding: 9px 18px; color: var(--gold); background: rgba(216,180,99,.06);
  border: 1px solid var(--line); border-radius: 22px; transition: all .16s;
}
.pill-btn:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(216,180,99,.13); }

/* ---------- 卡片 ---------- */
.panel, .method, .result {
  background: linear-gradient(var(--paper), var(--paper2));
  border: 1px solid var(--line); border-radius: 18px; padding: 20px;
  margin-bottom: 16px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
  position: relative;
}
.panel::after, .method::after, .result::after {
  content: ""; position: absolute; inset: 4px; border-radius: 14px;
  border: 1px solid var(--gold); opacity: .14; pointer-events: none;
}
.field { display: flex; flex-direction: column; gap: 7px; font-size: .9rem; color: var(--ink-soft); }
.field span b { color: var(--accent); }
.field input, input[type="number"], input[type="text"], select {
  font: inherit; font-family: var(--kai); padding: 11px 13px; border: 1px solid var(--line);
  border-radius: 11px; background: var(--bg); color: var(--ink); width: 100%; transition: border-color .15s, box-shadow .15s;
}
.field input:focus, input:focus, select:focus { outline: none; border-color: var(--accent-soft); box-shadow: 0 0 0 3px rgba(156,42,36,.1); }
.hint { font-size: .84rem; color: var(--ink-soft); margin: 8px 0; line-height: 1.7; }
.hint b { color: var(--ink); }
#gzPreview { font-size: .95rem; color: var(--ink); margin: 12px 0 0; line-height: 2; }
#gzPreview b { color: var(--accent); }
.gz-chain { font-size: .76rem; color: var(--ink-soft); margin-top: 5px; line-height: 1.7; padding: 6px 9px; background: rgba(168,132,47,.08); border-radius: 7px; }
.bj-tag {
  display: inline-block; font-size: .68rem; font-weight: 700; color: var(--paper);
  background: linear-gradient(var(--gold-bright), var(--gold)); padding: 2px 8px; border-radius: 6px;
  margin-right: 8px; letter-spacing: .05em; vertical-align: 1px;
}
.ask-info { margin-top: 14px; display: grid; gap: 10px; }
.mode-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; margin-bottom: 14px; }
.mode-toggle button { font: inherit; font-family: var(--kai); font-size: .86rem; padding: 7px 18px; border: none; background: transparent; color: var(--ink-soft); cursor: pointer; transition: all .15s; }
.mode-toggle button.on { background: linear-gradient(var(--accent), var(--accent-deep)); color: #fff; font-weight: 700; }
body.mode-quick .field-cat, body.mode-quick .settings { display: none; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 7px; margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  flex: 1 1 auto; min-width: 64px; font: inherit; font-family: var(--kai); font-size: .94rem;
  padding: 11px 10px; cursor: pointer; color: var(--ink-soft);
  background: linear-gradient(var(--paper), var(--paper2));
  border: 1px solid var(--line); border-radius: 12px; transition: all .16s;
}
.tab:hover { border-color: var(--accent-soft); color: var(--ink); }
.tab.active {
  background: linear-gradient(var(--accent), var(--accent-deep)); color: #fff;
  border-color: var(--accent-deep); font-weight: 700;
  box-shadow: 0 4px 14px rgba(156,42,36,.3);
}

/* ---------- 按钮 ---------- */
.primary {
  font: inherit; font-family: var(--kai); font-weight: 700; cursor: pointer; letter-spacing: .12em;
  padding: 13px 30px; font-size: 1rem; color: #fff; border: none; border-radius: 12px;
  background: linear-gradient(var(--accent), var(--accent-deep));
  box-shadow: 0 4px 16px rgba(156,42,36,.32); transition: transform .12s, filter .15s;
}
.primary:hover { filter: brightness(1.08); }
.primary:active { transform: translateY(1px); }
.primary:disabled { opacity: .55; }
.ghost {
  font: inherit; font-family: var(--kai); font-weight: 600; cursor: pointer; margin-left: 8px;
  padding: 12px 22px; color: var(--accent); background: transparent;
  border: 1px solid var(--accent); border-radius: 12px; transition: all .15s;
}
.ghost:hover { background: rgba(156,42,36,.07); }
.ghost:disabled { opacity: .55; }
.ghost.sm, .ghost.xs { padding: 8px 14px; margin: 0; font-size: .85rem; }
.ghost.xs { padding: 6px 11px; font-size: .8rem; }

.coin-toggle { display: flex; gap: 22px; margin-bottom: 14px; flex-wrap: wrap; font-size: .92rem; }
.coin-toggle label { cursor: pointer; }

/* ---------- 摇卦 ---------- */
.coin-stage { display: grid; gap: 9px; margin: 12px 0; }
.toss-row { display: flex; align-items: center; gap: 10px; }
.toss-row .lbl { width: 3.2em; color: var(--ink-soft); font-size: .85rem; }
.coin {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--gold); color: #5a4416; font-size: .82rem; font-weight: 700;
  background: radial-gradient(circle at 33% 27%, #f8e9c0, #d6b56c);
  box-shadow: inset 0 0 5px rgba(90,68,22,.35), 0 2px 5px rgba(0,0,0,.12);
}
.coin.bei { background: radial-gradient(circle at 33% 27%, #c4bca8, #877e6b); color: #241f17; }
.coin.rolling { animation: spin .42s linear infinite; }
@keyframes spin { to { transform: rotateY(360deg); } }
.toss-row .res { margin-left: auto; font-weight: 700; font-size: .92rem; }

/* ---------- 行（自己摇 / 手动） ---------- */
.self-rows, .manual-rows { display: grid; gap: 9px; margin: 10px 0; }
.row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
}
.row .pos { width: 3.4em; color: var(--ink-soft); font-size: .88rem; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button { font: inherit; font-family: var(--kai); font-size: .85rem; padding: 8px 12px; border: none; background: var(--paper); color: var(--ink-soft); cursor: pointer; transition: background .12s; }
.seg button:hover { background: var(--paper2); }
.seg button.on { background: var(--accent); color: #fff; }
.row .preview { margin-left: auto; font-weight: 700; font-size: .92rem; color: var(--accent); }
.num-inputs { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.num-inputs .field { flex: 1; min-width: 96px; }
.yarrow-log { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; min-height: 4px; }
.ylog { font-size: .88rem; }
.sp-moves { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 4px 0 12px; }
.sp-move { font-size: .92rem; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }

/* ---------- 历法设置 ---------- */
.settings { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.settings summary, .more-gua summary { cursor: pointer; font-size: .88rem; color: var(--gold); font-weight: 700; }
.set-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 12px 0; }
.set-grid .set-solar { grid-column: 1 / -1; }
.solar-row { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; flex-wrap: wrap; }
.solar-row input[type=number] { width: 90px; padding: 7px 9px; }
.set-custom { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: .9rem; margin-top: 2px; align-items: center; }
.set-custom label { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.set-mod-label { color: var(--ink-soft); font-size: .86rem; }
.link-btn { background: none; border: none; color: var(--gold); font: inherit; font-size: .8rem; cursor: pointer; text-decoration: underline; padding: 0 0 0 6px; }
.diff-table { width: 100%; border-collapse: collapse; font-size: .86rem; margin: 6px 0; }
.diff-table th, .diff-table td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top; }
.diff-table th { color: var(--gold); font-weight: 700; }
.diff-table td:first-child { color: var(--ink-soft); white-space: nowrap; }
.diff-table b { color: var(--accent-soft); }
.backup-due { color: var(--accent); font-weight: 700; }

/* ---------- 排盘结果 ---------- */
.result h2 { margin: 0 0 8px; font-size: 1.3rem; color: var(--accent); letter-spacing: .12em; }
.gz-line { font-size: .92rem; margin: 5px 0; }
.gz-line b { color: var(--accent); }
.gua-title {
  font-size: 1.4rem; font-weight: 700; margin: 14px 0 6px; display: flex; align-items: center;
  flex-wrap: wrap; gap: 4px; padding-bottom: 12px;
  border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, var(--gold), transparent) 1;
}
.gua-title .arrow { color: var(--ink-soft); margin: 0 8px; font-weight: 400; }
.gua-type { font-size: .64rem; color: #fff; background: var(--gold); padding: 2px 7px; border-radius: 6px; margin-left: 5px; vertical-align: 4px; font-weight: 700; }
.gong-note { font-size: .82rem; color: var(--ink-soft); font-weight: 400; margin-left: 6px; }
.move-note { font-size: .82rem; color: var(--accent-soft); font-weight: 400; margin-left: auto; }
.gua-props { margin: -2px 0 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.gua-prop { font-size: .74rem; font-weight: 700; color: var(--accent); border: 1px solid var(--accent); border-radius: 7px; padding: 1px 9px; }
.gua-extra { font-size: .86rem; color: var(--gold); margin: -4px 0 8px; }

.plate-wrap { overflow-x: auto; margin-top: 6px; }
table.plate { width: 100%; border-collapse: collapse; font-size: .96rem; }
table.plate th { font-weight: 700; color: var(--ink-soft); font-size: .76rem; padding: 7px 4px; border-bottom: 1.5px solid var(--line); letter-spacing: .05em; }
table.plate td { padding: 10px 4px; border-bottom: 1px dashed var(--line); text-align: center; vertical-align: middle; }
table.plate tbody tr.moving { background: linear-gradient(90deg, rgba(168,132,47,.13), transparent 80%); }
.col-shen { color: var(--ink-soft); font-size: .9rem; white-space: nowrap; }
.col-qin { font-weight: 700; white-space: nowrap; }
.col-ben { white-space: nowrap; }
table.plate th, table.plate td { white-space: nowrap; }
.gan-zhi .wx { color: var(--ink-soft); font-size: .82em; margin-left: 1px; }
.kong-mark, .po-mark { font-size: .64rem; vertical-align: super; margin-left: 2px; font-weight: 700; }
.kong-mark { color: var(--accent); } .po-mark { color: var(--azure); }
.fu-line { font-size: .74rem; color: var(--ink-soft); margin-top: 2px; }
.ss-line { font-size: .68rem; color: var(--gold); margin-top: 2px; white-space: normal; max-width: 8em; line-height: 1.4; }
.chips { display: inline-flex; gap: 3px; flex-wrap: wrap; margin-left: 4px; vertical-align: middle; }
.chip { font-size: .62rem; font-weight: 700; padding: 1px 6px; border-radius: 6px; white-space: nowrap; line-height: 1.6; }
.chip.k { color: #fff; background: var(--accent); }
.chip.p { color: #fff; background: var(--azure); }
.chip.rp { color: #fff; background: var(--accent-soft); }
.chip.ad { color: #4a3a0c; background: var(--gold-bright); }
.chip.h { color: var(--ink); background: var(--bg2); border: 1px solid var(--line); }
.col-ben .chips { margin-top: 3px; margin-left: 0; }

/* 爻象 */
.yao { display: inline-flex; gap: 6px; align-items: center; justify-content: center; width: 82px; }
.yao .bar, .yao .b1, .yao .b2 { display: inline-block; height: 8px; border-radius: 2px; background: var(--ink); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.yao.yang .bar { width: 58px; }
.yao.yin .b1, .yao.yin .b2 { width: 24px; }
.move-flag { width: 1.3em; color: var(--move); font-weight: 700; font-size: 1.1rem; }
.sy { font-weight: 700; font-size: .98rem; }
.sy.shi { color: var(--shi); } .sy.ying { color: var(--ying); }
.bian-cell { color: var(--ink-soft); white-space: nowrap; }
.bian-cell.changed { color: var(--accent-soft); font-weight: 700; }
tr.clickable { cursor: pointer; transition: background .12s; }
tr.clickable:hover { background: rgba(168,132,47,.07); }
.plate-hint { text-align: center; font-size: .78rem; color: var(--ink-soft); margin: 12px 0 0; }

/* 更多卦象 */
.more-gua { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.more-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 16px; margin-top: 10px; }
.more-grid > div { font-size: .94rem; }
.more-grid .ml { color: var(--gold); margin-right: 8px; font-size: .82rem; }

/* 用神 · 旺衰 */
.yongshen { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.yongshen summary { cursor: pointer; font-size: .88rem; color: var(--gold); font-weight: 700; }
.ys-body { margin-top: 10px; }
.ys-sug { font-size: .96rem; } .ys-sug b { color: var(--accent); }
.ys-four { font-size: .86rem; color: var(--ink-soft); margin: 4px 0 10px; }
.ys-yao { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.ys-head { font-size: .94rem; font-weight: 700; }
.ys-concl { font-size: .8rem; padding: 1px 9px; border-radius: 10px; color: #fff; }
.ys-强 { background: #3f8a4f; } .ys-中 { background: var(--gold); color: #3a2c08; } .ys-弱 { background: var(--accent); }
.ys-factors { font-size: .82rem; color: var(--ink-soft); margin-top: 3px; }
.ys-factors b { color: var(--ink); }
.ys-tip { font-size: .78rem; color: var(--ink-soft); margin: 10px 0 0; background: rgba(168,132,47,.08); padding: 8px 10px; border-radius: 8px; }

/* 应期候选 */
.yingqi { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.yingqi summary { cursor: pointer; font-size: .88rem; color: var(--gold); font-weight: 700; }
.yingqi-body { margin-top: 10px; }
.yq-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.yq-when { font-weight: 700; color: var(--accent); font-size: .94rem; }
.yq-basis { font-size: .84rem; color: var(--ink-soft); }
.yq-tip { font-size: .78rem; color: var(--ink-soft); margin: 10px 0 0; background: rgba(168,132,47,.08); padding: 8px 10px; border-radius: 8px; }

/* 生克关系图 */
.relgraph { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.relgraph summary { cursor: pointer; font-size: .88rem; color: var(--gold); font-weight: 700; }
.rg-body { text-align: center; }
.rel-svg { width: 100%; max-width: 340px; height: auto; margin: 8px auto 0; display: block; }
.rn-a { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--kai); }
.rn-b { fill: var(--gold); font-size: 11px; font-family: var(--kai); }
.rg-legend { font-size: .76rem; color: var(--ink-soft); margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; }
.lg-he, .lg-sheng { color: #5cba74; } .lg-chong, .lg-ke { color: #e0654a; } .lg-mv { color: var(--gold); }

/* 卦辞 / 爻辞 */
.guaci { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.guaci summary { cursor: pointer; font-size: .88rem; color: var(--gold); font-weight: 700; }
.guaci-body { margin-top: 12px; }
.gc-ci { font-size: .96rem; margin: 8px 0; line-height: 1.9; }
.gc-ci b { color: var(--accent); }
.gc-xiang { font-size: .9rem; color: var(--ink-soft); margin: 4px 0 10px; }
.gc-sub { font-size: .8rem; color: var(--gold); font-weight: 700; margin: 12px 0 4px; }
.gc-yao { font-size: .94rem; margin: 5px 0; padding-left: 10px; border-left: 2px solid var(--gold); }
.gc-tip { font-size: .8rem; color: var(--ink-soft); margin: 12px 0 0; background: rgba(168,132,47,.08); padding: 8px 10px; border-radius: 8px; }

/* 操作栏 / 卦例 */
.result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.cases-warn { font-size: .78rem; color: var(--ink-soft); background: rgba(216,94,66,.1); border: 1px solid var(--accent); border-radius: 8px; padding: 8px 10px; margin: 4px 0 10px; line-height: 1.6; }
.cases-warn b { color: var(--accent-soft); }
.cases-stats { font-size: .84rem; color: var(--ink); background: rgba(168,132,47,.1); border-radius: 8px; padding: 8px 10px; margin: 4px 0 10px; }
.cases-stats:empty { display: none; }
.cs-cat { font-size: .78rem; color: var(--ink-soft); margin-top: 4px; }
.cases-search { width: 100%; font: inherit; font-family: var(--kai); padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); margin-bottom: 10px; }
.ver-badge { font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 6px; margin-left: 6px; color: #fff; }
.v-ok { background: #3f8a4f; } .v-no { background: var(--accent); } .v-part { background: var(--gold); color: #2e2206; }
.cases-tools { display: flex; gap: 8px; margin: 4px 0 12px; }
.case-item { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px dashed var(--line); }
.case-main { flex: 1; min-width: 0; }
.case-main b { display: block; font-size: .96rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case-meta { font-size: .77rem; color: var(--ink-soft); }
.case-btns { display: flex; gap: 5px; flex-shrink: 0; }

/* 详情弹窗 */
.modal-mask[hidden], .guide-mask[hidden] { display: none !important; }
.modal-mask { position: fixed; inset: 0; background: rgba(20,14,8,.6); display: grid; place-items: center; padding: 18px; z-index: 50; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-card { background: linear-gradient(var(--paper), var(--paper2)); border: 1px solid var(--line); border-radius: 18px; max-width: 450px; width: 100%; padding: 22px 24px; box-shadow: 0 16px 50px rgba(0,0,0,.35); position: relative; max-height: 84vh; overflow-y: auto; }
.modal-close { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 1.7rem; line-height: 1; color: var(--ink-soft); cursor: pointer; }
.modal-card h3 { margin: 0 0 14px; font-size: 1.2rem; color: var(--accent); }
.d-row { font-size: .94rem; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.d-row b { color: var(--ink); } .d-row b.hot { color: var(--accent); }
.d-row .muted { color: var(--ink-soft); font-size: .86rem; }
.d-foot { font-size: .76rem; color: var(--ink-soft); margin: 14px 0 0; line-height: 1.8; }
.muted { color: var(--ink-soft); }

/* 新手指南 */
.guide-btn {
  margin-top: 14px; font: inherit; font-family: var(--kai); font-size: .9rem; cursor: pointer;
  padding: 8px 18px; color: var(--accent); background: var(--paper);
  border: 1px solid var(--accent); border-radius: 20px; transition: all .15s;
}
.guide-btn:hover { background: var(--accent); color: #fff; }
.guide-mask { position: fixed; inset: 0; background: rgba(20,14,8,.6); display: grid; place-items: center; padding: 16px; z-index: 60; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.guide-card {
  background: linear-gradient(var(--paper), var(--paper2)); border: 1px solid var(--line);
  border-radius: 18px; width: 100%; max-width: 640px; max-height: 88vh; display: flex; flex-direction: column;
  box-shadow: 0 18px 56px rgba(0,0,0,.4); position: relative; overflow: hidden;
}
.guide-close { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 1.8rem; line-height: 1; color: var(--ink-soft); cursor: pointer; z-index: 2; }
.guide-title { margin: 0; padding: 20px 22px 12px; font-size: 1.3rem; color: var(--accent); letter-spacing: .08em; }
.guide-toc { display: flex; gap: 6px; overflow-x: auto; padding: 0 22px 12px; border-bottom: 1px solid var(--line); }
.guide-toc button { flex: 0 0 auto; font: inherit; font-family: var(--kai); font-size: .8rem; cursor: pointer; padding: 6px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); color: var(--ink-soft); white-space: nowrap; }
.guide-toc button:hover { border-color: var(--accent); color: var(--accent); }
.guide-body { overflow-y: auto; padding: 8px 22px 16px; }
.guide-body section { padding: 14px 0; border-bottom: 1px dashed var(--line); scroll-margin-top: 8px; }
.guide-body h3 { font-size: 1.08rem; color: var(--accent); margin: 6px 0 10px; }
.guide-body ul, .guide-body ol { margin: 8px 0; padding-left: 22px; }
.guide-body li { margin: 6px 0; line-height: 1.75; font-size: .94rem; }
.guide-body p { font-size: .94rem; line-height: 1.8; margin: 8px 0; }
.guide-body b { color: var(--ink); }
.g-note, .g-tip-line { background: rgba(168,132,47,.1); padding: 9px 12px; border-radius: 9px; font-size: .88rem; }
.g-tip-line b { color: var(--accent); }
.g-terms { margin: 8px 0; }
.g-terms dt { font-weight: 700; color: var(--accent); margin-top: 10px; font-size: .94rem; }
.g-terms dd { margin: 3px 0 0; padding-left: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.7; }
.g-disclaimer { background: rgba(156,42,36,.08); border: 1px solid var(--accent); border-radius: 9px; padding: 10px 12px; font-size: .88rem; }
.guide-foot { padding: 14px 22px; border-top: 1px solid var(--line); text-align: center; }
@media (max-width: 560px) { .guide-title { font-size: 1.15rem; } .guide-body { padding: 8px 16px 14px; } }

/* 六十四卦 浏览 */
.gb-hint { font-size: .84rem; color: var(--ink-soft); margin: 6px 0 12px; }
.gb-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.gb-controls .cases-search { margin-bottom: 0; flex: 1; min-width: 150px; }
.gb-sort { display: inline-flex; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.gb-sort button { font: inherit; font-family: var(--kai); font-size: .8rem; padding: 7px 12px; border: none; background: transparent; color: var(--ink-soft); cursor: pointer; }
.gb-sort button.on { background: var(--accent); color: #fff; }
.gg-gong { margin-bottom: 14px; }
.gg-label { font-size: .82rem; color: var(--gold); font-weight: 700; }
.gg-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.gg-cell { font: inherit; font-family: var(--kai); font-size: .84rem; padding: 9px 4px; cursor: pointer; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 9px; transition: all .12s; }
.gg-cell:hover { border-color: var(--accent); color: var(--accent); }
.gd-back { font: inherit; font-family: var(--kai); cursor: pointer; background: none; border: none; color: var(--gold); font-size: .86rem; padding: 0 0 8px; }
.gd-sub { font-size: .8rem; color: var(--ink-soft); font-weight: 400; }
.gd-sym { font-size: 1.5rem; color: var(--gold); vertical-align: -2px; }
.gd-actions { margin: 4px 0 14px; }
.primary.sm { padding: 9px 18px; font-size: .9rem; }
.gd-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.gd-nav .gg-cell { flex: 0 1 auto; }
.gd-meta { font-size: .86rem; color: var(--ink-soft); margin: 2px 0 12px; }
.gd-plate { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: 12px; }
.gd-plate td { padding: 7px 6px; border-bottom: 1px dashed var(--line); }
.gp-pos { color: var(--ink-soft); width: 2.4em; } .gp-qin { font-weight: 700; } .gp-sy { color: var(--accent); font-weight: 700; }
.gd-ci { font-size: .96rem; line-height: 1.9; } .gd-ci b { color: var(--accent); }
.gd-xiang { font-size: .9rem; color: var(--ink-soft); margin: 4px 0 10px; }
.gd-yaoci p { font-size: .92rem; margin: 5px 0; padding-left: 10px; border-left: 2px solid var(--line); }
.qg-line { height: 8px; width: 48px; margin: 2px 0; display: inline-block; }
.qg-line.yang { background: var(--ink); border-radius: 2px; }
.qg-line.yin { background: linear-gradient(90deg, var(--ink) 0 41%, transparent 41% 59%, var(--ink) 59% 100%); }

/* 每日一卦 */
.daily { background: linear-gradient(rgba(168,132,47,.1), rgba(168,132,47,.04)); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 8px; }
.daily-head { font-size: .82rem; color: var(--gold); font-weight: 700; margin-bottom: 8px; }
.daily-row { display: flex; gap: 16px; align-items: center; }
.daily-sym { margin: 0 !important; flex-shrink: 0; }
.daily-sym .qg-line { width: 48px; height: 7px; }
.daily-info b { font-size: 1.05rem; color: var(--accent); }
.daily-ci { font-size: .88rem; line-height: 1.7; margin: 6px 0 10px; }
.quiz-h { font-size: .9rem; color: var(--gold); margin: 16px 0 8px; }

/* 练习 */
.quiz-gua { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 16px; }
.quiz-gua .qg-line { width: 72px; height: 9px; }
.quiz-q { font-size: 1.05rem; font-weight: 700; text-align: center; margin: 10px 0 16px; }
.quiz-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.quiz-opt { font: inherit; font-family: var(--kai); font-size: .94rem; padding: 12px 6px; cursor: pointer; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; transition: all .12s; }
.quiz-opt:hover:not(:disabled) { border-color: var(--accent); }
.quiz-opt:disabled { opacity: .85; cursor: default; }
.quiz-opt.correct { background: #3f8a4f; color: #fff; border-color: #3f8a4f; }
.quiz-opt.wrong { background: var(--accent); color: #fff; border-color: var(--accent); }
.quiz-fb { text-align: center; margin-top: 16px; min-height: 2em; }
.q-right { color: #4caf68; font-weight: 700; } .q-wrong { color: var(--accent-soft); font-weight: 700; }
.quiz-next { font: inherit; font-family: var(--kai); cursor: pointer; margin-left: 10px; padding: 8px 18px; background: var(--gold); color: #2e2206; border: none; border-radius: 18px; font-weight: 700; }

.site-foot { text-align: center; color: var(--ink-soft); font-size: .76rem; margin-top: 30px; line-height: 1.8; }

/* 触控 */
.tab, .primary, .ghost, .seg button, .coin-toggle label { -webkit-tap-highlight-color: transparent; }
.tab, .primary, .ghost { min-height: 46px; }
.seg button { min-height: 42px; }
input, button, .tab, select { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) { .taiji, .coin.rolling { animation: none; } }

/* ---------- 手机 ---------- */
@media (max-width: 560px) {
  body { padding: 3vh 12px 12vh; }
  .site-head h1 { font-size: 2rem; letter-spacing: .28em; text-indent: .28em; }
  .bagua-hero { width: 80px; height: 80px; }
  .tabs { gap: 6px; }
  .tab { min-width: 0; font-size: .86rem; padding: 11px 4px; }
  .panel, .method, .result { padding: 15px; border-radius: 15px; }
  table.plate { font-size: .85rem; }
  table.plate td { padding: 9px 2px; }
  .yao { width: 60px; gap: 4px; }
  .yao.yang .bar { width: 44px; }
  .yao .bar, .yao .b1, .yao .b2 { height: 7px; }
  .gua-title { font-size: 1.18rem; }
  .set-grid, .more-grid { grid-template-columns: 1fr; }
  .num-inputs .field { min-width: 0; flex: 1 1 28%; }
}
@media (max-width: 360px) { .yao { width: 52px; } .yao.yang .bar { width: 38px; } .col-shen { font-size: .82rem; } }

/* ---------- 桌面 ---------- */
@media (min-width: 768px) {
  body { padding-top: 6vh; }
  main { max-width: 768px; }
  .site-head h1 { font-size: 2.8rem; }
  .panel, .method, .result { padding: 24px 28px; }
  table.plate { font-size: 1rem; }
  table.plate td { padding: 11px 8px; }
  .yao { width: 96px; }
  .yao.yang .bar { width: 68px; }
  .tab:hover { transform: translateY(-1px); }
}