/* ─── 龙水 3D · 山水形势（浅色玻璃主题，对齐起名测名视觉） ─── */
* { box-sizing: border-box; margin: 0; padding: 0; }
.hidden{display:none !important;}
[hidden]{display:none !important;}

:root {
  --ink: #2c3e5d;
  --ink-soft: rgba(44, 62, 93, .72);
  --ink-mute: rgba(44, 62, 93, .5);
  --panel: rgba(255, 255, 255, .72);
  --panel-deep: rgba(255, 255, 255, .62);
  --panel-line: rgba(255, 255, 255, .9);
  --line-soft: rgba(44, 62, 93, .12);
  --bright: #2f7ce8;
  --bright-deep: #1f5fd6;
  --gold: #b8862c;
  --ok: #2fa864;
  --warn: #e2574a;
}

html, body { height: 100%; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  background: #eaf1f9;
  position: relative;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 560px at 50% -8%, rgba(255, 255, 255, .95), transparent 62%),
    radial-gradient(900px 480px at 12% 88%, rgba(147, 197, 253, .22), transparent 58%),
    radial-gradient(900px 480px at 88% 92%, rgba(160, 150, 250, .16), transparent 58%),
    linear-gradient(180deg, #f2f7fd 0%, #e7eff9 46%, #dbe8f6 100%);
}

/* ── 顶栏 ── */
.top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 顶栏压紧：垂直方向每一像素都让给画布 */
  padding: 10px 16px 4px;
}
.link-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(44, 62, 93, .8);
  text-decoration: none;
  font-size: 13.5px;
  padding: 5px 10px 5px 6px;
  border-radius: 12px;
  transition: background .15s;
}
.link-back:hover { background: rgba(255, 255, 255, .7); }
.logo-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ink);
}

/* ── 页面容器 ── */
.page {
  max-width: 1560px;
  margin: 0 auto;
  padding: 4px 16px 8px;
}
.seal-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-mute);
  letter-spacing: .6px;
  padding: 4px 0 14px;
}

.layout {
  display: grid;
  /* 左列收窄到 316px：宽屏下宽度是画布大小的瓶颈，少占的宽度全让给山水形势图 */
  grid-template-columns: 316px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  min-height: calc(100vh - 132px);
}
/* 气候天时：横跨左右两列，落在形势图下方 */
.climate-card {
  grid-column: 1 / -1;
  padding: 16px 18px 18px;
}

/* ── 卡片 ── */
.card {
  background: var(--panel);
  border: 1.5px solid var(--panel-line);
  border-radius: 26px;
  box-shadow: 0 8px 28px rgba(96, 125, 170, .22);
  backdrop-filter: blur(10px);
}
.form-card { padding: 16px 16px 14px; }
.card-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--line-soft);
}
.card-title { font-size: 15px; font-weight: 700; letter-spacing: .5px; }
.card-sub { font-size: 11.5px; color: var(--ink-mute); }
/* 「展开 / 收起」参数卡：只在窄屏生成后出现（JS 去掉 hidden） */
.fold-btn {
  margin-left: auto;
  padding: 3px 10px;
  border: none; border-radius: 999px;
  font-family: inherit;
  font-size: 11.5px; font-weight: 600;
  color: var(--bright-deep);
  background: rgba(47, 124, 232, .1);
  cursor: pointer;
  white-space: nowrap;
}
.fold-btn:hover { background: rgba(47, 124, 232, .18); }

/* 窄屏参数卡底部的展开/收起：折叠时贴裁剪边，展开时 sticky 在「生成」下方，始终能点到 */
.fold-hint { display: none; }
.form-card .fold-hint:not([hidden]) {
  z-index: 6;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 5px 15px;
  border: 1px solid rgba(47, 124, 232, .22);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px; font-weight: 700;
  color: var(--bright-deep);
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 2px 10px rgba(30, 58, 110, .13);
  cursor: pointer;
  white-space: nowrap;
}
.form-card .fold-hint:not([hidden]):hover { background: #fff; border-color: rgba(47, 124, 232, .4); }
.form-card.is-folded .fold-hint:not([hidden]) {
  position: absolute;
  left: 50%; bottom: 6px;
  transform: translateX(-50%);
  padding: 4px 12px;
  font-size: 11.5px;
}
.form-card:not(.is-folded) .fold-hint:not([hidden]) {
  position: sticky;
  bottom: 8px;
  margin: 10px auto 2px;
  /* 居中：块级容器里用 auto margin */
  display: flex;
  width: max-content;
}

.block { padding: 2px 0 14px; }
.block + .block { border-top: 1px dashed var(--line-soft); padding-top: 12px; }
.block-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--bright-deep);
  letter-spacing: .8px;
  margin-bottom: 9px;
}
.block-label::before {
  content: "";
  width: 3px; height: 13px;
  border-radius: 2px;
  background: linear-gradient(180deg, #3fb9f9, #8d7cf9);
}

/* ── 表单 ── */
.field-row { display: flex; gap: 10px; align-items: flex-end; }
.field-row + .field-row { margin-top: 10px; }
.field { display: block; flex: 1; min-width: 0; }
.field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(44, 62, 93, .82);
  margin-bottom: 6px;
}
.field input,
.field select {
  width: 100%;
  border: 1.5px solid rgba(120, 150, 200, .42);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 14.5px;
  background: var(--panel-deep);
  color: var(--ink);
  font-family: inherit;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c3e5d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
  padding-right: 34px;
}

/* 未选坐山就点生成：坐山框标红抖动，把视线引过去（不弹居中卡片）。
   sit-flag 红框持续保留，选了坐山才由 JS 摘掉；sit-shake 只负责抖一下 */
@keyframes sitShake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}
.sit-shake { animation: sitShake .55s both; }
.sit-flag select {
  border-color: var(--warn) !important;
  box-shadow: 0 0 0 3px rgba(226, 87, 74, .16) !important;
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--bright);
  box-shadow: 0 0 0 3px rgba(47, 124, 232, .16);
}

.face-readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  padding: 8px 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(63, 185, 249, .12), rgba(141, 124, 249, .12));
  border: 1px solid rgba(120, 150, 200, .28);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.face-readout b { font-size: 14px; color: var(--bright-deep); letter-spacing: .5px; }
/* 兼卦文字较长时允许折行，右侧对齐不挤标签 */
.face-readout { flex-wrap: wrap; }
.face-readout b { text-align: right; }

/* ── 坐山度数（勾选框 + 数字框同一行） ── */
.sit-deg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
.chip.chip-deg { flex: 0 0 auto; font-weight: 600; }
.sit-deg-row input[type="number"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 1.5px solid rgba(120, 150, 200, .42);
  border-radius: 14px;
  padding: 9px 12px;
  font-size: 14.5px;
  background: var(--panel-deep);
  color: var(--ink);
  font-family: inherit;
  appearance: textfield;
  -moz-appearance: textfield;
}
.sit-deg-row input[type="number"]::placeholder { color: var(--ink-mute); }
.sit-deg-row input[type="number"]:focus {
  outline: none;
  border-color: var(--bright);
  box-shadow: 0 0 0 3px rgba(47, 124, 232, .16);
}
.sit-deg-row input[type="number"]:disabled { opacity: .5; }

/* 演海分金单独成行 */
.sit-yan-field { display: block; margin-bottom: 2px; }

/* ── 开关 / 胶囊 ── */
.switch-row { display: block; margin-bottom: 10px; }
.switch-label {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: rgba(44, 62, 93, .82);
  margin-bottom: 6px;
}
.switch-label b { color: var(--bright-deep); }
input[type="range"] { width: 100%; accent-color: var(--bright); }

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(120, 150, 200, .38);
  background: rgba(255, 255, 255, .6);
  font-size: 12.5px;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.chip input { accent-color: var(--bright); width: 14px; height: 14px; }
.chip:has(input:checked) {
  border-color: rgba(96, 150, 240, .8);
  background: linear-gradient(160deg, #ffffff 0%, #eef5ff 100%);
  box-shadow: 0 4px 12px rgba(92, 140, 248, .18);
  color: var(--bright-deep);
}

/* ── 按钮 ── */
.btn {
  appearance: none;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }

.btn-primary {
  width: 100%;
  padding: 13px 0;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 4px;
  text-indent: 4px;
  color: #fff;
  background: linear-gradient(90deg, #3fb9f9 0%, #5c8cf8 55%, #8d7cf9 100%);
  box-shadow: 0 6px 20px rgba(92, 140, 248, .38), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.btn-primary:hover { box-shadow: 0 8px 24px rgba(92, 140, 248, .48), inset 0 1px 0 rgba(255, 255, 255, .55); }

.btn.ghost {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .72);
  border: 1.5px solid rgba(120, 150, 200, .38);
  white-space: nowrap;
  flex: 0 0 auto;
  margin-bottom: 1px;
}
.btn.ghost:hover { background: #fff; }

.btn.pill {
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .78);
  border: 1.5px solid rgba(120, 150, 200, .34);
  border-radius: 999px;
}
.btn.pill:hover { background: #fff; color: var(--bright-deep); border-color: rgba(96, 150, 240, .6); }

.actions { margin-top: 4px; }
.hint { text-align: center; font-size: 11.5px; color: var(--ink-mute); margin-top: 9px; }

/* ── 舞台 ── */
.stage-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 14px 14px 10px;
}
/* 宽屏：舞台卡高度只跟画布走，不被左侧那列长表单拉成一整条 */
@media (min-width: 981px) {
  .stage-card { align-self: start; }
}
.stage-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 4px 6px;
}
.stage-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 14.5px; letter-spacing: .5px;
  /* 标题与操作紧挨同一行，中间不拉开空白 */
  flex: 0 0 auto;
  white-space: nowrap;
}
.stage-title b { white-space: nowrap; }
.dot-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: #3fb9f9;
  box-shadow: 0 0 0 4px rgba(63, 185, 249, .18);
}
.stage-acts {
  display: flex; gap: 8px; flex-wrap: nowrap;
  justify-content: flex-start; flex: 0 0 auto;
  min-width: 0;
}
.stage-acts .btn.pill { white-space: nowrap; flex: 0 0 auto; }

/* 形势图区域全屏（Fullscreen API 或 CSS 兜底） */
.stage-card.is-fs,
.stage-card:fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  padding: 10px 12px 8px;
  background: #f4f7fb;
  box-sizing: border-box;
}
.stage-card.is-fs .zs-canvas-wrap,
.stage-card:fullscreen .zs-canvas-wrap {
  flex: 1 1 auto;
  width: 100%;
  /* 用 flex 撑满，勿写死 100vh（全屏里 vh 常不准，画布量到旧高度就会糊） */
  height: auto !important;
  min-height: 0;
  border-radius: 14px;
}
.stage-card.is-fs .stage-head,
.stage-card:fullscreen .stage-head {
  flex: 0 0 auto;
  padding-bottom: 8px;
}
.stage-card.is-fs #scene,
.stage-card:fullscreen #scene {
  width: 100% !important;
  height: 100% !important;
}

.zs-canvas-wrap {
  position: relative;
  width: 100%;
  /* 高度优先撑满一屏：滚轮放大的余量由画布物理框大小决定，框越大放大后越看得全。
     宽高比不再死锁 7:5——盘面投影约 1.39:1，框比例略有出入时取景自动铺满
     较紧的一轴，另一轴只留很窄的边；开销约 145px，按生成后状态行出现时算 */
  height: calc(100vh - 150px);
  min-height: 360px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, #f4f9ff 0%, #e8f1fb 100%);
  border: 1px solid rgba(120, 150, 200, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
#scene {
  display: block; width: 100%; height: 100%;
  /* 画布要独占手指手势：拖 = 转盘面、按住再拖 = 平移，
     不让浏览器抢去做页面滚动 / 双指缩放 / iOS 长按菜单 */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.zs-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 6px;
  align-items: center; justify-content: center;
  color: var(--ink-mute); font-size: 13px;
  pointer-events: none; text-align: center;
}
.zs-empty b { font-size: 15px; color: var(--ink-soft); }

.zs-loading {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(244, 250, 255, .82);
  backdrop-filter: blur(2px);
  font-size: 13px; color: var(--bright-deep);
}
.zs-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(47, 124, 232, .22);
  border-top-color: var(--bright);
  animation: zs-spin .8s linear infinite;
}
@keyframes zs-spin { to { transform: rotate(360deg); } }

/* 进页地图引擎预热遮罩（进度条，不转圈） */
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(244, 248, 252, .94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .32s ease, visibility .32s ease;
}
.boot-splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.boot-splash-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(320px, 86vw);
  padding: 26px 28px 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(120, 150, 200, .28);
  box-shadow: 0 12px 40px rgba(40, 70, 120, .12);
  color: var(--ink-soft, #3a4a5c);
  text-align: center;
  box-sizing: border-box;
}
.boot-splash-card b {
  font-size: 16px;
  letter-spacing: .04em;
  color: var(--ink, #1e2a3a);
  font-weight: 650;
}
.boot-splash-card span {
  font-size: 13px;
  color: var(--ink-mute, #6a7a8c);
}
.boot-progress {
  width: 100%;
  height: 8px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(47, 124, 232, .12);
  overflow: hidden;
}
.boot-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4a9af0, #2f7ce8 55%, #1a6ad4);
}
.boot-progress-bar.is-run {
  animation: boot-bar-fill 3s linear forwards;
}
@keyframes boot-bar-fill {
  from { width: 0%; }
  to { width: 100%; }
}
.boot-progress-pct {
  font-size: 12px;
  font-style: normal;
  color: var(--bright-deep, #2f7ce8);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

/* 图例：条目多（最多十项），强制单行——不换行、不缩字，放不下就横向滑动。
   每个条目自身也 nowrap，安卓浏览器放大字号时不会把「九星三吉」折成两行 */
.zs-legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 4;
  display: flex; gap: 12px; flex-wrap: nowrap;
  max-width: calc(100% - 24px);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(120, 150, 200, .28);
  backdrop-filter: blur(6px);
  font-size: 12px; color: var(--ink-soft);
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.zs-legend::-webkit-scrollbar { display: none; }
.zs-legend > span,
.zs-legend > .leg-flip { flex: 0 0 auto; white-space: nowrap; }
.zs-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dot.long { background: #c08a3e; }
.dot.inw { background: #2f7fe0; }
.dot.outw { background: #d9534f; }
/* 坐向：银色，对应图上的坐向箭头 */
.dot.seat { background: #c8ced6; box-shadow: inset 0 0 0 1px rgba(30, 50, 80, .28); }
.dot.river { background: #3d9ee8; box-shadow: 0 0 0 2px rgba(61, 158, 232, .18); }
.dot.dragon { background: #2a9d8f; }
.dot.tiger { background: #c4c4c4; border: 1px solid #8a8a8a; box-sizing: border-box; }
.dot.xun { background: linear-gradient(90deg, #e74c3c 0 50%, #d4a017 50% 100%); }
.dot.peak { background: #c45c26; }
.dot.anshan { background: #1a7a6e; }
.dot.chaoshan { background: #c45c26; }
/* 九星图例：一颗小圆点用九星主色做环，示意「不同星不同色」 */
.dot.star {
  background: conic-gradient(#1e8449 0 25%, #b26a00 0 50%, #1565c0 0 75%, #7b1fa2 0 100%);
}

/* 「水流反向」：DEM 判错时的兜底，做得像图例里的一枚小药丸 */
.leg-flip {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(61, 158, 232, .45);
  background: rgba(61, 158, 232, .10);
  color: #1f6ea8;
  font: inherit; font-size: 11.5px; line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.leg-flip[hidden] { display: none; }
.leg-flip:hover { background: rgba(61, 158, 232, .18); }
.leg-flip.is-on {
  border-color: #d98324; color: #a55c00;
  background: rgba(217, 131, 36, .14);
}

/* ── 居中轻提示（校验未通过时弹出） ── */
.toast {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 12000;
  max-width: min(86vw, 340px);
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(120, 150, 200, .4);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 14px 34px rgba(40, 60, 100, .22);
  pointer-events: none;
  animation: toast-in .18s ease-out;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ── 窄屏 ── */
@media (max-width: 980px) {
  .layout {
    /* minmax(0,1fr)：1fr 的自动最小尺寸是 min-content，
       长地名（nowrap + ellipsis）会把整列撑宽、把卡片顶出屏幕 */
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .page { padding-bottom: 18px; }
  /* 窄屏（手机竖屏）恢复按盘面比例定形：height:auto 让 aspect-ratio 主导，
     否则全宽 x (视口-150) 的超高框会让画面上下空一大截 */
  .zs-canvas-wrap { height: auto; aspect-ratio: 7 / 5; min-height: 0; }
  .seal-note { font-size: 11.5px; padding-bottom: 10px; }
  .form-card { padding: 14px 14px 12px; }
  .actions { position: sticky; bottom: 6px; z-index: 5; }
  .btn-primary { box-shadow: 0 8px 22px rgba(92, 140, 248, .45); }
  /* 窄屏：渲染三个勾选强制一行，放不下就横向滚动，绝不折行 */
  .chip-row { flex-wrap: nowrap; gap: 6px; overflow-x: auto; }
  .chip { padding: 6px 9px; font-size: 11.5px; gap: 4px; flex: 0 0 auto; }
  /* 窄屏仍单行紧挨：收紧字号与间距 */
  .stage-head { gap: 6px; flex-wrap: nowrap; justify-content: flex-start; }
  .stage-title { font-size: 13.5px; letter-spacing: 0; flex: 0 0 auto; }
  .stage-acts { gap: 6px; flex: 0 0 auto; justify-content: flex-start; flex-wrap: nowrap; }
  .stage-acts .btn.pill { padding: 5px 9px; font-size: 12px; letter-spacing: 0; }
  /* 图例同一条：收间距与字号，尽量让主流十项少滑一点，但仍严格单行。
     整条铺满画布宽度（left/right 都定），右边留 26px 内边距 + 20px 渐隐蒙版，
     视觉上「这边还有」，滑到底时最后一字也不会被蒙版吃掉 */
  .zs-legend {
    left: 8px; right: 8px; bottom: 8px; max-width: none;
    gap: 9px; padding: 6px 26px 6px 10px; font-size: 11.5px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), rgba(0, 0, 0, 0));
    mask-image: linear-gradient(90deg, #000 calc(100% - 20px), rgba(0, 0, 0, 0));
  }
  .zs-legend span { gap: 4px; }

  /* 生成后参数卡收成一条标题带，尽量把高度留给形势图；点「展开」还原 */
  .form-card.is-folded {
    position: relative;
    overflow: hidden;
    padding-bottom: 36px;
    transition: max-height .28s ease;
  }
  .form-card.is-folded .card-head {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
  .form-card.is-folded .card-sub { display: none; }
  .form-card.is-folded::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .97));
    pointer-events: none;
  }
  /* 折叠状态把画布拉高，真正把腾出来的空间给形势图 */
  .form-card.is-folded ~ .stage-card .zs-canvas-wrap {
    height: 72vh;
    aspect-ratio: auto;
  }
  /* 折叠后「生成形势图」不再是 sticky：否则它会浮在裁剪边上盖住下方文字 */
  .form-card.is-folded .actions {
    position: static;
  }
}

@media (max-width: 420px) {
  .logo-title { font-size: 17px; }
  .field-row.two-col { gap: 8px; }
  /* 小屏再收一档：三个按钮加标题要在 320~360px 里排成一行 */
  .stage-title { font-size: 13px; }
  .stage-acts { gap: 5px; }
  .stage-acts .btn.pill { padding: 5px 7px; font-size: 11.5px; }
  .zs-legend { gap: 8px; font-size: 11px; padding: 5px 24px 5px 9px; }
  .zs-legend .dot { width: 8px; height: 8px; }
}

/* ══════════ 穴场位置卡片 ══════════ */
.loc-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1.5px solid rgba(120, 150, 200, .42);
  background: linear-gradient(160deg, #ffffff 0%, #f3f9ff 100%);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
/* 脚本还没就绪时点过这张卡片：右侧已换成「加载中…」，这里再给个进行中的手势 */
.loc-card[data-wait] { cursor: progress; }
.loc-card[data-wait] .loc-ico { opacity: .45; }
.loc-card:hover {
  border-color: rgba(96, 150, 240, .72);
  box-shadow: 0 6px 16px rgba(92, 140, 248, .18);
}
.loc-card:active { transform: translateY(1px); }
.loc-ico {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; color: #fff;
  background: linear-gradient(135deg, #3fb9f9, #5c8cf8);
  box-shadow: 0 4px 10px rgba(92, 140, 248, .36);
}
.loc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* 名字与距离同一行：名字可压缩打省略号，距离永远完整（橙色，短一档字号） */
.loc-line { display: flex; align-items: baseline; gap: 2px; min-width: 0; }
.loc-main b {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.loc-dist {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 11.5px; font-weight: 600;
  color: #c1701c;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.loc-main i {
  font-style: normal; font-size: 11.5px; color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.loc-act {
  flex: 0 0 auto;
  font-size: 11.5px; font-weight: 600;
  color: var(--bright-deep);
  background: rgba(47, 124, 232, .1);
  padding: 5px 9px; border-radius: 999px;
  white-space: nowrap;
}
/* 窄屏下按钮收成「选点」，把宽度让给地名 */
.loc-act-short { display: none; }
@media (max-width: 560px) {
  .loc-act-long { display: none; }
  .loc-act-short { display: inline; }
  .loc-act { padding: 5px 8px; }
}
.chip-manual { margin-top: 10px; }
.manual-row, .span-row { margin-top: 10px; }

/* ══════════ 选点弹窗 ══════════ */
.picker-mask {
  position: fixed; inset: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  /* 不用 backdrop-filter：盖在 three.js 画布上会严重卡顿，点开选点窗像「没反应」 */
  background: rgba(28, 42, 66, .52);
}
.picker {
  width: min(620px, 100%);
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .97);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(30, 48, 80, .34);
  overflow: hidden;
}
.picker-head { position: relative; padding: 16px 18px 10px; }
.picker-head b { font-size: 16px; letter-spacing: .5px; }
.picker-sub { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-mute); }
.picker-x {
  position: absolute; right: 12px; top: 12px;
  width: 30px; height: 30px;
  border: none; border-radius: 50%;
  background: rgba(44, 62, 93, .06);
  color: var(--ink-soft);
  font-size: 18px; line-height: 1; cursor: pointer;
  font-family: inherit;
}
.picker-x:hover { background: rgba(44, 62, 93, .12); }

/* 搜索区（含下拉列表）必须压住地图里的一切浮层：pk-map 是无 z-index 的 relative，
   地图内的 .pk-hud(z6)/.pk-compass(z5) 会跑到外层来比，这里取 9 才盖得住 */
.picker-search-wrap { position: relative; z-index: 9; }

.picker-search { display: flex; gap: 8px; padding: 0 18px 10px; }
.picker-search input {
  flex: 1; min-width: 0;
  border: 1.5px solid rgba(120, 150, 200, .42);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 14px; font-family: inherit;
  color: var(--ink); background: #fff;
}
.picker-search input:focus {
  outline: none;
  border-color: var(--bright);
  box-shadow: 0 0 0 3px rgba(47, 124, 232, .16);
}
.btn.small-primary {
  padding: 10px 16px;
  font-size: 13.5px; font-weight: 600;
  color: #fff; border-radius: 14px;
  background: linear-gradient(90deg, #3fb9f9 0%, #5c8cf8 60%, #8d7cf9 100%);
  box-shadow: 0 5px 14px rgba(92, 140, 248, .32);
  white-space: nowrap;
}

.pk-list {
  position: absolute; left: 18px; right: 18px; top: calc(100% - 4px);
  z-index: 8;
  max-height: 232px; overflow: auto;
  margin: 0;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(44, 62, 93, .18);
}
.pk-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px;
  border: none; border-bottom: 1px solid rgba(44, 62, 93, .07);
  background: none; font-family: inherit; cursor: pointer;
}
.pk-item:last-child { border-bottom: none; }
.pk-item:hover, .pk-item.on { background: rgba(47, 124, 232, .09); }
.pk-item.on b { color: var(--bright-deep); }
.pk-item b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pk-item span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-mute); }
.pk-empty { padding: 14px; text-align: center; font-size: 12.5px; color: var(--ink-mute); }
/* 「最近使用」分组标题：贴在列表顶部，和搜索联想结果区分开 */
.pk-hist-tip {
  padding: 9px 14px 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  color: var(--bright-deep);
  background: linear-gradient(180deg, #f4f8ff, #ffffff);
  border-bottom: 1px dashed var(--line-soft);
}

/* 「最近使用」每条右侧挂一个 × 删除：外层是行容器，行主体（点名 + 地址）仍是按钮 */
.pk-item.pk-hist { display: flex; align-items: center; padding: 0; }
.pk-item.pk-hist .pk-item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  text-align: left;
  padding: 9px 4px 9px 12px;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.pk-item.pk-hist .pk-x {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  border: none;
  border-radius: 9px;
  background: none;
  color: rgba(44, 62, 93, .42);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.pk-item.pk-hist .pk-x:hover { background: rgba(226, 87, 74, .12); color: var(--warn); }

.pk-map {
  position: relative;
  margin: 0 18px;
  /* 桌面按视口自适应：矮窗口收缩、高窗口最高 400px（原固定 320px 偏小） */
  height: min(400px, 52vh);
  border-radius: 18px;
  overflow: hidden;
  background: #dfe8ef;
  cursor: grab;
  touch-action: none;
  box-shadow: inset 0 0 0 1px rgba(44, 62, 93, .12);
}
.pk-map.dragging { cursor: grabbing; }
/* 瓦片未到时的加载态：避免弹窗打开后地图一片空白、看着像「点了没反应」 */
.pk-loading {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(244, 250, 255, .74);
  font-size: 13px; color: var(--bright-deep);
  pointer-events: none;
}
.pk-tiles {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  will-change: transform;
}
/* 指北针：针尖始终指向屏幕上的真北（跟着盘面一起转）。
   盘面默认转过 180° 时它会朝下——这正是「南上北下」的直观提示 */
.pk-compass {
  position: absolute; right: 12px; top: 12px; z-index: 5;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 2px 8px rgba(30, 58, 110, .2);
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform;
}
.pk-compass i {
  position: absolute; left: 50%; top: 5px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-bottom: 13px solid #d8443c;
}
.pk-compass b {
  position: absolute; left: 0; right: 0; bottom: 7px;
  text-align: center;
  font-size: 10.5px; font-weight: 800; line-height: 1;
  color: #b83a33;
}
.pk-tile {
  position: absolute;
  width: 256px; height: 256px;
  user-select: none;
  pointer-events: none;
}
/* 中心十字：细长、只有一根线宽，中心留 12px 空档便于对准，不画圆 */
.pk-cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.pk-cross::before,
.pk-cross::after {
  content: ""; position: absolute;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6));
}
/* 横线：全长 92px，中间空 12px */
.pk-cross::before {
  left: -46px; top: -.5px;
  width: 92px; height: 1px;
  background: linear-gradient(to right,
    #ff4d3d 0 40px, transparent 40px 52px, #ff4d3d 52px 92px);
}
/* 竖线：全长 92px，中间空 12px */
.pk-cross::after {
  top: -46px; left: -.5px;
  width: 1px; height: 92px;
  background: linear-gradient(to bottom,
    #ff4d3d 0 40px, transparent 40px 52px, #ff4d3d 52px 92px);
}
/* ── 旋转 / 缩放按钮 ── */
.pk-zoom {
  position: absolute; right: 10px; bottom: 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.pk-zoom button {
  width: 36px; height: 36px;
  border: none; border-radius: 11px;
  background: rgba(255, 255, 255, .94);
  color: var(--ink); font-size: 19px; line-height: 1;
  cursor: pointer; font-family: inherit;
  touch-action: manipulation;
  box-shadow: 0 3px 10px rgba(30, 48, 80, .24);
}
.pk-zoom button:hover { background: #fff; }
.pk-zoom button:active { transform: scale(.94); }
/* 旋转键与缩放键区分开，避免误点 */
#pkRotL, #pkRotR {
  background: rgba(232, 244, 255, .94);
  color: #1e5aa8;
  font-size: 18px;
}
#pkRotL:hover, #pkRotR:hover { background: #fff; }

/* 地图上的实时山向浮层：边转边看，和底部那行读数同时显示。
   纯 DOM 屏幕浮层（不画进 canvas），所以导出/生成的形势图里不会出现。
   版式：单行胶囊「坐山 180.5° · 丙山壬向」。坐山段青绿、朝向段暖金，
   靠颜色区分两块，不再用大字号堆层级（旧版 19px 两行占 58px 太高）。 */
.pk-hud {
  position: absolute; left: 50%; top: 12px;
  transform: translateX(-50%);
  z-index: 6;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  max-width: calc(100% - 120px);   /* 左右各留 60px，避开右上角指北针 */
  padding: 5px 11px 6px;
  border-radius: 999px;
  background: rgba(16, 28, 44, .66);
  -webkit-backdrop-filter: blur(6px) saturate(1.15);
  backdrop-filter: blur(6px) saturate(1.15);
  box-shadow: 0 2px 10px rgba(10, 22, 40, .3),
              inset 0 0 0 1px rgba(255, 255, 255, .12);
  color: #fff;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
/* 小标签：字距拉开，弱化处理 */
.pk-hud-k {
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em;
  color: rgba(168, 202, 234, .85);
}
/* 坐山度数：青绿。比朝向略重一档即可，不再拔到 19px */
.pk-hud-deg {
  display: inline-flex; align-items: baseline;
  font-size: 14px; font-weight: 800; line-height: 1;
  letter-spacing: .2px;
  color: #6ee7c8;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .42);
}
.pk-hud-deg b { font-weight: 800; }   /* 数字重、单位轻，读数更立得住 */
.pk-hud-u {
  font-style: normal;
  margin-left: 1px;
  font-size: 10.5px; font-weight: 700;
  color: rgba(110, 231, 200, .78);
}
/* 两段之间的分隔点：细弱，起视觉断句作用 */
.pk-hud-sep {
  align-self: center;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
}
/* 坐山朝向：暖金，与青绿度数形成冷暖对照 */
.pk-hud-shan {
  font-size: 12px; font-weight: 700; line-height: 1;
  color: #ffd08a;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  overflow: hidden; text-overflow: ellipsis;
}
.pk-hud-shan em { font-style: normal; font-weight: 700; color: #ffa94d; }
.pk-hud.is-idle { display: none; }

.pk-attrib {
  position: absolute; left: 8px; bottom: 8px;
  max-width: calc(100% - 104px);
  padding: 2px 7px;
  border-radius: 7px;
  background: rgba(20, 32, 48, .34);
  font-size: 10.5px; color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.picker-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 12px 18px 16px;
  position: relative; z-index: 9;   /* 联想列表为浮层时，按钮始终可点 */
}
.pk-read {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; flex: 1 1 auto;
}
.pk-coord {
  font-size: 13px; font-weight: 600;
  color: var(--bright-deep);
  font-variant-numeric: tabular-nums;
}
/* 经纬度下方的实时山向读数：度数 + 坐山朝向 +（兼卦） */
.pk-sit {
  display: flex; align-items: baseline; gap: 6px;
  flex-wrap: wrap;
  font-size: 12.5px; font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pk-sit b {
  font-size: 13.5px;
  color: var(--bright);
  letter-spacing: .2px;
}
.pk-sit em {
  font-style: normal; font-weight: 700;
  color: #c1701c;
}
.pk-btns { display: flex; gap: 8px; flex: 0 0 auto; }

@media (max-width: 560px) {
  .picker-mask { padding: 10px; align-items: flex-end; }
  /* 弹窗直接撑到可用高度：地图用 flex 吃掉搜索栏与底部读数之间的全部剩余空间 */
  .picker {
    border-radius: 20px;
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
  }
  @supports (height: 100dvh) {
    .picker {
      height: calc(100dvh - 20px);
      max-height: calc(100dvh - 20px);
    }
  }
  .pk-map { flex: 1 1 auto; min-height: 0; height: auto; margin: 0 12px; }
  .picker-search { padding: 0 12px 10px; }
  /* 窄屏：列表限高，别盖住底部「使用此位置」 */
  .pk-list { left: 12px; right: 12px; max-height: 30vh; }
  .picker-foot { padding: 10px 12px 14px; flex-wrap: wrap; }
  .pk-read { flex: 1 1 100%; }
  .pk-coord { font-size: 12px; }
  .pk-sit { font-size: 12px; }
  .pk-btns { flex: 1 1 100%; justify-content: flex-end; }
}

/* 矮视口（手机横屏、分屏小窗）：桌面那套 min(400px,52vh) 会把底部按钮挤出弹窗，
   这里统一改成「弹窗撑满 + 地图吃剩余高度」 */
@media (max-height: 560px) {
  .picker-mask { padding: 8px; }
  .picker {
    height: calc(100vh - 16px);
    max-height: calc(100vh - 16px);
  }
  .pk-map { flex: 1 1 auto; min-height: 120px; height: auto; }
  .pk-list { max-height: 46vh; }
}

/* ── 气候天时 ── */
.climate-card .card-head {
  align-items: center;
}
.climate-placeholder {
  font-size: 13px;
  color: var(--ink-mute);
  padding: 18px 2px 12px;
  line-height: 1.55;
  text-align: center;
}
.climate-panels {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.climate-block {
  background: linear-gradient(165deg, rgba(255, 255, 255, .88) 0%, rgba(243, 248, 255, .72) 100%);
  border: 1px solid rgba(120, 150, 200, .22);
  border-radius: 18px;
  padding: 14px 14px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
.climate-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--ink);
  margin-bottom: 12px;
}
.climate-block-title::before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, #5aa2f0, #2f7ce8);
  flex: 0 0 auto;
}
.climate-block--fc .climate-block-title::before {
  background: linear-gradient(180deg, #6bc48a, #2fa864);
}
.climate-block-title em {
  font-style: normal;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--ink-mute);
  margin-left: 2px;
}
.climate-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.climate-stat {
  position: relative;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(120, 150, 200, .2);
  border-radius: 14px;
  padding: 12px 12px 11px;
  min-width: 0;
  overflow: hidden;
}
.climate-stat::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(47, 124, 232, .55), rgba(47, 124, 232, .15));
}
.climate-stat:nth-child(2)::after {
  background: linear-gradient(180deg, rgba(47, 168, 100, .55), rgba(47, 168, 100, .15));
}
.climate-stat:nth-child(3)::after {
  background: linear-gradient(180deg, rgba(226, 140, 74, .55), rgba(226, 140, 74, .15));
}
.climate-stat:nth-child(4)::after {
  background: linear-gradient(180deg, rgba(110, 140, 220, .55), rgba(110, 140, 220, .15));
}
.climate-stat b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--bright-deep);
  letter-spacing: .2px;
  line-height: 1.25;
  padding-left: 6px;
}
.climate-stat span {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--ink-mute);
  padding-left: 6px;
}
.climate-forecast {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
}
.climate-day {
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(120, 150, 200, .2);
  border-radius: 14px;
  padding: 10px 6px 10px;
  text-align: center;
  min-width: 0;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.climate-day:hover {
  border-color: rgba(47, 124, 232, .35);
  box-shadow: 0 6px 16px rgba(96, 125, 170, .16);
  transform: translateY(-1px);
}
.climate-day .cd-date {
  font-size: 11px;
  color: var(--ink-mute);
  margin-bottom: 2px;
  font-variant-numeric: tabular-nums;
}
.climate-day .cd-ico-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  margin: 2px 0 1px;
}
.climate-day .cd-ico { display: block; }
.climate-day .cd-wx {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.climate-day .cd-temp {
  font-size: 13px;
  font-weight: 700;
  color: var(--bright-deep);
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.climate-day .cd-rain {
  margin-top: 5px;
  font-size: 11px;
  color: var(--ok);
  font-variant-numeric: tabular-nums;
}
.climate-foot {
  margin: 2px 0 0;
  padding: 4px 0 2px;
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.45;
  letter-spacing: .8px;
  text-align: center;
}
@media (max-width: 1100px) {
  .climate-forecast { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .climate-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .climate-block { padding: 12px 11px 10px; }
  .climate-forecast {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .climate-day {
    flex: 0 0 88px;
  }
}


/* ══════════ 理气（布局对齐寻穴卡） ══════════ */
.liqi-card { padding: 14px 16px 16px; }
.liqi-card .card-head { align-items: center; gap: 10px; margin-bottom: 10px; }
.liqi-card .btn.small-primary { box-shadow: 0 3px 10px rgba(92, 140, 248, .26); }
.liqi-status {
  flex: 1; min-width: 0; font-size: 12px; color: var(--ink-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.liqi-facts {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 12px; padding: 10px 11px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(241, 247, 255, .9));
  border: 1px solid rgba(47, 124, 232, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
.liqi-chip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  padding: 5px 10px 5px 8px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.35;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(44, 62, 93, .10);
  box-shadow: 0 1px 2px rgba(44, 62, 93, .04);
}
.liqi-chip-k {
  flex: 0 0 auto;
  font-style: normal; font-weight: 650; font-size: 11px;
  letter-spacing: .4px;
  color: #1f5fd6;
  background: rgba(47, 124, 232, .12);
  border-radius: 6px;
  padding: 2px 6px;
  line-height: 1.25;
}
.liqi-chip-v {
  min-width: 0;
  font-weight: 600; color: var(--ink);
  word-break: break-word;
}
.liqi-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 2px;
  max-height: min(360px, 52vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
}
.liqi-row {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, .55);
  text-align: left;
  color: inherit; font: inherit;
}
.liqi-row.is-ok { border-color: rgba(46, 125, 50, .28); background: rgba(46, 125, 50, .05); }
.liqi-row.is-bad { border-color: rgba(198, 40, 40, .28); background: rgba(198, 40, 40, .05); }
.liqi-row.is-mid { border-color: rgba(47, 111, 237, .28); background: rgba(47, 111, 237, .05); }
.liqi-head {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.liqi-idx {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
  color: var(--ink-mute); background: rgba(44, 62, 93, .06);
  border: 1px solid var(--line-soft);
}
.liqi-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 13.5px; font-weight: 650; color: var(--ink);
  line-height: 1.35;
}
.liqi-tag {
  flex: 0 0 auto;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 1.2;
  white-space: nowrap;
}
.liqi-detail {
  display: grid; gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(44, 62, 93, .035);
  border: 1px solid rgba(44, 62, 93, .06);
}
.liqi-line {
  margin: 0;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-soft);
  white-space: pre-wrap; word-break: break-word;
}
.liqi-segs {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.liqi-seg {
  display: inline-flex; align-items: center;
  max-width: 100%;
  padding: 3px 8px; border-radius: 8px;
  font-size: 12px; font-weight: 600; line-height: 1.35;
  color: var(--ink);
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(44, 62, 93, .10);
  word-break: break-word;
}
.liqi-tag.st-ok { color: #1b5e20; background: rgba(46, 125, 50, .12); }
.liqi-tag.st-bad { color: #b71c1c; background: rgba(198, 40, 40, .12); }
.liqi-tag.st-mid { color: #1a56db; background: rgba(47, 111, 237, .12); }
.liqi-tag.st-muted { color: var(--ink-mute); background: rgba(44, 62, 93, .06); }
.liqi-empty { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-mute); }

/* ══════════ 寻穴 ══════════ */
.dot.xue { background: #e67e22; }
/* 「寻穴」标题后的「·试验版」高亮标（淡橙底 + 深橙字，字号小于标题不抢视线） */
.xue-card .xue-beta {
  margin-left: 4px; padding: 1px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: #b8531a;
  background: rgba(230, 126, 34, .14);
  border-radius: 6px;
}
/* 与 form-card / climate-card 统一卡片内距（原先漏了，空态时按钮会贴边被裁） */
.xue-card { padding: 14px 16px 16px; }
/* 卡片头：标题/状态/按钮同一行垂直居中（全局 .card-head 是 baseline，配大按钮会压过虚线） */
.xue-card .card-head { align-items: center; gap: 10px; margin-bottom: 10px; }
.xue-card .btn.small-primary { box-shadow: 0 3px 10px rgba(92, 140, 248, .26); }
/* 空态（无列表、无提示）：标题行就是全部内容，虚线分隔与下边距一起去掉，避免卡片底部拖一截空白 */
.xue-card:has(#xueList[hidden]):has(#xueEmpty[hidden]) .card-head {
  padding-bottom: 0; margin-bottom: 0; border-bottom: 0;
}
.xue-status { flex: 1; min-width: 0; font-size: 12px; color: var(--ink-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xue-list {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 6px; max-height: 380px; overflow-y: auto;
  overscroll-behavior: contain; padding-right: 2px;
}
/* 行 = 网格三列：序号徽标 / 主信息（两行）/ 查看，列对齐形成表格式排布 */
.xue-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  text-align: left;
  color: inherit; font: inherit;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.xue-row:hover {
  border-color: rgba(47, 124, 232, .5);
  background: #fff;
  box-shadow: 0 3px 12px rgba(44, 62, 93, .08);
}
.xue-row:hover .xue-go { color: var(--bright-deep); }
.xue-row:hover .xue-idx { background: rgba(230, 126, 34, .16); border-color: rgba(230, 126, 34, .42); }
/* 序号：定宽圆形徽标，两位数自动撑成胶囊，绝不溢出圈外 */
.xue-idx {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 23px; height: 23px; padding: 0 7px;
  border-radius: 999px;
  border: 1px solid rgba(230, 126, 34, .32);
  background: rgba(230, 126, 34, .1);
  font-size: 12px; font-weight: 700; line-height: 1;
  color: #d97314;
  font-variant-numeric: tabular-nums;
  transition: background .15s ease, border-color .15s ease;
}
.xue-main { display: grid; gap: 4px; min-width: 0; }
/* 第一行：方位 / 入首龙（灰） */
.xue-head { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.xue-bear { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.xue-dir { font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 第二行：距测（距当前测量位置的距离），数值金色强调 */
.xue-meta {
  font-size: 11.5px; line-height: 1.5;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xue-mdist { font-size: 12px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
/* 行尾操作：查看 / 导航 两枚小字按钮（行本身也是按钮，靠列对齐） */
.xue-acts {
  display: flex;
  align-items: stretch;
  gap: 12px;
  flex: 0 0 auto;
}
.xue-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 64px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  font: inherit;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.xue-act:focus-visible { outline: 2px solid rgba(47, 124, 232, .5); outline-offset: 2px; }
.xue-go {
  color: var(--bright, #2f7ce8);
  border-color: rgba(47, 124, 232, .35);
  background: rgba(47, 124, 232, .08);
}
.xue-go:hover {
  color: var(--bright-deep, #1f5fd0);
  background: rgba(47, 124, 232, .14);
  border-color: rgba(47, 124, 232, .5);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(47, 124, 232, .16);
}
.xue-nav {
  color: #1d6a44;
  border-color: rgba(44, 138, 91, .35);
  background: rgba(44, 138, 91, .08);
}
.xue-nav:hover {
  color: #155536;
  background: rgba(44, 138, 91, .14);
  border-color: rgba(44, 138, 91, .5);
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(44, 138, 91, .16);
}
@media (max-width: 560px) {
  .xue-row {
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 10px;
    padding: 12px 12px;
  }
  .xue-acts {
    grid-column: 1 / -1;
    width: 100%;
    gap: 10px;
  }
  .xue-act {
    flex: 1 1 0;
    min-height: 44px;
    font-size: 15px;
    justify-content: center;
  }
}
.xue-empty { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-mute); }

/* ── 导出预览层：手机长按图片直接存相册 ──
   🔴 长按能弹「存储到图像」的前提：img 及其祖先都不能有 -webkit-touch-callout:none /
   user-select:none，也别在 img 上绑 touchstart 的 preventDefault（本层不绑任何 touch 手势）。 */
.shot-mask {
  position: fixed; inset: 0; z-index: 950;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(16, 26, 40, .74);
}
.shot {
  width: min(880px, 100%);
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
  background: #101a28;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(8, 16, 28, .55);
}
.shot-head {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 48px 12px 16px;
  color: #e9f2fb;
}
.shot-head b { font-size: 15px; letter-spacing: .5px; }
.shot-dim { font-size: 12px; color: rgba(198, 218, 240, .68); font-variant-numeric: tabular-nums; }
.shot-head .picker-x {
  top: 50%; transform: translateY(-50%);
  background: rgba(255, 255, 255, .1);
  color: #d6e6f7;
}
.shot-head .picker-x:hover { background: rgba(255, 255, 255, .18); }
.shot-body {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  background: #0a121d;
}
.shot-body img {
  display: block;
  max-width: 100%; max-height: 100%;
  -webkit-touch-callout: default;
  -webkit-user-select: auto; user-select: auto;
  touch-action: manipulation;
}
.shot-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .04);
}
.shot-tip { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.4; color: rgba(198, 218, 240, .82); }
.shot-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.shot .btn.ghost {
  color: #d6e6f7;
  border-color: rgba(160, 190, 225, .38);
  background: transparent;
}
@media (max-width: 640px) {
  .shot-mask { padding: 0; }
  .shot { width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; }
  @supports (height: 100dvh) {
    .shot { height: 100dvh; max-height: 100dvh; }
  }
}

/* ── 预览层「原图」按钮（a 标签要自己补成按钮外观） ── */
.shot .btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; white-space: nowrap;
}
.shot-btns { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .shot-foot { flex-wrap: wrap; }
  .shot-tip { flex: 1 0 100%; }
  .shot-btns { flex: 1 0 100%; justify-content: stretch; }
  .shot-btns .btn { flex: 1 1 0; }
}