/* ============================================================
   团长端视觉改版 · 覆盖层（2026-10-09 · 方向「多彩模块」）
   ============================================================

   为什么单独一个文件（而不是就地改各文件）：
     这些都是**跨文件**的统一观感规则。CSS 同优先级下**后加载的赢**，
     而 index.html 的加载顺序是 style.css → home → components → profile →
     store → product → promotion → pages → wholesale。
     把统一规则放进 style.css（最先加载）会被后面每一个文件覆盖。

   ⚠️ 本文件**必须最后加载**（见 index.html 里 <link> 的位置）。
   ↩️  回退方式：删掉 index.html 里那一行 <link>，不动其他任何文件。

   改的是「观感层」，不动结构、不动信息、不动功能。
   ============================================================ */

/* ------------------------------------------------------------
   1. 卡片：把「用实色边框当分隔」换成「柔和双层投影」
      原来阴影透明度只有 .03~.06（等于看不见），边框成了唯一的分隔手段 → 又硬又平。
      这里保留 1px 边框占位（改透明，不改尺寸），层次交给 --shadow-*。
   ------------------------------------------------------------ */
.product-card,
.crm-stat-card,
.copy-card,
.copy-card-header,
.growth-card,
.order-summary,
.promo-feed-card,
.dist-feed-card,
.earn-summary,
.earn-chart,
.earn-item,
.notif-item,
.delivery-option,
.sub-gate-card,
.sub-gate-plan,
.store-tab-panel,
.store-settings-panel,
.detail-pricing,
.detail-item,
.detail-spec,
.pc-article-card,
.wx-share-guide-card,
.ws-merchant-card,
.ws-featured-card,
.ws-flash-card,
.ws-product-card,
.reg-card,
.feedback-reason-panel,
.modal-content,
.upload-modal,
.badge-wall-panel,
.treasure-modal,
.levelup-modal,
.product-picker,
.product-picker-dropdown {
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

/* 更"大件"的面板/弹窗给更重一档的投影，拉开与普通卡片的差距 */
.modal-content,
.upload-modal,
.badge-wall-panel,
.treasure-modal,
.levelup-modal,
.product-picker-dropdown {
  box-shadow: var(--shadow-lg);
}

/* ------------------------------------------------------------
   2. 暖白收敛：原来散着 6~7 种色温不一的"白"，
      这是用户说的「一堆白色底」的直接来源。统一到 --color-surface。
   （选择器与各文件原写法保持一致，避免被特异性反超。）
   ------------------------------------------------------------ */
.promo-feed-card,
.dist-feed-card,
.upload-zone-btn--camera {
  background: var(--color-surface);
}

/* ------------------------------------------------------------
   3. 网格等分
      ⚠️ 2026-10-09 事故记录（**别再犯**）：这里原本写的是
         `repeat(auto-fill, minmax(0, 1fr))`，并且一把梭套在 5 个选择器上。
         两个错：
           ① **公式错**：`auto-fill` + 最小 0 → 会生成**无数列**，每条挤成一条缝。
              首页「商品品类」在真机上被压成一坨叠字（用户截图报障）。
           ② **没核实**：那 5 个选择器里，`.crm-stats-grid`/`.action-cards`/`.ws-grid`/
              `.sub-gate-plans` **全仓根本不存在**；只有 `.category-grid` 真实存在，
              而它原本是 `repeat(4, 1fr)` —— 被这条规则覆盖才炸的。
      ⇒ 真正等分的写法是 **`repeat(固定列数, minmax(0, 1fr))`**，列数必须写死。
         这一节现在只保留**逐个核实过**的修正。
   ------------------------------------------------------------ */
/* 「商品品类」原本就是 4 列（`repeat(4, 1fr)`）；`1fr` 会被过长标签撑歪 → 显式 4 列 + minmax(0,…) */
#page-home .category-grid,
#page-recommendations .category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* 品类名可能较长（「休闲零食」「方便速食」）→ 允许换行，不要把格子撑歪
   ⚠️ 真实类名是 `.category-card-name`（不是 `.category-name`，写错过一次） */
.category-card-name {
  overflow-wrap: anywhere;
  line-height: 1.25;
}
/* 品类卡本来就是**四色轮换**，但原来四色全是近白（#FFFBF7/#FAFBFF/#FAFDFB/#FFF5F5）
   —— 看不出区别，也是「一堆白」的一部分。升级成方向B的彩色，保留轮换这个设计意图。
   （style-store.css 里是同样的选择器，本文件后加载所以本段生效。） */
.category-card:nth-child(4n+1) { background: #FFF0EE; }  /* 品牌红 */
.category-card:nth-child(4n+2) { background: #EEF3FF; }  /* 蓝 */
.category-card:nth-child(4n+3) { background: #EDFBF3; }  /* 绿 */
.category-card:nth-child(4n+4) { background: #FFF6E6; }  /* 金 */

/* ------------------------------------------------------------
   4. 头部行里的胶囊按钮：不能按 flex:1 参与等分
      `.btn-pill { flex: 1 }` 是为「弹窗底部两个等分按钮」设计的；
      放进店铺头部那一行里会被挤到 89px，塞不下「分享货架」→ 折成两行（实测）。
   ------------------------------------------------------------ */
.store-share-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding-left: 14px;
  padding-right: 14px;
}

/* ------------------------------------------------------------
   5. 分段控件 / 筛选条：从"白底+边框"改为"凹槽底"，
      让「选中项 = 白色浮起」这一层关系读得出来（原来是白的在白的上）。
   ------------------------------------------------------------ */
.store-tabs-bar,
.tab-toggle,
.crm-filter-tabs {
  background: var(--color-primary-soft);
  border-color: transparent;
  box-shadow: none;
}
.tab-toggle-btn.active,
.store-tab-item.active {
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------
   6. 经营分析页：把裸放的统计数字做成卡片 + 上色
      `.hero-stats` 原本是**专为红色 hero 设计**的（rgba(255,255,255,.12) 半透明底 +
      毛玻璃）—— 单独放在浅色背景上等于没有底，三个数字就那么裸着，最"呆滞"。
   ------------------------------------------------------------ */
#page-business .hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 6px;
  padding: 16px 12px;
  background: var(--color-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
#page-business .hero-stat {
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}
#page-business .hero-stat-value { font-size: 1.25rem; font-weight: 800; color: var(--color-text); }
#page-business .hero-stat-label { opacity: 1; color: var(--color-text-secondary); font-size: 0.75rem; }
/* 指标各自上色（用各自唯一的 id 定位，不用脆弱的 nth-child） */
#bizRevenue, #bizActive { color: var(--color-primary); }
#bizProfit { color: var(--color-success); }
#bizRepurchase { color: #2B6BD4; }

/* ------------------------------------------------------------
   7. 我的等级页：四张卡各自有颜色身份（原来是四张一模一样的白卡堆叠）
      ⚠️ 用 `> .level-section:nth-of-type(n)` 定位 —— 该页直接子元素依次是
         .level-hero(1) + 四个 .level-section(2~5)。**若在页首插入新的 div，
         序号会整体错位，需同步改这里。**
   ------------------------------------------------------------ */
#page-level .level-hero {
  border-color: transparent;
  box-shadow: var(--shadow-sm);
  background: linear-gradient(150deg, #FFF2F0, #FFFFFF);
}
#page-level .level-section {
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
#page-level > .level-section:nth-of-type(2) { background: linear-gradient(150deg, #FFF0EE, #FFDEDB); } /* 🏅 我现在能享受 */
#page-level > .level-section:nth-of-type(3) { background: linear-gradient(150deg, #EEF3FF, #DFE8FF); } /* 🎯 升下一级要做什么 */
#page-level > .level-section:nth-of-type(4) { background: linear-gradient(150deg, #EDFBF3, #DCF7E7); } /* 🎁 升了得到什么 */
#page-level > .level-section:nth-of-type(5) { background: linear-gradient(150deg, #FFF6E6, #FFE9C4); } /* 🎒 我的道具 */
#page-level .level-section-body { color: var(--color-text-secondary); }
#page-level .level-empty { color: var(--color-text-muted); }

/* ------------------------------------------------------------
   8. 首页「今日推荐 / 写文案」：4 列网格只放 2 个 → 右侧永远空一半
      （用户 2026-10-09 点名："这两个卡片的右侧空着"）
      ⚠️ `.quick-actions` 是**共用类**：首页 2 个 `.quick-action`，
         「我的」页 6 个 `.qa-card` —— **只能作用于首页**，全局改列数会把「我的」页搞坏。
   ------------------------------------------------------------ */
#page-home .quick-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* ============================================================
   2026-10-21 第 1 批（token 批）
   点击反馈 · 44px 触控补充 · 减少动效
   ============================================================ */

/* 顶栏改用线性 SVG 后统一为次级文字色（原来 emoji 自带颜色） */
.header-action { color: var(--color-text-secondary); }

/* 全局 tap-highlight 早已被关掉（style.css），这里补可见反馈 */
button:active { opacity: .8; }

.btn:active,
.nav-item:active,
.menu-item:active,
.quick-action:active,
.daily-card:active,
.category-card:active,
.product-card:active,
.icon-btn:active {
  transform: scale(.98);
}

.header-back:active { transform: scale(.94); }

/* 模式切换胶囊：视觉高度 30，点击区域补到 44（不改变外观） */
.mode-switch { position: relative; }
.mode-switch::after {
  content: "";
  position: absolute;
  inset: -7px 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 320–360 窄屏：44px 顶栏按钮 + 模式胶囊并排会挤掉页面标题 → 模式胶囊只留图标 */
@media (max-width: 360px) {
  .app-header { padding: 0 16px; }
  .header-actions { gap: 4px; }
  .header-actions .mode-switch .mode-label,
  .header-actions .mode-switch .mode-caret { display: none; }
  .header-actions .mode-switch { padding: 0 10px; }
}

/* ============================================================
   2026-10-21 第 2A 批：首页 19 块 → 8 块
   ============================================================ */

#page-home .home-section { margin-top: var(--gap-section); }
#page-home .daily-picks { margin-bottom: 0; }
#page-home .section-header { margin-bottom: 12px; }

/* Hero：等级卡并入后的一行进度 */
#page-home .hero-banner .rank-badge-card {
  display: block;
  margin: 16px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#page-home .hero-banner .rank-badge-card.skeleton { background: transparent; }
#page-home .hero-banner .rank-badge-card .rank-badge-icon,
#page-home .hero-banner .rank-badge-card .rank-badge-label { display: none; }
#page-home .hero-banner .rank-badge-body { display: block; }
#page-home .hero-banner .rank-badge-level { font-size: 12px; font-weight: 600; color: #fff; }
#page-home .hero-banner .rank-badge-next {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
  text-align: left;
}
#page-home .hero-banner .rank-badge-progress {
  height: 4px;
  margin-top: 6px;
  background: rgba(255,255,255,.22);
}
#page-home .hero-banner .rank-badge-progress-bar { background: #fff; }

/* 今日待办：一个白卡，里面全是行 */
#page-home .home-todo-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
#page-home .home-todo-card > * { margin: 0; }
#page-home .home-todo-card > * + * { border-top: 1px solid var(--color-border); }
#page-home .home-todo-card .stale-push-tip { border-radius: 0; box-shadow: none; }

/* 行动建议 → 行 */
#page-home .home-todo-card .action-cards { display: block; margin: 0; }
#page-home .home-todo-card .action-cards-title { display: none; }
#page-home .home-todo-card .action-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#page-home .home-todo-card .action-card + .action-card { border-top: 1px solid var(--color-border); }
#page-home .home-todo-card .action-card-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
#page-home .home-todo-card .action-card-title { font-size: 14px; font-weight: 500; }
#page-home .home-todo-card .action-card-desc { font-size: 12px; color: var(--color-text-muted); margin-top: 1px; }
#page-home .home-todo-card .action-card .treasure-badge {
  top: 6px;
  left: 8px;
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 4px;
}

/* 签到 / 挖宝 → 行 */
#page-home .home-todo-card .daily-grid { display: block; }
#page-home .home-todo-card .daily-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#page-home .home-todo-card .daily-card + .daily-card { border-top: 1px solid var(--color-border); }
#page-home .home-todo-card .daily-card-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
#page-home .home-todo-card #treasureCard .daily-card-icon { background: var(--color-warning-bg); }
#page-home .home-todo-card .daily-card-title { font-size: 14px; font-weight: 500; }
#page-home .home-todo-card .daily-card-sub { font-size: 12px; }
#page-home .home-todo-card .daily-card-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  flex-shrink: 0;
}

/* 成长任务 → 行 */
#page-home .home-todo-card .daily-task-section {
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#page-home .home-todo-card .daily-task-header { display: none; }
#page-home .home-todo-card .daily-task-item {
  min-height: 36px;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border-light);
}
#page-home .home-todo-card .daily-task-item:last-child { border-bottom: 0; }

/* 样品卡 → 行 */
#page-home .home-todo-card .sample-entry-card {
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 门店数据 → 紧凑四宫格 */
#page-home .home-todo-card .store-dashboard { padding: 12px 14px; }
#page-home .home-todo-card .sd-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
#page-home .home-todo-card .sd-card {
  padding: 10px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: none;
}
#page-home .home-todo-card .sd-num { font-size: 16px; }
#page-home .home-todo-card .sd-label { font-size: 12px; }

/* 快捷行 → 4 个图标 */
#page-home .home-quick .quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
#page-home .home-quick .quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 0 4px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  box-shadow: none;
}
#page-home .home-quick .quick-action .qa-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}
#page-home .home-quick .quick-action .qa-label { font-size: 12px; color: var(--color-text-secondary); }
#page-home .home-quick .quick-action .qa-desc { display: none; }

/* 成长 / 发现分组 */
#page-home .home-group-label {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0 4px 8px;
}
#page-home .home-menu-list { margin-top: 0; }
#page-home .home-menu-list > * + * { border-top: 1px solid var(--color-border-light); }
#page-home .home-menu-list .menu-item { padding: 14px 16px; }

/* 排行榜：行 + 展开 */
#page-home .home-menu-list .rank-board-card {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#page-home .home-menu-list .rank-board-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  cursor: pointer;
}
#page-home .home-menu-list .rank-board-title { flex: 1; font-size: 14px; font-weight: 500; }
#page-home .home-menu-list .rank-board-title em { font-size: 16px; }
#page-home .home-menu-list .rank-board-sub { font-size: 12px; color: var(--color-text-muted); }
#page-home .home-menu-list .rank-board-list { display: none; padding: 0 16px 12px; }
#page-home .home-menu-list .rank-board-card.expanded .rank-board-list { display: flex; }

/* 资料完善：一条提示，不抢戏 */
#page-home .profile-setup-card {
  margin-top: var(--gap-section);
  border: 1px dashed var(--color-border);
  box-shadow: none;
  background: transparent;
}

/* 首页不再展示权益块（只在「我的等级」页展示）；JS 仍会填充，保留数据不报错 */
#page-home #rankBenefits { display: none !important; }

/* Hero 等级行只留一行（完整信息在「等级与权益」行/等级页） */
#page-home .hero-banner .rank-badge-next {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 排行榜行：标题/副标题上下两行，避免和右侧副标题挤在一起 */
#page-home .home-menu-list .rank-board-text { flex: 1; min-width: 0; }
#page-home .home-menu-list .rank-board-sub { margin-top: 2px; }

/* ============================================================
   2026-10-21 第 2B 批：我的页 11 条 → 4 组
   ============================================================ */

#page-profile .profile-group { margin-top: var(--gap-section); }
#page-profile .profile-group > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 4px 8px;
  font-size: 12px;
  color: var(--color-text-muted);
  cursor: pointer;
  user-select: none;
}
#page-profile .profile-group > summary::-webkit-details-marker { display: none; }
#page-profile .profile-group > summary::after {
  content: "›";
  font-size: 16px;
  line-height: 1;
  color: var(--color-text-muted);
  transition: transform .18s var(--ease-out);
}
#page-profile .profile-group[open] > summary::after { transform: rotate(90deg); }
#page-profile .profile-group > summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
#page-profile .profile-group > .menu-list { margin: 0; }

/* 分组标题在 Firefox/Chromium 的默认 marker 可能仍占 8px，显式清掉 */
#page-profile .profile-group > summary::marker { content: ""; }

/* 折叠箭头用固定 16×16 盒，旋转时不越界 */
#page-profile .profile-group > summary::after {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#page-profile .profile-group > summary::after { overflow: hidden; }

/* ============================================================
   2026-10-21 第 2C 批：我的页头部三数 + 图标精修
   ============================================================ */

#page-profile .profile-stats {
  display: flex;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
#page-profile .profile-stat { flex: 1; text-align: center; }
#page-profile .profile-stat + .profile-stat { border-left: 1px solid var(--color-border); }
#page-profile .profile-stat-num {
  font-size: clamp(16px, 5.2vw, 20px);
  font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
#page-profile .profile-stat-num.brand { color: var(--color-primary); }
#page-profile .profile-stat-label { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }

/* ============================================================
   2026-10-21 第 2E 批：收益中心
   ============================================================ */

#page-earnings .earn-summary {
  border: 1px solid var(--color-border);
  box-shadow: none;
  border-radius: 16px;
}
#page-earnings .earn-summary-main {
  text-align: left;
  background: linear-gradient(135deg, #D7000F 0%, #B3000C 58%, #9E000A 100%);
  padding: 24px 20px;
}
#page-earnings .earn-summary-label { font-size: 12px; opacity: .82; }
#page-earnings .earn-summary-amount { font-size: 36px; font-weight: 700; margin-bottom: 8px; }
#page-earnings .earn-summary-main .earn-summary-hint {
  color: rgba(255,255,255,.78);
  margin-bottom: 16px;
}
#page-earnings .earn-withdraw-btn {
  height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
}
#page-earnings .earn-withdraw-btn:active { background: #FFF0EE; transform: none; }
#page-earnings .earn-auth-row { border-radius: 12px; }
#page-earnings .earn-summary-row { border-top: 1px solid var(--color-border); }
#page-earnings .earn-summary-item { padding: 16px 8px; }
#page-earnings .earn-summary-item-label { font-size: 12px; }
#page-earnings .earn-summary-item-value { font-size: 16px; }
#page-earnings .earn-val--green { color: var(--color-success); }
#page-earnings .earn-val--amber { color: var(--color-warning); }

/* 趣麦佣金：一行，不再和第二本账抢主次 */
#page-earnings .earn-qumai-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
}
#page-earnings .earn-qumai-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 8px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-earnings .earn-qumai-body { flex: 1; min-width: 0; }
#page-earnings .earn-qumai-title { font-size: 14px; font-weight: 500; }
#page-earnings .earn-qumai-hint { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.4; }
#page-earnings .earn-qumai-right { text-align: right; flex: 0 0 auto; }
#page-earnings .earn-qumai-amount {
  font-size: clamp(16px, 5vw, 20px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#page-earnings .earn-qumai-link { font-size: 12px; color: var(--color-primary); font-weight: 500; }

/* 趋势图 */
#page-earnings .earn-chart {
  border: 1px solid var(--color-border);
  box-shadow: none;
  border-radius: 16px;
}

/* 明细 / 提现：一张卡 + 列表行，不再一卡一条 */
#page-earnings .earn-list {
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
#page-earnings .earn-list .earn-item {
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
}
#page-earnings .earn-list .earn-item:last-child { border-bottom: 0; }
#page-earnings .earn-list > .spinner,
#page-earnings .earn-list > .empty-state { padding: 16px; }
#page-earnings .earn-list .pagination { padding: 12px 16px; }
#page-earnings .earn-item-amount { color: var(--color-success); }
#page-earnings .earn-status--confirmed { background: var(--color-success-bg); color: var(--color-success); }
#page-earnings .earn-status--pending { background: var(--color-warning-bg); color: var(--color-warning); }
#page-earnings .earn-status--cancelled { background: var(--color-danger-bg); color: var(--color-danger); }

/* ============================================================
   2026-10-21 第 2F 批：我的等级
   ============================================================ */

#page-level .level-hero {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: none;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: var(--gap-section);
}
#page-level .level-content-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
}
#page-level .level-content-card .level-section {
  margin: 0;
  padding: 16px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#page-level .level-content-card .level-section:last-child { border-bottom: 0; }
#page-level .level-section-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
#page-level .level-action-row,
#page-level .level-item-row { border-bottom: 1px solid var(--color-border-light); }
#page-level .level-action-row:last-child,
#page-level .level-item-row:last-child { border-bottom: 0; }

/* ============================================================
   2026-10-21 第 2G 批：客户管理 / 经营分析 / 推广中心
   ============================================================ */

/* 客户管理：客户列表一张卡多行 */
#page-customers .customer-topbar { margin-bottom: 8px; }
#page-customers .customer-topbar-count { font-size: 12px; color: var(--color-text-muted); }
#page-customers .customer-actions .btn { height: 44px; border-radius: 12px; }
#page-customers .crm-overview { gap: 8px; }
#page-customers .crm-stat-card { border-radius: 12px; padding: 12px 6px; box-shadow: none; }
#page-customers .crm-stat-value { font-size: 20px; font-weight: 600; }
#page-customers .crm-stat-label { font-size: 12px; }
#page-customers .crm-filter-tab { border-radius: 9999px; padding: 7px 0; }
#page-customers .crm-insights-toggle { border-radius: 12px; }
#page-customers .crm-insight-section { border-radius: 12px; }
#page-customers .crm-insight-item { border-radius: 8px; }
#page-customers #customerList {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  gap: 0 !important;
}
#page-customers #customerList .product-card {
  margin: 0;
  padding: 12px 34px 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  gap: 12px;
}
#page-customers #customerList .product-card:last-child { border-bottom: 0; }
#page-customers #customerList .customer-avatar {
  width: 36px;
  height: 36px;
  font-size: 14px;
  box-shadow: none;
  background: linear-gradient(135deg, #D7000F, #B3000C);
}
#page-customers #customerList .customer-name { font-size: 14px; font-weight: 500; }
#page-customers #customerList .customer-phone { font-size: 12px; }
#page-customers #customerList .customer-stats { font-size: 12px; gap: 12px; }
#page-customers #customerList .customer-delete { top: 10px; right: 12px; }
#page-customers #customerList > .empty-state { padding: 16px; }

/* 经营分析：分层/建议一张卡多行 */
#page-business #bizSegments {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
#page-business #bizSegments .product-card {
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#page-business #bizSegments .product-card:last-child { border-bottom: 0; }
#page-business #bizSegments > .empty-state { padding: 16px; }
#page-business #bizSuggestions {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
#page-business #bizSuggestions .product-card {
  margin: 0;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#page-business #bizSuggestions .product-card:last-child { border-bottom: 0; }

/* 推广中心：三数白卡 + 订阅按钮 + 两张列表卡 */
#page-promotions .promo-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 0 12px;
}
#page-promotions .promo-stat-card {
  display: block;
  padding: 12px 8px;
  border-radius: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-align: center;
}
#page-promotions .promo-stat-icon { display: none; }
#page-promotions .promo-stat-value { font-size: 20px; font-weight: 600; }
#page-promotions .promo-stat-label { font-size: 12px; }
#page-promotions .promo-stat-card--total .promo-stat-value { color: var(--color-primary); }
#page-promotions .promo-stat-card--month .promo-stat-value { color: var(--color-success); }
#page-promotions .promo-stat-card--pending .promo-stat-value { color: var(--color-warning); }
#page-promotions .promo-sub-btn {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  margin: 0 0 var(--gap-section);
  font-size: 14px;
}
#page-promotions .promo-feed-list {
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
#page-promotions .promo-feed-card {
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
#page-promotions .promo-feed-card:last-child { border-bottom: 0; }
#page-promotions .promo-earning-list {
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
#page-promotions .promo-earning-item {
  margin: 0;
  padding: 12px 16px;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  box-shadow: none;
}
#page-promotions .promo-earning-item:last-child { border-bottom: 0; }
#page-promotions .promo-earning-amount { color: var(--color-success); }
#page-promotions .promo-earning-status--confirmed { background: var(--color-success-bg); color: var(--color-success); }
#page-promotions .promo-earning-status--pending { background: var(--color-warning-bg); color: var(--color-warning); }
#page-promotions .promo-feed-tag,
#page-promotions .promo-earning-status { border-radius: 9999px; }

/* 推广商品行：96px 图太大，压到 64；列表 gap 归零，保持一张卡连续 */
#page-promotions .promo-feed-list { gap: 0; }
#page-promotions .promo-feed-img-wrap { width: 64px; height: 64px; flex: 0 0 64px; }
#page-promotions .promo-feed-img-emoji { font-size: 1.75rem; }
#page-promotions .promo-feed-name { font-size: 14px; -webkit-line-clamp: 1; }
#page-promotions .promo-feed-price { font-size: 14px; }
#page-promotions .promo-go-btn {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 8px;
  background: var(--color-primary);
}
#page-promotions .promo-feed-actions { gap: 2px; }

/* ============================================================
   2026-10-21 第 2H 批：货架页
   ============================================================ */

#page-store-mgmt .store-banner {
  margin: 0 0 var(--gap-section);
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: none;
  border-radius: 16px;
}
#page-store-mgmt .store-banner:not(.open) {
  background: var(--color-surface);
  box-shadow: none;
}
#page-store-mgmt .store-banner-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-store-mgmt .store-banner-name { font-size: 16px; font-weight: 600; }
#page-store-mgmt .store-banner-status-row {
  justify-content: flex-start;
  gap: 10px;
}
#page-store-mgmt .store-share-btn {
  margin-left: auto;
  height: 36px;
  padding: 0 12px;
  border-radius: 9999px;
  font-size: 13px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#page-store-mgmt .store-banner-settings { height: 32px; border-radius: 8px; }
#page-store-mgmt .store-banner-stats { border-top: 1px solid var(--color-border); }
#page-store-mgmt .store-stat { padding: 8px 0; }
#page-store-mgmt .store-stat-num { font-size: 20px; font-weight: 600; }
#page-store-mgmt .store-stat-desc { font-size: 12px; }
#page-store-mgmt .store-tabs-bar {
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none;
}
#page-store-mgmt .store-tab-item.active { box-shadow: none; }
#page-store-mgmt .store-tab-panel { background: transparent; padding: 12px 0 0; }
#page-store-mgmt .store-search-input,
#page-store-mgmt .store-search-btn { height: 44px; border-radius: 12px; }
#page-store-mgmt .store-filter-chip { border-radius: 9999px; }
#page-store-mgmt .store-shelf-list,
#page-store-mgmt .store-order-list,
#page-store-mgmt .store-result-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
#page-store-mgmt .store-shelf-item,
#page-store-mgmt .store-order-item,
#page-store-mgmt .store-result-item {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
}
#page-store-mgmt .store-shelf-item:last-child,
#page-store-mgmt .store-order-item:last-child,
#page-store-mgmt .store-result-item:last-child { border-bottom: 0; }
#page-store-mgmt .store-empty,
#page-store-mgmt .store-shelf-list > .spinner,
#page-store-mgmt .store-order-list > .spinner { padding: 16px; }
#page-store-mgmt .store-order-status { border-radius: 9999px; }
#page-store-mgmt .store-order-status.shipped { background: var(--color-primary-soft); color: var(--color-primary); }

/* ============================================================
   2026-10-21 第 2I 批：进货页（外围容器与筛选收口，不碰产品卡基线）
   ============================================================ */

#page-recommendations .purchase-hint,
#page-purchases .purchase-hint {
  background: transparent;
  padding: 0 0 12px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 400;
}
#recWholesalePane .ws-search-bar { padding: 0 0 12px; gap: 8px; }
#recWholesalePane .ws-search-input-wrap {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
}
#recWholesalePane .ws-search-input { font-size: 14px; }
#recWholesalePane .ws-support-btn {
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#recWholesalePane .ws-support-btn svg { flex-shrink: 0; }
#recWholesalePane .ws-list-header { padding: 0; margin-bottom: 12px; }
#recWholesalePane .ws-filter-row { margin-top: 0; gap: 8px; }
#recWholesalePane .ws-select {
  height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 14px;
  background-color: var(--color-surface);
}
#recWholesalePane .ws-load-more { padding: 12px 0 24px; }
#recWholesalePane .ws-load-more .btn { height: 44px; border-radius: 12px; }
#recWholesalePane .ws-empty { padding: 32px 16px; }
#recWholesalePane .ws-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
#recWholesalePane .ws-empty-text { font-size: 14px; }
#recWholesalePane .ws-empty-hint { font-size: 12px; }

/* 二级切换（为你推荐/浏览商品/有推广费）：去掉批次1被全局染上的粉色槽底，
   恢复「中性胶囊」，与一级分段控件拉开层级。 */
#page-recommendations .tab-toggle--sub {
  background: transparent;
  padding: 0;
}
#page-recommendations .tab-toggle--sub .tab-toggle-btn {
  min-height: 32px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: none;
}
#page-recommendations .tab-toggle--sub .tab-toggle-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: none;
}

/* ============================================================
   2026-10-21 第 2J 批：我的页分组可点性 + 今日主推订阅态
   ============================================================ */

/* 分组标题原来只是 12px 灰字 + 一个很小的箭头，用户不知道能点。
   改成整行白卡按钮：标题 + 项数 + 展开/收起 + 圆形箭头；
   展开时与下面的 menu-list 拼成一张卡。 */
#page-profile .profile-group { margin-top: 12px; }
#page-profile .profile-group > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 14px;
  margin: 0 0 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#page-profile .profile-group > summary:active { background: var(--color-surface-hover); }
#page-profile .profile-group-title { flex: 1; min-width: 0; }
#page-profile .profile-group-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
}
#page-profile .profile-group-toggle {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
}
#page-profile .profile-group-toggle::before { content: "展开"; }
#page-profile .profile-group[open] .profile-group-toggle::before { content: "收起"; }
#page-profile .profile-group > summary::after {
  content: "›";
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  overflow: hidden;
  transform: rotate(0deg);
  transition: transform .18s var(--ease-out);
}
#page-profile .profile-group[open] > summary::after { transform: rotate(90deg); }
#page-profile .profile-group[open] > summary {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
#page-profile .profile-group[open] > .menu-list {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
}

/* 2026-10-21：我的页「可提现」可点 → 收益中心 */
#page-profile .profile-stat--link {
  cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s var(--ease-out);
}
#page-profile .profile-stat--link:active { background: var(--color-primary-soft); }
#page-profile .profile-stat--link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
@media (hover: hover) {
  #page-profile .profile-stat--link:hover { background: var(--color-primary-soft); }
}
#page-profile .profile-stat-arrow {
  color: var(--color-primary);
  font-size: 12px;
  margin-left: 2px;
}

/* ── 推广任务（激励 Phase 2 批次 3）──────────────────────────────
   开关关闭时整块 display:none，不影响现有推广中心。 */
#promoTaskBlock { margin-top: var(--space-4); }
.promo-task-group { margin-top: var(--space-4); }
.promo-task-group-title { font-size: 12px; color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.promo-task-list { display: flex; flex-direction: column; gap: var(--space-2); }
.promo-task-card {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3);
}
.promo-task-card--mine { align-items: flex-start; }
.promo-task-img {
  width: 44px; height: 44px; flex: 0 0 auto; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--color-primary-soft);
}
.promo-task-img--emoji { display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.promo-task-body { flex: 1; min-width: 0; }
.promo-task-title {
  font-size: 14px; font-weight: 600; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.promo-task-meta { margin-top: 2px; font-size: 12px; color: var(--color-text-secondary); }
.promo-task-reward { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--color-primary); }
.promo-task-posts { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: 6px; }
.promo-task-post {
  font-size: 12px; color: var(--color-text-secondary);
  background: var(--color-surface-hover); border-radius: var(--radius-full); padding: 2px 8px;
}
.promo-task-btn {
  flex: 0 0 auto; min-height: 44px; padding: 0 var(--space-4);
  border: none; border-radius: var(--radius-sm);
  background: var(--color-primary); color: #fff; font-size: 14px; font-weight: 600;
}
.promo-task-btn:active { background: var(--color-primary-hover); }
@media (hover: hover) { .promo-task-btn:hover { background: var(--color-primary-hover); } }
.promo-task-done { flex: 0 0 auto; font-size: 12px; color: var(--color-success); }
.promo-task-mandatory-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-3);
}
.promo-task-mandatory-head { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.promo-task-mandatory-count { color: var(--color-primary); }
.promo-task-progress {
  margin-top: var(--space-2); height: 6px; overflow: hidden;
  border-radius: var(--radius-full); background: var(--color-primary-soft);
}
.promo-task-progress-bar { height: 100%; background: var(--color-primary); transition: width .2s var(--ease-out); }
.promo-task-mandatory-hint { margin-top: 6px; font-size: 12px; color: var(--color-text-secondary); }

/* 已生成的推广帖：可点击重开推广卡（不额外消耗帖数） */
.promo-task-post--link {
  border: none; cursor: pointer; font-family: inherit;
  color: var(--color-primary); background: var(--color-primary-soft);
}
.promo-task-post--link:active { opacity: .75; }

/* ------------------------------------------------------------
   客群标签选择器（2026-10-26）
   与商家推广使用同一套标签标准；只在「我的 → 我的客群标签」弹层里用。
   ------------------------------------------------------------ */
.tag-picker-body { margin-bottom: var(--space-4); }
.tag-picker-group { margin-bottom: var(--space-4); }
.tag-picker-cat {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-text-secondary);
}
.tag-picker-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-option {
  border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface, #fff);
  color: var(--color-text, #111);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: var(--text-sm);
  line-height: 1.4;
  font-family: inherit;
}
.tag-option.selected {
  background: #D7000F;
  border-color: #D7000F;
  color: #fff;
}
.tag-picker-empty {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding: var(--space-4) 0;
  text-align: center;
}