/**
 * 知心 · 全站CSS设计令牌 V2.0（余白 · 明亮陪伴基线）
 * ====================================
 * 部署路径: /var/www/html/assets/css/design-tokens.css
 * 使用方式: <link rel="stylesheet" href="/assets/css/design-tokens.css?v=CB162">
 *           （改动本文件必须递增 ?v= 版本号，击穿微信 X5 缓存）
 *
 * 全站所有页面强制执行的视觉标准 · 唯一样式数据源。
 * 所有间距、圆角、阴影、字体、颜色，必须使用本文件定义的CSS变量。
 * 禁止在任何页面硬编码视觉值。
 *
 * CB-140：原 zen-theme.css 叠加层已全部合并进本文件，不再使用覆盖层。
 * 文件分区：
 *   【A】设计令牌 :root（余白梅红 + 明亮陪伴基线，原 zen 覆盖值已固化为基础值）
 *   【B】全局基础与组件（页面约束/导航/按钮/卡片/反馈组件）
 *   【C】禅意层（zen-mode 背景/玻璃拟态工具类/排版/微动效/降级）
 *   【D】深色模式（opt-in：html[data-theme="dark"] 才生效，默认明亮，不跟随系统 prefers-color-scheme）
 */

:root {
  /* CB-T0：不声明 color-scheme，深色完全由 data-theme="dark"（appearance.ts system 模式跟随系统）驱动，不绑定自定义色 */
  /* ═══════════════════════════════════════════
   * 1. 间距系统
   *    --space-{xs|sm|md|base|lg|xl}
   * ═══════════════════════════════════════════ */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-base: 16px;
  --space-lg:   24px;
  --space-xl:   32px;

  /* ═══════════════════════════════════════════
   * 2. 圆角系统
   *    --radius-{sm|md|lg|xl|round}
   * ═══════════════════════════════════════════ */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;   /* 禅意呼吸感（原 16px，zen 合并固化） */
  --radius-xl:   28px;   /* 禅意呼吸感（原 24px，zen 合并固化） */
  --radius-round: 40px;

  /* ═══════════════════════════════════════════
   * 3. 阴影系统（更柔和、更低透明，zen 合并固化）
   *    --shadow-{none|card|popup|btn}
   * ═══════════════════════════════════════════ */
  --shadow-none:  none;
  --shadow-card:    0 2px 14px rgba(54, 50, 44, 0.04);
  --shadow-card-lg: 0 10px 36px rgba(54, 50, 44, 0.05);
  --shadow-popup:   0 12px 48px rgba(54, 50, 44, 0.10);
  --shadow-btn:     0 4px 14px rgba(197, 100, 115, 0.20);

  /* ═══════════════════════════════════════════
   * 4. 字体系统
   *    --font-{title|body|small|btn}
   *    --font-weight-{regular|medium|bold}
   *    --line-height-{tight|normal|loose}
   * ═══════════════════════════════════════════ */
  --font-title:   400 1.25rem/1.6 "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", "SimSun", serif;  /* 细宋标题（zen 合并固化；安卓无宋体自动降级无衬线） */
  --font-body:    400 0.9rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-small:   400 0.82rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-btn:     600 0.9rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-btn-sm:  600 0.82rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono:    "SF Mono", "Menlo", "Monaco", monospace;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    600;
  --font-weight-black:   700;

  --line-height-tight:  1.6;   /* 标题（zen 合并固化，行距宽 20-30%） */
  --line-height-normal: 1.8;   /* 正文呼吸感 */
  --line-height-loose:  2.0;   /* 宽松 */

  /* ═══════════════════════════════════════════
   * 5. 品牌色
   *    --color-{primary|primary-dark|primary-light|primary-bg}
   * ═══════════════════════════════════════════ */
  --color-primary:       #C56473;
  --color-primary-dark:  #A2455B;
  --color-primary-light: #E8C0C8;
  --color-primary-bg:    #FBEFF2;
  --color-primary-hover: #F9ECF0;
  --color-primary-active:#F4DEE4;
  --color-brand:         #C56473;  /* 余白梅红：头像/导航hover/品牌元素统一引用（此前未定义，导致多处未上色） */

  /* ═══════════════════════════════════════════
   * 6. 文字色
   *    --color-text-{primary|secondary|hint|inverse|link}
   * ═══════════════════════════════════════════ */
  --color-text-primary:   #36322C;  /* 墨褐（原 #061E3C 深蓝，zen 合并固化） */
  --color-text-secondary: #8C887F;  /* 暖灰 */
  --color-text-hint:      #B4AFA4;
  --color-text-placeholder: #C8C8C8;
  --color-text-inverse:   #FFFFFF;
  --color-text-link:      #C56473;
  --color-text-body:      #5C574E;
  --color-text-title:    #36322C;  /* 标题文字（原仅 profile 本地定义，现收归单一源） */
  --color-text-aux:      #8C887F;  /* 辅助文字（原仅 profile 本地定义，现收归单一源） */

  /* ═══════════════════════════════════════════
   * 7. 背景色（明亮禅意暖调，zen 合并固化）
   *    --color-bg-{page|card|warm|white}
   * ═══════════════════════════════════════════ */
  --color-bg-page:  #FBF9F4;   /* 宣纸暖白 */
  --color-bg-card:  #FFFEFB;   /* 柔暖白卡 */
  --color-bg-warm:  #F7F3EC;   /* 暖色背景 */
  --color-bg-hover: #F5F2ED;
  --color-bg-white: #FFFFFF;

  /* ═══════════════════════════════════════════
   * 8. 边框色（极淡墨边，zen 合并固化）
   *    --color-border, --color-border-light, --color-divider
   * ═══════════════════════════════════════════ */
  --color-border:       rgba(54, 50, 44, 0.10);
  --color-border-light: rgba(54, 50, 44, 0.06);
  --color-divider:      rgba(54, 50, 44, 0.05);
  --color-border-line:  rgba(54, 50, 44, 0.06);  /* 细分隔线（原仅 profile 本地定义） */
  --color-card-bg:      rgba(255, 255, 255, 0.78); /* 玻璃卡片底（原仅 profile/notes 本地定义） */

  /* ═══════════════════════════════════════════
   * 9. 功能色
   *    --color-{success|danger|info|warning}
   * ═══════════════════════════════════════════ */
  --color-success:      #2ECC71;
  --color-success-bg:   #E8F8F0;
  --color-danger:       #E74C3C;
  --color-danger-bg:    #FDEDEC;
  --color-info:         #3498DB;
  --color-info-bg:      #EBF5FB;
  --color-warning:      #F1C40F;
  --color-warning-bg:   #FEF9E7;

  /* ═══════════════════════════════════════════
   * 10. 浮层 / 遮罩（Dialog / ActionSheet 蒙层）
   * ═══════════════════════════════════════════ */
  --color-mask: rgba(54, 50, 44, 0.55);  /* 禅意暖墨遮罩（非纯黑，贴合品牌墨褐） */

  /* ═══════════════════════════════════════════
   * 10. 布局约束
   * ═══════════════════════════════════════════ */
  --max-width:     500px;
  --nav-height:    48px;
  --bottom-nav-height: 56px;
  --ai-fab-size:   56px;
  --ai-fab-bottom: 90px;
  --input-min-height: 42px;
  --input-max-height: 120px;

  /* ═══════════════════════════════════════════
   * 11. 禅意专属变量（原 zen-theme.css 合并，供 .zen-* 类使用）
   * ═══════════════════════════════════════════ */
  --zen-ink:        #36322C;
  --zen-earth-1:    #B7A98F;   /* 莫兰迪 灰褐（大地） */
  --zen-earth-2:    #A8B0A0;   /* 莫兰迪 鼠尾草绿 */
  --zen-earth-3:    #C9BBA0;   /* 莫兰迪 沙 */
  --zen-surface:    rgba(255, 255, 255, 0.55);  /* 玻璃面 */
  --zen-surface-strong: rgba(255, 255, 255, 0.72);
  --zen-border-strong: rgba(255, 255, 255, 0.6);
  --zen-border-dim:    rgba(255, 255, 255, 0.12); /* CJ2 · 边框暗角（右下） */
  --zen-glass-bg-strong: rgba(255, 255, 255, 0.78); /* CJ2 · 定价页更实玻璃（CB-110 与 V3 一致） */
  --zen-accent-soft:  #F6E1E6; /* 余白梅红的极淡晕染 */
  --zen-tracking:   0.02em;    /* 标题字距 */
  --zen-tracking-wide: 0.06em;
  --zen-space-section: 32px;   /* 板块间距（比 --space-lg 更松） */

  /* ── 统一玻璃卡片变量（CE1） ── */
  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-blur: 18px;
  --glass-border: 1px solid rgba(255, 255, 255, 0.25);
  --glass-shadow: 0 8px 32px rgba(54, 50, 44, 0.12);

  /* ── 禅意强调色（余白梅红贯穿，CE1） ── */
  --zen-accent: var(--color-primary);              /* 余白梅红 #C56473 */
  --zen-accent-glow: rgba(197, 100, 115, 0.22);    /* 余白梅红微光 */
}

/* ═══════════════════════════════════════════
 * 全局页面约束 — 禁止左右滑动
 * ═══════════════════════════════════════════ */
html {
  overflow-x: clip;   /* CB-260：X5/旧安卓 WebView 下 overflow-x:hidden 会连带禁掉纵向滚动；clip 只裁切横向、不生成滚动容器，纵向照常 */
  width: 100%;
  -webkit-overflow-scrolling: touch;
  -webkit-text-size-adjust: 100%;   /* 锁定 iOS 微信字号放大，防系统字体设置打乱排版（F3 / 建议#3） */
  text-size-adjust: 100%;
  overscroll-behavior: none;         /* 禁 iOS 橡皮筋滚动 / 下拉露灰底（A3） */
}

body {
  overflow-x: clip;   /* CB-260：同 html，避免 body 成滚动容器导致嵌套滚动异常 */
  width: 100%;
  max-width: 100vw;
  position: relative;
  font: var(--font-body);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  min-height: 100vh;
  min-height: 100dvh;   /* #2 · 微信工具栏导致 100vh 算不准，dvh 优先、旧内核回退 vh */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: pan-y pinch-zoom;
  overscroll-behavior: none;         /* 与 html 同步，禁页面级橡皮筋（A3） */
}

/* 全局点击高亮清除（iOS 点击蓝闪）→ 统一用 :active 微缩反馈（A5） */
a, button, input, textarea, select, label,
[role="button"], .tap, .nav-tab, .bottom-nav-item {
  -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════
 * 容器统一
 * ═══════════════════════════════════════════ */
.page-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-base);
  width: 100%;
}

/* ═══════════════════════════════════════════
 * 全局导航栏统一
 * ═══════════════════════════════════════════ */
.global-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--color-bg-warm);
  padding: 0 var(--space-base);
  padding-top: env(safe-area-inset-top, 0px);   /* A1 · iPhone 刘海适配：顶部导航避让安全区 */
  border-bottom: 1px solid var(--color-border-light);
  height: var(--nav-height);
  display: flex;
  align-items: center;
}

.global-nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
}

.global-nav-back {
  width: 36px; height: 36px;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  border-radius: 50%;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
  transition: background var(--transition, 0.15s);
}

.global-nav-back:hover { background: var(--color-bg-warm); }
.global-nav-back:active { transform: scale(0.92); }

.global-nav-brand {
  font-size: 1.05rem;
  font-weight: var(--font-weight-black);
  color: var(--color-primary);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.global-nav-title {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-left: auto;
  white-space: nowrap;
}

.global-nav-ai {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-text-inverse);
  font-size: 0.85rem;
  text-decoration: none;
  flex-shrink: 0;
  margin-left: var(--space-xs);
}

/* ═══════════════════════════════════════════
 * 底部导航栏统一
 * ═══════════════════════════════════════════ */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-border-light);
  padding: var(--space-sm) 0;
  padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
}

.bottom-nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-xs) 0;
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s;
}

.nav-tab .nav-icon { font-size: 1.3rem; line-height: 1; }
.nav-tab--active { color: var(--color-primary); font-weight: var(--font-weight-bold); }

/* ═══════════════════════════════════════════
 * AI悬浮按钮统一
 * ═══════════════════════════════════════════ */
.ai-fab {
  position: fixed;
  bottom: var(--ai-fab-bottom);
  right: 20px;
  z-index: 99;
  width: var(--ai-fab-size);
  height: var(--ai-fab-size);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  text-decoration: none;
  transition: transform 0.2s;
}

.ai-fab:active { transform: scale(0.92); }

/* ═══════════════════════════════════════════
 * 按钮三态统一
 * ═══════════════════════════════════════════ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-round);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-text-inverse);
  border: none;
  font: var(--font-btn);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: all 0.2s;
  text-decoration: none;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(197, 100, 115, 0.35);
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-primary:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 10px 20px;
  border-radius: var(--radius-round);
  background: var(--color-bg-card);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  font: var(--font-btn-sm);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-secondary:hover { background: var(--color-primary-hover); }
.btn-secondary:active { transform: scale(0.97); }
.btn-secondary:disabled { opacity: 0.4; cursor: default; transform: none; }

/* ═══════════════════════════════════════════
 * 板块卡片统一
 * ═══════════════════════════════════════════ */
.section-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card-lg);
  padding: var(--space-lg) 20px 20px;
  margin-bottom: var(--space-base);
}

.section-title {
  font: var(--font-title);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.section-subtitle {
  font: var(--font-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

/* ═══════════════════════════════════════════
 * Toast统一
 * ═══════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: #333;
  color: var(--color-text-inverse);
  padding: 10px var(--space-lg);
  border-radius: 20px;
  font-size: 0.85rem;
  display: none;
  white-space: nowrap;
  pointer-events: none;
}

/* ═══════════════════════════════════════════
 * 空状态统一
 * ═══════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: var(--space-xl) 20px;
  color: var(--color-text-secondary);
}

.empty-state p {
  margin-bottom: var(--space-base);
  font-size: 0.95rem;
}

.empty-state .hint {
  font-size: 0.85rem;
  color: #BBB;
  margin-bottom: var(--space-md);
}

/* ═══════════════════════════════════════════
 * 加载状态统一
 * ═══════════════════════════════════════════ */
.loading-state {
  text-align: center;
  padding: var(--space-xl) 20px;
  color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════
 * 过渡动画
 * ═══════════════════════════════════════════ */
:root {
  --transition-fast: 0.15s ease;
  --transition:      0.25s ease;
  --transition-slow: 0.4s ease;
}

/* ═══════════════════════════════════════════
 * 骨架屏（Skeleton Screen）
 * 所有列表页必须使用此模式作为加载占位
 * 用法：<div class="skeleton-list"> + <div class="skeleton-item">
 *       <div class="skeleton-line w-80"></div>
 *       <div class="skeleton-line w-60"></div>
 * ═══════════════════════════════════════════ */
@keyframes skeleton-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-base) 0;
}

.skeleton-item {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-base);
  box-shadow: var(--shadow-card);
}

.skeleton-line {
  height: 14px;
  border-radius: 7px;
  margin-bottom: var(--space-sm);
  background: linear-gradient(90deg, var(--color-divider) 25%, var(--color-bg-hover) 50%, var(--color-divider) 75%);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.skeleton-line:last-child { margin-bottom: 0; }

.skeleton-line.w-80 { width: 80%; }
.skeleton-line.w-70 { width: 70%; }
.skeleton-line.w-60 { width: 60%; }
.skeleton-line.w-50 { width: 50%; }
.skeleton-line.w-40 { width: 40%; }
.skeleton-line.h-lg { height: 120px; border-radius: var(--radius-sm); }
.skeleton-line.h-md { height: 60px; border-radius: var(--radius-sm); }
.skeleton-line.h-sm { height: 32px; }

/* ── 骨架屏标题行（头像+文字混合） ── */
.skeleton-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.skeleton-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--color-divider) 25%, var(--color-bg-hover) 50%, var(--color-divider) 75%);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════
 * 空状态引导（Empty State）
 * 所有列表页在无数据时必须显示此组件
 * 用法：<div class="empty-state">...</div>
 *      <div class="empty-state hint">引导文案</div>
 * ═══════════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: var(--space-xl) 20px;
  color: var(--color-text-secondary);
}

.empty-state .empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-base);
  display: block;
}

.empty-state .empty-title {
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.empty-state .empty-desc {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: var(--line-height-loose);
  margin-bottom: var(--space-lg);
}

.empty-state .empty-cta {
  display: inline-block;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-round);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-text-inverse);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  font-size: 0.9rem;
  transition: var(--transition);
}

.empty-state .empty-cta:active { transform: scale(0.97); }

/* ── 错误重试 ── */
.error-state {
  text-align: center;
  padding: var(--space-xl) 20px;
}

.error-state .error-btn {
  display: inline-block;
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-round);
  background: var(--color-bg-card);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  font-weight: var(--font-weight-bold);
  font-size: 0.85rem;
  cursor: pointer;
  font-family: inherit;
}

.error-state .error-btn:active { transform: scale(0.97); }

/* ╔═══════════════════════════════════════════════════════════╗
 * ║ 【C】禅意层（原 zen-theme.css 全量合并 · CB-140）          ║
 * ║ 明亮陪伴：安静、温和、不催促（视觉皮肤，非品牌红线）        ║
 * ╚═══════════════════════════════════════════════════════════╝ */

/* ── C1. 禅意页面背景（opt-in: <body class="zen-mode">）
 *        宣纸暖白 + 极淡竖向渐变，制造"留白呼吸"感 ── */
body.zen-mode {
  background:
    radial-gradient(120% 60% at 50% 0%, #FCFAF6 0%, #FBF9F4 55%, #F6F2EA 100%);
}

/* ── C2. 玻璃拟态工具类（Glassmorphism）
 *        统一公式全站复用；边框线性渐变模拟光源（左上亮/右下暗） ── */
.zen-glass {
  background:
    linear-gradient(var(--glass-bg), var(--glass-bg)) padding-box,
    linear-gradient(135deg, var(--zen-border-strong) 0%, var(--zen-border-dim) 100%) border-box;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(125%);
  backdrop-filter: blur(var(--glass-blur)) saturate(125%);
  border: 1px solid transparent;
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-xl);
}

/* 玻璃卡片：充足内边距（CE1 内边距 +20%），可直接替代 .section-card */
.zen-card {
  background:
    linear-gradient(var(--glass-bg), var(--glass-bg)) padding-box,
    linear-gradient(135deg, var(--zen-border-strong) 0%, var(--zen-border-dim) 100%) border-box;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(125%);
  backdrop-filter: blur(var(--glass-blur)) saturate(125%);
  border: 1px solid transparent;
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-xl);
  padding: calc(var(--zen-space-section) * 1.2) var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* ── C3. 禅意排版 ── */
/* 板块标题：宋体 + 宽字距 + 墨色，自带印章式左侧细线 */
.zen-title {
  font-family: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC", "SimSun", serif;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.5;
  letter-spacing: var(--zen-tracking-wide);
  color: var(--zen-ink);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.zen-title::before {
  content: "";
  width: 3px;
  height: 1.1em;
  border-radius: 2px;
  background: var(--color-primary);
  opacity: 0.85;
}

.zen-subtitle {
  font-size: 0.85rem;
  line-height: 1.8;
  letter-spacing: var(--zen-tracking);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-md);
}

/* 禅意正文：更宽行距 */
.zen-body {
  font-size: 0.92rem;
  line-height: 1.9;
  letter-spacing: var(--zen-tracking);
  color: var(--color-text-body);
}

/* ── C4. 导航选中态（未选中=线性图标；选中=余白梅红+极淡晕染圆底） ── */
.nav-tab--active,
.bottom-nav-item.active {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.nav-tab--active .zxn-icon,
.bottom-nav-item.active .zxn-icon {
  color: var(--color-primary);
  background: var(--zen-accent-soft);
  border-radius: 14px;
  padding: 5px;
  transition: background var(--transition);
}

/* ── C5. 禅意微动效：淡入 + 呼吸（克制、温柔） ── */
@keyframes zen-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.zen-fade-in { animation: zen-fade-in 0.5s ease both; }

@keyframes zen-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.04); }
}
.zen-breathe { animation: zen-breathe 4s ease-in-out infinite; }

/* ── C6. 强调色贯穿（CE1）：链接=余白梅红；选中态加梅红微光
 *        低优先级（类型选择器），页面级规则可安全覆盖 ── */
a { color: var(--color-text-link); }

.zen-selected,
.identity-chip--active,
.tab-btn.active,
.feed-tab.active {
  box-shadow: 0 0 14px var(--zen-accent-glow);
}
.identity-chip--active {
  box-shadow: 0 0 0 2px var(--color-primary-bg), 0 0 14px var(--zen-accent-glow);
}

/* ── C7. 底层流动光晕（CE1 呼吸光球，仅 zen-mode 页面） ── */
body.zen-mode::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(197, 100, 115, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 60%, rgba(180, 160, 140, 0.08) 0%, transparent 55%);
  animation: zenGlow 18s ease-in-out infinite alternate;
}
@keyframes zenGlow {
  0%   { opacity: 0.8; transform: scale(1); }
  100% { opacity: 1;   transform: scale(1.05); }
}

/* ── B2 · 硬件加速：促合成层，缓解 X5 动画卡顿 ── */
.zen-glass, .zen-card, .ai-fab { transform: translateZ(0); }
.zen-breathe { will-change: transform; }

/* ── C8. 降级：不支持 backdrop-filter 的设备用实色玻璃（X5 低端机兼容） ── */
@supports not (backdrop-filter: blur(1px)) {
  .zen-glass,
  .zen-card,
  .bottom-nav--glass {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--color-border-light);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ── C9. 尊重用户的减少动效偏好 ── */
@media (prefers-reduced-motion: reduce) {
  .zen-fade-in, .zen-breathe, body.zen-mode::before,
  .zen-loader { animation: none; transition: none; }
}

/* ╔═══════════════════════════════════════════════════════════╗
 * ║ 【D】深色模式（opt-in：仅 html[data-theme="dark"] 生效，默认明亮，不跟随系统） ║
 * ╚═══════════════════════════════════════════════════════════╝ */

/* CB-T0：抑制安卓/iOS 长按弹系统菜单（中转站/分享卡/文字选择） */
*, *::before, *::after { -webkit-touch-callout: none; }
a, button, input, textarea, select, img, summary, [role="button"],
.bottom-nav, .global-nav, .nav { -webkit-user-select: none; user-select: none; }

:root[data-theme="dark"]{
  /* CB-T0：不声明 color-scheme，避免微信/安卓 WebView 把浅色页面强制反色造成混色。
     深色完全由 data-theme="dark"（system 模式跟随系统 prefers-color-scheme）驱动，
     浅色同理跟随系统，不绑定自定义色。 */
  /* ── 背景（深色基底，暖调统一 · CB-261：页面/卡片同色系，去冷蓝、卡片不再纯黑） ── */
  --color-bg-page:    #1E1B17;   /* 暖深底（去蓝） */
  --color-bg-card:    #2A2520;   /* 暖卡面（同色系提亮，非纯黑） */
  --color-bg-warm:    #322C26;   /* 暖色深底 */
  --color-bg-hover:   #38322B;   /* 深色悬停/轨道 */
  --color-primary-bg: #3A2B30;   /* 深色品牌暖底 */
  --color-primary-light: #5C4046; /* 深色品牌描边 */

  /* ── 文字（高对比度 + 柔和暖灰） ── */
  --color-text-primary:   #E8E4DE;  /* 暖白 */
  --color-text-secondary: #9A958C;  /* 中灰 */
  --color-text-hint:      #6B6660;  /* 弱灰 */
  --color-text-body:      #C8C3BA;  /* 正文 */

  /* ── 边框（低透明度亮边） ── */
  --color-border:       rgba(232, 228, 222, 0.10);
  --color-border-light: rgba(232, 228, 222, 0.06);
  --color-divider:      rgba(232, 228, 222, 0.05);
  --color-border-line:  rgba(232, 228, 222, 0.06);  /* 细分隔线（深色） */
  --color-card-bg:      rgba(42, 37, 32, 0.72);      /* 玻璃卡片底（深色，暖调） */
  --color-text-title:   #E8E4DE;                    /* 标题文字（深色） */
  --color-text-aux:     #9A958C;                    /* 辅助文字（深色） */
  --zen-glass-bg-strong: rgba(42, 37, 32, 0.72);    /* 实玻璃（深色，暖调） */

  /* ── 阴影（深色下改为亮色微光） ── */
  --shadow-card:    0 2px 14px rgba(0, 0, 0, 0.25);
  --shadow-card-lg: 0 10px 36px rgba(0, 0, 0, 0.30);
  --shadow-popup:   0 12px 48px rgba(0, 0, 0, 0.35);
  --shadow-btn:     0 4px 14px rgba(197, 100, 115, 0.30);

  /* ── 禅意变量 ── */
  --zen-ink:        #E8E4DE;
  --zen-surface:    rgba(42, 37, 32, 0.55);
  --zen-surface-strong: rgba(42, 37, 32, 0.72);
  --zen-border-strong: rgba(255, 255, 255, 0.08);
  --zen-accent-soft:  rgba(197, 100, 115, 0.10);

  /* ── 玻璃卡片（深色半透明） ── */
  --glass-bg: rgba(42, 37, 32, 0.55);
  --glass-border: 1px solid rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.30);
  

  /* 深色下禅意背景与流动光晕适配 */
  body.zen-mode {
    background:
      radial-gradient(120% 60% at 50% 0%, #2A2520 0%, #24201C 55%, #1E1B17 100%);
  }
  body.zen-mode::before {
    background:
      radial-gradient(ellipse at 30% 20%, rgba(197, 100, 115, 0.04) 0%, transparent 50%),
      radial-gradient(ellipse at 70% 60%, rgba(180, 160, 140, 0.02) 0%, transparent 50%);
  }

  /* 加载遮罩深色模式样式已迁移至 global-nav.css（EK2） */
}

/* ╔═══════════════════════════════════════════════════════════╗
 * ║ 【E】主调切换（Appearance）— CB-外观系统                    ║
 * ║ 与 data-theme(明暗) 正交的独立轴：                          ║
 * ║   html[data-appearance="yohaku|qinglan|qingyan"]           ║
 * ║ 余白(yohaku)=默认，即上方 :root 基线；此处仅定义青岚/清砚。 ║
 * ║ 豆包规范原用新变量名（--color-text-main 等），已翻译映射为  ║
 * ║ 现有令牌名，确保全站组件随主调切换生效。                     ║
 * ╚═══════════════════════════════════════════════════════════╝ */

/* ── 青岚｜竹青（自然舒缓 calming） ── */
:root[data-appearance="qinglan"] {
  --color-primary: #5A8C7B;
  --color-primary-dark: #426B5D;
  --color-primary-light: #8CB8A7;
  --color-primary-bg: #EAF1ED;
  --color-primary-hover: #EFF5F2;
  --color-primary-active: #E3EDE9;
  --color-brand: #5A8C7B;
  --color-text-primary: #2F3C37;
  --color-text-secondary: #5A6E66;
  --color-text-hint: #879992;
  --color-text-link: #5A8C7B;
  --color-text-body: #4A5A53;
  --color-bg-page: #F4F8F6;
  --color-bg-card: #FFFFFF;
  --color-bg-warm: #EAF1ED;
  --color-bg-hover: #EAF0ED;
  --color-border: rgba(90,140,123,0.10);
  --color-border-light: rgba(90,140,123,0.06);
  --color-divider: rgba(90,140,123,0.05);
  --zen-accent-soft: rgba(90,140,123,0.10);
  --zen-accent-glow: rgba(90,140,123,0.22);
  --shadow-btn: 0 4px 14px rgba(90,140,123,0.20);
  --glass-bg: rgba(255,255,255,0.55);
  --glass-border: 1px solid rgba(255,255,255,0.6);
  --zen-surface: rgba(255,255,255,0.55);
  --zen-surface-strong: rgba(255,255,255,0.72);
  --zen-border-strong: rgba(255,255,255,0.6);
  --zen-border-dim: rgba(255,255,255,0.12);
}
:root[data-theme="dark"][data-appearance="qinglan"] {
  --color-primary: #6A9E8C;
  --color-primary-dark: #3A5E52;
  --color-primary-light: #9AC4B4;
  --color-primary-bg: #2E3F38;
  --color-primary-hover: #2E3F38;
  --color-primary-active: #26302B;
  --color-brand: #6A9E8C;
  --color-text-primary: #E3EBE8;
  --color-text-secondary: #B6C7C0;
  --color-text-hint: #859790;
  --color-text-link: #6A9E8C;
  --color-text-body: #B6C7C0;
  --color-bg-page: #1E2925;
  --color-bg-card: #26302B;
  --color-bg-warm: #25302B;
  --color-bg-hover: #2A3631;
  --color-border: rgba(106,158,140,0.12);
  --color-border-light: rgba(106,158,140,0.06);
  --color-divider: rgba(106,158,140,0.05);
  --zen-accent-soft: rgba(106,158,140,0.10);
  --zen-accent-glow: rgba(106,158,140,0.22);
  --shadow-btn: 0 4px 14px rgba(106,158,140,0.30);
  --glass-bg: rgba(41,56,50,0.55);
  --glass-border: 1px solid rgba(255,255,255,0.06);
  --zen-surface: rgba(38,48,43,0.55);
  --zen-surface-strong: rgba(38,48,43,0.72);
  --zen-border-strong: rgba(255,255,255,0.08);
  --zen-border-dim: rgba(255,255,255,0.04);
}
:root[data-appearance="qinglan"] body.zen-mode::before {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(90,140,123,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 60%, rgba(140,184,167,0.08) 0%, transparent 55%);
}
:root[data-theme="dark"][data-appearance="qinglan"] body.zen-mode::before {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(106,158,140,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(140,184,167,0.03) 0%, transparent 50%);
}
:root[data-appearance="qinglan"] .btn-primary:hover { box-shadow: 0 6px 16px rgba(90,140,123,0.35); }
:root[data-theme="dark"][data-appearance="qinglan"] .btn-primary:hover { box-shadow: 0 6px 16px rgba(106,158,140,0.40); }

/* ── 清砚｜黛蓝（文人沉静） ── */
:root[data-appearance="qingyan"] {
  --color-primary: #4F6580;
  --color-primary-dark: #384A60;
  --color-primary-light: #8094AD;
  --color-primary-bg: #EAEFF5;
  --color-primary-hover: #F0F3F8;
  --color-primary-active: #E2E9F1;
  --color-brand: #4F6580;
  --color-text-primary: #2C3642;
  --color-text-secondary: #546170;
  --color-text-hint: #828F9E;
  --color-text-link: #4F6580;
  --color-text-body: #44505E;
  --color-bg-page: #F5F7FA;
  --color-bg-card: #FFFFFF;
  --color-bg-warm: #EBEFF5;
  --color-bg-hover: #EDF1F6;
  --color-border: rgba(79,101,128,0.10);
  --color-border-light: rgba(79,101,128,0.06);
  --color-divider: rgba(79,101,128,0.05);
  --zen-accent-soft: rgba(79,101,128,0.10);
  --zen-accent-glow: rgba(79,101,128,0.22);
  --shadow-btn: 0 4px 14px rgba(79,101,128,0.20);
  --glass-bg: rgba(255,255,255,0.55);
  --glass-border: 1px solid rgba(255,255,255,0.6);
  --zen-surface: rgba(255,255,255,0.55);
  --zen-surface-strong: rgba(255,255,255,0.72);
  --zen-border-strong: rgba(255,255,255,0.6);
  --zen-border-dim: rgba(255,255,255,0.12);
}
:root[data-theme="dark"][data-appearance="qingyan"] {
  --color-primary: #5C7696;
  --color-primary-dark: #35465A;
  --color-primary-light: #8E9FB6;
  --color-primary-bg: #2C3744;
  --color-primary-hover: #2C3744;
  --color-primary-active: #232C36;
  --color-brand: #5C7696;
  --color-text-primary: #E2E7ED;
  --color-text-secondary: #B1BCD0;
  --color-text-hint: #818DA0;
  --color-text-link: #5C7696;
  --color-text-body: #B1BCD0;
  --color-bg-page: #1D242C;
  --color-bg-card: #232C36;
  --color-bg-warm: #232C36;
  --color-bg-hover: #28333E;
  --color-border: rgba(92,118,150,0.12);
  --color-border-light: rgba(92,118,150,0.06);
  --color-divider: rgba(92,118,150,0.05);
  --zen-accent-soft: rgba(92,118,150,0.10);
  --zen-accent-glow: rgba(92,118,150,0.22);
  --shadow-btn: 0 4px 14px rgba(92,118,150,0.30);
  --glass-bg: rgba(37,46,58,0.55);
  --glass-border: 1px solid rgba(255,255,255,0.06);
  --zen-surface: rgba(37,46,58,0.55);
  --zen-surface-strong: rgba(37,46,58,0.72);
  --zen-border-strong: rgba(255,255,255,0.08);
  --zen-border-dim: rgba(255,255,255,0.04);
}
:root[data-appearance="qingyan"] body.zen-mode::before {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(79,101,128,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 60%, rgba(128,148,173,0.08) 0%, transparent 55%);
}
:root[data-theme="dark"][data-appearance="qingyan"] body.zen-mode::before {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(92,118,150,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(128,148,173,0.03) 0%, transparent 50%);
}
:root[data-appearance="qingyan"] .btn-primary:hover { box-shadow: 0 6px 16px rgba(79,101,128,0.35); }
:root[data-theme="dark"][data-appearance="qingyan"] .btn-primary:hover { box-shadow: 0 6px 16px rgba(92,118,150,0.40); }

/* ── 活力｜play（好玩有趣·高饱和撞色·非禅意） ──
   CB-277：与余白/青岚/清砚正交的独立主调轴。面向"心理工具集"活泼场景。
   用明亮高饱和橙+辅暖色，大圆角、强对比，与禅意 quiet 基调拉开。 */
:root[data-appearance="play"] {
  --color-primary: #FF6B3D;
  --color-primary-dark: #E64A1E;
  --color-primary-light: #FFB499;
  --color-primary-bg: #FFF0E9;
  --color-primary-hover: #FFE3D6;
  --color-primary-active: #FFD4C2;
  --color-brand: #FF6B3D;
  --color-text-primary: #2B2118;
  --color-text-secondary: #7A6A5C;
  --color-text-hint: #A99A8C;
  --color-text-link: #FF6B3D;
  --color-text-body: #4A3F36;
  --color-bg-page: #FFF7F2;
  --color-bg-card: #FFFFFF;
  --color-bg-warm: #FFF0E9;
  --color-bg-hover: #FFF3EC;
  --color-border: rgba(255,107,61,0.16);
  --color-border-light: rgba(255,107,61,0.10);
  --color-divider: rgba(255,107,61,0.08);
  --zen-accent-soft: rgba(255,107,61,0.12);
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow-btn: 0 6px 16px rgba(255,107,61,0.32);
}
:root[data-theme="dark"][data-appearance="play"] {
  --color-primary: #FF8A5C;
  --color-primary-dark: #FF6B3D;
  --color-primary-light: #FFB499;
  --color-primary-bg: #2E2018;
  --color-primary-hover: #3A281E;
  --color-primary-active: #453022;
  --color-brand: #FF8A5C;
  --color-text-primary: #F5EDE6;
  --color-text-secondary: #B6A294;
  --color-text-hint: #8A7A6C;
  --color-text-link: #FF8A5C;
  --color-text-body: #D8CBC0;
  --color-bg-page: #1A1410;
  --color-bg-card: #241C16;
  --color-bg-warm: #2E2018;
  --color-bg-hover: #2A201A;
  --color-border: rgba(255,138,92,0.22);
  --color-border-light: rgba(255,138,92,0.12);
  --color-divider: rgba(255,138,92,0.10);
  --zen-accent-soft: rgba(255,138,92,0.16);
  --shadow-btn: 0 6px 16px rgba(255,107,61,0.40);
}
/* play 主调下取消禅意光晕（活泼场景不需要枯山水氛围） */
:root[data-appearance="play"] body.zen-mode::before { display: none; }
:root[data-appearance="play"] .btn-primary:hover { box-shadow: 0 6px 16px rgba(255,107,61,0.40); }
:root[data-theme="dark"][data-appearance="play"] .btn-primary:hover { box-shadow: 0 6px 16px rgba(255,107,61,0.50); }

/* 【F】系统深色兜底已移除（CB-492）：深色唯一由 :root[data-theme="dark"] 驱动，
   appearance.ts 的 system 模式读 prefers-color-scheme 写 data-theme，不绑定自定义色，
   避免与微信/安卓 WebView 强制反色叠加造成混色。 */

/* 【G】antd-mobile 主题色桥接（CB-494）
   antd-mobile 内部组件（List/Card/Tabs/ActionSheet/Toast/Switch…）默认走
   --adm-color-background(#fff)/--adm-color-box(#fff)/--adm-color-text(#000)，
   在深色模式下会变成"白卡叠深底"，与本项目令牌脱节。
   桥接到 --color-bg-card / --color-bg-warm / --color-text-primary 后，
   全站 antd-mobile 容器随主调+明暗自动变色，单点维护、零改业务组件。 */
:root {
  --adm-color-background: var(--color-bg-card);
  --adm-color-box:        var(--color-bg-warm);
  --adm-color-text:       var(--color-text-primary);
  --adm-color-text-secondary: var(--color-text-secondary);
  --adm-color-border:     var(--color-border);
  --adm-color-fill-content: var(--color-bg-warm);
}
:root[data-theme="dark"] {
  --adm-color-background: var(--color-bg-card);
  --adm-color-box:        var(--color-bg-warm);
  --adm-color-text:       var(--color-text-primary);
  --adm-color-text-secondary: var(--color-text-secondary);
  --adm-color-border:     var(--color-border);
  --adm-color-fill-content: var(--color-bg-warm);
}