/* ZH俱乐部 · styles.css
 * 依据 docs/design-spec.md（令牌 §2 / 字体 §3 / 间距 §4 / 组件 §5 / 断点 §6）
 * 冻结项：680px 唯一断点（1024px 仅网格列数参考，非断点）；押金双值分行；R6 待充值琥珀徽标。
 * §15 起：品类静态页（c/*）类名兼容层 —— generate-category-pages 产物引用同一文件。
 */
/* ============================================================
   1. 设计令牌（design-spec §2.1 全量）
   ============================================================ */
:root {
  /* 背景层 */
  --bg-base:      #0B1210;
  --bg-panel:     #121C18;
  --bg-elevated:  #1A2622;
  --bg-inset:     #0E1614;
  --border-subtle:#243530;
  --border-strong:#33463F;

  /* 主色 */
  --primary:      #C4F021;
  --primary-hi:   #D8FF3E;
  --primary-lo:   #92BC14;
  --primary-dim:  rgba(196, 240, 33, 0.16);
  --primary-ring: rgba(196, 240, 33, 0.35);

  /* 文字 */
  --text-primary:   #D6E0DA;
  --text-secondary: #8A9A92;
  --text-tertiary:  #5C6B64;
  --text-on-primary:#0B1210;
  --text-inverse:   #F2F7F4;

  /* 语义色 */
  --danger:      #F04338;
  --danger-bg:   rgba(240, 67, 56, 0.14);
  --danger-text: #FF8A80;
  --warning:     #F5A623;
  --warning-bg:  rgba(245, 166, 35, 0.14);
  --warning-text:#FFC46B;
  --info:        #4A9EFF;
  --info-bg:     rgba(74, 158, 255, 0.14);
  --info-text:   #8FC2FF;
  --success:     #3DDC84;
  --success-bg:  rgba(61, 220, 132, 0.14);
  --success-text:#7AE8AD;

  /* 圆角 */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* 字体 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC",
               "Segoe UI", Roboto, sans-serif;
  --font-mono: "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* 字号阶梯 */
  --fs-h1:   28px;  --lh-h1: 1.25;  --fw-h1: 700;
  --fs-h2:   22px;  --lh-h2: 1.30;  --fw-h2: 700;
  --fs-h3:   18px;  --lh-h3: 1.35;  --fw-h3: 600;
  --fs-h4:   16px;  --lh-h4: 1.40;  --fw-h4: 600;
  --fs-body: 15px;  --lh-body: 1.70; --fw-body: 400;
  --fs-sm:   13px;  --lh-sm: 1.60;  --fw-sm: 400;
  --fs-xs:   11px;  --lh-xs: 1.50;  --fw-xs: 500;
  --fs-btn:  15px;  --lh-btn: 1.00; --fw-btn: 600;

  /* 间距（8pt 基数） */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;
  --section-gap: 48px;
  --content-max: 1120px;
  --gutter: 16px;
  --page-pad: 16px;

  /* 焦点 / 阴影 / 动效 */
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 5px var(--primary-ring);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.28);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ============================================================
   2. 基础重置
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-sans);
  min-height: 100vh;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--info-text); text-decoration: none; }
a:hover { color: var(--primary); }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: inherit;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--primary); color: var(--text-on-primary);
  padding: var(--space-2) var(--space-4); z-index: 300;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* 金额强调（mono 18px/700 primary，¥ 12px） */
.money {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: var(--fw-h1);
  color: var(--primary);
  letter-spacing: 0;
}
.money .cur { font-size: 12px; margin-right: 2px; vertical-align: 1px; }
.money-lg { font-size: var(--fs-h1); }
.money-num { font-family: var(--font-mono); }
.mono { font-family: var(--font-mono); }

/* ============================================================
   3. 布局容器
   ============================================================ */
.view_root {
  min-height: 60vh;
  padding: var(--space-5) var(--page-pad) calc(72px + env(safe-area-inset-bottom));
  max-width: var(--content-max);
  margin: 0 auto;
  outline: none;
}
.section { margin-top: var(--section-gap); }
.section:first-child { margin-top: 0; }
.section_head { margin-bottom: var(--space-4); }
.section_head p { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: var(--space-2); }
.page-title { margin-bottom: var(--space-5); }

/* ============================================================
   4. 导航 view_nav（§5.6）
   ============================================================ */
.view_nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(26, 38, 34, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav_inner {
  max-width: var(--content-max);
  margin: 0 auto;
  height: 56px;
  padding: 0 var(--page-pad);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.nav_brand {
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--text-primary); font-weight: 700; font-size: var(--fs-h4);
  flex-shrink: 0;
}
.nav_brand:hover { color: var(--primary); }
.nav_logo { border-radius: var(--radius-sm); }
.nav_burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 44px; height: 44px; padding: 10px; margin-left: auto;
}
.nav_burger_bar {
  display: block; height: 2px; width: 100%;
  background: var(--text-primary); border-radius: 1px;
  transition: transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.nav_groups { display: none; }
.nav_right { display: flex; align-items: center; gap: var(--space-1); }
.nav_iconbtn {
  position: relative;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary); border-radius: var(--radius-sm);
}
.nav_iconbtn:hover { color: var(--text-primary); background: var(--primary-dim); }
.nav_dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger);
}
.nav_account {
  min-height: 36px; padding: 0 var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  color: var(--text-primary); font-size: var(--fs-sm);
  margin-left: var(--space-1);
}
.nav_account:hover { border-color: var(--primary); color: var(--primary); }
.nav_link {
  position: relative;
  padding: 0 var(--space-3); min-height: 44px;
  display: inline-flex; align-items: center;
  font-size: var(--fs-body); color: var(--text-secondary);
}
.nav_link:hover { color: var(--text-primary); }
.nav_link.is-active { color: var(--primary); }
.nav_link.is-active::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 0;
  height: 2px; background: var(--primary);
}
.nav_sep {
  width: 1px; height: 20px; background: var(--border-subtle);
  margin: 0 var(--space-2); flex-shrink: 0;
}

/* 抽屉（移动主导航） */
.drawer_mask {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0, 0, 0, 0.64);
}
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 160;
  width: min(280px, 86vw);
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column;
  padding: 0 0 env(safe-area-inset-bottom);
  animation: drawer-in var(--dur-base) var(--ease);
}
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.drawer_head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.drawer_title { font-weight: 600; }
.drawer_groups { flex: 1; overflow-y: auto; padding: var(--space-2) 0; }
.drawer_groups a {
  display: block; padding: var(--space-3) var(--space-4);
  color: var(--text-primary); min-height: 44px;
}
.drawer_groups a:hover, .drawer_groups a.is-active { background: var(--primary-dim); color: var(--primary); }
.drawer_foot {
  padding: var(--space-4);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.drawer_compliance {
  margin-top: var(--space-3);
  font-size: var(--fs-xs); color: var(--text-tertiary); line-height: var(--lh-xs);
}

/* 底部 4 tab */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  display: flex;
  background: rgba(26, 38, 34, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-subtle);
  padding-bottom: env(safe-area-inset-bottom);
}
.tab {
  flex: 1;
  min-height: 56px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--text-secondary);
  font-size: var(--fs-xs); font-weight: var(--fw-xs); letter-spacing: 0.02em;
  position: relative;
}
.tab svg { width: 22px; height: 22px; }
.tab.is-active { color: var(--primary); }
.tab_dot {
  position: absolute; top: 8px; right: 22%;
  width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
}

/* 页脚 view_footer（§5.7） */
.view_footer {
  background: var(--bg-inset);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-6) var(--page-pad) calc(var(--space-6) + env(safe-area-inset-bottom));
}
.footer_inner { max-width: var(--content-max); margin: 0 auto; }
.footer_links { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-sm); }
.footer_links a { color: var(--text-secondary); min-height: 44px; display: inline-flex; align-items: center; }
.footer_links a:hover { color: var(--primary); }
.footer_compliance {
  margin-top: var(--space-3);
  font-size: var(--fs-xs); color: var(--text-tertiary); line-height: var(--lh-xs);
}
.sep { color: var(--border-strong); }

/* ============================================================
   5. 按钮（§5.2）
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 12px 24px;
  font: var(--fw-btn) var(--fs-btn)/var(--lh-btn) var(--font-sans);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  text-align: center;
}
.btn-primary {
  background: var(--primary); color: var(--text-on-primary);
  min-width: 96px;
}
.btn-primary:hover { background: var(--primary-hi); }
.btn-primary:active { background: var(--primary-lo); transform: translateY(1px); }
.btn-primary:disabled {
  background: var(--primary-lo); opacity: 0.4;
  color: var(--text-tertiary); transform: none;
}
.btn-secondary {
  background: transparent; color: var(--primary);
  border: 1px solid var(--primary-lo); min-width: 96px;
}
.btn-secondary:hover { background: var(--primary-dim); border-color: var(--primary); }
.btn-secondary:active { background: rgba(196, 240, 33, 0.22); transform: translateY(1px); }
.btn-secondary:disabled { color: var(--text-tertiary); border-color: var(--text-tertiary); opacity: 0.6; background: transparent; transform: none; }
.btn-text {
  background: none; color: var(--info-text);
  padding: 8px 12px; min-height: 44px; min-width: 0;
}
.btn-text:hover { color: var(--primary); text-decoration: underline; }
.btn-text:active { opacity: 0.7; }
.btn-text:disabled { color: var(--text-tertiary); text-decoration: none; }
.btn-text.is-weak { color: var(--text-secondary); }
.btn-danger {
  background: var(--danger); color: #FFFFFF; min-width: 96px;
}
.btn-danger:hover { background: #FF5A50; }
.btn-danger:active { background: #C9342B; transform: translateY(1px); }
.btn-danger:disabled { opacity: 0.4; transform: none; }
.btn-pill {
  border-radius: var(--radius-pill);
  padding: 8px 16px; min-height: 36px; min-width: 0;
  color: var(--primary); border: 1px solid var(--primary-lo);
}
.btn-pill:hover { background: var(--primary-dim); border-color: var(--primary); }
.btn-pill.is-active { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 8px 14px; font-size: var(--fs-sm); min-width: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.btn-row .btn { flex: 0 1 auto; }

/* ============================================================
   6. 输入框与表单（§5.3）
   ============================================================ */
.input, .textarea, .select {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font: var(--fw-body) var(--fs-body)/var(--lh-body) var(--font-sans);
  padding: 0 12px;
  height: 44px;
}
.input:hover, .textarea:hover, .select:hover { border-color: #43584F; }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  border-color: var(--primary);
  box-shadow: var(--focus-ring);
}
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.input:disabled, .textarea:disabled, .select:disabled {
  background: var(--bg-inset); color: var(--text-tertiary); cursor: not-allowed;
}
.input.is-error, .textarea.is-error { border-color: var(--danger); }
.textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; }
.input-mono { font-family: var(--font-mono); }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
                    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 18px) 20px, calc(100% - 12px) 20px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.field { margin-bottom: var(--space-5); }
.field_label {
  display: block;
  font-size: var(--fs-sm); line-height: var(--lh-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.field_label .req { color: var(--danger); margin-left: 2px; }
.field_help {
  margin-top: var(--space-2);
  font-size: var(--fs-sm); color: var(--text-secondary);
  line-height: var(--lh-sm);
}
.field_error {
  margin-top: var(--space-2);
  font-size: var(--fs-sm); color: var(--danger-text);
  line-height: var(--lh-sm);
}
.field_error::before { content: "⚠ "; }
.form_compliance {
  margin-top: var(--space-4);
  font-size: var(--fs-xs); color: var(--text-secondary);
  line-height: var(--lh-xs);
}
.checkbox-row {
  display: flex; align-items: flex-start; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) 0;
  font-size: var(--fs-sm);
}
.checkbox-row input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--primary); flex-shrink: 0; }
.radio-row {
  display: flex; align-items: flex-start; gap: var(--space-2);
  min-height: 44px; padding: var(--space-3);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  cursor: pointer;
}
.radio-row input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--primary); flex-shrink: 0; }
.radio-row.is-on { border-color: var(--primary); background: var(--primary-dim); }
.radio-row .rr-title { font-weight: 600; }
.radio-row .rr-desc { font-size: var(--fs-sm); color: var(--text-secondary); }

/* 数量步进 */
.stepper { display: inline-flex; align-items: center; gap: var(--space-2); }
.stepper button {
  width: 44px; height: 44px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-elevated); color: var(--text-primary);
  font-size: var(--fs-h3);
}
.stepper button:hover { border-color: var(--primary); color: var(--primary); }
.stepper button:disabled { color: var(--text-tertiary); border-color: var(--border-subtle); }
.stepper .qty {
  min-width: 44px; text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: 700;
}

/* ============================================================
   7. 卡片（§5.4）
   ============================================================ */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.card.is-clickable { cursor: pointer; }
.card.is-clickable:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.card + .card { margin-top: var(--space-3); }

/* 商品卡 */
.product_card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); }
.product_top { display: flex; gap: var(--space-3); align-items: flex-start; }
.product_icon {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--radius-sm); background: var(--bg-inset);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.product_name { font-size: var(--fs-h4); font-weight: var(--fw-h4); }
.product_price { margin-top: 2px; }
.product_desc {
  font-size: var(--fs-sm); color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.product_actions { display: flex; justify-content: flex-end; margin-top: var(--space-1); }
.badge-corner {
  position: absolute; top: -4px; right: -4px;
  font-size: var(--fs-xs); font-weight: var(--fw-xs);
  padding: 2px 6px; border-radius: var(--radius-xs);
  background: var(--primary); color: var(--text-on-primary);
}

/* 打手卡 */
.worker_card { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.worker_top { display: flex; gap: var(--space-3); align-items: center; }
.avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--bg-inset); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-h3); font-weight: 700; flex-shrink: 0;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 36px; height: 36px; font-size: var(--fs-sm); }
.worker_fields { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--space-2); font-size: var(--fs-sm); }
.worker_fields dt { color: var(--text-secondary); }
.worker_fields dd { margin: 0; color: var(--text-primary); }
.worker_ad_area {
  min-height: 64px; border-radius: var(--radius-sm);
  background: var(--bg-inset); border: 1px dashed var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); font-size: var(--fs-sm);
}

/* 横向 snap 滚动（打手推荐，移动端） */
.hscroll {
  display: flex; gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--space-2);
  -webkit-overflow-scrolling: touch;
}
.hscroll > * {
  flex: 0 0 auto;
  width: min(78vw, 280px);
  scroll-snap-align: start;
}

/* 订单卡 */
.order_card { display: flex; flex-direction: column; gap: var(--space-2); }
.order_head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  flex-wrap: wrap;
}
.order_no { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-secondary); }
.order_badges { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.order_summary { font-size: var(--fs-body); }
.order_moneyrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2);
}
.order_time { font-size: var(--fs-sm); color: var(--text-secondary); }
/* 押金独立行（冻结：押金 ≠ 订单金额，分行分值，禁止合并/换算） */
.order_deposit {
  font-size: var(--fs-sm); color: var(--text-secondary);
  font-family: var(--font-mono);
  border-top: 1px dashed var(--border-subtle);
  padding-top: var(--space-2);
}
.order_deposit .dep-state-warn { color: var(--warning-text); }
.order_deposit .dep-state-ok { color: var(--success-text); }
.order_deposit .dep-state-bad { color: var(--danger-text); }
.order_actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }

/* ============================================================
   8. 弹窗 / 底部抽屉（§5.5）
   ============================================================ */
.modal_mask {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, 0.64);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
.sheet {
  width: 100%;
  max-height: 88vh;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-modal);
  display: flex; flex-direction: column;
  padding: 0;
  animation: sheet-in var(--dur-base) var(--ease);
}
@keyframes sheet-in { from { transform: translateY(24px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
.sheet_handle {
  width: 36px; height: 4px; border-radius: var(--radius-pill);
  background: var(--border-strong);
  margin: var(--space-2) auto 0;
  flex-shrink: 0;
}
.modal_head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.modal_title { font-size: var(--fs-h3); font-weight: 700; }
.modal_close {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--text-secondary); border-radius: var(--radius-sm);
}
.modal_close:hover { color: var(--text-primary); background: var(--primary-dim); }
.modal_body {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
}
.modal_foot {
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: var(--space-2);
  flex-shrink: 0;
}
.modal_foot .btn { width: 100%; }
.modal_note {
  margin-top: var(--space-3);
  font-size: var(--fs-xs); color: var(--text-secondary); line-height: var(--lh-xs);
}

/* 确认框（抢单确认等） */
.confirm_row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-2) 0;
}
.confirm_row .lbl { color: var(--text-secondary); font-size: var(--fs-sm); }
.confirm_divider { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-2) 0; }

/* ============================================================
   9. 徽标 / 标签（§5.9 + §2.3 映射）
   ============================================================ */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; min-height: 20px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-xs); letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-paid     { background: var(--info-bg); color: var(--info-text); border-color: rgba(74,158,255,0.35); }
.badge-accepted, .badge-in_service { background: var(--primary-dim); color: var(--primary); border-color: rgba(196,240,33,0.35); }
.badge-pending_review, .badge-pending, .badge-need_recharge, .badge-missing_evidence, .badge-refunding {
  background: var(--warning-bg); color: var(--warning-text); border-color: rgba(245,166,35,0.35);
}
.badge-completed, .badge-approved { background: var(--success-bg); color: var(--success-text); border-color: rgba(61,220,132,0.35); }
.badge-cancelled, .badge-rejected, .badge-none {
  background: rgba(138,154,146,0.12); color: var(--text-secondary); border-color: var(--border-subtle);
}
.badge-reject_badge { background: var(--danger-bg); color: var(--danger-text); border-color: rgba(240,67,56,0.35); }
.badge-hot { background: var(--primary); color: var(--text-on-primary); border-color: transparent; border-radius: var(--radius-xs); }
.badge-ad  { background: rgba(138,154,146,0.16); color: var(--text-secondary); border-color: var(--border-subtle); }
.badge-mark { border-radius: var(--radius-xs); }

/* 筛选 chips */
.chips {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* ============================================================
   10. 空状态（§5.10）
   ============================================================ */
.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.empty-state svg { width: 120px; height: 90px; opacity: 0.9; }
.empty-state .es-text { color: var(--text-primary); font-size: var(--fs-body); }
.empty-state .es-sub { color: var(--text-secondary); font-size: var(--fs-sm); }

/* ============================================================
   11. Toast / Banner（§5.11）
   ============================================================ */
.toast_root {
  position: fixed; top: 72px; left: 50%; transform: translateX(-50%);
  z-index: 400;
  display: flex; flex-direction: column; gap: var(--space-2);
  width: min(480px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: var(--fs-body);
  box-shadow: var(--shadow-modal);
  display: flex; align-items: flex-start; gap: var(--space-2);
  animation: toast-in var(--dur-base) var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.toast.is-success { border-left-color: var(--success); }
.toast.is-error   { border-left-color: var(--danger); }
.toast.is-warning { border-left-color: var(--warning); }
.toast.is-info    { border-left-color: var(--info); }
.toast .toast-icon { flex-shrink: 0; width: 16px; text-align: center; }
.toast .toast-close { margin-left: auto; color: var(--text-secondary); padding: 0 var(--space-1); min-height: 24px; }

.banner {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: 10px 16px;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border-subtle);
}
.banner-warning { background: var(--warning-bg); color: var(--warning-text); }
.banner-info    { background: var(--info-bg); color: var(--info-text); }
.banner .banner-action { margin-left: auto; flex-shrink: 0; }
.banner-inner { max-width: var(--content-max); margin: 0 auto; width: 100%; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* 版本门全屏遮罩 */
.force-mask {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0, 0, 0, 0.88);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
}
.force-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  width: min(420px, 100%);
  text-align: center;
  box-shadow: var(--shadow-modal);
}

/* 维护横幅置顶条 */
.maint-bar {
  background: var(--warning-bg); color: var(--warning-text);
  padding: 10px 16px; font-size: var(--fs-sm);
  text-align: center;
}

/* ============================================================
   12. 表格（§5.8 + .table-scroll 顶部滚动条）
   ============================================================ */
.table-wrap { margin-top: var(--space-3); }
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  /* 顶部同步滚动条：rotateX 翻转技巧 */
  transform: rotateX(180deg);
}
.table-scroll > table { transform: rotateX(180deg); }
.table-scroll::-webkit-scrollbar { height: 6px; }
.table-scroll::-webkit-scrollbar-track { background: var(--bg-inset); border-radius: var(--radius-pill); }
.table-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--primary-lo); }
.table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th {
  background: var(--bg-inset);
  color: var(--text-secondary);
  font-size: var(--fs-xs); font-weight: var(--fw-xs);
  height: 40px; padding: 12px 16px;
  text-align: left; white-space: nowrap;
  position: sticky; top: 0;
}
.table td {
  padding: 12px 16px; min-height: 48px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-panel);
  white-space: nowrap;
}
.table tbody tr:nth-child(even) td { background: var(--bg-inset); }
.table tbody tr:hover td { background: var(--primary-dim); }
.table .num { font-family: var(--font-mono); text-align: right; }
.table .cell-sticky {
  position: sticky; left: 0;
  border-right: 1px solid var(--border-subtle);
}
.table tbody tr { cursor: pointer; }

/* ============================================================
   13. 首屏 / 品类页区块
   ============================================================ */
.hero {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-4);
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(196,240,33,0.08), transparent 60%),
    linear-gradient(160deg, var(--bg-panel), var(--bg-inset));
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: var(--primary); }
.hero_sub {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--fs-body); line-height: var(--lh-body);
  max-width: 36em;
}
.hero_cta { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.trust-bar {
  margin-top: var(--space-5);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2);
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.trust-bar span, .trust-bar li { display: flex; align-items: center; gap: var(--space-1); }
.trust-bar .tb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary-lo); flex-shrink: 0;
}

/* 品类入口卡 */
.cat-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.cat-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-primary);
}
.cat-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); color: var(--text-primary); }
.cat-icon {
  width: 48px; height: 48px; flex-shrink: 0;
  border-radius: var(--radius-sm); background: var(--bg-inset);
  display: flex; align-items: center; justify-content: center;
}
.cat-icon svg { width: 28px; height: 28px; stroke: var(--primary-lo); }
.cat-name { font-size: var(--fs-h4); font-weight: var(--fw-h4); }
.cat-desc { font-size: var(--fs-sm); color: var(--text-secondary); }

/* 产品网格 */
.product-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }

/* 步骤条（SPA 视图用计数器；静态品类页用 .step-no，见 §15） */
.steps {
  display: flex; flex-direction: column; gap: var(--space-2);
  counter-reset: step;
}
.steps li {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-2) 0;
  color: var(--text-primary);
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary-dim); color: var(--primary);
  font-size: var(--fs-xs); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transform: translateY(3px);
}
.steps li:has(.step-no)::before { content: none; }
.points-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

/* 结算明细（I3 与 I5 分行，禁止合并） */
.settle-list { margin-top: var(--space-3); border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); }
.settle-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-1) 0;
  font-size: var(--fs-sm);
}
.settle-line .lbl { color: var(--text-secondary); }
.settle-line .val { font-family: var(--font-mono); color: var(--text-primary); }
.settle-block-title {
  margin-top: var(--space-3);
  font-size: var(--fs-sm); color: var(--text-secondary);
  font-weight: 600;
}

/* 时间线 */
.timeline { margin: var(--space-3) 0; }
.timeline li {
  position: relative;
  padding: 0 0 var(--space-4) var(--space-5);
  border-left: 2px solid var(--border-subtle);
  margin-left: 6px;
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--border-strong);
}
.timeline li.is-done::before { background: var(--primary); }
.timeline li.is-done { border-left-color: var(--primary-lo); }
.tl-title { font-size: var(--fs-body); }
.tl-time { font-size: var(--fs-sm); color: var(--text-secondary); }

/* 凭证图 */
.evidence-grid { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.evidence-grid img, .evidence-thumb {
  width: 88px; height: 88px; object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  background: var(--bg-inset);
}

/* 充值四步 */
.recharge-steps { counter-reset: rstep; margin: var(--space-3) 0; }
.recharge-steps li {
  counter-increment: rstep;
  display: flex; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px dashed var(--border-subtle);
}
.recharge-steps li:last-child { border-bottom: 0; }
.recharge-steps li::before {
  content: counter(rstep);
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary); color: var(--text-on-primary);
  font-size: var(--fs-xs); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.amber-note {
  background: var(--warning-bg); color: var(--warning-text);
  border: 1px solid rgba(245,166,35,0.35);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
  margin: var(--space-3) 0;
}
.info-note {
  background: var(--info-bg); color: var(--info-text);
  border: 1px solid rgba(74,158,255,0.35);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
  margin: var(--space-3) 0;
}

/* 钱包双卡 */
.wallet-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.wallet-card {
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.wallet-card .w-label { font-size: var(--fs-sm); color: var(--text-secondary); }
.wallet-card .w-sub { font-size: var(--fs-xs); color: var(--text-tertiary); margin-left: var(--space-1); }
.wallet-card .money { display: block; margin-top: var(--space-2); }
.wallet-card.is-negative .money { color: var(--danger-text); }

/* 流水列表 */
.ledger-item {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
}
.ledger-item .l-title { color: var(--text-primary); }
.ledger-item .l-meta { color: var(--text-secondary); font-size: var(--fs-xs); margin-top: 2px; }
.ledger-item .l-amt { font-family: var(--font-mono); font-weight: 700; white-space: nowrap; }
.l-amt.is-plus { color: var(--success-text); }
.l-amt.is-minus { color: var(--danger-text); }

/* 标签页 / 详情行 */
.kv-list .kv {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border-subtle);
}
.kv .k { color: var(--text-secondary); flex-shrink: 0; }
.kv .v { text-align: right; word-break: break-all; }

/* 收款码 */
.qr-box {
  width: 200px; height: 200px;
  margin: var(--space-3) auto;
  background: #FFFFFF;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary); font-size: var(--fs-sm);
  overflow: hidden;
}
.qr-box img { width: 100%; height: 100%; object-fit: contain; }

/* 登录 */
.auth-wrap { max-width: 420px; margin: 0 auto; }
.auth-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); }
.auth-tabs .btn-pill { flex: 1; justify-content: center; display: inline-flex; }

/* 模块 chips（管理后台） */
.admin-modules {
  display: flex; gap: var(--space-2); overflow-x: auto;
  padding-bottom: var(--space-2); margin-bottom: var(--space-4);
}
.admin-modules .btn-pill { flex: 0 0 auto; }

/* 通知弹窗里的列表 */
.mini-list .mini-item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
}
.mini-item .m-time { font-size: var(--fs-xs); color: var(--text-secondary); }
.mini-item.is-unread .m-body { color: var(--text-primary); font-weight: 600; }
.mini-item .m-body { color: var(--text-secondary); }

/* 离线空态提示 */
.offline-note {
  background: var(--warning-bg); color: var(--warning-text);
  padding: var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

/* ============================================================
   14. 响应式（§6：唯一断点 680px；1024px 仅网格列数参考）
   ============================================================ */
@media (min-width: 680px) {
  :root {
    --page-pad: 24px;
    --section-gap: 64px;
  }
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }
  h3 { font-size: 20px; }
  .nav_inner { height: 64px; }
  .nav_burger { display: none; }
  .nav_groups {
    display: flex; align-items: center;
    flex: 1; margin-left: var(--space-4);
    overflow-x: auto;
  }
  .tabbar { display: none; }
  .view_root { padding-bottom: var(--space-8); }
  .card { padding: var(--space-6); }
  .modal_mask { align-items: center; padding: var(--space-4); }
  .sheet {
    width: min(520px, 92vw);
    border-radius: var(--radius-lg);
    max-height: 86vh;
  }
  .sheet_handle { display: none; }
  .modal_foot .btn { width: auto; min-width: 120px; }
  .modal_foot { flex-direction: row; justify-content: flex-end; }
  .trust-bar { grid-template-columns: repeat(4, 1fr); }
  .wallet-grid { grid-template-columns: 1fr 1fr; }
  .steps { flex-direction: row; gap: var(--space-5); }
  .steps li { flex: 1; flex-direction: column; align-items: flex-start; }
  .product-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); gap: var(--gutter); }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: var(--space-7) var(--space-6); }
  .block-hero { padding: var(--space-7) var(--space-6); }
  .worker-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
}

/* 网格加密参考（design-spec §4.4/§6：非第二断点，仅列数变化） */
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, minmax(240px, 1fr)); }
  .hscroll { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); overflow: visible; }
  .hscroll > * { width: auto; }
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
  .worker-grid { grid-template-columns: repeat(3, minmax(240px, 1fr)); }
}

/* 减少动效 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   15. 品类静态页兼容层（c/{slug}/index.html · generate-category-pages 产物）
   类名约定（ops 契约）：site-nav/nav-link、block-hero/trust-bar/claim-note、
   block-about/feature-points/compliance、product-grid/product-card/product-price/
   tag-hot/tag-badge、worker-grid/worker-card、steps/step-no、btn-primary/btn-ghost、
   site-footer/footer-links。与 SPA 共用令牌，不另起色系。
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(26, 38, 34, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-nav {
  max-width: var(--content-max);
  margin: 0 auto;
  min-height: 56px;
  padding: var(--space-2) var(--page-pad);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2);
}
.site-nav .nav-link {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--space-3);
  color: var(--text-secondary); font-size: var(--fs-body);
}
.site-nav .nav-link:hover { color: var(--primary); }

main .block {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--section-gap) var(--page-pad) 0;
}
main .block:last-of-type { padding-bottom: var(--space-8); }
.block-hero {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-4);
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(196,240,33,0.08), transparent 60%),
    linear-gradient(160deg, var(--bg-panel), var(--bg-inset));
}
.block-hero h1 { color: var(--primary); }
.block-hero .sub {
  margin-top: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--fs-body); line-height: var(--lh-body);
  max-width: 36em;
}
.hero-actions { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.claim-note {
  margin-top: var(--space-3);
  font-size: var(--fs-sm); color: var(--warning-text);
}
.block-about p { margin-top: var(--space-3); }
.feature-points {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-3);
}
.feature-points li {
  padding: 8px 16px; min-height: 36px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--primary-lo); border-radius: var(--radius-pill);
  color: var(--primary); font-size: var(--fs-sm);
}
.compliance {
  margin-top: var(--space-4);
  font-size: var(--fs-xs); color: var(--text-secondary);
  line-height: var(--lh-xs);
}

/* 静态页商品卡（product-card 连字符版；SPA 用 product_card，互不干扰） */
.product-grid .product-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.product-grid .product-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.product-card .product-name { font-size: var(--fs-h4); font-weight: var(--fw-h4); }
.product-card .product-price {
  font-family: var(--font-mono);
  font-size: var(--fs-h3); font-weight: var(--fw-h1);
  color: var(--primary);
}
.product-card .product-desc {
  font-size: var(--fs-sm); color: var(--text-secondary);
}
.product-tags { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.tag {
  display: inline-flex; align-items: center;
  padding: 2px 8px; min-height: 20px;
  font-size: var(--fs-xs); font-weight: var(--fw-xs); letter-spacing: 0.02em;
}
.tag-hot {
  background: var(--primary); color: var(--text-on-primary);
  border-radius: var(--radius-xs);
}
.tag-badge {
  background: var(--warning-bg); color: var(--warning-text);
  border: 1px solid rgba(245,166,35,0.35);
  border-radius: var(--radius-pill);
}
.product-card .btn { align-self: flex-start; margin-top: var(--space-1); }

/* 按钮：btn-ghost（静态页次按钮）对齐 btn-secondary */
.btn-ghost {
  background: transparent; color: var(--primary);
  border: 1px solid var(--primary-lo);
}
.btn-ghost:hover { background: var(--primary-dim); border-color: var(--primary); color: var(--primary); }
.btn-ghost:active { background: rgba(196, 240, 33, 0.22); transform: translateY(1px); }

/* 静态页打手卡 */
.worker-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
}
.worker-grid .worker-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

/* 静态页步骤（显式 .step-no，计数器已在上方 :has 关闭） */
.step-no {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary-dim); color: var(--primary);
  font-size: var(--fs-xs); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: var(--space-2);
}

/* 静态页页脚 */
.site-footer {
  background: var(--bg-inset);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-6) var(--page-pad) calc(var(--space-6) + env(safe-area-inset-bottom));
  margin-top: var(--section-gap);
}
.site-footer .footer-links {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  font-size: var(--fs-sm); color: var(--text-secondary);
  max-width: var(--content-max); margin: 0 auto;
}
.site-footer .footer-links a {
  color: var(--text-secondary); min-height: 44px;
  display: inline-flex; align-items: center;
}
.site-footer .footer-links a:hover { color: var(--primary); }
.site-footer .footer-compliance {
  max-width: var(--content-max); margin: var(--space-3) auto 0;
  font-size: var(--fs-xs); color: var(--text-tertiary); line-height: var(--lh-xs);
}
.site-footer .footer-meta {
  max-width: var(--content-max); margin: var(--space-2) auto 0;
  font-size: var(--fs-xs); color: var(--text-tertiary);
}

/* ============================================================
   改版补丁（用户标注：客服字样 / 商品卡小一点 / 挑打手按钮 / 品类卡四列）
   ============================================================ */
/* 客服图标带文字 */
.nav_iconbtn--labeled { display: inline-flex; align-items: center; gap: 4px; width: auto; padding: 0 10px; }
.nav_iconbtn_text { font-size: var(--fs-xs); font-weight: var(--fw-xs); letter-spacing: 0.5px; }

/* 挑打手区标题行：标题 + 打手入口按钮并排 */
.section_head:has(#hero-worker) {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
}

/* 商品卡「小一点」：缩图标/字号/内边距 */
.product_card { gap: var(--space-1); padding: var(--space-3) !important; }
.product_top { gap: var(--space-2); }
.product_icon { width: 36px; height: 36px; font-size: 17px; }
.product_name { font-size: var(--fs-sm); font-weight: 600; }
.product_price { font-size: 15px; }
.product_desc { font-size: var(--fs-xs); }
.product_actions { margin-top: 0; }
.product_card .btn { padding: 6px 12px; font-size: var(--fs-xs); }

/* 品类入口卡网格：四列自适应（≥680 两列 / ≥1024 四列） */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* 无页脚后主视图底部留白 */
.view_root { padding-bottom: var(--space-6); }

/* ============================================================
   移动端适配补丁（主客群=手机端）：触控目标 / 全宽 CTA / 排版收敛
   ============================================================ */
@media (max-width: 679px) {
  /* 触控目标 ≥44px（WCAG）：小号按钮/文字按钮/药丸按钮全部抬高 */
  .btn-sm { min-height: 44px; padding: 10px 16px; }
  .btn-text { min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }
  .btn-pill { min-height: 36px; }
  .banner-action .btn-pill { min-height: 40px; }
  .nav_iconbtn { min-width: 44px; min-height: 44px; }
  .tab { min-height: 56px; }

  /* iOS 聚合缩放防御：输入控件 ≥16px */
  .input, .textarea, select, input[type="text"], input[type="number"], input[type="tel"], input[type="password"] {
    font-size: 16px;
  }

  /* 首屏 CTA 纵向全宽（拇指区） */
  .hero_cta { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .hero_cta .btn { width: 100%; }

  /* 区块标题行：标题与按钮纵排，按钮不挤压标题 */
  .section_head:has(#hero-worker),
  .section_head { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .section_head .btn { width: 100%; }

  /* 订单卡操作行：换行 + 均匀分布，防一行挤爆 */
  .order_actions { flex-wrap: wrap; gap: var(--space-1) var(--space-3); justify-content: flex-start; }

  /* 提示条：文案与按钮纵排 */
  .banner-inner { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .banner-action { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; }
  .banner-action .btn-pill { flex: 1; min-width: 96px; }

  /* 弹窗/抽屉按钮全宽 */
  .modal_foot .btn { width: 100%; }

  /* 后台模块 chips 横向滚动（不换行堆高） */
  .admin-modules { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: var(--space-1); }
  .admin-modules::-webkit-scrollbar { height: 0; }

  /* 金额行/时间行可换行 */
  .order_moneyrow { flex-wrap: wrap; gap: var(--space-1) var(--space-2); }

  /* 品类卡/商品卡触控留白 */
  .cat-card { min-height: 64px; }
  .product_card .btn { min-height: 44px; }

  /* 信任条两列 */
  .trust-bar { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
}