:root {
  --paper: #f6f1e7;
  --paper-2: #efe7d8;
  --ink: #2a241f;
  --ink-2: #4d453d;
  --ink-3: #7a716a;
  --line: #d9cfbd;
  --vermilion: #a8322d;
  --vermilion-2: #c8524b;
  --gold: #b2893f;
  --jade: #3f7a5e;
  --sky: #3d6a8a;
  --card: rgba(255, 252, 246, 0.85);
  --card-2: #fffdf8;
  --band: rgba(255, 255, 255, 0.35);
  --shadow: 0 2px 12px rgba(60, 40, 20, 0.08);
  --radius: 10px;
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun", "STSong", serif;
  --kai: "KaiTi", "STKaiti", "Kaiti SC", "Noto Serif SC", serif;
  color-scheme: light;
}

/* 深色模式：与长图深色配色一致 */
:root[data-theme="dark"] {
  --paper: #1c1916;
  --paper-2: #2a251f;
  --ink: #f0e7d8;
  --ink-2: #cfc4b1;
  --ink-3: #9b8f7e;
  --line: #3f382f;
  --vermilion: #d2675c;
  --vermilion-2: #e07c70;
  --gold: #d1ad60;
  --jade: #72b391;
  --sky: #7fadcf;
  --card: rgba(36, 31, 26, 0.92);
  --card-2: #241f1a;
  --band: rgba(255, 255, 255, 0.04);
  --shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}
:root[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 10% 0%, rgba(209, 173, 96, 0.10), transparent 40%),
    radial-gradient(circle at 90% 100%, rgba(210, 103, 92, 0.08), transparent 45%);
}
:root[data-theme="dark"] .meter .pin { background: var(--paper-2); border-color: var(--ink); }
:root[data-theme="dark"] .history-item mark { background: rgba(209, 173, 96, 0.35); }
:root[data-theme="dark"] .modal { background: rgba(0, 0, 0, 0.7); }
:root[data-theme="dark"] .lv-ping { background: linear-gradient(135deg, #5d6b60, #7f8f83); }
:root[data-theme="dark"] .lv-xiong { background: linear-gradient(135deg, #46465a, #6b6b85); }

/* 主题切换按钮、安装按钮 */
.theme-toggle, .install-btn {
  font-family: inherit; font-size: 13px; letter-spacing: 1px; cursor: pointer; margin-left: 18px;
  padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink-2); transition: all .15s;
}
.theme-toggle:hover, .install-btn:hover { border-color: var(--gold); color: var(--vermilion); }
.install-btn { margin-left: 8px; border-color: var(--vermilion); color: var(--vermilion); }

/* PWA 新版本 / 安装提示 */
.pwa-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1100; display: flex; align-items: center; gap: 12px; max-width: min(560px, calc(100% - 24px)); padding: 10px 14px 10px 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,0.25); }
.pwa-toast .btn.primary { padding: 4px 12px; }
.pwa-close { background: none; border: none; color: var(--paper); opacity: .7; cursor: pointer; font-size: 14px; padding: 2px 4px; }
.pwa-close:hover { opacity: 1; }
:root[data-theme="dark"] .pwa-toast { background: var(--card-2); color: var(--ink); border: 1px solid var(--line); }
:root[data-theme="dark"] .pwa-close { color: var(--ink); }
.guide code { font-family: Consolas, "Courier New", monospace; font-size: 13px; background: var(--paper-2); padding: 0 5px; border-radius: 4px; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--serif);
  color: var(--ink);
  background: var(--paper);
  background-image:
    radial-gradient(circle at 10% 0%, rgba(178, 137, 63, 0.10), transparent 40%),
    radial-gradient(circle at 90% 100%, rgba(168, 50, 45, 0.07), transparent 45%);
  line-height: 1.75;
  font-size: 15px;
}

a { color: var(--vermilion); text-decoration: none; }
a:hover { text-decoration: underline; }

.hidden { display: none !important; }

/* header */
.site-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 22px 28px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--band), rgba(255,255,255,0));
}
.brand { display: flex; align-items: center; gap: 14px; }
a.brand, a.brand:hover { color: inherit; text-decoration: none; }
.brand-mark { font-size: 40px; color: var(--vermilion); line-height: 1; }
.brand h1 { margin: 0; font-size: 28px; letter-spacing: 6px; font-weight: 700; font-family: var(--kai); }
.tagline { margin: 2px 0 0; color: var(--ink-3); font-size: 13px; letter-spacing: 2px; }
.site-nav a { margin-left: 18px; font-size: 15px; color: var(--ink-2); letter-spacing: 2px; }
.site-nav a:hover { color: var(--vermilion); }

.container { max-width: 1080px; margin: 0 auto; padding: 22px 16px 60px; }

/* card */
.card {
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 26px; margin-bottom: 22px;
}
.card-title {
  margin: 0 0 16px; font-size: 20px; letter-spacing: 3px; font-family: var(--kai);
  display: flex; align-items: center; gap: 10px; border-bottom: 1px dashed var(--line); padding-bottom: 10px;
}
.card-title .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--vermilion); color: #fff; font-size: 14px; letter-spacing: 0;
}
.card-title .right { margin-left: auto; }

/* fields */
.field-row { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; margin-bottom: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.field.grow { flex: 1 1 260px; }
.label { font-size: 13px; color: var(--ink-3); letter-spacing: 1px; }
input[type="text"], input[type="number"], input[type="datetime-local"], select, textarea {
  font-family: inherit; font-size: 15px; color: var(--ink);
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card-2);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(178,137,63,0.15); }
textarea { resize: vertical; width: 100%; }
.check, .radio { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); cursor: pointer; padding-bottom: 8px; }
.check input, .radio input { accent-color: var(--vermilion); }
.time-row { align-items: flex-end; }
.lunar-manual { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; padding: 12px 14px; margin-bottom: 12px; background: var(--paper-2); border-radius: 8px; }
.lunar-manual .field { min-width: 110px; }
.lunar-preview { font-size: 14px; color: var(--ink-2); padding: 8px 12px; margin-bottom: 14px; background: rgba(178,137,63,0.08); border-left: 3px solid var(--gold); border-radius: 4px; }
.lunar-preview.warn { border-left-color: var(--vermilion); background: rgba(168,50,45,0.07); }
.hint { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; line-height: 1.7; }
.hint b { color: var(--ink-2); }
.error { color: var(--vermilion); font-size: 14px; margin-left: 14px; }

/* tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 2px solid var(--line); margin-top: 6px; }
.tab {
  font-family: inherit; font-size: 15px; letter-spacing: 1px; padding: 8px 16px; cursor: pointer;
  border: 1px solid transparent; border-bottom: none; background: transparent; color: var(--ink-2);
  border-radius: 8px 8px 0 0; margin-bottom: -2px; transition: all .15s;
}
.tab:hover { color: var(--vermilion); }
.tab.active { background: var(--card-2); border-color: var(--line); border-bottom: 2px solid var(--card-2); color: var(--vermilion); font-weight: 700; }
.panels { padding: 14px 4px 4px; }
.panel { display: none; }
.panel.active { display: block; }

.cast-actions { display: flex; align-items: center; margin-top: 18px; }
.method-guide { margin: 0 0 8px; padding: 8px 12px; background: var(--paper-2); border-radius: 6px; }

/* buttons */
.btn {
  font-family: inherit; cursor: pointer; border-radius: 6px; border: 1px solid var(--line);
  background: var(--card-2); color: var(--ink); padding: 8px 16px; font-size: 14px; letter-spacing: 1px; transition: all .15s;
}
.btn:hover { border-color: var(--gold); color: var(--vermilion); }
.btn.primary { background: var(--vermilion); border-color: var(--vermilion); color: #fff; }
.btn.primary:hover { background: var(--vermilion-2); border-color: var(--vermilion-2); color: #fff; }
.btn.large { padding: 12px 40px; font-size: 18px; letter-spacing: 6px; font-family: var(--kai); }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn.ghost { background: transparent; }

/* result */
.result-head { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-bottom: 16px; }
.result-title { font-family: var(--kai); font-size: 26px; letter-spacing: 2px; margin: 0; }
.result-title small { font-size: 14px; color: var(--ink-3); letter-spacing: 0; font-family: var(--serif); margin-left: 8px; }
.result-question { color: var(--ink-2); font-size: 15px; width: 100%; }
.result-question b { color: var(--vermilion); }
.level-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; color: #fff;
  font-family: var(--kai); font-size: 20px; letter-spacing: 4px; box-shadow: var(--shadow);
}
.level-badge small { font-size: 12px; letter-spacing: 0; opacity: .85; font-family: var(--serif); }
.lv-daji { background: linear-gradient(135deg, #a8322d, #d0644a); }
.lv-ji { background: linear-gradient(135deg, #b2893f, #d1ad60); }
.lv-ping { background: linear-gradient(135deg, #6b7a6f, #8fa093); }
.lv-xiaoxiong { background: linear-gradient(135deg, #3d6a8a, #5d8aa8); }
.lv-xiong { background: linear-gradient(135deg, #2f2f3a, #55556a); }

.meter { position: relative; height: 10px; border-radius: 5px; margin: 8px 0 4px;
  background: linear-gradient(90deg, #2f2f3a 0%, #3d6a8a 30%, #8fa093 50%, #d1ad60 70%, #c8524b 100%); }
.meter .pin { position: absolute; top: -5px; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid var(--ink); transform: translateX(-50%); box-shadow: var(--shadow); }
.meter-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); }

/* 解卦要点 */
.keypoints { margin: 18px 0 6px; padding: 16px 18px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line); border-left-width: 5px; box-shadow: var(--shadow); }
.lv-daji-border { border-left-color: #a8322d; }
.lv-ji-border { border-left-color: #b2893f; }
.lv-ping-border { border-left-color: #6b7a6f; }
.lv-xiaoxiong-border { border-left-color: #3d6a8a; }
.lv-xiong-border { border-left-color: #2f2f3a; }
.kp-label { display: inline-block; min-width: 38px; padding: 0 8px; margin-right: 8px; border-radius: 4px; background: var(--paper-2); color: var(--ink-2); font-size: 12px; letter-spacing: 1px; line-height: 1.8; text-align: center; vertical-align: middle; }
.kp-label.kp-yi { background: var(--jade); color: #fff; }
.kp-label.kp-ji { background: var(--vermilion); color: #fff; }
.kp-verdict { font-size: 16px; line-height: 1.9; padding-bottom: 10px; border-bottom: 1px dashed var(--line); margin-bottom: 10px; }
.kp-verdict b { color: var(--vermilion); font-family: var(--kai); font-size: 18px; }
.kp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 18px; font-size: 14.5px; color: var(--ink); }
.kp-grid > div { display: flex; align-items: flex-start; }
.kp-grid > div > .kp-label { flex-shrink: 0; margin-top: 3px; }
.kp-grid > div > .kp-body { min-width: 0; }
.kp-advice { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 14.5px; color: var(--ink-2); }
.lf-tag { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 999px; font-size: 12px; color: #fff; line-height: 1.7; vertical-align: middle; }
.lf-吉 { background: var(--vermilion); }
.lf-平 { background: #8fa093; }
.lf-凶 { background: var(--sky); }
.cat-hint { font-size: 12.5px; color: var(--jade); margin: -6px 0 10px; min-height: 16px; }
.hex-kw { font-size: 12px; color: var(--ink-3); margin-top: 4px; letter-spacing: 1px; }
.cat-detail p { margin: 8px 0; }
.cat-k { display: inline-block; padding: 0 8px; margin-right: 8px; border-radius: 4px; background: var(--vermilion); color: #fff; font-size: 12px; letter-spacing: 1px; line-height: 1.8; vertical-align: middle; }

.sub-title { font-family: var(--kai); font-size: 18px; letter-spacing: 2px; margin: 26px 0 10px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.sub-title::before { content: ""; display: inline-block; width: 4px; height: 18px; background: var(--vermilion); border-radius: 2px; }

.steps { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 14px; }
.steps li { margin: 2px 0; }
.meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 20px; font-size: 14px; color: var(--ink-2); }
.meta-grid b { color: var(--ink); }

/* hexagram figures */
.hex-row { display: flex; flex-wrap: wrap; gap: 22px; justify-content: space-around; padding: 10px 0; }
.hex-box { text-align: center; min-width: 200px; flex: 1 1 200px; max-width: 300px; padding: 14px 10px; background: var(--paper-2); border-radius: 10px; border: 1px solid var(--line); }
.hex-box.main { background: var(--card-2); border-color: var(--gold); box-shadow: var(--shadow); }
.hex-role { font-size: 13px; color: var(--ink-3); letter-spacing: 2px; }
.hex-name { font-family: var(--kai); font-size: 22px; letter-spacing: 2px; margin: 2px 0 8px; }
.hex-name small { font-size: 12px; color: var(--ink-3); letter-spacing: 0; font-family: var(--serif); }
.hexfig-wrap { display: inline-flex; align-items: stretch; gap: 10px; }
.hexfig { display: flex; flex-direction: column-reverse; gap: 7px; }
.yao { display: flex; gap: 12px; width: 120px; height: 12px; position: relative; }
.yao .bar { flex: 1; background: var(--ink); border-radius: 2px; }
.yao.yin .bar { flex: 1; }
.yao.moving .bar { background: var(--vermilion); }
.yao .mark { position: absolute; right: -26px; top: -5px; font-size: 12px; color: var(--vermilion); font-weight: 700; line-height: 1.8; }
.hexfig-labels { display: flex; flex-direction: column; justify-content: space-between; width: 46px; text-align: left; font-size: 12px; }
.hexfig-labels div { flex: 1; display: flex; flex-direction: column; justify-content: center; line-height: 1.3; }
.tag { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 11px; color: #fff; line-height: 1.6; }
.tag.ti { background: var(--jade); }
.tag.yong { background: var(--vermilion); }
.hex-trigram { font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.hex-trigram .wx { color: var(--gold); }

/* tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0; }
.xiang-table { min-width: 560px; }
.table th, .table td { border: 1px solid var(--line); padding: 7px 10px; text-align: left; vertical-align: top; }
.table th { background: var(--paper-2); font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.table tr.highlight td { background: rgba(178,137,63,0.10); }
.rel-good { color: var(--vermilion); font-weight: 700; }
.rel-bad { color: var(--sky); font-weight: 700; }
.rel-mid { color: var(--jade); font-weight: 700; }

/* prose blocks */
.prose { font-size: 15px; color: var(--ink); line-height: 1.9; }
.prose p { margin: 6px 0; }
.prose .lead { font-size: 16px; }
.block {
  padding: 12px 16px; border-radius: 8px; background: var(--paper-2); margin: 10px 0; border-left: 4px solid var(--gold);
}
.block.stage-start { border-left-color: var(--jade); }
.block.stage-process { border-left-color: var(--sky); }
.block.stage-end { border-left-color: var(--vermilion); }
.block .bt { font-weight: 700; margin-right: 6px; color: var(--ink-2); }
.overall { background: linear-gradient(180deg, var(--card-2), var(--paper-2)); border: 1px solid var(--gold); border-left-width: 4px; }

.classic { font-family: var(--kai); font-size: 17px; color: var(--ink); }
.yi { color: var(--ink-2); }
.yao-list { list-style: none; margin: 8px 0 0; padding: 0; }
.yao-list li { padding: 6px 10px; border-bottom: 1px dashed var(--line); display: grid; grid-template-columns: minmax(180px, 2fr) 3fr; gap: 6px 14px; }
.yao-list li.active { background: rgba(168,50,45,0.07); border-left: 3px solid var(--vermilion); }
.yao-list .classic { font-size: 15px; }
.yao-list .yi { font-size: 14px; }
.toggle { font-size: 13px; color: var(--sky); cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; margin-top: 6px; }
.toggle:hover { text-decoration: underline; }

.cat-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.cat-item { padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); font-size: 14px; }
.cat-item.active { border-color: var(--vermilion); background: rgba(168,50,45,0.05); }
.cat-item b { display: block; font-family: var(--kai); font-size: 15px; color: var(--vermilion); margin-bottom: 2px; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.copied { color: var(--jade); font-size: 14px; align-self: center; }

/* history */
.history-list { display: flex; flex-direction: column; gap: 6px; }
.history-item { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); cursor: pointer; font-size: 14px; transition: border-color .15s; }
.history-item:hover { border-color: var(--gold); }
.history-item .time { color: var(--ink-3); font-size: 13px; }
.history-item .name { font-family: var(--kai); font-size: 16px; }
.history-item .q { color: var(--ink-2); flex: 1 1 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item .lv { font-size: 12px; padding: 1px 8px; border-radius: 999px; color: #fff; letter-spacing: 1px; }
.history-item .del { margin-left: auto; color: var(--ink-3); background: none; border: none; cursor: pointer; font-size: 14px; }
.history-item .del:hover { color: var(--vermilion); }
.empty { color: var(--ink-3); font-size: 14px; }

/* guide */
.guide h3 { font-family: var(--kai); font-size: 17px; margin: 18px 0 6px; letter-spacing: 1px; }
.guide p, .guide li { font-size: 14.5px; color: var(--ink-2); }
.guide ul { padding-left: 22px; }

.site-footer { text-align: center; color: var(--ink-3); font-size: 13px; padding: 20px; border-top: 1px solid var(--line); }

/* 动爻对策 */
.kp-tactic { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 15px; color: var(--sky); line-height: 1.9; }
.kp-tactic b { color: var(--ink); margin-right: 4px; }
.kp-label.kp-ce { background: var(--sky); color: #fff; }
.tactic { color: var(--sky); }
.tactic b { color: var(--sky); }
.yao-list em.tactic { display: block; font-style: normal; font-size: 13.5px; margin-top: 2px; }
.yao-list em.tactic-cat { font-size: 12.5px; color: var(--ink-3); }
.yao-list em.tactic-cat .tactic-cat-item { display: block; }
.yao-list em.tactic-cat b { color: var(--ink-2); font-weight: 600; }

/* 方位起卦 */
#dirObjectHint { min-height: 18px; margin-top: 0; }

/* 多次起卦对比 */
.compare-bar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; padding: 12px 14px; margin-bottom: 12px; background: var(--paper-2); border-radius: 8px; }
.compare-bar .field { flex: 1 1 280px; min-width: 240px; }
.compare-bar .btn { margin-bottom: 1px; }
.hint.inline { margin: 0 0 6px; }
.compare-msg { color: var(--vermilion); font-size: 14px; margin: 0; }
.compare-box { margin-bottom: 16px; padding: 14px 18px; border: 1px solid var(--gold); border-radius: 10px; background: var(--card-2); box-shadow: var(--shadow); }
.compare-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.compare-head .sub-title { margin: 0 0 8px; flex-wrap: wrap; }
.compare-head .sub-title small { font-size: 12px; color: var(--ink-3); font-family: var(--serif); letter-spacing: 0; font-weight: normal; }
.compare-summary { padding: 12px 16px; margin: 6px 0 14px; border-radius: 8px; background: var(--paper-2); border-left: 5px solid var(--gold); }
.compare-summary .cs-main { margin: 0 0 6px; font-size: 16px; line-height: 1.8; }
.compare-summary .cs-main b { color: var(--vermilion); font-family: var(--kai); font-size: 17px; }
.compare-summary ul { margin: 0; padding-left: 20px; font-size: 14px; color: var(--ink-2); }
.compare-summary li { margin: 2px 0; }
.compare-summary .hint { margin-top: 8px; }
.compare-table { min-width: 100%; }
.compare-table th:first-child { white-space: nowrap; width: 84px; position: sticky; left: 0; z-index: 1; }
.compare-table td { min-width: 170px; text-align: center; vertical-align: middle; font-size: 13.5px; line-height: 1.7; }
.compare-table td small { color: var(--ink-3); }
.compare-table td .classic { font-size: 14px; }
.compare-table .cmp-name { font-family: var(--kai); font-size: 16px; margin-top: 4px; }
.compare-table thead th { text-align: center; }
.compare-table thead th small { font-weight: normal; color: var(--ink-3); }
.compare-table .lv { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; color: #fff; letter-spacing: 1px; }
.compare-table .lf-tag { margin-left: 4px; }
.hexfig-wrap.small { gap: 6px; }
.hexfig.small { gap: 4px; }
.hexfig.small .yao { width: 64px; height: 7px; gap: 8px; }
.hexfig.small .yao .mark { right: -18px; top: -7px; font-size: 11px; }
.hexfig-wrap.small .hexfig-labels { width: 26px; font-size: 11px; }
.history-item .cmp { display: inline-flex; align-items: center; margin: 0; padding: 0; cursor: pointer; }
.history-item .cmp input { accent-color: var(--vermilion); width: 16px; height: 16px; margin: 0; cursor: pointer; }
.history-item .cat { font-size: 12px; color: var(--jade); border: 1px solid rgba(63,122,94,0.35); border-radius: 4px; padding: 0 6px; line-height: 1.6; white-space: nowrap; }
.history-item .method { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.history-item .q i { color: var(--ink-3); font-style: normal; }
.history-item mark { background: rgba(178,137,63,0.35); color: inherit; padding: 0 1px; border-radius: 2px; }
/* 记录下面一行：当时的外应，用当时自己的说法 */
.history-item .wy { flex: 1 1 100%; font-size: 13px; color: var(--ink-2); margin-top: -2px; padding-left: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item .wy i { font-style: normal; font-size: 11px; color: var(--jade); border: 1px solid rgba(63,122,94,0.35); border-radius: 4px; padding: 0 5px; margin-right: 6px; line-height: 1.5; }
/* 快速查找里「一句话拆成几条」的候选 */
.chip.multi { flex: 1 1 100%; text-align: left; border-width: 2px; background: rgba(63,122,94,0.07); }
.chip.multi b { color: var(--jade); margin: 0 1px; }
.chip.multi small { margin-right: 2px; }
.chip.multi:hover b, .chip.multi:hover small { color: #fff; }
.title-count { font-size: 13px; color: var(--ink-3); letter-spacing: 0; font-family: var(--serif); font-weight: normal; }

/* 历史筛选 */
.history-filter { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; padding: 10px 14px; margin-bottom: 10px; border: 1px dashed var(--line); border-radius: 8px; }
.history-filter .field { min-width: 140px; }
.history-filter .field.grow { flex: 1 1 220px; }
.history-filter input[type="search"] { width: 100%; }
.history-filter .btn { margin-bottom: 1px; }

.title-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.hist-msg { font-size: 13.5px; color: var(--jade); padding: 6px 12px; margin: -6px 0 10px; background: rgba(63,122,94,0.10); border-left: 3px solid var(--jade); border-radius: 4px; }
.hist-msg.error { color: var(--vermilion); background: rgba(168,50,45,0.08); border-left-color: var(--vermilion); }
.compare-actions { display: inline-flex; gap: 8px; align-items: center; flex-shrink: 0; }
.error.info { color: var(--jade); }

/* 卦典 */
.dict-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 6px; }
.dict-card { font-family: inherit; color: inherit; text-align: center; padding: 12px 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dict-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow); }
.dict-card.active { border-color: var(--vermilion); box-shadow: 0 0 0 2px rgba(168,50,45,0.15); }
.dict-card .dc-id { font-size: 11px; color: var(--ink-3); letter-spacing: 1px; }
.dict-card .dc-name { font-family: var(--kai); font-size: 17px; letter-spacing: 1px; }
.dict-card .dc-kw { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.dict-card .dc-luck { font-size: 11px; padding: 0 7px; border-radius: 999px; color: #fff; letter-spacing: 1px; }
.luck-5 { background: var(--vermilion); }
.luck-4 { background: var(--gold); }
.luck-3 { background: #8fa093; }
.luck-2 { background: var(--sky); }
.luck-1 { background: #55556a; }
.dict-empty { color: var(--ink-3); font-size: 14px; padding: 20px 0; text-align: center; }
.dict-head { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-bottom: 8px; }
.dict-head .hexfig-wrap { flex-shrink: 0; }
.dict-head h3 { margin: 0; font-family: var(--kai); font-size: 28px; letter-spacing: 2px; }
.dict-head h3 small { font-size: 13px; color: var(--ink-3); font-family: var(--serif); letter-spacing: 0; margin-left: 8px; }
.dict-head .dh-meta { color: var(--ink-2); font-size: 14px; line-height: 1.8; }
.dict-head .dh-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.dict-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.related { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.related .btn b { font-family: var(--kai); margin-left: 4px; }
.yao-list .yi .tactic { display: block; }
.trigram-legend { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.trigram-legend button { font-family: inherit; font-size: 13px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink-2); cursor: pointer; }
.trigram-legend button:hover, .trigram-legend button.on { border-color: var(--vermilion); color: var(--vermilion); }

/* 白话辅助：拼音、卦名释义、说明 */
.py { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 12.5px; color: var(--ink-3); margin: 0 6px; letter-spacing: 0.5px; }
.result-gloss { width: 100%; font-size: 14px; color: var(--ink-2); line-height: 1.9; }
.result-gloss b { color: var(--ink); font-family: var(--kai); font-size: 16px; }
.gloss-note { display: block; font-size: 13px; color: var(--ink-3); }
.gloss-line { font-size: 14px; color: var(--ink-2); margin: 0 0 4px; }
.kp-yao { grid-column: 1 / -1; }
.kp-yao .classic-inline { font-family: var(--kai); font-size: 15.5px; }
.kp-sub { display: block; font-size: 14px; color: var(--ink-2); }
.hex-py { font-size: 12px; color: var(--ink-3); margin: -6px 0 8px; font-style: italic; font-family: Georgia, "Times New Roman", var(--serif); }
.cat-exp { display: inline-block; font-size: 12px; color: var(--ink-3); margin-right: 8px; }
.dc-py { font-size: 11.5px; color: var(--ink-3); font-style: italic; font-family: Georgia, "Times New Roman", serif; }

/* 八卦专页 */
.bagua-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; margin-top: 6px; }
@media (max-width: 900px) { .bagua-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 480px) { .bagua-grid { grid-template-columns: repeat(2, 1fr); } }
.bagua-card { font-family: inherit; color: inherit; text-align: center; padding: 12px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.bagua-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow); }
.bagua-card.active { border-color: var(--vermilion); box-shadow: 0 0 0 2px rgba(168,50,45,0.15); }
.bagua-card .bc-name { font-family: var(--kai); font-size: 18px; }
.bagua-card .bc-name small { display: block; font-size: 11px; color: var(--ink-3); font-style: italic; font-family: Georgia, serif; letter-spacing: 0.5px; }
.bagua-card .bc-sub { font-size: 12px; color: var(--ink-2); }
.bagua-card .bc-kw { font-size: 11px; color: var(--ink-3); line-height: 1.5; }
.trifig { display: flex; flex-direction: column; gap: 5px; }
.trifig .yao { display: flex; gap: 8px; width: 60px; height: 8px; }
.trifig .yao .bar { flex: 1; background: var(--ink); border-radius: 2px; }
.trifig-big .trifig { gap: 8px; }
.trifig-big .yao { width: 110px; height: 13px; gap: 12px; }
.bagua-detail { margin-top: 14px; padding: 14px 18px; border: 1px solid var(--gold); border-radius: 10px; background: var(--card-2); box-shadow: var(--shadow); }
.gua-link small { display: block; font-size: 11px; color: var(--ink-3); letter-spacing: 0; line-height: 1.4; }
.gua-link { text-align: left; }

/* 整篇解读 */
.result-py { width: 100%; font-size: 13px; color: var(--ink-3); margin-top: -6px; }
.result-py .py { margin: 0 4px 0 0; }
.result-py .gloss-note { margin-top: 2px; }
.reading { margin: 18px 0 8px; font-size: 16px; line-height: 2; color: var(--ink); }
.reading p { margin: 0 0 12px; text-align: justify; }
.reading b { color: var(--ink); }
.reading .rd-intro { color: var(--ink-2); font-size: 15px; }
.reading .rd-answer { font-size: 17px; padding: 12px 16px; border-radius: 8px; background: var(--card-2); border: 1px solid var(--line); border-left: 5px solid var(--vermilion); }
.reading .rd-verdict { color: var(--vermilion); font-family: var(--kai); font-size: 19px; font-weight: 700; margin-right: 4px; }
.reading .rd-key { margin: 0 0 12px; padding: 12px 16px; border-radius: 8px; background: var(--paper-2); border-left: 4px solid var(--gold); }
.reading .rd-key p { margin: 0; }
.reading .rd-key .classic-inline { font-family: var(--kai); font-size: 17px; color: var(--ink); }
.reading .rd-do { margin-top: 4px !important; color: var(--sky); }
.reading .rd-do b { color: var(--sky); }
.reading .rd-advice { padding: 10px 16px; border-radius: 8px; background: var(--card-2); border: 1px dashed var(--line); }
.reading .rd-detail, .reading .rd-timing { font-size: 14.5px; color: var(--ink-2); line-height: 1.9; }
.reading.brief { margin: 6px 0 0; font-size: 15px; line-height: 1.9; }
.reading.brief p { margin-bottom: 8px; }
.reading.brief .rd-answer { font-size: 15.5px; padding: 8px 12px; }
.reading.brief .rd-verdict { font-size: 17px; }
.reading.brief .rd-key { padding: 8px 12px; margin-bottom: 8px; }
.reading.brief .rd-advice { padding: 6px 12px; }
.reading .rd-waiying { padding: 10px 14px; border-radius: 8px; background: rgba(63,122,94,0.08); border-left: 4px solid var(--jade); margin-bottom: 6px; }
.reading .rd-basis { font-size: 13.5px; line-height: 1.8; color: var(--ink-3); padding: 0 14px 0 18px; text-align: left; }
.reading .rd-basis b { color: var(--jade); }
.reading .rd-tag { display: inline-block; padding: 0 8px; margin-right: 8px; border-radius: 4px; background: var(--jade); color: #fff; font-size: 12px; letter-spacing: 1px; line-height: 1.8; vertical-align: middle; }
.details-toggle { display: block; margin: 14px 0 6px; font-size: 14px; }

/* 「说短一点」开关与短版解读 */
.rd-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 16px 0 -6px; }
.rd-toolbar .btn.on { background: var(--sky); border-color: var(--sky); color: #fff; }
.rd-toolbar .hint.inline { margin: 0; }
.reading.short { font-size: 17px; }
.reading.short .rd-answer { font-size: 18px; }
.reading.short .rd-verdict { font-size: 21px; }
.reading.short .rd-key { padding: 14px 18px; }
.reading.short .rd-key .classic-inline { font-size: 18px; }
.reading.short .rd-do { font-size: 17px; }
@media (max-width: 640px) {
  .rd-toolbar .btn { flex: 0 0 auto; }
  .rd-toolbar .hint.inline { flex: 1 1 100%; }
}

/* 外应（三要十应）输入 */
.waiying-box { margin: 14px 0 0; padding: 0 14px; border: 1px dashed var(--line); border-radius: 8px; background: var(--card-2); }
.waiying-box summary { cursor: pointer; padding: 10px 0; font-size: 14.5px; color: var(--ink-2); letter-spacing: 0.5px; list-style: none; }
.waiying-box summary::-webkit-details-marker { display: none; }
.waiying-box summary::before { content: "▸ "; color: var(--jade); }
.waiying-box[open] summary::before { content: "▾ "; }
.waiying-box[open] summary { border-bottom: 1px dashed var(--line); margin-bottom: 8px; }
.waiying-box > .hint { margin-top: 0; }
.waiying-box .field-row { margin-top: 10px; }
.waiying-box .wy-note { width: 100%; margin: 4px 0 8px; }
.waiying-box .wy-note input { width: 100%; }
#wyHint { min-height: 18px; margin: 0 0 10px; color: var(--jade); }
/* 多条外应：快速查找 + 逐条输入行 */
.wy-search { margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: rgba(63,122,94,0.06); border: 1px dashed rgba(63,122,94,0.35); }
.wy-search .field { width: 100%; }
.wy-search input { width: 100%; }
.wy-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 8px; }
.wy-chips .hint.inline { margin: 0; flex: 1 1 100%; }
.chip { font-family: inherit; font-size: 13.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--jade); background: var(--card); color: var(--ink); cursor: pointer; line-height: 1.5; }
.chip small { color: var(--jade); font-size: 12px; }
.chip small.wy-dir-tag { color: var(--vermilion); margin-left: 4px; }
.chip:hover small.wy-dir-tag { color: #fff; }
.wy-chips .hint.inline .chip.face { padding: 1px 8px; font-size: 12px; margin: 2px 2px 0 0; vertical-align: middle; }
.wy-chips .chip.face.on { background: var(--jade); color: #fff; border-color: var(--jade); }
.today-wy { margin: 6px 0 10px; padding: 8px 12px; border-radius: 8px; background: rgba(63,122,94,0.06); border: 1px dashed rgba(63,122,94,0.35); }
.today-wy .field { width: 100%; }
.today-wy input { width: 100%; }
.today-wy-tags { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.today-wy-tags .chip.on { background: var(--card); color: var(--ink); border-color: var(--jade); cursor: default; }
.today-wy-tags .chip.on small { color: var(--vermilion); margin-left: 4px; }
.today-wy-tags .wy-tag-del { border: 0; background: none; color: var(--ink-3); cursor: pointer; margin-left: 6px; padding: 0 2px; font-size: 12px; }
.today-wy-tags .wy-tag-del:hover { color: var(--vermilion); }
.chip:hover { background: var(--jade); color: #fff; }
.chip:hover small { color: #fff; }
.chip.alt { border-color: var(--line); color: var(--ink-2); border-style: dashed; }
.chip.alt:hover { background: var(--paper-2); color: var(--ink); }
/* 方位起卦里的快速查找：和外应框同一套样式，只是放在面板顶部 */
.dir-search { margin: 0 0 12px; }
/* 八卦专页：归这一卦的外应，按组列成一片片小标签 */
.wy-dict { margin: 4px 0 8px; }
.wy-dict-group { margin: 10px 0; }
.wy-dict-group > b { display: block; font-family: var(--kai); font-size: 15px; color: var(--vermilion); margin-bottom: 4px; }
.wy-dict-group > b small { font-family: inherit; font-size: 12px; font-weight: normal; color: var(--ink-3); margin-left: 8px; }
.wy-dict a.chip { text-decoration: none; display: inline-block; }
.wy-dict a.chip small { color: var(--ink-3); }
.wy-dict a.chip:hover small { color: #fff; }
.wy-item { position: relative; margin-top: 10px; padding: 8px 12px 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); }
.wy-item + .wy-item { margin-top: 8px; }
.wy-item .field-row { margin-top: 4px; margin-bottom: 8px; align-items: flex-end; }
.wy-item .lunar-manual { margin-top: 0; }
.wy-item .wy-idx { color: var(--jade); font-weight: bold; margin-right: 2px; }
.wy-item .wy-del { align-self: flex-end; margin-bottom: 2px; color: var(--ink-3); }
.wy-item .wy-del:hover { color: var(--vermilion); border-color: var(--vermilion); }
.wy-item .wy-item-hint { min-height: 0; margin: -2px 0 8px; color: var(--jade); }
.wy-item .wy-stroke-box .field { min-width: 130px; }
.wy-item .wy-stroke-hint { margin: 0 0 6px; align-self: center; flex: 1 1 260px; color: var(--jade); }
.wy-list-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 6px; }
.wy-list-actions .hint.inline { margin: 0; }
.details { padding-top: 4px; border-top: 1px dashed var(--line); margin-top: 8px; }

/* 今日一卦 */
.today-card { border-color: var(--gold); background: linear-gradient(180deg, var(--card-2), var(--card)); }
.today-card .card-title .num { background: var(--gold); }
.today-grid { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-start; }
.today-fig { flex: 0 0 auto; text-align: center; padding: 14px 16px 10px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; }
.today-fig-name { font-family: var(--kai); font-size: 20px; letter-spacing: 2px; margin-top: 10px; }
.today-main { flex: 1 1 420px; min-width: 0; }
.today-head { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-bottom: 4px; }
.today-head .result-title { font-size: 24px; }
.today-gloss { margin: 2px 0 10px; font-size: 14px; color: var(--ink-2); }
.today-term { margin: -4px 0 10px; padding: 6px 10px; font-size: 13.5px; color: var(--ink-2); background: var(--band); border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0; }
.jieqi-head { margin: 4px 0 10px; font-size: 14.5px; color: var(--ink-2); line-height: 1.7; }
.jieqi-head b { color: var(--vermilion); }
.jieqi-year { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.jieqi-year b { font-family: var(--kai); font-size: 17px; letter-spacing: 1px; }
.jieqi-table { font-size: 14px; }
.jieqi-table th, .jieqi-table td { padding: 5px 10px; white-space: nowrap; }
.jieqi-table tr.cur td { background: rgba(178,137,63,0.13); font-weight: 600; }
.jieqi-table tr.past td { color: var(--ink-3); }
.jieqi-table .jq-jie { color: var(--vermilion); }
.jieqi-table .jq-qi { color: var(--ink-3); }
.jieqi-note { font-size: 13px; color: var(--ink-3); margin: 8px 0 0; line-height: 1.7; }
.today-main .kp-verdict { font-size: 15.5px; }
.today-main .kp-grid { font-size: 14px; }
.today-main .kp-tactic { font-size: 14.5px; }
.today-actions { margin-top: 14px; }
.today-actions .btn.ghost { text-decoration: none; }

/* 应验标记 */
.history-item .vf { display: inline-flex; align-items: center; }
.vf-btn { font-family: inherit; font-size: 12px; line-height: 1.6; padding: 0 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-2); cursor: pointer; white-space: nowrap; letter-spacing: 0.5px; }
.vf-btn.vf-none { color: var(--ink-3); background: transparent; border-style: dashed; }
.vf-btn.vf-none:hover { color: var(--vermilion); border-color: var(--vermilion); }
.vf-btn.vf-yes { background: var(--vermilion); border-color: var(--vermilion); color: #fff; }
.vf-btn.vf-part { background: var(--gold); border-color: var(--gold); color: #fff; }
.vf-btn.vf-no { background: var(--sky); border-color: var(--sky); color: #fff; }
span.vf-btn { cursor: default; }
.vf-dot { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 12px; margin-right: 4px; }
.vf-dot.vf-yes { background: var(--vermilion); }
.vf-dot.vf-part { background: var(--gold); }
.vf-dot.vf-no { background: var(--sky); }
.vf-c-yes { color: var(--vermilion); font-weight: 700; }
.vf-c-part { color: var(--gold); font-weight: 700; }
.vf-c-no { color: var(--sky); font-weight: 700; }
.verify-editor { margin: -2px 0 6px 28px; padding: 12px 16px; border: 1px solid var(--gold); border-left-width: 4px; border-radius: 8px; background: var(--card-2); box-shadow: var(--shadow); }
.ve-title { font-family: var(--kai); font-size: 16px; margin-bottom: 6px; }
.ve-title small { font-family: var(--serif); font-size: 12.5px; color: var(--ink-3); margin-left: 8px; }
.ve-opts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 6px; }
.ve-opts .radio { padding-bottom: 4px; font-size: 14.5px; }
.verify-editor .field { margin-bottom: 8px; }
.verify-editor textarea { font-size: 14px; }
.ve-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ve-actions .error { margin-left: 0; font-size: 13px; }
.ve-actions .hint.inline { margin: 0; }
.verify-banner { padding: 10px 14px; margin: 0 0 14px; border-radius: 8px; border-left: 5px solid var(--gold); background: var(--paper-2); font-size: 14.5px; color: var(--ink-2); }
.verify-banner.vf-yes { border-left-color: var(--vermilion); }
.verify-banner.vf-part { border-left-color: var(--gold); }
.verify-banner.vf-no { border-left-color: var(--sky); }
.verify-banner b { color: var(--ink); }
.verify-banner small { color: var(--ink-3); margin-left: 6px; }
.verify-stats { padding: 12px 16px; margin: -2px 0 12px; border: 1px solid var(--gold); border-radius: 8px; background: var(--card-2); box-shadow: var(--shadow); }
.vs-summary { font-size: 15px; line-height: 1.9; }
.vs-summary b { color: var(--vermilion); }
.vs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 6px 20px; margin-top: 6px; }
.vs-block { min-width: 0; }
.vs-block h5 { margin: 8px 0 2px; font-family: var(--kai); font-size: 15px; letter-spacing: 1px; color: var(--ink-2); }
.vs-table { font-size: 13.5px; }
.vs-table th, .vs-table td { padding: 5px 8px; white-space: nowrap; }
.vs-table td small { color: var(--ink-3); margin-left: 2px; }
.vs-wide { margin-top: 6px; }
.vs-summary .vs-csv { margin-left: 10px; vertical-align: middle; }
.solar-box { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; margin: 6px 0 8px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 8px; background: var(--band); }
.solar-box .field { margin: 0; min-width: 220px; }
.solar-box .hint.inline { flex: 1 1 200px; margin: 0 0 6px; }
.vs-table td .vs-said { display: block; margin-left: 0; font-size: 12px; white-space: normal; max-width: 220px; }
.vs-bar { display: inline-block; width: 64px; height: 8px; border-radius: 4px; background: var(--paper-2); border: 1px solid var(--line); vertical-align: middle; margin-right: 6px; overflow: hidden; }
.vs-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--vermilion)); }
.cs-verify { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.cs-verify .vf-btn { margin-left: 4px; }

/* 方位起卦：自定义事物 */
#dirCustomBox { margin-top: -4px; }
#dirObject optgroup { font-style: normal; font-weight: 700; color: var(--ink-3); }

/* 长图弹窗 */
body.modal-open { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 1000; background: rgba(30, 24, 18, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal-box { background: var(--paper); border-radius: 12px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); width: min(980px, 100%); max-height: 96vh; display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.modal-head b { font-family: var(--kai); font-size: 17px; letter-spacing: 2px; white-space: nowrap; }
.modal-head .hint { margin: 0; flex: 1; text-align: right; white-space: nowrap; }
.modal-head .btn { white-space: nowrap; }
.modal-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--card-2); }
.seg button { font-family: inherit; font-size: 13px; padding: 4px 12px; border: none; background: transparent; color: var(--ink-2); cursor: pointer; letter-spacing: 1px; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { color: var(--vermilion); }
.seg button.on { background: var(--vermilion); color: #fff; }
.modal.busy img { opacity: 0.45; transition: opacity .15s; }
.modal-foot .hint { margin: 0; flex: 1; align-self: center; }
.modal-body { overflow: auto; padding: 12px 16px; background: var(--paper-2); -webkit-overflow-scrolling: touch; }
.modal-body img { display: block; width: 100%; height: auto; border: 1px solid var(--line); box-shadow: var(--shadow); }
.modal-foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); justify-content: flex-end; }
.modal-foot .btn { text-decoration: none; }

@media (max-width: 640px) {
  .compare-bar .field { min-width: 100%; }
  .compare-table td { min-width: 140px; }
  .modal { padding: 8px; }
  .modal-head { flex-wrap: wrap; }
  .modal-head .hint, .modal-foot .hint { display: none; }
  .modal-foot .btn { flex: 1 1 auto; text-align: center; }
  .history-filter .field { min-width: calc(50% - 7px); }
  .history-item .method { display: none; }
  .history-item .q { flex: 1 1 100%; white-space: normal; }
  .history-item .wy { white-space: normal; padding-left: 0; line-height: 1.7; }
  .history-item .vf { margin-left: auto; }
  .history-item .del { margin-left: 4px; }
  .site-header { padding: 16px; }
  .brand h1 { font-size: 22px; letter-spacing: 3px; }
  .site-nav a { margin-left: 12px; font-size: 14px; }
  .card { padding: 16px; }
  .yao-list li { grid-template-columns: 1fr; }
  .btn.large { width: 100%; }
  .hex-box { max-width: none; }
  .result-title { font-size: 22px; }
  .result-title small.sub { display: block; margin-left: 0; line-height: 1.5; }
  .today-fig { width: 100%; }
  .today-head .result-title { font-size: 21px; }
  .today-actions .btn { flex: 1 1 auto; text-align: center; }
  .verify-editor { margin-left: 0; }
  .vs-grid { grid-template-columns: 1fr; }
}

/* 手机上点得准、看得清：手指的落点比鼠标粗得多，11px 的字在手机上也偏小 */
@media (max-width: 640px) {
  /* 导航、标应验、删除这些原本只有 20 出头的高度，撑到 32 以上才点得准 */
  .site-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 5px; margin-left: 7px; }
  .theme-toggle { min-height: 34px; }
  .btn.small { min-height: 32px; padding: 6px 12px; }
  .vf-btn { min-height: 30px; display: inline-flex; align-items: center; padding: 0 12px; }
  span.vf-btn { min-height: 0; }
  .history-item .del { min-width: 32px; min-height: 32px; font-size: 16px; }
  .check input, .radio input { width: 18px; height: 18px; }
  .seg button { min-height: 32px; }

  /* 11px 的说明字、卦典卡片上的拼音与关键词，在手机上抬到 12 以上 */
  .tag { font-size: 12px; }
  .dict-card .dc-id, .dict-card .dc-luck { font-size: 12px; }
  .dict-card .dc-kw, .dc-py { font-size: 12.5px; }
  .bagua-card .bc-kw, .bagua-card .bc-name small, .gua-link small { font-size: 12px; }
}

/* ========== 分页视图：起卦 / 解卦 / 历史 / 设置 / 说明，一次只显示一页 ========== */
.view { display: none; }
.view.active { display: block; }
.site-nav a { position: relative; padding-bottom: 2px; }
.site-nav a.active { color: var(--vermilion); font-weight: 700; }
.site-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--vermilion); border-radius: 1px; }
.empty-view .empty { font-size: 15px; margin: 6px 0 14px; }
.empty-view .actions { margin-top: 0; }
.empty-view .actions .btn { text-decoration: none; }

/* 手机：顶部只留品牌，导航放到底部一条 */
.tabbar { display: none; }
@media (max-width: 640px) {
  .site-nav { display: none; }
  .site-header { padding: 12px 16px; }
  .brand-mark { font-size: 30px; }
  .brand h1 { font-size: 20px; letter-spacing: 3px; }
  .tagline { font-size: 12px; letter-spacing: 1px; }
  .container { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; justify-content: space-around; align-items: stretch;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
    background: var(--card-2); border-top: 1px solid var(--line);
    box-shadow: 0 -2px 12px rgba(60, 40, 20, 0.08);
  }
  .tabbar a { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; padding: 4px 0; color: var(--ink-3); font-size: 12px; letter-spacing: 1px; text-decoration: none; border-radius: 8px; }
  .tabbar a .tb-ico { font-size: 20px; line-height: 1.2; }
  .tabbar a.active { color: var(--vermilion); font-weight: 700; }
  .tabbar a:hover { text-decoration: none; }
  .pwa-toast { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
}

/* 起卦时间下面的农历一行 */
.lunar-preview .lp-sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; }

/* 今日一卦收着时的一行 */
.today-brief { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.today-brief-fig { flex: 0 0 auto; }
.today-brief-main { flex: 1 1 200px; min-width: 0; }
.today-brief-name { font-family: var(--kai); font-size: 19px; letter-spacing: 1px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.today-brief-name .zhi { font-size: 13px; color: var(--ink-3); font-family: var(--serif); letter-spacing: 0; }
.today-brief-name .lv { font-size: 12px; padding: 1px 9px; border-radius: 999px; color: #fff; letter-spacing: 1px; font-family: var(--serif); }
.today-brief-text { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; margin-top: 2px; }
.today-brief .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .today-brief .btn { flex: 1 1 100%; }
  /* 标题行：农历那一小行挪到第二行，「展开」按钮留在标题右边 */
  .today-card .card-title, #history .card-title { flex-wrap: wrap; row-gap: 2px; }
  .today-card .card-title .title-count, #history .card-title .title-count { flex: 1 1 100%; order: 5; }
}

/* 体用五行分析：体 / 用两张卡 + 中间箭头 + 一排小条 */
.ty-panel { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(150px, 1.4fr) minmax(120px, 1fr); gap: 12px; align-items: stretch; margin: 10px 0 12px; }
.ty-card { text-align: center; padding: 14px 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ty-card.ty-ti { border-color: rgba(63,122,94,0.55); box-shadow: inset 0 3px 0 var(--jade); }
.ty-card.ty-yong { border-color: rgba(168,50,45,0.45); box-shadow: inset 0 3px 0 var(--vermilion); }
.ty-role { font-size: 12.5px; color: var(--ink-3); letter-spacing: 1px; display: flex; align-items: center; gap: 6px; }
.ty-sym { font-size: 40px; line-height: 1.1; color: var(--ink); }
.ty-name { font-family: var(--kai); font-size: 22px; letter-spacing: 2px; line-height: 1.2; }
.ty-name small { display: block; font-family: var(--serif); font-size: 12px; color: var(--ink-3); letter-spacing: 0; margin-top: 2px; }
.ty-wx { display: inline-block; min-width: 26px; padding: 0 9px; border-radius: 999px; color: #fff; font-size: 13px; line-height: 1.7; letter-spacing: 1px; }
.ty-pos { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; margin-top: 2px; }
.wx-mu { background: #3f7a5e; } .wx-huo { background: #b8433a; } .wx-tu { background: #a5793a; } .wx-jin { background: #8a7d66; } .wx-shui { background: #3d6a8a; }
em.wx-mu, em.wx-huo, em.wx-tu, em.wx-jin, em.wx-shui { background: none; font-style: normal; font-weight: 700; margin-left: 3px; }
em.wx-mu { color: #3f7a5e; } em.wx-huo { color: #b8433a; } em.wx-tu { color: #a5793a; } em.wx-jin { color: #8a7d66; } em.wx-shui { color: #3d6a8a; }
:root[data-theme="dark"] em.wx-mu { color: #72b391; } :root[data-theme="dark"] em.wx-huo { color: #e07c70; } :root[data-theme="dark"] em.wx-tu { color: #d1ad60; } :root[data-theme="dark"] em.wx-jin { color: #bfb39c; } :root[data-theme="dark"] em.wx-shui { color: #7fadcf; }
.ty-flow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border-radius: 12px; background: var(--paper-2); border: 1px dashed var(--line); text-align: center; }
.ty-rel-name { font-family: var(--kai); font-size: 22px; letter-spacing: 3px; }
.ty-flow.rel-good .ty-rel-name { color: var(--vermilion); }
.ty-flow.rel-bad .ty-rel-name { color: var(--sky); }
.ty-flow.rel-mid .ty-rel-name { color: var(--jade); }
.ty-flow.rel-good, .ty-flow.rel-bad, .ty-flow.rel-mid { font-weight: normal; }
.ty-arrow { display: flex; align-items: center; width: 100%; gap: 6px; }
.ty-end { font-size: 13px; color: var(--ink-2); flex: 0 0 auto; }
.ty-line { position: relative; flex: 1 1 auto; height: 2px; background: currentColor; display: flex; align-items: center; justify-content: center; min-width: 60px; }
.ty-line b { background: var(--paper-2); padding: 0 6px; font-size: 14px; line-height: 1; transform: translateY(0); font-weight: 700; }
.ty-arrow-left .ty-line::before, .ty-arrow-right .ty-line::after, .ty-arrow-both .ty-line::before, .ty-arrow-both .ty-line::after { content: ""; position: absolute; top: -5px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ty-arrow-left .ty-line::before, .ty-arrow-both .ty-line::before { left: -1px; border-right: 9px solid currentColor; }
.ty-arrow-right .ty-line::after, .ty-arrow-both .ty-line::after { right: -1px; border-left: 9px solid currentColor; }
.ty-flow.rel-good .ty-arrow { color: var(--vermilion); }
.ty-flow.rel-bad .ty-arrow { color: var(--sky); }
.ty-flow.rel-mid .ty-arrow { color: var(--jade); }
.ty-rel-desc { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.ty-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; margin: 0 0 10px; }
.ty-chip { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "role role" "gua rel" "desc desc"; gap: 2px 10px; align-items: center; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); font-size: 13.5px; }
.ty-chip-role { grid-area: role; font-size: 12px; color: var(--ink-3); letter-spacing: 1px; }
.ty-chip-gua { grid-area: gua; font-family: var(--kai); font-size: 17px; letter-spacing: 1px; }
.ty-chip-rel { grid-area: rel; justify-self: start; font-size: 13px; padding: 0 8px; border-radius: 999px; border: 1px solid currentColor; line-height: 1.6; }
.ty-chip-desc { grid-area: desc; color: var(--ink-2); font-size: 13px; line-height: 1.6; }
@media (max-width: 640px) {
  .ty-panel { grid-template-columns: 1fr 1fr; grid-template-areas: "ti yong" "flow flow"; }
  .ty-card.ty-ti { grid-area: ti; }
  .ty-card.ty-yong { grid-area: yong; }
  .ty-flow { grid-area: flow; }
  .ty-sym { font-size: 34px; }
  .ty-name { font-size: 20px; }
}

/* 历史页：筛选 / 统计 / 对比收在一个折叠里，先看到记录 */
.hist-tools { margin: 0 0 12px; }
.hist-tools summary { cursor: pointer; list-style: none; font-size: 14px; color: var(--ink-2); padding: 8px 12px; border: 1px dashed var(--line); border-radius: 8px; letter-spacing: 0.5px; }
.hist-tools summary::-webkit-details-marker { display: none; }
.hist-tools summary::before { content: "▸ "; color: var(--sky); }
.hist-tools[open] summary::before { content: "▾ "; }
.hist-tools[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; }
.hist-tools[open] .history-filter { border-top-left-radius: 0; border-top-right-radius: 0; margin-bottom: 8px; }
.hist-tools .compare-bar { margin-bottom: 0; }

/* 卦典页的分页：六十四卦 / 八卦 / 节气 */
.subtabs { display: flex; justify-content: center; gap: 8px; margin: 0 0 16px; }
.subtabs a { padding: 7px 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); color: var(--ink-2); font-size: 15px; letter-spacing: 2px; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
.subtabs a:hover { border-color: var(--gold); color: var(--vermilion); text-decoration: none; }
.subtabs a.active { background: var(--vermilion); border-color: var(--vermilion); color: #fff; font-weight: 700; }
@media (max-width: 640px) { .subtabs a { flex: 1 1 0; justify-content: center; padding: 7px 8px; } }

/* 设置页 */
.set-block { padding: 12px 0 14px; border-bottom: 1px dashed var(--line); }
.set-block:last-child { border-bottom: none; }
.set-block h3, .set-block summary { font-family: var(--kai); font-size: 17px; letter-spacing: 1px; margin: 0 0 6px; color: var(--ink); }
.set-block > .hint { margin: 0 0 10px; }
.set-block .field-row { margin-bottom: 6px; }
.set-block .check { display: flex; padding: 6px 0; font-size: 14.5px; }
.set-adv summary { cursor: pointer; list-style: none; }
.set-adv summary::-webkit-details-marker { display: none; }
.set-adv summary::before { content: "▸ "; color: var(--ink-3); }
.set-adv[open] summary::before { content: "▾ "; }
.set-adv[open] summary { margin-bottom: 8px; }
.theme-seg button { min-height: 34px; padding: 4px 16px; font-size: 14px; }
.set-links { margin: 4px 0 8px; font-size: 15px; line-height: 2; }
.set-links a { display: block; }
#cityHint { min-height: 18px; }
#setCity { max-width: 100%; }
#settings .card-title .num, #guide .card-title .num { background: var(--sky); }
.card-title .title-actions .btn { text-decoration: none; }

@media print {
  .site-header, .site-nav, .tabbar, #today, #cast, #history, #guide, #settings, .actions, .site-footer, .toggle, .modal, .pwa-toast, .verify-banner small { display: none !important; }
  .view { display: none; }
  .view[data-view="result"] { display: block !important; }
  body { background: #fff; color: #2a241f; }
  .card { box-shadow: none; border: none; }
}