:root {
  --page: #f9f9f6;
  --bg: #ffffff;
  --paper: #ffffff;
  --bg-2: var(--pale-cool);
  --pale-cool: #f1f1f3;
  --pale-mist: #f6f6f6;
  --pale-cream: #f6f0e4;
  --pale-ivory: #faf7f0;
  --pale-paper: #f8f9f4;
  --ink: #100f0f;
  --fog: rgba(16, 15, 15, 0.6);
  --mute: #747474;
  --line: #ebe9e1;
  --line-strong: #ddd9ce;
  --blue: #100f0f;
  --blue-hover: #2a2a2f;
  --blue-soft: rgba(16, 15, 15, 0.06);
  --wang: #0017c7;
  --ring: #0017c7;
  --red: #ef3737;
  --radius: 0.5rem;
  --radius-sm: 0.35rem;
  --radius-input: 4px;
  --radius-pill: 999px;
  --shadow: rgba(16, 15, 15, 0.04) 0 1px 2px;
  --font-latin: "Noto Sans SC", "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
  --font-display: "Noto Serif SC", "Source Han Serif SC", ui-serif, Georgia, serif;
  --font-body: "Noto Sans SC", "SF Pro Text", system-ui, sans-serif;
  --font-brand: "Noto Serif SC", "ZCOOL XiaoWei", ui-serif, Georgia, serif;
  --font-mono: "Noto Sans SC", "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ctrl-h: 2.2rem;
  --ctrl-gap: 0.65rem;
  --ctrl-action-gap: 0.85rem;
  --zw-blue-1: #88a5ff;
  --zw-blue-2: #00ccfa;
  --zw-blue-3: #27d271;
  --zw-blue-4: #ff8042;
  --zw-blue-5: #ffd862;
  --zw-blue-6: #f97cde;
  --zw-blue-7: #88a5ff;
  --zw-blue-8: #00ccfa;
  --lg-sha: #ff8042;
  --lg-sheng: #27d271;
  --lg-wang: #00ccfa;
  --lg-nu: #88a5ff;
  --lg-xie: #ffd862;
  --lg-sit: #100f0f;
  --selection-magic: #ff8042;
  --magic-orange: #ff8042;
  --magic-yellow: #ffd862;
  --magic-green: #27d271;
  --magic-blue: #00ccfa;
  --magic-purple: #88a5ff;
  --zwr-c: var(--magic-purple);
  --zwr-t1: color-mix(in srgb, var(--magic-purple) 62%, #2336c4);
  --zwr-t2: var(--magic-purple);
  --zwr-t3: color-mix(in srgb, var(--magic-purple) 72%, #fff);
  --zwr-t4: color-mix(in srgb, var(--magic-purple) 52%, #fff);
  --zwr-t5: color-mix(in srgb, var(--magic-purple) 36%, #fff);
  --zwr-t6: color-mix(in srgb, var(--magic-purple) 22%, #fff);
  --zwr-grid: color-mix(in srgb, var(--line) 70%, transparent);
  --zwr-deep: color-mix(in srgb, var(--zwr-t1) 72%, var(--ink));
  --magic-pink: #f97cde;
}

html:not(.is-real-pc) .pc-only {
  display: none !important;
}

.zw-chart-dock {
  position: fixed;
  left: 0;
  top: 5.4rem;
  z-index: 45;
  width: 300px;
  max-height: calc(100vh - 6.6rem);
  margin: 0;
  padding: 0.45rem 0.55rem 0.7rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: none;
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: 0 10px 28px rgba(16, 15, 15, 0.08);
}

.zw-chart-dock[hidden] {
  display: none;
}

.zw-chart-dock-close {
  pointer-events: auto;
  top: 0.4rem;
  right: 0.45rem;
  z-index: 6;
}

.zw-chart-dock-frame {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.zw-chart-dock-inner {
  width: 100%;
}

.zw-chart-dock .zw-plate,
.zw-chart-dock .zw-periods {
  max-width: none;
}

.zw-chart-dock .zwlib-tags {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: start;
  column-gap: 0.35rem;
  row-gap: 0.7rem;
  margin: 0 1.8rem 0.5rem 0;
}

.zw-chart-dock .zwlib-tag-break {
  display: none;
}

.zw-chart-dock .zwlib-tag[data-field="group"] {
  grid-column: 1;
}

.zw-chart-dock .zw-board {
  padding: 0.85rem;
}

.zw-chart-dock .zw-cell {
  height: 10.5rem;
  font-size: 0.68rem;
  padding: 0.2rem 0.16rem 0.16rem;
  cursor: pointer;
}

.zw-chart-dock .zw-foot {
  margin-top: auto;
}

.zw-chart-dock .zw-limit {
  min-height: 2.5rem;
}

.zw-chart-dock .zw-limit-end {
  display: block;
}

.zw-chart-dock .zw-core span,
.zw-chart-dock .zw-limit,
.zw-chart-dock .zw-gz {
  font-size: 0.62rem;
}

.zw-chart-dock .zw-core-name {
  font-size: 0.68rem !important;
}

.zw-chart-dock .zw-tab,
.zw-chart-dock .zw-period-name {
  font-size: 0.62rem;
}

.zw-chart-dock .zwlib-tag {
  cursor: pointer;
}

.zw-chart-dock .zw-tab {
  cursor: pointer;
}

#panel-xk,
#panel-lg,
#panel-bz,
#panel-fx,
#panel-tx,
#panel-xl {
  --wang: var(--magic-purple);
  --red: var(--magic-pink);
}

#panel-bz {
  --wang: var(--ink);
  --red: var(--magic-pink);
}

#panel-fx {
  --red: var(--magic-green);
}

#panel-zw,
#panel-zw-learn,
#panel-zw-research {
  --bg-2: var(--pale-mist);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

::selection,
input::selection,
textarea::selection {
  background: var(--selection-magic);
  color: #100f0f;
}

::-moz-selection,
input::-moz-selection,
textarea::-moz-selection {
  background: var(--selection-magic);
  color: #100f0f;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--page);
  line-height: 1.55;
  overflow-x: hidden;
}

body::before,
body::after {
  display: none;
}

a {
  color: var(--fog);
  text-decoration: none;
}

/* ---------- shell ---------- */

.shell {
  width: min(1080px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 0 0 2rem;
}

.brand {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.82rem;
  width: 100%;
  margin-bottom: 1.15rem;
  padding: 2.05rem 0 0.7rem;
  background: var(--page);
  transition: padding 150ms ease-out;
}

.brand::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--page);
  z-index: -1;
  pointer-events: none;
  transition: box-shadow 150ms ease-out;
}

.brand.is-stuck {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.brand.is-stuck::before {
  box-shadow: inset 0 -0.5px 0 var(--line);
}

@media (prefers-reduced-motion: reduce) {
  .brand,
  .brand::before,
  .brand-mark {
    transition: none;
  }
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.76rem, 4.4vw, 2.5rem);
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1.1;
  text-decoration: none;
  transition: font-size 150ms ease-out;
}

a.brand-mark:hover,
a.brand-mark:focus-visible {
  color: var(--ink);
}

/* 手机多半连不上 Google Fonts：「象数·宗」用站内的 Noto Serif SC 400 子集，电脑手机字一样 */
@font-face {
  font-family: "Brand Name";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/brand-name.woff2?v=1") format("woff2");
  unicode-range: U+00B7, U+5B97, U+6570, U+8C61;
}

.brand-name {
  font-family: "Brand Name", var(--font-brand);
  font-size: 0.88em;
  letter-spacing: 0.01em;
  line-height: 1;
  display: flex;
  align-items: center;
}

.brand-mark .weiji {
  width: 0.62em;
  height: calc(0.62em * 34 / 28);
  flex-shrink: 0;
  fill: currentColor;
  display: block;
  align-self: center;
  transform: translateY(1px);
}

.brand.is-stuck .brand-mark {
  font-size: 1.28rem;
}

.brand p {
  margin: 0;
  color: var(--fog);
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-align: right;
  flex-shrink: 0;
  letter-spacing: 0.04em;
  line-height: 1;
  transform: translateY(calc(-0.12em + 1px));
}

.brand.is-stuck p {
  transform: none;
}

/* ---------- nav ---------- */

.nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0.95rem;
}

.nav-level {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.45rem;
}

/* 展开第二层时，第一层底部分隔线收起，只留第二层底线 */
.nav:has([data-group="house"].is-active) > .nav-level:not(.nav-sub),
.nav:has([data-group="zw"].is-active) > .nav-level:not(.nav-sub) {
  border-bottom: none;
  padding-bottom: 0;
}

.nav-sub[hidden] {
  display: none;
}

.nav-level:not(.nav-sub) .nav-tab {
  font-weight: 500;
}

.nav-sub {
  margin-top: -0.16rem;
  padding-bottom: 0.2rem;
}

.nav-sub .nav-tab {
  font-size: 0.95rem;
}

.nav-sub .nav-tab::after {
  bottom: -0.2rem;
}

.nav-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fog);
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0.38rem 0.85rem;
  cursor: pointer;
  position: relative;
  border-radius: var(--radius-pill);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.nav-tab::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: -0.45rem;
  height: 1.5px;
  background: var(--ink);
  transform: scaleX(0);
  transition: transform 0.3s var(--ease);
}

.nav-tab:hover {
  color: var(--ink);
}

.nav-tab.is-active {
  color: var(--ink);
}

.nav-tab.is-active::after {
  transform: scaleX(1);
}

/* 已有第二层下划线时，第一层不再重复一条 */
.nav-level:not(.nav-sub) .nav-tab[data-group="house"].is-active::after,
.nav-level:not(.nav-sub) .nav-tab[data-group="zw"].is-active::after {
  transform: scaleX(0);
}

/* ---------- panels ---------- */

.panel {
  display: none;
}

.panel.is-active {
  display: block;
}

.panel-intro,
.xk-sx-hint {
  font-family: var(--font-brand);
  --letter-travel: 0.1em;
}

.panel-intro {
  margin: 0 0 1.25rem;
  color: var(--fog);
  font-size: 0.82rem;
}

.panel-intro code {
  font-family: inherit;
}

/* 报错提醒：整块红底白字（用固定红，不用各页会被改色的 --red） */
.module-alert {
  position: relative;
  margin: -0.5rem 0 1.25rem;
  padding: 0.6rem 2.4rem 0.6rem 0.85rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: #ef3737;
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.55;
  word-break: break-all;
}

.module-alert p {
  margin: 0;
}

.module-alert p + p {
  margin-top: 0.3rem;
}

.module-alert .module-alert-close,
.module-alert .module-alert-close:hover,
.module-alert .module-alert-close:focus-visible {
  top: 0.35rem;
  right: 0.4rem;
  color: #fff;
  background: transparent;
  outline: none;
}

.panel-intro .intro-word,
.xk-sx-hint .intro-word {
  white-space: nowrap;
}

.panel-intro .intro-letter,
.xk-sx-hint .intro-letter {
  display: inline-block;
  color: var(--fog);
}

.panel-intro.is-play .intro-letter,
.xk-sx-hint.is-play .intro-letter {
  animation: intro-letter 0.72s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: calc(90ms + (var(--i) * 14ms));
}

.panel-intro.is-play .intro-letter[data-magic],
.xk-sx-hint.is-play .intro-letter[data-magic] {
  animation-name: intro-letter-magic;
}

@keyframes intro-letter {
  0% {
    opacity: 0;
    transform: translateY(calc(var(--letter-travel, 0.1em) * -1));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes intro-letter-magic {
  0% {
    opacity: 0;
    transform: translateY(calc(var(--letter-travel, 0.1em) * -1));
    color: var(--letter-magic);
  }
  58% {
    opacity: 1;
    color: var(--letter-magic);
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    color: var(--fog);
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel-intro .intro-letter,
  .xk-sx-hint .intro-letter {
    opacity: 1;
    animation: none;
  }
}

.tool-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 1.5rem;
  align-items: start;
}

.xk-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.bz-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.bz-ref .lg-legend-item {
  grid-template-columns: 2.6em 1.4em 1fr;
}

.bz-ref .lg-legend-item i {
  font-style: normal;
  color: var(--mute);
}

.bz-ref .lg-legend-item.is-ji b {
  color: var(--wang);
}

.bz-ref .lg-legend-item.is-xiong b {
  color: var(--red);
}

.xk-luopan {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  text-align: center;
}

.xk-luopan-wheel {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0 auto;
}

.xk-lp-band,
.lg-lp-band {
  stroke: none;
  transition: fill 1s linear;
}

.xk-lp-band.is-page,
.lg-lp-band.is-page {
  fill: var(--page);
}

@media (prefers-reduced-motion: reduce) {
  .xk-lp-band,
  .lg-lp-band,
  .xk-lp-yy {
    transition: none;
  }
}

.xk-lp-spoke {
  stroke: var(--ink);
  stroke-width: 1.1;
}

.xk-lp-spoke.is-gua {
  stroke: var(--page);
  stroke-width: 3.4;
}

.xk-lp-mt,
.xk-lp-gua,
.xk-lp-num,
.xk-lp-yuan {
  font-family: var(--font-body);
  fill: var(--ink);
  font-weight: 500;
}

.xk-lp-mt {
  font-size: 20px;
}

.xk-lp-gua,
.xk-lp-num {
  font-size: 21px;
}

.xk-lp-yuan {
  font-size: 19px;
  fill: var(--mute);
}

.xk-lp-yy {
  stroke: none;
  transition: opacity var(--lp-dur, 1s) ease;
}

.xk-lp-yy.is-yin {
  fill: var(--magic-purple);
}

.xk-lp-yy.is-yang {
  fill: var(--magic-pink);
}

.xk-lp-yy circle {
  fill: inherit;
  stroke: none;
}

@media (max-width: 760px) {
  .tool-layout {
    grid-template-columns: 1fr;
  }

  .bz-side {
    display: contents;
  }

  .bz-ref {
    order: 1;
  }

  .xk-luopan-wheel {
    width: 78%;
    max-width: 280px;
  }
}

.form-block {
  padding: 1.05rem 1.15rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.form-block label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: var(--fog);
  margin: 1.2rem 0 0.35rem;
}

.form-block > label:first-child,
.form-block > .row-2:first-child label,
.form-block > .row-3:first-child label {
  margin-top: 0;
}

.form-block select,
.form-block input[type="number"],
.form-block input[type="text"],
.form-block textarea {
  width: 100%;
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-input);
  transition: border-color 0.2s;
}

.form-block select,
.form-block input[type="number"],
.form-block input[type="text"] {
  box-sizing: border-box;
  height: var(--ctrl-h);
}

.form-block select.is-ph {
  color: var(--mute);
}

.form-block select.is-ph option {
  color: var(--ink);
}

.form-block select:focus,
.form-block input[type="number"]:focus,
.form-block input[type="text"]:focus,
.form-block textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.form-block textarea {
  display: block;
  resize: vertical;
  line-height: 1.45;
  min-height: 5rem;
}

.form-block input[type="number"]::placeholder,
.form-block input[type="text"]::placeholder,
.form-block textarea::placeholder {
  color: var(--mute);
  font-size: 0.9rem;
}

.row-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.75rem;
}

.row-3 select {
  font-size: 0.8rem;
  padding: 0.3rem 1.5rem 0.3rem 0.45rem;
  background-position: right 0.45rem center;
}

@media (max-width: 520px) {
  .row-3 {
    grid-template-columns: 1fr;
  }

  .row-3 select {
    font-size: 0.95rem;
    padding: 0.35rem 1.75rem 0.35rem 0.65rem;
    background-position: right 0.7rem center;
  }
}

.btn {
  margin-top: var(--ctrl-action-gap);
  width: 100%;
  appearance: none;
  border: 0;
  background: var(--blue);
  color: var(--page);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn:hover {
  background: var(--blue-hover);
  border-color: var(--blue-hover);
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled,
.btn:disabled:hover {
  background: #d4d4d4;
  border-color: #d4d4d4;
  color: #fff;
  cursor: not-allowed;
  transform: none;
}

.error,
#zwlearn-verdict-msg,
#zwlib-msg,
#bazilib-msg {
  font-family: var(--font-brand);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.error {
  margin: 0.75rem 0 0;
  min-height: 1.2em;
  color: var(--fog);
}

.error:empty {
  display: none;
  margin: 0;
  min-height: 0;
}

.error.is-ok {
  color: var(--blue);
}

.form-compact {
  --ctrl-h: 2.2rem;
}

.form-compact select,
.form-compact input[type="text"],
.form-compact input[type="number"] {
  box-sizing: border-box;
  height: var(--ctrl-h);
}

.form-compact > select,
.form-compact > input,
.form-compact > textarea,
.form-compact > .row-2,
.form-compact > .row-3,
.form-compact > .zw-name-row,
.form-compact > .xk-name-keep,
.form-compact > .jiazi-pick,
.form-compact > .jifa-ms,
.form-compact > .zwlearn-lead + .zwresearch-topics {
  margin-top: var(--ctrl-gap);
}

.form-compact > .zwlearn-lead {
  margin-top: 1rem;
}

.form-compact > .zwlearn-lead:first-child {
  margin-top: 0;
}

.form-compact > :first-child {
  margin-top: 0;
}

.form-compact > .zw-form-head {
  margin-top: 0;
}

.form-compact > .zw-form-head + * {
  margin-top: var(--ctrl-gap);
}

.form-compact > .check {
  margin-top: var(--ctrl-gap);
}

.form-compact > .btn,
.form-compact > .note-actions {
  margin-top: var(--ctrl-action-gap);
}

.form-compact .jiazi-trigger {
  box-sizing: border-box;
  height: var(--ctrl-h);
  padding: 0 1.75rem 0 0.65rem;
}

.form-compact .zw-cal,
.form-compact .zwlib-modal-cal {
  height: var(--ctrl-h);
}

.form-compact .zw-cal label,
.form-compact .zwlib-modal-cal label {
  height: 100%;
  margin: 0;
}

.form-compact .zw-cal span,
.form-compact .zwlib-modal-cal span {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 0.7rem;
}

.zw-name-row {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
  gap: 0.65rem;
}

.zw-name-row > input {
  flex: 1;
  min-width: 0;
}

#xk-form > #xk-note,
.form-compact > .fs-save,
#zw-note.form-compact > select,
#zw-note.form-compact > textarea,
#zw-note.form-compact > .zw-jifa,
#zw-note.form-compact > #zw-jifa-add,
#zw-note.form-compact > .zw-jifa-list {
  margin-top: var(--ctrl-gap);
}

#zw-note.form-compact > select:first-child {
  margin-top: 0;
}

#xk-form > #xk-note {
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.zw-jifa-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.75rem;
}

#zw-note .zw-jifa-pick select,
.zw-jifa-pick select {
  flex: 1 1 7rem;
}

#zw-note .zw-jifa-pick select[hidden],
.zw-jifa-pick select[hidden] {
  display: none;
}

#zw-jifa-err {
  margin: 0.3rem 0 0;
}

#zw-jifa-err:empty {
  display: none;
}

.zw-jifa-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.zw-jifa-list[hidden] {
  display: none;
}

.zw-jifa-row {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 0.35rem 0.25rem 0.35rem 0.55rem;
  font-size: 0.88rem;
  line-height: 1.55;
}

.zw-jifa-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.2rem 0.45rem;
}

.zw-jifa-text {
  flex: 1 1 6rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.zw-jifa-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--zw-blue-1) 18%, transparent);
  color: var(--ink);
  font-size: 0.78rem;
  line-height: 1.7;
  white-space: nowrap;
}

.zw-jifa-chip.is-doubt {
  background: color-mix(in srgb, var(--magic-orange) 18%, transparent);
}

.zw-jifa-view {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.zw-jifa-view li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.zw-jifa-view li.is-sub {
  padding-left: 1.25rem;
}

.zw-jifa-modal {
  margin-bottom: 0.5rem;
}

#zwlearn-jifa-insert {
  width: 100%;
  margin-bottom: 0.5rem;
}

.zw-probe-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  padding: 0.35rem 0.55rem 0.45rem;
}

#zw-note .zw-probe-row select,
#zw-note .zw-probe-row textarea,
#zw-note .zw-probe-row input,
.zw-probe-row select,
.zw-probe-row textarea,
.zw-probe-row input {
  width: 100%;
  min-width: 0;
  border: 0;
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
}

#zw-note .zw-probe-row select,
.zw-probe-row select {
  flex: 1 1 auto;
  width: auto;
  padding: 0.15rem 1.5rem 0.15rem 0;
  background-color: transparent;
}

#zw-note .zw-probe-row textarea,
.zw-probe-row textarea {
  min-height: 1.7rem;
  padding: 0.1rem 0 0.2rem;
  resize: none;
}

#zw-note .zw-probe-row select:focus,
#zw-note .zw-probe-row textarea:focus,
.zw-probe-row select:focus,
.zw-probe-row textarea:focus,
.zw-probe-row input:focus {
  outline: none;
  border-color: transparent;
}

.zw-probe-del {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fog);
  width: 1.6rem;
  height: 1.6rem;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}

.zw-probe-del:hover {
  color: var(--red);
}

#zw-jifa-add {
  width: 100%;
  margin-top: 0.45rem;
}

#zw-note.form-compact > .note-actions {
  margin-top: var(--ctrl-action-gap);
}

/* ---------- results ---------- */

.result {
  padding: 1.25rem 1.35rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-height: 280px;
}

.result[hidden] {
  display: none;
}

#bz-result,
#tx-result,
#xk-result,
#lg-result,
#bazi-result {
  position: relative;
}

#lg-result {
  padding: 0.4rem 0.45rem 0.45rem;
}

.copy-md {
  position: absolute;
  top: 0.7rem;
  right: 0.85rem;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fog);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.15rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  line-height: 0;
}

.copy-md-icon {
  display: block;
  width: 1.28rem;
  height: 1.28rem;
  background-color: currentColor;
  -webkit-mask: var(--copy-md-mask) center / contain no-repeat;
  mask: var(--copy-md-mask) center / contain no-repeat;
}

.icon-copy {
  --copy-md-mask: url("../img/icon-copy.png?v=lg83");
}

.icon-save {
  --copy-md-mask: url("../img/icon-save.png?v=lg83");
}

.icon-case {
  --copy-md-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8.9H22L14.7 4.1M22 14.8H2L9.6 19.9'/%3E%3C/svg%3E");
}

.copy-md-done {
  display: none;
  line-height: 1.28rem;
  white-space: nowrap;
}

.copy-md:hover,
.copy-md.is-done {
  color: var(--blue-hover);
}

.copy-md.is-done .copy-md-icon {
  display: none;
}

.copy-md.is-done .copy-md-done {
  display: inline;
}

#bz-result .meta,
#tx-result .meta,
#xk-result .meta {
  padding-right: 3.2rem;
}

.meta {
  margin-bottom: 1.1rem;
}

.meta p {
  margin: 0.2rem 0;
}

.meta em {
  font-style: normal;
  color: var(--ink);
}

.meta .hint {
  color: var(--fog);
  font-size: 0.85rem;
  margin-top: 0.45rem;
}

/* ---------- 九宫 ---------- */

.luoshu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1;
}

.luoshu-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  background: var(--pale-mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
  padding: 1.05rem 0.85rem;
  animation: cell-in 0.45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 0.04s);
}

.luoshu-cell:nth-child(5) {
  background: #fff;
  border-color: var(--line-strong);
}

.cell-tag {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--fog);
  min-height: 1em;
}

.cell-tag.is-anchor {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.82rem;
}

.cell-tag.is-pole {
  color: var(--blue);
}

.cell-stars {
  font-family: var(--font-mono);
  font-size: clamp(1.15rem, 3.5vw, 1.45rem);
  color: var(--ink);
  letter-spacing: 0.05em;
}

.cell-stars b {
  font-weight: 500;
}

.cell-stars b.is-wang {
  color: var(--wang);
  font-weight: 600;
}

.cell-stars b.is-tui {
  color: var(--red);
  font-weight: 600;
}

.cell-stars i {
  font-style: normal;
  color: var(--mute);
  margin: 0 0.15em;
  font-weight: 300;
}

.cell-yun {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: 0.15em;
}

.form-block select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background-color: var(--bg-2);
}

.cell-year,
.cell-month {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.1;
}

.cell-year.is-erwu,
.cell-month.is-erwu {
  color: var(--red);
  font-weight: 600;
}

.cell-palace {
  position: absolute;
  font-size: 0.7rem;
  color: var(--mute);
  letter-spacing: 0.05em;
  line-height: 1;
  pointer-events: none;
}

.cell-palace.pos-tl {
  top: 0.35rem;
  left: 0.4rem;
}

.cell-palace.pos-tc {
  top: 0.35rem;
  left: 50%;
  transform: translateX(-50%);
}

.cell-palace.pos-tr {
  top: 0.35rem;
  right: 0.4rem;
}

.cell-palace.pos-ml {
  top: 50%;
  left: 0.4rem;
  transform: translateY(-50%);
}

.cell-palace.pos-mr {
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
}

.cell-palace.pos-bl {
  bottom: 0.35rem;
  left: 0.4rem;
}

.cell-palace.pos-bc {
  bottom: 0.35rem;
  left: 50%;
  transform: translateX(-50%);
}

.cell-palace.pos-br {
  bottom: 0.35rem;
  right: 0.4rem;
}

.luoshu-wrap {
  max-width: 420px;
  margin: 0 auto;
}

/* ---------- 双星断事 ---------- */

.xk-detail {
  margin-top: 1.5rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}

.xk-detail[hidden] {
  display: none;
}

.xk-detail-tabs {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 0.85rem;
}

.xk-detail-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0 0 0.28rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--fog);
  cursor: pointer;
}

.xk-detail-tab:hover {
  color: var(--ink);
}

.xk-detail-tab.is-on {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--blue);
}

.xk-shuangxing {
  margin-top: 0;
  padding-top: 0;
}

.xk-shuangxing[hidden] {
  display: none;
}

.xk-sx-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.xk-sx-card[hidden] {
  display: none;
}

#xk-grid .luoshu-cell {
  width: 100%;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  appearance: none;
}

#xk-grid .luoshu-cell:hover,
#xk-grid .luoshu-cell:focus-visible {
  border-color: var(--blue);
  outline: none;
}

#xk-grid .luoshu-cell.is-picked,
#xk-grid .luoshu-cell:nth-child(5).is-picked {
  background: var(--blue-soft);
  border-color: var(--blue);
}

.xk-sx-hint {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  color: var(--fog);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.xk-xl-lead {
  margin: 0 0 0.85rem;
  color: var(--ink);
  font-size: 0.95rem;
}

.xk-xl-lead em {
  font-style: normal;
  font-weight: 600;
  margin: 0 0.15em;
}

.xk-xl-lead em.is-wang {
  color: var(--wang);
}

.xk-xl-lead em.is-tui {
  color: var(--red);
}

.xk-xl-card {
  margin: 0 0 0.75rem;
  padding: 0.85rem 0.95rem 0.95rem;
  border: 1px solid var(--line);
  background: var(--bg);
}

.xk-xl-card .xk-sx-head {
  margin-bottom: 0.45rem;
}

.xk-xl-meta {
  margin: 0 0 0.7rem;
  color: var(--fog);
  font-size: 0.82rem;
}

.xk-xl-field {
  margin: 0 0 0.75rem;
}

.xk-xl-field h4,
.xk-xl-card > h4 {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--fog);
}

.xk-xl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.xk-xl-chips span {
  padding: 0.18rem 0.48rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--line) 40%, #fff);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink);
}

#xk-xingluan .xl-def {
  background: #fff;
}

.xk-xl-note {
  margin: 0.15rem 0 0.85rem;
  padding: 0.75rem 0.8rem 0.35rem;
  background: var(--pale-mist);
}

.xk-xl-note > p {
  margin: 0 0 0.55rem;
  line-height: 1.6;
}

.xk-xl-note .xk-xl-field h4 {
  color: var(--mute);
}

.xk-xl-card p {
  margin: 0 0 0.55rem;
  line-height: 1.7;
}

.xk-sx-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: min(70vh, 640px);
  overflow-y: auto;
  padding-right: 0.15rem;
}

@media (max-width: 760px) {
  .xk-sx-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .xk-sx-card.is-long {
    overflow-y: auto;
  }
}

.xk-sx-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem 0.85rem;
}

.xk-sx-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.55rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
}

.xk-sx-palace {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  font-weight: 600;
}

.xk-sx-pair {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--ink);
}

.xk-sx-pair i {
  font-style: normal;
  color: var(--mute);
  margin: 0 0.12em;
}

.xk-sx-pair b.is-wang {
  color: var(--wang);
}

.xk-sx-pair b.is-tui {
  color: var(--red);
}

.xk-sx-pair em {
  margin-left: 0.45rem;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--fog);
  letter-spacing: 0.08em;
}

.xk-sx-body {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--ink);
}

.xk-sx-body p {
  margin: 0 0 0.45rem;
}

.xk-sx-body p:last-child {
  margin-bottom: 0;
}

.xk-sx-body .xk-sx-quote {
  color: var(--fog);
  padding-left: 0.55rem;
  border-left: 2px solid var(--line-strong);
}

.xk-sx-body del,
.zwresearch-fb del,
.zwresearch-probe del {
  color: var(--fog);
  text-decoration: line-through;
}

.xk-sx-empty {
  color: var(--mute);
}

/* ---------- 辅星 / 地母 ---------- */

.fx-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.fx-module {
  position: relative;
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  gap: 0 1.5rem;
  align-items: start;
  padding: 1.25rem 1.35rem 1.5rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.fx-module-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink);
}

.fx-module .form-block {
  max-width: none;
  padding: 0;
  border: 0;
  background: transparent;
}

.fx-module .result {
  align-self: center;
  margin-top: 0;
  padding: 0 0 0 1.35rem;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  min-height: 0;
  background: transparent;
  box-shadow: none;
}

.fx-module .copy-md {
  top: 0.7rem;
  right: 0.85rem;
}

.fx-lead em {
  font-style: normal;
  color: var(--ink);
}

@media (max-width: 640px) {
  .fx-module {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .fx-module .result {
    margin-top: 1.35rem;
    padding: 1.15rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

#fx-diagram {
  --red: var(--magic-blue);
}

.fx-diagram {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1.5rem;
  width: 100%;
}

.fx-seq {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  justify-self: start;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  line-height: 1.15;
}

.fx-seq li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
}

.fx-seq-arrow {
  color: var(--fog);
  font-size: 0.64rem;
  letter-spacing: 0;
  line-height: 1;
}

.fx-board-svg {
  width: min(100%, 400px);
  height: auto;
  display: block;
  margin: 0 auto;
  font-family: var(--font-display);
  animation: rise 0.5s var(--ease) both;
}

.fx-board-svg .fx-svg-star {
  font-size: 29px;
  fill: var(--ink);
}

.fx-board-svg .fx-svg-star.is-hollow {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.78px;
}

.fx-board-svg .fx-svg-gua {
  font-size: 25px;
  fill: var(--fog);
}

.fx-board-svg .fx-svg-gua.is-yang {
  fill: var(--red);
}

.fx-board-svg .fx-svg-gua.is-face {
  fill: var(--ink);
}

.fx-board-svg .fx-svg-focus {
  fill: var(--ink);
}

.fx-board-svg .fx-svg-focus.is-yang {
  fill: var(--red);
}

.fx-board-svg .fx-svg-gua.is-focus {
  fill: #fff;
}

.fx-board-svg .fx-svg-najia {
  font-size: 12.5px;
  fill: var(--mute);
  font-family: var(--font-body);
}

.fx-board-svg .fx-svg-najia.is-yang {
  fill: var(--red);
}

/* ---------- 替星 ---------- */

.jiazi-pick {
  position: relative;
}

.form-block select.jiazi-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  pointer-events: none;
}

.jiazi-trigger {
  width: 100%;
  appearance: none;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  height: var(--ctrl-h);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6b6b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.7rem center;
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0 1.75rem 0 0.65rem;
  border-radius: var(--radius-input);
}

.jiazi-trigger:focus,
.jiazi-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--blue);
}

.jiazi-trigger.is-ph {
  color: var(--mute);
}

.jiazi-panel[hidden] {
  display: none;
}

.jiazi-panel {
  position: absolute;
  z-index: 30;
  left: 0;
  top: calc(100% + 0.35rem);
  width: max(100%, 22rem);
  display: grid;
  grid-template-rows: repeat(10, auto);
  grid-auto-flow: column;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.2rem;
  padding: 0.45rem;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.jiazi-opt {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.2;
  padding: 0.28rem 0.15rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.jiazi-opt:hover {
  background: var(--blue-soft);
}

.jiazi-opt.is-on {
  background: var(--blue);
  color: #fff;
}

.zw-sz {
  position: relative;
  margin-top: 0.85rem;
}

.zw-sz-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}

.zw-sz-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.zw-sz-title {
  font-family: var(--font-body);
  color: var(--ink);
  font-size: 0.85rem;
  line-height: 1.2;
}

.zw-sz-btn {
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--pale-cool);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s var(--ease);
}

.zw-sz-btn.is-ph {
  color: var(--mute);
}

.zw-sz-btn[aria-expanded="true"] {
  border-color: var(--blue);
}

.zw-sz-pop {
  position: absolute;
  z-index: 40;
  display: grid;
  gap: 0.15rem;
  padding: 0.4rem;
  background: color-mix(in srgb, var(--ink) 90%, transparent);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.zw-sz-pop[hidden] {
  display: none;
}

.zw-sz-pop.is-stem {
  grid-template-columns: repeat(5, 1.7rem);
}

.zw-sz-pop.is-branch {
  grid-template-columns: repeat(6, 1.7rem);
}

.zw-sz-pop::before {
  content: "";
  position: absolute;
  top: -6px;
  left: var(--zw-sz-arrow, 1rem);
  border: 6px solid transparent;
  border-top: 0;
  border-bottom-color: color-mix(in srgb, var(--ink) 90%, transparent);
}

.zw-sz-opt {
  appearance: none;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.zw-sz-opt:hover:not(:disabled) {
  background: var(--blue-hover);
}

.zw-sz-opt:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.zw-sz-results {
  margin-top: 0.65rem;
}

.zw-sz-results.zwlib-list {
  margin-top: 0.65rem;
}

.tx-answer {
  text-align: center;
  padding: 0.35rem 0 1rem;
  animation: rise 0.5s var(--ease) both;
}

.tx-answer .big {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.1rem);
  letter-spacing: 0.12em;
  color: var(--blue);
}

.tx-answer .big.palace {
  color: var(--fog);
}

.tx-answer .sep {
  margin: 0 0.65rem;
  color: var(--mute);
  font-size: 1rem;
}

.tx-luoshu {
  aspect-ratio: 1;
}

/* ---------- 八宅 ---------- */

.bz-luoshu {
  aspect-ratio: 1;
}

.bz-cell {
  gap: 0.2rem;
  padding: 0.7rem 0.45rem;
  justify-content: center;
}

.bz-star {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3.2vw, 1.3rem);
  letter-spacing: 0.12em;
  color: var(--ink);
  font-weight: 600;
}

.bz-luck {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--fog);
}

.bz-star.is-ji,
.bz-luck.is-ji {
  color: var(--blue);
}

.bz-star.is-ji-soft {
  color: var(--ink);
}

.bz-luck.is-ji-soft {
  color: var(--fog);
}

.bz-star.is-xiong,
.bz-luck.is-xiong {
  color: var(--red);
}

.bz-gua {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin-top: 0.2rem;
  color: var(--mute);
  line-height: 1;
}

.bz-gua-sym {
  font-size: 0.85rem;
  letter-spacing: 0;
}

.bz-gua-name {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.bz-center {
  gap: 0.25rem;
}

.bz-center-group {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.18em;
  color: var(--ink);
  font-weight: 600;
}

.tx-cell {
  gap: 0.35rem;
  padding: 0.85rem 0.4rem;
  justify-content: center;
}

.tx-cell.is-target {
  border-color: var(--magic-yellow);
  background: color-mix(in srgb, var(--magic-yellow) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--magic-yellow) 45%, transparent);
}

.tx-years {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 0.2rem 0.35rem;
  flex: 1;
  width: 100%;
}

.tx-year {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--fog);
  letter-spacing: 0.04em;
}

.tx-year.muted {
  color: rgba(0, 0, 0, 0.18);
}

.tx-year.is-hit {
  color: var(--blue);
  font-size: 1.05rem;
}

.tx-year.is-start {
  color: var(--magic-yellow);
}

/* ---------- 择吉 ---------- */

#panel-zj {
  --zj-ok: color-mix(in srgb, var(--magic-orange) 8%, #fff);
  --zj-ok-line: color-mix(in srgb, var(--magic-orange) 45%, #fff);
}

/* 还没点「择吉」（renderZeji 按 zjRan 切 .is-idle）：整页不出橙色，浅橙底换浅灰、橙字换回正文色 */
#panel-zj.is-idle {
  --zj-ok: color-mix(in srgb, var(--ink) 5%, #fff);
  --zj-ok-line: var(--line);
}

#panel-zj.is-idle .zj-day.is-ok .zj-d {
  color: var(--ink);
}

#panel-zj.is-idle .zj-hour.is-sel {
  border-color: var(--mute);
  background: var(--mute);
}

#panel-zj.is-idle .zj-dot.is-ok {
  background: var(--mute);
}

.zj-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.45rem;
  margin: var(--ctrl-gap) 0 0;
  font-size: 0.78rem;
  color: var(--fog);
}

.zj-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
}

.zj-legend .zj-dot:not(:first-child) {
  margin-left: 0.5rem;
}

.zj-dot.is-ok {
  background: var(--magic-orange);
}

.zj-dot.is-bad {
  background: var(--line-strong);
}

.zj-cal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.zj-cal-mid {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.zj-today {
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--zj-ok-line);
  border-radius: var(--radius-pill);
  background: var(--zj-ok);
  color: var(--ink);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.zj-today:disabled,
.zw-tab:disabled {
  border-color: var(--line);
  background: var(--pale-mist);
  color: var(--mute);
  cursor: default;
}

.zj-advice {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.zj-advice-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
}

.zj-advice-hd span {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--fog);
}

.zj-advice-ask,
.zj-advice-empty {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--fog);
}

.zj-advice-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zj-advice-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.1rem 0.6rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--zj-ok-line);
  border-radius: var(--radius-sm);
  background: var(--zj-ok);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.zj-advice-item.is-sel {
  border-color: var(--magic-orange);
  background: var(--magic-orange);
  color: #fff;
}

.zj-advice-item.is-sel .zj-advice-gz,
.zj-advice-item.is-sel .zj-advice-hours {
  color: #fff;
}

.zj-advice-item b {
  font-size: 0.88rem;
  font-weight: 500;
}

.zj-advice-gz {
  justify-self: end;
  font-size: 0.75rem;
  color: var(--mute);
}

.zj-advice-hours {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  color: var(--fog);
}

.zj-advice-hours i.is-warn {
  font-style: normal;
  opacity: 0.45;
}

.zj-advice-hours em {
  display: block;
  font-style: normal;
  font-size: 0.68rem;
  opacity: 0.8;
}

.zj-cal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.zj-nav {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.zj-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.zj-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.zj-wk {
  padding-bottom: 0.35rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--fog);
}

.zj-day {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  min-width: 0;
  padding: 0.45rem 0.15rem 0.35rem;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.zj-day.is-blank {
  cursor: default;
}

.zj-day:not(.is-blank):hover {
  background: var(--pale-mist);
}

.zj-day.is-bad {
  color: var(--mute);
}

.zj-day.is-ok .zj-d {
  color: var(--magic-orange);
}

.zj-day.is-sel,
.zj-day.is-sel:hover {
  background: none;
}

.zj-day.is-sel::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  border-radius: var(--radius-sm);
  background: var(--zj-ok);
}

.zj-hour {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  min-width: 0;
  padding: 0.4rem 0.15rem 0.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.zj-hour.is-ok {
  border-color: var(--zj-ok-line);
  background: var(--zj-ok);
}

.zj-hour.is-bad {
  background: var(--pale-mist);
  color: var(--mute);
}

.zj-hour.is-ok.is-warn:not(.is-sel) {
  background: transparent;
}

.zj-hour.is-sel {
  border-color: var(--magic-orange);
  background: var(--magic-orange);
  color: #fff;
}

.zj-hour.is-bad.is-sel {
  border-color: var(--mute);
  background: var(--mute);
}

.zj-hour.is-sel span,
.zj-hour.is-sel em,
.zj-hour.is-sel .zj-hour-star,
.zj-hour.is-sel .zj-hour-star.is-erwu {
  color: #fff;
}

.zj-d {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.15;
}

.zj-sub,
.zj-gz,
.zj-why {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  line-height: 1.35;
}

.zj-sub {
  color: var(--fog);
}

.zj-sub.is-term {
  color: var(--ink);
  font-weight: 500;
}

.zj-gz {
  color: var(--mute);
}

.zj-why {
  color: var(--fog);
  font-size: 0.62rem;
}

.zj-detail {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.zj-day-hd {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem 0.9rem;
  margin-bottom: 0.9rem;
}

.zj-big {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 400;
  line-height: 0.9;
}

.zj-day-meta p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--mute);
}

.zj-day-meta p:first-child {
  color: var(--ink);
}

.zj-verdict {
  max-width: 12rem;
  margin: 0 0 0 auto;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  line-height: 1.45;
}

.zj-verdict.is-ok {
  border-color: var(--zj-ok-line);
  background: var(--zj-ok);
}

.zj-verdict.is-bad {
  background: var(--pale-mist);
  color: var(--mute);
}

.zj-almanac {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  margin: 0 0 1.2rem;
  font-size: 0.85rem;
}

.zj-almanac div {
  display: flex;
  gap: 0.4rem;
}

.zj-almanac dt {
  color: var(--fog);
}

.zj-almanac dd {
  margin: 0;
}

.zj-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
}

.zj-h span {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--fog);
}

.zj-hours {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.2rem;
  margin-bottom: 1.3rem;
}

.zj-hours .zj-hour {
  padding: 0.3rem 0 0.25rem;
}

.zj-hour b {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 400;
  white-space: nowrap;
}

.zj-hour span {
  font-size: 0.6rem;
  color: var(--fog);
  white-space: nowrap;
}

.zj-hour .zj-hour-star {
  order: -1;
  font-size: 0.66rem;
  line-height: 1.2;
  color: var(--mute);
}

.zj-hour em {
  font-style: normal;
  font-size: 0.58rem;
  color: var(--fog);
  white-space: nowrap;
}

.zj-plates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}

.zj-plate {
  margin: 0;
}

.zj-plate figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
}

.zj-plate figcaption span {
  font-size: 0.75rem;
  color: var(--fog);
}

.zj-luoshu {
  max-width: none;
  gap: 0.35rem;
}

.zj-cell {
  padding: 0.4rem 0.3rem;
}

.zj-n {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
}

.zj-ym {
  display: flex;
  gap: 0.45rem;
  font-size: 0.72rem;
  line-height: 1;
  color: var(--mute);
}

.zj-ym i {
  font-style: normal;
}

.zj-mark {
  max-width: 100%;
  margin-top: 0.2rem;
  font-size: 0.68rem;
  line-height: 1.25;
  text-align: center;
  color: var(--magic-orange);
  overflow-wrap: anywhere;
}

.zj-n.is-erwu,
.zj-ym i.is-erwu,
.zj-hour .zj-hour-star.is-erwu {
  color: var(--red);
}

.zj-ym-note {
  margin: 0.6rem 0 0;
  font-size: 0.75rem;
  color: var(--fog);
}

.zj-qimen {
  margin: 1rem 0 0;
  font-size: 0.8rem;
  color: var(--fog);
}

@media (max-width: 760px) {
  .zj-d {
    font-size: 1rem;
  }

  .zj-why {
    font-size: 0.56rem;
  }

  .zj-hours {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .zj-verdict {
    max-width: none;
    width: 100%;
    margin-left: 0;
  }

  .zj-plates {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
  }
}

.footer {
  margin-top: 3rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--line);
  color: var(--mute);
  font-size: 0.82rem;
  text-align: left;
}

.site-sparks {
  position: relative;
  width: 100%;
  height: 120px;
  overflow: hidden;
  pointer-events: auto;
}

.site-spark-grid {
  position: absolute;
  inset: 0;
}

.site-spark-cell {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
}

.site-spark-cell.is-paper {
  background: color-mix(in srgb, #100f0f 10%, transparent);
}

.site-spark-cell.is-both.is-paper {
  background: color-mix(in srgb, #100f0f 16%, transparent);
  animation: site-hover-pulse 1.1s ease-in-out infinite;
}

.site-spark-cell[data-color="orange"] { background: #ff8042; }
.site-spark-cell[data-color="yellow"] { background: #ffd862; }
.site-spark-cell[data-color="green"] { background: #27d271; }
.site-spark-cell[data-color="blue"] { background: #00ccfa; }
.site-spark-cell[data-color="purple"] { background: #88a5ff; }
.site-spark-cell[data-color="pink"] { background: #f97cde; }

.site-spark {
  position: absolute;
  z-index: 1;
  width: 10px;
  height: 10px;
  pointer-events: none;
  opacity: 0;
  animation: site-spark-in 0.4s ease-out forwards;
}

.site-spark[data-color="orange"] { background: #ff8042; }
.site-spark[data-color="yellow"] { background: #ffd862; }
.site-spark[data-color="green"] { background: #27d271; }
.site-spark[data-color="blue"] { background: #00ccfa; }
.site-spark[data-color="purple"] { background: #88a5ff; }
.site-spark[data-color="pink"] { background: #f97cde; }

.site-spark[data-age="1"] {
  opacity: 0.55;
  animation: none;
}

.site-spark[data-age="2"] {
  opacity: 0.22;
  animation: none;
}

@keyframes site-spark-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes site-hover-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .site-spark {
    opacity: 1;
    animation: none;
  }
  .site-spark-cell {
    transition: none;
  }
}

/* ---------- motion ---------- */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cell-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 紫微斗数 ---------- */

.form-block label.check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.2rem;
  letter-spacing: 0.04em;
  line-height: 1.45;
}

.form-block label.check[hidden] {
  display: none;
  margin: 0;
}

.form-block label.check input {
  width: auto;
  margin: 0;
}

.zw-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

#xk-form > .xk-name-keep {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0;
}

#xk-form > .xk-name-keep > input {
  flex: 1;
  min-width: 0;
  width: auto;
}

#xk-form > .xk-name-keep > .zw-keep {
  flex: 0 0 auto;
}

#zw-name-row[hidden] {
  display: none;
}

.form-block .zw-keep {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.15rem;
  color: color-mix(in srgb, var(--ink) 62%, var(--pale-cool));
  cursor: pointer;
  user-select: none;
  line-height: 0;
}

.zw-keep input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.zw-keep-icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
  -webkit-mask: url("../img/icon-disk.png?v=lg84") center / contain no-repeat;
  mask: url("../img/icon-disk.png?v=lg84") center / contain no-repeat;
}

.zw-keep:has(input:checked) {
  color: var(--ink);
}

.zw-keep input:focus-visible + .zw-keep-icon {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

#zwlearn-layout,
#zwresearch-layout {
  grid-template-areas: "side result";
}

#zw-layout {
  grid-template-areas:
    "side result"
    "lib result";
  grid-template-rows: max-content 1fr;
}

#bazi-layout {
  grid-template-areas: "lib result";
}

.zw-left,
.zwlearn-left,
.zwresearch-left {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-self: start;
}

#zw-form {
  flex: 0 0 auto;
}

#xk-layout {
  grid-template-areas:
    "side result"
    "luopan result";
  grid-template-rows: max-content 1fr;
  align-content: start;
}

#xk-side {
  grid-area: side;
  align-self: start;
  width: 100%;
  max-width: none;
}

#xk-result {
  grid-area: result;
}

#lg-layout {
  grid-template-areas: "side result";
}

.lg-side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-self: start;
  width: 100%;
  max-width: none;
}

#lg-result {
  grid-area: result;
  min-width: 0;
  overflow: visible;
}

.lg-legend {
  margin: 0;
  padding: 0 1.15rem;
  background: none;
  border: none;
  box-shadow: none;
}

.lg-legend-title {
  margin: 0 0 0.65rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--ink);
}

.lg-legend-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.lg-legend-item {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  gap: 0.55rem;
  align-items: baseline;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--fog);
}

.lg-legend-item b {
  font-weight: 600;
  letter-spacing: 0.06em;
}

.lg-legend-item.is-sha b { color: var(--lg-sha); }
.lg-legend-item.is-sheng b { color: var(--lg-sheng); }
.lg-legend-item.is-wang b { color: var(--lg-wang); }
.lg-legend-item.is-nu b { color: var(--lg-nu); }
.lg-legend-item.is-xie b { color: var(--lg-xie); }

.lg-legend-title--wx {
  margin-top: 0.15rem;
}

.lg-legend-list--wx {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.85rem;
  margin-bottom: 0;
}

.lg-legend-item--wx.is-wide {
  grid-column: 1 / -1;
}

.lg-legend-item--wx b {
  color: var(--ink);
}

.lg-shot {
  background: none;
  overflow: visible;
}

.lg-wheel-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  overflow: visible;
}

.lg-wheel {
  width: min(100%, 640px);
  aspect-ratio: 1;
  height: auto;
  display: block;
  overflow: visible;
}

.lg-sands {
  display: flex;
  flex-direction: column;
  gap: var(--ctrl-gap);
  margin-top: var(--ctrl-gap);
}

.lg-sand-row {
  display: grid;
  grid-template-columns: minmax(0, 5.2em) 1fr auto;
  gap: 0.4rem;
  align-items: center;
}

.lg-sand-row select,
.lg-sand-row input {
  width: 100%;
  min-width: 0;
}

.lg-sand-del {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fog);
  width: 2rem;
  height: var(--ctrl-h);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0;
}

.lg-sand-del:hover {
  border-color: var(--ink);
  color: var(--ink);
}

#lg-sand-add {
  width: 100%;
}

.lg-note-line {
  fill: none;
  stroke-width: 1.2;
}

.lg-note-line.is-sha { stroke: var(--lg-sha); }
.lg-note-line.is-sheng { stroke: var(--lg-sheng); }
.lg-note-line.is-wang { stroke: var(--lg-wang); }
.lg-note-line.is-nu { stroke: var(--lg-nu); }
.lg-note-line.is-xie { stroke: var(--lg-xie); }
.lg-note-line.is-sit { stroke: var(--lg-sit); }

.lg-note-text {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
}

.lg-note-text.is-sha { fill: var(--lg-sha); }
.lg-note-text.is-sheng { fill: var(--lg-sheng); }
.lg-note-text.is-wang { fill: var(--lg-wang); }
.lg-note-text.is-nu { fill: var(--lg-nu); }
.lg-note-text.is-xie { fill: var(--lg-xie); }
.lg-note-text.is-sit { fill: var(--lg-sit); }

.lg-tick {
  fill: none;
  stroke-width: 4.6;
  stroke-linecap: round;
}

.lg-tick.is-compact {
  stroke-width: 3.1;
}

.lg-tick.is-sha { stroke: var(--lg-sha); }
.lg-tick.is-sheng { stroke: var(--lg-sheng); }
.lg-tick.is-wang { stroke: var(--lg-wang); }
.lg-tick.is-nu { stroke: var(--lg-nu); }
.lg-tick.is-xie { stroke: var(--lg-xie); }
.lg-tick.is-sit { stroke: var(--lg-sit); }

.lg-core-sit {
  font-family: var(--font-brand);
  font-size: 44px;
  font-weight: 500;
  fill: var(--ink);
}

.lg-core-sub {
  font-family: var(--font-body);
  font-size: 13px;
  fill: var(--mute);
  letter-spacing: 0.08em;
}

.lg-mt {
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 500;
  fill: var(--ink);
  pointer-events: none;
}

.lg-mt.is-sit {
  font-weight: 600;
}

.lg-sand {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  pointer-events: none;
}

.lg-sand.is-sha { fill: var(--lg-sha); }
.lg-sand.is-sheng { fill: var(--lg-sheng); }
.lg-sand.is-wang { fill: var(--lg-wang); }
.lg-sand.is-nu { fill: var(--lg-nu); }
.lg-sand.is-xie { fill: var(--lg-xie); }
.lg-sand.is-sit { fill: var(--ink); }

.lg-cardinal {
  font-family: var(--font-display);
  font-size: 12px;
  fill: var(--mute);
  letter-spacing: 0.2em;
}

#xk-layout .xk-luopan {
  grid-area: luopan;
  align-self: start;
}

.zw-entry {
  flex: 0 0 auto;
  padding: 1.05rem 1.15rem 1.2rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.zw-entry > #zw-form {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#zw-note {
  position: relative;
  padding: 0 0 1.2rem;
  margin: 0 0 1.2rem;
  border-bottom: 1px solid var(--line);
  max-width: none;
}

#zw-note[hidden],
#xk-note[hidden],
.fs-save[hidden] {
  display: none;
}

.fs-save > select {
  display: block;
  width: 100%;
}

#zw-layout.is-compose {
  grid-template-areas:
    "side result"
    "lib result";
}

#xk-layout.is-compose {
  grid-template-areas:
    "side result"
    "luopan result";
}

@media (max-width: 760px) {
  #zw-layout,
  #bazi-layout,
  #xk-layout,
  #lg-layout,
  #xl-layout,
  #zwlearn-layout,
  #zwresearch-layout {
    grid-template-columns: 1fr;
  }

  #bazi-layout {
    grid-template-areas:
      "result"
      "lib";
  }

  #zw-layout,
  #zw-layout.is-compose {
    grid-template-areas:
      "side"
      "result"
      "lib";
    grid-template-rows: none;
  }

  #zwlearn-layout,
  #zwresearch-layout,
  #lg-layout,
  #xl-layout {
    grid-template-areas:
      "side"
      "result";
  }

  #xk-layout,
  #xk-layout.is-compose {
    grid-template-areas:
      "side"
      "result"
      "luopan";
    grid-template-rows: none;
  }

  .zwlearn-left,
  .zw-left,
  #xk-side,
  .xl-side,
  #xk-layout .xk-luopan {
    width: 100%;
    max-width: none;
  }

  .luoshu-wrap,
  .luoshu {
    max-width: none;
    width: 100%;
  }
}

#zw-note label {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: var(--fog);
  margin: 1.2rem 0 0.35rem;
}

#zw-note label:first-of-type {
  margin-top: 0;
  padding-right: 2rem;
}

#zw-note select,
#zw-note textarea,
#zw-note #zw-fee,
#xk-note #xk-fee,
#xk-note textarea {
  display: block;
  width: 100%;
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-input);
  resize: none;
  overflow: hidden;
  line-height: 1.45;
  min-height: 0;
}

#zw-note #zw-fee,
#xk-note #xk-fee {
  height: var(--ctrl-h);
  box-sizing: border-box;
}

#xk-note #xk-commentary {
  margin-top: var(--ctrl-gap);
}

#zw-note select {
  height: var(--ctrl-h);
  box-sizing: border-box;
  resize: none;
  overflow: visible;
  padding: 0.3rem 1.75rem 0.3rem 0.65rem;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6b6b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.7rem center;
}

#zw-note select:focus,
#zw-note textarea:focus,
#zw-note #zw-fee:focus,
#xk-note #xk-fee:focus,
#xk-note textarea:focus {
  outline: none;
  border-color: var(--blue);
}

#zw-note textarea::placeholder,
#zw-note #zw-fee::placeholder,
#xk-note #xk-fee::placeholder,
#xk-note textarea::placeholder {
  color: var(--mute);
  font-size: 0.9rem;
}

#zw-note .btn,
#xk-note .btn,
.fs-save .btn {
  margin-top: 0;
}

.note-actions {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: 0.65rem;
  margin-top: var(--ctrl-action-gap);
}

.note-actions .btn {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  width: auto;
}

.note-actions .btn-ghost {
  flex: 0 0 auto;
  width: auto;
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}

.btn-ghost {
  border: 0;
  background: var(--pale-mist);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--pale-cool);
  border-color: transparent;
  color: var(--ink);
  transform: translateY(-1px);
}

/* 全站「保存记录」：同形峦类象左栏未选中按钮；描边用 inset 阴影，高度和旁边「关闭」一致 */
.btn.btn-save {
  background: var(--pale-mist);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}

.btn.btn-save:hover,
.btn.btn-save:focus-visible {
  background: var(--pale-mist);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
  outline: none;
  transform: translateY(-1px);
}

.btn.btn-save:active {
  transform: translateY(0);
}

.btn.btn-save:disabled,
.btn.btn-save:disabled:hover {
  background: #d4d4d4;
  color: #fff;
  box-shadow: none;
  transform: none;
}

.open-obsidian {
  display: inline-block;
  margin-top: 0.45rem;
  font-family: var(--font-brand);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.open-obsidian:hover,
.open-obsidian:focus-visible {
  border-bottom-color: var(--blue);
  outline: none;
}

.open-obsidian[hidden] {
  display: none;
}

/* ---------- 命盘库 ---------- */

#zwlib-side,
#bazilib-side {
  grid-area: lib;
  align-self: start;
}

#zwlearn-result,
#zw-result,
#bazi-result {
  grid-area: result;
  align-self: start;
  position: relative;
  min-height: 0;
}

#zwlearn-filter {
  max-width: none;
}

#zwlearn-filter .zwlib-search {
  margin-top: 0;
}

.zwlearn-lead {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 72%, var(--fog));
}

.zwlearn-sublead {
  flex: 0 0 100%;
  margin-top: 0.15rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--fog);
}

#zwlearn-empty[hidden] {
  display: none;
}

.zwlearn-verdict {
  margin-top: 1.5rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}

.zwlearn-verdict[hidden] {
  display: none;
}

.zwlearn-verdict .xk-sx-list {
  max-height: none;
  overflow: visible;
}

.zwlearn-verdict .xk-sx-card.is-empty {
  padding-bottom: 0.75rem;
}

.zwlearn-verdict .xk-sx-card.is-empty .xk-sx-head {
  margin-bottom: 0;
}

.zwlearn-verdict .xk-sx-card {
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}

.zwlearn-verdict .xk-sx-head {
  align-items: center;
}

.zwlearn-edit {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--fog);
  padding: 0.15rem;
  margin: 0;
  cursor: pointer;
  line-height: 0;
  border-radius: var(--radius-sm);
}

.zwlearn-edit-icon {
  display: block;
  width: 1.28rem;
  height: 1.28rem;
  background-color: currentColor;
  -webkit-mask: url("../img/icon-edit.png?v=lg92") center / contain no-repeat;
  mask: url("../img/icon-edit.png?v=lg92") center / contain no-repeat;
}

.zwlearn-edit:hover,
.zwlearn-edit:focus-visible {
  color: var(--blue-hover);
  outline: none;
}

.zwlearn-verdict .xk-sx-body {
  white-space: pre-wrap;
  word-break: break-word;
}

#zwlearn-verdict-msg {
  margin: 0.65rem 0 0;
}

#zwlearn-verdict-msg:empty {
  display: none;
  margin: 0;
}

#zwlearn-verdict-msg.is-ok {
  color: var(--blue);
}

.dash-income-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
}

.dash-income-head .xk-sx-title {
  margin: 0;
  flex: 0 0 auto;
}

.dash-income-head #dash-income-meta {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  color: var(--fog);
  font-size: 0.82rem;
  line-height: 1.2;
}

/* 学习打卡 */
#panel-zw-study {
  --study-g: var(--magic-green);
  --study-g-deep: color-mix(in srgb, var(--magic-green) 62%, #000);
  --study-g-line: color-mix(in srgb, var(--magic-green) 55%, #fff);
  --study-g-soft: color-mix(in srgb, var(--magic-green) 9%, #fff);
}
.result.study {
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  min-height: 0;
}

.study-head {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 1rem;
}

.study-head-text {
  flex: 0 0 auto;
}

.study-head .xk-sx-title,
.study-head .hint {
  margin: 0;
}

.study-head .xk-sx-title {
  font-size: 3rem;
  line-height: 1.05;
}

.study-head .hint {
  margin-top: 0.35rem;
  color: var(--fog);
  font-size: 0.78rem;
  line-height: 1.5;
}

.study-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1.1rem;
}

.study-col {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}

.study-card.study-fu {
  position: relative;
  isolation: isolate;
}

.study-fu-mark {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.study-fu-mark::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 6rem;
  width: 7.6rem;
  height: 11.2rem;
  transform: translateY(-31%);
  background: var(--fog);
  opacity: 0.16;
  -webkit-mask: url("../img/fu-talisman.png?v=1") center / contain no-repeat;
  mask: url("../img/fu-talisman.png?v=1") center / contain no-repeat;
  pointer-events: none;
}

.study-fu-row {
  justify-content: space-between;
  flex-wrap: nowrap;
}

.study-fu-row .btn {
  margin-bottom: -0.4rem;
}

.study-sec + .study-sec,
.study-add-row {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.study-card .btn.study-add {
  display: block;
  width: 100%;
  margin-top: 0;
}

.study-book-acts {
  display: flex;
  flex: 0 0 auto;
  gap: 0.7rem;
}

.study-card {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.9rem 0.95rem;
}

.study-card.is-done {
  border-color: var(--study-g-line);
}

@property --study-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.study-card.is-done.is-flash {
  position: relative;
  animation: study-glow 3.6s ease-out 1;
}

.study-card.is-done.is-flash::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(
    from calc(var(--study-start, -45deg) + var(--study-sweep)),
    transparent 0turn,
    transparent 0.55turn,
    var(--study-g-line) 0.8turn,
    var(--study-g) 1turn
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  opacity: 0;
  animation:
    study-sweep 3.6s cubic-bezier(0.72, 0, 0.28, 1) 1,
    study-sweep-fade 3.6s linear 1;
}

@keyframes study-sweep {
  from {
    --study-sweep: 0deg;
  }
  to {
    --study-sweep: 1080deg;
  }
}

@keyframes study-sweep-fade {
  0% {
    opacity: 0;
  }
  5%,
  88% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes study-glow {
  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
  45% {
    box-shadow: 0 0 0 4px var(--study-g-soft), 0 0 14px color-mix(in srgb, var(--study-g) 22%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .study-card.is-done.is-flash,
  .study-card.is-done.is-flash::after {
    animation: none;
  }
}

.study-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.study-card-hd h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.study-badge {
  font-size: 0.72rem;
  color: var(--mute);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.1rem 0.55rem;
}

.study-badge.is-done {
  color: var(--ink);
  border-color: var(--study-g);
  background: var(--study-g);
}

.study-task {
  margin: 0.7rem 0 0.2rem;
  font-size: 1.05rem;
}

.study-task b {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: 0 0.1em;
}

.study-bar {
  height: 0.55rem;
  background: var(--study-g-soft);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.study-bar i {
  display: block;
  height: 100%;
  background: var(--study-g);
  border-radius: inherit;
  transition: width 0.4s ease;
}

.study-count {
  margin: 0.35rem 0 0.7rem;
  font-size: 0.8rem;
  color: var(--mute);
}

.study-count b {
  color: var(--ink);
}

.study-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.45rem;
}

.study-form input {
  min-width: 0;
}

.study-form .btn,
.study-pick-actions .btn,
.study-fu-row .btn {
  width: auto;
  height: var(--ctrl-h);
  margin-top: 0;
  padding-block: 0;
  padding-inline: 1.4rem;
}

.study-book-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.6rem;
}

.study-book-name {
  margin: 0;
  min-width: 0;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study-link {
  flex: 0 0 auto;
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.76rem;
  color: var(--mute);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.study-link:hover {
  color: var(--ink);
}

.study-sub {
  margin: 0.2rem 0 0.35rem;
  font-size: 0.78rem;
  color: var(--mute);
}

.study-book-prog {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.study-book-prog b {
  color: var(--ink);
}

.study-today {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  margin: 0.55rem 0 0.2rem;
}

.study-today-main {
  flex: 0 0 auto;
}

.study-today .study-task {
  display: flex;
  align-items: flex-end;
  gap: 0.3em;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}

.study-today .study-task > span {
  position: relative;
  top: -0.12em;
}

.study-today-bar {
  flex-wrap: nowrap;
}

.study-today-bar .study-bar {
  flex: 1 1 auto;
  margin-bottom: 0.35rem;
}

.study-today .study-form {
  flex: 1 1 11rem;
  min-width: 11rem;
  margin-bottom: -0.4rem;
}

.study-pick {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.study-card select,
.study-card input[type="number"] {
  box-sizing: border-box;
  height: var(--ctrl-h);
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-input);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.35rem 0.75rem;
}

.study-card select:focus,
.study-card input[type="number"]:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

.study-pick select {
  width: 100%;
  min-width: 0;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: calc(100% - 1rem) 55%, calc(100% - 0.7rem) 55%;
  background-size: 0.3rem 0.3rem;
  background-repeat: no-repeat;
}

.study-pick .study-count {
  margin: 0;
}

.study-daily-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.study-daily {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
}

.study-daily input {
  width: 5.5rem;
}

.study-pick-actions {
  display: flex;
  gap: 0.45rem;
}

.study-msg {
  margin: 0.35rem 0 0;
}

.study-msg:empty {
  display: none;
}

.study-list {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
}

.study-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.1rem;
  border-top: 1px solid var(--line);
}

.study-list li > span:first-child,
.study-list li > span:last-child {
  color: var(--fog);
  font-variant-numeric: tabular-nums;
}

.study-list li > :nth-child(2) {
  flex: 1 1 auto;
  min-width: 0;
}

.study-list .zw-probe-del {
  margin-left: auto;
}

.study-case {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  flex: 1 1 auto;
  min-width: 0;
}

.study-list li > .study-case {
  flex: 1 1 auto;
  min-width: 0;
}

.study-list li > .study-kind,
.study-list li > .study-src {
  flex: 0 0 auto;
}

.study-src {
  font-size: 0.72rem;
  color: var(--fog);
}

.study-rec-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.study-rec-hd span {
  font-size: 0.72rem;
  color: var(--fog);
}

.study-rec-hd + .study-list {
  margin-top: 0.2rem;
}

.study-rec-hd + .study-empty {
  margin-top: 0.2rem;
}

.study-kind {
  font-size: 0.72rem;
  color: var(--mute);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0 0.45rem;
}

.study-kind.is-new {
  color: var(--study-g-deep);
  border-color: var(--study-g-line);
}

.study-empty {
  margin: 0.6rem 0 0;
  font-size: 0.8rem;
  line-height: 1.55;
}

.study-heat {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.62rem;
  color: var(--fog);
}

.study-heat-scroll {
  overflow-x: auto;
  padding: 2px;
  margin: -2px;
  scrollbar-width: none;
}

.study-heat-scroll::-webkit-scrollbar {
  display: none;
}

.study-heat-inner {
  width: max-content;
  margin-left: auto;
}

.study-heat-months {
  display: grid;
  column-gap: 5px;
  margin: 0 0 0.3rem;
  height: 0.9rem;
}

.study-heat-months span {
  white-space: nowrap;
}

.study-heat-body {
  display: flex;
  gap: 0.35rem;
}

.study-heat-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 10px);
  grid-auto-columns: 10px;
  gap: 5px;
}

.study-heat i {
  display: block;
  width: 10px;
  height: 10px;
  background: color-mix(in srgb, #100f0f 10%, transparent);
}

.study-heat i.lv1 { background: color-mix(in srgb, var(--study-g) 30%, transparent); }
.study-heat i.lv2 { background: color-mix(in srgb, var(--study-g) 55%, transparent); }
.study-heat i.lv3 { background: color-mix(in srgb, var(--study-g) 80%, transparent); }
.study-heat i.lv4 { background: var(--study-g); }

.study-heat-grid i.is-today {
  outline: 1px solid var(--ink);
  outline-offset: 1px;
}

.study-heat-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.5rem 0 0;
}

.study-heat-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

@media (max-width: 640px) {
  .study-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .study-head {
    gap: 1.25rem;
  }
}

.dash-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  align-items: stretch;
  margin: 0.85rem 0 1.15rem;
}

.dash-stat-sum {
  display: flex;
  align-items: center;
  min-height: 100%;
}

.dash-stat-sum b {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.6vw, 4.5rem);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dash-stat-kinds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: 0;
  background: transparent;
}

.dash-kind {
  min-width: 0;
  padding: 0.85rem 0.9rem;
}

.dash-kind b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.dash-kind span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--mute);
  letter-spacing: 0.08em;
}

.dash-charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}

.dash-charts-2 {
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.dash-charts-2 > .dash-chart {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.dash-chart {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.9rem 0.95rem;
}

.dash-chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.7rem;
}

.dash-chart h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.dash-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.72rem;
  color: var(--mute);
  letter-spacing: 0.04em;
}

.dash-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}

.dash-legend i {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 2px;
  background: var(--line-strong);
}

.dash-legend i.tone-ming {
  background: var(--zw-blue-1);
}

.dash-legend i.tone-shui {
  background: var(--zw-blue-2);
}

.dash-legend i.tone-pink {
  background: var(--magic-pink);
}

.dash-legend i.tone-orange {
  background: var(--magic-orange);
}

.dash-legend i.is-paid {
  border-radius: 50%;
  background: var(--zw-blue-2);
}

.dash-legend i:not(.tone-ming):not(.tone-shui):not(.tone-pink):not(.tone-orange):not(.is-paid) {
  border-radius: 50%;
  background: #d8d8dc;
}

.dash-chart-plot {
  display: flex;
  align-items: stretch;
  gap: 0.28rem;
  flex: 1 1 auto;
  width: 100%;
  min-height: 16.8rem;
  padding-top: 2.55rem;
}

.dash-chart-plot.is-mirror {
  justify-content: space-evenly;
  gap: 0;
  padding: 2.2rem 0.1rem 0.1rem;
}

.dash-wave {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 16.8rem;
  display: flex;
  overflow: hidden;
  background: var(--bg);
}

.dash-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dash-wave-month {
  fill: var(--mute);
  font-family: var(--font-latin);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.dash-wave-hit {
  cursor: pointer;
}

.dash-wave-peak {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.28rem;
  transform: translate(-50%, calc(-100% - 0.55rem));
  pointer-events: none;
  white-space: nowrap;
}

.dash-wave-peak b {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dash-wave-peak i {
  font-style: normal;
  font-weight: 400;
  font-size: 0.62rem;
  color: var(--mute);
  line-height: 1;
}

.dash-mirror-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dash-chart-plot.is-mirror .dash-mirror-col {
  flex: 0 0 calc(100% / 12);
  max-width: calc(100% / 12);
}

.dash-mirror-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 0;
  padding-bottom: 1.85rem;
  box-sizing: border-box;
}

.dash-mirror-arm {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 0;
  min-height: 0;
}

.dash-mirror-arm.is-up {
  justify-content: flex-end;
}

.dash-mirror-arm.is-down {
  justify-content: flex-start;
}

.dash-mirror-stack {
  position: absolute;
  left: 50%;
  width: 68%;
  transform: translateX(-50%);
  min-height: 0.42rem;
}

.dash-mirror-arm.is-up .dash-mirror-stack {
  bottom: 0;
}

.dash-mirror-arm.is-down .dash-mirror-stack {
  top: 0;
}

.dash-mirror-bar {
  width: 100%;
  height: 100%;
  min-height: 0.42rem;
  border-radius: 0;
}

.dash-mirror-bar.tone-ming {
  background: var(--zw-blue-1);
}

.dash-mirror-bar.tone-shui {
  background: var(--zw-blue-2);
}

/* 打开 Dashboard 的入场动画（只第一次渲染带 .is-enter） */
.dash-chart.is-enter .dash-mirror-bar {
  animation: dash-bar-grow 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 100ms);
}

.dash-chart.is-enter .dash-mirror-arm.is-up .dash-mirror-bar {
  transform-origin: 50% 100%;
}

.dash-chart.is-enter .dash-mirror-arm.is-down .dash-mirror-bar {
  transform-origin: 50% 0;
}

.dash-chart.is-enter .dash-mirror-col .dash-chart-cap > * {
  animation: dash-fade-in 0.6s ease-out both;
  animation-delay: calc(var(--i, 0) * 100ms + 0.8s);
}

/* 每月新增：先升橘色收费块，再升粉色新增块（含线和点），都以基线为原点 */
.dash-chart.is-enter .dash-wave-paid,
.dash-chart.is-enter .dash-wave-new {
  transform-box: view-box;
  transform-origin: 0 var(--dash-base);
  animation: dash-wave-rise 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dash-chart.is-enter .dash-wave-new {
  animation-delay: 0.6s;
}

.dash-chart.is-enter .dash-wave-peak {
  animation: dash-fade-in 0.45s ease-out 1.25s both;
}

/* 顺序：收入总数滚完 → 月收入加 .is-play → 月收入放完 → 每月新增加 .is-play（loadDashboard）；之前停在起点 */
.dash-chart.is-enter .dash-mirror-bar,
.dash-chart.is-enter .dash-mirror-col .dash-chart-cap > *,
.dash-chart.is-enter .dash-wave-paid,
.dash-chart.is-enter .dash-wave-new,
.dash-chart.is-enter .dash-wave-peak {
  animation-play-state: paused;
}

.dash-chart.is-enter.is-play .dash-mirror-bar,
.dash-chart.is-enter.is-play .dash-mirror-col .dash-chart-cap > *,
.dash-chart.is-enter.is-play .dash-wave-paid,
.dash-chart.is-enter.is-play .dash-wave-new,
.dash-chart.is-enter.is-play .dash-wave-peak {
  animation-play-state: running;
}

@keyframes dash-bar-grow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes dash-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dash-wave-rise {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dash-chart.is-enter .dash-mirror-bar,
  .dash-chart.is-enter .dash-mirror-col .dash-chart-cap > *,
  .dash-chart.is-enter .dash-wave-paid,
  .dash-chart.is-enter .dash-wave-new,
  .dash-chart.is-enter .dash-wave-peak {
    animation: none;
  }
}

.dash-mirror-arm.is-up .dash-chart-cap {
  bottom: auto;
  top: 0;
  transform: translate(-50%, calc(-100% - 0.16rem));
}

.dash-mirror-arm.is-down .dash-chart-cap {
  top: auto;
  bottom: 0;
  transform: translate(-50%, calc(100% + 0.16rem));
}

.dash-chart-cap {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.38rem;
  padding-bottom: 0.22rem;
}

.dash-chart-val,
.dash-chart-n {
  font-family: var(--font-mono);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.dash-chart-val {
  font-size: 0.62rem;
  color: var(--fog);
}

.dash-chart-n {
  font-size: 0.58rem;
  color: var(--mute);
}

.dash-chart-lab {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: var(--mute);
  letter-spacing: 0.04em;
}

#zwresearch-result {
  grid-area: result;
  min-width: 0;
}

.zwresearch-topics {
  display: flex;
  flex-direction: column;
  gap: var(--ctrl-gap);
}

.zwresearch-nav-rule {
  border: 0;
  border-top: 1px solid var(--line-strong);
  margin: 0.55rem 0 0.35rem;
}

.zwresearch-nav-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ctrl-gap) 0.8rem;
}

.zwresearch-nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--ctrl-gap);
  min-width: 0;
}

.zwresearch-nav-label {
  margin: 0 0 0.15rem;
  font-size: 0.72rem;
  color: var(--mute);
  letter-spacing: 0.14em;
}

/* Match 研究页研究专题 heading to 个案页 .zwlearn-lead */
#zwresearch-topics .zwresearch-nav-label {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--ink) 72%, var(--fog));
  letter-spacing: normal;
}

.zwresearch-topic-list {
  display: flex;
  flex-direction: column;
  gap: var(--ctrl-gap);
}

.zwresearch-topic {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--pale-mist);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.3;
  min-height: var(--ctrl-h);
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  letter-spacing: 0;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: var(--radius-pill);
}

.zwresearch-topic-n {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--mute);
  letter-spacing: 0.02em;
}

.zwresearch-topic:hover,
.zwresearch-topic:focus-visible {
  border-color: var(--blue);
  outline: none;
}

.zwresearch-topic.is-on {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.zwresearch-topic.is-on .zwresearch-topic-n {
  color: #fff;
}

/* 研究专题 pills: wrap row, auto-width, keep original colors/fonts */
#zwresearch-topics .zwresearch-topic-list,
#zwlearn-labels .zwresearch-topic-list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem;
}

#zwresearch-topics .zwresearch-topic-list .zwresearch-topic,
#zwlearn-labels .zwresearch-topic-list .zwresearch-topic {
  width: auto;
  flex: 0 0 auto;
  justify-content: flex-start;
  -webkit-tap-highlight-color: transparent;
}

#zwresearch-topics .zwresearch-topic-list + .zwresearch-topic-list,
#zwlearn-labels .zwresearch-topic-list + .zwresearch-topic-list {
  margin-top: calc(0.4rem - var(--ctrl-gap));
}

.zwresearch-cat.is-open {
  border-color: var(--ink);
}

.zwresearch-sublist {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.1rem 0 0.25rem 0.6rem;
  border-left: 2px solid var(--line);
}

.zwresearch-topic.is-sub {
  min-height: calc(var(--ctrl-h) * 0.85);
  padding: 0.3rem 0.7rem;
  font-size: 0.84rem;
}

.zwresearch-topic.is-zero:not(.is-on) {
  color: var(--fog);
}

.zwresearch-insight .zwresearch-insight-block + .zwresearch-insight-block {
  margin-top: 1.05rem;
  padding-top: 1.05rem;
  border-top: 1px solid #e6e6e6;
}

.zwresearch-insight .zwresearch-insight-block.is-ai {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem;
  background: var(--bg-2);
  border-left: 3px solid var(--ink);
  border-top: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.zwresearch-insight-label {
  flex: 0 0 auto;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  line-height: 1.6;
  margin-top: 0.12rem;
}

.zwresearch-insight .zwresearch-points {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink);
  font-size: 0.88rem;
  line-height: 1.65;
}

.zwresearch-insight .is-ai .zwresearch-points {
  flex: 1;
  min-width: 0;
  padding-left: 0;
  list-style: none;
}

.zwresearch-insight .zwresearch-points li + li {
  margin-top: 0.45rem;
}

.zwresearch-body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.zwresearch-body .dash-stats {
  margin: 0;
}

.zwresearch-h {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.zwresearch-lead {
  margin: 0;
  color: var(--fog);
  font-size: 0.9rem;
  line-height: 1.65;
}

.jifa-crumb {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  color: var(--fog);
  cursor: pointer;
}

.jifa-crumb:hover {
  color: var(--blue);
}

.zwresearch-h.jifa-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.zwresearch-body .zwlib-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.zwresearch-body .jifa-cards {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.jifa-cards .xk-sx-card.is-empty {
  padding-bottom: 0.75rem;
}

.jifa-cards .xk-sx-card.is-empty .xk-sx-head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.jifa-cards .xk-sx-card.is-empty .xk-sx-palace {
  color: var(--mute);
}

.jifa-cards .xk-sx-body .zwresearch-case {
  margin: 0 0.3rem 0.3rem 0;
}

.zwresearch-case.is-missing {
  cursor: default;
  color: var(--mute);
  border-style: dashed;
}

.zwresearch-case.is-missing:hover {
  border-color: var(--line-strong);
  color: var(--mute);
}

.zwlib-row .jifa-row-del {
  align-self: center;
}

.zwlib-list.lifa-admin-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lifa-admin-list .zwlib-item {
  min-width: 0;
}

@media (max-width: 640px) {
  .zwlib-list.lifa-admin-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.jifa-list-msg {
  margin: 0;
}

.jifa-list-msg:empty {
  display: none;
}

.jifa-msg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
}

.jifa-msg-row .error {
  margin: 0;
}

.jifa-msg-row:has(.error:empty):has(.open-obsidian[hidden]) {
  display: none;
}

.jifa-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.jifa-head-main {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.jifa-head-crumb {
  margin: 0;
}

.jifa-stat-btn {
  appearance: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.jifa-stat-btn b {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.6vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.jifa-stat-btn span {
  margin-top: calc(clamp(2.8rem, 5.6vw, 4.5rem) * 0.18);
  line-height: 1;
  font-size: 0.85rem;
  color: var(--mute);
  letter-spacing: 0.08em;
}

.jifa-stat-btn:not(:disabled):hover b,
.jifa-stat-btn[aria-expanded="true"] b {
  color: var(--blue);
}

.jifa-stat-btn:disabled {
  cursor: default;
}

.jifa-stat-note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--mute);
}

.jifa-docs {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 5rem;
}

.jifa-docs-h {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
}

.jifa-docs-h span {
  color: var(--fog);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.jifa-docs-empty {
  margin: 0.6rem 0 0;
}

.zwlib-list.jifa-doc-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jifa-doc-list .zwlib-item {
  min-width: 0;
  height: 100%;
}

.jifa-doc-list .zwlib-item-name,
.jifa-doc-list .zwlib-item-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jifa-ms {
  position: relative;
}

.jifa-ms-trigger {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.jifa-ms-trigger.is-ph {
  font-size: 0.9rem;
}

.jifa-ms-panel[hidden] {
  display: none;
}

.jifa-ms-panel {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: calc(100% + 0.35rem);
  padding: 0.6rem;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.jifa-ms-panel .zwlib-modal-cal,
#zwlib-modal .zwlib-modal-cal.is-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  height: auto;
  margin: 0;
}

.jifa-ms-panel .zwlib-modal-cal label {
  display: inline-flex;
  height: auto;
  margin: 0;
  cursor: pointer;
}

.jifa-ms-panel .zwlib-modal-cal input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.jifa-ms-panel .zwlib-modal-cal span {
  display: block;
  height: auto;
  padding: 0.3rem 0.85rem;
  background: var(--bg-2);
  color: var(--fog);
  font-size: 0.9rem;
  line-height: 1.3;
  border-radius: var(--radius-pill);
}

.jifa-ms-panel .zwlib-modal-cal input:checked + span {
  color: var(--page);
  background: var(--ink);
}

.zwresearch-body .form-block.jifa-form {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.form-block.jifa-form textarea {
  min-height: 0;
  resize: none;
  overflow: hidden;
}

.jifa-form .error:empty {
  display: none;
}

.zwresearch-body > .zwlearn-sublead {
  margin: 0 0 -0.6rem;
}

.zwresearch-bars {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 0.5rem;
}

.zwresearch-bar {
  display: grid;
  grid-template-columns: var(--zw-bar-label, 2.6em) 1fr 1.8em;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.72rem;
}

.zwresearch-bar-label {
  color: var(--fog);
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
}

.zwresearch-bar-track {
  display: block;
  height: 1rem;
  background: var(--zwr-t6);
}

.zwresearch-bar-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--zwr-t1);
}

.zwresearch-bar-n {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

.zwresearch-cloud {
  position: relative;
  flex: 1 1 auto;
  min-height: 11rem;
  overflow: hidden;
}

.zwresearch-cloud-word {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  white-space: nowrap;
  visibility: hidden;
}

.zwresearch-cloud-word.is-placed {
  visibility: visible;
}

.zwresearch-cloud-word b {
  font-weight: 500;
  letter-spacing: 0.04em;
}

.zwresearch-cloud-word em {
  font-family: var(--font-body);
  font-style: normal;
  font-size: max(0.58em, 0.66rem);
  font-weight: 700;
}

.zwresearch-split {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.zwresearch-split-nums {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.zwresearch-split-num {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.zwresearch-split-num:last-child:not(:first-child) {
  align-items: flex-end;
}

.zwresearch-split-num b {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.zwresearch-split-num b small {
  font-size: 0.5em;
  font-weight: 400;
  margin-left: 0.08em;
  letter-spacing: 0;
}

.zwresearch-split-num:not(:first-child) b {
  font-size: 1.8rem;
  color: var(--fog);
}

.zwresearch-split-num span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--fog);
  letter-spacing: 0.04em;
}

.zwresearch-split-num i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}

.zwresearch-dots {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.35rem;
}

.zwresearch-dots > span {
  aspect-ratio: 1;
  border-radius: 50%;
}

.zwresearch-split .is-main {
  background: var(--zwr-t1);
}

.zwresearch-split .is-soft {
  background: var(--zwr-t5);
}

.zwresearch-split .is-mute {
  background: var(--line);
}

.zwresearch-donut {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.zwresearch-donut-ring {
  position: relative;
  flex: 0 0 auto;
  width: 8rem;
  height: 8rem;
}

.zwresearch-donut-ring svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.zwresearch-donut-ring path {
  stroke: var(--bg);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.zwresearch-donut-total {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
}

.zwresearch-donut-total b {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.zwresearch-donut-total em {
  font-style: normal;
  font-size: 0.68rem;
  color: var(--fog);
  letter-spacing: 0.1em;
}

.zwresearch-donut .zwresearch-legend {
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.5rem;
}

.zwresearch-donut .zwresearch-legend-item {
  white-space: nowrap;
}

.zwresearch-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.85rem 0.9rem 0.95rem;
}

.zwresearch-card h4 {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.zwresearch-card p {
  margin: 0 0 0.55rem;
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--ink);
}

.zwresearch-card p:last-child {
  margin-bottom: 0;
}

.zwresearch-chart-empty {
  padding: 1.5rem 0.5rem;
  text-align: center;
  color: var(--mute);
  font-size: 0.85rem;
}

.zwresearch-legend {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 7.5rem;
  flex: 1 1 8rem;
}

.zwresearch-legend-item {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.zwresearch-legend-item i {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex: 0 0 auto;
  align-self: center;
}

.zwresearch-legend-item b {
  margin-left: auto;
  font-family: var(--font-mono);
  font-weight: 500;
}

.zwresearch-legend-item em {
  font-style: normal;
  color: var(--mute);
  font-size: 0.72rem;
  min-width: 2.2em;
  text-align: right;
}

.zwresearch-cols {
  display: grid;
  grid-template-columns: repeat(var(--zw-cols, 6), minmax(0, 1fr));
  grid-template-rows: auto;
  align-items: stretch;
  gap: 0;
}

.zwresearch-col {
  display: grid;
  grid-template-rows: auto var(--zw-col-h, 7.5rem) auto;
  align-content: start;
  align-items: stretch;
  justify-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.zwresearch-col-n {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}

.zwresearch-col-track {
  width: var(--zw-pill, 1.4rem);
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: var(--zwr-t6);
}

.zwresearch-col-fill {
  display: block;
  width: 100%;
  min-height: 2px;
  background: var(--zwr-t1);
}

.zwresearch-cols.is-dense {
  --zw-pill: 0.95rem;
}

.zwresearch-cols.is-dense .zwresearch-col-label {
  padding: 0;
  font-size: 0.62rem;
  letter-spacing: 0;
}

.zwresearch-col.is-zero .zwresearch-col-n,
.zwresearch-col.is-zero .zwresearch-col-label {
  color: var(--fog);
  font-weight: 400;
}

.zwresearch-col-label {
  padding: 0 0.1rem;
  font-size: 0.68rem;
  color: var(--fog);
  text-align: center;
  line-height: 1.25;
  letter-spacing: 0.02em;
  word-break: break-all;
  align-self: start;
  width: 100%;
  box-sizing: border-box;
}

.zwresearch-line-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  flex: 1 1 auto;
}

.zwresearch-line {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.zwresearch-line-area {
  fill: var(--zwr-t6);
}

.zwresearch-line-path {
  fill: none;
  stroke: var(--zwr-t1);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.zwresearch-line-dot {
  fill: var(--bg);
  stroke: var(--zwr-t1);
  stroke-width: 1.6;
}

.zwresearch-line-val {
  fill: var(--ink);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
}

.zwresearch-line-label {
  fill: var(--fog);
  font-family: var(--font-body);
  font-size: 9px;
}

.dash-charts-2 .zwresearch-cols {
  --zw-col-h: 14.2rem;
}

#panel-zw-research .dash-charts-2 .zwresearch-cols {
  --zw-col-h: 9rem;
}

.zwresearch-case {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.55rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.zwresearch-case:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.zwresearch-cases-hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.zwresearch-cases-hd h4 {
  margin: 0;
}

.zwresearch-cases-hd span {
  font-size: 0.74rem;
  color: var(--fog);
  letter-spacing: 0.04em;
}

.zwresearch-quotes {
  column-count: 2;
  column-gap: 0.75rem;
  margin-top: 0.85rem;
}

.zwresearch-quote {
  display: inline-block;
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0.75rem 0.85rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--ink);
  min-width: 0;
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.zwresearch-quote-hd {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.55rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
}

.zwresearch-quote .zwresearch-quote-hd .zwresearch-case {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.zwresearch-quote-g {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--fog);
  font-size: 0.68rem;
  line-height: 1.5;
}

.zwresearch-case-sec + .zwresearch-case-sec {
  margin-top: 0.6rem;
}

.zwresearch-case-sec h5 {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--fog);
}

.zwresearch-quote-empty {
  color: var(--mute);
}

.jifa-doubt {
  margin-top: 1.1rem;
}

.jifa-doubt-tabs {
  display: flex;
  gap: 1.1rem;
}

.jifa-doubt-tabs .xk-detail-tab {
  font-size: 0.9rem;
}

.zw-jifa-view li.jifa-doubt-item {
  display: block;
}

.zw-jifa-view li.jifa-doubt-item + li.jifa-doubt-item {
  padding-top: 0.4rem;
  border-top: 1px dashed var(--line);
}

.jifa-doubt-item-hd {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.2rem;
}

.zwresearch-quote .jifa-doubt-item-hd .zwresearch-case {
  font-weight: 600;
}

.zwresearch-probe .zw-jifa-chip {
  margin-right: 0.35rem;
}

.zwresearch-quote .zw-jifa-chip,
.zwresearch-quote .zw-jifa-chip.is-doubt {
  background: var(--bg-2);
}

.zwresearch-insight .zwresearch-case,
.zwresearch-quote .zwresearch-case,
.zwresearch-quote b {
  margin: 0;
  border: 0;
  background: none;
  padding: 0;
  font-size: inherit;
  letter-spacing: 0.04em;
  color: var(--blue);
  text-decoration: none;
}

.zwresearch-insight .zwresearch-case:hover,
.zwresearch-quote .zwresearch-case:hover {
  color: var(--blue-hover);
}

.zwresearch-card .zwresearch-quote p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.zwresearch-fb {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.zwresearch-fb li {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
}

.zwresearch-fb time {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.zwresearch-fb time:empty::before {
  content: "·";
  color: var(--mute);
}

.zwresearch-quote b {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 760px) {
  .zwresearch-quotes {
    column-count: 1;
  }

  .dash-charts,
  .dash-charts-2,
  .dash-stats {
    grid-template-columns: 1fr;
  }

  .dash-income-head {
    align-items: flex-start;
  }

  .dash-income-head #dash-income-meta {
    text-align: left;
  }
}

#zw-result.is-shot #zw-save-img,
#zwlearn-result.is-shot #zwlearn-save-img,
#lg-result.is-shot #lg-save-img,
.result.is-shot .zw-hide-name,
.result.is-shot .zw-prompter-btn {
  display: none;
}

/* 保存图片左边的「隐藏姓名」，再左边是「提词」。颜色 / 大小同四化勾选保存 .zw-keep，按下变黑 */
.zw-hide-name,
.zw-prompter-btn {
  position: absolute;
  top: 0.59rem;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.15rem;
  color: color-mix(in srgb, var(--ink) 62%, var(--pale-cool));
  cursor: pointer;
  line-height: 0;
  border-radius: var(--radius-sm);
}

.zw-hide-name {
  right: 2.78rem;
}

.zw-prompter-btn {
  right: 4.93rem;
}

.zw-hide-name[aria-pressed="true"],
.zw-prompter-btn[aria-pressed="true"] {
  color: var(--ink);
}

.zw-hide-name:focus-visible,
.zw-prompter-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.zw-hide-name-icon,
.zw-prompter-icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-color: currentColor;
}

.zw-hide-name-icon {
  -webkit-mask: url("../img/icon-eye-off.png?v=lg498") center / contain no-repeat;
  mask: url("../img/icon-eye-off.png?v=lg498") center / contain no-repeat;
}

.zw-prompter-icon {
  width: 1.44rem;
  height: 1.44rem;
  -webkit-mask: url("../img/icon-prompter.png?v=lg1") center / contain no-repeat;
  mask: url("../img/icon-prompter.png?v=lg1") center / contain no-repeat;
  mask-mode: alpha;
}

.zw-chart-dock .zw-prompter-btn {
  display: none;
}

.zw-prompter {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-height: min(26rem, calc(100vh - 5.4rem));
  padding: 0.7rem 1rem 0.75rem;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(16, 15, 15, 0.06);
  overflow: hidden;
  min-height: 0;
}

.zw-prompter[hidden] {
  display: none;
}

.zw-prompter-inner {
  width: min(60rem, 100%);
  margin: 0 auto;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.zw-prompter-q {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  height: var(--ctrl-h);
  margin: 0;
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.35;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-input);
}

.zw-prompter-q:focus {
  outline: none;
  border-color: var(--ink);
}

.zw-prompter-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

.zw-prompter-item {
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.45;
}

.zw-prompter-item:first-child {
  border-top: 0;
}

.zw-prompter-title,
.zw-prompter-gist,
.zw-prompter-src,
.zw-prompter-list .hint {
  margin: 0;
}

.zw-prompter-title {
  font-weight: 600;
}

.zw-prompter-gist,
.zw-prompter-src,
.zw-prompter-list .hint {
  margin-top: 0.15rem;
  color: var(--fog);
  font-size: 0.85rem;
}

.zw-prompter strong {
  font-weight: 700;
  color: inherit;
}

.zw-board.is-name-hidden .zw-core-name,
.zw-board.is-name-hidden .zw-core-private {
  display: none;
}

#zwlib-side > label {
  margin: 0 0 0.3rem;
}

.zwlib-search {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.zwlib-search input {
  flex: 1;
  min-width: 0;
  width: auto;
  margin: 0;
  appearance: none;
  box-sizing: border-box;
  height: var(--ctrl-h);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.35;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-input);
}

.zwlib-search input:focus {
  outline: none;
  border-color: var(--blue);
}

.zwlib-search .btn {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ctrl-h);
  padding: 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.12em;
}

.zwlib-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.7rem 0 0;
  overflow: visible;
}

.zwlib-row {
  display: flex;
  align-items: stretch;
  gap: 0.35rem;
}

.zwlib-row.is-on .zwlib-item {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.zwlib-row.is-on .zwlib-item .zwlib-item-name,
.zwlib-row.is-on .zwlib-item .zwlib-item-group,
.zwlib-row.is-on .zwlib-item .zwlib-item-meta,
.zwlib-row.is-on .zwlib-item .zwlib-item-note {
  color: #fff;
}

.zwlib-item {
  appearance: none;
  position: relative;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.35;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.zwlib-item:hover,
.zwlib-item:focus-visible {
  border-color: var(--blue);
  outline: none;
}

.zwlib-item-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.zwlib-item-name {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  margin-bottom: 0.15rem;
}

.zwlib-item-group {
  flex: 0 0 auto;
  color: var(--mute);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
}

.zwlib-item-meta {
  display: block;
  color: var(--mute);
  font-size: 0.78rem;
}

.zwlib-item-note {
  display: block;
  color: var(--fog);
  font-size: 0.78rem;
  margin-top: 0.2rem;
}

#zw-result .zwlib-tags,
#zwlearn-result .zwlib-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 6.4rem 0.85rem 0;
}

.zwlib-tag.is-plain {
  cursor: default;
}

.zwlib-tag.is-plain:hover,
.zwlib-tag.is-plain:focus-visible {
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--ink);
}

.zwlib-tag {
  appearance: none;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0;
  color: var(--ink);
  background: var(--pale-cool);
  border: 1px solid var(--line);
  padding: 0.32rem 0.65rem;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-pill);
}

.zwlib-tag:hover,
.zwlib-tag:focus-visible {
  border-color: var(--blue);
  color: var(--blue);
  outline: none;
}

.zwlib-tag-break {
  flex-basis: 100%;
  height: 0;
}

.zwlib-backdrop {
  position: fixed;
  inset: 0;
  z-index: 44;
  display: none;
  background: color-mix(in srgb, var(--ink) 28%, transparent);
}

body:has(#zwlib-modal:not([hidden])) .zwlib-backdrop {
  display: block;
}

.zwlib-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: transparent;
  pointer-events: none;
}

.zwlib-modal[hidden] {
  display: none;
}

.zwlib-modal-card {
  position: relative;
  width: min(400px, 100%);
  pointer-events: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  box-shadow: 0 18px 48px rgba(16, 15, 15, 0.14);
  padding: 1.45rem 1.45rem 1.35rem;
}

#zwlib-modal-title {
  margin: 0 2.2rem 0 0;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.35;
}

#zwlib-modal-body {
  display: flex;
  flex-direction: column;
  margin-top: 1.25rem;
}

.zwlib-modal-text {
  margin: 0;
  color: var(--ink);
  line-height: 1.7;
}

#zwlib-modal-body .hint {
  margin: 0.6rem 0 0;
  color: var(--fog);
  font-size: 0.8rem;
  line-height: 1.6;
}

.save-tip {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 60;
  transform: translateX(-50%);
  max-width: min(90vw, 32rem);
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.9rem;
  line-height: 1.5;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
}

.save-tip.is-err {
  background: var(--red);
}

.save-tip[hidden] {
  display: none;
}

.zwlearn-del-list {
  padding-left: 1.2em;
}

/* 模块底部删除按钮（删除个案 / 删除技法）：统一靠右 */
.note-actions.del-row {
  justify-content: flex-end;
  align-items: center;
  margin-top: 1.5rem;
}

.note-actions.del-row .open-obsidian,
.note-actions.del-row #zwlearn-verdict-msg {
  margin: 0;
}

.note-actions.del-row .del-btn {
  margin-left: auto;
}

.del-row[hidden] {
  display: none;
}

.del-btn:hover {
  color: var(--red);
}

#zwlib-modal-error {
  min-height: 0;
  margin: 0.85rem 0 0;
}

#zwlib-modal-error:empty {
  display: none;
}

.zwlib-modal-label,
.zwlib-modal-card label {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--fog);
}

.zwlib-modal-card #zwlib-modal-body > label:not(:first-child),
.zwlib-modal-card #zwlib-modal-body > .zwlib-modal-label:not(:first-child),
.zwlib-modal-card #zwlib-modal-body > .zwlib-modal-cal + label,
.zwlib-modal-card #zwlib-modal-body > input + label,
.zwlib-modal-card #zwlib-modal-body > select + label,
.zwlib-modal-card #zwlib-modal-body > textarea + label,
.zwlib-modal-card #zwlib-modal-body > .zwlib-modal-row + label,
.zwlib-modal-card #zwlib-modal-body > .check + label {
  margin-top: 1rem;
}

.zwlib-modal-card #zwlib-modal-body > .check {
  margin-top: 0.85rem;
}

.zwlib-modal-card input[type="text"],
.zwlib-modal-card input[type="number"],
.zwlib-modal-card select,
.zwlib-modal-card textarea {
  width: 100%;
  appearance: none;
  background: var(--pale-mist);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-input);
}

.zwlib-modal-card input[type="text"],
.zwlib-modal-card input[type="number"],
.zwlib-modal-card select {
  box-sizing: border-box;
  height: var(--ctrl-h);
}

.zwlib-modal-card textarea {
  resize: vertical;
  min-height: 3.8rem;
  line-height: 1.45;
  height: auto;
}

.zwlib-modal-card select + textarea {
  margin-top: 0.75rem;
}

.zwlib-modal-card input[type="text"]:focus,
.zwlib-modal-card input[type="number"]:focus,
.zwlib-modal-card select:focus,
.zwlib-modal-card textarea:focus {
  outline: none;
  border-color: var(--line-strong);
}

/* 上下留白同排盘表单 0.35rem：0.45rem 时字比内框高，被往下挤、不居中 */
.zwlib-modal-card select {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  padding-right: 1.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b6b6b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

.zwlib-modal-card .zw-jifa-modal {
  margin-bottom: 0.6rem;
  padding: 0;
  border: 0;
  background: none;
}

.zwlib-modal-card .zw-jifa-modal .zw-jifa-pick {
  gap: 0.6rem;
}

.zwlib-modal-card .zw-jifa-modal select {
  padding: 0.35rem 1.8rem 0.35rem 0.75rem;
  background-color: var(--pale-mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-input);
}

.zwlib-modal-card .zw-jifa-modal select:focus {
  border-color: var(--line-strong);
}

.zwlib-modal-card #zwlearn-jifa-insert {
  margin-bottom: 0.75rem;
}

.zwlib-modal-card .check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0;
  color: var(--ink);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.zwlib-modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-top: 1rem;
}

#zwlib-modal .zwlib-modal-cal {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.35rem;
}

#zwlib-modal .zwlib-modal-cal {
  margin: 0;
}

#zwlib-modal .zwlib-modal-cal label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  width: auto;
  margin: 0;
  cursor: pointer;
}

#zwlib-modal .zwlib-modal-cal input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

#zwlib-modal .zwlib-modal-cal span {
  display: block;
  padding: 0.28rem 0.85rem;
  border: 0;
  background: var(--bg-2);
  color: var(--fog);
  letter-spacing: 0;
  border-radius: var(--radius-pill);
}

#zwlib-modal .zwlib-modal-cal label + label span {
  border-left: none;
}

#zwlib-modal .zwlib-modal-cal input:checked + span {
  color: var(--page);
  border-color: transparent;
  background: var(--ink);
}

#zwlib-modal .zwlib-modal-cal label:first-child span,
#zwlib-modal .zwlib-modal-cal label:last-child span {
  border-radius: var(--radius-pill);
}

.zwlib-modal-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.45rem;
}

.zwlib-modal-actions .btn {
  margin: 0;
  width: 100%;
}

#zwlib-modal .note-close {
  top: 1.15rem;
  right: 1.15rem;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
}

#zwlib-empty {
  margin: 0.7rem 0 0;
  color: var(--mute);
  font-size: 0.82rem;
  line-height: 1.5;
}

#zwlib-empty[hidden] {
  display: none;
}

.zwlib-pager {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.zwlib-pager[hidden] {
  display: none;
}

.zwlib-pager .btn {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0.32rem 0.55rem;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
}

.zwlib-pager .btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.zwlib-page-info {
  flex: 0 0 auto;
  min-width: 3.2rem;
  text-align: center;
  color: var(--fog);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.note-close {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  z-index: 5;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--mute);
  font-family: var(--font-body);
  font-size: 1.25rem;
  line-height: 1;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.note-close:hover,
.note-close:focus-visible {
  color: var(--ink);
  outline: none;
  background: var(--bg-2);
}

.zw-cal {
  display: flex;
  gap: 0.35rem;
}

.form-block .zw-cal label {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.zw-cal input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.zw-cal span {
  display: block;
  padding: 0.28rem 0.85rem;
  border: 0;
  background: var(--bg-2);
  color: var(--fog);
  letter-spacing: 0;
  border-radius: var(--radius-pill);
}

.zw-cal label + label span {
  border-left: none;
}

.zw-cal input:checked + span {
  color: var(--page);
  border-color: transparent;
  background: var(--ink);
}

.zw-cal label + label input:checked + span {
  box-shadow: none;
}

.zw-cal input:focus-visible + span {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.zw-cell.is-scope {
  background: rgba(226, 59, 47, 0.05);
}

.zw-plate {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}

.zw-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.28rem;
  /* 方向标在宫格外，上下左右留出箭头之外的位置 */
  padding: 1.15rem;
}

.zw-fly {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 5;
}

.zw-periods {
  max-width: 920px;
  margin: 0.7rem auto 0;
}

.zw-period {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: 0.35rem;
}

.zw-period + .zw-period {
  margin-top: 0.35rem;
}

.zw-period-name {
  color: var(--fog);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.zw-dafu .zw-dafu-text {
  grid-column: 2;
}

.zw-dafu-text {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--ink);
}

.zw-dafu-text span {
  display: block;
}

.zw-dafu-text .zw-sex-m,
.zw-dafu-text .zw-sex-f {
  font-weight: 600;
}

.zw-dafu-text .zw-sex-m {
  color: var(--magic-blue);
}

.zw-dafu-text .zw-sex-f {
  color: #e83e8c;
}

.zw-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 0.28rem;
  overflow-x: auto;
  padding-left: 1px;
  padding-bottom: 0.12rem;
  scrollbar-width: thin;
}

#zw-result.is-shot .zw-tabs {
  overflow-x: hidden;
  padding-bottom: 0;
  padding-right: 0 !important;
  scrollbar-width: none;
}

#zw-result.is-shot .zw-tabs::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.zw-tab {
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  background: var(--pale-cool);
  color: var(--ink);
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
  padding: 0.28rem 0.48rem;
  white-space: nowrap;
  cursor: pointer;
}

.zw-tab.is-on {
  color: var(--blue);
  border-color: var(--blue);
  background: var(--blue-soft);
}

.zw-cell,
.zw-core {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-input);
  min-width: 0;
}

.zw-cell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 8.4rem;
  padding: 0.28rem 0.32rem 0.22rem;
  font-size: 0.78rem;
  line-height: 1.3;
  cursor: pointer;
}

.zw-cell.is-ming {
  box-shadow: inset 0 0 0 1px #6b6b6b;
}

.zw-cell.is-hua-probe {
  border-color: var(--blue);
  background: var(--blue-soft);
  box-shadow: none;
}

.zw-at-si { grid-area: 1 / 1; }
.zw-at-wu { grid-area: 1 / 2; }
.zw-at-wei { grid-area: 1 / 3; }
.zw-at-shen { grid-area: 1 / 4; }
.zw-at-chen { grid-area: 2 / 1; }
.zw-at-you { grid-area: 2 / 4; }
.zw-at-mao { grid-area: 3 / 1; }
.zw-at-xu { grid-area: 3 / 4; }
.zw-at-yin { grid-area: 4 / 1; }
.zw-at-chou { grid-area: 4 / 2; }
.zw-at-zi { grid-area: 4 / 3; }
.zw-at-hai { grid-area: 4 / 4; }

.zw-core {
  grid-area: 2 / 2 / 4 / 4;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.7rem 0.45rem;
  text-align: center;
}

.zw-core span {
  color: var(--ink);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.zw-core-name {
  font-weight: 600;
  font-size: 0.88rem !important;
}

.zw-dir {
  position: absolute;
  z-index: 2;
  color: #c2c2c2;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

.zw-at-si .zw-dir,
.zw-at-wu .zw-dir,
.zw-at-wei .zw-dir,
.zw-at-shen .zw-dir {
  top: -1px;
  right: -1px;
  transform: translate(0, calc(-100% - 0.18rem));
}

.zw-at-yin .zw-dir,
.zw-at-chou .zw-dir,
.zw-at-zi .zw-dir,
.zw-at-hai .zw-dir {
  bottom: -1px;
  right: -1px;
  transform: translate(0, calc(100% + 0.18rem));
}

.zw-at-chen .zw-dir,
.zw-at-mao .zw-dir,
.zw-at-you .zw-dir,
.zw-at-xu .zw-dir {
  top: -1px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.16em;
}

.zw-at-chen .zw-dir,
.zw-at-mao .zw-dir {
  left: 0;
  transform: translate(calc(-100% - 0.18rem), 0);
}

.zw-at-you .zw-dir,
.zw-at-xu .zw-dir {
  right: 0;
  transform: translate(calc(100% + 0.18rem), 0);
}

.zw-stars {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.2rem 0.28rem;
  flex: 1;
  min-height: 2.4rem;
  margin: 0.15rem 0 0.3rem;
}

.zw-star {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 600;
  line-height: 1.05;
}

.zw-name {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: 0.14em;
  font-size: 1.18em;
  white-space: nowrap;
}

.zw-star.is-minor {
  font-weight: 400;
  color: var(--fog);
  font-size: 0.86em;
}

.zw-hua {
  font-family: var(--font-latin);
  font-style: normal;
  margin: 0.08em 0 0;
  font-size: 1.55em;
  font-weight: 400;
  line-height: 1;
  color: var(--red);
  text-align: center;
}

.zw-star.is-hua-probe .zw-name {
  color: #fff;
}

.zw-star.is-hua-probe.is-A .zw-name {
  background: #27d271;
  box-shadow: 0 0 0 0.1em #27d271;
}

.zw-star.is-hua-probe.is-B .zw-name {
  background: #88a5ff;
  box-shadow: 0 0 0 0.1em #88a5ff;
}

.zw-star.is-hua-probe.is-C .zw-name {
  background: #00ccfa;
  box-shadow: 0 0 0 0.1em #00ccfa;
}

.zw-star.is-hua-probe.is-D .zw-name {
  background: #ff8042;
  box-shadow: 0 0 0 0.1em #ff8042;
}

.zw-foot {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 0.15rem;
}

.zw-gz {
  color: var(--fog);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1.15;
}

.zw-limit {
  text-align: center;
  font-size: 0.68rem;
}

.zw-limit b {
  display: block;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.zw-limit i {
  font-style: normal;
  color: var(--fog);
}

.zw-nian {
  display: block;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--blue);
}

.zw-nian[hidden] {
  display: none;
}

.zw-nian {
  white-space: nowrap;
}

.zw-nian-month {
  color: var(--fog);
  font-weight: 400;
}

.zw-role {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: right;
  white-space: nowrap;
}

.zw-cell.is-ming .zw-role {
  color: var(--blue);
}

.zw-laiyin {
  margin-left: auto;
  writing-mode: vertical-rl;
  text-orientation: upright;
  color: var(--red);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  align-self: flex-start;
}

.zw-flow {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--mute);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}

@media (max-width: 760px) {
  #zw-result .zwlib-tags,
  #zwlearn-result .zwlib-tags {
    margin-right: 4.9rem;
  }

  .zw-cell {
    height: 10.5rem;
    font-size: 0.68rem;
    padding: 0.2rem 0.16rem 0.16rem;
  }

  .zw-foot {
    margin-top: auto;
  }

  .zw-limit {
    min-height: 2.5rem;
  }

  .zw-limit-end {
    display: block;
  }

  .zw-core span,
  .zw-limit,
  .zw-gz {
    font-size: 0.62rem;
  }

  .zw-core-name {
    font-size: 0.7rem !important;
  }

  .zw-tab,
  .zw-period-name {
    font-size: 0.62rem;
  }
}

/* 放在文件末尾：四化/个案/研究/玄空手机端改 flex，避免 grid-areas 继续生成第二列、iPhone 上被输入框撑宽 */
@media (max-width: 760px) {
  #zw-layout,
  #zw-layout.is-compose,
  #zwlearn-layout,
  #zwresearch-layout,
  #bazi-layout,
  #xk-layout,
  #lg-layout,
  #xl-layout {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-areas: none;
    gap: 1.25rem;
  }

  #zw-layout > *,
  #zwlearn-layout > *,
  #zwresearch-layout > *,
  #bazi-layout > *,
  #xk-layout > *,
  #lg-layout > *,
  #xl-layout > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
  }

  #zw-layout > .zw-left {
    order: 0;
  }

  #zw-layout > #zw-result {
    order: 1;
  }

  #zw-layout > #zwlib-side {
    order: 2;
  }

  #bazi-layout > #bazilib-side {
    order: 1;
  }

  .zw-left,
  .zwlearn-left,
  .zwresearch-left,
  #xk-side,
  .lg-side,
  .xl-side {
    width: 100%;
    max-width: none;
  }

  .lg-side {
    display: contents;
  }

  .lg-legend {
    order: 1;
  }

  .luoshu-wrap,
  .luoshu {
    max-width: none;
    width: 100%;
  }
}

/* ---------- 形峦类象 ---------- */

#xl-layout {
  grid-template-areas: "side result";
}

.xl-side {
  grid-area: side;
  align-self: start;
  width: 100%;
  max-width: none;
}

#xl-result {
  grid-area: result;
  min-width: 0;
}

.xl-block {
  margin: 0;
}

.xl-block[hidden] {
  display: none;
}

.xl-block .hint {
  margin: 0.15rem 0 0.85rem;
  color: var(--fog);
  font-size: 0.92rem;
}

.xl-sub {
  margin: 1.15rem 0 0.55rem;
  font-family: var(--font-latin);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fog);
}

.xl-year-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem 0.55rem;
}

.xl-year {
  margin: 0;
}

.xl-year figcaption {
  margin: 0 0 0.28rem;
  font-family: var(--font-latin);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--fog);
}

.xl-year.is-now figcaption {
  color: var(--blue);
}

.xl-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  aspect-ratio: 1;
  padding: 3px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.xl-year.is-now .xl-mini {
  border-color: var(--blue);
}

.xl-mini-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pale-mist);
  font-family: var(--font-latin);
  font-size: clamp(0.7rem, 1.6vw, 0.88rem);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}

.xl-mini-cell.is-erwu {
  color: var(--red);
}

.xl-gua-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.xl-gua-board {
  margin: 0;
}

.xl-gua-board figcaption {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.xl-gua {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  aspect-ratio: 1;
}

.xl-gua span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.xl-gua span b {
  font-size: 1.35rem;
  font-weight: 400;
  line-height: 1;
}

.xl-gua span.is-strong {
  font-weight: 600;
}

.xl-gua span.is-center {
  background: #fff;
  border-color: var(--line-strong);
  letter-spacing: 0.16em;
}

.xl-scroll {
  overflow-x: auto;
  margin: 0 0 1.1rem;
}

.xl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  line-height: 1.5;
}

.xl-table th,
.xl-table td {
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.xl-table th {
  color: var(--fog);
  font-weight: 500;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.xl-table td strong {
  display: block;
  font-weight: 600;
}

.xl-table td small {
  display: block;
  margin-top: 0.12rem;
  color: var(--fog);
  font-size: 0.78rem;
}

.xl-sand-block {
  margin: 0 0 0.85rem;
  padding: 0.9rem 0.95rem 1rem;
  border: 1px solid var(--line);
  background: var(--bg);
}

.xl-sand-block h4 {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.xl-sand-block p {
  margin: 0 0 0.7rem;
  color: var(--ink);
  line-height: 1.75;
}

.xl-sand-block p:last-child {
  margin-bottom: 0;
}

.xl-sand-note {
  padding: 0.65rem 0.75rem;
  background: var(--bg-2);
  border-left: 2px solid var(--blue);
}

.xl-wares.is-levels {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0.7rem;
}

.xl-wares.is-sand {
  margin-bottom: 0.7rem;
}

.xl-def {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.xl-wares {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem 0.75rem;
  counter-reset: xl-ware;
}

.xl-wares li,
.xl-def {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-height: 4.5rem;
  padding: 0.7rem 0.8rem 0.75rem 2.15rem;
  border: 1px solid var(--line);
  background: var(--bg-2);
  line-height: 1.5;
}

.xl-def {
  min-height: 0;
  padding: 0.7rem 0.8rem 0.75rem;
}

.xl-wares li::before {
  content: counter(xl-ware, decimal-leading-zero);
  counter-increment: xl-ware;
  position: absolute;
  left: 0.55rem;
  top: 0.78rem;
  font-family: var(--font-latin);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mute);
}

.xl-wares b {
  font-weight: 600;
  letter-spacing: 0.06em;
}

.xl-wares span {
  color: var(--fog);
  font-size: 0.88rem;
  line-height: 1.55;
}

@media (max-width: 760px) {
  .xl-year-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl-gua-row,
  .xl-wares,
  .xl-wares.is-levels {
    grid-template-columns: 1fr;
  }
}

/* ---------- Login form ---------- */
#login-form input[type="password"] {
  width: 100%;
  appearance: none;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-input);
  transition: border-color 0.2s;
  box-sizing: border-box;
  height: var(--ctrl-h);
}

#login-form input[type="password"]:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--blue-soft);
}

/* ---------- 八字（紫微斗数 · 八字）：卡片外框同左边命盘库，盘里不要线框（用户 2026-10-14 定），选中格只留底色 ---------- */
#bazi-result {
  min-width: 0;
}

.bazi-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1.1rem;
  padding-right: 1.4rem;
}

.bazi-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.45rem;
}

.bazi-name {
  font-family: var(--font-brand);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--ink);
}

.bazi-zao {
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--fog);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  line-height: 1.4;
}

.bazi-birth {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--ink);
}

.bazi-birth span {
  color: var(--fog);
  letter-spacing: 0.14em;
}

.bazi-head .hint {
  margin: 0.3rem 0 0;
}

.bazi-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}

.bazi-table {
  width: 100%;
  min-width: 34rem;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
  color: var(--ink);
}

.bazi-table th,
.bazi-table td {
  padding: 0.34rem 0.25rem;
  font-weight: 400;
  vertical-align: top;
}

.bazi-table thead th {
  color: var(--fog);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.bazi-table tr > :nth-child(5) {
  border-right: 1px solid var(--line);
}

.bazi-table thead th:first-child,
.bazi-table tbody th {
  width: 3.6rem;
  padding-left: 0;
  text-align: left;
  color: var(--fog);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

/* 手机多半连不上 Google Fonts：十天干十二地支 + 「小运」用站内的 Noto Serif SC 600 子集，电脑手机字一样 */
@font-face {
  font-family: "Bazi Ganzhi";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../fonts/bazi-ganzhi.woff2?v=2") format("woff2");
  unicode-range: U+4E01, U+4E11, U+4E19, U+4E59, U+4EA5, U+5348, U+536F, U+58EC, U+5B50, U+5BC5, U+5C0F, U+5DF1, U+5DF3, U+5E9A, U+620A, U+620C, U+672A, U+7532-7533, U+7678, U+8F9B, U+8FB0, U+8FD0, U+9149;
}

.bazi-big th,
.bazi-big td {
  vertical-align: middle;
}

.bazi-big td {
  font-family: "Bazi Ganzhi", var(--font-brand);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.15;
}

.bazi-table td span {
  display: block;
  white-space: nowrap;
}

.bazi-sha-toggle {
  display: inline-flex;
  align-items: center;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

/* 旋转后看得见的折角只占方块一半，上下挪 0.1rem 让折角本身对准字中线 */
.bazi-sha-arrow {
  flex: none;
  width: 0.28rem;
  height: 0.28rem;
  margin-left: 0.2rem;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: translateY(-0.1rem) rotate(45deg);
}

.bazi-sha-arrow.is-open {
  transform: translateY(0.1rem) rotate(-135deg);
}

/* 八字页五行配色独立于全站（用户 2026-10-14 给问真截图取色），不要换成 --magic-* 等全站色 */
#panel-zw-bazi {
  --bazi-wood: #3a9e49;
  --bazi-fire: #e34242;
  --bazi-earth: #966f4c;
  --bazi-metal: #e5ab39;
  --bazi-water: #74a0ff;
}

.bazi-wx-0 { color: var(--bazi-wood); }
.bazi-wx-1 { color: var(--bazi-fire); }
.bazi-wx-2 { color: var(--bazi-earth); }
.bazi-wx-3 { color: var(--bazi-metal); }
.bazi-wx-4 { color: var(--bazi-water); }

.bazi-table td span b {
  font-weight: inherit;
}

.bazi-qiyun {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.8rem 0 0.4rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.bazi-qiyun .zw-dafu-text:last-child {
  text-align: right;
  flex: 0 0 auto;
}

.bazi-period-name {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* 跟流年格最后一行小运干支同一行：条底 0.04rem + 格底 0.16rem */
.bazi-period-sub {
  position: absolute;
  left: 0;
  bottom: 0.1rem;
  line-height: 1.3;
}

.bazi-strip {
  display: flex;
  gap: 0.12rem;
  overflow-x: auto;
  padding-bottom: 0.04rem;
  scrollbar-width: thin;
}

.bazi-periods .zw-period {
  grid-template-columns: 1.9rem minmax(0, 1fr);
  column-gap: 0.2rem;
}

.bazi-periods .zw-period + .zw-period {
  margin-top: 0.6rem;
}

.bazi-cell {
  flex: 0 0 auto;
  min-width: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0.1rem 0.22rem 0.08rem;
  background: none;
  border: 0;
  border-radius: var(--radius-input);
  color: var(--ink);
  font: inherit;
  font-size: 0.72rem;
  line-height: 1.22;
}

button.bazi-cell {
  cursor: pointer;
}

.bazi-cell.is-on {
  background: var(--blue-soft);
}

.bazi-cell.is-xiao,
.bazi-cell.is-xiao b,
.bazi-cell.is-xiao i {
  color: var(--fog);
}

.bazi-gz {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  white-space: nowrap;
}

.bazi-gz b {
  font-family: "Bazi Ganzhi", var(--font-brand);
  font-size: 1rem;
  font-weight: 600;
}

.bazi-gz i {
  font-style: normal;
  font-size: 0.66rem;
  color: var(--fog);
}

/* 手机：主表 7 列整张放进卡片，不左右滑（用户 2026-10-14 定）；运程三行照旧滑 */
@media (max-width: 760px) {
  .bazi-scroll {
    overflow-x: visible;
  }

  .bazi-table {
    min-width: 0;
    font-size: 0.64rem;
  }

  .bazi-table th,
  .bazi-table td {
    padding: 0.3rem 0.04rem;
  }

  .bazi-table thead th,
  .bazi-table thead th:first-child,
  .bazi-table tbody th {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
  }

  .bazi-table thead th:first-child,
  .bazi-table tbody th {
    width: 2.3rem;
  }

  .bazi-big td {
    font-size: 1.45rem;
  }
}

@media (max-width: 374px) {
  .bazi-table {
    font-size: 0.58rem;
  }

  .bazi-table td span {
    white-space: normal;
  }
}