/* ============================================================
   这有闲 · 共享样式表
   设计系统：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); }

.city-picker {
  display: inline-flex; align-items: center; gap: 6px;
  height: auto; padding: 6px 2px;
  background: transparent; border: none;
  border-radius: 0;
  font-size: 14px; font-weight: 500; color: var(--color-text-primary);
  transition: color 180ms ease;
}
.city-picker:hover { color: var(--color-primary); background: transparent; }
.city-picker svg { color: var(--color-primary); }
.city-picker .chev { color: var(--color-text-tertiary); }

.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; }

/* ---------- 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); }

/* 【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; } }

/* 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） ---------- */
.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; }
.modal-sub { font-size: 13px; color: var(--color-text-secondary); margin-top: 4px; line-height: 1.6; }
.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;
  }
}