/* 手机网页 v2 的样式。颜色仍然来自设计稿：白天 = 昼纸 v7，夜里 = 夜纸 v5。
   v2 改的是“像一个 App”：顶栏 + 大标题、底部带图标的标签栏、卡片分组、实心按钮、列表行；字号整体加大（正文 16–17 px，最小 13 px）。
   字：标题、主角字、古籍引文用宋体（有仪式感）；正文、按钮、说明用系统黑体（小字也清楚）；日期、标签用打字机体（学 references/06、08 的标签）。 */
:root {
  --bg: #f4eee1; --card: #fbf8f1; --card2: #efe8d9; --ink: #26241f; --ink2: #57524a; --ink3: #8a8476;
  --line: rgba(38, 36, 31, .09); --line2: rgba(38, 36, 31, .2);
  --accent: #3e4f7b; --on-accent: #fbf8f1; --tint: #e3e9f5; --tint2: #d3dcef; --qing: #8fa6d6; --xing: #f0ae86; --sand: #e9dcc0;
  --quote: #3e4f7b; --warn: #a5432a; --stick: #e2cfa4;
  --shadow: 0 1px 1px rgba(70, 52, 28, .04), 0 8px 24px -14px rgba(70, 52, 28, .28);
  --wx-木: #7fa37a; --wx-火: #ee9a73; --wx-土: #c9a96a; --wx-金: #a9aeb8; --wx-水: #4f63a0;
  --serif: "Noto Serif SC", "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif CJK SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --type: "American Typewriter", "Courier New", ui-monospace, monospace;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --tabh: 60px;
  color-scheme: light;
}
:root[data-mode="night"] {
  --bg: #24211d; --card: #2d2924; --card2: #1d1b18; --ink: #efe8d8; --ink2: #c9c0ad; --ink3: #948b7a;
  --line: rgba(239, 232, 216, .08); --line2: rgba(239, 232, 216, .2);
  --accent: #e8e1d1; --on-accent: #24211d; --tint: rgba(174, 187, 169, .14); --tint2: rgba(174, 187, 169, .24); --qing: #b4c3d3; --xing: #e58f72; --sand: rgba(216, 191, 136, .18);
  --quote: #b9c6b4; --warn: #e58f72; --stick: #cfc6b2;
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 26px -16px rgba(0, 0, 0, .7);
  --wx-木: #a3c09b; --wx-火: #f0a383; --wx-土: #d8bf88; --wx-金: #dfe2e6; --wx-水: #93a9d8;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; background-color: var(--bg); background-image: var(--grain); color: var(--ink); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; transition: background-color .4s, color .4s; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
img { display: block; }
svg { display: block; }
.vt { writing-mode: vertical-rl; }
.serif { font-family: var(--serif); }

/* ── 骨架 ── */
#app { max-width: 480px; margin: 0 auto; padding: 0 16px calc(var(--tabh) + 28px + var(--safe-b)); position: relative; overflow-x: clip; }
#app.bare { padding-bottom: calc(36px + var(--safe-b)); }
.view { animation: enter .38s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 顶栏：子页面一直显示“返回 + 标题”；四个主页面往下滑才出现标题 */
.nav { position: sticky; top: 0; z-index: 20; margin: 0 -16px; padding: var(--safe-t) 8px 0; transition: background-color .25s, box-shadow .25s; }
.nav-in { height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav-t { font: 600 17px var(--sans); text-align: center; white-space: nowrap; transition: opacity .2s; }
.nav-back { display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 0 8px 0 4px; color: var(--accent); font-size: 16px; justify-self: start; }
.nav-back svg { width: 22px; height: 22px; }
.nav-r { justify-self: end; display: flex; align-items: center; padding-right: 8px; font-size: 14px; color: var(--ink3); }
.nav.root .nav-t { opacity: 0; }
.nav.stuck { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--line); }
.nav.root.stuck .nav-t { opacity: 1; }

/* 大标题 */
.lt { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin: 2px 0 6px; }
.lt h1 { font: 700 32px/1.2 var(--serif); letter-spacing: .06em; margin: 0; }
.lt p { margin: 4px 0 0; font-size: 15px; color: var(--ink2); }
.lt .chip { margin-bottom: 4px; }

/* ── 卡片 ── */
.card { background: var(--card); border-radius: 22px; padding: 18px; margin-top: 14px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.ch { display: flex; align-items: center; gap: 10px; margin: -2px 0 14px; }
.ch h3 { font: 600 17px var(--sans); margin: 0; letter-spacing: .02em; }
.ch .more { margin-left: auto; }
/* 卡片的小图标：一个宋体字压在淡色的圆角方块上 */
.ci { width: 30px; height: 30px; border-radius: 10px; background: var(--tint); color: var(--accent); display: grid; place-items: center; font: 700 15px/1 var(--serif); font-style: normal; flex: none; }
.ci.sand { background: var(--sand); color: #7a6435; }
:root[data-mode="night"] .ci.sand { color: #e3cf9f; }
.more { font-size: 14px; color: var(--accent); display: inline-flex; align-items: center; gap: 2px; padding: 6px 0; white-space: nowrap; }
.more svg { width: 16px; height: 16px; }
.sec { font: 600 13px var(--sans); color: var(--ink3); letter-spacing: .08em; margin: 26px 4px 8px; }
.foot { font-size: 13px; line-height: 1.75; color: var(--ink3); margin: 18px 4px 0; }
.foot a { color: var(--accent); }

/* ── 文字 ── */
.lead { font-size: 16.5px; line-height: 1.8; margin: 0; }
.lead b { font-weight: 600; }
.body p { font-size: 17px; line-height: 1.9; margin: 0 0 14px; text-align: justify; }
.body p:last-child { margin-bottom: 0; }
.qt { color: var(--quote); }
.quote { margin: 16px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--tint); }
.quote p { font: 500 18px/1.75 var(--serif); color: var(--quote); margin: 0; }
.quote cite { display: block; font-style: normal; font-size: 13px; color: var(--ink3); margin-top: 6px; }
.gloss { font-size: 15px; line-height: 1.8; color: var(--ink2); margin: 10px 0 0; }
.gloss b { font-weight: 600; color: var(--accent); margin-right: 6px; }
.note { font-size: 14px; line-height: 1.75; color: var(--ink3); margin: 10px 0 0; }
.banner { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.7; color: var(--ink2); background: var(--sand); border-radius: 14px; padding: 12px 14px; margin-top: 14px; }
.banner::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 8px; background: var(--xing); box-shadow: 0 0 0 4px color-mix(in srgb, var(--xing) 25%, transparent); }
.line { font: 500 24px/1.5 var(--serif); letter-spacing: .04em; margin: 4px 0 16px; }
.asked { font-size: 15px; color: var(--ink2); background: var(--card2); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px; }
.asked span { color: var(--ink); }
.label { font: 12.5px/1 var(--type); letter-spacing: .06em; color: var(--ink3); }

/* ── 按钮 ── */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; padding: 0 18px; border-radius: 16px; background: var(--accent); color: var(--on-accent); font: 600 17px var(--sans); letter-spacing: .06em; margin-top: 14px; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 80%, transparent); transition: transform .12s, filter .12s, opacity .2s; }
.btn:active { transform: scale(.98); filter: brightness(.94); }
.btn[disabled] { opacity: .4; }
.btn.tint { background: var(--tint); color: var(--accent); box-shadow: none; }
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line2); }
.btn.warn { background: transparent; color: var(--warn); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--warn) 45%, transparent); }
.btns { display: flex; gap: 10px; margin-top: 14px; } .btns > * { flex: 1; } .btns > .btn { margin-top: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--tint); color: var(--accent); font-size: 14px; white-space: nowrap; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--qing); box-shadow: 0 0 0 3px color-mix(in srgb, var(--qing) 30%, transparent); }
.chip.sand { background: var(--sand); color: var(--ink); }
.chip b { font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.link { color: var(--accent); font-size: 15px; padding: 10px 0; display: inline-block; }

/* ── 列表 ── */
.list { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; margin-top: 14px; }
.row { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 10px 16px; font-size: 16px; position: relative; width: 100%; text-align: left; }
.row + .row::before { content: ""; position: absolute; top: 0; right: 0; left: 58px; height: 1px; background: var(--line); }
.row .ci { width: 30px; height: 30px; }
.row .rt { flex: 1; min-width: 0; }
.row .rt small { display: block; font-size: 13.5px; color: var(--ink3); line-height: 1.5; margin-top: 1px; }
.row .val { font-size: 15px; color: var(--ink3); text-align: right; flex: none; max-width: 52%; }
.chev { width: 18px; height: 18px; color: var(--ink3); flex: none; opacity: .7; }
.row:active { background: var(--card2); }
.row.warn { color: var(--warn); }

/* ── 表单 ── */
.form { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); padding: 4px 16px; margin-top: 14px; }
.fld { padding: 12px 0; position: relative; }
.fld + .fld { border-top: 1px solid var(--line); }
.fld > label:not(.chk), .fld > .flabel { display: block; font-size: 13.5px; color: var(--ink3); margin-bottom: 6px; }
.inp { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 12px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); }
.inp:focus-within { box-shadow: inset 0 0 0 1.5px var(--accent); }
.inp input, .inp select { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 17px; padding: 12px 0; outline: none; appearance: none; -webkit-appearance: none; border-radius: 0; }
.inp input::placeholder { color: var(--ink3); opacity: .85; }
.inp small { font-size: 13.5px; color: var(--ink3); white-space: nowrap; }
.inp .eye { color: var(--ink3); padding: 8px 0 8px 8px; font-size: 14px; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); flex: none; }
.seg button { min-height: 38px; padding: 0 16px; border-radius: 9px; font-size: 15px; color: var(--ink2); transition: background-color .2s, color .2s; }
.seg button.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
:root[data-mode="night"] .seg button.on { background: #3a352f; }
.seg.wide { display: flex; } .seg.wide button { flex: 1; }
.chk { display: flex; gap: 10px; align-items: center; font-size: 15px; color: var(--ink2); margin-top: 12px; min-height: 40px; }
.chk input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); flex: none; }
.field { width: 100%; border: 0; padding: 14px; font-size: 17px; line-height: 1.7; min-height: 112px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); resize: none; outline: none; border-radius: 14px; }
.field:focus { box-shadow: inset 0 0 0 1.5px var(--accent); }
.sel3 { display: flex; gap: 6px; flex: 1; } .sel3 select { flex: 1; font-size: 16px; }
.sugg { margin: 6px 0 0; padding: 0; list-style: none; border-radius: 12px; overflow: hidden; background: var(--card2); }
.sugg:empty { display: none; }
.sugg li button { display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 13px 14px; font-size: 16px; text-align: left; }
.sugg li + li button { border-top: 1px solid var(--line); }
.sugg li small { color: var(--ink3); font-size: 13px; }
.err { color: var(--warn); font-size: 14.5px; margin: 10px 4px 0; min-height: 1em; }
.err:empty { display: none; }
.dock { position: sticky; bottom: 0; margin: 18px -16px 0; padding: 12px 16px calc(12px + var(--safe-b)); background: linear-gradient(to top, var(--bg) 70%, transparent); z-index: 5; }
.dock .btn { margin-top: 0; }

/* ── 底部标签栏 ── */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding-bottom: var(--safe-b); background: color-mix(in srgb, var(--card) 94%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: 0 -1px 0 var(--line), 0 -10px 30px -20px rgba(60, 40, 20, .35); }
.tabs nav { max-width: 480px; margin: 0 auto; display: flex; height: var(--tabh); }
.tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11.5px; color: var(--ink3); position: relative; }
.tabs a .ic { width: 26px; height: 26px; position: relative; display: grid; place-items: center; }
.tabs a .ic::before { content: ""; position: absolute; inset: -3px -11px; border-radius: 16px; background: var(--tint); opacity: 0; transform: scale(.6); transition: opacity .25s, transform .3s cubic-bezier(.3, 1.4, .5, 1); }
.tabs a svg { width: 24px; height: 24px; position: relative; fill: currentColor; }
.tabs a.on { color: var(--accent); font-weight: 600; }
.tabs a.on .ic::before { opacity: 1; transform: none; }
body.no-tabs .tabs { display: none; }

/* ── 画 ── */
canvas.art, img.art { display: block; opacity: 0; transition: opacity .8s ease; }
canvas.art.in, img.art.in { opacity: 1; }
.ghost { position: absolute; pointer-events: none; z-index: 0; }
.win { position: relative; border-radius: 16px; overflow: hidden; }
.win canvas { position: absolute; inset: 0; }

/* 今日：大窗 */
.hero { padding: 8px 8px 18px; }
.hero .win { height: 208px; }
.hero .win .label { position: absolute; left: 14px; top: 14px; color: rgba(38, 52, 107, .78); }
:root[data-mode="night"] .hero .win .label { color: #b9b1a0; }
.hero .win .zi { position: absolute; right: 10px; bottom: 10px; font-size: 12.5px; padding: 4px 10px; border-radius: 12px; background: color-mix(in srgb, var(--card) 88%, transparent); color: var(--ink2); }
.hero .tx { padding: 16px 10px 0; position: relative; }
.hello { font-size: 15px; color: var(--ink2); margin: 0; }
.kicker { font-size: 14px; color: var(--ink3); margin: 10px 0 0; }
.hero-word { font: 900 48px/1.15 var(--serif); letter-spacing: .12em; margin: 2px 0 6px; }
.hero-line { font-size: 18px; line-height: 1.6; margin: 0 0 14px; }
.hero .chips .chip { height: 34px; font-size: 14.5px; }

/* 小窗 */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.tile { background: var(--card); border-radius: 20px; padding: 7px 7px 14px; box-shadow: var(--shadow); text-align: left; display: block; }
.tile .win { height: 118px; border-radius: 14px; }
.tile .tx { padding: 12px 9px 0; }
.tile .tx .label { display: block; margin-bottom: 6px; }
.tile .tx b { display: block; font: 700 21px/1.3 var(--serif); letter-spacing: .06em; }
.tile .tx small { display: block; font-size: 13.5px; color: var(--ink2); margin-top: 2px; }

/* 黄历 */
.yj { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.yj-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.yj-h i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 16px/1 var(--serif); font-style: normal; background: var(--tint); color: var(--accent); }
.yj-h i.ji { background: var(--sand); color: #7a6435; }
:root[data-mode="night"] .yj-h i.ji { color: #e3cf9f; }
.yj ul { margin: 0; padding: 0; list-style: none; }
.yj li { padding: 7px 0; }
.yj li + li { border-top: 1px dashed var(--line2); }
.sheet .quote mark { background: none; color: var(--accent); font-weight: 700; border-bottom: 2px solid currentColor; }
.yj li[data-yj] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.yj li b { display: block; font-weight: 600; font-size: 16px; }
.yj li small { display: block; font-size: 13.5px; color: var(--ink3); line-height: 1.5; }
.yj .none { font-size: 14px; color: var(--ink3); }

/* 问事：结果的主图 */
.moment { position: relative; height: 262px; margin: 0 -16px; }
.moment canvas { position: absolute; left: 50%; top: 0; transform: translateX(-50%); }
.moment .jiao { position: absolute; top: 0; left: 50%; width: 360px; height: 262px; transform: translateX(-50%); }
.moment .jiao img { position: absolute; width: 132px; height: auto; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1), opacity .4s; }
.moment .pearl { position: absolute; left: 50%; top: 116px; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #f3eee4 55%, #d6c9b3); box-shadow: 0 0 0 1px rgba(176, 146, 92, .7), 0 4px 6px -2px rgba(80, 70, 90, .35); opacity: 0; transition: opacity .8s .5s; }
.moment.in .pearl { opacity: 1; }
.moment.yin .pearl { background: radial-gradient(circle at 35% 30%, #ececf0, #a8a9b6); box-shadow: 0 0 0 1px rgba(140, 140, 152, .7); }
.moment.xiao.in .pearl { animation: flicker 2.6s infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 30% { opacity: .55; } 45% { opacity: .95; } 70% { opacity: .7; } }
.result-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -4px; }
.result-h h2 { font: 900 40px/1.1 var(--serif); letter-spacing: .14em; margin: 0; }
.result-h p { margin: 6px 0 0; font-size: 16px; color: var(--ink2); }
.result-h .sound { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--tint); color: var(--accent); font-size: 14px; }
.result-h .sound svg { width: 16px; height: 16px; fill: currentColor; }
.basis-i + .basis-i { margin-top: 14px; }
.thinking { text-align: center; padding: 30px 0 14px; }
.thinking .orb { width: 120px; height: 120px; margin: 0 auto; position: relative; }
.thinking .orb canvas { position: absolute; inset: 0; animation: breathe 3.2s ease-in-out infinite; }
.thinking .orb i { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #f3eee4 55%, #d6c9b3); box-shadow: 0 0 0 1px rgba(176, 146, 92, .7); }
@keyframes breathe { 0%, 100% { transform: scale(.82) rotate(0deg); opacity: .55; } 50% { transform: scale(1.06) rotate(12deg); opacity: 1; } }
.thinking p { font-size: 15px; color: var(--ink2); letter-spacing: .1em; margin-top: 14px; min-height: 1.6em; transition: opacity .4s; }
/* 求签：签诗竖排、从右往左读（签纸的老排法）；签和签纸是我们自己画的，签头涂色学庙里的竹签 */
.qmoment { display: flex; justify-content: center; align-items: flex-start; gap: 20px; padding: 18px 0 14px; }
.slip { position: relative; padding: 26px 22px 24px; opacity: 0; transform: translateY(10px); transition: opacity .6s .25s, transform .7s .25s cubic-bezier(.2, .8, .2, 1); }
.slip canvas { position: absolute; left: 0; top: 0; }
/* 竖排的宽度写死（--n 是签诗行数）：iPhone 的 Safari 算不出竖排整块多宽，会把签纸缩成一条，签诗压到签上（2026-10-09） */
.slip-in { position: relative; writing-mode: vertical-rl; height: 232px; width: calc(var(--n, 4) * 46.75px + 25.6px); }
.slip-in p { width: 38.75px; font: 600 25px/1.55 var(--serif); letter-spacing: .2em; margin: 0 0 0 8px; color: var(--ink); opacity: 0; transition: opacity .9s ease; }
.slip-in small { display: block; width: 21.6px; font-size: 13.5px; line-height: 1.6; letter-spacing: .14em; color: var(--ink2); margin-left: 4px; opacity: 0; transition: opacity .9s ease; }
.stick { position: relative; width: 32px; height: 272px; flex: none; margin-top: 4px; opacity: 0; transform: translateY(-90px) rotate(-16deg); transform-origin: 50% 85%; transition: transform .75s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; }
.stick canvas { position: absolute; left: 0; top: 0; }
.stick b { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); writing-mode: vertical-rl; font: 600 14.5px/1 var(--serif); letter-spacing: .16em; color: #2b2926; }
.qmoment.in .slip, .qmoment.in .slip-in p, .qmoment.in .slip-in small { opacity: 1; transform: none; }
.qmoment.in .stick { opacity: 1; transform: rotate(4deg); }
.confirm { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--ink2); }
.confirm .ps { display: flex; gap: 9px; flex: none; }
.confirm .pair { width: 28px; height: 24px; } .confirm .pair img { width: 17px; }
.qs { width: 44px; height: 34px; flex: none; position: relative; }
.qs i { position: absolute; left: 50%; top: -4px; width: 9px; height: 42px; margin-left: -4.5px; border-radius: 5px; transform: rotate(8deg); background: linear-gradient(var(--xing) 0 24%, var(--stick) 24%); box-shadow: inset -2px 0 0 rgba(120, 95, 50, .2); }
.srcs div { display: flex; gap: 12px; font-size: 14.5px; line-height: 1.7; color: var(--ink2); padding: 4px 0; }
.srcs b { font-weight: 600; flex: none; width: 44px; color: var(--ink); }
.care p { font-size: 17px; line-height: 1.95; margin: 0 0 14px; }
.care a { color: var(--accent); border-bottom: 1px solid currentColor; }

/* 记录 */
.tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tally div { display: flex; flex-direction: column; align-items: center; padding: 12px 0 10px; border-radius: 16px; background: var(--card2); }
.tally .pair { width: 56px; height: 42px; } .tally .pair img { width: 32px; }
.tally b { font: 700 26px/1.2 var(--serif); margin-top: 6px; }
.tally span { font-size: 13.5px; color: var(--ink2); }
.pair { position: relative; width: 44px; height: 34px; flex: none; }
.pair img { position: absolute; top: 0; width: 26px; height: auto; }
.pair img.l { left: 0; } .pair img.r { right: 0; }
.hrow { display: flex; gap: 12px; align-items: center; padding: 14px 16px; position: relative; }
.hrow + .hrow::before { content: ""; position: absolute; left: 72px; right: 0; top: 0; height: 1px; background: var(--line); }
.hrow:active { background: var(--card2); }
.hrow .m { flex: 1; min-width: 0; }
.hrow .r { font: 600 17px var(--sans); display: flex; align-items: center; gap: 8px; }
.hrow .r em { font: 400 12px var(--sans); font-style: normal; color: var(--accent); background: var(--tint); padding: 1px 7px; border-radius: 8px; }
.hrow .qq { font-size: 14.5px; color: var(--ink2); line-height: 1.55; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hrow .qq.none { color: var(--ink3); }
.hrow .t { font: 12.5px var(--type); color: var(--ink3); margin-top: 4px; letter-spacing: .02em; }

/* 命盘 */
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 15.5px; margin: 0; }
.facts dt { color: var(--ink3); }
.facts dd { margin: 0; }
.facts dd small { color: var(--ink3); font-size: 13.5px; }
.pillars { position: relative; display: grid; grid-template-columns: 40px repeat(var(--n, 4), 1fr); margin: 0 -6px; }
.pillars canvas.dc { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.pillars > div { position: relative; z-index: 1; text-align: center; }
.pillars .rl { text-align: left; font-size: 12.5px; color: var(--ink3); display: flex; align-items: center; padding-left: 6px; }
.pillars .rl.tap { color: var(--accent); }
.pillars .h { font-size: 13.5px; color: var(--ink3); padding: 6px 0 4px; }
.pillars .me .h, .pillars .h.me { color: var(--accent); font-weight: 600; }
.pillars .ss { font-size: 13.5px; color: var(--accent); min-height: 26px; padding-top: 2px; }
.pillars .g { font: 600 38px/1.25 var(--serif); padding-top: 2px; }
.pillars .g small { display: flex; align-items: center; justify-content: center; gap: 4px; font: 400 12.5px/1.2 var(--sans); color: var(--ink2); margin: 0 0 4px; }
.pillars .g small i { width: 8px; height: 8px; border-radius: 50%; background: var(--wxc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--wxc) 28%, transparent); }
.pillars .hide { font-size: 14px; line-height: 1.6; padding-top: 8px; min-height: 72px; }
.pillars .hide span { display: block; }
.pillars .hide em { font-style: normal; color: var(--ink3); font-size: 12px; margin-left: 2px; }
.pillars .sm { font-size: 13px; color: var(--ink2); padding: 8px 0; border-top: 1px solid var(--line); }
.pillars .unknown { color: var(--ink3); opacity: .5; }
.pillars .tap { cursor: pointer; }
.wx { position: relative; height: 120px; }
.wx canvas { position: absolute; left: 0; top: 0; }
.wx .lab { position: absolute; bottom: 0; display: flex; width: 100%; }
.wx .lab span { flex: 1; text-align: center; font-size: 14px; color: var(--ink2); }
.wx .lab b { font: 600 17px var(--serif); color: var(--ink); margin-right: 3px; }
.dm { display: flex; gap: 16px; align-items: center; }
.avatar { position: relative; width: 64px; height: 64px; flex: none; display: grid; place-items: center; font: 900 30px/1 var(--serif); color: #fbf8f1; }
.avatar canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.avatar b { position: relative; font-weight: inherit; text-shadow: 0 1px 0 rgba(60, 40, 20, .12); }
:root[data-mode="night"] .avatar { color: #24211d; }
.dm .t { font: 600 19px var(--serif); letter-spacing: .06em; }
.dm .t small { font: 400 14px var(--sans); color: var(--ink2); margin-left: 6px; letter-spacing: 0; }
.yun { display: flex; gap: 10px; overflow-x: auto; margin: -10px -18px 0; padding: 16px 18px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.yun::-webkit-scrollbar { display: none; }
.yun .c { flex: none; width: 88px; scroll-snap-align: start; text-align: center; padding: 12px 0 10px; border-radius: 16px; background: var(--card2); position: relative; }
.yun .c.now { background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--qing); }
.yun .c .a { font: 12.5px var(--type); color: var(--ink3); }
.yun .c .gz { font: 600 24px var(--serif); letter-spacing: .08em; margin: 6px 0 2px; }
.yun .c .ss { font-size: 13px; color: var(--accent); }
.yun .c .y { font: 11.5px var(--type); color: var(--ink3); margin-top: 4px; }
.yun .c .now-t { position: absolute; top: -1px; left: 50%; transform: translate(-50%, -50%); font-size: 11.5px; background: var(--accent); color: var(--on-accent); padding: 1px 8px; border-radius: 8px; }
.ss-chips button { height: 38px; padding: 0 14px; border-radius: 19px; background: var(--card2); font-size: 15px; box-shadow: inset 0 0 0 1px var(--line); }

/* 底部弹出的注解 */
.sheet-bg { position: fixed; inset: 0; background: rgba(20, 16, 12, .36); z-index: 50; opacity: 0; transition: opacity .25s; }
.sheet-bg.in { opacity: 1; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-width: 480px; margin: 0 auto; background-color: var(--card); background-image: var(--grain); border-radius: 24px 24px 0 0; padding: 10px 22px calc(26px + var(--safe-b)); transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .8, .2, 1); max-height: 82dvh; overflow-y: auto; box-shadow: 0 -12px 40px -16px rgba(0, 0, 0, .35); }
.sheet.in { transform: none; }
.sheet .grab { width: 38px; height: 5px; border-radius: 3px; background: var(--line2); margin: 0 auto 16px; }
.sheet h3 { font: 700 24px var(--serif); letter-spacing: .08em; margin: 4px 0 10px; }
.sheet p { font-size: 16.5px; line-height: 1.85; margin: 0 0 12px; }
.sheet .form { box-shadow: none; background: transparent; padding: 0; margin: 0; }

/* 我的 */
.me-head { display: flex; align-items: center; gap: 14px; }
.me-head .who { flex: 1; min-width: 0; }
.me-head .who b { display: block; font: 700 21px var(--serif); letter-spacing: .06em; }
.me-head .who small { display: block; font-size: 14px; color: var(--ink2); margin-top: 2px; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modes button { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0 12px; border-radius: 18px; background: var(--card2); font-size: 15px; color: var(--ink2); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s; }
.modes img { width: 108px; height: 108px; border-radius: 50%; box-shadow: 0 0 0 4px #2a2724, 0 12px 22px -12px rgba(40, 30, 20, .6); }
.modes button.on { color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 2px var(--accent); }

/* 欢迎、空状态、登录 */
.welcome { text-align: center; padding-top: calc(var(--safe-t) + 36px); }
.welcome .devimg { width: 200px; height: 200px; margin: 6px auto 0; border-radius: 50%; box-shadow: 0 0 0 7px #2a2724, 0 24px 40px -20px rgba(40, 30, 20, .6); }
.welcome h1 { font: 700 30px var(--serif); letter-spacing: .14em; margin: 28px 0 10px; }
.welcome > p { font-size: 16.5px; line-height: 1.9; color: var(--ink2); margin: 0 auto; max-width: 320px; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; text-align: left; }
.steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.6; padding: 7px 0; counter-increment: s; }
.steps li::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--accent); font: 600 14px var(--sans); }
.empty { text-align: center; padding: 26px 8px 8px; }
.empty img { width: 140px; height: 140px; border-radius: 50%; margin: 0 auto 16px; box-shadow: 0 0 0 5px #2a2724; }
.empty p { font-size: 16px; line-height: 1.9; color: var(--ink2); margin: 0; }
.auth-head { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 0 4px; }
.auth-head img { width: 96px; height: 96px; border-radius: 50%; box-shadow: 0 0 0 5px #2a2724, 0 14px 26px -14px rgba(40, 30, 20, .6); }
.auth-head h1 { font: 700 26px var(--serif); letter-spacing: .1em; margin: 18px 0 6px; }
.auth-head p { font-size: 15px; color: var(--ink2); margin: 0; max-width: 300px; line-height: 1.75; }

/* 依据 */
.faces { display: flex; justify-content: space-around; margin: 4px 0 6px; }
.faces div { text-align: center; font-size: 14px; color: var(--ink2); }
.faces img { width: 84px; margin: 0 auto 8px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.7; }
.tbl td, .tbl th { text-align: left; vertical-align: top; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th { font-weight: 400; color: var(--ink3); font-size: 13px; }
.tbl td { color: var(--ink2); } .tbl td:first-child { color: var(--ink); }

/* 测试台 */
.qrbox { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 6px 0; }
.qrbox:empty { display: none; }
.qrbox canvas { width: 216px; height: 216px; image-rendering: pixelated; background: #fffdf8; padding: 10px; border-radius: 12px; }
.qrbox code { font-size: 12px; color: var(--ink3); word-break: break-all; text-align: center; }
.toast { position: fixed; left: 50%; bottom: calc(var(--tabh) + 24px + var(--safe-b)); transform: translate(-50%, 20px); background: var(--ink); color: var(--bg); padding: 11px 20px; font-size: 15px; opacity: 0; transition: all .3s; z-index: 60; pointer-events: none; border-radius: 22px; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); white-space: nowrap; }
.toast.in { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) { .view, .moment .jiao img, canvas.art, .slip, .slip-in p, .slip-in small, .stick { animation: none !important; transition: none !important; } }

/* 刚才：设备出了结果，网页开着时从顶上落下一张卡片，点进去就是这一次（2026-10-09） */
.just { position: fixed; z-index: 40; top: calc(var(--safe-t) + 8px); left: 12px; right: 12px; max-width: 496px; margin: 0 auto; display: flex; align-items: center; background: var(--card); border-radius: 20px; box-shadow: 0 0 0 1px var(--line), 0 14px 34px -14px rgba(60, 40, 20, .45); transform: translateY(calc(-100% - var(--safe-t) - 16px)); transition: transform .45s cubic-bezier(.2, 1.2, .4, 1); }
.just.in { transform: none; }
.just .jl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 12px 4px 12px 16px; }
.just .jl:active { opacity: .7; }
.just .m { flex: 1; min-width: 0; }
.just small { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink3); line-height: 1.4; }
.just small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--xing); }
.just b { display: block; font: 700 21px/1.3 var(--serif); letter-spacing: .06em; }
.just .go { display: inline-flex; align-items: center; color: var(--accent); font-size: 15px; white-space: nowrap; }
.just .go svg { width: 18px; height: 18px; }
.just .x { flex: none; width: 44px; height: 44px; margin-right: 4px; display: grid; place-items: center; color: var(--ink3); font-size: 22px; line-height: 1; }