/*
 * 网页版专用的样式，叠在 mp/mp.css（由小程序 index.wxss 生成）之上。
 * 版式以小程序为准；网页上改动的只有三处：
 *   1. 尺寸：小程序的 rpx 换成 --rpx（手机上与小程序一样按屏宽，电脑上固定比例）
 *   2. 材质：卡片、按钮、导航换成仿 iOS 26 的液态玻璃（折射由 app/lg.js 生成）
 *   3. 电脑上（宽于 900px）底部页签栏换成左侧只有图标的侧边栏，内容居中
 */

/* 保留单指滚动，但不开放 pinch-zoom；manipulation 实际仍允许双指缩放。 */
html, .mp-root, .content-scroll, .history-scroll { touch-action: pan-x pan-y; }

/* 同名的两份字体：后声明的小子集（界面用到的字）优先；遇到子集里没有的字（如备注），
   浏览器才去下载前面这份完整字体补上 */
@font-face {
  font-family: "PBlossomSerif";
  src: url("../assets/fonts/PBlossomSerifFull.woff2") format("woff2");
  /* 只管汉字和中文标点：八卦符号、⋯ 之类两份字体里都没有，交给系统字体，不必为它们下载这份 */
  unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF;
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "PBlossomSerif";
  src: url("../assets/fonts/PBlossomSerif.woff") format("woff");
  font-weight: 300 700;
  font-display: swap;
}

html, body { margin: 0; height: 100%; background: #F5F4F1; }
@media (prefers-color-scheme: dark) { html, body { background: #0E0E0D; } }
body { overflow: hidden; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
/* 小程序只内嵌了界面用到的字，备注、问事只好用系统字体；网页有完整字体，这些也用宋体 */
.question-input, .note-input, .history-note { font-family: "PBlossomSerif", "Noto Serif SC", "Songti SC", STSong, serif; }
/* 和小程序一样，界面上的文字不能被选中；只有输入框可以 */
body { -webkit-user-select: none; user-select: none; }
input, textarea { -webkit-user-select: text; user-select: text; }

.mp-root {
  /* 小程序的 750rpx = 屏宽；平板宽度时不再继续放大 */
  --rpx: calc(min(100vw, 560px) / 750);
  height: 100%;
}
.mp-root *, .mp-root *::before, .mp-root *::after { box-sizing: border-box; }
.app { min-height: 100%; }
/* 小程序的滚动区高 100vh。手机浏览器里 100vh 是工具栏收起后的最大高度，比实际看得到的高，
   最下面一截会藏在浏览器的地址栏、工具栏后面拉不出来；改用实际可见高度（dvh），老浏览器仍用 vh */
.content-scroll { height: 100vh; height: 100dvh; }

/* 小程序组件的网页对应物 */
.content-scroll, .history-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.content-scroll::-webkit-scrollbar, .history-scroll::-webkit-scrollbar { display: none; }
/* 重置用 :where() 把优先级降到零，小程序样式（比如数字格里透明的输入框文字）照常生效 */
:where(.mp-root) :where(input, button, select) { font: inherit; color: inherit; }
:where(.mp-root) :where(input) { border: 0; background: transparent; outline: none; padding: 0; margin: 0; width: 100%; }
:where(.mp-root) :where(button) { border: 0; background: none; padding: 0; margin: 0; cursor: pointer; }
.mp-root [class*="-btn"], .tile, .seg-item, .tab, .date-cell, .faq-head, .history-row, .row[class] { cursor: pointer; }
.mp-root img { display: block; }
/* 小程序 <text> 里的换行照样显示（零优先级，各自的 white-space 设置仍然生效） */
:where([data-t]) { white-space: pre-line; }
.mp-picker { position: relative; display: block; cursor: pointer; }
.mp-picker-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; cursor: pointer; font-size: 16px; }

/* 按下的反馈：小程序用 hover-class，网页用 :active */
.primary-btn:active { transform: scale(0.97); opacity: 0.88; }
.circle-btn:active { transform: scale(0.92); opacity: 0.75; }
.nav-btn:active { opacity: 0.5; }
.history-row:active { opacity: 0.6; }
.card.about:active { opacity: 0.7; }
.faq-contact:active, .prompt-copy:active { opacity: 0.6; }

/* 开关：固定圆形滑块、短促平移；点击区域独立于可见轨道。 */
.mp-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 54px;
  height: 44px;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  --switch-off: #d9d9d6;
  --switch-thumb-on: #fff;
}
.mp-switch > input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%; margin: 0;
  opacity: 0;
  cursor: inherit;
  z-index: 1;
}
.mp-switch-track {
  position: relative;
  width: 54px; height: 32px;
  border-radius: 999px;
  background: var(--switch-off);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.035);
  transition: background-color 180ms ease;
}
.mp-switch-thumb {
  position: absolute;
  left: 2px; top: 2px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.17), 0 1px 1px rgba(0, 0, 0, 0.06);
  transition: transform 190ms cubic-bezier(0.22, 0.8, 0.3, 1), background-color 180ms ease, scale 100ms ease;
}
.mp-switch > input:checked + .mp-switch-track { background: var(--switch-accent); }
.mp-switch > input:checked + .mp-switch-track .mp-switch-thumb {
  transform: translateX(22px);
  background: var(--switch-thumb-on);
}
.mp-switch:active .mp-switch-thumb { scale: 0.94; }
.mp-switch > input:focus-visible + .mp-switch-track { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (prefers-color-scheme: dark) {
  .mp-switch { --switch-off: #3c3c3f; }
  .mp-switch-monochrome { --switch-thumb-on: #252525; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-switch-track, .mp-switch-thumb { transition: none; }
}

/* ── 液态玻璃（仿 iOS 26 的 .glassEffect(.regular)） ──
   几乎不着色，背后的画面轻微模糊、在边缘被折射（Chromium 由 lg.js 生成折射滤镜，其他浏览器只有模糊）；
   不画高光边：只有白色渐变着色、背后的模糊和边缘折射，像一块干净的玻璃。
   变量放在 :root 上，挂在 body 下的弹出菜单也用同一套 */
:root {
  --lg-tint-a: rgba(255, 255, 255, 0.34);
  --lg-tint-b: rgba(255, 255, 255, 0.1);
  --lg-lift: rgba(10, 15, 40, 0.12);
  --lg-fill: rgba(255, 255, 255, 0.18);
  --lg-fill-strong: rgba(255, 255, 255, 0.42);
  --lg-drop: rgba(0, 0, 0, 0.07);
}
@media (prefers-color-scheme: dark) {
  :root {
    --lg-tint-a: rgba(255, 255, 255, 0.1);
    --lg-tint-b: rgba(255, 255, 255, 0.02);
    --lg-lift: rgba(0, 0, 0, 0.4);
    --lg-fill: rgba(255, 255, 255, 0.06);
    --lg-fill-strong: rgba(255, 255, 255, 0.12);
    --lg-drop: rgba(0, 0, 0, 0.35);
  }
}

.circle-btn, .lg { position: relative; }
.card, .panel, .tile, .circle-btn, .segmented, .tabbar, .web-sidebar, .lg {
  /* 着色：从左上到右下由亮到淡的一层白（参考 liqui.design 的 tint） */
  background: linear-gradient(135deg, var(--lg-tint-a), var(--lg-tint-b));
  border: 0;
  /* 不支持折射的浏览器：轻模糊；Chromium 由 lg.js 换成“模糊 + 折射 + 磨砂” */
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  /* 不画高光边，只有一层很淡的投影，让玻璃从背景上浮起来 */
  box-shadow:
    0 4px 14px var(--lg-drop),
    0 1px 3px rgba(0, 0, 0, 0.04);
}
/* 浮在内容上的玻璃（侧边栏、页签栏、圆按钮、弹出菜单）投影更深，像悬起来 */
.tabbar, .web-sidebar, .circle-btn, .web-popover, .web-dialog, .web-toast-box, .web-image-actions, .web-drop-box {
  box-shadow: 0 14px 36px var(--lg-lift), 0 3px 10px var(--lg-drop);
}
/* 主按钮、分段控件、数字格选中的样子与小程序相同（写在 index.wxss 里） */
/* 上面的玻璃规则后加载，会盖掉小程序里数字格选中的描边，这里补回 */
.tile.tile-active { box-shadow: inset 0 0 0 1.5px var(--accent), 0 6px 20px var(--lg-drop); }

/* ── 侧边栏：手机上不显示 ── */
.web-sidebar { display: none; }

@media (min-width: 900px) {
  /* 尺寸跟着窗口高度走：矮屏略小、高屏略大，新占这类页面一屏放得下。
     --frame 是所有页面共用的内容区宽度，--top 是页头的固定位置：每一页的标题都在同一个地方 */
  .mp-root {
    --rpx: clamp(0.6px, calc(100vh / 1150), 0.8px);
    --side: 136px;
    --frame: min(1080px, calc(100vw - var(--side) - 96px));
    --gutter: max(48px, calc((100vw - var(--side) - var(--frame)) / 2));
    --top: 48px;
  }
  .tabbar { display: none !important; }

  /* 侧边栏：logo 和三个页面在上，帮助在最下；圆角都是边长的四分之一，与 logo 相同 */
  .web-sidebar {
    position: fixed; z-index: 30; left: 20px; top: 20px; bottom: 20px; width: 88px;
    border-radius: 22px;
    padding: 26px 0 22px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  }
  .web-sidebar-logo { width: 56px; height: 56px; margin-bottom: 26px; }
  .web-side-btn {
    position: relative; width: 60px; height: 60px; border-radius: 15px;
    display: flex; align-items: center; justify-content: center; transition: background 0.25s var(--ease);
  }
  .web-side-btn:hover { background: rgba(var(--accent-rgb), 0.06); }
  .web-side-btn.on { background: rgba(var(--accent-rgb), 0.12); }
  .web-side-icon { display: block; width: 26px; height: 26px; background: var(--ink); }
  .web-side-btn.on .web-side-icon { background: var(--accent); }
  .web-side-bottom { margin-top: auto; }
  .web-side-badge { position: absolute; top: 13px; right: 13px; width: 9px; height: 9px; border-radius: 50%; background: #FA5151; }

  /* 内容区：每一页同样的宽度和顶部位置 */
  .content-scroll { padding-left: var(--side); }
  .page, .history-head, .history-list {
    width: var(--frame); max-width: none; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0;
  }
  .page { padding-top: var(--top) !important; }
  /* 页头右侧的“⋯”与大标题的文字中线对齐（标题行高 76×1.15，按钮 64） */
  .page-header > .circle-btn { align-self: flex-end; margin: 0 0 calc((76 * 1.15 - 64) / 2 * var(--rpx)); }
  .history-screen { left: var(--side); padding-top: var(--top) !important; }
  /* 结果页：返回和“⋯”放在页头的位置，内容从下面开始 */
  .result-bar { top: var(--top) !important; left: calc(var(--side) + var(--gutter)); right: var(--gutter); }
  .page:has(> .stack > .hex-card), .page:has(> .stack > .info-card) { padding-top: calc(var(--top) + 64 * var(--rpx) + 36 * var(--rpx)) !important; }
  /* 电脑上没有底部页签栏，页面底部只留一点余量 */
  .tab-spacer { height: 32px !important; }
}
/* ── 网页弹层：提示、对话框、操作菜单、图片预览 ── */
.web-toast, .web-mask {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  transition: background-color 0.25s ease; font-family: "PBlossomSerif", "Songti SC", serif; color: var(--ink, #121211);
  --ink: #121211; --subtle: #7C7B76;
}
@media (prefers-color-scheme: dark) { .web-toast, .web-mask { --ink: #F2F1EE; --subtle: #8D8C87; } }
/* 提示条：贴在屏幕显示区域的最上方，从上面轻轻落下 */
.web-toast { pointer-events: none; align-items: flex-start; padding-top: max(16px, calc(env(safe-area-inset-top) + 10px)); }
.web-toast-box { transform: translateY(-16px); }
.web-toast.on .web-toast-box { transform: none; }
/* 淡入淡出只做在玻璃本身和遮罩的底色上，不做在整个弹层上：Chromium 里祖先半透明时，
   玻璃的模糊只能取到弹层自己，看不到后面的页面，淡入结束那一刻才突然换成真的玻璃，看起来像闪一下 */
.web-toast-box, .web-dialog, .web-image img, .web-image-actions, .web-drop-box { opacity: 0; transition: opacity 0.25s ease, transform 0.3s var(--ease, ease); }
.web-toast.on .web-toast-box, .web-mask.on .web-dialog, .web-mask.on .web-image img, .web-mask.on .web-image-actions, .web-drop.on .web-drop-box { opacity: 1; }
.web-mask.on { background: rgba(0, 0, 0, 0.22); }
.web-toast-box { display: flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; font-size: 15px; }
.web-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: web-spin 0.8s linear infinite; }
@keyframes web-spin { to { transform: rotate(360deg); } }
.web-dialog { width: min(320px, calc(100vw - 48px)); border-radius: 30px; padding: 24px 18px 18px; text-align: center; transform: scale(0.96); }
.web-mask.on .web-dialog { transform: none; }
.web-dialog-title { font-size: 18px; font-weight: 700; }
.web-dialog-text { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--subtle); white-space: pre-wrap; text-align: left; }
.web-dialog-actions { display: flex; gap: 10px; margin-top: 20px; }
.web-dialog-btn { flex: 1; height: 46px; border: 0; border-radius: 999px; font: inherit; font-size: 16px; background: rgba(var(--accent-rgb, 118, 118, 128), 0.1); color: var(--ink); cursor: pointer; }
.web-dialog-ok { font-weight: 700; }
/* 拖入文件时的提示 */
.web-drop { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; pointer-events: none;
  transition: background-color 0.2s ease; font-family: "PBlossomSerif", "Songti SC", serif; }
.web-drop.on { background: rgba(0, 0, 0, 0.18); }
.web-drop-box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 44px; border-radius: 24px; font-size: 20px; color: #121211;
  outline: 2px dashed rgba(18, 18, 17, 0.25); outline-offset: -10px; }
.web-drop-box small { font-size: 13px; color: #7C7B76; }
@media (prefers-color-scheme: dark) { .web-drop-box { color: #F2F1EE; outline-color: rgba(255, 255, 255, 0.25); } }
/* 浮层玻璃：弹出菜单、对话框、提示、看图的按钮、拖入提示，全部用同一种玻璃——
   与卡片同样的白色渐变着色、高光边、边缘折射（lg.js），只是着色更实、背后更模糊，压在内容上字也看得清 */
:root { --float-a: rgba(255, 255, 255, 0.55); --float-b: rgba(255, 255, 255, 0.28); }
@media (prefers-color-scheme: dark) { :root { --float-a: rgba(72, 72, 68, 0.55); --float-b: rgba(40, 40, 38, 0.42); } }
.web-popover, .web-dialog, .web-toast-box, .web-image-actions, .web-drop-box {
  background: linear-gradient(135deg, var(--float-a), var(--float-b));
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
/* 操作菜单：贴着按钮弹出的小菜单 */
.web-popover-layer { position: fixed; inset: 0; z-index: 100; font-family: "PBlossomSerif", "Songti SC", serif; --ink: #121211; }
@media (prefers-color-scheme: dark) { .web-popover-layer { --ink: #F2F1EE; } }
.web-popover {
  /* 与卡片同一种玻璃（着色、高光边、阴影来自 .lg，折射由 lg.js 加上），着色和模糊比卡片重一些，压在文字上也看得清 */
  position: fixed; min-width: 180px; padding: 8px; border-radius: 26px; display: flex; flex-direction: column;
  opacity: 0; transform: scale(0.92); transition: opacity 0.18s ease, transform 0.25s var(--ease, ease);
}
.web-popover-layer.on .web-popover { opacity: 1; transform: none; }
.web-popover-item {
  height: 44px; padding: 0 16px; border: 0; border-radius: 18px; background: none; text-align: left;
  font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; outline: none;
}
.web-popover-item:hover, .web-popover-item:focus-visible { background: rgba(var(--accent-rgb, 118, 118, 128), 0.12); }
.web-mask-image.on { background: rgba(0, 0, 0, 0.5); }
.web-image { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); }
.web-image img { max-width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 120px); border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); }
/* 看图下面的操作：一条玻璃胶囊，两个按钮中间一道细线；压在暗色遮罩上，着色比其他浮层更实 */
.web-image-actions { display: flex; align-items: center; padding: 4px; border-radius: 999px; }
.web-image-actions { --float-a: rgba(255, 255, 255, 0.86); --float-b: rgba(255, 255, 255, 0.74); }
@media (prefers-color-scheme: dark) { .web-image-actions { --float-a: rgba(58, 58, 55, 0.86); --float-b: rgba(40, 40, 38, 0.8); } }
.web-image-btn { height: 40px; padding: 0 22px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; }
.web-image-btn:hover { background: rgba(var(--accent-rgb, 118, 118, 128), 0.1); }
.web-image-btn + .web-image-btn { position: relative; }
.web-image-btn + .web-image-btn::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: rgba(118, 118, 128, 0.25); }

/* ── 电脑宽屏（宽于 1100px）：两栏。结果页、时令、常见问题是瀑布流（卡片占几行由 app/layout.js 按高度算） ── */
@media (min-width: 1100px) {
  /* 新占右栏：此刻卡片按小程序比例缩小（--now-scale），高度不超过标题；--aside 是右栏宽度，
     往昔的筛选框用同样的左栏宽度，两页的切换框在同一位置、同样大小 */
  .mp-root { --now-scale: 0.63; --aside: calc(638 * var(--rpx) * var(--now-scale)); --gap-x: 40px; }
  .history-head > .segmented { width: calc(100% - var(--aside) - var(--gap-x)); }
  .page > .stack:has(> .hex-card),
  .page > .stack:has(> .info-card),
  .page > .stack:has(> .faq-panel) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: 4px;
    grid-auto-flow: row dense;
    column-gap: 40px;
    row-gap: 0;
    align-items: start;
  }
  .page > .stack:has(> .faq-panel) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .page > .stack > .page-header { grid-column: 1 / -1; }

  /* 新占：左边一栏是起卦的操作区（切换框和下面的表单同宽）；右边一栏放此刻四柱和六壬的高级设置。
     表单的外层（.form-swap）和高级设置那块面板在电脑上不占盒子（display: contents），
     里面的卡片直接排进这张两栏网格，高级设置展开的内容才能放到右栏 */
  .page > .stack:has(> .now-strip) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--aside);
    column-gap: var(--gap-x);
    row-gap: calc(36 * var(--rpx));
    align-items: start;
  }
  .stack:has(> .now-strip) > .page-header { grid-column: 1; grid-row: 1; }
  .stack:has(> .now-strip) > .segmented { grid-column: 1; grid-row: 2; }
  .stack:has(> .now-strip) > .form-swap { display: contents; }
  .stack:has(> .now-strip) > .form-swap > * { grid-column: 1; }
  .stack:has(> .now-strip) .tile { height: auto; aspect-ratio: 1.15; }
  /* 电脑上的数字格更大，数字也跟着放大一档；几位数都是同一字号 */
  .stack:has(> .now-strip) .tile :is(.tile-value, .tile-input) { font-size: calc(108 * var(--rpx)); }

  /* 此刻四柱：保持小程序里的比例整体缩小，高度与标题相当、宽度随之变窄 */
  .stack:has(> .now-strip) > .now-strip { grid-column: 2; grid-row: 1; align-self: end; zoom: var(--now-scale); }

  /* 六壬的高级设置：不占左栏一整行，变成右栏里与切换框同一行的轻按钮；点开后月将、占时、贵人在右栏下方展开，与此刻同宽 */
  .form-swap > .panel:has(.reveal-block) { display: contents; }
  .form-swap > .panel:has(.reveal-block) > .row {
    grid-column: 2; grid-row: 2; justify-self: start; align-self: center; min-height: 0;
    gap: calc(14 * var(--rpx)); padding: calc(14 * var(--rpx)) calc(26 * var(--rpx)); border-radius: 999px;
    transition: background 0.2s ease, opacity 0.2s ease, transform 0.36s var(--ease);
  }
  /* 桌面把高级设置的外层设成 display: contents，外层进场动画不会绘制。
     动画必须交给实际可见的按钮与已展开面板，沿用其他表单块的时长和延迟。 */
  .page-enter .form-swap > .panel:has(.reveal-block) > .row,
  .page-enter .form-swap > .panel:has(.reveal-block) > .reveal-block-open {
    animation: page-in 0.42s var(--ease) 0.06s backwards;
  }
  /* 底色跟主题色走，与切换框里选中的那一格一样 */
  .form-swap > .panel:has(.reveal-block) > .row:hover { background: rgba(var(--accent-rgb), 0.08); }
  .form-swap > .panel:has(.reveal-block) > .row .row-title { color: var(--subtle); font-size: calc(28 * var(--rpx)); }
  .form-swap > .panel:has(.reveal-block):has(.reveal-block-open) > .row { background: rgba(var(--accent-rgb), 0.12); }
  .form-swap > .panel:has(.reveal-block):has(.reveal-block-open) > .row .row-title { color: var(--ink); }
  .form-swap > .panel:has(.reveal-block) > .row .chevron { margin-right: 0; transform: rotate(-45deg); }
  /* 展开的内容在按钮下方，所以展开后箭头朝下 */
  .form-swap > .panel:has(.reveal-block) > .row .chevron-up { transform: translateY(calc(-3 * var(--rpx))) rotate(45deg); }
  .form-swap .reveal-block {
    /* 与左边的问事、时间那块面板等高，三项均匀分布 */
    grid-column: 2; grid-row: 3; align-self: stretch; display: flex; flex-direction: column; justify-content: center;
    height: auto !important; padding: 0 calc(40 * var(--rpx)); border-radius: calc(52 * var(--rpx));
    background: linear-gradient(135deg, var(--lg-tint-a), var(--lg-tint-b));
    -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 4px 14px var(--lg-drop);
    opacity: 0; transform: translateX(-16px); pointer-events: none;
    /* 与其他表单块共用过渡节奏；不要在玻璃本体上加 filter/clip-path，避免隔断背景折射。 */
    transition: opacity 0.2s ease, transform 0.36s var(--ease);
  }
  .form-swap .reveal-block-open { opacity: 1; transform: none; pointer-events: auto; }
  /* 外层是 display: contents，切换梅花/六壬的过渡同样要落在可见元素上。
     一起进出，不再单独错开月将、占时、贵人。 */
  .form-swap.swap-hide > .panel:has(.reveal-block) > .row,
  .form-swap.swap-hide > .panel:has(.reveal-block) > .reveal-block-open {
    opacity: 0; transform: translateX(calc(48 * var(--rpx))); pointer-events: none;
  }
  .form-swap .reveal-block .advanced-inner > .hairline:first-child { display: none; }
  .form-swap .reveal-block .advanced-inner { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }

  /* 梅花也沿用同一高级设置：右栏日期/时间与左栏数字区对齐，手机仍在表单内展开。 */
  .form-meihua > .calc-advanced-panel > .reveal-block { grid-row: 3 / span 2; align-self: stretch; }
  .form-meihua.swap-hide > .panel:has(.reveal-block) > .row,
  .form-meihua.swap-hide > .panel:has(.reveal-block) > .reveal-block-open { transform: translateX(calc(-48 * var(--rpx))); }

  /* 梅花结果：四柱、备注在左，三卦在右 */
  .stack:has(> .hex-card) > .r0, .stack:has(> .hex-card) > .r3 { grid-column: 1; }
  .stack:has(> .hex-card) > .hex-card, .stack:has(> .hex-card) > .footnote { grid-column: 2; }
  /* 六壬结果：四柱、课体、问事在左，天地盘、四课、三传在右 */
  .stack:has(> .info-card) > .r0, .stack:has(> .info-card) > .r4, .stack:has(> .info-card) > .r5 { grid-column: 1; }
  .stack:has(> .info-card) > .r1, .stack:has(> .info-card) > .r2, .stack:has(> .info-card) > .r3 { grid-column: 2; }
  /* 时令：左栏是日期、四柱、节气；右栏上面是时间和真太阳时（与左边的大日期同一行、上下居中），下面是月历。
     日期和时间原本包在同一个小 .stack 里，这里让它不占盒子，两块分别排进两栏 */
  .page > .stack:has(> .month-card) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--gap-x); row-gap: calc(52 * var(--rpx)); align-items: start;
  }
  .stack:has(> .month-card) > .page-header { grid-column: 1 / -1; }
  .stack:has(> .month-card) > .stack { display: contents; }
  .stack:has(> .month-card) > .stack > .mp-picker { grid-column: 1; grid-row: 2; align-self: center; }
  /* 大日期在电脑上放大一档，下面的星期、农历跟着略放大 */
  .stack:has(> .month-card) .date-big { font-size: calc(76 * var(--rpx)); }
  .stack:has(> .month-card) .date-sub { margin-top: calc(10 * var(--rpx)); font-size: calc(32 * var(--rpx)); }
  .stack:has(> .month-card) > .stack > .panel { grid-column: 2; grid-row: 2; }
  .stack:has(> .month-card) > .pillars-panel { grid-column: 1; grid-row: 3; }
  .stack:has(> .month-card) > .card:not(.month-card) { grid-column: 1; grid-row: 4; }
  .stack:has(> .month-card) > .month-card { grid-column: 2; grid-row: 3 / span 2; }
  /* 月历的高度跟左边的四柱加节气走（contain: size 让它不参与撑高这两行），
     四到六周的月份都填满同样的高度，每周一行平分 */
  .stack:has(> .month-card) > .month-card { align-self: stretch; contain: size; display: flex; flex-direction: column; }
  .stack:has(> .month-card) > .month-card .date-grid { flex: 1; grid-auto-rows: 1fr; }
  .stack:has(> .month-card) > .month-card .date-cell { height: auto; }
  /* 常见问题：问题在左，外观和关于在右 */
  .stack:has(> .faq-panel) > .faq-panel { grid-column: 1; }
  .stack:has(> .faq-panel) > :not(.page-header):not(.faq-panel) { grid-column: 2; }

  /* 往昔：记录排成两列 */
  .history-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-content: start; }
  .history-list > .empty, .history-list > .list-foot { grid-column: 1 / -1; }
}

/* 背景游光与玻璃：玻璃几乎透明，原先还把背后的颜色饱和度放大 1.5 倍，主题色的光透过卡片会发亮刺眼，
   现在只放大一成。 */
/* 背景游光：小程序里光斑按屏宽定大小（130vw），竖屏手机上刚好；电脑横屏时屏宽远大于屏高，
   光斑会大到盖满整屏、几团叠在一起发亮。网页改按短边定大小和位置，手机上与小程序完全相同 */
.light { width: 130vmin; height: 130vmin; }
.light-0 { left: -55vmin; top: -30vmin; }
.light-1 { right: -60vmin; }
.light-2 { left: -40vmin; bottom: -40vmin; }
.light-3 { right: -45vmin; }
/* 电脑上再小一些（位置按同样比例收） */
@media (min-width: 1100px) {
  .light { width: 100vmin; height: 100vmin; }
  .light-0 { left: -42vmin; top: -23vmin; }
  .light-1 { right: -46vmin; }
  .light-2 { left: -31vmin; bottom: -31vmin; }
  .light-3 { right: -35vmin; }
}

/* ── 动效：网页上原本硬切的地方补上柔和的过渡 ──
   时长 0.2～0.45 秒，缓出曲线与小程序一致（--ease）；系统开启“减少动态效果”时全部省掉 */
/* 切换页面时各块依次升起淡入，写在小程序里（.page-enter）；结果页的返回栏在网页上单独淡入 */
.result-bar { animation: web-fade-in 0.3s ease both; }
@keyframes web-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* 翻月份的滑入写在小程序里（.month-in） */
/* 按下、松开、悬停都缓一下，而不是一下子跳过去 */
.circle-btn, .nav-btn, .card.about, .prompt-copy, .web-image-btn, .web-dialog-btn {
  transition: transform 0.22s var(--ease), opacity 0.22s ease, background-color 0.25s ease;
}
.web-side-btn { transition: background-color 0.3s ease, transform 0.22s var(--ease); }
.web-side-icon { transition: background-color 0.3s ease; }
.web-side-btn:active, .web-image-btn:active, .web-dialog-btn:active { transform: scale(0.94); }
.web-popover-item { transition: background-color 0.2s ease; }
@media (hover: hover) and (pointer: fine) {
  .circle-btn:hover { transform: translateY(-1px); }
  .history-row:hover, .faq-head:hover { opacity: 0.75; }
  .faq-head { transition: opacity 0.2s ease; }
  .date-cell:hover .date-num:not(.date-selected) { background: rgba(var(--accent-rgb), 0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .result-bar { animation: none !important; }
  .page-enter .form-swap > .panel:has(.reveal-block) > .row,
  .page-enter .form-swap > .panel:has(.reveal-block) > .reveal-block-open { animation: none !important; }
  .form-swap .reveal-block, .form-swap .panel:has(.reveal-block) > .row,
  .form-swap .panel:has(.reveal-block) > .row .chevron { transition: none !important; }
}

/* FAQ 高度变化由展开与定位共同控制，不叠加浏览器的滚动锚定。 */
.content-scroll:has(.faq-panel) { overflow-anchor: none; }
@media (prefers-reduced-motion: reduce) {
  .faq-answer, .faq-answer-inner, .faq-item-open .faq-answer-inner { transition: none; }
}