/*
 * 共用组件与响应式布局。加载于各工具的盘面样式之后。
 * 盘面专属结构继续由各模块维护；这里仅组织页面与阅读层级。
 */
body.tool-page { background: var(--ui-bg); color: var(--ui-text); line-height: 1.65; overflow-x: visible; }
body::before, body::after, body[data-tool="tarot"] > .sky, body[data-tool="astrology"] > .sky { display: none; }
body > #app.app-shell, body > main#app, body.tool-page > .shell {
  width: min(100%, 1120px); max-width: 1120px; min-width: 0;
  margin: 0 auto; padding: 16px max(24px, env(safe-area-inset-right)) 64px max(24px, env(safe-area-inset-left));
  animation: none;
}
.app-shell > *, .xp-page > *, .xp-grid2 > *, .xp-grid3 > *, .meta-grid > * { min-width: 0; }
.topbar, .xp-top {
  min-height: 72px; position: sticky; top: 0; z-index: 30;
  background: var(--ui-bg); border-bottom: 1px solid var(--ui-border);
  margin: 0 0 24px; padding: 12px 0; box-shadow: none; backdrop-filter: none;
}
.xp-title b, .tb-zh { font: 600 21px/1.5 var(--ui-serif); letter-spacing: .04em; color: var(--ui-heading); background: none; -webkit-text-fill-color: currentColor; }
.xp-title span, .tb-en { color: var(--ui-muted); font-size: .75rem; letter-spacing: .08em; line-height: 1.6; }
.xp-back, .xp-next, .back { color: var(--ui-primary); font-size: .875rem; text-decoration: none; }
.xp-back, .xp-next { padding: 10px 0; }
.back { width: 40px; height: 40px; min-height: 40px; display: grid; place-items: center; border: 1px solid var(--ui-border); border-radius: 10px; background: white; font-size: 25px; }
.tb-flower, .cb-flower { display: none; }
.tb-sub { color: var(--ui-muted); text-align: left; letter-spacing: .02em; font-size: .875rem; margin: -6px 0 24px; }
.card, .xp-card, .panel, .ref, .guide-card, .ty-card, .primary-gua, .gua-card {
  background: var(--ui-surface); border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius); box-shadow: var(--ui-shadow);
}
.card, .xp-card { margin: 0 0 24px; padding: 28px; }
.xp-hero { padding: 24px; background: transparent; border-color: transparent; box-shadow: none; }
.xp-hero h1 { color: var(--ui-heading); font: 600 28px/1.55 var(--ui-serif); letter-spacing: .03em; margin: 0 0 12px; }
.xp-hero p { color: var(--ui-muted); font-size: .9375rem; line-height: 1.95; }
.xp-seal { width: 56px; height: 56px; border-radius: 14px; background: var(--ui-primary-soft); color: var(--ui-primary); border: 1px solid var(--ui-primary-line); box-shadow: none; text-shadow: none; }
.xp-result-head .xp-seal { color: white; }
.xp-result-head .xp-seal:not([style]) { color: var(--ui-primary); }
.xp-result-head h1, .xp-result-head h2 { font-family: var(--ui-serif); color: var(--ui-heading); letter-spacing: .03em; }
.result-hero { border-bottom: 1px solid var(--ui-border); margin-bottom: 24px; padding-bottom: 24px; }
.rh-name { color: var(--ui-heading); font-size: 30px; letter-spacing: .04em; text-shadow: none; }
.rh-sub, .note, .hint, .foot-note, .xp-note { color: var(--ui-muted); font-size: .875rem; line-height: 1.85; }
.rh-sub { margin-top: 10px; }
.xp-note { margin-top: 12px; }
.foot-note { text-align: center; }
.xp-form { gap: 22px; }
.xp-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.xp-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.xp-field { gap: 8px; }
.xp-field label, .fld-l, .field-label, label.fld > span { font: 500 .875rem/1.6 var(--ui-sans); color: var(--ui-text); letter-spacing: 0; }
.fld.block { margin-bottom: 22px; }
.fld input, .fld select, .fld textarea, .xp-field input, .xp-field select, .xp-field textarea,
.num-grid input, .q-input, .lib-search, .key-row input, .gate-box input, .xzai-modal input,
body[data-tool="admin"] input:not([type="checkbox"]), body[data-tool="admin"] select, body[data-tool="admin"] textarea {
  min-height: 46px; max-width: 100%; border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm); background: white; color: var(--ui-text);
  padding: 10px 12px; font-size: 1rem; line-height: 1.5; box-shadow: none;
  transition: border-color .16s, box-shadow .16s;
}
.xp-field input:focus, .xp-field select:focus, .xp-field textarea:focus, .fld input:focus,
.fld select:focus, .q-input:focus, .lib-search:focus, .xzai-modal input:focus,
body[data-tool="admin"] input:focus, body[data-tool="admin"] textarea:focus {
  outline: 0; border-color: var(--ui-primary); box-shadow: 0 0 0 3px var(--ui-primary-soft);
}
input[type="date"], input[type="datetime-local"], input[type="time"] { color-scheme: light; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator { filter: none; opacity: .65; }
.xz-time-tools { margin-top: 8px; gap: 6px; }
.xz-time-tools button { min-height: 32px; padding: 4px 10px; font-size: .8125rem; border-radius: 7px; border: 1px solid var(--ui-border); background: white; color: var(--ui-muted); letter-spacing: 0; }
.xz-time-tools .xz-time-primary { color: var(--ui-primary); background: var(--ui-primary-soft); border-color: var(--ui-primary-line); }
.xp-seg, .seg, .result-tabs { gap: 6px; }
.xp-seg button, .xp-chip, .seg-btn, .rt-btn, .chip, .dong-chip { min-height: 42px; border: 1px solid var(--ui-border); border-radius: 9px; color: var(--ui-muted); background: white; font-size: .875rem; box-shadow: none; }
.xp-seg button.on, .xp-chip.on, .seg-btn.on, .rt-btn.on, .dong-chip.on,
.chip.active, .spread-card.active, .lib-filter.active, .tool-tabs button.active,
.tabbar .tab.active, .tabs .tab.active {
  color: var(--ui-primary-hover); background: var(--ui-primary-soft);
  border-color: var(--ui-primary-line); box-shadow: none; font-weight: 600;
}
.cast-btn, .solid, .xp-submit, .xp-solid, .main-btn, button.btn.primary,
.gate-box button, .xz-ai-panel .xzai-run, .result-actions > .xz-action-primary, .xp-actions > .xz-action-primary,
.sk-btn.primary, .xzai-modal button.primary {
  min-height: 48px; height: auto; padding: 12px 20px; border: 1px solid var(--ui-primary);
  border-radius: var(--ui-radius-sm); background: var(--ui-primary); color: white;
  font: 600 1rem/1.5 var(--ui-sans); letter-spacing: .04em; box-shadow: none; text-shadow: none;
  transition: background .18s, border-color .18s;
}
.cast-btn:hover, .solid:hover, .xp-submit:hover, .xp-solid:hover, .main-btn:hover,
button.btn.primary:hover, .gate-box button:hover, .xz-ai-panel .xzai-run:hover,
.result-actions > .xz-action-primary:hover, .xp-actions > .xz-action-primary:hover {
  background: var(--ui-primary-hover); border-color: var(--ui-primary-hover); filter: none;
}
.ghost, .ghost-btn, .xp-ghost, .icon-btn, .mini, .xz-ai-panel .xzai-copy, .xz-ai-panel .xzai-regen {
  min-height: 42px; padding: 9px 14px; border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm); background: white; color: var(--ui-text); box-shadow: none;
  font-size: .875rem; letter-spacing: 0;
}
.ghost:hover, .ghost-btn:hover, .xp-ghost:hover { border-color: var(--ui-primary); color: var(--ui-primary); background: var(--ui-primary-soft); }
.xp-tabs { top: 72px; background: var(--ui-bg); padding: 8px 0 16px; margin: 0; gap: 8px; backdrop-filter: none; border: none; }
.xp-tabs button { min-height: 42px; border-radius: 9px; background: white; color: var(--ui-muted); border: 1px solid var(--ui-border); font-size: .875rem; letter-spacing: 0; }
.xp-tabs button.on { background: var(--ui-primary-soft); color: var(--ui-primary); border-color: var(--ui-primary-line); }
.result-tabs { box-shadow: none; background: transparent; border: 0; padding: 0; margin-bottom: 20px; }
.sec-h, .xp-section-title { color: var(--ui-heading); font: 600 18px/1.6 var(--ui-sans); letter-spacing: .02em; margin: 24px 0 16px; text-shadow: none; }
.sec-h::before, .xp-section-title::before { background: var(--ui-primary); box-shadow: none; }
.narrative, .xp-note, .xzai-out { overflow-wrap: anywhere; }
.narrative p, .xp-para { font: 1rem/1.95 var(--ui-sans); color: var(--ui-text); max-width: 76ch; }
.meta-grid, .xp-meta { gap: 16px; }
.meta-grid > div, .xp-meta > div, .xp-mini, .bs-main > div { background: var(--ui-surface-soft); border: 1px solid var(--ui-border); border-radius: 10px; box-shadow: none; padding: 14px 16px; }
.meta-grid span, .xp-meta span, .xp-mini > span { color: var(--ui-muted); font-size: .8125rem; }
.meta-grid b, .xp-meta b { color: var(--ui-heading); font-size: 1rem; line-height: 1.7; font-variant-numeric: tabular-nums; }
.bazi-solar-box, .bazi-solar-box.off { background: var(--ui-surface-soft); border-color: var(--ui-border); border-radius: 12px; padding: 16px; box-shadow: none; }
.bs-head b { color: var(--ui-text); font: 600 .9375rem/1.6 var(--ui-sans); letter-spacing: 0; }
.bs-head span, .bs-switch span { font-size: .8125rem; }
.xz-query-show { background: var(--ui-primary-soft); border: 1px solid var(--ui-primary-line); box-shadow: none; border-radius: 10px; padding: 12px 16px; }
.xz-query-show span, .xz-query-show b { color: var(--ui-primary-hover); font-family: var(--ui-sans); }
.qm-cell, .zw-cell, .lr-cell { box-shadow: none; background: white; border-color: var(--ui-border); }
.qm-center, .zw-center, .lr-center { background: var(--ui-primary-soft); }
.xp-table, .ly-board, .qm-board { border-color: var(--ui-border); border-radius: 12px; }
.xp-row, .ly-row { border-color: var(--ui-border); }
.xp-row.head, .ly-row.head { background: var(--ui-surface-soft); }
.xp-cell { font-size: .875rem; padding-top: 12px; padding-bottom: 12px; }
.xp-big { font-size: 30px; line-height: 1.4; }
.result-actions, .xp-actions { position: static; display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 24px 0; background: transparent; box-shadow: none; }
.result-actions > button, .xp-actions > button { flex: 1 1 140px; min-height: 46px; }
.xz-fab { left: auto; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); }
.xz-fab button { width: 42px; height: 42px; border: 1px solid var(--ui-border); background: white; color: var(--ui-primary); box-shadow: var(--ui-shadow); backdrop-filter: none; }
.xz-fab button:hover { border-color: var(--ui-primary-line); box-shadow: var(--ui-shadow-raised); }
.toast, .xz-toast, .xzc-toast { color: white; background: #28494f; border-color: transparent; box-shadow: var(--ui-shadow-raised); border-radius: 10px; font-size: .875rem; }

/* AI 解读与卡密输入，沿用同一组表面与强调色。 */
.xz-ai-panel { --bad: var(--ui-danger); --good: var(--ui-success); background: white; border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow); padding: 26px; }
.xz-ai-panel::before { background: var(--ui-primary); left: 26px; right: auto; width: 40px; height: 2px; }
.xz-ai-panel .xzai-mark { color: var(--ui-primary); background: var(--ui-primary-soft); border: 1px solid var(--ui-primary-line); border-radius: 10px; box-shadow: none; animation: none; text-shadow: none; }
.xz-ai-panel .xzai-titles h3 { font: 600 20px/1.5 var(--ui-sans); letter-spacing: 0; }
.xz-ai-panel .xzai-out { font: 1rem/1.9 var(--ui-sans); color: var(--ui-text); }
.xz-ai-panel .xzai-out .xzai-ol > li::before { background: var(--ui-primary-soft); color: var(--ui-primary); }
.xz-ai-panel .xzai-bq { background: var(--ui-primary-soft); border-left-color: var(--ui-primary); color: var(--ui-text); }
.xzai-mask, .xzc-modal-mask, .modal-mask, .xz-imgsave-mask { background: rgb(26 48 55 / 28%); backdrop-filter: blur(4px); }
.xzai-modal, .modal, .xzc-modal .card { background: white; border-color: var(--ui-border); color: var(--ui-text); box-shadow: var(--ui-shadow-raised); }
.xzai-modal h3 { color: var(--ui-heading); }
.xzai-modal .xzai-gate-link { color: var(--ui-primary); background: var(--ui-primary-soft); border: 1px solid var(--ui-primary-line); box-shadow: none; }

/* 塔罗：保留牌面图案与抽牌流程，移除界面大面积星空和金属装饰。 */
body[data-tool="tarot"] .hero { padding: 20px 0 28px; }
body[data-tool="tarot"] .hero-title { color: var(--ui-heading); background: none; -webkit-text-fill-color: currentColor; text-shadow: none; letter-spacing: .04em; font-size: 32px; }
body[data-tool="tarot"] .hero-kicker, body[data-tool="tarot"] .hero-sub { color: var(--ui-muted); letter-spacing: .04em; }
body[data-tool="tarot"] .brand-title { color: var(--ui-heading); }
body[data-tool="tarot"] .sigil { background: var(--ui-primary-soft); border-color: var(--ui-primary-line); color: var(--ui-primary); box-shadow: none; }
body[data-tool="tarot"] .panel { padding: 24px; margin-bottom: 24px; }
body[data-tool="tarot"] .daily, .gauge-card, .radar-card, .read-item, .action-block { background: white; border: 1px solid var(--ui-border); box-shadow: none; }
body[data-tool="tarot"] .spread-card { background: white; border-color: var(--ui-border); }
body[data-tool="tarot"] .spread-card.active { background: var(--ui-primary-soft); border-color: var(--ui-primary-line); }
body[data-tool="tarot"] .read-mean, body[data-tool="tarot"] .ld-text { font-size: 1rem; line-height: 1.9; color: var(--ui-text); }
body[data-tool="tarot"] .switch { background: var(--ui-border); }
body[data-tool="tarot"] .switch.on { background: var(--ui-primary); }
body[data-tool="tarot"] .switch::after { background: white; }

/* 后台：更宽的工作区、清晰表格与克制的指标卡。 */
body[data-tool="admin"] { padding: 0 24px 64px; }
body[data-tool="admin"] .wrap { max-width: 1180px; }
body[data-tool="admin"] header.top { padding: 36px 0 24px; }
body[data-tool="admin"] header.top h1 { color: var(--ui-heading); font-size: 30px; }
body[data-tool="admin"] .grid { gap: 22px; }
body[data-tool="admin"] .card { margin-top: 24px; }
body[data-tool="admin"] .card > .desc { font-size: .875rem; margin-bottom: 24px; }
body[data-tool="admin"] .tabbar { background: var(--ui-surface-soft); border-color: var(--ui-border); padding: 5px; gap: 6px; }
body[data-tool="admin"] .tabbar .tab { min-height: 42px; }
body[data-tool="admin"] .channel-rank, body[data-tool="admin"] .gate-box .seal { background: var(--ui-primary-soft); color: var(--ui-primary); border: 1px solid var(--ui-primary-line); box-shadow: none; border-radius: 12px; }
body[data-tool="admin"] .channel-item { background: white; }
body[data-tool="admin"] .channel-item.active { background: var(--ui-primary-soft); border-color: var(--ui-primary-line); }
body[data-tool="admin"] .switch .track { background: var(--ui-border); }
body[data-tool="admin"] .switch input:checked + .track { background: var(--ui-primary); }
body[data-tool="admin"] .switch .track::after { background: white; }
body[data-tool="admin"] .switch input:focus-visible + .track { outline: 3px solid var(--ui-primary-line); outline-offset: 3px; }
body[data-tool="admin"] #gate { background: var(--ui-bg); }
body[data-tool="admin"] .gate-box { background: white; border: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-raised); padding: 36px; border-radius: 20px; }
body[data-tool="admin"] .gate-box input { text-align: left; letter-spacing: normal; }
.xzdash { --xz-ink: var(--ui-bg); --xz-paper: var(--ui-text); --xz-gold: var(--ui-primary); --xz-gold-soft: var(--ui-primary); --xz-gold-bright: var(--ui-heading); --xz-muted: var(--ui-muted); --xz-num: var(--ui-sans); }
.xzdash .metric, .xzdash .panel { background: white; box-shadow: none; border-color: var(--ui-border); }
.xzdash .metric::after { display: none; }
.xzdash .metric .val { font-size: 36px; color: var(--ui-heading); font-variant-numeric: tabular-nums; line-height: 1.3; }
.xzdash .tip { background: white; box-shadow: var(--ui-shadow-raised); }
.xzdash th, .xzcards th { background: var(--ui-surface-soft); }
.xzcards .row-acts button { min-height: 34px; }

@media (min-width: 960px) {
  .xp-page:has(> .xp-form) { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.7fr); column-gap: 36px; align-items: start; }
  .xp-page:has(> .xp-form) > .xp-top { grid-column: 1/-1; }
  .xp-page:has(> .xp-form) > .xp-hero { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 24px 8px; }
  .xp-page > .xp-form, .xp-page:has(> .xp-form) > .rec-card { grid-column: 2; }
  .app-shell > .card:not(.result-card):not(.hist-mini) { max-width: 800px; margin-left: auto; margin-right: auto; }
  body[data-tool="tarot"] > main#app { max-width: 1040px; }
}
@media (max-width: 760px) {
  body > #app.app-shell, body > main#app, body.tool-page > .shell { padding: 8px 20px 72px; }
  .card, .xp-card { padding: 22px; margin-bottom: 20px; }
  .xp-hero { padding: 12px 0 24px; margin: 0; }
  .xp-hero h1 { font-size: 24px; }
  .xp-form { gap: 20px; }
  .xp-grid2, .xp-grid3 { gap: 16px; }
  .xz-ai-panel { padding: 22px; }
  .qm-cell { padding: 10px; }
  .zw-grid { min-width: 550px; }
  .xp-card:has(.zw-grid) { overflow-x: auto; }
  .xz-fab { right: 12px; bottom: 14px; }
  body[data-tool="admin"] { padding-left: 20px; padding-right: 20px; }
  body[data-tool="admin"] .grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 520px) {
  body > #app.app-shell, body > main#app, body.tool-page > .shell { padding-left: 16px; padding-right: 16px; }
  .card, .xp-card { padding: 20px 16px; }
  .xp-hero { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 12px 0 24px; }
  .xp-hero h1 { font-size: 22px; }
  .xp-hero p { font-size: .875rem; line-height: 1.8; }
  .xp-title b, .tb-zh { font-size: 20px; }
  .xp-next, .xp-back { font-size: .8125rem; }
  .xp-grid2, .xp-grid3, .bs-main { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .xp-field { gap: 8px; }
  .meta-grid, .xp-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .meta-grid > div, .xp-meta > div { padding: 12px; }
  .result-actions { gap: 8px; }
  .result-actions > button { flex-basis: 110px; padding: 10px 12px; font-size: .875rem; }
  .xz-ai-panel { padding: 20px 16px; }
  .qm-board { overflow-x: auto; } .qm-grid { min-width: 410px; }
  .xp-table { overflow-x: auto; } .xp-table .xp-row { min-width: 480px; }
  .lr-grid { min-width: 400px; } .xp-card:has(.lr-grid) { overflow-x: auto; }
  .xzai-mask { padding: 16px; } .xzai-modal { max-height: 85dvh; overflow-y: auto; }
  body[data-tool="tarot"] .panel { padding: 20px 16px; }
  body[data-tool="admin"] { padding-left: 16px; padding-right: 16px; }
  body[data-tool="admin"] .gate-box { padding: 28px 22px; }
}
@media print {
  body.tool-page { background: white; }
  .topbar, .xp-top, .xp-tabs, .xz-fab, .xz-time-tools, .result-actions, .xp-actions, .skip-link { display: none !important; }
  .card, .xp-card, .xz-ai-panel { box-shadow: none; break-inside: avoid; }
  body > #app.app-shell { width: 100%; max-width: none; padding: 0; }
}

/* ======================================================================
   2026-09 Mobile-first refinement
   目标：手机首屏优先展示核心输入；排盘结果尽量不横向溢出；统一触控尺寸与阅读密度。
   ====================================================================== */
html, body { max-width: 100%; }
body.tool-page { overflow-x: hidden; }
body.tool-page #app { min-width: 0; }
body.tool-page .card,
body.tool-page .xp-card,
body.tool-page .panel,
body.tool-page .result-card { min-width: 0; }

/* 表单与结果均减少无意义的超大留白，桌面也更紧凑。 */
.xp-form { align-content: start; }
.xp-submit, .cast-btn, .main-btn { width: 100%; }
.result-actions, .xp-actions { align-items: stretch; }
.result-actions > button, .xp-actions > button { min-width: 0; }

@media (max-width: 600px) {
  :root { --ui-radius: 14px; --ui-radius-sm: 9px; }
  html { scroll-padding-top: 62px; }
  body.tool-page { font-size: 14px; }
  body > #app.app-shell,
  body > main#app,
  body.tool-page > .shell {
    width: 100%; max-width: none;
    padding: 6px max(10px, env(safe-area-inset-right)) calc(64px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  /* 顶栏：保留返回和标题，去掉会占首屏的英文副标题。 */
  .topbar, .xp-top {
    min-height: 52px; height: auto;
    margin: 0 0 10px; padding: 5px 0;
    position: sticky; top: 0; z-index: 35;
    background: color-mix(in srgb, var(--ui-bg) 94%, white 6%);
  }
  .back { width: 36px; height: 36px; min-height: 36px; font-size: 22px; border-radius: 9px; }
  .xp-title b, .tb-zh { font-size: 18px; line-height: 1.35; letter-spacing: .02em; }
  .xp-title span, .tb-en { display: none; }
  .xp-back, .xp-next { font-size: 12px; padding: 8px 0; white-space: nowrap; }
  .tb-sub { display: none; }

  /* 输入页首屏：介绍 hero 在手机上折叠，直接看到需要填写的信息。 */
  .xp-page:has(> .xp-form) > .xp-hero { display: none; }
  .card, .xp-card { margin-bottom: 10px; padding: 12px; border-radius: 13px; }
  .xp-form { gap: 10px; }
  .xp-grid2, .xp-grid3 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  /* 三个以上分段按钮在半屏会拥挤，自动占整行。 */
  .xp-grid2:has(.xp-seg button:nth-child(3)),
  .xp-grid3:has(.xp-seg button:nth-child(3)) { grid-template-columns: minmax(0, 1fr); }
  .xp-field { gap: 4px; min-width: 0; }
  .xp-field label, .fld-l, .field-label, label.fld > span {
    font-size: 12px; line-height: 1.35; color: var(--ui-muted);
    white-space: normal;
  }
  .fld.block { margin-bottom: 8px; }
  .fld { gap: 4px; margin-bottom: 8px; min-width: 0; }
  .fld input, .fld select, .fld textarea,
  .xp-field input, .xp-field select, .xp-field textarea,
  .num-grid input, .q-input, .lib-search, .key-row input, .gate-box input {
    width: 100%; min-width: 0; min-height: 42px;
    padding: 8px 9px; font-size: 16px; border-radius: 9px;
  }
  textarea.q-input { min-height: 70px; }
  .xp-seg, .seg { gap: 4px; min-width: 0; }
  .xp-seg button, .seg-btn, .xp-chip, .chip, .dong-chip {
    min-width: 0; min-height: 38px; padding: 7px 6px;
    font-size: 12px; line-height: 1.25; letter-spacing: 0;
  }
  .xp-submit, .cast-btn, .main-btn, button.btn.primary {
    min-height: 44px; padding: 9px 12px; margin-top: 2px;
    font-size: 15px; letter-spacing: .06em;
  }
  .ghost, .ghost-btn, .xp-ghost, .icon-btn, .mini {
    min-height: 40px; padding: 8px 10px; font-size: 13px;
  }
  /* 公共快捷取时在手机会重复占空间，原生时间控件已可直接操作。 */
  .xz-time-tools { display: none !important; }
  .xp-note, .hint, .foot-note { font-size: 11px; line-height: 1.55; }
  .xp-form > .xp-note, section.card:has(> .cast-btn) > .hint { display: none; }

  /* 旧式 card 表单：两列排布，让 2~4 个核心字段尽量在一屏内出现。 */
  section.card:has(> .cast-btn) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: end;
  }
  section.card:has(> .cast-btn) > .fld,
  section.card:has(> .cast-btn) > .fld.block { margin: 0; }
  section.card:has(> .cast-btn) > .row-btns,
  section.card:has(> .cast-btn) > .seg,
  section.card:has(> .cast-btn) > .method-tabs,
  section.card:has(> .cast-btn) > .method-panel,
  section.card:has(> .cast-btn) > .panel,
  section.card:has(> .cast-btn) > .cast-btn,
  section.card:has(> .cast-btn) > .hint { grid-column: 1 / -1; }
  .row-btns { gap: 6px; margin: 0; }
  .row-btns .ghost { flex: 1 1 0; }

  /* 占星输入页同样压缩为两列，并保证复选项不被挤压。 */
  body[data-tool="astrology"] section.card:has(> .cast-btn) > .chk,
  body[data-tool="astrology"] section.card:has(> .cast-btn) > .manual-grid {
    grid-column: 1 / -1;
  }
  body[data-tool="astrology"] .manual-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }

  /* 结果区：头部更紧凑，结果一生成就能直接看到核心盘面。 */
  .result-tabs, .xp-tabs {
    position: sticky; top: 52px; z-index: 24;
    display: flex; overflow-x: auto; scrollbar-width: none;
    gap: 5px; padding: 5px 0 8px; margin: 0 0 8px;
    background: var(--ui-bg);
  }
  .result-tabs::-webkit-scrollbar, .xp-tabs::-webkit-scrollbar { display: none; }
  .result-tabs > button, .xp-tabs > button, .rt-btn {
    flex: 1 0 auto; min-width: 64px; min-height: 36px; padding: 6px 9px; font-size: 12px;
  }
  .xp-result-head {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 10px; align-items: center; padding: 12px;
  }
  .xp-result-head .xp-seal { width: 44px; height: 44px; border-radius: 11px; }
  .xp-result-head h1, .xp-result-head h2 { margin: 0; font-size: 18px; line-height: 1.35; }
  .xp-result-head p { margin: 3px 0 0; font-size: 11px; line-height: 1.5; }
  .xp-result-head .xp-actions { grid-column: 1 / -1; margin: 2px 0 0; gap: 6px; }
  .result-hero { margin-bottom: 10px; padding: 2px 0 10px; text-align: left; }
  .rh-name { font-size: 24px; line-height: 1.25; letter-spacing: .03em; text-indent: 0; }
  .rh-sub { margin-top: 4px; font-size: 11px; line-height: 1.55; letter-spacing: 0; }
  .xz-query-show { margin: 7px 0 0; padding: 8px 10px; font-size: 13px; }
  .xz-query-show span { margin: 0; }

  .meta-grid, .xp-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
  .meta-grid > div, .xp-meta > div, .xp-mini, .bs-main > div { padding: 8px; border-radius: 9px; }
  .meta-grid span, .xp-meta span, .xp-mini > span { font-size: 10px; padding-bottom: 3px; margin-bottom: 4px; letter-spacing: .04em; }
  .meta-grid b, .xp-meta b, .xp-mini > b { font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
  .sec-h, .xp-section-title, .eb-title { margin: 12px 0 8px; font-size: 15px; letter-spacing: .08em; }
  .narrative p, .xp-para { font-size: 13px; line-height: 1.75; }
  .narrative p:first-child { font-size: 13.5px; line-height: 1.8; padding-left: 9px; }

  .result-actions, .xp-actions {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px; margin: 10px 0 4px;
  }
  .result-actions > button, .xp-actions > button {
    width: 100%; min-height: 40px; padding: 7px 5px; font-size: 12px; line-height: 1.3;
  }

  /* 奇门 / 太乙九宫：取消手机上的强制最小宽度，九宫完整落在屏幕内。 */
  .qm-board { overflow: visible; padding: 0; }
  .qm-grid {
    width: 100%; min-width: 0 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, 108px) !important;
    gap: 4px !important;
  }
  .qm-cell { min-width: 0; padding: 5px !important; border-radius: 9px; }
  .qm-cell .cell-top { gap: 2px; }
  .qm-cell .god, .qm-cell .pal, .qm-cell .stem-row, .qm-cell .pos { font-size: 9.5px; line-height: 1.25; }
  .qm-cell .main-row { margin: 8px 0 7px; gap: 4px; }
  .qm-cell .star, .qm-cell .door { font-size: 13px; }
  .qm-cell .stem-row { gap: 3px; padding-top: 5px; }
  .qm-cell .pos { margin-top: 3px; }
  .qm-cell .mark { right: 4px; padding: 1px 4px; font-size: 8px; }
  .qm-cell .leader-m { bottom: 21px; }
  .qm-cell .active-m { bottom: 4px; }

  /* 紫微十二宫：原公共样式会强制 550px；手机改为真正四列自适应。 */
  .xp-card:has(.zw-grid) { overflow: visible; }
  .zw-grid { width: 100%; min-width: 0 !important; gap: 3px; }
  .zw-cell, .zw-center { min-width: 0; min-height: 101px; padding: 4px; border-radius: 8px; }
  .zw-stars { min-height: 72px; gap: 2px; }
  .zw-star, .zw-star.main { font-size: 9px; letter-spacing: 0; }
  .zw-foot, .zw-center { font-size: 9px; line-height: 1.3; }
  .zw-center b { font-size: 11px; }
  .hua { font-size: 8px; margin: 1px; padding: 0 2px; }

  /* 大六壬天地盘：取消 400px 最小宽度。 */
  .xp-card:has(.lr-grid) { overflow: visible; }
  .lr-grid { width: 100%; min-width: 0 !important; gap: 3px; }
  .lr-cell, .lr-center { min-width: 0; border-radius: 8px; }
  .lr-cell .sky { font-size: 17px; }
  .lr-cell .grd, .lr-cell .gen, .lr-center { font-size: 9px; }
  .lr-course { gap: 5px; }

  /* 八字通用表格：五列可直接在手机宽度内阅读。 */
  .xp-table { width: 100%; overflow: visible; }
  .xp-table .xp-row { min-width: 0 !important; grid-template-columns: 34px repeat(4, minmax(0, 1fr)); }
  .xp-cell { min-width: 0; padding: 6px 2px; font-size: 10px; overflow-wrap: anywhere; }
  .xp-label { font-size: 10px; }
  .xp-big { font-size: 19px; }
  .xp-stack small { font-size: 9px; line-height: 1.35; }

  /* 六爻卦盘：压缩五列，不再整块横向滚动。 */
  .ly-board { width: 100%; overflow: visible; border-radius: 10px; }
  .ly-row {
    min-width: 0 !important;
    grid-template-columns: 30px 48px minmax(68px, 1fr) 52px minmax(68px, 1fr) !important;
    gap: 2px; padding: 6px 2px; font-size: 9.5px;
  }
  .ly-row.head { font-size: 9px; }
  .yao-bar { width: 44px; gap: 4px; }
  .yao-bar i { height: 7px; }
  .sy { margin-left: 2px; padding: 1px 4px; font-size: 9px; }

  /* 塔罗：首页减少装饰性首屏；结果牌阵宽度按手机收缩。 */
  body[data-tool="tarot"] .hero { padding: 6px 0 12px; }
  body[data-tool="tarot"] .hero-kicker, body[data-tool="tarot"] .hero-rule, body[data-tool="tarot"] .hero-sub { display: none; }
  body[data-tool="tarot"] .hero-title { font-size: 24px; letter-spacing: .08em; }
  body[data-tool="tarot"] .daily { margin-bottom: 10px; padding: 10px; }
  body[data-tool="tarot"] .panel { padding: 12px; margin-bottom: 10px; }
  body[data-tool="tarot"] .spread-grid { gap: 6px; }
  body[data-tool="tarot"] .spread-card { min-width: 0; padding: 9px 5px; }
  body[data-tool="tarot"] .opt-row { padding: 8px 0; }
  body[data-tool="tarot"] .board-wrap { overflow-x: auto; max-width: 100%; }
  body[data-tool="tarot"] .board { gap: 5px; --bc-w: 58px; --bc-h: 94px; }
  body[data-tool="tarot"] .board.big { --bc-w: 50px; --bc-h: 81px; }
  body[data-tool="tarot"] .board.huge { --bc-w: 46px; --bc-h: 75px; }
  body[data-tool="tarot"] .board-cell .bc-pos { font-size: 9px; }
  body[data-tool="tarot"] .summary { gap: 7px; }
  body[data-tool="tarot"] .stat-row { gap: 5px; }

  /* 星座占星：三大星体和轮盘维持完整宽度，文字缩小而非横向溢出。 */
  body[data-tool="astrology"] .bt-wrap { gap: 6px; }
  body[data-tool="astrology"] .bt-card { min-width: 0; padding: 10px 5px; }
  body[data-tool="astrology"] .wheel-card { padding: 8px; }

  /* 浮动按钮不遮挡底部结果操作。 */
  .xz-fab { right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); gap: 6px; }
  .xz-fab button { width: 38px; height: 38px; font-size: 16px; }
}

@media (max-width: 360px) {
  body > #app.app-shell, body > main#app, body.tool-page > .shell {
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  .xp-grid2, .xp-grid3 { gap: 6px; }
  .xp-seg button, .seg-btn { font-size: 11px; padding-left: 4px; padding-right: 4px; }
  .qm-grid { grid-template-rows: repeat(3, 102px) !important; }
  .qm-cell .star, .qm-cell .door { font-size: 12px; }
  .zw-cell, .zw-center { min-height: 95px; }
  .ly-row { grid-template-columns: 28px 44px minmax(62px, 1fr) 46px minmax(62px, 1fr) !important; }
  .result-actions > button, .xp-actions > button { font-size: 11px; }
}

/* ======================================================================
   2026-09 第二轮：跨手机 / 桌面统一美化与信息密度优化
   ====================================================================== */
body.tool-page {
  background:
    radial-gradient(circle at 50% -120px, rgb(22 124 128 / 7%), transparent 360px),
    var(--ui-bg);
}
body > #app.app-shell, body > main#app, body.tool-page > .shell { max-width: 1160px; }

/* 表单与结果卡片：更清晰的层级，不增加额外占用。 */
.card, .xp-card, .panel, .result-card {
  border-color: color-mix(in srgb, var(--ui-border) 86%, var(--ui-primary-line));
  box-shadow: 0 5px 22px rgb(27 58 66 / 5%);
}
.xp-form, section.card:has(> .cast-btn) { border-top: 2px solid color-mix(in srgb, var(--ui-primary) 72%, white); }
.xp-result-head, .result-card, .result-hero + .card {
  border-color: color-mix(in srgb, var(--ui-primary-line) 54%, var(--ui-border));
}
.xp-result-head {
  background: linear-gradient(135deg, #fff 0%, #fbfdfd 56%, var(--ui-primary-soft) 145%);
  box-shadow: 0 7px 28px rgb(27 58 66 / 6%);
}

/* 输入区：更紧凑、更像完整表单组件。 */
.xp-form { gap: 16px; }
.xp-grid2, .xp-grid3 { gap: 14px; }
.xp-field { gap: 6px; }
.xp-field label, .fld-l, .field-label, label.fld > span { color: #4f656d; font-weight: 560; }
.fld input, .fld select, .fld textarea, .xp-field input, .xp-field select, .xp-field textarea,
.num-grid input, .q-input, .lib-search, .key-row input, .gate-box input, .xzai-modal input {
  background: #fbfdfd;
  border-color: #cfdbde;
}
.fld input:hover, .fld select:hover, .fld textarea:hover,
.xp-field input:hover, .xp-field select:hover, .xp-field textarea:hover { border-color: #adc6c8; }
.xp-seg, .seg { padding: 3px; border-radius: 11px; background: var(--ui-surface-soft); }
.xp-seg button, .seg-btn { background: transparent; border-color: transparent; }
.xp-seg button.on, .seg-btn.on { background: white; border-color: var(--ui-primary-line); box-shadow: 0 2px 8px rgb(27 58 66 / 5%); }
.xp-submit, .cast-btn, .main-btn, button.btn.primary {
  box-shadow: 0 6px 18px rgb(22 124 128 / 15%);
}
.xp-submit:hover, .cast-btn:hover, .main-btn:hover, button.btn.primary:hover { transform: translateY(-1px); }

/* 结果导航与信息卡。 */
.xp-tabs, .result-tabs { scrollbar-width: none; }
.xp-tabs::-webkit-scrollbar, .result-tabs::-webkit-scrollbar { display: none; }
.xp-tabs button, .result-tabs button, .rt-btn { transition: border-color .16s, background .16s, color .16s, transform .16s; }
.xp-tabs button:hover, .result-tabs button:hover, .rt-btn:hover { transform: translateY(-1px); }
.sec-h, .xp-section-title, .eb-title { position: relative; }
.sec-h::before, .xp-section-title::before, .eb-title::before {
  width: 3px; border-radius: 999px; background: var(--ui-primary);
}
.meta-grid, .xp-meta { gap: 10px; }
.meta-grid > div, .xp-meta > div, .xp-mini, .bs-main > div {
  background: linear-gradient(145deg, #fbfdfd, var(--ui-surface-soft));
  border-color: #dbe6e8;
}
.meta-grid > div:hover, .xp-meta > div:hover { border-color: var(--ui-primary-line); }
.xp-table, .ly-board, .qm-board { box-shadow: inset 0 0 0 1px rgb(224 232 235 / 38%); }
.xp-table .xp-row:nth-child(even) { background: rgb(242 246 247 / 48%); }
.qm-cell, .zw-cell, .lr-cell { transition: border-color .16s, background .16s; }
.qm-cell:hover, .zw-cell:hover, .lr-cell:hover { border-color: var(--ui-primary-line); background: #fcfefe; }

/* 八字：真太阳时默认关闭；关闭时不出现任何地理输入。 */
.bazi-dt-label { display: flex !important; align-items: center; justify-content: space-between; gap: 8px; }
.bazi-now {
  min-height: 26px; padding: 2px 8px; border: 1px solid var(--ui-primary-line); border-radius: 999px;
  background: var(--ui-primary-soft); color: var(--ui-primary); font-size: 11px; line-height: 1.2;
}
.bazi-solar-box.off { padding: 10px 12px; }
.bazi-solar-box.off .bs-head { min-height: 34px; }
.bazi-solar-box.off .bs-note { margin: 4px 0 0; font-size: 12px; line-height: 1.5; }
.bazi-geo-fields {
  display: grid; gap: 13px; padding: 14px; border: 1px dashed var(--ui-primary-line);
  border-radius: 12px; background: linear-gradient(145deg, #fff, var(--ui-primary-soft));
}
.bazi-geo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bazi-geo-head > div { display: grid; gap: 2px; }
.bazi-geo-head b { color: var(--ui-heading); font-size: 14px; }
.bazi-geo-head span { color: var(--ui-muted); font-size: 11px; }
.bazi-geo-head .xp-ghost { min-height: 34px; padding: 5px 10px; }

@media (min-width: 960px) {
  body > #app.app-shell, body > main#app, body.tool-page > .shell { padding-top: 12px; }
  .card, .xp-card { padding: 24px; margin-bottom: 18px; }
  .xp-page:has(> .xp-form) { grid-template-columns: minmax(210px, .68fr) minmax(0, 1.72fr); column-gap: 28px; }
  .xp-page:has(> .xp-form) > .xp-hero { padding: 20px 6px; gap: 18px; }
  .xp-page:has(> .xp-form) > .xp-hero h1 { font-size: 25px; margin-bottom: 8px; }
  .xp-page:has(> .xp-form) > .xp-hero p { line-height: 1.75; }
  .app-shell > .card:not(.result-card):not(.hist-mini) { max-width: 900px; }
  .xp-result-head { padding: 22px 24px; }
  .xp-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  body.tool-page {
    background:
      radial-gradient(circle at 50% -80px, rgb(22 124 128 / 6%), transparent 240px),
      var(--ui-bg);
  }
  body > #app.app-shell, body > main#app, body.tool-page > .shell {
    padding-top: 4px;
    padding-left: max(9px, env(safe-area-inset-left));
    padding-right: max(9px, env(safe-area-inset-right));
  }
  .topbar, .xp-top { margin-bottom: 7px; border-bottom-color: #dce7e9; }
  .card, .xp-card { padding: 11px; margin-bottom: 8px; border-radius: 12px; box-shadow: 0 3px 14px rgb(27 58 66 / 4%); }
  .xp-form { gap: 8px; border-top-width: 2px; }
  .xp-grid2, .xp-grid3 { gap: 7px; }
  .xp-field { gap: 3px; }
  .xp-field label, .fld-l, .field-label, label.fld > span { font-size: 11.5px; }
  .fld input, .fld select, .fld textarea,
  .xp-field input, .xp-field select, .xp-field textarea,
  .num-grid input, .q-input, .lib-search, .key-row input, .gate-box input {
    min-height: 40px; padding: 7px 8px; border-radius: 8px;
  }
  .xp-seg, .seg { padding: 2px; gap: 2px; border-radius: 9px; }
  .xp-seg button, .seg-btn, .xp-chip, .chip, .dong-chip { min-height: 36px; border-radius: 7px; }
  .xp-submit, .cast-btn, .main-btn, button.btn.primary { min-height: 43px; border-radius: 9px; box-shadow: 0 5px 14px rgb(22 124 128 / 13%); }
  .xp-tabs, .result-tabs { gap: 4px; padding-top: 4px; padding-bottom: 6px; }
  .xp-tabs button, .result-tabs > button, .rt-btn { min-height: 34px; border-radius: 8px; }
  .xp-result-head { padding: 10px; gap: 7px 9px; }
  .xp-result-head .xp-seal { width: 40px; height: 40px; border-radius: 10px; }
  .xp-result-head h1, .xp-result-head h2 { font-size: 17px; }
  .meta-grid, .xp-meta { gap: 5px; }
  .meta-grid > div, .xp-meta > div, .xp-mini, .bs-main > div { padding: 7px; border-radius: 8px; }
  .sec-h, .xp-section-title, .eb-title { margin: 10px 0 6px; font-size: 14px; }
  .result-actions, .xp-actions { margin-top: 8px; gap: 5px; }
  .result-actions > button, .xp-actions > button { min-height: 38px; }
  .bazi-solar-box.off { padding: 8px 9px; }
  .bazi-solar-box.off .bs-head { min-height: 30px; }
  .bazi-solar-box.off .bs-note { display: none; }
  .bs-switch { min-height: 30px; padding: 4px 8px 4px 6px; gap: 6px; }
  .bs-switch span { font-size: 11px; }
  .bazi-geo-fields { gap: 8px; padding: 9px; border-radius: 10px; }
  .bazi-geo-head .xp-ghost { min-height: 31px; padding: 4px 8px; font-size: 11px; }
  .bazi-geo-fields .xp-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bazi-geo-fields .xp-grid3 > :last-child { grid-column: 1 / -1; }
  .bazi-now { min-height: 24px; padding: 2px 7px; font-size: 10px; }
}

@media (max-width: 380px) {
  .card, .xp-card { padding-left: 9px; padding-right: 9px; }
  .xp-grid2, .xp-grid3 { gap: 6px; }
  .meta-grid > div, .xp-meta > div { padding: 6px; }
  .meta-grid b, .xp-meta b { font-size: 11px; }
}

/* 旧式排盘页（奇门/择日/姓名/合婚/称骨/风水等）桌面同样紧凑化。 */
@media (min-width: 700px) {
  section.card:has(> .cast-btn) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
    align-items: end;
  }
  section.card:has(> .cast-btn) > .fld,
  section.card:has(> .cast-btn) > .fld.block { margin: 0; }
  section.card:has(> .cast-btn) > .row-btns,
  section.card:has(> .cast-btn) > .seg,
  section.card:has(> .cast-btn) > .method-tabs,
  section.card:has(> .cast-btn) > .method-panel,
  section.card:has(> .cast-btn) > .manual-grid,
  section.card:has(> .cast-btn) > .chk,
  section.card:has(> .cast-btn) > .hint,
  section.card:has(> .cast-btn) > .cast-btn { grid-column: 1 / -1; }
  section.card:has(> .cast-btn) > .fld:only-of-type { grid-column: 1 / -1; }
  section.card:has(> .cast-btn) > .hint { margin: 0; }
  section.card:has(> .cast-btn) > .cast-btn { margin-top: 2px; }
}
@media (max-width: 600px) {
  section.card:has(> .cast-btn) > .fld:only-of-type { grid-column: 1 / -1; }
}

/* 真太阳时展开态细化：开关、地理输入、校正预览形成一张连续卡片。 */
.bs-switch span { border: 0 !important; padding: 0 !important; background: transparent !important; }
.bazi-solar-box.on { display: grid; gap: 11px; padding: 13px; }
.bazi-solar-box.on .bs-head { margin: 0; }
.bs-head > div { display: grid; gap: 1px; }
.bs-head small { color: var(--ui-muted); font-size: 10.5px; line-height: 1.35; font-weight: 400; }
.bazi-solar-box.on .bazi-geo-fields { background: #fff; }
.bazi-solar-box.on .bs-main { margin-top: 1px; }
.bazi-solar-box.on .bs-note { margin-top: -2px; }
.bazi-solar-box.on .bs-actions { margin-top: 0; }
@media (max-width: 600px) {
  .bazi-solar-box.on { gap: 8px; padding: 9px; }
  .bs-head small { display: none; }
  .bazi-solar-box.on .bs-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .bazi-solar-box.on .bs-main > div { padding: 7px; }
  .bazi-solar-box.on .bs-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bazi-solar-box.on .bs-actions button { min-height: 34px; font-size: 10.5px; }
}

/* ======================================================================
   2026-09 第三轮：排盘输入页「去空白 / 强分组 / 高信息密度」
   不改变算法，只对所有输入页面做统一视觉组织。
   ====================================================================== */
body.xz-view-form > #app.app-shell,
body.xz-view-form > main#app { padding-bottom: 42px; }

/* 通用输入卡：加一个轻量信息头，让表单从“空白大卡片”变成完整输入面板。 */
.xz-input-form { position: relative; overflow: hidden; }
.xz-input-form::after {
  content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--ui-primary), color-mix(in srgb, var(--ui-primary) 18%, transparent), transparent 84%);
  pointer-events: none;
}
.xz-form-intro {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-width: 0; margin: -2px 0 1px; padding: 0 0 11px;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 84%, white);
}
.xz-form-intro-main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.xz-form-intro-main i {
  width: 7px; height: 7px; flex: 0 0 auto; border-radius: 999px;
  background: var(--ui-primary); box-shadow: 0 0 0 5px var(--ui-primary-soft);
}
.xz-form-intro b { color: var(--ui-heading); font-size: 15px; letter-spacing: .04em; }
.xz-form-intro > span { color: var(--ui-muted); font-size: 12px; line-height: 1.45; text-align: right; }

/* 每个输入项形成紧凑的小分区：视觉更充实，同时更容易扫读。 */
.xz-input-form .xp-field,
.xz-input-form.xz-input-legacy > .fld {
  min-width: 0; padding: 10px 11px;
  border: 1px solid #e2eaec; border-radius: 11px;
  background: linear-gradient(145deg, #fff 0%, #fbfdfd 100%);
}
.xz-input-form .xp-field:focus-within,
.xz-input-form.xz-input-legacy > .fld:focus-within {
  border-color: var(--ui-primary-line);
  background: #fff;
  box-shadow: 0 0 0 3px rgb(22 124 128 / 5%);
}
.xz-input-form .xp-field > label,
.xz-input-form.xz-input-legacy > .fld > .fld-l {
  color: #526971; font-weight: 600;
}
.xz-input-form .xp-field input,
.xz-input-form .xp-field select,
.xz-input-form .xp-field textarea,
.xz-input-form.xz-input-legacy > .fld input,
.xz-input-form.xz-input-legacy > .fld select,
.xz-input-form.xz-input-legacy > .fld textarea { background: #fff; }

/* 说明信息不再悬空：桌面做成紧凑提示条。 */
.xz-input-form > .hint,
.xz-input-form > .xp-note {
  grid-column: 1 / -1; margin: 0; padding: 9px 11px;
  border: 1px solid #e4ecee; border-radius: 9px;
  background: var(--ui-surface-soft); color: var(--ui-muted);
  font-size: 12px; line-height: 1.65;
}
.xz-input-form > .hint::before,
.xz-input-form > .xp-note::before { content: "提示 · "; color: var(--ui-primary); font-weight: 650; }

/* 快捷按钮紧贴输入区，主按钮成为明确的收口。 */
.xz-input-form > .row-btns { margin: 0; }
.xz-input-form > .cast-btn,
.xz-input-form > .xp-submit { margin-top: 0; }

@media (min-width: 960px) {
  /* 简单页面按字段数控制宽度，避免两三个字段被硬拉成巨大的空卡片。 */
  body.xz-view-form .app-shell > .xz-input-form.xz-input-legacy.xz-fields-1 { max-width: 680px; }
  body.xz-view-form .app-shell > .xz-input-form.xz-input-legacy.xz-fields-2 { max-width: 780px; }
  body.xz-view-form .app-shell > .xz-input-form.xz-input-legacy.xz-fields-3,
  body.xz-view-form .app-shell > .xz-input-form.xz-input-legacy.xz-fields-4 { max-width: 900px; }
  body.xz-view-form .app-shell > .hist-mini { max-width: 900px; margin-left: auto; margin-right: auto; }

  /* 三字段工具在宽屏真正铺成三列，消除第三个字段单独占下一行造成的空洞。 */
  body:not([data-tool="astrology"]) .xz-input-legacy.xz-fields-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body[data-tool="jinkou"] .xz-input-form,
  body[data-tool="fengshui"] .xz-input-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* XP 系输入页：左侧介绍不再是大片空白，而是一张紧凑说明卡。 */
  .xp-page:has(> .xz-input-form) {
    grid-template-columns: minmax(230px, .72fr) minmax(0, 1.85fr);
    column-gap: 22px;
  }
  .xp-page:has(> .xz-input-form) > .xp-hero {
    position: sticky; top: 92px;
    padding: 18px; gap: 14px;
    border: 1px solid #dce8ea; border-radius: 15px;
    background: linear-gradient(155deg, #fff, #f2f8f8);
    box-shadow: 0 6px 24px rgb(27 58 66 / 5%);
  }
  .xp-page:has(> .xz-input-form) > .xp-hero .xp-seal { width: 48px; height: 48px; border-radius: 12px; }
  .xp-page:has(> .xz-input-form) > .xp-hero h1 { margin: 0 0 6px; font-size: 23px; line-height: 1.4; }
  .xp-page:has(> .xz-input-form) > .xp-hero p { margin: 0; font-size: 13px; line-height: 1.75; }
  .xp-page > .xz-input-form { padding: 20px; }
  .xz-input-modern .xp-grid2,
  .xz-input-modern .xp-grid3 { gap: 10px; }

  /* 塔罗输入页：收紧大块间距，让问题 / 牌阵 / 设置构成连续操作流。 */
  body[data-tool="tarot"] .xz-tarot-input .hero { padding-top: 10px; padding-bottom: 16px; }
  body[data-tool="tarot"] .xz-tarot-input .daily { margin-bottom: 14px; }
  body[data-tool="tarot"] .xz-tarot-input .panel { padding: 20px; margin-bottom: 14px; }
  body[data-tool="tarot"] .xz-tarot-input .spread-grid { gap: 9px; }
  body[data-tool="tarot"] .xz-tarot-input .main-btn { margin-top: 4px; }
}

@media (min-width: 700px) and (max-width: 959px) {
  .xz-input-form { max-width: 820px; margin-left: auto; margin-right: auto; }
  .xz-input-form.xz-input-legacy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xz-input-form.xz-input-legacy > .xz-form-intro { grid-column: 1 / -1; }
}

@media (max-width: 699px) {
  .xz-form-intro { gap: 8px; padding-bottom: 8px; }
  .xz-form-intro b { font-size: 13px; }
  .xz-form-intro > span { font-size: 10.5px; }
  .xz-input-form .xp-field,
  .xz-input-form.xz-input-legacy > .fld { padding: 7px; border-radius: 9px; }
  .xz-input-form .xp-field:focus-within,
  .xz-input-form.xz-input-legacy > .fld:focus-within { box-shadow: 0 0 0 2px rgb(22 124 128 / 5%); }
}

@media (max-width: 600px) {
  /* 手机仍以首屏可填为目标：提示头保持一行，说明副文在窄屏隐藏。 */
  .xz-input-form { padding-top: 10px; }
  .xz-form-intro { min-height: 28px; margin-bottom: 0; }
  .xz-form-intro > span { display: none; }
  .xz-form-intro-main i { width: 6px; height: 6px; box-shadow: 0 0 0 4px var(--ui-primary-soft); }
  .xz-input-form .xp-grid2,
  .xz-input-form .xp-grid3 { gap: 6px; }
  .xz-input-form .xp-field,
  .xz-input-form.xz-input-legacy > .fld { padding: 6px; }
  .xz-input-form .xp-field > label,
  .xz-input-form.xz-input-legacy > .fld > .fld-l { font-size: 11px; }
  .xz-input-form > .hint,
  .xz-input-form > .xp-note { display: none; }
  .xz-input-form > .cast-btn,
  .xz-input-form > .xp-submit { margin-top: 1px; }

  /* 三字段老页面手机保持两列，但最后一个字段自动铺满，避免半行空白。 */
  .xz-input-legacy.xz-fields-3 > .fld:nth-of-type(3) { grid-column: 1 / -1; }

  /* 单字段/双字段页面尽量把按钮拉近，不留下大块无效间距。 */
  .xz-input-legacy.xz-fields-1,
  .xz-input-legacy.xz-fields-2 { row-gap: 6px !important; }

  body[data-tool="tarot"] .xz-tarot-input .panel { padding: 10px; margin-bottom: 8px; }
  body[data-tool="tarot"] .xz-tarot-input .chips { gap: 5px; }
  body[data-tool="tarot"] .xz-tarot-input .spread-grid { gap: 5px; }
}

@media (max-width: 380px) {
  .xz-input-form .xp-field,
  .xz-input-form.xz-input-legacy > .fld { padding: 5px; }
  .xz-form-intro { padding-bottom: 7px; }
}

/* ======================================================================
   2026-09 第四轮：八字保持不变，其余输入页统一参考「梅花易数」
   - 顶部标题 + 简短副标题 + 单一主输入卡
   - 取消第三轮碎片化字段小卡，恢复更清爽的扁平输入节奏
   - 桌面居中紧凑、手机首屏高信息密度
   ====================================================================== */
body.xz-meihua-input {
  --xz-form-max: 720px;
}
body.xz-meihua-input > #app.app-shell,
body.xz-meihua-input > main#app,
body.xz-meihua-input > .shell {
  max-width: var(--xz-form-max) !important;
  padding-top: 10px;
  padding-bottom: 44px;
}

/* 传统 topbar 系：直接统一到梅花易数的标题节奏。 */
body.xz-meihua-input .topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 2px 3px;
  margin: 0;
}
body.xz-meihua-input .topbar .back {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 25px;
  line-height: 1;
}
body.xz-meihua-input .tb-title { min-width: 0; line-height: 1.16; }
body.xz-meihua-input .tb-zh {
  font-family: var(--ui-serif);
  font-size: 22px;
  font-weight: 760;
  letter-spacing: .18em;
  color: var(--ui-heading);
}
body.xz-meihua-input .tb-en {
  margin-top: 3px;
  color: var(--ui-muted);
  font-size: 10px;
  letter-spacing: .16em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.xz-meihua-input .tb-flower {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--ui-primary);
  opacity: .72;
}
body.xz-meihua-input .tb-sub {
  margin: 3px 0 14px;
  color: var(--ui-muted);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .12em;
  text-align: center;
}

/* XP 系（紫微 / 六爻 / 六壬）：输入页视觉转成同一套梅花式标题与副标题。 */
body.xz-meihua-input .xp-page:has(> .xz-meihua-form) {
  display: block !important;
  max-width: none;
}
body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 2px 3px;
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-top .xp-back {
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: 1px solid var(--ui-primary-line);
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  background: var(--ui-surface);
  text-decoration: none;
}
body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-top .xp-back::before {
  content: "‹";
  color: var(--ui-primary);
  font-family: Arial, sans-serif;
  font-size: 27px;
  line-height: 1;
}
body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-top .xp-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.16;
}
body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-top .xp-title b {
  font-family: var(--ui-serif);
  font-size: 22px;
  font-weight: 760;
  letter-spacing: .18em;
  color: var(--ui-heading);
}
body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-top .xp-title span {
  margin-top: 3px;
  color: var(--ui-muted);
  font-size: 10px;
  letter-spacing: .16em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-top .xp-next { display: none !important; }
body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-top::after {
  content: "✶";
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--ui-primary);
  opacity: .72;
}
body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-hero {
  position: static !important;
  display: block;
  margin: 3px 0 14px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}
body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-hero .xp-seal,
body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-hero h1 { display: none; }
body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-hero p {
  margin: 0;
  color: var(--ui-muted);
  font-family: var(--ui-serif);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: .08em;
}

/* 主输入卡：梅花易数式「一张卡承载全部核心操作」。 */
body.xz-meihua-input .xz-meihua-form {
  position: relative;
  width: 100%;
  max-width: var(--xz-form-max) !important;
  margin: 0 auto 14px !important;
  padding: 18px 16px !important;
  border: 1px solid var(--ui-primary-line) !important;
  border-top-width: 1px !important;
  border-radius: 16px !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 7px 28px rgb(27 58 66 / 6%) !important;
  overflow: visible;
}
body.xz-meihua-input .xz-meihua-form::after { display: none !important; }

/* 第三轮的小字段卡在非八字页面全部撤掉，回归梅花式扁平字段。 */
body.xz-meihua-input .xz-meihua-form .xp-field,
body.xz-meihua-input .xz-meihua-form .fld,
body.xz-meihua-input .xz-meihua-form.xz-input-legacy > .fld {
  min-width: 0;
  padding: 0 !important;
  margin: 0 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.xz-meihua-input .xz-meihua-form .xp-field:focus-within,
body.xz-meihua-input .xz-meihua-form .fld:focus-within { box-shadow: none !important; }
body.xz-meihua-input .xz-meihua-form .xp-field > label,
body.xz-meihua-input .xz-meihua-form .fld-l,
body.xz-meihua-input .xz-meihua-form .field-label {
  display: block;
  margin-bottom: 7px;
  color: #4f656d;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .06em;
}
body.xz-meihua-input .xz-meihua-form input:not([type="checkbox"]):not([type="radio"]),
body.xz-meihua-input .xz-meihua-form select,
body.xz-meihua-input .xz-meihua-form textarea,
body.xz-meihua-input .q-input {
  width: 100%;
  min-height: 45px;
  padding: 11px 12px;
  border: 1px solid #ccdadd !important;
  border-radius: 11px !important;
  background: #fbfdfd !important;
  color: var(--ui-text) !important;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body.xz-meihua-input .xz-meihua-form textarea,
body.xz-meihua-input .q-input { min-height: 70px; resize: vertical; }
body.xz-meihua-input .xz-meihua-form input:focus,
body.xz-meihua-input .xz-meihua-form select:focus,
body.xz-meihua-input .xz-meihua-form textarea:focus,
body.xz-meihua-input .q-input:focus {
  outline: none;
  border-color: var(--ui-primary) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgb(22 124 128 / 7%) !important;
}

/* 两套分段按钮统一成梅花的浅底内嵌选项。 */
body.xz-meihua-input .xz-meihua-form .xp-seg,
body.xz-meihua-input .xz-meihua-form .seg {
  display: grid;
  gap: 5px;
  min-height: 45px;
  margin: 0;
  padding: 4px;
  border: 1px solid #d7e2e4;
  border-radius: 11px;
  background: var(--ui-surface-soft);
  box-shadow: none;
}
body.xz-meihua-input .xz-meihua-form .xp-seg button,
body.xz-meihua-input .xz-meihua-form .seg-btn {
  min-height: 35px;
  padding: 7px 8px;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.3;
  box-shadow: none !important;
}
body.xz-meihua-input .xz-meihua-form .xp-seg button.on,
body.xz-meihua-input .xz-meihua-form .seg-btn.on {
  background: #fff !important;
  color: var(--ui-primary) !important;
  font-weight: 700;
  box-shadow: 0 2px 8px rgb(27 58 66 / 7%) !important;
}

/* 方法面板、提示和快捷操作都保持在主卡内部，不再做额外大卡。 */
body.xz-meihua-input .xz-meihua-form > .panel,
body.xz-meihua-input .xz-meihua-form > .method-panel {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
body.xz-meihua-input .xz-meihua-form > .hint,
body.xz-meihua-input .xz-meihua-form > .xp-note {
  grid-column: 1 / -1;
  display: block !important;
  margin: 1px 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ui-muted);
  font-size: 11.5px;
  line-height: 1.65;
}
body.xz-meihua-input .xz-meihua-form > .hint::before,
body.xz-meihua-input .xz-meihua-form > .xp-note::before { content: none !important; }
body.xz-meihua-input .xz-meihua-form .row-btns {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: -2px 0 11px;
}
body.xz-meihua-input .xz-meihua-form .ghost,
body.xz-meihua-input .xz-meihua-form .xp-ghost {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 11.5px;
}
body.xz-meihua-input .xz-meihua-form .xz-time-tools {
  gap: 5px;
  margin-top: 6px;
}
body.xz-meihua-input .xz-meihua-form .xz-time-tools button {
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 10.5px;
}

/* 主按钮完全统一：宽、稳、明显，但不过高。 */
body.xz-meihua-input .xz-meihua-form > .cast-btn,
body.xz-meihua-input .xz-meihua-form > .xp-submit,
body.xz-meihua-input .main-btn {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 49px;
  margin: 2px 0 0 !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: var(--ui-primary) !important;
  color: #fff !important;
  font-family: var(--ui-serif);
  font-size: 16px !important;
  font-weight: 760 !important;
  letter-spacing: .28em !important;
  text-indent: .28em;
  box-shadow: 0 7px 18px rgb(22 124 128 / 16%) !important;
}
body.xz-meihua-input .xz-meihua-form > .cast-btn:hover,
body.xz-meihua-input .xz-meihua-form > .xp-submit:hover,
body.xz-meihua-input .main-btn:hover { filter: brightness(.98); transform: translateY(-1px); }
body.xz-meihua-input .xz-meihua-form > .cast-btn:active,
body.xz-meihua-input .xz-meihua-form > .xp-submit:active,
body.xz-meihua-input .main-btn:active { transform: translateY(0) scale(.995); }

/* 旧式简单工具：桌面适度并排，手机按梅花式顺序单列。 */
body.xz-meihua-input section.card.xz-meihua-form.xz-input-legacy {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: end;
}
body.xz-meihua-input section.card.xz-meihua-form.xz-input-legacy > .fld { grid-column: 1 / -1; }

/* XP 输入表单维持两栏能力，但不再拆成字段小卡。 */
body.xz-meihua-input .xz-meihua-form .xp-grid2,
body.xz-meihua-input .xz-meihua-form .xp-grid3 { gap: 12px; margin: 0; }
body.xz-meihua-input .xz-meihua-form .xp-grid2 + .xp-grid2 { margin-top: 0; }
body.xz-meihua-input .xz-meihua-form .xp-card {
  border-color: #dde7e9;
  background: #fbfdfd;
  box-shadow: none;
}

/* 历史、速查等次级内容跟随梅花：窄、轻、与主卡同栏。 */
body.xz-meihua-input .hist-mini,
body.xz-meihua-input details.ref,
body.xz-meihua-input .foot-note {
  max-width: var(--xz-form-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.xz-meihua-input .hist-mini {
  padding: 13px 14px;
  border-radius: 14px;
  box-shadow: none;
}
body.xz-meihua-input .hm-list { gap: 6px; }
body.xz-meihua-input .hm-item,
body.xz-meihua-input .hm-row { min-height: 42px; padding: 8px 10px; border-radius: 10px; }
body.xz-meihua-input .foot-note { margin-top: 9px; font-size: 10.5px; line-height: 1.55; }

/* 塔罗输入页也收成梅花式连续操作流：保留牌阵特性，但视觉密度统一。 */
body.xz-meihua-input[data-tool="tarot"] .xz-tarot-input { max-width: var(--xz-form-max); margin: 0 auto; }
body.xz-meihua-input[data-tool="tarot"] .hero {
  padding: 4px 0 12px !important;
  text-align: center;
}
body.xz-meihua-input[data-tool="tarot"] .hero-kicker,
body.xz-meihua-input[data-tool="tarot"] .hero-rule { display: none !important; }
body.xz-meihua-input[data-tool="tarot"] .hero-title {
  margin: 0;
  color: var(--ui-heading) !important;
  font-family: var(--ui-serif);
  font-size: 22px !important;
  letter-spacing: .18em !important;
}
body.xz-meihua-input[data-tool="tarot"] .hero-sub {
  display: block !important;
  margin-top: 5px;
  color: var(--ui-muted) !important;
  font-size: 11px !important;
  letter-spacing: .08em;
}
body.xz-meihua-input[data-tool="tarot"] .daily {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 14px;
}
body.xz-meihua-input[data-tool="tarot"] .panel {
  margin-bottom: 12px !important;
  padding: 15px 14px !important;
  border: 1px solid var(--ui-primary-line) !important;
  border-radius: 15px !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 5px 20px rgb(27 58 66 / 5%) !important;
}
body.xz-meihua-input[data-tool="tarot"] .chips { gap: 6px; }
body.xz-meihua-input[data-tool="tarot"] .chip { min-height: 34px; padding: 6px 10px; border-radius: 9px; }
body.xz-meihua-input[data-tool="tarot"] .spread-grid { gap: 7px !important; }
body.xz-meihua-input[data-tool="tarot"] .spread-card { padding: 10px 7px !important; border-radius: 11px !important; }
body.xz-meihua-input[data-tool="tarot"] .opt-row { min-height: 48px; padding: 8px 0 !important; }
body.xz-meihua-input[data-tool="tarot"] .ghost-btn { min-height: 42px; border-radius: 11px; }

@media (min-width: 560px) {
  /* 简单工具只在桌面/平板做合理并排，仍维持一张主卡。 */
  body.xz-meihua-input section.card.xz-meihua-form.xz-input-legacy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
  }
  body.xz-meihua-input section.card.xz-meihua-form.xz-input-legacy > .fld { grid-column: auto; }

  /* 占事类：问题独占一行，时间 / 方位作为下一行。 */
  body.xz-meihua-input[data-tool="qimen"] .xz-meihua-form > .fld:first-of-type,
  body.xz-meihua-input[data-tool="taiyi"] .xz-meihua-form > .fld:first-of-type,
  body.xz-meihua-input[data-tool="jinkou"] .xz-meihua-form > .fld:first-of-type {
    grid-column: 1 / -1;
  }
  body.xz-meihua-input[data-tool="qimen"] .xz-meihua-form > .fld:nth-of-type(2),
  body.xz-meihua-input[data-tool="taiyi"] .xz-meihua-form > .fld:nth-of-type(2) {
    grid-column: 1 / -1;
  }
  body.xz-meihua-input[data-tool="fengshui"] .xz-meihua-form {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
  }
  body.xz-meihua-input[data-tool="fengshui"] .xz-meihua-form > .fld { grid-column: auto !important; }
  body.xz-meihua-input[data-tool="chenggu"] .xz-meihua-form > .fld { grid-column: 1 / -1; }

  /* 占星：日期+时间一排，城市独占下一排；手动参数三列。 */
  body.xz-meihua-input[data-tool="astrology"] .xz-meihua-form > .fld:nth-of-type(1),
  body.xz-meihua-input[data-tool="astrology"] .xz-meihua-form > .fld:nth-of-type(2) { grid-column: auto; }
  body.xz-meihua-input[data-tool="astrology"] .xz-meihua-form > .fld:nth-of-type(3) { grid-column: 1 / -1; }
  body.xz-meihua-input[data-tool="astrology"] .manual-grid {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
}

@media (max-width: 600px) {
  body.xz-meihua-input > #app.app-shell,
  body.xz-meihua-input > main#app,
  body.xz-meihua-input > .shell {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-top: 6px;
  }
  body.xz-meihua-input .topbar,
  body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-top { min-height: 48px; padding-top: 5px; }
  body.xz-meihua-input .topbar .back,
  body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-top .xp-back {
    width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 10px;
  }
  body.xz-meihua-input .tb-zh,
  body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-top .xp-title b { font-size: 19px; letter-spacing: .14em; }
  body.xz-meihua-input .tb-en,
  body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-top .xp-title span { font-size: 9px; letter-spacing: .1em; }
  body.xz-meihua-input .tb-flower,
  body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-top::after { font-size: 17px; }
  body.xz-meihua-input .tb-sub,
  body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-hero { margin-bottom: 9px; }
  body.xz-meihua-input .tb-sub,
  body.xz-meihua-input .xp-page:has(> .xz-meihua-form) > .xp-hero p { font-size: 10.5px; line-height: 1.45; }
  body.xz-meihua-input .xz-meihua-form {
    padding: 12px 11px !important;
    margin-bottom: 10px !important;
    border-radius: 13px !important;
  }
  body.xz-meihua-input .xz-meihua-form .xp-field,
  body.xz-meihua-input .xz-meihua-form .fld,
  body.xz-meihua-input .xz-meihua-form.xz-input-legacy > .fld { margin-bottom: 10px !important; }
  body.xz-meihua-input .xz-meihua-form .xp-field > label,
  body.xz-meihua-input .xz-meihua-form .fld-l { margin-bottom: 5px; font-size: 11px; }
  body.xz-meihua-input .xz-meihua-form input:not([type="checkbox"]):not([type="radio"]),
  body.xz-meihua-input .xz-meihua-form select,
  body.xz-meihua-input .xz-meihua-form textarea,
  body.xz-meihua-input .q-input { min-height: 41px; padding: 9px 10px; font-size: 13px; }
  body.xz-meihua-input .xz-meihua-form .xp-grid2,
  body.xz-meihua-input .xz-meihua-form .xp-grid3 { gap: 7px; }
  body.xz-meihua-input .xz-meihua-form .xp-seg,
  body.xz-meihua-input .xz-meihua-form .seg { min-height: 41px; padding: 3px; gap: 3px; }
  body.xz-meihua-input .xz-meihua-form .xp-seg button,
  body.xz-meihua-input .xz-meihua-form .seg-btn { min-height: 33px; padding: 6px 4px; font-size: 10.5px; }
  body.xz-meihua-input .xz-meihua-form > .hint,
  body.xz-meihua-input .xz-meihua-form > .xp-note { margin-bottom: 9px !important; font-size: 10.5px; line-height: 1.55; }
  body.xz-meihua-input .xz-meihua-form > .cast-btn,
  body.xz-meihua-input .xz-meihua-form > .xp-submit,
  body.xz-meihua-input .main-btn { min-height: 45px; padding: 10px 12px !important; font-size: 14px !important; }
  body.xz-meihua-input[data-tool="tarot"] .panel { padding: 11px 10px !important; margin-bottom: 9px !important; }
  body.xz-meihua-input[data-tool="tarot"] .daily { margin-bottom: 9px; }
  body.xz-meihua-input[data-tool="tarot"] .spread-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 380px) {
  body.xz-meihua-input .xz-meihua-form .xp-grid2 { grid-template-columns: 1fr; }
  body.xz-meihua-input .xz-meihua-form .xp-grid2 > .xp-field { margin-bottom: 8px !important; }
  body.xz-meihua-input .tb-sub { letter-spacing: .06em; }
}

/* ======================================================================
   2026-09 Round 6 · 全工具工作台视觉统一
   目标：统一桌面/移动布局、提高层级与可读性、修复按钮对比度、减少无效留白。
   ====================================================================== */
body.tool-page {
  --xz-workspace-max: 1180px;
  --xz-form-width: 760px;
  background:
    radial-gradient(circle at 12% -80px, rgb(22 124 128 / 6%), transparent 330px),
    radial-gradient(circle at 92% 12%, rgb(55 111 161 / 4%), transparent 260px),
    var(--ui-bg);
}
body.tool-page > #app.app-shell,
body.tool-page > main#app,
body.tool-page > .shell {
  width: min(100%, var(--xz-workspace-max));
  max-width: var(--xz-workspace-max);
  padding-top: 12px;
}

/* 顶部工具栏：轻量玻璃层，标题、返回、辅助入口层级更稳定。 */
body.tool-page .topbar,
body.tool-page .xp-top {
  min-height: 64px;
  margin-bottom: 18px;
  padding: 10px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--ui-border) 82%, var(--ui-primary-line));
  background: color-mix(in srgb, var(--ui-bg) 88%, white 12%);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
}
body.tool-page .topbar .back,
body.tool-page .xp-back {
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
body.tool-page .topbar .back:hover,
body.tool-page .xp-back:hover {
  color: var(--ui-primary-hover);
  border-color: var(--ui-primary-line);
  background: var(--ui-primary-soft);
}
body.tool-page .topbar .back:active,
body.tool-page .xp-back:active { transform: translateY(1px); }
body.tool-page .tb-zh,
body.tool-page .xp-title b {
  font-weight: 720;
  letter-spacing: .08em;
}
body.tool-page .tb-en,
body.tool-page .xp-title span { opacity: .78; }

/* 输入页：所有工具统一为“标题 + 一张主表单卡”的工作流。 */
body.xz-view-form .xp-page:has(> .xp-form) {
  display: block !important;
}
body.xz-view-form .xp-page:has(> .xp-form) > .xp-top,
body.xz-view-form .xp-page:has(> .xp-form) > .xp-hero,
body.xz-view-form .xp-page:has(> .xp-form) > .xp-form,
body.xz-view-form .xp-page:has(> .xp-form) > .rec-card {
  grid-column: auto !important;
  grid-row: auto !important;
}
body.xz-view-form .xp-page:has(> .xp-form) > .xp-hero {
  width: min(100%, var(--xz-form-width));
  margin: 0 auto 12px;
  padding: 10px 8px 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  text-align: left;
}
body.xz-view-form .xp-page:has(> .xp-form) > .xp-hero .xp-seal {
  width: 48px;
  height: 48px;
  border-radius: 13px;
}
body.xz-view-form .xp-page:has(> .xp-form) > .xp-hero h1 {
  margin: 0 0 4px;
  font-size: 24px;
  line-height: 1.35;
}
body.xz-view-form .xp-page:has(> .xp-form) > .xp-hero p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}
body.xz-view-form .xp-page:has(> .xp-form) > .xp-form,
body.xz-view-form .xz-meihua-form {
  width: min(100%, var(--xz-form-width));
  max-width: var(--xz-form-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.xz-view-form .xp-form,
body.xz-view-form .xz-meihua-form {
  border: 1px solid color-mix(in srgb, var(--ui-primary-line) 70%, var(--ui-border)) !important;
  border-top: 1px solid color-mix(in srgb, var(--ui-primary-line) 70%, var(--ui-border)) !important;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 98%), rgb(252 254 254 / 98%)) !important;
  box-shadow: 0 14px 40px rgb(27 58 66 / 7%) !important;
}
body.xz-view-form .xp-form { padding: 24px; }
body.xz-view-form .xz-meihua-form { padding: 20px !important; }
body.xz-view-form .xz-form-intro {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ui-border);
}
body.xz-view-form .xz-form-intro-main b { color: var(--ui-heading); }

/* 表单控件：更明确的边框、聚焦、分段状态。 */
body.tool-page .fld input,
body.tool-page .fld select,
body.tool-page .fld textarea,
body.tool-page .xp-field input,
body.tool-page .xp-field select,
body.tool-page .xp-field textarea,
body.tool-page .q-input,
body.tool-page .lib-search {
  border-color: #cbdadd;
  background: #fcfefe;
  color: var(--ui-text);
}
body.tool-page .fld input:hover,
body.tool-page .fld select:hover,
body.tool-page .fld textarea:hover,
body.tool-page .xp-field input:hover,
body.tool-page .xp-field select:hover,
body.tool-page .xp-field textarea:hover,
body.tool-page .q-input:hover,
body.tool-page .lib-search:hover { border-color: #afc8cb; }
body.tool-page .fld input:focus,
body.tool-page .fld select:focus,
body.tool-page .fld textarea:focus,
body.tool-page .xp-field input:focus,
body.tool-page .xp-field select:focus,
body.tool-page .xp-field textarea:focus,
body.tool-page .q-input:focus,
body.tool-page .lib-search:focus {
  border-color: var(--ui-primary) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgb(22 124 128 / 8%) !important;
}
body.tool-page .xp-field label,
body.tool-page .fld-l,
body.tool-page .field-label,
body.tool-page label.fld > span {
  color: #455f67;
  font-weight: 650;
}
body.tool-page .xp-seg,
body.tool-page .seg {
  border-color: #d6e2e4;
  background: #f3f7f8;
}
body.tool-page .xp-seg button,
body.tool-page .seg-btn,
body.tool-page .chip,
body.tool-page .dong-chip {
  color: #5a7078;
}
body.tool-page .xp-seg button.on,
body.tool-page .seg-btn.on,
body.tool-page .chip.on,
body.tool-page .dong-chip.on,
body.tool-page .xp-seg button[aria-pressed="true"] {
  color: var(--ui-primary-hover) !important;
  background: #fff !important;
  border-color: var(--ui-primary-line) !important;
  box-shadow: 0 3px 10px rgb(27 58 66 / 7%) !important;
}

/* 主操作按钮：统一高对比度，避免任何主题下“按钮字看不见”。 */
body.tool-page .xp-submit,
body.tool-page .cast-btn,
body.tool-page .main-btn,
body.tool-page .solid,
body.tool-page .xp-solid,
body.tool-page button.btn.primary,
body.tool-page .xz-action-primary {
  border-color: transparent !important;
  background: linear-gradient(135deg, #16878a 0%, #0f7075 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
  box-shadow: 0 9px 22px rgb(15 112 117 / 18%) !important;
}
body.tool-page .xp-submit:hover,
body.tool-page .cast-btn:hover,
body.tool-page .main-btn:hover,
body.tool-page .solid:hover,
body.tool-page .xp-solid:hover,
body.tool-page button.btn.primary:hover,
body.tool-page .xz-action-primary:hover {
  filter: brightness(1.03);
  box-shadow: 0 12px 26px rgb(15 112 117 / 22%) !important;
}
body.tool-page .xp-submit:active,
body.tool-page .cast-btn:active,
body.tool-page .main-btn:active,
body.tool-page .solid:active,
body.tool-page .xp-solid:active,
body.tool-page button.btn.primary:active,
body.tool-page .xz-action-primary:active { transform: translateY(1px); }
body.tool-page .ghost,
body.tool-page .ghost-btn,
body.tool-page .xp-ghost,
body.tool-page .icon-btn,
body.tool-page .mini {
  border-color: #cfdddf;
  background: #fff;
  color: #46616a;
}
body.tool-page .ghost:hover,
body.tool-page .ghost-btn:hover,
body.tool-page .xp-ghost:hover,
body.tool-page .icon-btn:hover,
body.tool-page .mini:hover {
  border-color: var(--ui-primary-line);
  background: var(--ui-primary-soft);
  color: var(--ui-primary-hover);
}

/* 结果页：卡片层级和操作区统一，减少“大白块 + 小字”感。 */
body.xz-view-result > #app.app-shell,
body.xz-view-result > main#app,
body.xz-view-result > .shell { max-width: var(--xz-workspace-max) !important; }
body.xz-view-result .xp-result-head,
body.xz-view-result .result-card,
body.xz-view-result .card,
body.xz-view-result .xp-card,
body.xz-view-result .panel {
  border-color: color-mix(in srgb, var(--ui-border) 78%, var(--ui-primary-line));
}
body.xz-view-result .xp-result-head {
  padding: 22px 24px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 0%, rgb(22 124 128 / 9%), transparent 220px),
    #fff;
}
body.xz-view-result .result-hero {
  position: relative;
  margin-bottom: 18px;
  padding: 4px 0 18px 14px;
}
body.xz-view-result .result-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  bottom: 19px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--ui-primary), #79b9b6);
}
body.xz-view-result .rh-name { font-weight: 720; }
body.xz-view-result .sec-h,
body.xz-view-result .xp-section-title,
body.xz-view-result .eb-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ui-heading);
  font-weight: 700;
  letter-spacing: .06em;
}
body.xz-view-result .sec-h::before,
body.xz-view-result .xp-section-title::before,
body.xz-view-result .eb-title::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 99px;
  background: var(--ui-primary);
  flex: 0 0 auto;
}
body.xz-view-result .meta-grid > div,
body.xz-view-result .xp-meta > div,
body.xz-view-result .xp-mini,
body.xz-view-result .bs-main > div {
  border: 1px solid #e1e9eb;
  background: #fafcfc;
  box-shadow: none;
}
body.xz-view-result .narrative,
body.xz-view-result .xp-para,
body.xz-view-result .detail-lines { color: #344d55; }
body.xz-view-result .narrative p,
body.xz-view-result .xp-para { line-height: 1.9; }

/* 结果标签：横向滚动时保持可读，激活项对比更高。 */
body.tool-page .result-tabs,
body.tool-page .xp-tabs {
  gap: 7px;
  padding: 6px;
  border: 1px solid #dce6e8;
  border-radius: 12px;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 4px 16px rgb(27 58 66 / 4%);
}
body.tool-page .rt-btn,
body.tool-page .xp-tabs button {
  border: 0 !important;
  border-radius: 9px;
  background: transparent !important;
  color: var(--ui-muted);
}
body.tool-page .rt-btn.on,
body.tool-page .xp-tabs button.on,
body.tool-page .xp-tabs button[aria-pressed="true"] {
  background: var(--ui-primary-soft) !important;
  color: var(--ui-primary-hover) !important;
  box-shadow: inset 0 0 0 1px var(--ui-primary-line);
}

/* 核心盘面容器加强边界，不改变各算法/定位。 */
body.tool-page .qm-board,
body.tool-page .ly-board,
body.tool-page .xp-table,
body.tool-page .zw-grid,
body.tool-page .lr-grid,
body.tool-page .wheel-card,
body.tool-page .board-wrap {
  scrollbar-color: #b9cccf transparent;
  scrollbar-width: thin;
}
body.tool-page .qm-cell,
body.tool-page .zw-cell,
body.tool-page .lr-cell,
body.tool-page .gua-card,
body.tool-page .primary-gua,
body.tool-page .ty-card,
body.tool-page .guide-card {
  border-color: #dce6e8;
}

/* 历史/次要内容更轻，避免和核心结果抢层级。 */
body.tool-page .hist-mini,
body.tool-page details.ref,
body.tool-page .ref {
  background: rgb(255 255 255 / 76%);
  box-shadow: none;
}
body.tool-page .hm-item,
body.tool-page .hm-row { transition: background .16s ease, border-color .16s ease; }
body.tool-page .hm-item:hover,
body.tool-page .hm-row:hover {
  background: var(--ui-primary-soft);
  border-color: var(--ui-primary-line);
}

/* 浮动按钮使用清晰的实心图标承载，保持不遮挡内容。 */
body.tool-page .xz-fab button {
  border: 1px solid #d5e1e3;
  background: rgb(255 255 255 / 94%);
  color: var(--ui-primary-hover);
  box-shadow: 0 8px 24px rgb(27 58 66 / 10%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* 塔罗与占星：保留模块个性，但颜色和卡片密度回归全站体系。 */
body[data-tool="tarot"] .panel,
body[data-tool="tarot"] .daily,
body[data-tool="astrology"] .card {
  border-color: color-mix(in srgb, var(--ui-border) 78%, var(--ui-primary-line));
}
body[data-tool="tarot"] .spread-card:hover,
body[data-tool="astrology"] .bt-card:hover {
  border-color: var(--ui-primary-line);
  box-shadow: 0 8px 20px rgb(27 58 66 / 7%);
}

@media (min-width: 900px) {
  body.xz-view-form > #app.app-shell,
  body.xz-view-form > main#app,
  body.xz-view-form > .shell { padding-bottom: 72px; }
  body.xz-view-form .xp-form { padding: 28px; }
  body.xz-view-form .xz-meihua-form { padding: 24px !important; }
  body.xz-view-result .result-card,
  body.xz-view-result .xp-card { padding: 28px; }
}

@media (max-width: 760px) {
  body.tool-page > #app.app-shell,
  body.tool-page > main#app,
  body.tool-page > .shell {
    padding-top: 4px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  body.tool-page .topbar,
  body.tool-page .xp-top {
    min-height: 54px;
    margin-bottom: 10px;
    padding: 6px 0;
  }
  body.tool-page .tb-zh,
  body.tool-page .xp-title b { font-size: 19px; }
  body.xz-view-form .xp-page:has(> .xp-form) > .xp-hero {
    margin-bottom: 8px;
    padding: 6px 2px 10px;
  }
  body.xz-view-form .xp-page:has(> .xp-form) > .xp-hero .xp-seal { width: 42px; height: 42px; }
  body.xz-view-form .xp-page:has(> .xp-form) > .xp-hero h1 { font-size: 20px; }
  body.xz-view-form .xp-page:has(> .xp-form) > .xp-hero p { font-size: 11px; }
  body.xz-view-form .xp-form,
  body.xz-view-form .xz-meihua-form {
    padding: 14px !important;
    border-radius: 15px !important;
    box-shadow: 0 8px 26px rgb(27 58 66 / 6%) !important;
  }
  body.tool-page .xp-field label,
  body.tool-page .fld-l,
  body.tool-page .field-label,
  body.tool-page label.fld > span { font-size: 11.5px; }
  body.tool-page .result-tabs,
  body.tool-page .xp-tabs {
    top: 54px;
    margin-left: -2px;
    margin-right: -2px;
    padding: 4px;
    border-radius: 10px;
  }
  body.xz-view-result .xp-result-head { padding: 14px; border-radius: 14px; }
  body.xz-view-result .result-card,
  body.xz-view-result .xp-card,
  body.xz-view-result .card { border-radius: 14px; }
  body.xz-view-result .result-hero { padding-left: 11px; }
  body.xz-view-result .result-actions,
  body.xz-view-result .xp-actions { gap: 7px; }
}

@media (max-width: 520px) {
  body.tool-page > #app.app-shell,
  body.tool-page > main#app,
  body.tool-page > .shell {
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
  }
  body.xz-view-form .xp-page:has(> .xp-form) > .xp-hero { display: none !important; }
  body.xz-view-form .xp-form,
  body.xz-view-form .xz-meihua-form { padding: 12px 11px !important; }
  body.xz-view-form .xp-grid2,
  body.xz-view-form .xp-grid3 { gap: 8px; }
  body.tool-page .fld input,
  body.tool-page .fld select,
  body.tool-page .fld textarea,
  body.tool-page .xp-field input,
  body.tool-page .xp-field select,
  body.tool-page .xp-field textarea,
  body.tool-page .q-input { min-height: 43px; }
  body.tool-page .xp-submit,
  body.tool-page .cast-btn,
  body.tool-page .main-btn { min-height: 47px; }
  body.xz-view-result .sec-h,
  body.xz-view-result .xp-section-title,
  body.xz-view-result .eb-title { font-size: 14px; }
}