/* ============================================================
   这有闲 · 共享样式表
   设计系统：Soft Warm × Modern Minimal（Design Tokens v1.0）
   基准：1rem = 16px ｜ 主色暖绿 #3E8E5A
   说明：为避免重复，本表定义令牌、基础排版、通用组件；
        各页面特有样式内联在各自 <style> 中。
   ============================================================ */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* Brand */
  --color-primary: #3E8E5A;
  --color-primary-hover: #337A4B;
  --color-primary-active: #2A6440;
  --color-primary-50: #F0F7F2;
  --color-primary-100: #DCEEE2;

  /* Neutral (warm) */
  --color-bg: #FBF9F6;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F5F1EB;
  --color-border: #E8E2D9;
  --color-border-strong: #D6CEC2;
  --color-text-primary: #2A2622;
  --color-text-secondary: #6B6259;
  --color-text-tertiary: #9A9086;
  --color-text-inverse: #FFFFFF;

  /* Accent */
  --color-accent-clay: #C98A5E;
  --color-accent-sand: #F3E4D2;
  --color-accent-sage: #A8C3A0;

  /* Semantic */
  --color-success: #2E9E6B;
  --color-success-bg: #E6F5EC;
  --color-warning: #D9911F;
  --color-warning-bg: #FBF1DC;
  --color-danger: #D9534F;
  --color-danger-bg: #FBE9E8;
  --color-info: #3E7BB8;
  --color-info-bg: #E7F0F8;

  /* Lock overlay */
  --overlay-lock: rgba(42,38,34,0.06);
  --blur-lock: blur(6px);
  --gradient-lock: linear-gradient(180deg, rgba(251,249,246,0) 0%, rgba(251,249,246,0.92) 70%, #FBF9F6 100%);
  --lock-chip-bg: rgba(255,255,255,0.85);
  --lock-chip-fg: #6B6259;

  /* Compliance */
  --color-compliance-bg: #FBF6EC;
  --color-compliance-border: #E5D9C0;
  --color-compliance-text: #4A423A;
  --color-compliance-emphasis: #2A2622;

  /* Radius */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px;
  --radius-lg: 18px; --radius-xl: 24px; --radius-2xl: 32px;
  --radius-pill: 999px; --radius-full: 50%;

  /* Shadow */
  --shadow-raised: 0 1px 2px rgba(42,38,34,0.04), 0 2px 8px rgba(42,38,34,0.06);
  --shadow-floating: 0 4px 12px rgba(42,38,34,0.08), 0 8px 24px rgba(42,38,34,0.06);
  --shadow-modal: 0 8px 32px rgba(42,38,34,0.12), 0 2px 8px rgba(42,38,34,0.08);
  --shadow-sticky: 0 -1px 0 rgba(42,38,34,0.06), 0 -4px 16px rgba(42,38,34,0.06);

  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  /* Z-index */
  --z-base: 0; --z-sticky: 100; --z-dropdown: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500;

  /* Font */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif;
  --font-display: "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
}

/* ---------- 2. Reset & Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
ul { list-style: none; }
:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(62,142,90,0.30); border-radius: var(--radius-sm); }

/* ---------- 3. Typography helpers ---------- */
.h-display { font-family: var(--font-display); font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.h1 { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.h2 { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.4; }
.h4 { font-size: 17px; font-weight: 600; line-height: 1.45; }
.t-secondary { color: var(--color-text-secondary); }
.t-tertiary { color: var(--color-text-tertiary); }
.t-small { font-size: 13px; line-height: 1.5; letter-spacing: 0.01em; }
.t-micro { font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.02em; }
.t-overline { font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; }
.t-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- 4. Layout ---------- */
.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .container { padding: 0 24px; } }
@media (min-width: 1024px) { .container { padding: 0 32px; } }
.stack-4 { display: flex; flex-direction: column; gap: 16px; }
.stack-6 { display: flex; flex-direction: column; gap: 24px; }

/* ---------- 5. Top Nav (shared across pages) ---------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  height: 56px;
  background: rgba(251,249,246,0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 1024px) { .topbar { height: 64px; } }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-word { display: flex; align-items: baseline; gap: 7px; }
.brand-cn { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--color-text-primary); letter-spacing: 0.02em; }
.brand-en { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--color-text-secondary); }

/* 【v55 王总第1条】.city-picker（顶栏定位器「📍深圳市 ⌄」）的样式已随 v54 删除该元素一并清除：
   原来只删了 13 个页面里的元素标签，CSS 三段规则（基础 / 窄屏 / 超窄屏）留在样式表里没人用。
   本次体检（_v55_legacy_scan.js）扫出后清理干净，不留死样式。 */

.nav-links { display: none; align-items: center; gap: 4px; }
@media (min-width: 1024px) { .nav-links { display: flex; } }
.nav-link {
  padding: 8px 14px; border-radius: var(--radius-md);
  font-size: 15px; font-weight: 500; color: var(--color-text-secondary);
  transition: color 180ms ease, background 180ms ease;
}
.nav-link:hover { color: var(--color-text-primary); background: var(--color-surface-alt); }
.nav-link.is-active { color: var(--color-primary); }
.nav-link.is-active::after {
  content: ""; display: block; height: 2px; margin-top: 4px;
  background: var(--color-primary); border-radius: 2px;
}

.topbar-right { display: flex; align-items: center; gap: 12px; }

/* ============================================================
   【v59 王总第7/8条】顶栏右侧顺序（全站统一，只改顺序不动样式）
     目标：页面动作(0) → 登录/注册(1) → 账户设置(2) → 联系(3，最右端)
     · 第8条：「登录 / 注册」放到「账户设置」左边
     · 第7条：「联系」放到最右端
   用 flex order 统一控制，避免逐页搬动 HTML 造成顺序发散。
   ============================================================ */
.topbar-right > #authSlot { order: 1; }
.topbar-right > .topbar-icon[href$="account.html"] { order: 2; }
.topbar-right > .topbar-icon[href$="support.html"] { order: 3; }
.topbar-right > .btn { order: 0; }   /* community / publish / subscribe / verify 的页面动作按钮保持在最左 */

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px;
  border-radius: var(--radius-md);
  font-size: 15px; font-weight: 600;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease,
              transform 120ms cubic-bezier(0.32,0.72,0,1), box-shadow 180ms ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.975); }
.btn svg { flex-shrink: 0; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 17px; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: var(--radius-sm); }

.btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 1px 2px rgba(42,38,34,0.06); }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:active { background: var(--color-primary-active); }

/* ==========================================================================
   【v54 王总补充1 第1/2/3条】未登录态统一登录引导
   未登录时不得展示任何他人 / 演示数据（申请数量、昵称资料、会话内容、信用资料），
   一律替换为下面的登录引导块。
   ========================================================================== */
.login-gate {
  display: none;              /* 默认隐藏；仅当 main.is-guest 时才显示（见下） */
  text-align: center; padding: 40px 20px;
  color: var(--color-text-secondary);
}
.login-gate__t { font-size: 15px; color: var(--color-text-primary); margin: 0 0 6px; }
.login-gate__s { font-size: 13px; margin: 0 0 18px; }
/* 未登录时：隐藏页面主体里除页头/页脚/登录引导之外的一切数据区块 */
main.is-guest > *:not(.page-head):not(.site-footer):not(.login-gate) { display: none !important; }
main.is-guest > .login-gate { display: block !important; }

/* 【v14】纯文字按钮：去底色边框，全站按钮文字化（视觉红线） */
.btn-secondary { background: transparent; color: var(--color-text-primary); border: none; padding-left: 4px; padding-right: 4px; }
.btn-secondary:hover { color: var(--color-primary); background: transparent; }
.btn-secondary:active { color: var(--color-primary-active); background: transparent; }

.btn-ghost { background: transparent; color: var(--color-primary); border: none; padding-left: 4px; padding-right: 4px; }
.btn-ghost:hover { opacity: 0.75; background: transparent; }

.btn-tertiary { background: transparent; color: var(--color-text-secondary); border: none; padding-left: 4px; padding-right: 4px; }
.btn-tertiary:hover { color: var(--color-primary); background: transparent; }

.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: #C24643; }

.btn-danger-outline { background: transparent; color: var(--color-danger); border: none; padding-left: 4px; padding-right: 4px; }
.btn-danger-outline:hover { opacity: 0.75; background: transparent; }

/* 【v14】中性纯文字按钮：用于「婉拒」等正常业务动作（禁用红色表示婉拒/信用差/未中签） */
.btn-outline-neutral { background: transparent; color: var(--color-text-secondary); border: none; padding-left: 4px; padding-right: 4px; }
.btn-outline-neutral:hover { color: var(--color-text-primary); background: transparent; }
.btn-outline-neutral:active { color: var(--color-text-primary); }

.btn-block { width: 100%; }

/* 【v10】纯文字按钮：管理列表等轻操作用，彻底取代绿描边/椭圆按钮 */
.linkbtn {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: none; padding: 0; height: auto;
  font-size: 13px; font-weight: 600; color: var(--color-primary);
  cursor: pointer; transition: opacity 180ms ease;
}
.linkbtn:hover { opacity: 0.75; }
.linkbtn.neutral { color: var(--color-text-secondary); }

/* 【v13】好物卡申请人数（纯文字暖橙） */
.badge-apps { background: transparent; border: none; border-radius: 0; padding: 0; color: #B07A3F; font-size: 12px; font-weight: 600; }

/* 【v11】善行荣誉徽章（纯文字暖色，无框——docs/19） */
.kind-tag { font-size: 11px; font-weight: 600; color: #B07A3F; white-space: nowrap; }

/* 【v10】导航消息红点 */
.nav-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-clay); margin-left: 3px; vertical-align: 2px; }
.btn[disabled], .btn.is-disabled { background: transparent; color: var(--color-text-tertiary); cursor: not-allowed; }

/* ---------- 7. Cards ---------- */
.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised);
}
.card-bordered { border: 1px solid var(--color-border); }
.card-pad { padding: 16px; }
@media (min-width: 768px) { .card-pad { padding: 20px; } }
.card-hover { transition: box-shadow 180ms ease, transform 180ms ease; }
@media (hover: hover) {
  .card-hover:hover { box-shadow: var(--shadow-floating); }
}

/* ---------- 8. Badges（v7：全部纯文字，去椭圆底与边框） ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: auto; padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 12px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.badge svg { color: var(--color-text-tertiary); }
.badge-credit { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.badge-credit.high,
.badge-credit.good,
.badge-credit.mid,
.badge-credit.new { background: transparent; color: var(--color-text-secondary); }

.badge-verified { background: transparent; color: var(--color-text-secondary); }
.badge-verified svg { color: var(--color-primary); }
.badge-distance { background: transparent; color: var(--color-text-secondary); height: auto; padding: 0; font-size: 12px; font-weight: 500; }
.badge-distance svg { color: var(--color-text-tertiary); }
.badge-neutral { background: transparent; color: var(--color-text-secondary); }
.badge-cat { background: transparent; color: var(--color-text-secondary); }

/* status pills（v7：纯文字，去椭圆底） */
.status { display: inline-flex; align-items: center; gap: 5px; height: auto; padding: 0; border-radius: 0; background: transparent; font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.status-pending,
.status-agreed,
.status-done,
.status-expired { background: transparent; color: var(--color-text-secondary); }

/* ---------- 9. Avatar ---------- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--color-primary-100); color: var(--color-primary-active);
  font-size: 16px; font-weight: 600;
  border: 1px solid var(--color-border);
  flex-shrink: 0; overflow: hidden;
}
.avatar-sm { width: 32px; height: 32px; font-size: 13px; }
.avatar-xs { width: 24px; height: 24px; font-size: 11px; }
.avatar-lg { width: 56px; height: 56px; font-size: 22px; }
.avatar-wrap { position: relative; display: inline-flex; flex-shrink: 0; }
.avatar-wrap .verified-dot {
  position: absolute; right: -2px; bottom: -2px;
  width: 16px; height: 16px; border-radius: var(--radius-full);
  background: var(--color-success); border: 2px solid var(--color-surface);
  display: flex; align-items: center; justify-content: center;
}
.avatar-wrap .verified-dot svg { color: #fff; }

/* ---------- 10. Form controls ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 13px; font-weight: 500; color: var(--color-text-secondary); }
.input, .textarea, .select {
  width: 100%;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.input, .select { height: 44px; }
.textarea { min-height: 96px; resize: vertical; line-height: 1.65; }
@media (min-width: 1024px) { .input, .select { height: 40px; } }
.input::placeholder, .textarea::placeholder { color: var(--color-text-tertiary); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(62,142,90,0.18);
}

/* choices (radio-like) */
.choice {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}
.choice:hover { border-color: var(--color-border-strong); }
.choice.is-selected { border-color: var(--color-primary); background: var(--color-primary-50); }
.choice-radio {
  width: 20px; height: 20px; border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border-strong);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px; transition: all 180ms ease;
}
.choice.is-selected .choice-radio { border-color: var(--color-primary); border-width: 6px; }

/* ---------- 11. Tabs ---------- */
.seg {
  display: inline-flex; gap: 18px;
  background: transparent; border-radius: 0; padding: 0;
}
.seg-item {
  display: inline-flex; align-items: center; gap: 5px;
  height: auto; padding: 6px 2px; border-radius: 0;
  background: transparent; border: none; border-bottom: 2px solid transparent;
  font-size: 15px; font-weight: 500; color: var(--color-text-secondary);
  transition: color 180ms ease, border-color 180ms ease;
}
.seg-item:hover { color: var(--color-text-primary); }
.seg-item.is-active { background: transparent; border-bottom-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }

/* chip filters */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: auto; padding: 6px 2px; border-radius: 0;
  background: transparent; border: none;
  border-bottom: 2px solid transparent;
  font-size: 15px; font-weight: 500; color: var(--color-text-secondary);
  transition: all 180ms ease; white-space: nowrap;
}
.chip:hover { color: var(--color-text-primary); }
.chip.is-active { background: transparent; border-bottom-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }

/* ---------- 12. Section heading ---------- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-head .sub { color: var(--color-text-secondary); font-size: 14px; margin-top: 4px; }

/* ---------- 13. Bottom mobile tab bar ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky);
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
  display: flex;
}
@media (min-width: 1024px) { .tabbar { display: none; } }
.tabbar-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 11px; font-weight: 500; color: var(--color-text-tertiary);
  transition: color 180ms ease;
}
.tabbar-item.is-active { color: var(--color-primary); }
.tabbar-item svg { width: 24px; height: 24px; }
.tabbar-fab {
  flex: 1; display: flex; align-items: center; justify-content: center;
}
.tabbar-fab .fab {
  width: 44px; height: 44px; margin-top: -14px;
  background: var(--color-primary); color: #fff;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-floating);
  transition: transform 180ms ease, background 180ms ease;
}
.tabbar-fab .fab:hover { background: var(--color-primary-hover); transform: translateY(-2px); }

/* ---------- 14. Sticky action bar (mobile) ---------- */
.actionbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-sticky);
  min-height: calc(64px + env(safe-area-inset-bottom));
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-sticky);
  display: flex; align-items: center; gap: 12px;
}

/* ---------- 15. Frosted lock overlay (核心) ---------- */
.lockable { position: relative; }
.lock-mask {
  position: absolute; inset: 0;
  z-index: var(--z-overlay);
  border-radius: inherit;
  overflow: hidden;
  background: var(--gradient-lock);
  backdrop-filter: blur(3px) saturate(1.05);
  -webkit-backdrop-filter: blur(3px) saturate(1.05);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px;
}
.lock-frost { background: rgba(42,38,34,0.06); }
.blurred { filter: blur(6px); user-select: none; pointer-events: none; }
.lock-card {
  text-align: center;
  max-width: 340px; width: 100%;
  background: var(--lock-chip-bg);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  box-shadow: var(--shadow-floating);
}
.lock-icon {
  width: 40px; height: 40px; margin: 0 auto 10px;
  border-radius: var(--radius-full);
  background: var(--color-primary-50); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.lock-chip {
  position: absolute; z-index: calc(var(--z-overlay) + 1);
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 11px;
  background: var(--lock-chip-bg);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; color: var(--lock-chip-fg);
  border: 1px solid rgba(255,255,255,0.6);
  box-shadow: var(--shadow-raised);
}

/* ---------- 16. Divider / misc ---------- */
.divider { height: 1px; background: var(--color-border); border: none; }
.pill-note {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- 17. Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%) translateY(12px);
  z-index: var(--z-toast);
  background: var(--color-text-primary); color: #fff;
  font-size: 14px; padding: 12px 18px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-floating);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease, transform 220ms cubic-bezier(0.32,0.72,0,1);
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 18. Footer (desktop) ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  margin-top: 64px; padding: 40px 0;
  color: var(--color-text-secondary); font-size: 13px;
}
.footer-grid { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
/* 【v12】footer 精简为一排（王总定案：社区已取消，仅留 联系/关于/协议/隐私/备案） */
.footer-line { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; align-items: center; font-size: 13px; }
.footer-line a { color: var(--color-text-secondary); transition: color 180ms ease; }
.footer-line a:hover { color: var(--color-primary); }
.footer-line span { color: var(--color-text-tertiary); }
/* 【v12】topbar 账户设置齿轮入口 */
.topbar-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text-secondary); border-radius: 50%; transition: color 180ms ease, background 180ms ease; }
.topbar-icon:hover { color: var(--color-primary); background: var(--color-primary-50); }
.footer-col h5 { font-size: 13px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 12px; }
.footer-col a { display: block; padding: 4px 0; color: var(--color-text-secondary); transition: color 180ms ease; }
.footer-col a:hover { color: var(--color-primary); }

/* mobile bottom spacing so tabbar/actionbar doesn't cover content */
.has-tabbar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { .has-tabbar { padding-bottom: 0; } }
/* 【v56 王总第4条】底栏铺到全部页面后，自带底部主操作条的页面（item.html 详情 CTA /
   subscribe.html 收银台）会出现「固定操作条 + 固定底栏」叠罗汉。
   处理：tabbar.js 检测到 .actionbar 就给 body 加 .has-actionbar，
   ① 操作条整体上抬一条底栏高度并去掉自身重复的安全区内边距；
   ② 内容区再多留一条操作条的高度，保证最后一屏内容不被遮。
   （这样就不必再为「避免叠罗汉」而豁免收银台页 —— v49 的老写法。） */
@media (max-width: 1023.98px) {
  body.has-tabbar.has-actionbar { padding-bottom: calc(140px + env(safe-area-inset-bottom)); }
  body.has-tabbar.has-actionbar .actionbar {
    bottom: calc(56px + env(safe-area-inset-bottom));
    padding-bottom: 10px;
  }
}

/* generic responsive grid for item wall */
/* 令牌 7.1：Mobile 单列/2 列 → Tablet 2 列 → Desktop(1024) 3 列 → 超宽(1280) 4 列 */
/* 断点严格对齐设计令牌：<768 2列 · ≥768 2列(平板) · ≥1024 3列 · ≥1280 4列 */
.wall-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 768px) { .wall-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .wall-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .wall-grid { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   v2 增量令牌（信用体系 / 诚意值 / 分层认证）
   原则：信用低 ≠ 危险 → 差档用深暖灰，全程禁用红色标识信用/未中签/婉拒
   ============================================================ */
:root {
  /* 信用等级四档（★ 禁用红色） */
  --credit-excellent: #3E8E5A;   /* 优 90–100 暖绿 */
  --credit-good:      #5F9E7A;   /* 良 75–89 青绿 */
  --credit-fair:      #D9A441;   /* 中 60–74 暖琥珀 */
  --credit-poor:      #8A8578;   /* 差 <60 深暖灰（非红） */

  --credit-excellent-bg: #EBF4EE;
  --credit-good-bg:      #EDF5F0;
  --credit-fair-bg:      #FBF2DC;
  --credit-poor-bg:      #EFEDE8;

  /* 诚意值（暖橙专属色系，与信用分徽章区分） */
  --sincerity:        #E8955A;
  --sincerity-strong: #CE7A3A;
  --sincerity-bg:     #FBEFE3;
  --sincerity-border: #F0D9C2;

  /* 未中签状态（中性暖灰，禁用红） */
  --notselected-fg:      #6E6A60;
  --notselected-bg:      #F2EFE9;
  --notselected-border:  #E3DCD1;

  /* 实名徽章变体 */
  --verify-done-bg:   #E6F5EC;
  --verify-done-fg:   #2E9E6B;
  --verify-none-bg:   #F2EFE9;
  --verify-none-fg:   #8A8578;
}

/* ---------- 20. 诚意值徽章（v7：纯文字，去椭圆底与边框） ---------- */
.badge-sincerity {
  display: inline-flex; align-items: center; gap: 5px;
  height: auto; padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
  font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
  white-space: nowrap;
}
.badge-sincerity svg { color: var(--color-text-tertiary); flex-shrink: 0; }
.badge-sincerity .n { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- 21. 未中签状态标签（中性暖灰 · 非失败视觉） ---------- */
.tag-notselected {
  display: inline-flex; align-items: center; gap: 5px;
  height: auto; padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
  font-size: 12px; font-weight: 500;
  white-space: nowrap;
}
/* 在状态 status 组件体系内追加（不改动既有 status-* 定义） */
.status-notselected { background: var(--notselected-bg); color: var(--notselected-fg); }

/* ---------- 22. 信用等级四档徽章（替代旧 badge-credit 语义分档） ---------- */
.badge-credit-lv { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.badge-credit-lv.lv-excellent,
.badge-credit-lv.lv-good,
.badge-credit-lv.lv-fair,
.badge-credit-lv.lv-poor { background: transparent; color: var(--color-text-secondary); }

/* ---------- 23. 信用分环形仪表 / 进度条 ---------- */
.credit-gauge { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.credit-gauge svg { transform: rotate(-90deg); }
.credit-gauge .track { stroke: var(--color-surface-alt); }
.credit-gauge .arc { stroke: var(--credit-excellent); stroke-linecap: round; transition: stroke-dashoffset 600ms cubic-bezier(0.32,0.72,0,1); }
.credit-gauge .gauge-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; line-height: 1;
}
.credit-gauge .gv { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-text-primary); }
.credit-gauge .gl { font-size: 12px; color: var(--color-text-secondary); margin-top: 6px; }

/* 线性进度条（分值构成 / 复活进度共用） */
.bar { height: 8px; border-radius: var(--radius-pill); background: var(--color-surface-alt); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--color-primary); transition: width 500ms cubic-bezier(0.32,0.72,0,1); }
.bar-lg { height: 10px; }
.bar > i.is-sincerity { background: var(--sincerity); }

/* ---------- 24. 实名徽章变体（已认证 / 未认证） ---------- */
.badge-verify-done {
  display: inline-flex; align-items: center; gap: 5px;
  height: auto; padding: 0; border-radius: 0;
  background: transparent; color: var(--color-text-secondary);
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.badge-verify-done svg { color: var(--color-primary); }
.badge-verify-none {
  display: inline-flex; align-items: center; gap: 5px;
  height: auto; padding: 0; border-radius: 0;
  background: transparent; color: var(--color-text-secondary);
  font-size: 12px; font-weight: 500; white-space: nowrap;
}

/* ---------- 25. 24h 确认倒计时提示条（中性表达，非恐吓） ---------- */
.countdown-strip {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--color-warning-bg);
  border: 1px solid #F0DDB6;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}
.countdown-strip .ic { color: var(--color-warning); flex-shrink: 0; margin-top: 1px; }
.countdown-strip .body { flex: 1; min-width: 0; }
.countdown-strip .tt { font-size: 14px; font-weight: 600; color: #7A5A12; }
.countdown-strip .ss { font-size: 13px; color: #8A6A3A; margin-top: 2px; line-height: 1.6; }
.countdown-strip .cd {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 700; color: #7A5A12;
}
/* 评审演示说明小字：标明该提示条的视角与触发条件，避免误读为线上恐吓倒计时 */
.countdown-strip .demo-note { font-size: 12px; font-weight: 400; color: #8A6A3A; }

/* ---------- 26. 未中签状态展示块 ---------- */
.notselected-panel {
  background: var(--notselected-bg);
  border: 1px solid var(--notselected-border);
  border-radius: var(--radius-lg);
  padding: 18px;
}
.notselected-panel .ns-head { display: flex; align-items: center; gap: 10px; }
.notselected-panel .ns-ic {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--notselected-fg);
  display: flex; align-items: center; justify-content: center;
}
.notselected-panel .ns-title { font-size: 16px; font-weight: 600; color: var(--color-text-primary); }
.notselected-panel .ns-sub { font-size: 13px; color: var(--color-text-secondary); margin-top: 2px; }

/* ---------- 27. 步骤向导（stepper · verify.html 复用） ---------- */
.stepper { display: flex; align-items: flex-start; gap: 0; }
.stepper .step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.stepper .step .dot {
  width: 34px; height: 34px; border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-tertiary);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  transition: all 220ms ease; z-index: 1;
}
.stepper .step .lbl { font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); transition: color 220ms ease; }
.stepper .step .line { position: absolute; top: 17px; left: 50%; width: 100%; height: 2px; background: var(--color-border); z-index: 0; }
.stepper .step:last-child .line { display: none; }
.stepper .step.is-active .dot { border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-50); }
.stepper .step.is-active .lbl { color: var(--color-primary); }
.stepper .step.is-done .dot { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.stepper .step.is-done .line { background: var(--color-primary); }

/* ---------- 28. 权限门槛说明卡 ---------- */
.tier-list { display: flex; flex-direction: column; gap: 10px; }
.tier-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 12px 14px;
}
.tier-row .t-ic { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--color-primary-50); color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tier-row .t-main { flex: 1; min-width: 0; }
.tier-row .t-k { font-size: 14px; font-weight: 600; }
.tier-row .t-v { font-size: 12px; color: var(--color-text-secondary); margin-top: 1px; }

/* ---------- 29. 信任前置说明（降低授权阻力） ---------- */
.trust-note {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--color-primary-50); border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-md); padding: 12px 14px;
}
.trust-note .ic { color: var(--color-primary); flex-shrink: 0; margin-top: 1px; }
.trust-note .tt { font-size: 13px; font-weight: 600; color: var(--color-primary-active); }
.trust-note .ss { font-size: 12.5px; color: var(--color-text-secondary); margin-top: 2px; line-height: 1.6; }

/* ---------- 30. 隐私说明条（信用扣分明细仅本人可见） ---------- */
.privacy-note {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--color-info-bg); border: 1px solid #CFE0F1;
  border-radius: var(--radius-md); padding: 12px 14px;
}
.privacy-note .ic { color: var(--color-info); flex-shrink: 0; margin-top: 1px; }
.privacy-note .ss { font-size: 12.5px; color: #2E5878; line-height: 1.65; }

/* ---------- 31. 婉拒理由弹层（mock） ---------- */
/* 【v61 王总第8条】通用确认弹窗是「弹窗之上再叠一层」，必须高于普通 .modal-overlay，
   否则会被下层弹窗（同 z-index、DOM 在前）整块遮住看不见。 */
#confirmModal { z-index: calc(var(--z-modal) + 10); }
.modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(42,38,34,0.34);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
}
@media (min-width: 768px) { .modal-overlay { align-items: center; } }
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal-sheet {
  width: 100%; max-width: 460px;
  background: var(--color-surface);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-modal);
  transform: translateY(16px);
  transition: transform 260ms cubic-bezier(0.32,0.72,0,1);
}
@media (min-width: 768px) { .modal-sheet { border-radius: var(--radius-xl); padding: 24px; transform: scale(0.97); } }
.modal-overlay.is-open .modal-sheet { transform: translateY(0); }
@media (min-width: 768px) { .modal-overlay.is-open .modal-sheet { transform: scale(1); } }
.modal-title { font-size: 18px; font-weight: 700; }
/* 【v61 王总第5条】text-wrap:pretty —— 避免中文长段换行时末尾只剩一两个字孤零零占一行
   （王总明令禁止「可」字一个字一行这类排版）。支持的浏览器会自动生效，不支持的保持原样。 */
.modal-sub { font-size: 13px; color: var(--color-text-secondary); margin-top: 4px; line-height: 1.6; text-wrap: pretty; }
.reason-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.reason-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: var(--radius-md);
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  font-size: 14px; color: var(--color-text-primary);
  cursor: pointer; text-align: left; width: 100%;
  transition: border-color 160ms ease, background 160ms ease;
}
.reason-opt:hover { border-color: var(--color-border-strong); }
.reason-opt.is-selected { border-color: var(--color-primary); background: var(--color-primary-50); }
.reason-opt .ro-radio {
  width: 20px; height: 20px; border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border-strong); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; transition: all 160ms ease;
}
.reason-opt.is-selected .ro-radio { border-color: var(--color-primary); border-width: 6px; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions .btn { flex: 1; }

/* 已婉拒卡片上的理由展示 */
.reason-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--notselected-bg); border: 1px solid var(--notselected-border);
  border-radius: var(--radius-md); padding: 10px 12px;
  font-size: 13px; color: var(--notselected-fg);
}
.reason-chip .rc-k { font-weight: 600; }
.reason-chip svg { color: var(--notselected-fg); flex-shrink: 0; }

/* ---------- 32. 无障碍：尊重系统"减弱动态效果"偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   【v49】手机端 H5 精修：点击区下限 + 字号下限
   --------------------------------------------------------------------------
   放在样式表最末，不改上方任何既有规则，只给移动端补「下限兜底」。
   为什么用 min-width / min-height 而不是 width / height：
     按 CSS 规范，min-* 的优先级高于 width / height，且不受选择器权重
     和书写顺序影响。因此即使某个页面在自己的内联 <style> 里写死了
     width:40px / height:34px，这里的下限依然能生效——无需去改 15 个
     页面的内联样式，也无需动用 !important。
   44px 依据：iOS 人机界面指南与 Material Design 一致推荐的最小触控尺寸。
   ========================================================================== */
@media (max-width: 1023px) {
  /* --- 顶栏图标（账户设置 / 返回等）--- */
  /* flex:0 0 auto 同时修掉窄屏下图标被挤压变形的问题（实测曾被压到 18px 宽）*/
  .topbar-icon { min-width: 44px; min-height: 44px; flex: 0 0 auto; }

  /* --- 顶栏防挤压：品牌字不许折行（定位器规则已随 v54 删元素移除，见本文件顶部说明）--- */
  .topbar-inner { gap: 10px; }
  .brand { min-width: 0; }
  .brand-cn { font-size: 19px; }
  .topbar-right { gap: 10px; min-width: 0; }
  #authSlot { white-space: nowrap; }

  /* --- 小号按钮与纯文字按钮 --- */
  .btn-sm, .btn-tertiary, .btn-secondary, .btn-ghost { min-height: 44px; }

  /* --- 纯文字操作按钮（设置行里的「修改昵称 / 更换 / 查看」等）--- */
  .linkbtn { min-height: 44px; }

  /* --- 客服快捷操作按钮（已解决 / 转人工）--- */
  .bubble .kb-acts button { min-height: 44px; display: inline-flex; align-items: center; }

  /* --- 客服页头部「转人工 / 邮件反馈」--- */
  .human-link button { min-height: 44px; display: inline-flex; align-items: center; }

  /* --- 分类筛选 chip --- */
  .chip { min-height: 44px; }

  /* --- 账户页头像选择 --- */
  .avatar-opt { min-width: 44px; min-height: 44px; }

  /* --- 社区互动（点赞 / 评论）--- */
  .post-act { min-height: 44px; }

  /* --- 会话返回 / 弹窗关闭 --- */
  /* flex:0 0 auto 顺带修掉 flex 布局把它们压扁 1px 的问题（实测 44 → 43）*/
  #chatBack, #pmClose, .chat-back, .modal-close, .close-x {
    min-width: 44px; min-height: 44px; flex: 0 0 auto;
  }
}

/* --- 手机端字号下限：气泡时间戳 10.5px 太小，抬到 11px --- */
/* 源头已在 messages.html / support.html 的内联样式里改掉；
   这里用更高权重再兜一层，防止后续页面又写回 10.5px。 */
@media (max-width: 1023px) {
  .chat-msgs .bubble time { font-size: 11px; }
}

/* ==========================================================================
   【v53 王总第3条】H5 排版：窄屏顶栏不再被撑破
   --------------------------------------------------------------------------
   实测（320–414px）顶栏「品牌 + 定位器 + 登录/注册」总宽超出容器，
   把 layout viewport 撑宽 25–69px：页面出现横向滚动条，且 position:fixed
   的底部 Tab 栏跟着被撑宽（这就是「H5 排版有问题」最硬的一处）。
   根因：v49 为防挤压给这些元素加了 flex:0 0 auto / white-space:nowrap，
   它们因此完全不收缩 → 一旦总宽超容器就直接溢出。
   处理：≤480px 只做「减负」，不减信息 —— 定位器去掉首尾图标与箭头
   （「深圳市」三字保留），品牌字略缩，间距收紧。实测 320px 下：
   品牌 94 + 图标 44 + 定位 43 + 登录 65 + 间距 30 = 276 < 288（可用宽）。
   ========================================================================== */
@media (max-width: 480px) {
  /* 左右内边距 16→12：只作用于顶栏（.container 仍为 16），
     换来 8px 余量，避免「齿轮 44 + 定位器 + 页面动作 + 登录/注册」在 320px 下撑破 */
  .topbar-inner { gap: 6px; padding-left: 12px; padding-right: 12px; }
  /* 【v56 王总第3条】顶栏新增「在线客服」图标后，右侧从 3 项变 4 项，
     publish.html（多一个「取消」）在 320px 下把「登录 / 注册」挤成「登录 / …」。
     按 v49 的「只减负、不减信息」原则收紧间距与品牌字，图标保持 44px 触控下限不变。 */
  .topbar-right { gap: 4px; min-width: 0; }
  .brand { gap: 5px; }
  .brand-cn { font-size: 16px; white-space: nowrap; }

  /* 顶栏最后一道保险：登录后「昵称 + 退出」长度不可控（昵称 2–12 字，
     最长时比「登录 / 注册」宽一倍以上）。给 authSlot 允许收缩 + 省略号，
     空间不足时截断昵称，而不是把整页撑出横向滚动条。
     顶部其余项（齿轮 / 客服 / 页面动作）均为 flex:0 0 auto，不会被压缩。 */
  #authSlot { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; }
  #authSlot > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ≤360px 再让一步：品牌字 15px，间距 3px（仍未登录态下「登录 / 注册」完整可见） */
  @media (max-width: 360px) {
    .topbar-inner { gap: 5px; }
    .topbar-right { gap: 3px; }
    .brand-cn { font-size: 15px; }
  }
}

/* ============================================================
   【v65 王总第1/2条】全站根治「一字一行」排版缺陷
   ------------------------------------------------------------
   王总原话：「怎么又出现一字一行了呢，你这毛病屡教不改啊」
              「这个也是一字一行，全站检查，禁止再出现同样错误。包括手机端 H5」

   【为什么之前修不彻底】
     v61 只给 `.modal-sub` 单独加了 text-wrap:pretty，属**点状修复**——
     换个容器（.sys-tip / 信用页空态 / 各种提示条）就又复发。
     这次改为**在唯一的共享样式表里做全局兜底**，一次覆盖全部 15 个页面
     （含手机 H5，因为它们引的是同一个 styles.css）。

   【原理】
     中文没有词边界，默认 text-wrap:wrap 会在容器末尾留下
     「一两个字孤零零占一行」的孤字（orphan）。CSS Text 4 的
     text-wrap:pretty 会让浏览器**主动调整断点**，避免这种孤字。
     另配 text-wrap:balance 用于短段落（≤6 行）让各行长度更均匀。

   【作用范围】
     只作用于「承载连续中文段落」的文本元素；不动表格单元格、
     按钮、图标、徽标等短文本（它们本来就不会换行出问题）。
     特异性压到最低但仍高于浏览器默认 user-agent 样式。
   ============================================================ */

/* ① 兜底：对所有块级文本容器启用 pretty —— 消除行尾孤字 */
p, dd, dt, li, blockquote, figcaption,
.hint, .hintline, .sub, .desc, .note, .note-line,
.trial-desc, .trial-status, .trial-campaign, .trial-note,
.tip, .tips, .sys-tip, .empty, .empty-desc,
.notice, .warn, .alert, .msg, .info, .explain, .remind,
.item-desc, .item-title, .card-desc, .modal-sub, .modal-desc,
.del-note, .setting-desc, .help, .foot-note, .txt-sub, .txt {
  text-wrap: pretty;
}

/* ② 短段落用 balance：让每行长度更均匀，观感更整齐 */
.note, .hint, .hintline, .sub, .trial-note, .foot-note, .remind, .explain {
  text-wrap: balance;
}

/* ③ 显式禁止「孤字」的三条硬约束（对 text-wrap 不生效的老浏览器也有效）
     · hanging-punctuation 让标点悬挂，避免行首出现标点；
     · word-break: normal 保证只在 CJK 边界断，不把数字/英文拆碎；
     · overflow-wrap: anywhere 只在必要处断，避免撑破布局。 */
.sys-tip, .trial-desc, .trial-status, .trial-campaign,
.item-desc, .card-desc, .modal-sub, .modal-desc, .del-note,
.note, .hint, .hintline, .sub, .explain, .remind, .help, .foot-note {
  word-break: normal;
  overflow-wrap: break-word;
  line-break: strict;      /* 严格避头尾：禁则处理更严，不让「。」「，」出现在行首 */
  hanging-punctuation: allow-end;
}

/* ============================================================
   【v65 补充】针对「inline 片段被整体挤到下一行」的兜底
   ------------------------------------------------------------
   上面的 text-wrap:pretty 只对**元素自身的文本**生效。
   而下面这类写法：<p>…文字<b>重点文字</b>，继续…</p>
   浏览器是按「inline 片段」参与断行的，当 <b> 片段恰好被挤到行尾时，
   整个片段会换到下一行 —— 即使片段只有 1 个字，text-wrap:pretty 也管不到
   （它只重排本元素内部的断点，不移动 inline 片段）。
   对策：允许 inline 片段内部也可断行（word-break 交给 pretty 决定），
   并给 .t-small / .t-secondary 这类「小字说明段落」显式开启 pretty。
   ============================================================ */
p, li, dd, .t-small, .t-secondary, .t-tertiary, .t-mono {
  text-wrap: pretty;
}
/* inline 强调片段内部允许按 CJK 边界断行，避免整段被推到下一行只剩一两个字 */
p b, p strong, p span, li b, li strong, li span,
dd b, dd strong, dd span, .t-small b, .t-small strong,
.t-secondary b, .t-secondary strong, .t-tertiary b, .t-tertiary strong {
  word-break: normal;
  overflow-wrap: break-word;
}