/* ============================================================
   心镜 · 设计系统 v2
   ------------------------------------------------------------
   加载顺序：必须在 app.css 之后（本文件负责覆盖）。
   要解决的问题（来自全站页面审查）：
     1. 选中态用青色 #4ECDC4 + 浅蓝底，与暖橙主色打架 → 统一为一套暖色交互态
     2. 进度条 4px、几乎看不见 → 加粗并换成暖色渐变
     3. 图标混用 emoji + Vant + FontAwesome（FontAwesome 实际 0 使用）→ 统一单色线性 SVG
     4. 原生 <ol> 数字、原生 checkbox 裸露 → 重写
     5. 每个页面底部 40%~60% 大片空白 → 背景纹理 + 底部落款 + 节奏调整
     6. iPhone 底部安全区未处理、长英文/数字不换行 → 修掉
     7. 4 个类名从未定义（report-item / report-content / empty-* / sk-pulse / hide-scrollbar / form-group）→ 补齐
   ============================================================ */

/* ============================================================
   1. 设计令牌
   ============================================================ */
:root {
  /* —— 主色：只有一个 —— */
  --c-brand:        #E4703F;   /* 主色（比旧 #F0815A 深一档，白字对比度更好） */
  --c-brand-strong: #C75A2C;
  --c-brand-soft:   #FDF1E9;   /* 主色 8% 底 */
  --c-brand-line:   #F3C9B2;   /* 主色 25% 描边 */
  --c-brand-mid:    #F0A277;
  --c-brand-grad:   linear-gradient(135deg, #EE8A5C 0%, #DE6437 100%);
  /* 别名：语义更清楚，避免各处拼错变量名（未定义的 var() 会让整条声明失效，
     例如 border-color 会退化成 currentColor，看起来"生效了"其实是巧合）。 */
  --c-brand-border: var(--c-brand-line);
  --c-brand-deep:   var(--c-brand-strong);

  /* —— 旧变量别名：app.css 里的青色/旧橙 ——
     老页面模板里还写着 var(--primary)/var(--secondary)/var(--pink-purple)（十多处），
     逐个改模板工作量大且容易漏；在这里把它们指到新主色，一次收敛。
     ⚠️ 这是"过渡用"的别名，新代码请直接用 --c-brand-*。 */
  --primary:        var(--c-brand);
  --primary-dark:   var(--c-brand-strong);
  --primary-alpha:  rgba(228, 112, 63, 0.09);
  --secondary:      var(--c-brand-mid);
  --pink-purple:    var(--c-brand-strong);
  --text-main:      var(--n-900);
  --text-secondary: var(--n-700);
  --text-muted:     var(--n-500);

  /* —— 中性色阶（暖灰，不是蓝灰）—— */
  --n-900: #241E1A;   /* 标题 */
  --n-700: #4C443C;   /* 正文 */
  --n-500: #857B71;   /* 次要 */
  --n-400: #A79D93;   /* 弱 */
  --n-300: #C9C1B7;   /* 极弱 / 禁用 */
  --n-200: #E7E1D8;   /* 描边 */
  --n-100: #F1ECE5;   /* 分隔线 */
  --n-50:  #FAF7F2;   /* 浅底 */
  --n-0:   #FFFFFF;

  /* —— 语义色 —— */
  --c-ok:   #2F7D5D;
  --c-ok-bg:#EAF6EF;
  --c-warn: #B4791C;
  --c-warn-bg:#FDF4E3;
  --c-danger:#B8442C;
  --c-danger-bg:#FCEFEB;
  --c-info: #4C5FD7;
  --c-info-bg:#F1F3FD;

  /* —— 字号梯度（只有这 7 档）—— */
  --fs-xs:  11px;
  --fs-sm:  12.5px;
  --fs-base:14.5px;
  --fs-md:  16px;
  --fs-lg:  19px;
  --fs-xl:  23px;
  --fs-2xl: 30px;

  /* —— 间距梯度 —— */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px;

  /* —— 圆角梯度 —— */
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-full: 999px;

  /* —— 阴影梯度 —— */
  --sh-1: 0 1px 2px rgba(70,50,32,.04), 0 2px 8px rgba(70,50,32,.05);
  --sh-2: 0 2px 6px rgba(70,50,32,.05), 0 10px 22px rgba(70,50,32,.07);
  --sh-3: 0 4px 12px rgba(70,50,32,.06), 0 18px 40px rgba(70,50,32,.10);

  /* —— 复用 app.css 里的旧变量名，但指向新色值（这样老页面也一起变好）—— */
  --primary: var(--c-brand);
  --primary-light: var(--c-brand-mid);
  --primary-dark: var(--c-brand-strong);
  --primary-alpha: var(--c-brand-soft);
  --radius: var(--r-lg);
  --shadow: var(--sh-2);
  --text-main: var(--n-900);
  --text-secondary: var(--n-700);
  --text-muted: var(--n-500);
  --xj-ink: var(--n-900);
  --xj-warm-bg: #FDF7F1;
  --xj-warm-line: #EDD9C6;
  --xj-warm-text: #8A5326;
  --xj-cool-bg: #F2F4FC;
  --xj-cool-line: #DCE1F6;
  --xj-cool-text: #3B4BC0;

  /* Vant 主题色一起改，否则输入框/键盘/对话框还是旧色 */
  --van-primary-color: var(--c-brand);
}

/* ============================================================
   2. 基础层
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }

body {
  background-color: #FBF7F1;
  background-image:
    radial-gradient(880px 380px at 10% -8%, rgba(228,112,63,.13), transparent 62%),
    radial-gradient(760px 340px at 100% 2%, rgba(76,95,215,.08), transparent 60%),
    radial-gradient(680px 420px at 50% 108%, rgba(228,112,63,.07), transparent 65%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--n-900);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 底部安全区：原来固定 70px，iPhone 上会被 tab 盖住一截 */
#app {
  min-height: 100vh;
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

.page-container {
  /* ⚠️ width:100% 不能省。根组件是 flex 纵向布局，router-view 会把 style="flex:1"
       透传到页面根元素上；而 flex 项在**交叉轴有 auto 外边距时 stretch 会失效**，
       变成"按内容收缩"——内容少的页面（我的、轻入口等）整个缩成 316px、两边各空 37px。
       补上 width:100% 让交叉尺寸变成确定值，auto 外边距才只在大屏（>560px）时生效。 */
  width: 100%;
  padding: 0 var(--sp-4) var(--sp-6);
  min-height: auto;
  max-width: 560px;
  margin: 0 auto;
}

/* 长英文/长数字/长链接换行（原来全站 0 处，会把容器撑破） */
.xj-p, .xj-rich, .xj-dual-text, .xj-step-text, .xj-q-text, .xj-option,
.xj-h2, .xj-h3, .xj-h4, .xj-tag-line, .xj-rec-desc, .report-content,
.report-item, .xj-disclaimer, .xj-crisis-text, .record-summary, .xj-quote,
.xj-headline, .xj-sub, .xj-hero-sub, .xj-tag-name, .xj-scene-note {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 原生默认样式清理：原来的 <ol> 直接露出浏览器蓝色方块数字 */
ol, ul { list-style: none; margin: 0; padding: 0; }

/* 原生 checkbox / radio 不再裸露（天赋页 chip 里塞了原生方框） */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; margin: 0;
  border: 1.5px solid var(--n-300); border-radius: 4px;
  background: var(--n-0); position: relative; flex: none;
  transition: all .15s ease;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--c-brand); border-color: var(--c-brand);
}
input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  content: ''; position: absolute; inset: 3.5px;
  border-radius: 50%; background: #fff;
}

/* ============================================================
   3. 页头
   ============================================================ */
.page-header {
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 0 10px;
  background: rgba(251,247,241,.86);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(231,225,216,.7);
}
.page-header h1 {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: .2px;
  color: var(--n-900);
}
.page-header .back-btn {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  color: var(--n-700);
}
.page-header .back-btn:active { background: var(--n-100); }

/* ============================================================
   4. 卡片 / 区块标题 / 文字
   ============================================================ */
.card {
  background: var(--n-0);
  border: 1px solid var(--n-200);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  box-shadow: var(--sh-1);
}
.card:last-child { margin-bottom: 0; }

.record-card {
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  padding: var(--sp-3) var(--sp-4);
}
.record-card:active { background: var(--n-50); transform: none; }
.record-icon { border-radius: var(--r-sm); }

.xj-h2 { font-size: var(--fs-lg); font-weight: 700; letter-spacing: .1px; }
.xj-h3 { font-size: var(--fs-md); font-weight: 600; margin-bottom: var(--sp-2); }
.xj-h4 { font-size: var(--fs-base); font-weight: 600; margin: var(--sp-3) 0 var(--sp-1); }
.xj-sub { font-size: var(--fs-sm); color: var(--n-500); line-height: 1.65; }
.xj-p  { font-size: var(--fs-base); color: var(--n-700); line-height: 1.9; margin: var(--sp-1) 0; }
.xj-ul { margin: var(--sp-2) 0 0; padding: 0; }
.xj-ul li {
  font-size: var(--fs-base); color: var(--n-700); line-height: 1.9;
  padding-left: 16px; position: relative;
}
.xj-ul li::before {
  content: ''; position: absolute; left: 4px; top: .78em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-brand-mid);
}
.xj-quote {
  margin: var(--sp-3) 0; padding: var(--sp-3);
  border-left: 3px solid var(--c-brand-line); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--xj-warm-bg);
  font-size: var(--fs-base); color: var(--xj-warm-text); line-height: 1.85;
}
.xj-hr { border: none; border-top: 1px solid var(--n-100); margin: var(--sp-4) 0; }
.xj-action { color: var(--c-brand-strong); font-weight: 600; }
.xj-headline { font-size: var(--fs-md); font-weight: 700; line-height: 1.7; margin: var(--sp-2) 0 var(--sp-1); }
.xj-big { font-size: var(--fs-xl); font-weight: 800; margin: var(--sp-2) 0; }
/* 段落之间给点呼吸，否则报告像一坨 */
.xj-rich > p + p { margin-top: var(--sp-3); }
.xj-rich h2.xj-h2, .xj-rich h3.xj-h3 { margin: var(--sp-4) 0 var(--sp-2); }
.xj-rich > *:first-child { margin-top: 0; }

/* ============================================================
   5. 按钮（归一：全站只有主 / 次 / 文字三种）
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 14px; border: none;
  border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: 600; letter-spacing: .3px;
  cursor: pointer; text-align: center;
  transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-primary {
  background: var(--c-brand-grad);
  color: #fff;
  box-shadow: 0 6px 16px rgba(228,112,63,.28);
}
.btn-primary:active { transform: scale(.985); box-shadow: 0 3px 10px rgba(228,112,63,.24); }
.btn-outline {
  background: var(--n-0); border: 1.5px solid var(--n-200); color: var(--n-700);
  box-shadow: var(--sh-1);
}
.btn-outline:active { background: var(--n-50); }
.btn:disabled, .btn.is-disabled {
  background: var(--n-100) !important; color: var(--n-400) !important;
  box-shadow: none !important; border-color: transparent !important;
  transform: none !important; cursor: not-allowed;
}
.btn-sm { width: auto; padding: 8px 16px; font-size: var(--fs-sm); }

/* 原来的 .xj-crisis-btn 是自造的第二套按钮，统一回主按钮外观 */
.xj-crisis-btn {
  width: 100%; margin-top: var(--sp-4); border: none;
  border-radius: var(--r-md); padding: 14px;
  background: var(--c-brand-grad); color: #fff;
  font-size: var(--fs-md); font-weight: 600;
  box-shadow: 0 6px 16px rgba(228,112,63,.28); cursor: pointer;
}
.xj-crisis-btn:active { transform: scale(.985); }

/* ============================================================
   6. 进度条（原来 4px + 橙→靛蓝渐变，细且脏）
   ============================================================ */
.xj-progress {
  height: 8px; background: #EFE8DF; border-radius: var(--r-full);
  overflow: hidden; margin-top: var(--sp-2);
  box-shadow: inset 0 1px 2px rgba(70,50,32,.06);
}
.xj-progress-bar {
  height: 100%; border-radius: var(--r-full);
  background: var(--c-brand-grad);
  box-shadow: 0 0 8px rgba(228,112,63,.35);
  transition: width .3s ease;
}
.xj-progress-text {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-sm); color: var(--n-500);
  margin: var(--sp-2) 0 var(--sp-3);
}
.xj-progress-text b { color: var(--c-brand-strong); font-weight: 700; }

/* ============================================================
   7. 选择类组件：选中态统一暖色 + 勾（原来用青色，冲突）
   ============================================================ */
.xj-option {
  display: flex; align-items: center; gap: 10px;
  text-align: left;
  border: 1.5px solid var(--n-200); background: var(--n-0); color: var(--n-700);
  border-radius: var(--r-md); padding: 13px var(--sp-4);
  font-size: var(--fs-base); line-height: 1.55; cursor: pointer;
  transition: all .15s ease;
  box-shadow: 0 1px 2px rgba(70,50,32,.03);
}
.xj-option:active { transform: scale(.99); background: var(--n-50); }
.xj-option.active {
  border-color: var(--c-brand); background: var(--c-brand-soft);
  color: var(--c-brand-strong); font-weight: 600;
  box-shadow: 0 2px 10px rgba(228,112,63,.14);
}
/* 选项序号圆点 */
.xj-option .xj-opt-no {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--n-100); color: var(--n-500);
  font-size: var(--fs-xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.xj-option.active .xj-opt-no { background: var(--c-brand); color: #fff; }
.xj-option .xj-opt-tick {
  flex: none; margin-left: auto; color: var(--c-brand);
  opacity: 0; transform: scale(.6); transition: all .15s ease;
}
.xj-option.active .xj-opt-tick { opacity: 1; transform: scale(1); }

/* chip 类（身份/时长/性别/多选） */
.xj-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--n-200); background: var(--n-0); color: var(--n-700);
  border-radius: var(--r-full); padding: 8px 16px;
  font-size: var(--fs-sm); line-height: 1.2; cursor: pointer;
  transition: all .15s ease;
}
.xj-chip:active { transform: scale(.97); }
.xj-chip.active {
  border-color: var(--c-brand); background: var(--c-brand-soft);
  color: var(--c-brand-strong); font-weight: 600;
  box-shadow: 0 2px 8px rgba(228,112,63,.14);
}

/* ============================================================================
   首页（三条线）
   ============================================================================ */
.xj-brand { font-size: 22px; font-weight: 800; color: var(--n-900); letter-spacing: .3px; }
.xj-brand-dot { color: var(--c-brand); }

.xj-home-hero {
  margin-top: var(--sp-2);
  padding: 18px 16px 16px;
  border: 1px solid var(--c-brand-border);
  background: linear-gradient(168deg, #FFFCF8 0%, #FFF6EE 58%, #FFF1E6 100%);
  border-radius: var(--r-xl);
}
.xj-home-hero-title { font-size: 20px; font-weight: 800; color: var(--n-900); letter-spacing: .2px; }
.xj-home-hero-sub { font-size: 12.5px; color: var(--n-600); margin-top: 6px; line-height: 1.75; }
.xj-home-hero .xj-state-grid { margin-top: var(--sp-4); }
.xj-home-hero .xj-state-card { background: rgba(255,255,255,.86); }
.xj-light-result { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px dashed var(--c-brand-border); }

/* 状态卡里的图标（替代 emoji：😮‍💨 这类组合字符在安卓会被拆成两个图案）
   白底 + 主色描边线，比"淡橙底 + 橙图标"对比度高得多，小尺寸下也看得清。 */
.xj-state-icon {
  width: 42px; height: 42px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--n-0); color: var(--c-brand-deep);
  border: 1.5px solid var(--c-brand-border);
  transition: all .18s ease;
}
.xj-state-icon .xj-svg { stroke-width: 2; }
.xj-state-card.active .xj-state-icon {
  background: var(--c-brand); color: #fff; border-color: transparent;
  box-shadow: 0 6px 14px rgba(228,112,63,.32);
}

/* 首页第②③条线：一行式入口 */
.xj-home-line {
  display: flex; align-items: center; gap: 12px;
  margin-top: 10px; padding: 15px 16px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.xj-home-line:active { transform: scale(.99); }
.xj-home-line-todo { border-color: var(--c-brand-border); background: linear-gradient(180deg,#FFFCF9,#FFF7F0); }
.xj-home-line-title { font-size: 15.5px; font-weight: 700; color: var(--n-900); display: flex; align-items: center; flex-wrap: wrap; }
.xj-home-line-desc { font-size: 12px; color: var(--n-500); margin-top: 3px; line-height: 1.6; }
.xj-scene-chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

/* 首页底部链接（原来用 11.5px 的 var(--text-muted)，在浅底上几乎看不见） */
.xj-foot-links {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  padding: 22px 0 6px; font-size: 12.5px; color: var(--n-500);
}
.xj-foot-links span { cursor: pointer; }
.xj-foot-links span:active { color: var(--c-brand); }
.xj-foot-sep { color: var(--n-300); cursor: default; }

/* 轻入口 4 状态卡 */
.xj-state-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.xj-state-card {
  background: var(--n-0); border: 1.5px solid var(--n-200);
  border-radius: var(--r-lg); padding: 18px var(--sp-2) 16px;
  text-align: center; cursor: pointer;
  transition: all .18s ease; box-shadow: var(--sh-1);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.xj-state-card:active { transform: scale(.975); }
.xj-state-card.active {
  border-color: var(--c-brand);
  background: linear-gradient(180deg, #FFFBF7, var(--c-brand-soft));
  box-shadow: 0 8px 22px rgba(228,112,63,.18);
}
/* 图标容器：不管是 SVG 还是 emoji，都被装进同一个"圆角图标位"，视觉才统一 */
.xj-iconbox {
  width: 46px; height: 46px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--n-50); border: 1px solid var(--n-100);
  color: var(--c-brand-strong); flex: none;
  transition: all .18s ease;
}
.xj-state-card.active .xj-iconbox,
.xj-scene-card.active .xj-iconbox {
  background: var(--c-brand); color: #fff; border-color: transparent;
  box-shadow: 0 6px 14px rgba(228,112,63,.28);
}
.xj-state-emoji { font-size: 24px; line-height: 1; }
.xj-state-label { font-size: var(--fs-base); font-weight: 600; color: var(--n-900); }

/* 关系场景卡 */
.xj-scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.xj-scene-card {
  background: var(--n-0); border: 1.5px solid var(--n-200);
  border-radius: var(--r-lg); padding: 14px 6px 12px;
  text-align: center; cursor: pointer; transition: all .18s ease;
  box-shadow: var(--sh-1);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.xj-scene-card:active { transform: scale(.975); }
.xj-scene-card.active {
  border-color: var(--c-brand);
  background: linear-gradient(180deg, #FFFBF7, var(--c-brand-soft));
  box-shadow: 0 8px 22px rgba(228,112,63,.18);
}
.xj-scene-card .xj-iconbox { width: 40px; height: 40px; border-radius: var(--r-sm); }
.xj-scene-emoji { font-size: 20px; line-height: 1; }
.xj-scene-label { font-size: var(--fs-sm); font-weight: 600; color: var(--n-900); }
.xj-scene-note { font-size: var(--fs-xs); color: var(--n-500); line-height: 1.45; }

/* ============================================================
   8. 输入框
   ============================================================ */
.xj-input, .xj-textarea, .input-field {
  border: 1.5px solid var(--n-200);
  border-radius: var(--r-md);
  background: var(--n-0);
  color: var(--n-900);
  font-size: var(--fs-md);
  box-shadow: 0 1px 2px rgba(70,50,32,.03);
}
.xj-input:focus, .xj-textarea:focus, .input-field:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px rgba(228,112,63,.12);
}
.xj-input::placeholder, .xj-textarea::placeholder, .input-field::placeholder {
  color: var(--n-400);
}
.xj-field label { font-size: var(--fs-sm); color: var(--n-700); }

/* 补齐从未定义的 form-group（老页面用了 6 次） */
.form-group { margin-bottom: var(--sp-4); }
.form-group > label, .form-label {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--n-700); margin-bottom: var(--sp-2);
}

/* ============================================================
   9. 三段式 / 双视角
   ============================================================ */
.xj-steps { margin-top: var(--sp-2); }
.xj-step {
  display: flex; gap: var(--sp-3); padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--n-100);
}
.xj-step:last-child { border-bottom: none; padding-bottom: 0; }
.xj-step-no {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--c-brand); color: #fff;
  font-size: var(--fs-sm); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(228,112,63,.26);
}
.xj-step-label {
  font-size: var(--fs-xs); font-weight: 700; color: var(--n-500);
  letter-spacing: .6px; margin-bottom: 4px;
}
.xj-step-text { font-size: var(--fs-md); color: var(--n-900); line-height: 1.85; font-weight: 500; }
.xj-step-text.xj-action { font-weight: 600; }

.xj-dual { margin-top: var(--sp-3); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1); }
.xj-dual-row { padding: var(--sp-3); }
.xj-dual-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .6px;
  padding: 2px 8px; border-radius: var(--r-full); margin-bottom: 6px;
}
.xj-dual-warm { background: var(--xj-warm-bg); border: 1px solid var(--xj-warm-line); border-radius: var(--r-md) var(--r-md) 0 0; }
.xj-dual-warm .xj-dual-tag { background: #F6E6D6; color: var(--xj-warm-text); }
.xj-dual-warm .xj-dual-text { color: #6B4A25; }
.xj-dual-cool { background: var(--xj-cool-bg); border: 1px solid var(--xj-cool-line); border-top: none; border-radius: 0 0 var(--r-md) var(--r-md); }
.xj-dual-cool .xj-dual-tag { background: #E3E8FB; color: var(--xj-cool-text); }
.xj-dual-cool .xj-dual-text { color: #2F3E9E; }
.xj-dual-join { height: 5px; background: linear-gradient(90deg, var(--xj-warm-line), var(--xj-cool-line)); }
.xj-dual-text { font-size: var(--fs-base); line-height: 1.85; }
.xj-dual-confirm {
  font-size: var(--fs-sm); color: var(--n-700); margin-top: var(--sp-2);
  padding: 9px 12px; background: var(--n-50); border-radius: var(--r-sm);
  border-left: 3px solid var(--c-brand-mid); line-height: 1.7;
}

/* 三段式里的双视角卡：挣脱「序号 26px + gap 12px + 卡片内边距 16px」的层层缩进，
   左右拉到卡片边缘（以前两侧各空一大块，看着像排版没排满）。
   限定 .card 内才生效，避免在裸容器里负 margin 顶出屏幕。 */
.card .xj-steps .xj-dual {
  margin-left: calc(-1 * (26px + var(--sp-3) + var(--sp-4)));
  margin-right: calc(-1 * var(--sp-4));
}

/* 付费报告：按「## 章节」拆成一张张卡片（以前整篇是一坨 markdown，
   视觉上还不如免费页，用户觉得"花钱买的和免费的一样"） */
.xj-rep-card + .xj-rep-card { margin-top: 12px; }
.xj-rep-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--n-100);
}
.xj-rep-no {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-brand); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.xj-rep-title { font-size: 16px; font-weight: 700; color: var(--n-900); line-height: 1.4; }

/* ============================================================
   10. 结果卡 / 报告
   ============================================================ */
.xj-tag-card {
  background: linear-gradient(180deg, #FFFBF7, #FDF4EC);
  border: 1px solid var(--c-brand-line);
  border-radius: var(--r-xl); padding: var(--sp-6) var(--sp-5);
  text-align: center; box-shadow: var(--sh-2);
}
.xj-tag-name { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: .5px; }
/* 报告 P1#9：结果页首屏先把「被说中」的那句话说出口，再谈分数 */
.xj-tag-name--sub { font-size: var(--fs-base); font-weight: 700; color: var(--c-brand-strong); margin-top: var(--sp-4); letter-spacing: .2px; }
.xj-hero-line {
  font-size: var(--fs-xl); font-weight: 700; color: var(--n-900);
  line-height: 1.62; letter-spacing: .2px; margin-top: var(--sp-2);
}
.xj-tag-score { font-size: 42px; font-weight: 800; color: var(--c-brand-strong); line-height: 1.15; margin-top: var(--sp-1); }
.xj-tag-line { font-size: var(--fs-base); color: var(--n-700); margin-top: var(--sp-2); line-height: 1.75; }
.xj-tag-meta { font-size: var(--fs-xs); color: var(--n-500); margin-top: var(--sp-2); }

.xj-score-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-base); color: var(--n-700);
  padding: 9px 0; border-bottom: 1px solid var(--n-100);
}
.xj-score-row:last-child { border-bottom: none; }
.xj-score-row b { color: var(--n-900); font-size: var(--fs-md); }
.xj-score-value {
  font-weight: 700; color: var(--c-brand-strong);
  font-variant-numeric: tabular-nums;
}
.mt-8 { margin-top: var(--sp-2) !important; }
.mt-12 { margin-top: var(--sp-3) !important; }
.mt-14 { margin-top: 14px !important; }
.mt-16 { margin-top: var(--sp-4) !important; }

/* 报告正文：原来 report-item 完全没定义，正文像裸文本 */
.report-content { font-size: var(--fs-base); color: var(--n-700); line-height: 1.9; }
.report-item {
  position: relative; padding-left: 15px; margin-bottom: 7px;
  font-size: var(--fs-base); color: var(--n-700); line-height: 1.85;
}
.report-item::before {
  content: ''; position: absolute; left: 2px; top: .72em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-brand-mid);
}

.xj-pay-card { border: 1.5px solid var(--c-brand-line); background: linear-gradient(180deg, #FFFDFA, var(--n-0)); }

/* 上锁的章节卡（可点击去解锁） */
.xj-lock-card {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px dashed var(--n-300); background: var(--n-50); cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.xj-lock-card:active { transform: scale(.99); border-color: var(--c-brand-line); }
.xj-lock-card .xj-iconbox { background: var(--n-100); color: var(--n-500); border-color: transparent; flex: none; }

/* 传统视角卡（暖色底，区别于科学视角） */
.xj-trad-card {
  border: 1px solid var(--c-brand-border);
  background: linear-gradient(168deg, #FFFCF7, #FFF5EC);
}
.xj-trad-card .report-item { color: var(--n-700); }
.xj-poster-tip, .xj-share-line {
  font-size: var(--fs-sm); color: var(--n-500);
  text-align: center; line-height: 1.7;
}
.xj-share-line {
  margin-top: var(--sp-3); padding: 10px 12px;
  background: var(--n-50); border-radius: var(--r-sm);
}

/* 推荐项 */
.xj-rec { display: flex; align-items: center; gap: var(--sp-3); padding: 13px 0; border-bottom: 1px solid var(--n-100); cursor: pointer; }
.xj-rec:last-child { border-bottom: none; }
.xj-rec:active { background: var(--n-50); }
.xj-rec-title { font-size: var(--fs-base); font-weight: 600; color: var(--n-900); }
.xj-rec-free { margin-left: 6px; background: var(--c-ok-bg); color: var(--c-ok); font-size: 10px; padding: 2px 7px; border-radius: var(--r-full); font-weight: 600; }
.xj-rec-desc { font-size: var(--fs-sm); color: var(--n-500); line-height: 1.65; margin-top: 2px; }

/* ============================================================
   11. 打卡
   ============================================================ */
.xj-score-row5 { display: flex; gap: var(--sp-2); justify-content: space-between; }
.xj-score-btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1.5px solid var(--n-200); background: var(--n-0);
  border-radius: var(--r-md); padding: 12px 2px 9px;
  cursor: pointer; transition: all .16s ease; box-shadow: var(--sh-1);
}
.xj-score-btn:active { transform: scale(.96); }
.xj-score-btn.active {
  border-color: var(--c-brand); background: var(--c-brand-soft);
  box-shadow: 0 6px 16px rgba(228,112,63,.2);
  transform: translateY(-2px);
}
.xj-score-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
/* 情绪用 emoji 是有道理的（表情本身就是内容），但要装进统一样式的圆形容器，
   否则一排 emoji 尺寸/色彩都不一致，看着就"没做过设计" */
.xj-score-emoji {
  font-size: 24px; line-height: 1;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--n-50); border: 1px solid var(--n-100);
  transition: all .16s ease;
}
.xj-score-btn.active .xj-score-emoji {
  background: #fff; border-color: var(--c-brand-line);
  transform: scale(1.06);
}
.xj-score-label { font-size: var(--fs-xs); color: var(--n-500); }
.xj-score-btn.active .xj-score-label { color: var(--c-brand-strong); font-weight: 600; }

.xj-streak {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--c-brand-strong);
  background: var(--c-brand-soft); border-radius: var(--r-full);
  padding: 6px 14px; margin: var(--sp-3) auto 0;
}
.xj-curve { width: 100%; display: block; }
.xj-fortune-note {
  margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--n-500);
  background: var(--n-50); border-radius: var(--r-sm);
  padding: 10px 12px; line-height: 1.7;
}
.xj-fortune-label { color: var(--xj-warm-text); font-weight: 600; margin-right: 6px; }

/* —— 心情日记：一天可写多条 + 时间轴（2026-09-30）——
   ⚠️ 类名必须带 diary 前缀：`.xj-mood-row` 已被 all.js 的"情绪日记"4 列表情网格占用，
   复用会命中下面第 14 节那条 `grid-template-columns: repeat(4,1fr)`，5 个表情被挤成 4+1 两行。 */
.xj-diary-mood-row { display: flex; align-items: center; gap: 8px; margin: 10px 0 8px; flex-wrap: wrap; }
.xj-mood-btn {
  width: 34px; height: 34px; border-radius: 50%; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--n-200); background: var(--n-0);
  cursor: pointer; transition: all .16s ease;
}
.xj-mood-btn:active { transform: scale(.94); }
.xj-mood-btn.active { border-color: var(--c-brand); background: var(--c-brand-soft); transform: translateY(-2px); }
.xj-mood-hint { font-size: var(--fs-xs); color: var(--n-400); }
.xj-muted-12 { font-size: var(--fs-xs); color: var(--n-400); }

.xj-today-entries { margin-top: 12px; border-top: 1px dashed var(--n-200); padding-top: 6px; }
.xj-entry-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 0; font-size: var(--fs-sm); line-height: 1.6;
}
.xj-entry-row + .xj-entry-row { border-top: 1px solid var(--n-100); }
.xj-entry-time { flex: none; width: 38px; color: var(--n-400); font-size: var(--fs-xs); padding-top: 2px; }
.xj-entry-mood { flex: none; font-size: 15px; line-height: 1.4; }
.xj-entry-text { flex: 1; min-width: 0; color: var(--n-700); word-break: break-word; }
.xj-entry-del {
  flex: none; color: var(--n-300); cursor: pointer; padding: 0 2px;
  display: inline-flex; align-items: center;
}
.xj-entry-del:active { color: var(--c-danger, #d9534f); }

.xj-diary-day + .xj-diary-day { border-top: 1px solid var(--n-100); margin-top: 10px; padding-top: 10px; }
.xj-diary-dayhead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.xj-diary-date { font-size: var(--fs-sm); font-weight: 600; color: var(--n-700); }
.xj-diary-score { font-size: var(--fs-xs); color: var(--n-500); }

/* —— 结果页顶部「档案条」（2026-09-30）：让用户一眼看到"它知道我是谁" —— */
.xj-profile-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
  padding: 7px 14px; background: var(--c-brand-soft);
  border-bottom: 1px solid var(--n-100);
  font-size: var(--fs-xs); color: var(--n-600); line-height: 1.5;
}
.xj-profile-bar-tag {
  flex: none; background: var(--c-brand); color: #fff; border-radius: 4px;
  padding: 1px 5px; font-size: 10px; line-height: 15px; letter-spacing: .5px;
}
.xj-profile-bar-line { color: var(--n-700); font-weight: 600; word-break: break-all; }
.xj-profile-bar-tip { color: var(--n-500); }
.xj-profile-bar-edit { margin-left: auto; flex: none; color: var(--c-brand); font-weight: 600; padding-left: 8px; }
.xj-profile-bar-edit:active { opacity: .6; }

/* ============================================================
   12. 加载 / 空态 / 落款（原来三套并存）
   ============================================================ */
.xj-loading { text-align: center; padding: 46px 0; color: var(--n-500); font-size: var(--fs-sm); }
.xj-spinner {
  width: 26px; height: 26px; margin: 0 auto 12px; border-radius: 50%;
  border: 2.5px solid var(--n-100); border-top-color: var(--c-brand);
  animation: xj-spin .9s linear infinite;
}
@keyframes xj-spin { to { transform: rotate(360deg); } }

.xj-empty { text-align: center; padding: 48px 24px; }
.xj-empty .xj-iconbox {
  width: 56px; height: 56px; border-radius: var(--r-lg);
  margin: 0 auto var(--sp-3); color: var(--c-brand);
}
.xj-empty .xj-empty-text { font-size: var(--fs-base); color: var(--n-500); line-height: 1.7; }

/* 补齐老页面的空态类（原来完全没定义） */
.empty-state { text-align: center; padding: 48px 24px; }
.empty-icon { font-size: 40px; margin-bottom: var(--sp-3); }
.empty-text { font-size: var(--fs-base); color: var(--n-500); line-height: 1.7; }

/* 底部落款：解决"每个页面下面 40%~60% 空白"的廉价感 */
.xj-deco {
  margin-top: var(--sp-6); padding: var(--sp-5) 0 4px;
  text-align: center; color: var(--n-400); font-size: var(--fs-xs);
  letter-spacing: .5px; position: relative;
}
.xj-deco::before {
  content: ''; display: block; width: 44px; height: 3px;
  border-radius: var(--r-full); margin: 0 auto var(--sp-3);
  background: linear-gradient(90deg, var(--c-brand-line), rgba(76,95,215,.25));
}
.xj-deco b { color: var(--n-500); font-weight: 600; }

/* 老骨架屏类（14 处引用但从未定义） */
@keyframes sk-pulse { 0% { opacity: 1; } 50% { opacity: .55; } 100% { opacity: 1; } }
.sk-pulse { background: linear-gradient(90deg, #F1ECE5 25%, #E7E1D8 50%, #F1ECE5 75%); animation: sk-pulse 1.4s ease-in-out infinite; }

/* 排行榜 tab 横向滚动条隐藏（类名一直没定义） */
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scrollbar::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ============================================================
   13. 免责声明 / 筛查 / 危机
   ============================================================ */
.xj-disclaimer {
  font-size: var(--fs-xs); color: var(--n-500); line-height: 1.8;
  background: var(--n-50); border: 1px solid var(--n-100);
  border-radius: var(--r-sm); padding: 12px;
}
.xj-free-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-ok); background: var(--c-ok-bg);
  border: 1px solid rgba(47,125,93,.16);
  padding: 7px 14px; border-radius: var(--r-full); margin-bottom: var(--sp-3);
}
.xj-hotline {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; background: var(--n-0);
  border: 1.5px solid var(--c-brand-line); border-radius: var(--r-md);
  padding: 13px; margin-top: var(--sp-2);
  transition: all .15s ease;
}
.xj-hotline:active { background: var(--c-brand-soft); transform: scale(.99); }
.xj-hotline-phone {
  font-size: var(--fs-lg); font-weight: 800; color: var(--c-brand-strong);
  letter-spacing: 1px; font-variant-numeric: tabular-nums;
}
.xj-hotline-name { font-size: var(--fs-xs); color: var(--n-500); }
.xj-crisis { position: fixed; inset: 0; z-index: 3000; background: rgba(30,24,20,.66); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 22px; animation: xj-fade .25s ease-out; }
@keyframes xj-fade { from { opacity: 0; } to { opacity: 1; } }
.xj-crisis-inner {
  background: #FFFBF6; border-radius: var(--r-xl);
  padding: 28px 22px; max-width: 420px; width: 100%;
  max-height: 86vh; overflow-y: auto; text-align: center;
  box-shadow: var(--sh-3);
}
.xj-crisis-icon {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-brand-soft); color: var(--c-brand-strong);
}
.xj-crisis-title { font-size: var(--fs-lg); font-weight: 800; margin: var(--sp-3) 0 var(--sp-2); }
.xj-crisis-text { font-size: var(--fs-base); color: #5A4A3A; line-height: 1.95; }
.xj-hotlines { margin-top: var(--sp-4); }
.xj-crisis-foot { font-size: var(--fs-xs); color: var(--n-500); margin-top: var(--sp-3); line-height: 1.7; }
.xj-crisis-hint {
  margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-danger);
  background: var(--c-danger-bg); padding: 10px 12px;
  border-radius: var(--r-sm); line-height: 1.7;
}

/* ============================================================
   14. Hero / 区块标题
   ============================================================ */
/* 情绪日记：心情表情用 4 列网格（原来 5–8 个 40px 表情挤一行，最后一个被顶出屏外） */
.xj-mood-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.xj-mood-item {
  text-align: center; font-size: 30px; line-height: 1;
  padding: 12px 0; border-radius: 14px; cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.xj-mood-item:active { transform: scale(.92); }
.xj-mood-item.active {
  background: var(--c-brand-soft);
  box-shadow: inset 0 0 0 1.5px var(--c-brand-line);
  transform: scale(1.08);
}

/* 缘分报告：两人头像并排（两边必须同一套主色，否则"不像一对"） */
.xj-couple-row { display: flex; align-items: center; justify-content: center; gap: 18px; padding: var(--sp-4) 0; }
.xj-avatar {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-brand-grad); color: #fff; font-size: 20px; font-weight: 700;
  box-shadow: 0 6px 16px rgba(228,112,63,.28);
}
.xj-avatar-name { font-size: var(--fs-sm); font-weight: 600; color: var(--n-700); margin-top: 6px; max-width: 90px; }
.xj-couple-link {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--n-0); color: var(--c-brand); border: 1.5px dashed var(--c-brand-line);
}

/* 付费预览：只露章节结构，内容用骨架条（不编造任何结论性文字） */
.xj-preview-rows { margin-top: var(--sp-3); }
.xj-preview-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.xj-preview-row + .xj-preview-row { border-top: 1px solid var(--n-100); }
.xj-preview-no {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-brand-soft); color: var(--c-brand-deep);
  font-size: var(--fs-xs); font-weight: 700;
}
.xj-preview-name { font-size: var(--fs-sm); font-weight: 600; color: var(--n-700); width: 7em; flex: none; }
.xj-preview-bars { display: flex; gap: 5px; flex: 1; }
.xj-preview-bars i { height: 7px; border-radius: 4px; background: var(--n-100); flex: 1; display: block; }
.xj-preview-bars i:nth-child(2) { flex: .8; }

.xj-hero { text-align: center; padding: var(--sp-5) 0 var(--sp-2); animation: xj-rise .35s ease-out; }
.xj-hero-icon {
  width: 60px; height: 60px; border-radius: 20px; margin: 0 auto var(--sp-3);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-brand-soft); color: var(--c-brand-deep);
  border: 1px solid var(--c-brand-border);
}
.xj-hero-icon .xj-svg { stroke-width: 1.9; }
.xj-hero-title { font-size: var(--fs-xl); font-weight: 800; color: var(--n-900); margin-bottom: var(--sp-2); letter-spacing: .2px; }
.xj-hero-sub { font-size: var(--fs-sm); color: var(--n-500); line-height: 1.75; }
@keyframes xj-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.xj-sec { margin: var(--sp-5) 0 var(--sp-2); }
.xj-sec-title { font-size: var(--fs-md); font-weight: 700; color: var(--n-900); display: flex; align-items: center; gap: 7px; }
.xj-sec-title::before {
  content: ''; width: 3px; height: 15px; border-radius: var(--r-full);
  background: var(--c-brand); flex: none;
}
.xj-sec-sub { font-size: var(--fs-sm); color: var(--n-500); margin-top: 5px; line-height: 1.65; }

/* ============================================================
   15. 列表 / 菜单（补交互反馈）
   ============================================================ */
.menu-item { padding: 15px 2px; border-bottom: 1px solid var(--n-100); transition: background .15s ease; }
.menu-item:active { background: var(--n-50); }
.menu-item .menu-text { font-size: var(--fs-base); color: var(--n-900); }
/* 菜单项副标题（2026-09-30，报告 P1#11）：每项一句"什么时候该用它"，替用户判断该点哪个 */
.menu-item .menu-body { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.menu-item .menu-body .menu-text { flex: none; }
.menu-item .menu-sub { font-size: var(--fs-xs); color: var(--n-500); line-height: 1.4; }
.menu-item .menu-arrow { color: var(--n-300); display: flex; align-items: center; }
.menu-item .menu-icon {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: var(--c-brand-soft); color: var(--c-brand-strong);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.menu-item .menu-tag { font-size: var(--fs-xs); color: var(--n-400); }

/* ============================================================
   15b. 统一图标（js/xj-icons.js 产出的 SVG）
   ============================================================ */
.xj-svg {
  flex: none; display: block;
  vertical-align: middle;
  overflow: visible;
}
/* 内联在文字流里的图标（按钮、菜单、标题）要对齐基线 */
.btn .xj-svg, .menu-item .xj-svg, .xj-sec-title .xj-svg,
.xj-option .xj-svg, .xj-chip .xj-svg, .xj-rec .xj-svg,
.xj-step-label .xj-svg, .xj-badge .xj-svg, .xj-hotline .xj-svg,
.xj-streak .xj-svg, .xj-deco .xj-svg { display: inline-block; }

/* ============================================================
   15c. 「第一步」类页面：内容少 → 垂直居中
   （原来内容全挤在顶部，下面半屏全空，看着像没做完）
   ============================================================ */
.page-container.xj-vcenter {
  min-height: calc(100vh - 56px - env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
}
.xj-vmid { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 8px; }

/* ============================================================
   16. 通用小组件
   ============================================================ */
.xj-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: 600;
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--n-100); color: var(--n-700);
}
.xj-badge.ok { background: var(--c-ok-bg); color: var(--c-ok); }
.xj-badge.warn { background: var(--c-warn-bg); color: var(--c-warn); }
.xj-badge.brand { background: var(--c-brand-soft); color: var(--c-brand-strong); }

/* 数字徽标：替代 1️⃣2️⃣3️⃣ 这类带圈数字 emoji（安卓上会渲染成蓝方块） */
.xj-numbadge {
  width: 26px; height: 26px; border-radius: 50%;
  margin: 0 auto; display: flex; align-items: center; justify-content: center;
  background: var(--c-brand); color: #fff;
  font-size: var(--fs-sm); font-weight: 700;
  box-shadow: 0 3px 8px rgba(228,112,63,.26);
}

/* 身份标签 / 等级徽章里的 emoji 统一尺寸，避免同一行里大小不一 */
.tag .tag-emoji, .identity-tag .tag-emoji { font-size: 15px; line-height: 1; }

.xj-divider { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0; color: var(--n-400); font-size: var(--fs-xs); }
.xj-divider::before, .xj-divider::after { content: ''; flex: 1; height: 1px; background: var(--n-100); }

/* Vant 统一 */
.van-tabbar { --van-tabbar-item-active-color: var(--c-brand); --van-tabbar-item-text-color: var(--n-400); }
.van-tabbar-item__icon { font-size: 21px !important; }
.van-tabbar-item__text { font-size: var(--fs-xs) !important; }
.van-button--primary { background: var(--c-brand-grad) !important; border: none !important; }
.van-number-keyboard { padding-bottom: env(safe-area-inset-bottom, 0px); }
.van-toast { border-radius: var(--r-md) !important; }

/* ===== 节点皮肤（2026-09-30 节点唤醒）===== */
body[data-xj-skin="festival"] { --primary: #c0392b; --primary-dark: #96281b; }
body[data-xj-skin="festival"] .xj-hero-title { color: #96281b; }
body[data-xj-skin="term"] { --primary: #2e7d6b; }
body[data-xj-skin="term"] .xj-hero-title { color: #2e7d6b; }