/* 五行文化中心：国风五色 + 交互圆盘，移动优先自适应，深浅色跟随系统。 */
.wx-h1 { font-family: var(--font-serif); }
.wx-note { font-size: 12px; color: var(--c-ink-3); margin: 8px 0 0; line-height: 1.7; }
.wx-note a { color: var(--c-primary); }
.wx-chip { display: inline-block; min-width: 26px; text-align: center; color: #fff; font-family: var(--font-serif); border-radius: 7px; padding: 1px 8px; font-weight: 700; }

/* ① 交互圆盘 */
.wx-wheel-card { background: linear-gradient(180deg, #fbfaf5, #f4f1e8); }
.wx-wheel-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
#wxWheel { width: 320px; max-width: 100%; height: auto; flex: 0 0 auto; }
.wx-node { cursor: pointer; }
.wx-node circle { transition: .2s; }
.wx-node:hover circle, .wx-node:focus circle { filter: brightness(1.08); }
.wx-node:focus { outline: none; }
.wx-node.dim { opacity: .28; }
.wx-node.on circle { stroke: #333; stroke-width: 3; }
.wx-sheng, .wx-ke { transition: .2s; }
.wx-sheng.dim, .wx-ke.dim { opacity: .12; }
.wx-sheng.hot { stroke: #1f8a5b !important; stroke-width: 3.4 !important; }
.wx-ke.hot { stroke: #c0392b !important; stroke-width: 3 !important; }
.wx-wheel-side { flex: 1; min-width: 210px; }
.wx-legend { display: flex; gap: 14px; font-size: 12px; margin-bottom: 8px; }
.wx-lg-sheng { color: #1f8a5b; } .wx-lg-ke { color: #c0392b; }
.wx-relinfo { background: rgba(255, 255, 255, .7); border: 1px solid var(--c-line); border-radius: 10px; padding: 12px 14px; min-height: 92px; }
.wx-relinfo-tip { margin: 0; font-size: var(--t-sm); color: var(--c-ink-2); line-height: 1.8; }
.wx-rel-hd { font-family: var(--font-serif); font-size: 1.1rem; color: var(--c-ink); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; }
.wx-rel-list { display: grid; gap: 5px; font-size: var(--t-sm); }
.wx-rel-item { display: flex; align-items: center; gap: 7px; }
.wx-rel-item .r { font-size: 11px; border-radius: 5px; padding: 1px 7px; color: #fff; white-space: nowrap; }
.r-sheng { background: #1f8a5b; } .r-beisheng { background: #6fbf8f; } .r-ke { background: #c0392b; } .r-beike { background: #e08a84; }

/* ② 属性表 */
.wx-attr-scroll { overflow-x: auto; }
.wx-attr { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 480px; }
.wx-attr th, .wx-attr td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--c-line); white-space: nowrap; }
.wx-attr th { color: var(--c-ink-3); font-weight: 600; font-size: 12px; background: rgba(0, 0, 0, .02); }

/* ③ 五行应用卡 */
.wx-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.wx-app { border: 1px solid var(--c-line); border-left: 4px solid var(--wx); border-radius: 12px; padding: 12px 14px; background: #fff; }
.wx-app-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wx-app-hd small { font-size: 12px; color: var(--c-ink-3); }
.wx-app-row { display: flex; gap: 8px; font-size: var(--t-sm); padding: 4px 0; border-top: 1px dashed var(--c-line); line-height: 1.7; }
.wx-app-row b { flex: 0 0 62px; color: var(--wx); font-weight: 600; }
.wx-app-row span { flex: 1; color: var(--c-ink-2); }

/* ④⑤ 工具 */
.wx-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wx-tool { border: 1px solid var(--c-line); border-radius: 12px; padding: 14px; background: #fff; }
.wx-tool h3 { margin: 0 0 10px; font-size: 1rem; }
.wx-tool-row { display: flex; gap: 8px; flex-wrap: wrap; }
.wx-tool-row input, .wx-tool-row select { padding: 9px 11px; border: 1px solid var(--c-line); border-radius: 8px; font-size: 15px; background: #fff; color: var(--c-ink); }
.wx-tool-row input[type=date] { flex: 1; min-width: 130px; }
.wx-tool-row input#wxCharInput { flex: 1; min-width: 90px; text-align: center; font-family: var(--font-serif); font-size: 20px; }
.wx-tool-result { margin-top: 12px; padding: 12px 14px; background: var(--c-primary-soft, #f6efe3); border-radius: 10px; font-size: var(--t-sm); line-height: 1.9; }
.wx-tool-result .wx-dist { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.wx-tool-result .wx-d { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; padding: 2px 9px; border-radius: 999px; color: #fff; }
.wx-tool-result .big { font-family: var(--font-serif); font-size: 1.5rem; }
.wx-tool-result .wx-miss { color: #c0392b; font-weight: 600; }
.wx-tool-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ⑥ 纳音表 */
.wx-nayin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.wx-nayin { border: 1px solid var(--c-line); border-radius: 9px; padding: 8px 10px; background: #fff; display: flex; flex-direction: column; gap: 2px; }
.wx-nayin .gz { font-size: 12px; color: var(--c-ink-3); }
.wx-nayin b { font-family: var(--font-serif); font-size: 1.05rem; }
.wx-nayin .yrs { font-size: 11px; color: var(--c-ink-3); line-height: 1.4; }
.wx-nayin .yrs a { color: var(--c-primary); text-decoration: none; }
.wx-nayin .yrs a:hover { text-decoration: underline; }
.wx-nayin.hit { outline: 2px solid var(--c-gold, #b5824a); background: #fff9ec; }

/* 文化 */
.wx-culture .panel-bd p { line-height: 2; margin: 0 0 12px; text-indent: 2em; }

/* 年份长尾页 */
.wx-year-hero { text-align: center; padding: 10px 0 4px; }
.wx-year-hero .yr { font-family: var(--font-serif); font-size: 2.4rem; color: var(--c-primary-deep); }
.wx-year-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 14px 0; }
.wx-year-fact { text-align: center; padding: 12px 8px; border: 1px solid var(--c-line); border-radius: 10px; background: #fff; }
.wx-year-fact small { display: block; font-size: 12px; color: var(--c-ink-3); }
.wx-year-fact b { font-family: var(--font-serif); font-size: 1.3rem; }
.wx-year-nav { display: flex; justify-content: space-between; gap: 10px; margin: 16px 0; }

@media (max-width: 640px) {
  .wx-wheel-wrap { justify-content: center; }
  .wx-tools { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] .wx-wheel-card, :root[data-theme="dark"] .wx-app, :root[data-theme="dark"] .wx-tool, :root[data-theme="dark"] .wx-nayin { background: #1c2226; }
  :root[data-theme="dark"] .wx-relinfo { background: rgba(255, 255, 255, .05); }
}