/* ================================================================
   虾算算 · 设计系统 v12.53「大学城的纸, 主站的密度, 同一只虾」
   基表(本文件): 布局 / 结构 / 矿物色盘变量; v7 奶油贴纸风(硬黑边/硬投影/波点/回弹)已于 v12.53.2 从源头删除
   皮肤层 public/static/paper.css: 纸卡 9-slice / 朱砂 CTA / 纸条底栏 等纸面专属规则; 改皮先改 paper.css
   正本: docs/EVAL-ART-DIRECTION-2026-09-19.md §4.1 + docs/LAYOUT-RESEARCH-2026-09-19.md §八
   ================================================================ */
:root {
  /* v12.53.2 色盘源头换矿物盘(画法卡 EVAL §4.1): 变量名沿用 v7 以免全表改名, 值全部换; --xz-* 是同义别名(v12.52 起结果页在用) */
  --font-display: 'MiSans', 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
  --font-body: 'MiSans', 'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
  --font-brush: 'XiaBrush', 'STKaiti', 'KaiTi', serif;
  --ink: #3a3330;          --ink-soft: #6b5d55;    --ink-faint: #74665b;   /* v12.53.4 淡墨 #9a8b80(2.75:1) → #74665b(4.6:1 于宣纸), 全站辅助字过 WCAG AA */
  --cream: #f3ead8;        /* 宣纸·燕麦 */
  --coral: #b8442c;  --coral-lo: #8f3220;      /* 赭红 · 唯一强调 */
  --sunny: #d9a441;  --sunny-lo: #b5763f;      /* 藤黄 / 桦木 */
  --mint: #6f8f5a;   --mint-lo: #55703f;       /* 苔绿 */
  --grape: #3f5f7a;  --grape-lo: #2f4a60;      /* 靛青 */
  --pink: #c96a7b;   --pink-lo: #a64f60;       /* 胭脂 */
  --sky: #5f8ca6;    --sky-lo: #45708a;
  /* v12.53.4 语义色(宜/吉/好 · 中 · 忌/凶/错), 均 ≥4.3:1 于宣纸; 替换 JS 内联 var(--ok)/var(--bad)/var(--warn)/var(--coral)/var(--grape) 旧糖果色 */
  --ok: #55703f;  --warn: #9c5f2b;  --bad: #a64f60;  --good-pink: #a64f60;  --calm-blue: #3f5f7a;
  /* v12.53.5 补定义: 之前 var(--purple)/var(--line)/var(--shadow-lg)/var(--panel-soft) 未定义, 一直走 fallback 旧色 */
  --purple: var(--grape);  --line: rgba(90,62,43,.38);  --shadow-lg: 0 8px 24px rgba(58,51,48,.22);  --panel-soft: rgba(90,62,43,.06);
  --white-border: 1.2px solid rgba(90,62,43,.38);
  --r-lg: 6px; --r-md: 5px;
  --shadow-sticker: 0 4px 12px rgba(58,51,48,.12);
  --shadow-sm: 0 2px 6px rgba(58,51,48,.12);
  --c-tarot: var(--grape);   --c-tarot-d: var(--grape-lo);
  --c-bazi: var(--coral);    --c-bazi-d: var(--coral-lo);
  --c-liuyao: var(--sunny);  --c-liuyao-d: var(--sunny-lo);
  --c-meihua: var(--pink);   --c-meihua-d: var(--pink-lo);
  --c-num: var(--mint);      --c-num-d: var(--mint-lo);
  --c-qian: #6f8f5a;         --c-qian-d: #55703f;
  --c-extra: #74665b;        --c-extra-d: #6b5d55;
  /* 纸面位图(与虾虾大学城同一套 public/static/deco/xia/) */
  --paper-src: url(/static/deco/xia/ui-paper-card.webp?v=25b6efa0);
  --strip-src: url(/static/deco/xia/ui-paper-strip.webp?v=735b07c2);
  --pill-src: url(/static/deco/xia/ui-paper-pill.webp?v=0540d1d6);
  --cta-src: url(/static/deco/xia/ui-stroke-cta.webp?v=71fd6ecc);
  --dab-src: url(/static/deco/xia/ui-stroke-dab.webp?v=a580ae8e);
  --bg-src: url(/static/deco/xia/scene-bg-xia.webp?v=ff4994b8);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  min-height: 100vh; color: var(--ink);
  display: flex; justify-content: center;
  position: relative;
}
/* 波点背景层 */
body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#app { width: 100%; max-width: 480px; min-height: 100vh; padding: 20px 16px 100px; position: relative; z-index: 1; }

/* ---------- 通用元素 ---------- */
.title-font { font-family: var(--font-display); font-weight: 900; }
h1.page-title {
  font-family: var(--font-display); font-weight: 900; font-size: 30px; text-align: center;
  color: var(--ink); letter-spacing: 4px; text-indent: 4px; /* 补偿末字符尾隙 */
  margin-bottom: 4px;
}
.page-sub { text-align: center; font-size: 13px; color: var(--ink-soft); font-weight: 700; margin-bottom: 16px; }

/* 顶栏(内页) */
.topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.topbar .back {
  background: #fff; border: 1.2px solid rgba(90,62,43,.38); border-radius: 999px;
  width: 42px; height: 42px; font-size: 20px; cursor: pointer;
  box-shadow: var(--shadow-sm); color: var(--ink);
  transition: transform .22s cubic-bezier(.2,2.2,.4,1), box-shadow .22s cubic-bezier(.2,2.2,.4,1);
}
.topbar .back:active { transform: translateY(3px); transition-duration: .08s; }
.topbar .bar-title { font-family: var(--font-display); font-weight: 900; font-size: 24px; letter-spacing: 2px; display: inline-flex; align-items: center; gap: 8px; }
.topbar .bar-icon { width: 34px; height: 34px; object-fit: contain; }
.page-intro { margin: -6px 0 12px 46px; font-size: 12.5px; color: var(--ink-faint); font-weight: 700; letter-spacing: .5px; }
/* v10.22 SEO SSR 壳: 服务端渲染的可抓取内容, JS 接管后被视图覆盖。
   刻意保持"可见"而非移出屏幕 — 隐藏文本会被搜索引擎判 cloaking; 弱网/无 JS 用户也能看到导航 */
.ssr-shell { max-width: 520px; margin: 0 auto; padding: 8px 18px 90px; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.ssr-shell h1 { font-family: var(--font-display); font-weight: 900; font-size: 24px; color: var(--ink); margin: 6px 0 4px; }
.ssr-shell h2 { font-size: 15px; margin: 14px 0 4px; color: var(--ink); }
.ssr-shell ul { margin: 0; padding-left: 18px; }
.ssr-shell a { color: #4a7ba6; font-weight: 700; }
.ssr-shell nav { font-size: 12px; color: var(--ink-faint); }

/* 面板卡片: 白贴纸 */
.panel {
  background: #fff; border: 1.2px solid rgba(90,62,43,.38); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sticker);
  padding: 18px 16px; margin-bottom: 18px;
}
.panel-tint { color: #fff; }

/* 软糖按钮: 墨线描边+实心底边+回弹手感(v7工艺) */
.btn {
  display: inline-block; border: 1.2px solid rgba(90,62,43,.38); cursor: pointer;
  font-family: var(--font-display); font-weight: 900; font-size: 18px;
  color: #fff; letter-spacing: 2px; text-indent: 2px; /* 补偿末字符尾隙 */
  padding: 13px 26px; border-radius: 999px;
  transition: transform .22s cubic-bezier(.2,2.2,.4,1), box-shadow .22s cubic-bezier(.2,2.2,.4,1);
  text-align: center;
}
.btn:active { transform: translateY(6px); transition-duration: .08s; }
.btn:disabled { opacity: .55; cursor: wait; }
.btn-block { display: block; width: 100%; }
/* 成对按钮行: 窄宽下收缩内边距防折行 */
.btn-pair { display: flex; gap: 10px; }
.btn-pair .btn { padding-left: 8px; padding-right: 8px; white-space: nowrap; font-size: 15.5px; letter-spacing: .5px; text-indent: .5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.btn-primary { background: var(--sunny); color: var(--ink); text-shadow: none; }
.btn-primary:active { }
.btn-purple { background: var(--grape); }
.btn-purple:active { }
.btn-green { background: var(--c-qian); }
.btn-green:active { }
.btn-sm { font-size: 14px; padding: 7px 16px; letter-spacing: 1px; text-indent: 1px; border-width: 2.5px; }
.btn-sm.btn-primary { }
.btn-sm.btn-purple { }
.btn-sm.btn-green { }

/* 表单 */
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 900; font-size: 14px; margin-bottom: 6px; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; border: 1.2px solid rgba(90,62,43,.38); border-radius: var(--r-md);
  padding: 12px 14px; font-size: 16px; font-family: inherit; color: var(--ink);
  background: #fffdf8; outline: none; transition: box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; min-width: 0; }
/* v12.37 年/月/日/时 四并排在 320–360 宽下: 侧 padding 缩到 8px, 数字居中, 4 位年份不被截 */
.field-row .field input[type=number] { padding-left: 8px; padding-right: 8px; text-align: center; -moz-appearance: textfield; }
.field-row .field input[type=number]::-webkit-inner-spin-button, .field-row .field input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 360px) { .field-row { gap: 6px; } .field-row .field input, .field-row .field select { font-size: 15px; padding-top: 10px; padding-bottom: 10px; } }
/* v9.2.3 真太阳时出生地选择器: 贴纸触发按钮 + 胶囊面板(产品同款风格) */
.st-trig {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; font-size: 15px; font-weight: 700;
  font-family: var(--font-body); color: var(--ink-faint);
  background: #fffdf6; border: 2.5px solid #e0d8c4; border-radius: var(--r-md);
  cursor: pointer; text-align: left; transition: all .15s;
}
.st-trig .st-ic { width: 18px; height: 18px; object-fit: contain; opacity: .55; }
.st-trig .st-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-trig .st-arrow { color: var(--ink-faint); font-size: 13px; transition: transform .2s; }
.st-trig.st-open .st-arrow { transform: rotate(180deg); }
.st-trig.st-set {
  color: var(--ink); background: #fff8e1; border-color: rgba(90,62,43,.38);
}
.st-trig.st-set .st-ic { opacity: 1; }
.st-trig:active { transform: translateY(2px); }
.st-panel {
  margin-top: 8px; padding: 12px;
  background: #fffdf6; border: 1.2px solid rgba(90,62,43,.38); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); animation: rise .22s ease-out;
}
.st-panel-tip { font-size: 12px; color: var(--ink-faint); margin: 0 0 10px; }
.st-panel .seg { gap: 6px; }
.st-panel .seg .seg-item { padding: 6px 12px; font-size: 13px; }
.st-city-zone .seg .seg-item { background: #eef7f6; }
.st-city-zone .seg .seg-item.on { background: var(--mint); }
.st-city-zone { animation: rise .2s ease-out; }
.st-panel .seg-item.st-back { border-style: dashed; border-color: var(--ink-faint); background: transparent; color: var(--ink-faint); }

/* 装进桌面弹层: "无法添加到桌面?" 疑难折叠区 (v9.2.4) */
.pwa-faq-btn { display: block; margin: 12px auto 0; padding: 5px 14px; font-size: 12.5px; font-weight: 700; color: var(--ink-faint); background: transparent; border: 2px dashed var(--ink-faint); border-radius: 999px; cursor: pointer; font-family: inherit; }
.pwa-faq-btn .st-arrow { display: inline-block; transition: transform .18s; }
.pwa-faq-btn.open .st-arrow { transform: rotate(180deg); }
.pwa-faq { margin-top: 10px; padding: 12px 14px; background: #fffdf6; border: 1.2px solid rgba(90,62,43,.38); border-radius: var(--r-md); animation: rise .22s ease-out; text-align: left; max-height: 46vh; overflow-y: auto; }
.pwa-faq h5 { margin: 10px 0 3px; font-size: 13px; color: var(--ink); }
.pwa-faq h5:first-child { margin-top: 0; }
.pwa-faq p { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
.hint { font-size: 12px; color: var(--ink-faint); margin-top: 4px; }

/* v9.4 紫微十二宫飞星盘 */
.zw-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, minmax(88px, auto)); gap: 3px; background: var(--ink); border: 1.2px solid rgba(90,62,43,.38); border-radius: var(--r-md); overflow: hidden; margin: 8px 0; }
.zw-cell { background: #fffdf6; padding: 4px 5px; display: flex; flex-direction: column; min-width: 0; }
.zw-cell.zw-ming { background: #fdf3e0; box-shadow: inset 0 0 0 2px var(--sunny-lo); }
.zw-cell-hd { display: flex; align-items: center; gap: 3px; font-size: 10.5px; }
.zw-cell-hd b { font-size: 11px; color: var(--ink); }
.zw-cell-hd small { margin-left: auto; color: var(--ink-faint); font-size: 9px; }
.zw-shen { background: var(--grape); color: #fff; font-size: 9px; border-radius: 4px; padding: 0 3px; line-height: 1.4; }
.zw-major { font-size: 12px; font-weight: 700; line-height: 1.5; margin-top: 2px; color: var(--ink); }
.zw-major sup, .zw-minor sup { font-size: 9px; }
.zw-minor { font-size: 10px; line-height: 1.5; color: var(--ink-soft); flex: 1; }
.zw-ft { font-size: 9px; color: var(--ink-faint); text-align: right; }
.zw-center { background: #f6f1e4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px; }

/* 选项胶囊组 */
.seg { display: flex; gap: 8px; flex-wrap: wrap; }
.seg .seg-item {
  padding: 8px 16px; border-radius: 999px; background: #f6f1e4;
  font-size: 14px; font-weight: 700; color: var(--ink-soft); cursor: pointer;
  border: 2.5px solid transparent; transition: all .15s;
}
.seg .seg-item.on { background: var(--sunny); border-color: rgba(90,62,43,.38); color: var(--ink); transform: rotate(-1deg); }

/* 结果区块 */
.result-block { animation: rise .35s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.divider { border: none; border-top: 2.5px dashed #e0d8c4; margin: 14px 0; }

/* 标签章 */
.tag {
  display: inline-block; padding: 3px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 900; color: #fff;
  border: 1.2px solid rgba(90,62,43,.38);
}
.tag-gold { background: var(--sunny); color: var(--ink); }
.tag-red { background: var(--coral); }
.tag-green { background: var(--c-qian); }
.tag-gray { background: #b6b1c9; }
.tag-purple { background: var(--grape); }

/* 卦象显示 */
.gua-box { text-align: center; padding: 8px 4px; }
.gua-char { font-size: 64px; line-height: 1.1; color: var(--ink); }
.gua-name { font-weight: 900; font-size: 16px; margin-top: 2px; }
.gua-sub { font-size: 12px; color: var(--ink-faint); }
.gua-row { display: flex; justify-content: space-around; align-items: flex-start; }
.gua-arrow { font-size: 26px; color: var(--ink-faint); align-self: center; }

/* 六爻爻位表 */
.yao-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.yao-table td { padding: 7px 4px; text-align: center; border-bottom: 2px dashed #e8e2d4; }
.yao-line { font-family: monospace; font-size: 17px; letter-spacing: 2px; text-indent: 2px; font-weight: 900; }
.yao-moving { color: var(--coral-lo); }

/* 八字四柱 */
.pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.pillar {
  background: #fdf6ec; border-radius: var(--r-md); padding: 10px 4px;
  border: 1.2px solid rgba(90,62,43,.38); box-shadow: var(--shadow-sm);
}
.pillar .p-label { font-size: 11px; color: #b08950; font-weight: 700; }
.pillar .p-gz { font-family: var(--font-display); font-weight: 900; font-size: 26px; color: #6d4c1b; line-height: 1.25; }
.pillar .p-ss { font-size: 10px; color: #b08950; }
.wuxing-bar { display: flex; gap: 6px; margin-top: 10px; }
/* v12.53.5 五行计数: 皮肤层去掉满色底后白字不可见(只有 !important 的金 0 能看见 → 正好反了). 改矿物色左侧色条 + 墨字; 数量 0 的用 .wx-none 朱砂空心「缺」 */
.wuxing-bar .wx {
  flex: 1; text-align: center; border-radius: 4px; padding: 6px 0;
  font-size: 13px; font-weight: 800; color: var(--ink);
  border: 1.2px solid rgba(90,62,43,.38); border-left-width: 4px; background: rgba(255,255,255,.42);
}
.wx-木 { border-left-color: var(--mint); } .wx-火 { border-left-color: var(--coral); } .wx-土 { border-left-color: var(--sunny-lo); }
.wx-金 { border-left-color: var(--sunny); } .wx-水 { border-left-color: var(--grape); }
.wuxing-bar .wx.wx-none { color: var(--coral); border-color: var(--coral); border-left-width: 4px; background: rgba(184,68,44,.06); }

/* 塔罗卡 (v8.7 精修: 无边框柔投影 + 双列宫格 + 末张跨列居中)
   注: 塔罗牌是"内容本体"非UI控件, 特例不走贴纸粗描边, 用柔紫投影托出艺术品感 */
.tarot-spread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tarot-card {
  width: auto; background: #fff;
  border: none; border-radius: 16px; padding: 0; overflow: hidden;
  text-align: center;
  box-shadow: 0 6px 18px rgba(93, 74, 156, .18), 0 2px 5px rgba(93, 74, 156, .12);
  animation: flipIn .5s ease-out backwards;
}
/* 奇数张时末张跨两列居中(三牌阵呈品字, 保留牌阵布局感); 单张放大居中 */
.tarot-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: 58%; }
.tarot-card:only-child { width: 62%; }
.tarot-card:nth-child(2) { animation-delay: .12s; } .tarot-card:nth-child(3) { animation-delay: .24s; }
.tarot-card:nth-child(4) { animation-delay: .36s; } .tarot-card:nth-child(5) { animation-delay: .48s; }
.tarot-card:nth-child(n+6) { animation-delay: .6s; }
@keyframes flipIn { from { transform: rotateY(90deg) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.tarot-card .tc-pos {
  font-size: 12px; padding: 7px 0 6px; letter-spacing: 3px; font-weight: 900;
  background: var(--grape); color: #fff6e8;      /* v12.53.5 旧薰衣草紫渐变 → 靛青(塔罗模块色), 与矿物盘一致 */
}
.tarot-card .tc-art { font-size: 38px; padding: 0; line-height: 0; background: rgba(63,95,122,.08); }
.tarot-card .tc-art img { display: block; width: 100%; max-width: none; margin: 0;
  border: none; border-radius: 0; box-shadow: none; }
/* v10.26 牌背皮肤 + 翻牌: .tc-flip 为 3D 翻转容器(比例锁 7:12 = 牌面 280×480), 牌背在正面层, 牌面预先转 180° 藏在背面;
   加 .flipped 后整体绕 Y 转 180° 露出牌面. 逆位只旋转牌面图(牌背不动, 不提前泄露正逆) */
.tarot-card .tc-art { perspective: 700px; }
.tarot-card .tc-flip { position: relative; width: 100%; aspect-ratio: 7 / 12; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.4, .1, .2, 1); }
.tarot-card .tc-flip.flipped { transform: rotateY(180deg); }
.tarot-card .tc-flip img, .tarot-card .tc-flip .tc-back { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tarot-card .tc-flip .tc-face-img, .tarot-card .tc-flip .tc-back { transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; }
.tarot-card.rev .tc-flip .tc-face-img { transform: rotateY(180deg) rotate(180deg); }
/* 洗牌等待态: 三张牌背叠着左右洗 */
.tarot-shuffle-wrap { flex-direction: column; }
.tarot-shuffle { position: relative; width: 64px; height: 100px; margin: 0 auto 6px; }
.rite-loading .tarot-shuffle img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: 6px; filter: none;
  box-shadow: 0 3px 8px rgba(58,51,48,.25); transform-origin: 50% 100%; animation: shuf 1.1s ease-in-out infinite; }
.rite-loading .tarot-shuffle img:nth-child(2) { animation-delay: .18s; } .rite-loading .tarot-shuffle img:nth-child(3) { animation-delay: .36s; }
@keyframes shuf { 0%, 100% { transform: translateX(0) rotate(0); } 33% { transform: translateX(-22px) rotate(-8deg); } 66% { transform: translateX(22px) rotate(8deg); } }
.tarot-card .tc-name { font-size: 15px; font-weight: 900; color: var(--ink); margin-top: 9px; }
.tarot-card .tc-ori { font-size: 11.5px; font-weight: 900; margin-top: 2px; }
.tarot-card .tc-ori.up { color: var(--ok); } .tarot-card .tc-ori.down { color: var(--coral-lo); }
.tarot-card .tc-kw { font-size: 10.5px; color: var(--grape-lo); margin: 3px 10px 11px; line-height: 1.5; }

/* 灵签 */
.qian-poem {
  font-family: var(--font-display); font-weight: 900; font-size: 20px; line-height: 1.9;
  text-align: center; color: #5d4037; letter-spacing: 2px; text-indent: 2px;
  background: #fdf6ec; border-radius: var(--r-md); padding: 16px 10px;
  border: 1.2px solid rgba(90,62,43,.38); box-shadow: var(--shadow-sm);
}
/* 摇签动画 */
.qian-tube { width: 128px; height: auto; max-height: 210px; object-fit: contain; display: block; margin: 4px auto 8px; filter: drop-shadow(0 4px 8px rgba(93,64,55,.25)); transform-origin: 50% 90%; } /* v10.14: 第八批竖构图签筒(2:3), 收窄宽度防止过高 */
.shaking { animation: shake .5s ease-in-out infinite; }
@keyframes shake { 0%,100%{transform:rotate(-12deg)} 50%{transform:rotate(12deg)} }

/* 九宫格 */
.loshu { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; max-width: 240px; margin: 0 auto; }
.loshu .cell {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; border-radius: 14px; border: 1.2px solid rgba(90,62,43,.38); box-shadow: var(--shadow-sm);
}
.loshu .cell.miss { background: #f6f1e4; border-color: #cfc9bb; box-shadow: none; opacity: .55; }
.loshu .cell .n { font-size: 22px; font-weight: 900; color: var(--mint-lo); font-family: var(--font-display); }
.loshu .cell .cnt { font-size: 11px; color: var(--ink-faint); font-weight: 700; }
.loshu .cell.miss .n { color: #bdbdbd; }
.lifepath-ball {
  width: 92px; height: 92px; border-radius: 50%; margin: 6px auto;
  background: radial-gradient(circle at 32% 28%, #a8e8e3, var(--mint) 55%, var(--mint-lo));
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: 800; color: #fff; font-family: var(--font-display);
  border: 1.2px solid rgba(90,62,43,.38);
}

/* AI 解读区 */
.ai-box {
  background: #f3efff;
  border: 1.2px solid rgba(90,62,43,.38); border-radius: 18px;
  padding: 16px; margin-top: 16px; transform: rotate(-.6deg);
  box-shadow: var(--shadow-sticker);
}
.ai-box .ai-head { display: flex; align-items: center; gap: 8px; font-weight: 900; color: var(--grape-lo); margin-bottom: 8px; font-family: var(--font-display); font-weight: 900; letter-spacing: 1px; }
.ai-box .ai-head img { width: 26px; height: auto; }
/* 额度角标: 结果页常驻显示今日剩余AI解读次数 */
.ai-quota { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--ink-faint); background: var(--cream); border: 1.5px solid rgba(61,58,80,.15); border-radius: 999px; padding: 2px 9px; font-family: var(--font-body); letter-spacing: 0; white-space: nowrap; }
/* 连签火焰徽章: 每日一签卡片 */
.streak-chip { display: inline-block; font-size: 11px; font-weight: 900; color: #fff; background: linear-gradient(135deg, var(--coral), var(--coral-lo)); border-radius: 999px; padding: 1px 8px; vertical-align: 2px; letter-spacing: 0; }
/* 记录星标: 收藏置顶 */
.rec-star { flex: none; width: 34px; height: 34px; border: none; background: transparent; font-size: 19px; cursor: pointer; padding: 0; line-height: 1; opacity: .55; transition: transform .15s, opacity .15s; }
.rec-star .star-ic { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; }
.rec-star.on { opacity: 1; transform: scale(1.12); }
.rec-star:active { transform: scale(.85); }
.rec-item.rec-starred { border-color: var(--sunny-lo); background: #fffbef; }
/* 分享链接区块 */
.share-link-box { background: #eef6fb; border: 1.2px solid rgba(90,62,43,.38); border-radius: 16px; padding: 12px 14px; }
.share-url { font-size: 12px; word-break: break-all; background: #fff; border: 2px dashed #b8d4e8; border-radius: 10px; padding: 8px 10px; color: #4a7ba6; cursor: pointer; font-family: monospace; }
.ai-content { font-size: 14.5px; line-height: 1.9; color: #544d78; white-space: pre-wrap; }
.ai-loading { text-align: center; padding: 12px; color: var(--grape-lo); font-weight: 700; }
.ai-loading .dots::after { content: ''; animation: dots 1.4s steps(4,end) infinite; }
@keyframes dots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }
/* 打坐虾加载动画: 缓慢呼吸浮动 */
.zen-loading { text-align: center; padding: 14px 12px 10px; color: var(--grape-lo); font-weight: 700; }
.zen-loading img { display: block; width: 108px; height: auto; margin: 0 auto 6px;
  animation: zenfloat 2.6s ease-in-out infinite; }
@keyframes zenfloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-7px) scale(1.03)} }
/* 仪式感加载: 洗牌虾/抛铜钱虾 摇摆入场 */
.rite-loading { text-align: center; padding: 16px 12px 12px; color: var(--grape-lo); font-weight: 700;
  background: #fffdf6; border: 1.2px solid rgba(90,62,43,.38); border-radius: 20px; margin-top: 14px; animation: rise .3s ease-out; }
.rite-loading img { display: block; width: 128px; height: auto; margin: 0 auto 6px;
  animation: ritewig 0.55s ease-in-out infinite; transform-origin: 50% 85%; }
.rite-loading .dots::after { content: ''; animation: dots 1.4s steps(4,end) infinite; }
@keyframes ritewig { 0%,100%{transform:rotate(-7deg) translateY(0)} 50%{transform:rotate(7deg) translateY(-4px)} }
/* 摇签时的抱签筒虾: 比静态签筒图大一点更活泼 */
.qian-tube.tube-live { width: 170px; }
/* AI 解读完点赞虾收尾条 */
.ai-done { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px;
  padding: 8px 10px; background: #f2fbe8; border: 2.5px dashed var(--mint); border-radius: 14px;
  color: var(--mint-lo); font-weight: 800; font-size: 13.5px; animation: rise .35s ease-out; }
.ai-done img { width: 44px; height: auto; flex: none;
  animation: bob 1.8s ease-in-out infinite; }
/* 结果页顶部铃铛横幅: 图为底, 文字压在缎带中央 */
.res-banner { position: relative; width: min(340px, 92%); margin: -4px auto 6px; }
.res-banner img { display: block; width: 100%; height: auto; }
.res-banner .rb-text { position: absolute; left: 50%; top: 34%; transform: translate(-50%,-50%); /* 34%=缎带正面实测视觉中心(38%偏下) */
  width: 72%; text-align: center; font-family: var(--font-display); font-weight: 900; color: #fff;
  font-size: 21px; letter-spacing: 3px; text-indent: 3px; /* 补偿末字符 letter-spacing 尾隙, 使字形真正居中 */
  white-space: nowrap; overflow: hidden;
  text-shadow: 1.5px 1.5px 0 rgba(122,34,20,.55); }
.ai-note { font-size: 11px; color: var(--ink-faint); margin-top: 8px; text-align: center; }

/* 记录列表 */
.rec-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1.2px solid rgba(90,62,43,.38); border-radius: var(--r-md);
  padding: 12px 14px; margin-bottom: 12px;
  box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .1s, box-shadow .1s;
}
.rec-item:active { transform: translateY(3px); }
.rec-item .rec-icon { font-size: 28px; }
.rec-item .rec-main { flex: 1; min-width: 0; }
.rec-item .rec-type { font-weight: 900; font-size: 14px; }
.rec-item .rec-q { font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-item .rec-time { font-size: 11px; color: var(--ink-faint); }

/* 底部导航 */
.nav {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 448px;
  background: #fff; border: 1.2px solid rgba(90,62,43,.38); border-radius: 999px;
  display: flex; padding: 7px; z-index: 50;
}
.nav a {
  flex: 1; text-align: center; text-decoration: none;
  padding: 7px 0 6px; border-radius: 999px;
  font-size: 12px; font-weight: 900; color: var(--ink-faint); transition: all .16s;
  border: 2.5px solid transparent;
}
.nav a.active { background: var(--sunny); color: var(--ink); border-color: rgba(90,62,43,.38);
  transform: translateY(-4px) rotate(-1deg); }
.nav a span { display: block; font-size: 18px; }
.nav a.active span { transform: scale(1.1); }

/* 首页专属 */
.banner {
  padding: 0 0 4px; text-align: center; margin: -10px 0 8px; position: relative;
}
.banner h1 { font-family: var(--font-display); font-weight: 900; font-size: 38px; letter-spacing: 6px; text-indent: 6px; color: var(--ink); }
.banner p { color: var(--ink-soft); font-weight: 700; font-size: 13px; margin-top: 4px; }
.home-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 13px; }
.mod-card {
  border: var(--white-border); border-radius: var(--r-lg);
  padding: 17px 8px 13px; text-align: center; cursor: pointer;
  transition: transform .12s, box-shadow .12s; position: relative; color: #fff;
  box-shadow: var(--shadow-sticker);
}
.mod-card:active { transform: translateY(5px) scale(.97) rotate(0) !important; }
.mod-card .m-icon { display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; margin: 0 auto 8px; font-size: 32px;
  background: #fff; border: 1.2px solid rgba(90,62,43,.38);
  border-radius: 38% 62% 55% 45% / 55% 45% 60% 40%; }
.mod-card .m-icon .gi { width: 34px; height: 34px; vertical-align: middle; }
.mod-card .m-name { display: block; font-family: var(--font-display); font-weight: 900; font-size: 18px; letter-spacing: 2px; text-indent: 2px; }
.mod-card .m-sub { display: block; font-size: 10.5px; opacity: .95; margin-top: 3px; font-weight: 700; }
.mod-card .m-badge {
  position: absolute; top: -10px; right: -6px; background: var(--pink); color: #fff;
  border: 1.2px solid rgba(90,62,43,.38); border-radius: 999px;
  padding: 2px 9px; font-size: 10px; font-weight: 900; transform: rotate(7deg);
  animation: wig 2.2s ease-in-out infinite;
}
@keyframes wig { 0%,100%{transform:rotate(7deg)} 50%{transform:rotate(-3deg) scale(1.08)} }
.bg-tarot { background: var(--c-tarot); }
.bg-bazi { background: var(--c-bazi); }
.bg-liuyao { background: var(--c-liuyao); }
.bg-meihua { background: var(--c-meihua); }
.bg-num { background: var(--c-num); }
.bg-qian { background: var(--c-qian); }
.chips { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.chip {
  background: #fff; border: 1.2px solid rgba(90,62,43,.38); border-radius: 999px; padding: 7px 15px;
  font-size: 13px; font-weight: 700; color: var(--ink);
  box-shadow: var(--shadow-sm); cursor: pointer; transition: transform .1s, box-shadow .1s;
}
.chip:active { transform: translateY(3px); }
.sec-title { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; font-weight: 900; color: var(--ink-soft); font-size: 13px; letter-spacing: 3px; }
.sec-title::before, .sec-title::after { content: ''; flex: 1; height: 5px; border-radius: 5px;
  background: repeating-linear-gradient(90deg,#e8e2d4 0 10px,transparent 10px 18px); }
/* ---------- AI 追问快捷键(v9.9) ---------- */
.fu-zone { margin-top: 14px; padding: 12px; background: #f7f3fc; border: 2.5px dashed #c9b8e8; border-radius: var(--r-lg); }
.fu-head { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 900; color: var(--ink); margin-bottom: 9px; flex-wrap: wrap; }
.fu-head img { width: 26px; height: 26px; }
.fu-note { font-size: 10.5px; font-weight: 700; color: var(--ink-faint); margin-left: auto; }
.fu-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.fu-chip {
  background: #fff; border: 1.2px solid rgba(90,62,43,.38); border-radius: 999px; padding: 6px 12px;
  font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; transition: transform .1s, box-shadow .1s; font-family: inherit;
}
.fu-chip:active { transform: translateY(2px); }
.fu-chip:disabled { opacity: .5; cursor: wait; }
/* v10.16 多轮追问: 自由输入 + 轮次角标 */
.fu-ask { display: flex; gap: 7px; margin-top: 10px; }
.fu-input { flex: 1; min-width: 0; padding: 9px 12px; font-size: 13px; font-weight: 700; color: var(--ink);
  background: #fff; border: 1.2px solid rgba(90,62,43,.38); border-radius: 12px; }
.fu-input:focus { outline: none; border-color: #7a5fb0; }
.fu-input::placeholder { color: var(--ink-faint); font-weight: 600; }
.fu-send { flex: none; padding: 0 16px; font-size: 14px; font-weight: 900; color: #fff; cursor: pointer;
  background: var(--grape); border: 1.2px solid rgba(90,62,43,.38); border-radius: 12px;
  font-family: inherit; }
.fu-send:active { transform: translateY(2px); }
.fu-round { font-size: 10.5px; font-weight: 700; color: var(--ink-faint); text-align: right; margin-top: 6px; min-height: 1em; }

.fu-item { margin-top: 10px; }
.fu-q { font-size: 12.5px; font-weight: 900; color: #7a5fb0; margin-bottom: 4px; }
.fu-q::before { content: 'Q '; opacity: .6; }
.fu-a { font-size: 13px; line-height: 1.75; color: var(--ink); background: #fff; border: 2px solid #e3d9f3; border-radius: 12px; padding: 9px 12px; }
/* ---------- 档案填入行 + TA 关系档案(v9.9) ---------- */
.fill-row { display: flex; flex-wrap: wrap; gap: 7px; }
.fill-row .btn[data-fill="me"] { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; letter-spacing: .5px; text-indent: .5px; padding: 8px 12px; }   /* v12.37 档案填入按钮整行、单行, 320 宽不折两行 */
.rel-fill-chip { background: #fef0f4; border: 1.2px solid rgba(90,62,43,.38); color: var(--ink); }
.rel-card { display: flex; align-items: center; gap: 9px; background: #fdf8f3; border: 2px solid #e8ddcf; border-radius: 12px; padding: 8px 11px; margin-bottom: 8px; }
.rel-emoji { font-size: 20px; flex: none; }
.rel-info { min-width: 0; flex: 1; }
.rel-info b { display: block; font-size: 13.5px; color: var(--ink); }
.rel-info small { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 1px; }
.rel-del { flex: none; background: none; border: none; color: var(--ink-faint); font-size: 14px; cursor: pointer; padding: 4px 6px; }
.rel-del:active { color: var(--bad); }
/* v10.12 TA 档案编辑按钮 + 结果页回存按钮 */
.rel-edit { flex: none; background: none; border: none; color: var(--ink-faint); font-size: 14px; cursor: pointer; padding: 4px 6px; }
.rel-edit:active { color: var(--coral); }
.save-ta-btn { width: 100%; }
/* ---------- 首页四分区(v9.8): 今日双入口 + 进阶折叠 ---------- */
.today-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 14px; }
.today-mini {
  display: flex; align-items: center; gap: 9px; text-align: left;
  background: #fff; border: 1.2px solid rgba(90,62,43,.38); border-radius: var(--r-lg);
  padding: 10px 12px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: transform .1s, box-shadow .1s; font-family: inherit; min-width: 0;
}
.today-mini:active { transform: translateY(3px); }
.today-mini img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.today-mini span { min-width: 0; }
.today-mini b { display: block; font-size: 13.5px; color: var(--ink); }
.today-mini small { display: block; font-size: 10.5px; color: var(--ink-soft); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-horo { background: #fdf6ec; }
.tm-daily { background: #f2f9f3; }
.adv-fold { margin-top: 18px; }
.adv-fold summary {
  list-style: none; display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; padding: 9px 0; font-size: 12.5px; font-weight: 900; color: var(--ink-soft);
  letter-spacing: 2px; user-select: none;
}
.adv-fold summary::-webkit-details-marker { display: none; }
.adv-fold summary .af-arrow { transition: transform .2s; font-size: 11px; }
.adv-fold[open] summary .af-arrow { transform: rotate(180deg); }
.chip-recent { background: #fef3f1; }
.float-deco { position: absolute; font-size: 24px; opacity: .5; animation: floaty 4s ease-in-out infinite; pointer-events: none; z-index: 0; }
@keyframes floaty { 0%,100%{transform:translateY(0) rotate(-8deg)} 50%{transform:translateY(-13px) rotate(8deg)} }

/* 错误提示 */
.err-toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  background: var(--coral); color: #fff; font-weight: 900; font-size: 14px;
  border: 1.2px solid rgba(90,62,43,.38);
  padding: 11px 22px; border-radius: 999px;
  z-index: 99; animation: rise .25s ease-out;
}

/* 免责声明 */
.disclaimer { text-align: center; font-size: 11px; color: var(--ink-faint); margin-top: 20px; line-height: 1.7; }

/* ================================================================
   虾算算 v3.1 追加: 每日一签卡片 / 补充按钮色
   ================================================================ */
.btn-orange { background: var(--sunny); }
.btn-orange:active { }
.btn-blue { background: var(--sky); }
.btn-blue:active { }
.btn-sm.btn-orange { }
.btn-sm.btn-blue { }

.daily-card { margin-bottom: 10px; }
.daily-card:empty { display: none; margin: 0; }
.daily-inner {
  background: #fff;
  border: var(--white-border); border-radius: var(--r-lg);
  padding: 8px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
/* v9.1.1 修复: 手机上左侧文案挤压按钮导致"摇一签"竖排换行 → 按钮禁止收缩与换行 */
.daily-inner .btn { flex: none; white-space: nowrap; }
.daily-inner.drawn { background: #fff8e1; }
.daily-ask {
  flex: none; white-space: nowrap; background: #fff; color: var(--ink-soft);
  border: 1.2px solid rgba(90,62,43,.38); border-radius: 999px; padding: 5px 9px;
  font-size: 11px; font-weight: 800; cursor: pointer;
  transition: transform .1s, box-shadow .1s; font-family: inherit;
}
.daily-ask:active { transform: translateY(2px); }
/* v8.0 阶段4: 首页活动卡 */
.event-card { margin-bottom: 14px; }
.event-card:empty { display: none; margin: 0; }
.event-inner { background: linear-gradient(135deg, #fff4e0, #ffe8f0); }
.event-done { font-size: 12px; font-weight: 900; color: var(--ink-soft); background: #fff; border: 1.2px solid rgba(90,62,43,.38); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.daily-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.daily-icon { width: 30px; height: auto; flex: none; animation: bob 3s ease-in-out infinite; filter: drop-shadow(0 2px 3px rgba(93,64,55,.2)); }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
.daily-left > div { min-width: 0; }
.daily-left b { display: block; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.daily-left small { display: block; font-size: 11px; color: var(--ink-soft); margin-top: 1px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================================================================
   v7 新增: 质感图标 / 糖果字块Logo / 扫光英文名 / 果冻主视觉 / 表情包
   ================================================================ */
/* 质感剪影图标 (game-icons mask 上色) */
.gi { display: inline-block; width: 20px; height: 20px; vertical-align: -4px; background: var(--ink);
  -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat; }
.gi.coral { background: linear-gradient(180deg,var(--coral) 10%,var(--coral) 55%,var(--coral-lo)); }
.gi.sunny { background: linear-gradient(180deg,#ffe6a8 10%,var(--sunny) 55%,var(--sunny-lo)); }
.gi.mint { background: linear-gradient(180deg,#a8e8e3 10%,var(--mint) 55%,var(--mint-lo)); }
.gi.grape { background: linear-gradient(180deg,#d3c4ff 10%,var(--grape) 55%,var(--grape-lo)); }
.gi.pink { background: linear-gradient(180deg,#ffc2d1 10%,var(--pink) 55%,var(--pink-lo)); }
.gi.sky { background: linear-gradient(180deg,#b5e0ff 10%,var(--sky) 55%,var(--sky-lo)); }
.gi.green { background: linear-gradient(180deg,#c5e1a5 10%,var(--c-qian) 55%,var(--c-qian-d)); }
.gi.paper { background: #fff; }

/* 糖果字块 Logo(每字一块贴纸) */
.logo { display: flex; justify-content: center; gap: 10px; margin: 0 0 -8px; }
.logo .logo-img { width: 224px; max-width: 72%; height: auto; display: block;
  animation: logodrop .6s cubic-bezier(.3,1.6,.4,1) both; }
@keyframes logodrop { 0%{transform:translateY(-40px) scale(.6) rotate(12deg);opacity:0}
  70%{transform:translateY(4px) scale(1.05)} 100%{opacity:1} }

/* 斜口号胶囊 */
.slogan { text-align: center; margin-bottom: 4px; }
.slogan span { display: inline-block; background: var(--ink); color: #ffe9b0; font-size: 13px; letter-spacing: 3px; text-indent: 3px;
  padding: 5px 18px; border-radius: 999px; transform: rotate(-1.5deg); font-weight: 700; }

/* 英文名: 渐变扫光 */
.en-line { text-align: center; margin: 0 0 6px; }
.en-name { font-family: var(--font-display); font-size: 21px; font-weight: 900; font-style: italic; letter-spacing: 3px; text-indent: 3px; display: inline-block;
  color: var(--coral);
  text-shadow:
    -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--ink),
    0 -1.5px 0 var(--ink), 0 1.5px 0 var(--ink), -1.5px 0 0 var(--ink), 1.5px 0 0 var(--ink),
    3px 3.5px 0 var(--ink);
  transform: rotate(-1deg); }
.en-line .star { display: inline-block; font-size: 13px; color: var(--sunny); -webkit-text-stroke: .8px var(--ink);
  margin: 0 8px; vertical-align: 4px; animation: twinkle 2.6s ease-in-out infinite; }
.en-line .star:last-child { animation-delay: 1.3s; }
@keyframes twinkle { 0%,100%{opacity:.35;transform:scale(.85)} 50%{opacity:1;transform:scale(1.15)} }

/* 果冻软糖主视觉(深色锚点) */
.hero-zone { position: relative; margin: 8px 0 4px; }
.hero { position: relative; width: 210px; height: 200px; margin: 0 auto; }

/* hero 两侧手游风悬浮 icon 按钮(v8.2) */
.hero-side { position: absolute; top: 8px; display: flex; flex-direction: column; gap: 12px; z-index: 3; }
.hero-side.hs-left { left: 2px; }
.hero-side.hs-right { right: 2px; }
.hero-btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font-family: inherit; animation: hbIn .45s cubic-bezier(.2,1.6,.4,1) both; }
.hero-side.hs-right .hero-btn { animation-delay: .12s; }
.hero-side.hs-left .hero-btn:nth-child(2) { animation-delay: .08s; }
@keyframes hbIn { 0%{transform:scale(.3);opacity:0} 100%{transform:scale(1);opacity:1} }
.hero-btn .hb-ic { display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; background: #fffdf8; border: 1.2px solid rgba(90,62,43,.38); border-radius: 50%;
  transition: transform .12s ease; }
/* 糖果彩底(方案D): 每个按钮一个糖色 */
.hero-btn.hb-yellow .hb-ic { background: radial-gradient(circle at 32% 26%, var(--sunny), var(--sunny) 70%); }
.hero-btn.hb-pink   .hb-ic { background: radial-gradient(circle at 32% 26%, #ffb3c0, var(--pink) 70%); }
.hero-btn.hb-blue   .hb-ic { background: radial-gradient(circle at 32% 26%, #9edcff, var(--sky) 70%); }
.hero-btn.hb-green  .hb-ic { background: radial-gradient(circle at 32% 26%, #a9ecc9, var(--mint) 70%); }
.hero-btn.hb-purple .hb-ic { background: radial-gradient(circle at 32% 26%, #d3c4ff, var(--grape) 70%); }
.hero-btn:active .hb-ic { transform: scale(.9) translateY(2px); }
.hero-btn .hb-ic img { width: 29px; height: 29px; object-fit: contain; }
.hero-btn .hb-label { font-size: 10.5px; font-weight: 900; color: var(--ink); letter-spacing: .5px;
  background: #fff; border: 1.2px solid rgba(90,62,43,.38); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
/* 红点: 有可领奖励 */
.hero-btn.hb-dot::after { content: ''; position: absolute; top: -3px; right: 3px; width: 13px; height: 13px;
  background: radial-gradient(circle at 34% 30%, var(--coral), var(--coral-lo) 68%); border: 1.2px solid rgba(90,62,43,.38);
  border-radius: 50%; z-index: 2; animation: dotPulse 1.4s ease-in-out infinite; }
@keyframes dotPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.28)} }

/* 首页悬浮按钮弹层 */
.home-pop { max-width: 360px; }
.hp-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
  border-bottom: 2.5px dashed #efe9db; padding-bottom: 9px; }
.hp-head img { width: 30px; height: 30px; object-fit: contain; }
.hp-head h3 { margin: 0; flex: 1; font-family: var(--font-display); font-weight: 900; font-size: 19px; color: var(--ink); }
.hp-close { border: 1.2px solid rgba(90,62,43,.38); background: #f6f1e4; color: var(--ink-soft); font-weight: 900;
  width: 30px; height: 30px; border-radius: 10px; cursor: pointer; font-size: 14px; line-height: 1; flex: none; }
.hp-close:active { transform: translateY(2px); box-shadow: 0 .5px 0 rgba(61,58,80,.5); }
.hp-event-card { display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #fff4e0, #ffe8f0); border: 1.2px solid rgba(90,62,43,.38); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 12px; }
.hp-event-card > img { width: 40px; height: auto; flex: none; animation: bob 3s ease-in-out infinite; }
.hp-event-card b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 3px; }
.hp-event-card small { display: block; font-size: 12px; color: var(--ink-soft); line-height: 1.6; }

/* 「我的」页 v8.4: 账号卡统计条 + 宫格快捷入口 */
.acct-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.acct-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--ink-soft);
  background: #f6f1e4; border: 1.2px solid rgba(90,62,43,.38); border-radius: 999px; padding: 3px 12px; }
.acct-stat[role="button"] { cursor: pointer; }
.acct-stat img { width: 17px; height: 18px; object-fit: contain; }
.acct-stat b { font-family: var(--font-display); font-weight: 900; font-size: 15px; color: var(--ink); }
.acct-stat small { color: var(--coral-lo); font-weight: 900; margin-left: 1px; }
.me-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.me-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  background: #fffdf8; border: 1.2px solid rgba(90,62,43,.38); border-radius: 16px; padding: 12px 4px 10px; font-family: inherit;
  transition: transform .12s ease; -webkit-tap-highlight-color: transparent; }
.me-tile:active { transform: scale(.94) translateY(2px); }
.me-tile img { width: 32px; height: 32px; object-fit: contain; }
.me-tile span { font-size: 12px; font-weight: 900; color: var(--ink); letter-spacing: .5px; }
.hero .jelly { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 164px; height: 156px;
  background: radial-gradient(circle at 32% 26%, #5a5478, #3d3a50 72%);
  border: 4px solid var(--ink);
  border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
  animation: squish 3.2s ease-in-out infinite; }
.hero .jelly::after { content: ''; position: absolute; inset: 10px; border-radius: inherit;
  border: 2px dashed rgba(255,225,160,.45); }
.hero .mascot { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 156px; height: auto; z-index: 2;
  animation: mbob 3.2s ease-in-out infinite; }
@keyframes mbob { 0%,100%{transform:translateX(-50%) translateY(0) rotate(-1.5deg)} 50%{transform:translateX(-50%) translateY(-6px) rotate(1.5deg)} }
@keyframes squish {
  0%,100%{border-radius:46% 54% 52% 48% / 54% 46% 54% 46%;transform:translate(-50%,-50%) scale(1,1)}
  35%{border-radius:52% 48% 46% 54% / 46% 54% 46% 54%;transform:translate(-50%,-52%) scale(.98,1.03)}
  70%{border-radius:48% 52% 54% 46% / 52% 48% 52% 48%;transform:translate(-50%,-49%) scale(1.03,.97)} }
.hero .h-shadow { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 16px; border-radius: 50%; background: rgba(61,58,80,.14); }
.hero .h-tag { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%) rotate(2deg); white-space: nowrap;
  background: #fff; border: 1.2px solid rgba(90,62,43,.38); color: var(--ink); font-size: 10.5px; font-weight: 700;
  padding: 3px 13px; border-radius: 999px; letter-spacing: 1px; text-indent: 1px; }
.hero .flo { position: absolute; font-size: 17px; animation: flo 2.6s ease-in-out infinite; }
.hero .flo-img { width: 18px; height: auto; }
@keyframes flo { 0%,100%{transform:translateY(0) rotate(-8deg);opacity:.9} 50%{transform:translateY(-9px) rotate(10deg);opacity:1} }

/* 表情包(结果等级出场) */
.result-emoji { display: block; width: 92px; height: auto; margin: 2px auto 8px;
  animation: stampIn .5s cubic-bezier(.2,1.9,.4,1) .15s both; }
.result-emoji.sm { width: 64px; }
@keyframes stampIn { 0%{transform:scale(1.9) rotate(-8deg);opacity:0} 100%{transform:scale(1) rotate(0);opacity:1} }
.emoji-inline { display: inline-block; width: 30px; height: auto; vertical-align: -9px; }

/* 结果等级章(替代纯tag场景) */
.grade-pill { display: inline-block; color: #fff; font-family: var(--font-display); font-weight: 900; font-size: 15.5px; letter-spacing: 3px; text-indent: 3px;
  padding: 6px 24px; border-radius: 999px; transform: rotate(1deg);
  border: 1.2px solid rgba(90,62,43,.38);
  animation: stampIn .5s cubic-bezier(.2,1.9,.4,1) .3s both; }

/* 分数大数字 */
.big-score { font-family: var(--font-display); font-weight: 800; text-shadow: 3px 3px 0 var(--ink); }

/* 底栏 gi 图标与虾头 */
.nav a .nav-gi { display: block; width: 21px; height: 21px; margin: 0 auto 2px; background: var(--ink-faint);
  -webkit-mask: var(--icon) center/contain no-repeat; mask: var(--icon) center/contain no-repeat; }
.nav a.active .nav-gi { background: var(--ink); }
.nav a .nav-img { display: block; width: 24px; height: auto; margin: 0 auto 1px; filter: grayscale(.75) opacity(.6); }
.nav a.active .nav-img { filter: none; }

/* ===== AI 解读 Markdown 排版 (mdRender) ===== */
.ai-content .md-h { font-family: var(--font-display); font-weight: 900; font-size: 16.5px; color: var(--ink);
  margin: 14px 0 6px; padding-left: 10px; border-left: 5px solid var(--sunny); line-height: 1.5; }
.ai-content .md-h:first-child { margin-top: 2px; }
.ai-content .md-p { margin: 7px 0; font-size: 14px; line-height: 2; color: var(--ink); }
.ai-content .md-ul { margin: 6px 0 10px; padding-left: 4px; list-style: none; }
.ai-content .md-ul li { position: relative; padding-left: 20px; margin: 5px 0; font-size: 14px; line-height: 1.9; }
.ai-content .md-ul li::before { content: ''; position: absolute; left: 4px; top: 11px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--mint); border: 1.2px solid rgba(90,62,43,.38); }
.ai-content .md-b { color: var(--coral-lo); font-weight: 800; }
.ai-content .md-hr { border: none; border-top: 2.5px dashed #e0d8c4; margin: 12px 0; }
.ai-content .md-note { color: var(--ink-faint); font-size: 12px; }

/* ===== 记录详情: 盘面速览 ===== */
.rd-brief { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.rd-chip { background: #fff; border: 1.2px solid rgba(90,62,43,.38); border-radius: 12px;
  padding: 5px 10px; font-size: 12.5px; line-height: 1.5; box-shadow: var(--shadow-sm); }
.rd-chip b { color: var(--coral-lo); }
.rd-raw summary { font-size: 12px; color: var(--ink-faint); cursor: pointer; padding: 4px 0; }

/* ===== 生成图片按钮/水印 ===== */
.snap-wm { text-align: center; font-size: 12px; color: var(--ink-faint); padding: 8px 0 2px;
  font-family: var(--font-display); font-weight: 900; }

/* ===== 彩色手绘图标素材 (模块卡/chip) ===== */
.mod-card .m-icon .m-img { width: 44px; height: 44px; object-fit: contain; }
.chip .chip-img { width: 22px; height: 22px; object-fit: contain; vertical-align: -6px; margin-right: 1px; }

/* ===== 记录页类型图标 ===== */
.rec-item .rec-icon img { width: 34px; height: 34px; object-fit: contain; vertical-align: middle; }
.seg-item .seg-ticon { width: 17px; height: 17px; object-fit: contain; vertical-align: -3px; margin-right: 2px; }
/* 记录页筛选器「更多/收起」按钮: 虚线边框区分于类型标签, 不参与选中态 */
.seg .seg-item.seg-more { border-style: dashed; color: var(--ink-faint); background: transparent; }
#rec-rest { display: contents; }
.panel .p-ic { width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; margin-right: 5px; opacity: .85; }
.btn .btn-emoji { width: 24px; height: 24px; object-fit: contain; vertical-align: -6px; margin-right: 3px; }

/* ================= 分享卡片弹层 ================= */
.share-mask {
  position: fixed; inset: 0; z-index: 999; background: rgba(40,36,60,.62);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  animation: fadein .2s ease-out;
}
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
.share-pop {
  background: #fffdf8; border: 1.2px solid rgba(90,62,43,.38); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); padding: 14px; max-width: 340px; width: 100%;
  max-height: 92vh; overflow-y: auto;
}
.share-pop > img {
  width: 100%; border-radius: var(--r-md); border: 1.2px solid rgba(90,62,43,.38); display: block;
}
/* v9.4.1: 支持 2-3 个按钮自适应换行, 文字不折行不挤压 */
.share-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.share-btns .btn { flex: 1 1 40%; min-width: 108px; text-align: center; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  white-space: nowrap; padding-left: 10px; padding-right: 10px;
  font-size: 15px; letter-spacing: 1px; text-indent: 1px; }
.share-btns .btn .btn-emoji { flex: 0 0 auto; }
/* v12.60.1 分享弹窗: 主按钮(转发/保存图片) + 关闭 同一行等宽; 关闭统一为描边纸感次按钮 */
.share-btns .btn:not(.btn-orange):not(.btn-primary):not(.btn-green) { background: rgba(255,251,242,.7); border: 1.2px solid rgba(90,62,43,.38); color: #5a3e2b; box-shadow: none; }

/* ================= 仪式感加载(洗牌虾/抛铜钱虾) ================= */
.rite-loading { text-align: center; padding: 16px 12px 12px; color: var(--grape-lo); font-weight: 700; }
.rite-loading img { display: block; width: 118px; height: auto; margin: 0 auto 6px; animation: ritewig .55s ease-in-out infinite; }
@keyframes ritewig { 0%,100%{transform:rotate(-6deg) translateY(0)} 50%{transform:rotate(6deg) translateY(-5px)} }
.rite-loading .dots::after { content: ''; animation: dots 1.2s steps(1) infinite; }

/* 摇签时签筒换成虾抱签筒表情, 稍大一点 */
.qian-tube.tube-live { width: 170px; }

/* AI 解读完毕点赞虾脚注 */
.ai-done { display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 10px; font-size: 12.5px; font-weight: 700; color: var(--grape-lo); }
.ai-done img { width: 40px; height: auto;
  animation: bob 1.6s ease-in-out infinite; }

/* ---------- 管理后台 ---------- */
.adm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.adm-stat { background: #fdf6e3; border: 1.2px solid rgba(90,62,43,.38); border-radius: 14px; padding: 8px 4px; text-align: center; }
.adm-num { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--coral); line-height: 1.1; }
.adm-label { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.adm-label small { color: var(--ink-faint); font-size: 9px; }
.adm-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.adm-bar-name { flex: 0 0 88px; font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.adm-bar-track { flex: 1; height: 14px; background: #f3ecd9; border: 1.2px solid rgba(90,62,43,.38); border-radius: 8px; overflow: hidden; }
.adm-bar-fill { height: 100%; background: linear-gradient(90deg, var(--sunny), var(--coral)); border-radius: 5px; }
.adm-bar-n { flex: 0 0 34px; text-align: right; font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.adm-trend { display: flex; align-items: flex-end; gap: 3px; overflow-x: auto; padding: 4px 0; }
.adm-day { flex: 1; min-width: 26px; text-align: center; }
.adm-day-col { background: linear-gradient(180deg, var(--grape), #8a76c9); border: 1.2px solid rgba(90,62,43,.38); border-radius: 6px 6px 0 0; margin: 0 auto; width: 70%; }
.adm-day-lbl { font-size: 9px; color: var(--ink-faint); margin-top: 3px; white-space: nowrap; }
.adm-day-n { font-size: 10px; font-weight: 700; color: var(--ink-soft); }
.adm-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
/* v7.5: 窄屏防挤——表格单元不换行+容器横滚, 长文本截断 */
.adm-table td, .adm-table th { white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.panel:has(> .adm-table) { overflow-x: auto; }
.adm-table td { padding: 6px 2px; border-bottom: 1.5px dashed #e5dcc3; }
.adm-table tr:last-child td { border-bottom: none; }
.adm-user { background: #fdf6e3; border: 1.2px solid rgba(90,62,43,.38); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; }
.adm-user-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.adm-user-email { font-size: 12px; color: var(--ink-faint); word-break: break-all; }
.adm-user-meta { font-size: 12px; color: var(--ink-soft); margin-top: 4px; line-height: 1.6; }

/* ---------- v7.4: 公告横幅 / 词云 / 漏斗 ---------- */
/* v7.5: 公告顶部飘过条 — fixed 不占版面不遮 logo, 文字循环滚动 */
.announce-marquee { position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: rgba(61,58,80,.92); color: #ffe9b8; font-size: 13px; box-shadow: 0 2px 8px rgba(61,58,80,.35); animation: annDrop .4s ease; }
@keyframes annDrop { from { transform: translateY(-100%); } to { transform: none; } }
.announce-icon { flex: 0 0 auto; font-size: 15px; }
.announce-track { flex: 1; overflow: hidden; white-space: nowrap; }
.announce-run { display: inline-block; padding-left: 100%; animation: annRun linear infinite; }
@keyframes annRun { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.announce-link { color: #f0c86a; text-decoration: underline; cursor: pointer; font-weight: 700; }
.announce-x { flex: 0 0 auto; background: none; border: none; font-size: 14px; color: rgba(255,233,184,.7); cursor: pointer; padding: 2px 6px; }
body:has(.announce-marquee) #app { padding-top: 48px; }

/* v7.5: 运势日历 */
.cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; color: var(--ink-faint); margin-bottom: 4px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell { aspect-ratio: 1; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; color: var(--ink-soft); background: #faf5e9; }
.cal-empty { background: none; }
.cal-lit { background: #fff3d6; border: 1.2px solid rgba(90,62,43,.38); cursor: pointer; font-weight: 700; color: var(--ink); }
.cal-lit:active { transform: translateY(1px); }
.cal-today { outline: 2.5px dashed var(--coral); outline-offset: -2.5px; }
.cal-num { line-height: 1.1; }
.cal-marks { font-size: 10px; line-height: 1; min-height: 12px; }
.cal-marks b { color: #7a5fb8; }

/* v7.5: 功能互推卡 */
.cross-rec { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; background: #eef7ee; border: 1.2px solid rgba(90,62,43,.38); border-radius: 14px; cursor: pointer; transition: transform .12s; }
.cross-rec:active { transform: translateY(2px); }
.cross-rec-icon { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.cross-rec-icon-emoji { font-size: 30px; flex: 0 0 auto; }
.cross-rec-txt { flex: 1; line-height: 1.35; }
.cross-rec-txt small { display: block; font-size: 11px; color: var(--ink-faint); }
.cross-rec-txt b { font-size: 13.5px; color: var(--ink); }
.cross-rec-go { font-size: 18px; font-weight: 900; color: #5a9e5a; }
.adm-cloud { margin-top: 10px; padding: 10px; background: #fdf6e3; border: 2px dashed #d9cfb3; border-radius: 12px; line-height: 2; text-align: center; }
.adm-word { display: inline-block; margin: 0 4px; font-weight: 700; color: #7a5fb8; }
.adm-funnel { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.adm-funnel-step { background: linear-gradient(90deg, var(--sunny), var(--coral)); border: 1.2px solid rgba(90,62,43,.38); border-radius: 10px; padding: 7px 12px; font-size: 13px; box-sizing: border-box; }
.adm-funnel-step small { color: rgba(61,58,80,.65); }

/* ================= 去emoji图标类 (v7.7) ================= */
.err-toast .toast-ic { width: 20px; height: 20px; object-fit: contain; vertical-align: -5px; margin-right: 5px; }
.seg-item .seg-ic { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; margin-right: 2px; }
.streak-chip .chip-ic { width: 13px; height: 13px; object-fit: contain; vertical-align: -2px; margin-right: 1px; filter: brightness(0) invert(1); }
.cal-marks .cal-ic { width: 14px; height: 14px; object-fit: contain; vertical-align: -3px; }
.hint .cal-ic { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 1px; }
.tc-back { display: flex; align-items: center; justify-content: center; aspect-ratio: 7/12;
  font-size: 42px; font-weight: 900; color: var(--grape); line-height: 1; }

/* ---------- 深度解析(v9.0): 神秘紫金档 ---------- */
.deep-entry { margin-top: 12px; }
.deep-btn { background: linear-gradient(135deg, #5d4a9c, #8f7cc9); color: #fff; position: relative; overflow: hidden; }
.deep-btn::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); animation: deep-shine 3.2s ease-in-out infinite; }
@keyframes deep-shine { 0%, 60% { left: -75%; } 100% { left: 125%; } }
.deep-btn:active { transform: translateY(3px); }
/* v9.4.1: 价格角标独立一行居中, 不再和标题挤同一行导致随机断行 */
.deep-price { display: block; width: fit-content; margin: 6px auto 0;
  font-size: 12px; font-weight: 800; background: rgba(255,255,255,.22);
  border-radius: 10px; padding: 2px 10px; letter-spacing: .5px; text-indent: 0; }
.deep-price:empty { display: none; }
.deep-note { text-align: center; font-size: 11.5px; color: #a08cc9; margin-top: 7px; letter-spacing: .3px; }
.deep-loading { text-align: center; padding: 20px 12px 16px; color: var(--grape-lo); font-weight: 700;
  background: linear-gradient(180deg, #f3effc, #ece5fa); border-radius: 16px; border: 2.5px solid #d8ccf0; }
.deep-loading img { display: block; width: 108px; height: auto; margin: 0 auto 8px; animation: deep-float 2.6s ease-in-out infinite; }
@keyframes deep-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.deep-phase { min-height: 22px; }
.deep-bar { height: 8px; background: #ddd2f2; border-radius: 6px; margin: 10px auto 2px; max-width: 260px; overflow: hidden; }
.deep-bar i { display: block; height: 100%; width: 12%; border-radius: 6px;
  background: linear-gradient(90deg, #8f7cc9, var(--sunny)); transition: width 1.2s ease; }
.deep-result { margin-top: 12px; background: linear-gradient(180deg, #f6f2ff, #efe9fb);
  border: 2.5px solid #c9b8ec; border-radius: 16px; padding: 14px 14px 12px; }
.deep-head { display: flex; align-items: center; gap: 8px; font-weight: 900; color: var(--grape-lo);
  margin-bottom: 8px; font-family: var(--font-display); font-weight: 900; letter-spacing: 1px; }
.deep-head img { width: 26px; height: auto; }
.deep-badge { font-size: 10.5px; font-weight: 800; color: #fff; letter-spacing: 1px;
  background: linear-gradient(135deg, #5d4a9c, #8f7cc9); border-radius: 8px; padding: 2px 8px; margin-left: auto; }

/* ===== v10.5.3: 微信/QQ 内置浏览器引导蒙层 ===== */
.wx-guide-mask { position: fixed; inset: 0; z-index: 3000;
  background: rgba(30,27,45,.9); backdrop-filter: blur(3px);
  animation: wx-fade-in .25s ease; }
@keyframes wx-fade-in { from { opacity: 0; } to { opacity: 1; } }
.wx-guide-arrow { position: absolute; top: 10px; right: 22px;
  font-size: 52px; color: var(--sunny); line-height: 1;
  transform: rotate(12deg);
  text-shadow: 0 2px 8px rgba(0,0,0,.4);
  animation: wx-arrow-bounce 1.2s ease-in-out infinite; }
@keyframes wx-arrow-bounce { 0%, 100% { transform: rotate(12deg) translateY(0); }
  50% { transform: rotate(12deg) translateY(-9px); } }
.wx-guide-body { position: absolute; top: 108px; left: 50%;
  transform: translateX(-50%); width: min(320px, 84vw);
  background: linear-gradient(180deg, #fffdf6, #fdf5e6);
  border: 1.2px solid rgba(90,62,43,.38); border-radius: 20px;
  padding: 22px 20px 20px; text-align: center;
  animation: wx-pop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes wx-pop { from { transform: translateX(-50%) scale(.85); opacity: 0; }
  to { transform: translateX(-50%) scale(1); opacity: 1; } }
.wx-guide-body img { width: 64px; height: auto; margin: 0 auto 8px; display: block; }
.wx-guide-body h4 { font-family: var(--font-display); font-weight: 900; font-size: 19px;
  color: var(--ink, #3d3a50); margin: 0 0 8px; letter-spacing: 1px; }
.wx-guide-body p { font-size: 14px; color: #6b6480; line-height: 1.75; margin: 0 0 14px; }
.wx-guide-body p b { color: var(--coral); }

/* ===== v10.6 #9: 应期回访 ===== */
.fu-card { background: #fdfaf2; border: 1.2px solid rgba(90,62,43,.38); border-radius: var(--r-md);
  padding: 12px 14px; font-size: 13.5px; line-height: 1.7; color: var(--ink);
  box-shadow: var(--shadow-sm); }
.fu-card .hint { font-size: 12px; color: var(--ink-faint); font-weight: 700; margin-top: 3px; }
.fu-card.fu-due { background: #fff3df; border-color: var(--coral);
  box-shadow: 3px 3px 0 var(--coral); animation: fu-due-pulse 2s ease-in-out infinite; }
@keyframes fu-due-pulse { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } }
.fu-card.fu-done { display: flex; align-items: center; gap: 10px;
  background: #f5f3fa; box-shadow: none; border-color: var(--ink-faint); }
.fu-card.fu-done img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.fu-answer-btns { display: flex; gap: 8px; }
.fu-answer-btns .btn { flex: 1; padding-left: 4px; padding-right: 4px; }
/* 进站到期横幅 */
.fu-banner { position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
  width: min(452px, calc(100vw - 20px)); z-index: 2500;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #fffdf6, #fff3df);
  border: 1.2px solid rgba(90,62,43,.38); border-radius: 18px;
  padding: 10px 34px 10px 12px;
  animation: fu-banner-in .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes fu-banner-in { from { transform: translateX(-50%) translateY(-80px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; } }
.fu-banner > img { width: 44px; height: 44px; object-fit: contain; flex: none; }
.fu-banner-txt { flex: 1; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); font-weight: 700; }
.fu-banner-txt b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 15px;
  color: var(--coral); letter-spacing: 1px; }
.fu-banner .btn { flex: none; }
.fu-banner-x { position: absolute; top: 4px; right: 8px; background: none; border: none;
  font-size: 20px; line-height: 1; color: var(--ink-faint); cursor: pointer; padding: 4px; }
/* 我的页 · 灵验率面板 */
.fu-rate { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fu-rate b { font-family: var(--font-display); font-weight: 900; font-size: 44px; line-height: 1;
  color: var(--coral); }
.fu-rate b small { font-size: 20px; }
.fu-rate span { font-size: 13px; font-weight: 900; color: var(--ink); line-height: 1.5; }
.fu-rate span small { font-weight: 700; color: var(--ink-faint); }
.fu-group-title { font-size: 12.5px; font-weight: 900; color: var(--ink-soft);
  margin: 12px 0 6px; letter-spacing: .5px; }
.fu-item { display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: #fdfaf2; border: 1.2px solid rgba(90,62,43,.38); border-radius: 13px;
  padding: 8px 10px; margin-bottom: 7px; transition: transform .12s; }
.fu-item:active { transform: scale(.97); }
.fu-item-type { flex: none; font-size: 10.5px; font-weight: 900; color: #fff;
  background: var(--grape); border: 1.2px solid rgba(90,62,43,.38); border-radius: 8px;
  padding: 1.5px 7px; letter-spacing: .5px; }
.fu-item-q { flex: 1; font-size: 13px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-item-date { flex: none; font-size: 12px; font-weight: 800; color: var(--ink-faint); }
.fu-item-go { flex: none; font-size: 12px; font-weight: 900; color: var(--coral); }

/* ===== v10.6 #10: 虾币小卖部 ===== */
.shop-card { position: relative; overflow: visible; }
.shop-tag { position: absolute; top: -12px; right: 14px;
  font-family: var(--font-display); font-weight: 900; font-size: 12.5px; letter-spacing: 1px;
  color: #fff; background: var(--coral); border: 1.2px solid rgba(90,62,43,.38);
  border-radius: 999px; padding: 3px 12px; transform: rotate(3deg); }
.shop-report { white-space: normal; }
.shop-report .md-h { margin-top: 18px; }
/* v10.23: 结果页 ¥9.9 单品 upsell 卡 */
.upsell-card { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; background: #fff6e3; border: 1.2px solid rgba(90,62,43,.38); border-radius: 14px; }
.upsell-icon { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; }
.upsell-txt { flex: 1; min-width: 0; line-height: 1.35; }
.upsell-txt small { display: block; font-size: 11px; color: var(--ink-faint); }
.upsell-txt b { display: block; font-size: 13.5px; color: var(--ink); }
.upsell-txt span { display: block; font-size: 11.5px; color: var(--ink-soft); }
.upsell-card .btn { flex: 0 0 auto; white-space: nowrap; }
/* v10.23: 虾币超市纯兑换区 + 我的报告列表 */
.redeem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.redeem-item { position: relative; text-align: center; padding: 12px 8px; background: #fff; border: 1.2px solid rgba(90,62,43,.38); border-radius: 14px; }
.redeem-item img { width: 44px; height: 44px; object-fit: contain; display: block; margin: 0 auto 4px; }
.redeem-item b { display: block; font-size: 13.5px; }
.redeem-item small { display: block; font-size: 11px; color: var(--ink-faint); margin-bottom: 8px; line-height: 1.55; } /* v10.30: 价格 / 有效期分两行, 不再折行挤压 */
.redeem-item .btn { min-width: 84px; }
.redeem-soon { opacity: .55; }
.redeem-soon-tag { position: absolute; top: -9px; right: 8px; font-size: 10.5px; color: #fff; background: var(--ink); border-radius: 999px; padding: 1px 8px; }
.my-report { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 2px dashed #efe9db; cursor: pointer; }
.my-report:last-child { border-bottom: 0; }
.my-report img { width: 34px; height: 34px; object-fit: contain; }
.my-report b { display: block; font-size: 13.5px; }
.my-report small { color: var(--ink-faint); font-size: 11.5px; }

/* ===== v10.7: 管理后台 Tab 分页 ===== */
/* v12.49 口径切换条(展示 / 真实 / 只看演示) */
.adm-scope { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; color: var(--ink-soft); }
.adm-scope-lbl { font-weight: 700; }
.adm-scope select { margin-left: auto; font: inherit; font-size: 12.5px; padding: 4px 8px; border: 1.2px solid rgba(90,62,43,.38); border-radius: 10px; background: #fff; color: var(--ink); }
.adm-tabs { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto;
  position: sticky; top: 0; z-index: 100; background: var(--cream); padding: 6px 0; }
.adm-tab { flex: 1; white-space: nowrap; font-family: var(--font-display); font-weight: 900;
  font-size: 13.5px; letter-spacing: .5px; color: var(--ink-soft);
  background: #fff; border: 1.2px solid rgba(90,62,43,.38); border-radius: 999px;
  padding: 7px 10px; cursor: pointer;
  transition: transform .12s; }
.adm-tab:active { transform: scale(.95); }
.adm-tab.on { background: var(--grape); color: #fff; }

/* ===== v10.8: 支付宝充值套餐 ===== */
.pay-pkgs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pay-pkg { position: relative; overflow: visible; cursor: pointer;
  background: #fffdf6; border: 1.2px solid rgba(90,62,43,.38); border-radius: var(--r-md);
  padding: 14px 8px 10px; text-align: center; transition: transform .12s; }
.pay-pkg:active { transform: scale(.95); }
.pay-pkg b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 26px;
  color: var(--coral); line-height: 1.1; }
.pay-pkg small { font-size: 11px; color: var(--ink-faint); font-weight: 800; }
.pay-pkg-yuan { display: block; margin-top: 6px; font-size: 14px; font-weight: 900;
  color: var(--ink); background: var(--sunny); border: 1.2px solid rgba(90,62,43,.38);
  border-radius: 999px; padding: 2px 0; }
.pay-pkg-tag { position: absolute; top: -10px; right: -4px;
  font-size: 10px; font-weight: 900; color: #fff; background: var(--coral);
  border: 1.2px solid rgba(90,62,43,.38); border-radius: 999px; padding: 2px 8px;
  transform: rotate(4deg); }

/* ===== v10.9 毒舌辣度三档选择器 (v10.11: 单排不换行 + 辣椒图标) ===== */
/* v10.9 辣度三档 → v12.11 从「我的」页搬到解读/深度按钮上方(.spice-bar), 选一次记住 */
.spice-bar{display:flex;align-items:center;justify-content:center;gap:5px;margin:0 0 8px;flex-wrap:nowrap;white-space:nowrap}
.spice-label{display:inline-flex;align-items:center;gap:2px;font-size:11.5px;color:var(--ink-faint);margin-right:2px;flex-shrink:0;font-weight:700}
.spice-opt{border:1.5px solid var(--line,#e8dfc8);background:#fffdf6;border-radius:999px;
  padding:3px 9px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:1px;line-height:1.3;color:var(--ink-soft);font:inherit;font-size:12px}
.spice-opt .chili-ic,.spice-label .chili-ic,.spice-tag .chili-ic{width:13px;height:13px;object-fit:contain;vertical-align:-2px}
.spice-opt.on .chili-ic{filter:brightness(1.15) drop-shadow(0 0 1px rgba(255,255,255,.6))}
.spice-opt.on{background:var(--coral,var(--coral));border-color:var(--coral,var(--coral));color:#fff;font-weight:700}
.spice-opt:not(.on):hover{border-color:var(--coral,var(--coral));color:var(--coral,var(--coral))}
.deep-entry .spice-bar{margin-top:2px}
.spice-tag{display:inline-flex;align-items:center;gap:1px;font-size:11px;color:var(--ink-faint);background:#f8f3e6;border:1.5px solid #e4dcc8;border-radius:999px;padding:1px 8px;margin-left:6px;white-space:nowrap}
.ai-done-lite{margin-top:6px;padding:0;background:none;border:0;justify-content:flex-end;animation:none}
.ai-done-lite .spice-tag{margin-left:0}

/* ===== v10.10: 解析结尾分享钩子(情绪高点触发) ===== */
.share-nudge { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px;
  background: #fff4e0; border: 1.2px solid rgba(90,62,43,.38); border-radius: 14px; cursor: pointer; transition: transform .12s; }
.share-nudge:active { transform: scale(.97); }
.share-nudge img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.share-nudge-txt { flex: 1; min-width: 0; }
.share-nudge-txt b { display: block; font-size: 13.5px; color: var(--ink); }
.share-nudge-txt small { font-size: 11.5px; color: var(--ink-faint); font-weight: 700; }
.share-nudge-go { font-size: 18px; font-weight: 900; color: var(--coral); flex-shrink: 0; }

/* ===== v10.10: 结论前置判词胶囊 ===== */
.verdict-pill { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px;
  padding: 8px 14px; background: var(--sunny); border: 1.2px solid rgba(90,62,43,.38);
  border-radius: 999px;
  font-weight: 900; font-size: 14.5px; color: var(--ink); width: fit-content; max-width: 100%; }
.verdict-pill img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.verdict-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== v10.13 P0-1: 首页新客CTA条 ===== */
.first-cta-card {
  position: relative; display: grid; grid-template-columns: 44px 1fr; grid-template-areas: "img txt" "btn btn"; align-items: center; column-gap: 10px; row-gap: 10px;
  margin: 12px 14px 14px; padding: 12px 34px 12px 12px;
  background: linear-gradient(105deg, #fff3d6, #ffe3d1);
  border: 1.2px solid rgba(90,62,43,.38); border-radius: 16px;
}
.first-cta-card > img { grid-area: img; width: 44px; }
.first-cta-card .fc-txt { grid-area: txt; font-size: 13px; line-height: 1.5; color: var(--ink); min-width: 0; }
.first-cta-card .fc-btns { grid-area: btn; display: flex; gap: 10px; }
.first-cta-card .fc-btns .btn { flex: 1; padding: 8px 10px; font-size: 14px; letter-spacing: 1px; text-indent: 1px; white-space: nowrap; }   /* v12.37 两键并排一行(原竖叠 6px 间距 → 3D 投影压到下一颗) */
.first-cta-card .fc-close {
  position: absolute; top: 4px; right: 8px; border: 0; background: none;
  font-size: 18px; font-weight: 900; color: var(--ink-faint); cursor: pointer; padding: 2px 4px; line-height: 1;
}

/* ===== v10.13 P1: 底部导航"记录"到期回访红点 ===== */
.nav a { position: relative; }
.nav a.nav-dot-on::after {
  content: ''; position: absolute; top: 4px; right: 22%;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--coral); border: 1.5px solid #fff;
}

/* ===== v10.17 站点页脚: ICP 备案号 + 娱乐声明 =====
   放在导航栏之上, 留出 nav 高度的下边距避免被遮挡 */
.site-footer {
  margin: 18px 6px 84px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.9;
  color: var(--ink-faint);
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--ink-faint); text-decoration: underline; }

/* ===== v10.25 头像框(超市货架 / 我的页头像 / 通用合成) ===== */
.avatar-wrap { position: relative; display: inline-block; flex: none; }
.avatar-wrap .avatar-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; object-fit: cover; background: #fff3d6; }
.avatar-wrap .avatar-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.frame-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.frame-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px;
  background: #fffdf6; border: 1.2px solid rgba(90,62,43,.38); border-radius: 16px; }
.frame-card b { font-size: 13px; }
.frame-card .btn { width: 100%; padding: 6px 4px; font-size: 12px; }
.frame-card.wearing { background: #f0fbea; border-color: #5a9e5a; }
.frame-rarity { position: absolute; left: 6px; top: 6px; font-size: 10px; font-weight: 900; padding: 1px 6px; border-radius: 8px; background: #e8e2f5; color: #6b5a9e; }
.frame-card.r-rare .frame-rarity { background: #dbeeff; color: var(--grape); }
.frame-card.r-epic .frame-rarity { background: linear-gradient(90deg,#ffe29a,var(--sunny)); color: #7a4a00; }
.frame-card.r-gift .frame-rarity { background: #ffe0ec; color: var(--pink-lo); }   /* v12.3 活动赠送框(不售卖) */
.frame-btn-off { background: #f0ead9; color: var(--ink-soft); }
.me-avatar { cursor: pointer; flex: none; }
/* v12.11 我的页头部(所有者 2026-09-15): 结构不变(左头像 | 中名字+虾号 | 右竖排双档案按钮), 只把头像放大到 92px,
   名字/虾号随之右移; 头像允许略压到下方身份卡边缘(所有者明确可接受), 右下角「换」角标提示可点 */
.me-head { display: flex; align-items: center; gap: 8px; }
.me-avatar-xl { position: relative; display: inline-flex; margin: -6px 0 -10px -4px; z-index: 1; }
.me-avatar-xl .avatar-wrap { filter: drop-shadow(2px 3px 0 rgba(61, 58, 80, .28)); }
.me-avatar-xl:active .avatar-wrap { transform: scale(.96); }
.me-avatar-edit {
  position: absolute; right: 2px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: #fff; font: 900 11px/22px var(--font-display); font-style: normal; text-align: center;
  border: 2px solid #fffdf8; box-shadow: 0 1px 4px rgba(61, 58, 80, .35); pointer-events: none;
}
.me-head-r { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.me-head-r .me-name-line { margin: 0; font-size: 19px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-head-r .me-uid { align-self: flex-start; white-space: nowrap; font-size: 11px; letter-spacing: 0; padding: 1px 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* v11.14 名字旁段位徽章(历史最高, 形象不掉; 复用 tier-fx 分档动效) */
.me-tier-badge { display: inline-flex; vertical-align: -4px; margin-left: 5px; width: 22px; height: 22px; }
.me-tier-badge img { width: 100%; height: 100%; object-fit: contain; }

/* v11.15 首页赛季开赛横幅: 深紫金主题(与分享卡/榜单一脉), 可关闭 */
.season-banner {
  position: relative; display: flex; align-items: center; gap: 10px;
  margin: 12px 0 4px; padding: 10px 14px; border-radius: 16px; cursor: pointer;
  background: linear-gradient(115deg, #3d3a50 0%, #4a4468 55%, #5a4a72 100%);
  border: 1.5px solid rgba(217, 176, 106, .65);
  box-shadow: 0 4px 14px rgba(61, 58, 80, .28);
  overflow: hidden; animation: sb-in .45s ease both;
}
@keyframes sb-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.season-banner::after { /* 扫光 */
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 224, 150, .18), transparent);
  animation: sb-sweep 3.2s ease-in-out infinite;
}
@keyframes sb-sweep { 0%, 55% { left: -60%; } 85%, 100% { left: 120%; } }
.sb-tier { flex: none; width: 42px; height: 42px; filter: drop-shadow(0 2px 6px rgba(255, 224, 150, .4)); }
.sb-tier img { width: 100%; height: 100%; object-fit: contain; }
.sb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-txt b { color: #f5edd8; font-size: 15px; line-height: 1.25; }
.sb-txt small { color: #b8b0d4; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-go {
  flex: none; padding: 5px 13px; border-radius: 999px; font-weight: 900; font-size: 12px;
  color: #3d3a50; background: linear-gradient(180deg, var(--sunny), #d9b06a);
  box-shadow: 0 2px 6px rgba(217, 176, 106, .45); margin-right: 14px;
}
.sb-close {
  position: absolute; top: 2px; right: 4px; border: 0; background: none; cursor: pointer;
  color: rgba(255, 255, 255, .55); font-size: 15px; line-height: 1; padding: 4px 6px;
}
.sb-close:hover { color: #fff; }
/* v11.6 虾号胶囊(我的页邮箱行, 点击复制) */
.me-uid { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: var(--panel-soft, rgba(0,0,0,.05)); font-size: 12px; font-weight: 600; letter-spacing: .5px; cursor: pointer; user-select: all; color: var(--ink-soft); }
.me-uid:active { opacity: .6; }
/* v11.12 第四版布局(所有者拍板): 头像栏右侧竖排「我的档案/TA的档案」双按钮, 虾币/解读/学校三胶囊整行横排在下 */
.me-side-btns { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 10px; max-width: 46%; } /* v12.11 双按钮间距 6→10, 不再堆叠 */
.me-side-btns .btn { padding: 5px 9px; font-size: 12px; white-space: nowrap; }
.me-side-btns .p-ic { width: 15px; height: 15px; vertical-align: -2px; margin-right: 3px; }
.me-stat-row { display: flex; gap: 6px; margin: 10px 0; }
.me-stat-row .me-sstat { flex: 1; min-width: 0; justify-content: center; }
.me-sstat { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-soft);
  background: #f8f3e6; border: 1.5px solid #e4dcc8; border-radius: 999px; padding: 3px 9px;
  cursor: pointer; white-space: nowrap; }
.me-sstat b { color: var(--ink); font-size: 12px; }
.me-sstat img { width: 14px; height: 14px; flex: none; }
.me-sstat small { font-size: 10px; color: var(--mint-lo); }
.me-sstat:active { background: #efe8d5; }
.me-school-b { overflow: hidden; text-overflow: ellipsis; max-width: 9em; }
.me-btn-dot { font-weight: 400; font-size: 10px; margin-left: 3px; opacity: .85; }
/* 灰色次要按钮(陈列柜/摘下称号等) */
.btn-gray { background: #d9d4c8; color: var(--ink); }
.btn-gray:active { }
.btn-sm.btn-gray { }

/* ===== v10.26 超市顶部标签栏 + 塔罗牌背货架 ===== */
.shop-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; /* v10.30: 5 个标签(加头像) */ margin: 0 0 12px; position: sticky; top: 0; z-index: 5;
  padding: 6px; background: #fffdf6; border: 1.2px solid rgba(90,62,43,.38); border-radius: 16px; }
.shop-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 1px 6px; border: 2px solid transparent; border-radius: 12px;
  background: transparent; font: inherit; font-size: 11.5px; font-weight: 800; color: var(--ink-soft); cursor: pointer; }
.shop-tab img { width: 26px; height: 26px; object-fit: contain; }
.shop-tab.on { background: #fff3d6; border-color: rgba(90,62,43,.38); color: var(--ink); }
.back-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.back-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 6px 8px;
  background: #fffdf6; border: 1.2px solid rgba(90,62,43,.38); border-radius: 16px; }
.back-card b { font-size: 12.5px; text-align: center; line-height: 1.25; }
.back-card .btn { width: 100%; padding: 6px 4px; font-size: 12px; }
.back-card.wearing { background: #f0fbea; border-color: #5a9e5a; }
.back-card.r-rare .frame-rarity { background: #dbeeff; color: var(--grape); }
.back-card.r-epic .frame-rarity { background: linear-gradient(90deg,#ffe29a,var(--sunny)); color: #7a4a00; }
.back-thumb { width: 70px; aspect-ratio: 7 / 12; object-fit: cover; border-radius: 6px; border: 1.2px solid rgba(90,62,43,.38); }

/* v10.28 追问 chip 禁用态 */
.fu-chip:disabled { opacity: .45; cursor: default; }

/* ================================================================
   v11.0 高校欧气榜 (#/rank)
   ================================================================ */
.rk-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.rk-tab { flex: 1; padding: 8px 0; border: 1.2px solid rgba(90,62,43,.38); border-radius: 10px; background: #f6f1e4; font-weight: 800; font-size: 13px; cursor: pointer; }
.rk-tab.on { background: var(--sunny); }
.rk-period { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.rk-period button { padding: 4px 14px; border: 1.2px solid rgba(90,62,43,.38); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.rk-period button.on { background: var(--purple, #8a76c9); color: #fff; }
.rk-row { display: flex; align-items: center; gap: 9px; padding: 8px 4px; border-bottom: 1px dashed var(--line, #e8e0cf); }
.rk-row:last-child { border-bottom: none; }
.rk-no { flex: none; width: 26px; text-align: center; font-weight: 900; font-size: 15px; color: var(--ink-soft); }
.rk-no.top1 { color: var(--sunny-lo); font-size: 18px; }
.rk-no.top2 { color: #9aa4b2; font-size: 17px; }
.rk-no.top3 { color: #c0855c; font-size: 16px; }
.rk-info { flex: 1; min-width: 0; }
.rk-info b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-info small { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 1px; }
.rk-val { flex: none; text-align: right; font-weight: 900; color: var(--purple, #8a76c9); }
.rk-val small { display: block; font-weight: 400; font-size: 10px; color: var(--ink-faint); }
.rk-badge { flex: none; width: 34px; height: 34px; border-radius: 9px; border: 1.2px solid rgba(90,62,43,.38); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; color: #fff; }
.rk-dfc { display: inline-block; padding: 0 5px; border-radius: 6px; background: #ffe29a; color: #7a4a00; font-size: 10px; font-weight: 800; margin-left: 4px; vertical-align: 1px; }
.rk-mine { border: 1.2px solid rgba(90,62,43,.38); border-radius: 12px; background: linear-gradient(135deg, #fff8e6, #ffeef2); padding: 10px 12px; margin-bottom: 12px; }
.rk-mine-row { display: flex; align-items: center; gap: 10px; }
.rk-rankicon { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.2px solid rgba(90,62,43,.38); display: flex; align-items: center; justify-content: center; font-size: 22px; background: #fff; }
.rk-prog { height: 8px; border: 1.2px solid rgba(90,62,43,.38); border-radius: 999px; background: #fff; overflow: hidden; margin-top: 6px; }
.rk-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--sunny), var(--coral)); }
.rk-empty { text-align: center; color: var(--ink-faint); padding: 22px 0; font-size: 13px; }
/* 学校选择器 */
.sch-input { position: relative; }
.sch-drop { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; border: 1.2px solid rgba(90,62,43,.38); border-radius: 10px; max-height: 240px; overflow-y: auto; }
/* v11.8 学校弹窗: 顶部对齐(键盘弹出不顶飞) + 结果列表内嵌文档流(不被输入法/视口裁切) */
.share-mask.mask-top { align-items: flex-start; padding-top: max(24px, env(safe-area-inset-top)); }
.sch-drop-inline { position: static; margin-top: 8px; max-height: min(300px, 46vh); }
.sch-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; border-bottom: 1px dashed var(--line, #e8e0cf); }
.sch-item:hover { background: #fff6dd; }
.sch-item small { color: var(--ink-faint); margin-left: auto; flex: none; }
.sch-mini { flex: none; width: 24px; height: 24px; border-radius: 6px; border: 1.2px solid rgba(90,62,43,.38); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff; }

/* ═══════ v11.1 段位素材接入 + 分档动效(徽章/立绘/称号胶囊/成就框) ═══════
   档位策略(拍板): 1黑铁/2青铜 无动效 · 3白银 微高光 · 4黄金 扫光 ·
   5翡翠 扫光+呼吸光晕 · 6钻石 光晕+星光粒子 · 7大师 流光+星光+浮动 */

/* 徽章容器: 素材图替换程序化色块(圆形徽章无需底色边框) */
.tier-fx { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.tier-fx img { width: 100%; height: 100%; object-fit: contain; display: block; }
.rk-rankicon.tier-fx { width: 52px; height: 52px; border: none; background: none; border-radius: 0; font-size: 0; }
.rk-badge.tier-fx { width: 36px; height: 36px; border: none; background: none; border-radius: 0; font-size: 0; }

/* 3白银: 微高光(缓慢明暗呼吸) */
.tier-fx-3 img { animation: tierGlint 4s ease-in-out infinite; }
@keyframes tierGlint { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.12)} }

/* 4黄金: 斜向扫光 */
.tier-fx-4::after, .tier-fx-5::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.65) 50%, transparent 62%);
  background-size: 260% 100%; animation: tierShine 3.2s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(circle, #000 68%, transparent 70%); mask-image: radial-gradient(circle, #000 68%, transparent 70%);
}
@keyframes tierShine { 0%{background-position:130% 0} 55%,100%{background-position:-130% 0} }

/* 5翡翠: 扫光 + 呼吸光晕 */
.tier-fx-5 img { animation: tierAura5 3s ease-in-out infinite; }
@keyframes tierAura5 { 0%,100%{filter:drop-shadow(0 0 3px rgba(46,204,113,.35))} 50%{filter:drop-shadow(0 0 8px rgba(46,204,113,.75))} }

/* 6钻石: 冷光晕 + 星光粒子(两颗交替闪) */
.tier-fx-6 img { animation: tierAura6 2.6s ease-in-out infinite; }
@keyframes tierAura6 { 0%,100%{filter:drop-shadow(0 0 4px rgba(120,200,255,.45))} 50%{filter:drop-shadow(0 0 10px rgba(160,220,255,.85))} }
.tier-fx-6::before, .tier-fx-7::before {
  content: ''; position: absolute; top: 8%; right: 4%; width: 22%; height: 22%; pointer-events: none; z-index: 2;
  background:
    radial-gradient(circle at 50% 50%, #fff 18%, rgba(255,255,255,0) 24%),
    linear-gradient(#fff,#fff) 50% 50%/58% 8% no-repeat,
    linear-gradient(#fff,#fff) 50% 50%/8% 58% no-repeat;
  filter: drop-shadow(0 0 2px rgba(200,235,255,.9));
  animation: tierSpark 1.8s ease-in-out infinite;
}
.tier-fx-6::after {
  content: ''; position: absolute; bottom: 12%; left: 2%; width: 15%; height: 15%; pointer-events: none; z-index: 2;
  background:
    radial-gradient(circle at 50% 50%, #fff 18%, rgba(255,255,255,0) 24%),
    linear-gradient(#fff,#fff) 50% 50%/58% 8% no-repeat,
    linear-gradient(#fff,#fff) 50% 50%/8% 58% no-repeat;
  animation: tierSpark 1.8s ease-in-out infinite .9s;
}
@keyframes tierSpark { 0%,100%{opacity:0;transform:scale(.4) rotate(0)} 50%{opacity:1;transform:scale(1) rotate(45deg)} }

/* 7大师: 彩虹流光晕 + 星光 + 轻浮动(顶级排面) */
.tier-fx-7 img { animation: tierAura7 3.4s ease-in-out infinite, tierFloat 3.4s ease-in-out infinite; }
@keyframes tierAura7 {
  0%,100%{filter:drop-shadow(0 0 5px rgba(255,150,220,.55))}
  33%{filter:drop-shadow(0 0 8px rgba(150,200,255,.7))}
  66%{filter:drop-shadow(0 0 8px rgba(255,225,150,.7))} }
@keyframes tierFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }
.tier-fx-7::after {
  content: ''; position: absolute; bottom: 6%; left: 6%; width: 17%; height: 17%; pointer-events: none; z-index: 2;
  background:
    radial-gradient(circle at 50% 50%, #fff 18%, rgba(255,255,255,0) 24%),
    linear-gradient(#fff,#fff) 50% 50%/58% 8% no-repeat,
    linear-gradient(#fff,#fff) 50% 50%/8% 58% no-repeat;
  filter: drop-shadow(0 0 2px rgba(255,220,255,.9));
  animation: tierSpark 1.6s ease-in-out infinite .5s;
}

/* hero 吉祥物换装(IP 立绘按历史最高段位); 复用 mbob 浮动, 高段位叠光效 */
.hero .mascot.mascot-tier { width: 148px; }
.hero .mascot.mascot-fx-5 { filter: drop-shadow(5px 6px 0 rgba(61,58,80,.9)) drop-shadow(0 0 10px rgba(46,204,113,.4)); }
.hero .mascot.mascot-fx-6 { filter: drop-shadow(5px 6px 0 rgba(61,58,80,.9)) drop-shadow(0 0 12px rgba(120,200,255,.5)); }
.hero .mascot.mascot-fx-7 { animation: mbob 3.2s ease-in-out infinite, mascotAura7 4s ease-in-out infinite; }
@keyframes mascotAura7 {
  0%,100%{filter:drop-shadow(5px 6px 0 rgba(61,58,80,.9)) drop-shadow(0 0 10px rgba(255,180,230,.55))}
  50%{filter:drop-shadow(5px 6px 0 rgba(61,58,80,.9)) drop-shadow(0 0 16px rgba(255,215,150,.65))} }

/* 成就称号胶囊(小场景 CSS 文字, 按持有者段位分档) */
.rk-title-pill { display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; line-height: 1.5; vertical-align: 1px; white-space: nowrap;
  border: 1.5px solid #b0a894; }
.rk-title-pill.tp-1, .rk-title-pill.tp-2 { border-color: #b08d64; color: #8a6a45; background: #f7efe2; }
.rk-title-pill.tp-3 { border-color: #9aa4b2; color: #5d6875; background: #f0f3f7; }
.rk-title-pill.tp-4 { border-color: var(--sunny-lo); color: #7f6418; background: #fff6d8; position: relative; overflow: hidden; }
.rk-title-pill.tp-4::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.7) 50%, transparent 60%);
  background-size: 240% 100%; animation: tierShine 3.6s ease-in-out infinite; }
.rk-title-pill.tp-5 { border-color: var(--mint); color: var(--mint-lo); background: #e3f8ec; box-shadow: 0 0 5px rgba(46,204,113,.35); }
.rk-title-pill.tp-6 { border-color: var(--sky); color: var(--grape); background: #eaf6ff; box-shadow: 0 0 6px rgba(120,200,255,.5); }
.rk-title-pill.tp-7 { border: 1.5px solid transparent; color: #7a3fa0; position: relative;
  background: linear-gradient(#fff6ff,#fff6ff) padding-box,
    linear-gradient(90deg,#ff9ecd,var(--sunny),#9ee8b5,#9ecdff,#d59eff,#ff9ecd) border-box;
  background-size: 100% 100%, 300% 100%; animation: tp7flow 3s linear infinite; }
@keyframes tp7flow { 0%{background-position:0 0, 0% 0} 100%{background-position:0 0, 300% 0} }

/* v11.7 荣誉陈列柜(称号图鉴 + 上榜足迹) */
.cab-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.cab-tile { position: relative; border: 1.2px solid rgba(90,62,43,.38); border-radius: 12px; background: #fffdf6;
  padding: 12px 10px 26px; transition: transform .12s; }
.cab-tile[data-tid] { cursor: pointer; }
.cab-tile[data-tid]:active { transform: translateY(2px); }
.cab-tile > b { display: block; font-size: 14px; margin-bottom: 2px; }
.cab-tile > small { display: block; font-size: 11px; color: var(--ink-soft); line-height: 1.4; }
.cab-tile.locked { background: #f3f2ee; border-color: #b8b4ac; box-shadow: none; opacity: .72; }
.cab-tile.locked > b { color: var(--ink-faint); }
.cab-tile.worn { background: linear-gradient(135deg, #fff8e6, #ffeef2);
  border-color: var(--sunny-lo); box-shadow: 2px 3px 0 rgba(216,165,32,.4), 0 0 8px rgba(255,215,106,.5); }
.cab-seasons { display: block; margin-top: 5px; font-size: 10px; color: #7f6418;
  background: #fff6d8; border: 1px solid #e8cf8a; border-radius: 6px; padding: 1px 5px; width: fit-content; }
.cab-worn-tag, .cab-tap, .cab-lock { position: absolute; right: 8px; bottom: 7px; font-size: 10px;
  font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.cab-worn-tag { color: #fff; background: var(--sunny-lo); border: 1.2px solid rgba(90,62,43,.38); }
.cab-tap { color: var(--grape); background: #eaf6ff; border: 1.5px solid var(--sky); }
.cab-lock { color: var(--ink-faint); background: #eceae4; border: 1.5px solid #c9c5bc; }
.cab-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cab-table th { text-align: left; font-size: 11px; color: var(--ink-faint); font-weight: 600;
  padding: 4px 6px; border-bottom: 1.2px solid rgba(90,62,43,.38); }
.cab-table td { padding: 7px 6px; border-bottom: 1px dashed #d9d5cb; }
.cab-table tbody tr:last-child td { border-bottom: none; }

/* 成就框(大场景横版卡, frame-1..6 素材做边框, 内容绝对定位居中) */
.ach-card { position: relative; width: 100%; aspect-ratio: 1024/645; }
.ach-card > img.ach-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; pointer-events: none; }
.ach-card > .ach-body { position: absolute; inset: 14% 12%; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; }
.ach-card.af-4 > img.ach-frame, .ach-card.af-5 > img.ach-frame { animation: tierGlint 4s ease-in-out infinite; }
.ach-card.af-6 > img.ach-frame { animation: tierAura6 2.8s ease-in-out infinite; }
.ach-card.af-7 > img.ach-frame { animation: tierAura7 3.6s ease-in-out infinite; }

/* v11.2 排行榜金皇冠 icon 星光闪烁: 两颗错时星苒 + 微呼吸光晕 */
.hb-ic.hb-ic-sparkle { position: relative; overflow: visible;
  animation: hbCrownBreath 2.6s ease-in-out infinite; }
.hb-ic.hb-ic-sparkle::before, .hb-ic.hb-ic-sparkle::after {
  content: ''; position: absolute; background: #fff; border-radius: 50%; pointer-events: none; z-index: 2;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 3px rgba(255,241,168,.95)); }
.hb-ic.hb-ic-sparkle::before { width: 11px; height: 11px; top: -2px; right: 1px;
  animation: hbSpark 1.9s ease-in-out infinite; }
.hb-ic.hb-ic-sparkle::after { width: 7px; height: 7px; bottom: 4px; left: -1px;
  animation: hbSpark 1.9s ease-in-out infinite .95s; }
@keyframes hbSpark { 0%,100%{opacity:0;transform:scale(.3) rotate(0deg)} 50%{opacity:1;transform:scale(1) rotate(60deg)} }
@keyframes hbCrownBreath { 0%,100%{} 50%{} }

/* 降级: 用户偏好减少动效时全部静止 */
/* v11.8 开屏加载页(服务端直出, app.js 首次 render 淡出移除) */
#xss-splash { position: fixed; inset: 0; z-index: 2000; background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .4s ease-out; }
#xss-splash.splash-out { opacity: 0; pointer-events: none; }
/* v13.1.1 CLS: 开屏盖着时, 下面爬虫用的 SSR 文字随字体加载重排也会计入 CLS(用户看不见) → 开屏在时不让它占版面; 爬虫读 HTML 源码不受影响 */
#xss-splash:not(.splash-out) ~ #app > .ssr-seo { content-visibility: hidden; contain: strict; height: 0; overflow: hidden; }
.splash-box { text-align: center; }
.splash-emoji { display: block; width: 96px; height: 96px; margin: 0 auto 6px; position: relative; }
.splash-emoji img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; animation: splashCycle 2.4s ease-in-out infinite; }
.splash-emoji img:nth-child(2) { animation-delay: .8s; }
.splash-emoji img:nth-child(3) { animation-delay: 1.6s; }
@keyframes splashCycle {
  0%, 30% { opacity: 1; transform: translateY(0) scale(1); }
  4%, 26% { transform: translateY(-4px) scale(1.04); }
  36%, 100% { opacity: 0; transform: translateY(0) scale(.94); } }
.splash-logo { width: 132px; height: auto; aspect-ratio: 720 / 311; display: block; margin: 0 auto 4px; }
/* v13.1 开屏: 宣纸上落一滴墨晕开, 虾虾从墨里探出半个头(0~600ms)、歪头晃; 品牌 IP 是虾(没认猫的人也看得到开屏), 猫只在小院里; 只动 transform/opacity */
.splash-ink { display: block; position: relative; width: 150px; height: 70px; margin: 0 auto 4px; overflow: hidden; }
.splash-ink i { position: absolute; left: 50%; bottom: 2px; width: 150px; height: 36px; margin-left: -75px; border-radius: 50%; background: radial-gradient(closest-side, rgba(196,85,61,.34), rgba(196,85,61,.12) 60%, rgba(196,85,61,0)); transform: scale(0); animation: splashInk .55s cubic-bezier(.1,.8,.25,1) both; }
.splash-peek { position: absolute; left: 50%; bottom: 0; width: 58px; height: 70px; margin-left: -29px; transform: translateY(100%); animation: splashPeek .5s cubic-bezier(.2,.9,.3,1.3) .12s both, splashBob 2.4s ease-in-out .7s infinite; }
@keyframes splashInk { 0% { transform: scale(0); opacity: 0 } 25% { transform: scale(.18); opacity: 1 } 100% { transform: scale(1); opacity: 1 } }
@keyframes splashPeek { from { transform: translateY(100%) } to { transform: translateY(30%) } }
@keyframes splashBob { 0%,100% { transform: translateY(30%) rotate(0) } 50% { transform: translateY(34%) rotate(-4deg) } }

.splash-txt { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.splash-dots b { animation: splashDot 1.2s infinite; display: inline-block; }
.splash-dots b:nth-child(2) { animation-delay: .2s; }
.splash-dots b:nth-child(3) { animation-delay: .4s; }
@keyframes splashDot { 0%, 60%, 100% { opacity: .25 } 30% { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .tier-fx img, .tier-fx::before, .tier-fx::after,
  .rk-title-pill, .rk-title-pill::after, .ach-card > img.ach-frame,
  .hero .mascot.mascot-fx-7,
  .hb-ic.hb-ic-sparkle, .hb-ic.hb-ic-sparkle::before, .hb-ic.hb-ic-sparkle::after { animation: none !important; }
  .hb-ic.hb-ic-sparkle::before, .hb-ic.hb-ic-sparkle::after { opacity: 0; }
  .splash-emoji img { animation: none !important; opacity: 0; }
  .splash-emoji img:first-child { opacity: 1; }
  .splash-dots b { animation: none !important; opacity: 1; }
  .splash-ink i, .splash-peek { animation: none !important; transform: translateY(30%); }
  .splash-ink i { transform: none; }
}

/* ---------- v11.17 微信支付 / 微信登录 ---------- */
.btn-wechat { background: #4fd56b; color: #1c3a24; }
.btn-wechat:active { }
/* 微信气泡图标: 纯 CSS(不引第三方 logo 素材, 规避商标图形使用边界) */
.wx-ic { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; position: relative; }
.wx-ic::before, .wx-ic::after { content: ''; position: absolute; border-radius: 50%; background: #fff; border: 1.2px solid rgba(90,62,43,.38); box-sizing: border-box; }
.wx-ic::before { width: 13px; height: 11px; left: 0; top: 1px; }
.wx-ic::after { width: 10px; height: 9px; right: 0; bottom: 0; }
.wx-ic-sm { width: 15px; height: 15px; }
.wx-or { display: flex; align-items: center; gap: 10px; margin: 12px 0 8px; color: var(--ink-faint); font-size: 12px; }
.wx-or::before, .wx-or::after { content: ''; flex: 1; border-top: 2px dashed #e6dfcf; }
/* 收银台通道选择 */
.pay-ch { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; }
.pay-ch-wx { background: #4fd56b; color: #1c3a24; }
.pay-ch-wx:active { }
.pay-ch-ali { background: var(--sky); color: #10305a; }
.pay-ch-ali:active { }
.pay-ch-ic { font-size: 18px; }
/* 我的页 · 账号与安全 */
.acct-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 2px dashed #efe9db; font-size: 13.5px; }
.acct-row:last-of-type { border-bottom: 0; }
.acct-k { font-weight: 900; min-width: 64px; display: inline-flex; align-items: center; }
.acct-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }

/* ---------- v12.0 微信生态化 ---------- */
.rk-av { flex: 0 0 auto; display: inline-flex; }
.av-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.av-mode { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border: 2.5px solid #e6dfcf; border-radius: 14px; background: #fffdf8; font: inherit; cursor: pointer; }
.av-mode small { font-size: 11.5px; color: var(--ink-soft); font-weight: 900; }
.av-mode.on { border-color: rgba(90,62,43,.38); background: #fff3d6; }
.av-mode.dis { opacity: .5; }
.av-mode-img { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.av-mode-none { width: 40px; height: 40px; border-radius: 50%; background: #efe9db; color: var(--ink-faint); display: inline-flex; align-items: center; justify-content: center; font-weight: 900; }
/* v12.11 「我的形象」弹层: 头像柜九宫格(已拥有可点选佩戴, 未解锁灰显带价直达超市) */
.av-pop { padding: 16px 14px 14px; max-width: 380px; }
.av-pop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.av-sec-t { font-size: 12.5px; font-weight: 900; color: var(--ink-soft); margin: 12px 0 6px; }
.av-sec-t small { font-weight: 600; color: var(--ink-faint); margin-left: 4px; }
.av-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.av-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 5px; border: 2.5px solid #e6dfcf; border-radius: 12px; background: #fffdf8; font: inherit; cursor: pointer; min-width: 0; }
.av-cell img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #fff3d6; }
.av-cell small { font-size: 10.5px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-flex; align-items: center; gap: 2px; }
.av-cell.on { border-color: rgba(90,62,43,.38); background: #fff3d6; }
.av-cell.lock img { filter: grayscale(.85) opacity(.55); }
.av-cell.lock small { color: var(--ink-faint); }
.av-cell-coin { width: 12px !important; height: 12px !important; border-radius: 0 !important; background: none !important; filter: none !important; }
.av-grid-sep { grid-column: 1 / -1; font-size: 11px; color: var(--ink-faint); margin: 6px 0 -1px; }
.av-grid-empty { grid-column: 1 / -1; font-size: 12px; color: var(--ink-soft); background: #f8f3e6; border-radius: 10px; padding: 8px 10px; }
.av-pop .p-ic { width: 16px; height: 16px; object-fit: contain; vertical-align: -3px; margin-right: 4px; }
.av-pop .btn-orange .p-ic { filter: invert(1); }

/* v12.1 服务号订阅通知按钮容器(按钮本体是 <wx-open-subscribe> 插槽, 样式隔离在 wxtag-template 内) */
.wx-sub-wrap { margin-top: 10px; text-align: center; }
.wx-sub-wrap wx-open-subscribe { display: block; width: 100%; }
.wx-sub-hint { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; }
#daily-card .wx-sub-wrap { margin: 8px 12px 10px; }
#rk-sub .wx-sub-wrap { margin: 10px 0 0; }

/* v12.2 虾会员 */
.member-card { display: flex; align-items: center; gap: 10px; cursor: pointer; background: linear-gradient(135deg, #fff7e6, #ffe9c4); border-color: var(--sunny-lo); }
.member-card.on { background: linear-gradient(135deg, #fff3d6, var(--sunny)); }
.member-card-ic { width: 44px; height: 44px; flex: none; }
.member-card b { display: block; font-size: 15px; }
.member-card small { display: block; color: var(--ink-soft); font-size: 12px; margin-top: 2px; }
.member-card-go { flex: none; font-weight: 900; color: #7f6418; font-size: 13px; }
.member-head { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #fff7e6, #ffe9c4); border-color: var(--sunny-lo); }
.member-head.on { background: linear-gradient(135deg, #fff1cf, var(--sunny)); }
.member-head b { display: block; font-size: 17px; }
.member-head small { display: block; color: var(--ink-soft); font-size: 12.5px; margin-top: 2px; }
.member-head-tag { display: inline !important; margin: 0 0 0 6px !important; font-size: 12px !important; font-weight: 700; color: #7f6418 !important; }
.member-head-badge { flex: none; background: #07c160; color: #fff; font-size: 11px; font-weight: 900; padding: 2px 8px; border-radius: 999px; border: 1.2px solid rgba(90,62,43,.38); }
.member-benefit.is-frame img { width: 44px; height: 44px; }
.member-benefit { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line, #e8e0cf); }
.member-benefit:last-child { border-bottom: 0; }
.member-benefit img { width: 34px; height: 34px; flex: none; object-fit: contain; }
.member-benefit b { display: block; font-size: 14px; }
.member-benefit small { display: block; color: var(--ink-faint); font-size: 12px; line-height: 1.5; margin-top: 1px; }
.member-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.member-plan { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px 12px; border: 1.2px solid rgba(90,62,43,.38); border-radius: 16px; background: #fffdf7; font-family: inherit; cursor: pointer; }
.member-plan:active { transform: translate(2px, 2px); }
.member-plan.hot { background: linear-gradient(160deg, #fff9ea, #fff0cc); }
.member-plan.sel { border-color: var(--coral); background: linear-gradient(160deg, #fff3d6, #ffe0a0); box-shadow: 3px 4px 0 rgba(232,104,58,.55); }
.member-plan.sel::after { content: '✓'; position: absolute; top: 6px; left: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--coral); color: #fff; font-size: 12px; font-weight: 900; line-height: 18px; text-align: center; }
.member-confirm { font-size: 16px; padding: 12px; }
.member-plan b { font-size: 15px; }
.member-plan-price { font-family: var(--font-display); font-size: 26px; font-weight: 800; color: var(--coral-lo); line-height: 1.1; }
.member-plan small { color: var(--ink-faint); font-size: 11.5px; }
.member-plan-badge { position: absolute; top: -9px; right: 8px; background: var(--coral); color: #fff; font-size: 11px; font-weight: 900; padding: 1px 8px; border-radius: 999px; border: 1.2px solid rgba(90,62,43,.38); }
.btn-member { background: linear-gradient(135deg, var(--sunny), var(--sunny)); color: #3d3a50; }
.frame-card.r-member .frame-rarity { background: linear-gradient(135deg, var(--sunny), var(--sunny)); color: #3d3a50; }
.follow-bar { display: flex; align-items: center; gap: 10px; cursor: pointer; background: #eefaf0; border-color: #07c160; }
.follow-bar b { display: block; font-size: 14px; }
.follow-bar small { display: block; color: var(--ink-soft); font-size: 12px; }
.follow-bar .wx-ic { width: 28px; height: 28px; flex: none; }

/* v12.19 D1 红线合拍 双人链路: 双 tab + 邀请列表行 */
.hh-tabs { display: flex; gap: 8px; margin: 0 0 12px; }
.hh-tab { flex: 1; padding: 10px 8px; border-radius: 12px; border: 1.2px solid rgba(90,62,43,.38); background: #f6f1e4; color: var(--ink-soft); font-weight: 900; font-size: 14px; cursor: pointer; font-family: inherit; }
.hh-tab.on { background: var(--pink); color: #fff; }
.hhi-row { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px dashed #e0d6c6; }
.hhi-row:last-child { border-bottom: 0; }

/* ===== v12.24 首页重排(调研驱动): 紧凑 Hero / 今日行 / 三大卡 / 虾虾大学城大卡 ===== */
.hero-compact .hero { width: 170px; height: 160px; }
.hero-compact .hero .mascot { width: 128px; bottom: 18px; }
.hero-compact .hero .h-tag { font-size: 11px; }
.hero-zone.hero-compact { margin: 2px 0 8px; }
.tm-horo-wide { width: 100%; display: flex; align-items: center; gap: 10px; margin: 0 0 14px; min-height: 58px; text-align: left; }
.tm-horo-wide span { flex: 1; }
.tm-horo-wide small { white-space: nowrap; font-size: 12px; display: block; }
.tm-horo-wide small b { display: inline; }
.tm-horo-wide small b { font-size: 15px; }
.tm-horo-wide .tm-arrow { font-style: normal; font-size: 20px; color: var(--ink-soft); padding-right: 4px; }
.home-grid.grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.home-grid.grid-3 .mod-card { min-height: 112px; padding: 12px 6px 10px; }
.home-grid.grid-3 .m-name { font-size: 14.5px; letter-spacing: 0; }
.home-grid.grid-3 .m-icon { transform: scale(.9); }
.xia-home-card { display: grid; grid-template-columns: 1fr 132px; align-items: stretch; margin: 0 0 14px; border: 1.2px solid rgba(90,62,43,.38); border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, #fff6e5, #ffe9c2); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.xia-home-card:active { transform: translateY(3px); }
.xia-home-card .xhc-txt { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.xia-home-card .xhc-txt b { font-size: 17px; font-weight: 900; color: var(--ink); }
.xia-home-card .xhc-txt small { font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.xia-home-card .xhc-go { align-self: flex-start; margin-top: 2px; background: var(--sunny); border: 1.2px solid rgba(90,62,43,.38); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 800; color: var(--ink); }
.xia-home-card .xhc-img { width: 132px; height: 100%; min-height: 104px; object-fit: cover; border-left: 1.2px solid rgba(90,62,43,.38); background: #e9efd9; }
.xia-home-card .xhc-img.ph { object-fit: contain; padding: 14px; }
.me-tile.hb-dot::after { content: ''; position: absolute; top: 6px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); border: 2px solid #fff; }

/* ---- v12.27 合规: 页脚 / 法律链接 / 举报屏蔽按钮 / 同意门 ---- */
.site-footer { text-align: center; font-size: 11px; color: var(--ink-faint, #9a9a9a); line-height: 1.9; padding: 6px 12px 18px; }
.site-footer a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0,0,0,.15); }
.legal-links { text-align: center; font-size: 12px; color: var(--ink-faint, #9a9a9a); margin: 10px 0 0; }
.legal-links a { color: inherit; }
.trust-dots { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint, #9a9a9a); font-weight: 900; font-size: 16px; line-height: 1; cursor: pointer; }
.trust-dots:hover { background: rgba(0,0,0,.06); }
.rk-row { position: relative; }
.consent-mask { z-index: 10000; }
.consent-pop { max-width: 360px; }

/* v12.29 生日实时回显: 年龄·星座·生肖; <14 红 */
.birth-echo { margin: -2px 2px 8px; font-size: 12.5px; color: var(--ink-soft, #6b6b80); min-height: 16px; }
.birth-echo.bad { color: var(--coral); font-weight: 700; }

/* v12.30.1 首页一行黄历(所有者: 印章不变, 按 D 放一行, 不要整卡) */
.almanac { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 2px 16px 12px; }
.alm-date { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.1; margin-right: 2px; }
.alm-date b { font-family: var(--font-display); font-size: 15px; color: var(--coral); }
.alm-date small { font-size: 9.5px; color: var(--ink-faint); }
.alm-row { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: 15px; letter-spacing: 2px; color: var(--ink); }
.alm-row b { color: var(--ink); }
.alm-seal { width: 20px; height: 20px; border-radius: 5px; color: #fff; font-size: 12px; font-style: normal; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center; }
.alm-seal.yi { background: var(--mint); } .alm-seal.ji { background: var(--coral); }
.alm-gift { position: relative; width: 28px; height: 28px; padding: 0; margin-left: 2px; border-radius: 50%; background: var(--sunny); border: 1.2px solid rgba(90,62,43,.38);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transform: rotate(-8deg); }
.alm-gift img { width: 18px; height: 18px; object-fit: contain; }
.alm-gift:active { transform: rotate(-8deg) scale(.92); }
.alm-gift.hb-dot::after { content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); border: 1.5px solid #fff; }
/* v12.30 ④⑤⑧ 交互复核 */
.rec-item .rec-gist { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.rec-empty { text-align: center; color: var(--ink-faint); }
.rec-empty img { width: 88px; display: block; margin: 0 auto 8px; }
.rec-empty p { margin: 0 0 10px; }
.rec-empty-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.member-hint { margin: -2px 4px 12px; font-size: 12.5px; color: var(--ink-faint); text-align: center; cursor: pointer; }
.member-hint u { color: var(--sunny-lo); text-decoration-thickness: 2px; }
.ai-box .ai-hint { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-faint); text-align: center; line-height: 1.5; }
/* v12.30 ⑨ 今日双层卡: 签到在上 / 运势在下, 一个外框 */
.today-stack { border: 1.2px solid rgba(90,62,43,.38); border-radius: var(--r-lg); background: #fff; margin: 0 0 14px; overflow: hidden; }
.today-stack .daily-card { margin: 0; }
.today-stack .daily-inner { border: none; border-radius: 0; box-shadow: none; padding: 10px 12px; }
.today-stack .daily-inner.drawn { background: #fff8e1; }
.today-stack .daily-card:not(:empty) + .tm-horo-wide { border-top: 2px dashed #e6d9c3; }
.today-stack .tm-horo-wide { border: none; border-radius: 0; box-shadow: none; margin: 0; min-height: 54px; }
.today-stack .tm-horo-wide:active { transform: none; background: #f7ecd8; }

/* ===== v12.31 红线墙 ===== */
/* v12.37.1 上方两张 mod-card 带旋转+3D 投影, 需留 18px 才不叠到红线墙上边框; 「去看看」补成与虾虾大学城卡同款胶囊按钮(此前只在 .xia-home-card 下有样式, 在这里退化成裸文字) */
.red-home-card { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; padding: 12px 14px; background: linear-gradient(135deg, #fff0f3, #ffe1e8); border: 1.2px solid rgba(90,62,43,.38); border-radius: var(--r-lg); cursor: pointer; }
.red-home-card:active { transform: translateY(3px); }
.rhc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rhc-txt > b { font-size: 16px; color: var(--ink); } .rhc-txt > b small { font-size: 10px; background: var(--coral); color: #fff; border-radius: 6px; padding: 1px 5px; vertical-align: 2px; margin-left: 4px; }
.rhc-txt > small { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.red-home-card .xhc-go { align-self: flex-start; margin-top: 4px; background: #ffd1da; border: 1.2px solid rgba(90,62,43,.38); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.home-grid .mod-card .m-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
@media (max-width: 360px) { .home-grid .mod-card .m-sub { font-size: 9.5px; } .home-grid:not(.grid-3) .mod-card .m-name { font-size: 16px; letter-spacing: 1px; } .xia-home-card { grid-template-columns: 1fr 104px; } .xia-home-card .xhc-img { width: 104px; } .xia-home-card .xhc-txt b { font-size: 15px; } }
.rhc-seal { flex: none; width: 46px; height: 46px; border-radius: 12px; background: var(--coral); color: #fff; font-family: var(--font-display); font-size: 24px; display: flex; align-items: center; justify-content: center; border: 1.2px solid rgba(90,62,43,.38); transform: rotate(-6deg); }
.red-h { margin: 0 0 8px; font-size: 16px; }
.red-gate { text-align: center; color: var(--ink-soft); } .red-gate img { width: 80px; display: block; margin: 0 auto 6px; } .red-gate b { display: block; font-size: 16px; color: var(--ink); margin-bottom: 4px; } .red-gate p { margin: 0 0 10px; font-size: 13px; }
.red-school { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; }
.red-check { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; font-size: 13px; color: var(--ink-soft); margin: 8px 0; line-height: 1.5; cursor: pointer; } .red-check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--coral); } .red-check > span { display: block; }
.red-check.red-age { background: #fff6e3; border: 1.5px dashed var(--sunny-lo); border-radius: 10px; padding: 8px 10px; } .red-check a { color: var(--coral); }
.red-tags { display: flex; flex-wrap: wrap; gap: 6px; } .red-tags .chip { font-size: 12.5px; padding: 4px 10px; } .red-tags .chip.on { background: #ffd1dc; border-color: var(--coral); }
.red-range { width: 100%; accent-color: var(--coral); margin: 6px 0 0; } .red-range-marks { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-faint); padding: 0 2px; }
.red-top { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.red-th-live { flex: 1; display: flex; align-items: center; gap: 6px; background: #fff; border: 1.2px solid rgba(90,62,43,.38); border-radius: 12px; padding: 4px 10px; font-size: 12px; color: var(--ink-soft); } .red-th-live b { color: var(--coral); white-space: nowrap; } .red-range-sm { flex: 1; margin: 0; }
.red-mine { position: relative; background: #fff; border-color: rgba(90,62,43,.38); white-space: nowrap; } .red-mine img { width: 18px; height: 18px; vertical-align: -4px; margin-right: 3px; }
.red-dot { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--coral); color: #fff; font-size: 11px; font-style: normal; display: flex; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #fff; }
.red-quota { font-size: 12px; color: var(--ink-faint); text-align: center; margin: 0 0 10px; }
.red-relaxed { text-align: center; margin: 0 0 8px; }
.red-card { background: #fff; border: 1.2px solid rgba(90,62,43,.38); border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 12px; }
.red-card.matched { background: #f0fbf5; } .red-card.mine { background: #fff6e3; }
.red-card-head { display: flex; align-items: center; gap: 8px; } .red-card-head .grade-pill { font-size: 12px; padding: 3px 12px; letter-spacing: 2px; transform: none; animation: none; }
.g-sui { background: #8b8b9e; } .g-you { background: var(--mint); } .g-shang { background: var(--sunny-lo); } .g-tian { background: var(--coral); }
.red-meta { flex: 1; font-size: 12.5px; color: var(--ink-soft); } .red-dots { flex: none; }
.red-line-txt { margin: 8px 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.red-card-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.red-school-tag { color: var(--ink-faint); } .red-school-tag em { font-style: normal; background: #e6e2f5; color: #6b5fa8; border-radius: 6px; padding: 0 5px; margin-left: 4px; font-size: 10.5px; }
.red-tag { background: #f6f1e4; border-radius: 999px; padding: 2px 8px; color: var(--ink-soft); }
.red-card-foot .red-pull { margin-left: auto; }
.red-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.red-match { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed #e6d9c3; } .red-match img { width: 40px; height: 40px; border-radius: 50%; border: 1.2px solid rgba(90,62,43,.38); object-fit: cover; } .red-match > div { flex: 1; } .red-match b { display: block; font-size: 14px; } .red-match small { color: var(--ink-faint); }
/* v12.32 红线墙 P2 */
.red-notes { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: #f6f1e4; border-radius: 12px; margin-bottom: 8px; }
.red-note { align-self: flex-start; max-width: 80%; background: #fff; border: 1.2px solid rgba(90,62,43,.38); border-radius: 12px 12px 12px 4px; padding: 6px 10px; font-size: 13px; }
.red-note.mine { align-self: flex-end; background: #ffd1dc; border-radius: 12px 12px 4px 12px; }
.red-lines { display: flex; flex-wrap: wrap; gap: 6px; } .red-line-btn { font-size: 12px; padding: 4px 9px; cursor: pointer; font-family: inherit; }
.red-ex { border-top: 2px dashed #e6d9c3; padding-top: 10px; margin-top: 8px; }
.red-wx-form { display: flex; gap: 8px; } .red-wx-form input { flex: 1; }
.red-wx-show { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; } .red-wx-show b { font-size: 22px; letter-spacing: 1px; user-select: all; background: #fff6e3; border: 2px dashed var(--sunny-lo); border-radius: 10px; padding: 6px 14px; }
/* v12.34 ⑥ 合拍「你」折叠行 */
.hh-me-line { display: flex; align-items: center; gap: 8px; background: #f6f1e4; border-radius: 12px; padding: 8px 12px; margin-bottom: 8px; font-size: 13.5px; color: var(--ink); }
.hh-me-line > span { flex: 1; min-width: 0; } .hh-me-line small { color: var(--ink-soft); } .hh-me-line small.dim { color: var(--ink-faint); }
.hh-me-edit { flex: none; background: none; border: 1.2px solid rgba(90,62,43,.38); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-family: inherit; cursor: pointer; color: var(--ink); }

/* v12.40 今日一句 + 分数(Co-Star 形态的一句话产品: 冷、短、不解释) */
.daily-inner.drawn .daily-line { display: block; font-size: 14px; font-weight: 900; color: var(--ink); line-height: 1.35; margin: 3px 0 2px; letter-spacing: .2px; }
.daily-inner.drawn .daily-score { display: inline-block; font-family: var(--font-display); font-size: 15px; font-weight: 900; color: var(--ink); background: var(--sunny); border: 1.2px solid rgba(90,62,43,.38); border-radius: 999px; padding: 0 8px; margin-left: 4px; vertical-align: 1px; line-height: 1.3; }
.daily-inner.drawn small { color: var(--ink-faint); }

/* v12.50 SXTI 入口 chip: NEW 角标 */
.chip-new { position: relative; }
.chip-new::after { content: 'NEW'; position: absolute; top: -7px; right: -6px; font-size: 9px; font-weight: 800; letter-spacing: .5px; padding: 1px 5px; border-radius: 8px; background: var(--coral); color: #fff6e8; border: 1.2px solid rgba(90,62,43,.38); transform: rotate(6deg); }

/* ================================================================
   v12.52 · 结果页画法卡落地（B 方案第一站，docs/EVAL-ART-DIRECTION §4.1 / §十二）
   作用域: .result-block 及其后代。宣纸底 / 深棕细线 / 矿物色盘 / 极柔投影 /
   毛笔字只给一级标题(.rb-text) / 赭红是唯一强调色。其他页面不受影响。
   ================================================================ */
:root {
  --xz-paper: #f3ead8;      /* 宣纸·燕麦 */
  --xz-paper-2: #f9f4ea;    /* 宣纸·云白 */
  --xz-line: #5a3e2b;       /* 深棕细线 */
  --xz-line-soft: rgba(90,62,43,.38);
  --xz-ink: #3a3330;        /* 墨 */
  --xz-ink-soft: #6b5d55;
  --xz-ink-faint: #74665b;
  --xz-red: #b8442c;        /* 赭红 · 唯一强调 */
  --xz-red-lo: #8f3220;
  --xz-green: #6f8f5a;      /* 苔绿 */
  --xz-indigo: #3f5f7a;     /* 靛青 */
  --xz-birch: #b5763f;      /* 桦木 */
  --xz-gamboge: #d9a441;    /* 藤黄 */
  --xz-rouge: #c96a7b;      /* 胭脂 */
  --xz-shadow: 0 4px 12px rgba(58,51,48,.12);
  --font-brush: 'XiaBrush', 'STKaiti', 'KaiTi', serif;
}
/* 纸卡: 去粗黑描边 + 硬投影, 换细棕线 + 极柔投影 + 撕边(mask) */
.panel.result-block {
  background: var(--xz-paper-2);
  border: 1.5px solid var(--xz-line-soft);
  border-radius: 6px;
  box-shadow: var(--xz-shadow);
  color: var(--xz-ink);
  position: relative;
  padding: 22px 18px 18px;
}
.panel.result-block::before { /* 纸纹 */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(90,62,43,.025) 0 1px, transparent 1px 3px),
    radial-gradient(rgba(90,62,43,.05) .6px, transparent .6px);
  background-size: 100% 3px, 9px 9px; opacity: .9; mix-blend-mode: multiply;
}
.panel.result-block > * { position: relative; }
/* 一级标题: 去缎带位图, 改毛笔字 + 两侧细线 */
.result-block .res-banner { width: auto; margin: -4px auto 10px; text-align: center; }
.result-block .res-banner img { display: none; }
.result-block .res-banner .rb-text {
  position: static; transform: none; width: auto; display: inline-block;
  font-family: var(--font-brush); font-weight: 400; color: var(--xz-ink);
  font-size: 30px; letter-spacing: 6px; text-indent: 6px; text-shadow: none; overflow: visible; white-space: normal;
  padding: 0 14px;
}
.result-block .res-banner::after { content: ''; display: block; width: 46px; height: 1.5px; margin: 6px auto 0; background: var(--xz-red); }
/* 虾: 新 IP 素材, 去硬投影 */
.result-block .result-emoji { width: 132px; margin: 0 auto 4px; filter: drop-shadow(0 3px 6px rgba(58,51,48,.14)); }
.result-block .result-emoji.sm { width: 96px; }
.result-block .result-emoji.cooked { animation: xz-steam 3.2s ease-in-out infinite; }
@keyframes xz-steam { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-2px) } }
/* 等级标签 → 朱砂印(唯一强调色), 其余等级用墨印 */
.result-block .tag {
  border: 1.5px solid currentColor; box-shadow: none; border-radius: 4px;
  background: transparent; color: var(--xz-ink-soft); font-weight: 700; letter-spacing: 1px;
  padding: 4px 12px; font-family: var(--font-body);
}
.result-block .tag-gold { color: var(--xz-red); border-color: var(--xz-red); background: rgba(184,68,44,.06); }
.result-block .tag-green { color: var(--xz-green); }
.result-block .tag-gray { color: var(--xz-ink-faint); }
.result-block .tag-red { color: var(--xz-red); }
.result-block .tag-purple { color: var(--xz-indigo); }
/* 签诗 / 引文块 */
.result-block .qian-poem {
  font-family: var(--font-display); font-weight: 700; color: var(--xz-ink);
  background: transparent; border: none; box-shadow: none;
  border-top: 1px solid var(--xz-line-soft); border-bottom: 1px solid var(--xz-line-soft); border-radius: 0;
  padding: 14px 8px; letter-spacing: 3px; text-indent: 3px; font-size: 19px;
}
.result-block .divider { border-top: 1px dashed var(--xz-line-soft); }
.result-block .p-ic { opacity: .7; filter: grayscale(.4) sepia(.35) saturate(.7); }
/* 虾虾解读盒: 去紫底/旋转/硬投影 */
.result-block .ai-box {
  background: var(--xz-paper); border: 1px solid var(--xz-line-soft); border-radius: 6px;
  transform: none; box-shadow: none; padding: 14px;
}
.result-block .ai-box .ai-head { color: var(--xz-ink); }
.result-block .ai-box .ai-head img { width: 24px; }
.result-block .ai-quota { background: transparent; border-color: var(--xz-line-soft); color: var(--xz-ink-faint); }
.result-block .ai-hint, .result-block .ai-note, .result-block .hint { color: var(--xz-ink-faint); }
.result-block .rite-loading { color: var(--xz-ink-soft); }
/* 按钮: 去硬底边+黑描边, 主按钮赭红实心, 次按钮墨线空心 */
.result-block .btn {
  border: 1.5px solid var(--xz-line); box-shadow: var(--xz-shadow); text-shadow: none;
  border-radius: 6px; letter-spacing: 3px; text-indent: 3px; font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease;
}
.result-block .btn:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(58,51,48,.12); }
.result-block .btn-purple, .result-block .btn-orange, .result-block .btn-primary { background: var(--xz-red); border-color: var(--xz-red-lo); color: #fff; }
.result-block .btn-green, .result-block .btn-blue { background: transparent; color: var(--xz-ink); }
.result-block .btn-sm { border-width: 1.5px; letter-spacing: 1.5px; text-indent: 1.5px; }
.result-block .btn .btn-emoji { filter: grayscale(1) opacity(.0); width: 0; margin: 0; } /* 结果页按钮不带贴纸图标 */
/* 分享/再问一行 */
.result-block .btn-pair .btn { font-size: 15px; }
/* 强调文字(b) 用墨, 不用彩色 */
.result-block b { color: var(--xz-ink); }
/* 落款印: 卡片右下角「虾算算」朱砂小印(替代虾身上的字, 角色卡 v1.2) */
.panel.result-block::after {
  content: '虾算算'; position: absolute; right: 12px; bottom: 10px; z-index: 0;
  writing-mode: vertical-rl; font-family: var(--font-brush); font-size: 11px; line-height: 1;
  color: var(--xz-red); border: 1.2px solid var(--xz-red); border-radius: 2px; padding: 4px 2px;
  letter-spacing: 1px; opacity: .55; pointer-events: none;
}
/* 底栏「我的」: 三笔符号 */
.nav a .nav-img.nav-mark { width: 26px; filter: grayscale(1) opacity(.5); }
.nav a.active .nav-img.nav-mark { filter: none; }
/* v12.52 结果块内残留紫系/珊瑚色 → 矿物盘(卦象/爻表/星盘等数据密度组件只换色不换结构) */
.result-block .gua-char, .result-block .gua-name { color: var(--xz-ink); }
.result-block .gua-sub, .result-block .gua-arrow { color: var(--xz-ink-faint); }
.result-block .yao-table td { border-bottom: 1px dashed var(--xz-line-soft); color: var(--xz-ink); }
.result-block .yao-table thead td, .result-block .yao-table th { color: var(--xz-ink-faint); }
.result-block .yao-moving { color: var(--xz-red); }
.result-block small, .result-block .muted { color: var(--xz-ink-faint); }
.result-block .spice-bar, .result-block .seg { color: var(--xz-ink-soft); }
.result-block .spice-opt { border-color: var(--xz-line-soft); background: transparent; border-radius: 4px; color: var(--xz-ink-soft); }
.result-block .spice-opt.on { background: var(--xz-red); border-color: var(--xz-red); color: #fff; }

/* ================================================================
   v13.3 动效统一 — 抽签 / 载入 / 换页 (只动 transform/opacity; reduced-motion 全停)
   ================================================================ */
/* 换页: 内容从下往上浮 8px 淡入 */
#app.view-in > * { animation: viewIn .32s cubic-bezier(.2,.8,.3,1) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
/* 小块加载: 三个墨点依次跳 */
.mini-load { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px 0; min-height: 22px; font-size: 12.5px; color: var(--ink-faint); }
.ml-dots { display: inline-flex; gap: 5px; }
.ml-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--coral, #c4553d); opacity: .35; animation: mlDot 1s ease-in-out infinite; }
.ml-dots i:nth-child(2) { animation-delay: .15s; } .ml-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes mlDot { 0%,100% { opacity: .3; transform: translateY(0) } 40% { opacity: 1; transform: translateY(-4px) } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lazy-bob { animation: zenfloat 2.6s ease-in-out infinite; }
/* 一根签从签筒里蹦出来(竹签 + 朱红签头), 转半圈落下淡出 */
.qian-pop { position: relative; display: block; width: 0; height: 0; margin: 0 auto; pointer-events: none; z-index: 3; }
.qian-pop i { position: absolute; left: -4px; bottom: 6px; width: 8px; height: 46px; border-radius: 3px; background: linear-gradient(#c4553d 0 22%, #e8c98f 22%); box-shadow: 0 2px 4px rgba(58,51,48,.25); transform-origin: 50% 100%; animation: qianPop .85s cubic-bezier(.25,.8,.35,1) both; }
@keyframes qianPop { 0% { transform: translateY(20px) rotate(0); opacity: 0 } 18% { opacity: 1 } 55% { transform: translateY(-58px) rotate(-14deg); opacity: 1 } 100% { transform: translateY(-40px) rotate(8deg); opacity: 0 } }
.daily-left .qian-pop { position: absolute; left: 26px; top: 6px; margin: 0; }
.daily-left { position: relative; }
/* 首页摇签: 结果卡盖章一样落下 */
.daily-inner.just-drawn { animation: drawnIn .45s cubic-bezier(.2,1.5,.4,1) both; }
.daily-inner.just-drawn .emoji-inline { animation: stampIn .5s cubic-bezier(.2,1.9,.4,1) .12s both; }
@keyframes drawnIn { from { opacity: 0; transform: scale(.94) } to { opacity: 1; transform: none } }
/* 弹层: 卡片从下浮上(遮罩本身已淡入) */
.share-mask > .share-pop { animation: popUp .28s cubic-bezier(.2,.9,.3,1.15) both; }
@keyframes popUp { from { opacity: 0; transform: translateY(18px) scale(.97) } to { opacity: 1; transform: none } }
/* 画分享卡: 调色盘虾 + 笔刷在纸上来回刷 */
.card-painting { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.card-painting .cp-box { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 22px 14px; border-radius: 16px; background: rgba(249,244,234,.97); border: 1.2px solid rgba(90,62,43,.38); box-shadow: 0 10px 28px rgba(58,51,48,.22); font-size: 13px; color: var(--ink-soft); font-weight: 700; animation: popUp .25s ease-out both; }
.card-painting img { width: 64px; height: 64px; object-fit: contain; animation: ritewig .7s ease-in-out infinite; transform-origin: 50% 85%; }
.card-painting .cp-paper { position: relative; width: 120px; height: 8px; border-radius: 4px; background: rgba(90,62,43,.12); overflow: hidden; }
.card-painting .cp-paper::after { content: ''; position: absolute; left: 0; top: 0; width: 40%; height: 100%; border-radius: 4px; background: var(--coral, #c4553d); animation: cpBrush 1.1s ease-in-out infinite alternate; }
@keyframes cpBrush { from { transform: translateX(-30%) } to { transform: translateX(180%) } }
@media (prefers-reduced-motion: reduce) {
  #app.view-in > *, .ml-dots i, .lazy-bob, .qian-pop, .daily-inner.just-drawn, .daily-inner.just-drawn .emoji-inline, .share-mask > .share-pop, .card-painting .cp-box, .card-painting img, .card-painting .cp-paper::after, .shaking, .rite-loading img, .zen-loading img, .tarot-shuffle img, .result-block, .result-emoji, .grade-pill, .tarot-card { animation: none !important; }
  .ml-dots i { opacity: .7; }
}