/* merchant/src/styles.css - 商家后台样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --color-primary: #FF6B35;
  --color-primary-light: #FF976A;
  --color-success: #07C160;
  --color-danger: #FA5151;
  --color-warning: #FF976A;
  --color-text-1: #1F1F1F;
  --color-text-2: #646566;
  --color-text-3: #969799;
  --color-border: #EBEDF0;
  --color-bg: #F4F5F7;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text-1);
  font-size: 14px;
  line-height: 1.5;
}

.loading { text-align: center; padding: 100px 0; color: var(--color-text-3); }

/* ===== 布局 ===== */
/* v1.2.20：定义底部 editor-footer 的稳定高度变量，让 phone preview panel
   给它留出空间，避免 footer 遮挡手机预览下半部分（之前 max-height 没考虑 footer
   → 面板底部贴 viewport 底端，与 fixed footer 重叠 60+px → 用户视觉上"滑不到底"）。
   设 64px 是为了匹配 footer 实际内容高度：padding 12×2 + btn 高 ≈38 + border 1 + 留 1px buffer = 64 */
:root { --editor-footer-h: 52px; }
.app-layout { display: flex; min-height: 100vh; align-items: stretch; }

/* 让 window 成为滚动容器，避免 sticky 被 overflow 容器困住失效 */
html, body { height: 100%; }
body { overflow-y: scroll; }

.sidebar {
  width: 220px;
  background: #1F2937;
  color: #FFFFFF;
  flex-shrink: 0;
  /* 跟随 window 滚动时，sidebar 始终贴视口左侧 */
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}
.sidebar-header {
  padding: 20px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sidebar-menu { list-style: none; padding: 12px 0; }
.sidebar-menu a {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.2s;
  font-size: 14px;
}
.sidebar-menu a:hover { background: rgba(255, 255, 255, 0.05); }
.sidebar-menu a.active {
  background: var(--color-primary);
  color: #FFFFFF;
}
.sidebar-menu .icon { margin-right: 10px; font-size: 16px; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  background: #FFFFFF;
  padding: 12px 24px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  /* 跟随 window 滚动时，topbar 始终贴视口顶部 */
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-title { font-size: 16px; font-weight: 600; }
.topbar-user { display: flex; align-items: center; gap: 12px; color: var(--color-text-2); }

.content { flex: 1; padding: 24px; /* 不再 overflow-y:auto，让 window 滚动，sticky 才能全局生效 */ }

/* ===== 通用组件 ===== */
.card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  margin-bottom: 16px;
}
.card-title { font-size: 16px; font-weight: 600; margin-bottom: 16px; }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.stat-card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.stat-card .label { font-size: 13px; color: var(--color-text-3); margin-bottom: 8px; }
.stat-card .value { font-size: 28px; font-weight: 600; color: var(--color-text-1); }
.stat-card .delta { font-size: 12px; color: var(--color-success); margin-top: 4px; }
.stat-card.highlight { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%); color: #FFFFFF; }
.stat-card.highlight .label,
.stat-card.highlight .value,
.stat-card.highlight .delta { color: #FFFFFF; }

/* 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}
.btn-primary { background: var(--color-primary); color: #FFFFFF; }
.btn-primary:hover { background: #E55A2B; }
.btn-outline { background: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); }
.btn-ghost { background: #F4F5F7; color: var(--color-text-2); }
.btn-danger { background: var(--color-danger); color: #FFFFFF; }
.btn-sm { padding: 4px 12px; font-size: 12px; }

/* 表格 */
.table { width: 100%; border-collapse: collapse; background: #FFFFFF; border-radius: 8px; overflow: hidden; }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--color-border); }
.table th { background: #FAFAFA; font-size: 13px; color: var(--color-text-2); font-weight: 500; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #FAFAFA; }

/* 标签 */
.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  background: #F0F0F0;
  color: var(--color-text-2);
}
.tag.success { background: #E8F5E9; color: var(--color-success); }
.tag.warning { background: #FFF3E0; color: #FF976A; }
.tag.danger { background: #FFEBEE; color: var(--color-danger); }
.tag.primary { background: #FFE4D6; color: var(--color-primary); }

/* 表单 —— v1.2.48 字号升级：在编辑时更舒服（label 13→15、input 14→15、padding 8/12→10/14） */
.form-item { margin-bottom: 18px; }
.form-item label { display: block; font-size: 15px; color: var(--color-text-2); margin-bottom: 8px; font-weight: 500; }
.form-item input, .form-item select, .form-item textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}
.form-item input:focus, .form-item select:focus, .form-item textarea:focus {
  border-color: var(--color-primary);
}

/* 登录页 */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FF6B35 0%, #FF976A 100%);
}
.login-box {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 40px;
  width: 380px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.login-title { font-size: 24px; font-weight: 600; text-align: center; margin-bottom: 8px; }
.login-subtitle { text-align: center; color: var(--color-text-3); margin-bottom: 32px; font-size: 13px; }
.login-error {
  background: #FFF1F0;
  border: 1px solid #FFA39E;
  color: #CF1322;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.5;
}
.login-box .btn-primary { width: 100%; padding: 12px; justify-content: center; }
.login-box .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

/* 移动端适配 */
@media (max-width: 768px) {
  .app-layout { flex-direction: column; }
  .sidebar { width: 100%; }
  .sidebar-menu { display: flex; overflow-x: auto; padding: 8px; }
  .sidebar-menu a { white-space: nowrap; padding: 8px 16px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
}

/* ===== 欢聚卡配置编辑器 ===== */
.card-editor { max-width: 900px; }

.step-header { margin-bottom: 32px; }
.step-progress {
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #E5E7EB;
  color: #9CA3AF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
}
.step-item.active .step-num {
  background: var(--color-primary);
  color: #fff;
}
.step-item.done .step-num {
  background: var(--color-success);
  color: #fff;
}
.step-label {
  font-size: 12px;
  color: var(--color-text-3);
}
.step-item.active .step-label {
  color: var(--color-primary);
  font-weight: 500;
}
.step-line {
  width: 48px;
  height: 2px;
  background: #E5E7EB;
  margin: 0 8px;
  margin-bottom: 20px;
}

.step-body { min-height: 300px; }
.step-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.step-footer .btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* 权益项 */
.right-item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  background: #FAFAFA;
}
.right-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-weight: 500;
}

/* 推送配置区块 */
.push-section {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}
.push-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 15px; /* v1.2.48: 14→15 */
  font-weight: 500;
}
.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ===== 分销管理 ===== */
.dist-page { display: flex; flex-direction: column; gap: 20px; }

.dist-settings-card { padding: 24px; }
.dist-settings-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.dist-settings-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dist-settings-body .form-row { display: flex; flex-direction: column; gap: 6px; }
.dist-settings-body .form-row label { font-size: 15px; color: var(--color-text-2); font-weight: 500; } /* v1.2.48: 13→15 */
.dist-settings-body .form-row input,
.dist-settings-body .form-row select,
.dist-settings-body .form-row textarea {
  padding: 8px 12px; border: 1px solid var(--color-border);
  border-radius: 8px; font-size: 14px; background: #fff;
}
.dist-settings-body .form-row textarea { resize: vertical; }

/* Switch */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; top: 0; right: 0; bottom: 0; left: 0;
  background: #ccc; border-radius: 24px; transition: 0.3s;
}
.slider::before {
  content: ''; position: absolute; height: 18px; width: 18px;
  left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.3s;
}
.switch input:checked + .slider { background: var(--color-primary); }
.switch input:checked + .slider::before { transform: translateX(20px); }

/* Tab */
.dist-tabs {
  display: flex; gap: 0; background: #fff; border-radius: 12px;
  overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.dist-tab {
  flex: 1; text-align: center; padding: 14px 0;
  font-size: 14px; color: var(--color-text-2); cursor: pointer;
  border-bottom: 3px solid transparent; transition: all 0.2s;
}
.dist-tab:hover { color: var(--color-primary); }
.dist-tab.active {
  color: var(--color-primary); font-weight: 600;
  border-bottom-color: var(--color-primary); background: rgba(255,107,53,0.04);
}

/* 工具栏 */
.toolbar {
  display: flex; gap: 12px; align-items: center; margin-bottom: 16px;
  flex-wrap: wrap;
}
.filter-select, .filter-input {
  padding: 8px 12px; border: 1px solid var(--color-border);
  border-radius: 8px; font-size: 14px; background: #fff;
}
.filter-input { flex: 1; min-width: 200px; }

/* 标签 */
.tag {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
}
.tag-active { background: rgba(7,193,96,0.1); color: #07C160; }
.tag-pending { background: rgba(255,151,106,0.1); color: #FF976A; }
.tag-rejected { background: rgba(250,81,81,0.1); color: #FA5151; }
.tag-disabled { background: rgba(150,151,153,0.1); color: #969799; }
.tag-settled { background: rgba(7,193,96,0.1); color: #07C160; }
.tag-withdrawn { background: rgba(150,151,153,0.1); color: #969799; }
.tag-approved { background: rgba(59,130,246,0.1); color: #3B82F6; }
.tag-paid { background: rgba(7,193,96,0.1); color: #07C160; }

/* 表格 */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th {
  text-align: left; padding: 12px 8px; font-weight: 500;
  color: var(--color-text-3); border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}
.data-table td {
  padding: 12px 8px; border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.data-table tr:hover td { background: rgba(255,107,53,0.02); }
.cell-user { display: flex; align-items: center; gap: 8px; }
.mini-avatar { width: 28px; height: 28px; border-radius: 50%; }
.table-footer { text-align: center; padding: 16px 0; color: var(--color-text-3); font-size: 13px; }
.empty-text { text-align: center; padding: 48px 0; color: var(--color-text-3); }
.error-text { text-align: center; padding: 24px 0; color: var(--color-danger); }

/* 按钮 */
.btn-xs {
  padding: 4px 10px; font-size: 12px; border-radius: 6px;
  border: none; cursor: pointer; margin-right: 4px;
}
.btn-primary.btn-xs { background: var(--color-primary); color: #fff; }
.btn-danger.btn-xs { background: var(--color-danger); color: #fff; }
.btn-ghost.btn-xs { background: #f0f0f0; color: var(--color-text-2); }
.btn-warning.btn-xs { background: var(--color-warning); color: #fff; }

.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-muted { color: var(--color-text-3); }

/* 提现概览 */
.wd-overview {
  display: flex; gap: 16px; margin-bottom: 16px;
  padding: 16px; background: #f8f9fa; border-radius: 8px;
}
.wd-stat { display: flex; flex-direction: column; gap: 4px; }
.wd-stat-label { font-size: 12px; color: var(--color-text-3); }
.wd-stat-value { font-size: 18px; font-weight: 600; }

/* 排行榜 */
.rank-list { display: flex; flex-direction: column; gap: 8px; }
.rank-item {
  display: flex; align-items: center; gap: 16px;
  padding: 16px; border-radius: 12px; background: #f8f9fa;
}
.rank-item.rank-top { background: linear-gradient(135deg, #fff8f0, #fff); border: 1px solid rgba(255,107,53,0.15); }
.rank-num {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700; background: #e0e0e0; color: #666;
  flex-shrink: 0;
}
.rank-1 { background: linear-gradient(135deg, #FFD700, #FFA500); color: #fff; }
.rank-2 { background: linear-gradient(135deg, #C0C0C0, #A0A0A0); color: #fff; }
.rank-3 { background: linear-gradient(135deg, #CD7F32, #B87333); color: #fff; }
.rank-avatar { width: 40px; height: 40px; border-radius: 50%; }
.rank-info { flex: 1; }
.rank-name { font-size: 15px; font-weight: 500; }
.rank-sub { font-size: 12px; color: var(--color-text-3); margin-top: 4px; }
.rank-amount { text-align: right; }
.ra-period { font-size: 18px; font-weight: 700; color: var(--color-primary); }
.ra-total { font-size: 12px; color: var(--color-text-3); }

/* 图表 */
.chart-bar-container {
  display: flex; align-items: flex-end; gap: 4px;
  height: 200px; overflow-x: auto; padding: 16px 0;
}
.chart-bar-item {
  flex: 1; min-width: 24px; display: flex; flex-direction: column;
  align-items: center; height: 100%; justify-content: flex-end;
}
.chart-bar-fill {
  width: 80%; background: linear-gradient(180deg, #FF6B35, #FFB088);
  border-radius: 4px 4px 0 0; min-height: 4px; transition: height 0.3s;
}
.chart-bar-label { font-size: 9px; color: var(--color-text-3); margin-top: 4px; }

/* 佣金分布 */
.dist-breakdown { display: flex; gap: 16px; }
.db-item {
  flex: 1; display: flex; flex-direction: column; gap: 8px;
  padding: 16px; background: #f8f9fa; border-radius: 8px;
}
.db-label { font-size: 12px; color: var(--color-text-3); }
.db-value { font-size: 20px; font-weight: 700; }

/* 网格 */
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.stat-card {
  background: #fff; border-radius: 12px; padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.stat-card.highlight { border-left: 4px solid var(--color-primary); }
.stat-card .label { font-size: 13px; color: var(--color-text-3); }
.stat-card .value { font-size: 28px; font-weight: 700; color: var(--color-text-1); margin-top: 8px; }

/* ===== 欢聚卡配置编辑器 V2（单页长表单）===== */
.card-editor-v2 {
  max-width: 1180px;
  margin: 0 auto;
  padding-bottom: 80px;
}

.editor-header {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 24px; background: #fff;
  border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin-bottom: 16px;
  position: relative; z-index: 1; /* v1.2.49: 取消 sticky —— v1.2.48 字号升到 21px 后 header 高度 > top:56px，会盖住下方 section 标题 */
}
.editor-title { font-size: 21px; font-weight: 600; flex: 1; margin: 0; letter-spacing: 0.2px; } /* v1.2.48: 18→21 更醒目 */
.editor-header-actions { display: flex; gap: 8px; }

.editor-body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 左：6 个 section 垂直堆叠 */
.editor-sections {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* 右侧全局预览是 fixed (脱离了 flex 流)，需要手动给左列留出 panel 占用的空间：
     panel 宽 376 + right 24 = 400px，加上 ~12px gutter，共 412px，
     避免左列内容跑到 panel 下面。 */
  padding-right: 412px;
  /* v1.2.27：底部 footer 让位 —— 滚动到底时表单最末一个 section 不会被 footer 挡住 */
  padding-bottom: var(--editor-footer-h, 52px);
}

.editor-section {
  background: #fff;
  border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.section-header {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 18px; margin-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}
/* v1.2.48：序号圆圈加大（26→30）+ 字号加大（13→15.5），与新 section 标题比例更协调 */
.section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #FF6B35, #FF976A);
  color: #fff; font-size: 15.5px; font-weight: 600;
}
.section-title { font-size: 19px; font-weight: 600; color: var(--color-text-1); margin: 0; letter-spacing: 0.2px; }

.section-fields { min-width: 0; }

/* —— 全局预览面板（右侧跟随滚动）——
   关键：从 v1.2.12 起改为 `position: fixed`，不再依赖 sticky。
   原因：sticky 会"困"在最近 overflow≠visible 的祖先里。
   而 styles.css?v=215 里 `.content { overflow-y: auto }`，导致 panel 的 sticky
   实际相对 `.content` 的 scrollTop 生效；而 scroll listener 挂在 window 上，
   → window 在滚、`.content` 没滚 → panel 完全脱离 viewport（用户截图复现）。
   改成 fixed 后：panel 永远贴 viewport 右侧 32px / 顶部 80px，6 个 section
   总高度远大于 viewport（7000+px），所以整个滚动期间 panel 都在视口内。 */
.global-preview-panel {
  position: fixed;
  top: 80px;
  right: 24px;          /* v1.2.16：32→24 微收，给右边 buffer 不让 FAB 阴影染出 */
  width: 376px;         /* v1.2.16：360→376，留出 phone 360 + 8×2 内边距对位 */
  max-height: calc(100vh - 80px - var(--editor-footer-h, 52px));
  /* v1.2.27：panel 改为 flex column + overflow:hidden 让 phone 高度自适应 panel，
     scrollArea 内滚动，不再被 panel 高度限制 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #FAFAFA;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #F0F0F0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  z-index: 5;  /* 在普通内容之上，但不盖顶部 topbar */
}
.gpp-header {
  display: flex; align-items: center; gap: 8px;
  justify-content: space-between;  /* v199: 让 label 在左、pill + 真机体验按钮在右 */
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 1px dashed #E0E0E0;
}
/* v199: pill + 真机体验按钮 容器（紧贴右侧）*/
.gpp-header-right {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.gpp-label {
  font-size: 15px; font-weight: 600; color: var(--color-text-2); /* v1.2.48: 13→15 */
  flex-shrink: 0;
}
/* 顶部 section 胶囊：纯展示当前 section 名称 */
.gpp-section-pill {
  font-size: 11px; font-weight: 600; color: #C9271E;
  background: #FFF1F0;
  border: 1px solid #FFD6D4;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  max-width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 6 个 slot 叠在一起，根据当前激活的 section 切换可见性。
   v153：让 .gpp-slots 自己成为可滚动容器（flex:1 + overflow-y:auto），
   防止「推送设置」section 的 7 张场景卡（核销/沉睡/到期30/15/7/1/会员日）
   总高超出 .global-preview-panel max-height 时被截掉。
   .global-preview-panel 已设 overflow:hidden + flex column，
   所以 .gpp-slots 必须 flex:1 + min-height:0 才能拿到剩余高度并自己滚；
   basic slot 里 .basic-preview-phone 的 bpp-scroll-area 仍在自己内部模拟手机滚动，
   两套滚动互不干扰（一个是面板级、一个是手机级）。 */
.gpp-slots {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  /* 微微留点右边内距，让自定义滚动条不顶内容 */
  padding-right: 2px;
}
/* 自定义滚动条 —— 与页面暗色卡片风格一致的细条 */
.gpp-slots::-webkit-scrollbar { width: 6px; }
.gpp-slots::-webkit-scrollbar-track { background: transparent; }
.gpp-slots::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.18);
  border-radius: 3px;
}
.gpp-slots::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.32); }
/* Firefox 适配 */
.gpp-slots { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.18) transparent; }
.gpp-slot {
  display: none;
}
.gpp-slot.is-active {
  display: block;
  animation: gppFadeIn 0.32s ease;
}
/* 滑入方向动画：跟滚动方向匹配 */
.gpp-slot.gpp-enter-up {
  animation: gppEnterUp 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.gpp-slot.gpp-enter-down {
  animation: gppEnterDown 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes gppFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 向下滚动时，新内容从下方滑入（向下推到顶部） */
@keyframes gppEnterUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 向上滚动时，新内容从上方滑入（向下推到顶部，与滚动方向相反的视觉连贯感） */
@keyframes gppEnterDown {
  from { opacity: 0; transform: translateY(-28px); }
  to { opacity: 1; transform: translateY(0); }
}


.fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.fields-stack { display: flex; flex-direction: column; gap: 12px; }

.ce-input {
  width: 100%; padding: 10px 14px; /* v1.2.48: 8/12→10/14 */
  border: 1px solid var(--color-border);
  border-radius: 6px; font-size: 15px; /* v1.2.48: 14→15 */
  outline: none;
  transition: border-color 0.2s;
  background: #fff;
}
.ce-input:focus { border-color: var(--color-primary); }

.form-item label { display: block; font-size: 15px; color: var(--color-text-2); margin-bottom: 8px; font-weight: 500; } /* v1.2.48: 13→15 */
.form-hint { font-size: 13.5px; color: var(--color-text-3); margin-top: 6px; line-height: 1.55; } /* v1.2.48: 12→13.5 */

.color-row { display: flex; gap: 8px; align-items: center; }
.color-row input[type="text"] { flex: 1; }
.color-row input[type="color"] {
  width: 40px; height: 36px; border: 1px solid var(--color-border);
  border-radius: 6px; cursor: pointer; padding: 2px; background: #fff;
}

.upload-btn {
  width: 100%; padding: 24px;
  background: linear-gradient(135deg, #FFF1F0 0%, #FFD6D4 100%);
  border: 1px dashed #FF7875;
  border-radius: 8px;
  color: #FF4D4F; font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.upload-btn:hover { background: linear-gradient(135deg, #FFE7E5 0%, #FFCBC9 100%); }

/* Toggle Switch (CE) */
.ce-switch {
  position: relative; display: inline-block;
  width: 44px; height: 24px; flex-shrink: 0;
}
.ce-switch input { opacity: 0; width: 0; height: 0; }
.ce-slider {
  position: absolute; cursor: pointer; top: 0; right: 0; bottom: 0; left: 0;
  background: #ccc; border-radius: 24px; transition: 0.3s;
}
.ce-slider::before {
  content: ''; position: absolute; height: 18px; width: 18px;
  left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.ce-switch input:checked + .ce-slider { background: var(--color-primary); }
.ce-switch input:checked + .ce-slider::before { transform: translateX(20px); }

/* ========== 基础配置：单列横向行布局 ========== */
.editor-section-form { padding: 0; overflow: hidden; }
.section-header-form {
  display: block;
  padding: 14px 24px;
  margin: 0;
  border: none;
  border-bottom: 1px solid #FFE7E0;
  background: linear-gradient(90deg, #FFF7F2 0%, #FFEFE6 100%);
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  letter-spacing: 0.5px;
}

.basic-config-fields { padding: 22px 24px; }
.basic-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}
.basic-row .row-label {
  flex: 0 0 110px;
  text-align: right;
  padding-top: 8px;
  font-size: 15px; /* v1.2.48: 13→15 */
  color: #262626;
  position: relative;
}
.basic-row .row-label .required-asterisk {
  color: #FF4D4F;
  margin-right: 2px;
  font-weight: 600;
}
.basic-row .row-field { flex: 1; min-width: 0; }

/* 输入框带字符计数 */
.input-with-counter { display: flex; align-items: center; gap: 10px; max-width: 480px; }
.input-with-counter .ce-input { flex: 1; }
.char-counter {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: #F5F5F5; border-radius: 10px;
  font-size: 13px; color: #595959; /* v1.2.48: 12→13 颜色加深 */
  white-space: nowrap;
}
.char-counter::before { content: '⊙'; color: #BFBFBF; }

/* 横向 radio 组（橙点） */
.radio-group-inline { display: flex; flex-direction: column; gap: 10px; }
.radio-group-inline.row-inline { flex-direction: row; gap: 28px; align-items: center; flex-wrap: wrap; }
.radio-row { display: flex; align-items: center; gap: 8px; }
.radio-row input[type=radio] {
  width: 16px; height: 16px;
  accent-color: #FF7A45;
  cursor: pointer;
}
.radio-row .radio-label {
  font-size: 15px; color: #262626; cursor: pointer; /* v1.2.48: 14→15 */
  user-select: none;
}

/* 欢聚卡卡面三选项 + 图片上传预览 */
.card-face-wrap { max-width: 520px; }
.face-image-uploader {
  width: 120px; height: 64px;
  border: 1px dashed #D9D9D9;
  border-radius: 4px;
  background: #FAFAFA;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  cursor: pointer;
  margin: 10px 0 8px 24px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
}
.face-image-uploader:hover { border-color: #FF7A45; }
.face-preview-img { width: 100%; height: 100%; object-fit: cover; }
.face-image-uploader .btn { font-size: 12px; padding: 2px 8px; }
.face-image-uploader .upload-area {
  border: none; background: rgba(255,255,255,.85); color: #FF7A45;
  border-radius: 3px;
}

.form-hint-with-icon {
  font-size: 13.5px; color: #8C8C8C; margin-top: 6px; /* v1.2.48: 12→13.5 */
  padding-left: 24px;
}

/* 日期范围 */
.datetime-range {
  display: flex; align-items: center; gap: 8px; max-width: 540px;
}
.datetime-range .ce-input { flex: 1; }
.range-arrow { color: #BFBFBF; font-size: 14px; }

/* 售卖时间快速选择芯片 */
.sale-time-wrap { max-width: 540px; }
.sale-time-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sale-time-chip {
  appearance: none; -webkit-appearance: none;
  border: 1px solid #E5E5E5;
  background: #FFF;
  color: #444;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
  line-height: 1.2;
}
.sale-time-chip:hover {
  border-color: #C9271E;
  color: #C9271E;
  background: #FFF5F3;
}
.sale-time-chip.is-active {
  background: linear-gradient(135deg, #C9271E, #E85B2C);
  border-color: #C9271E;
  color: #FFF;
  box-shadow: 0 2px 6px rgba(201, 39, 30, 0.28);
}
.sale-time-chip-unlimited.is-active {
  background: linear-gradient(135deg, #888, #B5B5B5);
  border-color: #888;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.sale-time-chip-custom.is-active {
  background: linear-gradient(135deg, #2A3142, #4A5468);
  border-color: #2A3142;
  box-shadow: 0 2px 6px rgba(42, 49, 66, 0.28);
}
.sale-time-custom {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  max-width: 540px;
}
.sale-time-custom .ce-input { flex: 1; }
.sale-time-range {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
  padding: 6px 10px;
  background: #F7F7F8;
  border-radius: 6px;
  border-left: 3px solid #C9271E;
  font-variant-numeric: tabular-nums;
}
.sale-time-range.is-empty {
  border-left-color: #F59E0B;
  color: #92400E;
  background: linear-gradient(135deg, #FFFBEB, #FFF7ED);
}
.sale-time-range.is-empty .hint {
  color: #B45309;
  font-weight: 500;
}
.sale-time-range.is-empty b {
  color: #DC2626;
  font-weight: 700;
}

/* 有效期嵌套 */
.validity-wrap { max-width: 540px; }

/* 价格横向 inline-grid */
.price-grid {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
}
.inline-cell { display: flex; align-items: center; gap: 6px; }
.inline-label { font-size: 13px; color: #595959; white-space: nowrap; }
.inline-input {
  width: 110px !important;
  padding: 6px 10px !important;
}
.inline-unit { font-size: 13px; color: #595959; }
.inline-input-group {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: #262626;
}
.amount-group { margin-left: 16px; }
.amount-group .inline-input { width: 80px !important; }
.amount-group::after { content: ''; }

/* 优惠提示那一行 */
.sale-hint-row {
  display: flex; align-items: center; gap: 10px;
}
.sale-hint-row .amount-group { margin-left: 0; }

/* 品牌 LOGO 上传区（16:9 虚线框） */
.brand-logo-cell { max-width: 360px; }
.brand-logo-uploader {
  width: 160px; height: 90px;
  border: 1px dashed #D9D9D9;
  border-radius: 4px;
  background: #FAFAFA;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative; overflow: hidden;
  transition: border-color 0.2s;
}
.brand-logo-uploader:hover { border-color: #FF7A45; }
.brand-logo-preview { width: 100%; height: 100%; object-fit: contain; }
.brand-logo-placeholder { color: #FF7A45; font-size: 14px; font-weight: 500; }

/* 适用门店多选 */
.store-select-cell select { width: 100%; max-width: 360px; }

/* 适用门店勾选式列表 */
.store-checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  max-width: 360px;
  min-height: 36px;
  padding: 10px 12px;
  background: #FAFAFA;
  border: 1px solid var(--color-border, #E5E6EB);
  border-radius: 6px;
}
.store-checkbox-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  background: #fff;
  border: 1px solid #E5E6EB;
  border-radius: 14px;
  font-size: 13px;
  color: var(--color-text-1, #1D2129);
  cursor: pointer;
  user-select: none;
  transition: all 0.15s;
}
.store-checkbox-item:hover {
  border-color: #FF7A45;
  color: #FF7A45;
}
.store-checkbox-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #FF7A45;
  cursor: pointer;
}
.store-checkbox-item:has(input:checked) {
  background: #FFF7E8;
  border-color: #FF7A45;
  color: #D4380D;
}
.store-checkbox-label {
  white-space: nowrap;
}
.store-empty-hint {
  font-size: 13px;
  color: #8C8C8C;
  padding: 8px 0;
}

/* Loading mini */
.loading-mini { padding: 24px; text-align: center; color: #8C8C8C; font-size: 13px; }

/* Template Tabs（卡片设计已移除，保留以防未来复用）*/
.template-tabs { display: flex; gap: 0; border: 1px solid var(--color-border); border-radius: 6px; overflow: hidden; }
.template-tab {
  flex: 1; padding: 8px 12px; border: none; background: #fff; cursor: pointer;
  font-size: 13px; color: var(--color-text-2); transition: all 0.2s;
}
.template-tab:hover { background: #FFF7F0; }
.template-tab.active { background: var(--color-primary); color: #fff; }

/* Preview Box */
.preview-box { display: flex; flex-direction: column; gap: 10px; }
.preview-head-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 6px; border-bottom: 1px dashed #E0E0E0; gap: 10px;
}
.preview-head-row .preview-title { padding-bottom: 0; border-bottom: none; }
.preview-title {
  font-size: 13px; font-weight: 600; color: var(--color-text-2);
  padding-bottom: 6px; border-bottom: 1px dashed #E0E0E0;
}
.preview-img {
  width: 100%; height: auto; max-height: 220px; object-fit: contain;
  border-radius: 6px; background: #fff; border: 1px solid #F0F0F0;
}
.preview-tip {
  font-size: 12px; color: var(--color-text-3); line-height: 1.8;
  padding: 6px 8px; background: #fff; border-radius: 4px;
}

/* "实时同步" 徽标：跳动小绿点 + 弱化文字 */
.preview-live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  color: #047857; font-size: 11px; font-weight: 600;
  border: 1px solid #A7F3D0; white-space: nowrap;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  animation: liveBadgePulse 2.4s ease-in-out infinite;
}
.preview-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #10B981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6);
  animation: liveDotPing 1.6s ease-out infinite;
}
@keyframes liveDotPing {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes liveBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
  50%      { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08); }
}

/* Poster Preview */
.poster-preview { display: flex; gap: 12px; justify-content: center; }
.poster-mini {
  width: 100px; height: 175px; border-radius: 6px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.poster-mini img { width: 100%; height: 100%; object-fit: cover; }

/* Rights */
.rights-master, .push-master, .dist-master {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px;
  background: linear-gradient(135deg, #FFF7F0 0%, #FFE7D6 100%);
  border-radius: 8px;
  border: 1px solid #FFD6B0;
}
.rights-master-label, .push-master-label, .dist-master-label { font-size: 15px; font-weight: 500; color: #C2410C; } /* v1.2.48: 14→15 */
.rights-master-label .form-hint, .push-master-label .form-hint, .dist-master-label .form-hint { color: #EA580C; opacity: 0.85; }

.rights-list { display: flex; flex-direction: column; gap: 12px; }
.right-item, .push-item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 14px;
  background: #FAFAFA;
}
.right-item-head, .push-item-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.right-item-title, .push-item-title { flex: 1; }
.right-item-name, .push-item-name { font-size: 14px; font-weight: 600; }
.right-item-desc, .push-item-desc { font-size: 12px; color: var(--color-text-3); margin-top: 2px; }
.right-item-body, .push-item-body {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 8px; border-top: 1px dashed #E0E0E0;
}

.custom-rights { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.custom-right-row {
  display: grid; grid-template-columns: 1fr 100px 1.5fr 60px; gap: 8px;
  align-items: center;
}

/* Push */
.push-list { display: flex; flex-direction: column; gap: 12px; }

/* —— 会员日 / 核销次数 新字段专属样式 —— */
.cycle-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cycle-row input[type=radio] { display: none; }
.radio-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 14px; border-radius: 999px;
  background: #F5F5F5; color: #595959; font-size: 13px;
  border: 1px solid #E8E8E8; cursor: pointer;
  transition: all 0.15s;
}
.cycle-row input[type=radio]:checked + .radio-chip {
  background: linear-gradient(135deg, #FFF7E6 0%, #FFD9B3 100%);
  color: #FF6B35; border-color: #FFC069;
  box-shadow: 0 2px 4px rgba(255, 107, 53, 0.12);
}
.member-day-date-row { display: flex; align-items: center; gap: 8px; }
.member-day-date-row .date-prefix { font-size: 13px; color: #595959; }
.member-day-date-row select,
.member-day-date-row input {
  padding: 4px 10px; border: 1px solid #D9D9D9; border-radius: 4px;
  font-size: 13px; background: #fff;
}
.time-row { display: flex; align-items: center; gap: 6px; }
.time-row .time-prefix { font-size: 13px; color: #595959; margin-right: 4px; }
.time-row input.time-hh,
.time-row input.time-mm { width: 56px; text-align: center; padding: 4px 0; }
.time-row .time-colon { font-weight: 600; color: #595959; }
.threshold-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.threshold-row .threshold-prefix,
.threshold-row .threshold-suffix { font-size: 13px; color: #595959; }
.threshold-row input { width: 70px; padding: 4px 10px; border: 1px solid #D9D9D9; border-radius: 4px; font-size: 13px; }

/* —— 推送预览（实时同步） —— */
.push-preview-box { display: flex; flex-direction: column; gap: 10px; }
.push-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 36px 12px; background: #FAFAFA; border-radius: 8px;
  border: 1px dashed #E0E0E0; color: #8c8c8c; text-align: center;
}
.push-empty-icon { font-size: 32px; margin-bottom: 8px; opacity: 0.5; }
.push-empty-text { font-size: 14px; color: #595959; }
.push-empty-hint { font-size: 12px; margin-top: 4px; color: #bfbfbf; }
.push-preview-card {
  background: #fff; border: 1px solid #F0F0F0; border-radius: 8px;
  padding: 12px; transition: all 0.18s;
}
.push-preview-card-highlight {
  background: linear-gradient(135deg, #FFF7E6 0%, #FFF2E0 100%);
  border-color: #FFD591;
}
.push-preview-card-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #595959; margin-bottom: 8px;
}
.push-preview-icon { font-size: 16px; }
.push-preview-title { font-weight: 600; color: #262626; font-size: 13px; }
.push-preview-trigger {
  margin-left: auto;
  background: #F0F5FF; color: #2F54EB; padding: 2px 8px;
  border-radius: 999px; font-size: 11px;
}
.push-preview-card-highlight .push-preview-trigger {
  background: #FFF1E6; color: #D4380D;
}
.push-preview-bubble {
  background: #95D4F4; color: #1F1F1F;
  padding: 10px 12px; border-radius: 6px;
  position: relative; font-size: 13px; line-height: 1.6;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.push-preview-bubble::before {
  content: ''; position: absolute; top: 8px; left: -6px;
  width: 0; height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #95D4F4;
}
.push-preview-card-highlight .push-preview-bubble { background: #FFE0B2; }
.push-preview-card-highlight .push-preview-bubble::before { border-right-color: #FFE0B2; }
.push-preview-bubble-meta { font-size: 11px; color: #595959; margin-top: 6px; opacity: 1; }
.push-preview-bubble-cta {
  display: inline-block;
  color: #FF6B35;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 107, 53, 0.08);
  transition: background-color 0.18s, transform 0.18s;
  cursor: pointer;
}
.push-preview-bubble-cta:hover { background: rgba(255, 107, 53, 0.18); transform: translateX(1px); }
.push-preview-tipbox {
  background: #FAFAFA; border-left: 3px solid #1890FF;
  padding: 10px 12px; border-radius: 4px;
  font-size: 12px; line-height: 1.6;
}
.push-preview-tip-title { font-weight: 600; color: #262626; margin-bottom: 2px; }
.push-preview-tip-desc { color: #595959; }
.push-preview-tip-hint {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed #D9D9D9;
  color: #8C8C8C; font-size: 11px;
}

/* Distribution body */
.dist-body { display: flex; flex-direction: column; gap: 12px; }
.tier-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; background: #fff; border-radius: 6px;
  border: 1px dashed var(--color-border);
}
.tier-label { font-size: 13px; color: var(--color-text-2); margin: 0; }

/* Commission */
.commission-stat {
  padding: 10px 14px;
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
  border-radius: 6px;
  border-left: 3px solid #0EA5E9;
}
.commission-row {
  padding: 14px;
  background: #FAFAFA;
  border-radius: 8px;
  border: 1px solid var(--color-border);
}
.commission-row-label { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--color-text-1); }

.fund-allocation {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 4px;
  align-items: center;
  padding: 14px 8px;
  background: #fff;
  border-radius: 8px;
}
.fund-card {
  text-align: center;
  padding: 10px 6px;
  border-radius: 6px;
  border: 1px solid;
}
.fund-card-label { font-size: 11px; margin-bottom: 4px; }
.fund-card-value { font-size: 15px; font-weight: 700; }
.fund-card-price { background: #FEF3C7; border-color: #FDE68A; }
.fund-card-price .fund-card-label { color: #92400E; }
.fund-card-price .fund-card-value { color: #B45309; }
.fund-card-staff { background: #F0FDF4; border-color: #BBF7D0; }
.fund-card-staff .fund-card-label { color: #166534; }
.fund-card-staff .fund-card-value { color: #15803D; }
.fund-card-platform { background: #EFF6FF; border-color: #BFDBFE; }
.fund-card-platform .fund-card-label { color: #1E40AF; }
.fund-card-platform .fund-card-value { color: #1D4ED8; }
.fund-card-merchant { background: linear-gradient(135deg, #FFF7F0 0%, #FFE4D6 100%); border-color: #FFB088; }
.fund-card-merchant .fund-card-label { color: #9A3412; }
.fund-card-merchant .fund-card-value { color: #FF6B35; }
.fund-flow { color: #ccc; font-size: 14px; font-weight: 600; }

/* Footer Bar — v1.2.27 重新设计：更轻量 + 半透明背景 + 柔和分隔线 */
.editor-footer {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  height: var(--editor-footer-h, 52px);
  padding: 0 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  z-index: 20;
}
.editor-footer .btn {
  min-width: 88px;
  padding: 6px 18px;
  font-size: 13px;
  border-radius: 6px;
  justify-content: center;
  transition: all 0.15s ease;
}
.editor-footer .btn-primary {
  padding: 6px 22px;
  font-weight: 600;
}
.editor-footer .btn-primary:hover {
  filter: brightness(0.96);
}
.editor-footer .btn-default:hover {
  background: #f5f5f5;
}

/* Toast */
.ce-toast {
  position: fixed; left: 50%; top: 80px;
  transform: translateX(-50%) translateY(-20px);
  background: rgba(0,0,0,0.85); color: #fff;
  padding: 10px 20px; border-radius: 6px;
  font-size: 14px; z-index: 1000;
  opacity: 0; transition: all 0.3s;
  pointer-events: none;
}
.ce-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ce-toast.error { background: rgba(250, 81, 81, 0.95); }
.ce-toast.success { background: rgba(7, 193, 96, 0.95); }

/* Mobile / Narrow */
@media (max-width: 1180px) {
  /* 屏幕窄了就把右侧预览面板折回各 section 内，但当前实现选择隐藏右侧全局预览；
     同时清掉左列 padding-right，否则会留一大块空白。 */
  .global-preview-panel { display: none; }
  .editor-sections { padding-right: 0; }
}
@media (max-width: 900px) {
  .editor-body { flex-direction: column; }
  .fields-grid { grid-template-columns: 1fr; }
  .fund-allocation { grid-template-columns: 1fr 1fr; }
  .fund-flow { display: none; }
  .custom-right-row { grid-template-columns: 1fr; }
}

/* =====================================================
 * 2. 权益配置（玩法切换 + 权益组 + 创建权益弹窗）
 * ===================================================== */

/* 横向 radio（橙点）：基础玩法的可点项 */
.radio-group-inline.row-flex,
.play-mode-wrap .radio-group-inline {
  display: flex;
  flex-direction: row;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}
.radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  color: #262626;
  padding: 4px 0;
}
.radio-inline input[type=radio] {
  width: 16px; height: 16px;
  accent-color: #FF7A45;
  cursor: pointer;
  margin: 0;
}
.radio-inline .radio-dot { display: none; }
.radio-inline .radio-text { line-height: 1.2; }

/* 玩法设置行 */
.play-mode-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: #FFF7E6;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid #FFE7BA;
}
.play-mode-wrap .play-mode-label {
  font-size: 14px; font-weight: 600; color: #874D00;
  flex-shrink: 0;
}
.play-mode-radios { flex: 1; }

/* 模式面板 */
.rights-mode-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}

/* 阶梯玩法占位 */
.tier-mode-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  background: #FAFAFA;
  border-radius: 8px;
  border: 1px dashed #D9D9D9;
  text-align: center;
}
.tier-mode-placeholder .tier-mode-icon { font-size: 48px; margin-bottom: 12px; }
.tier-mode-placeholder .tier-mode-title { font-size: 18px; font-weight: 600; color: #262626; margin-bottom: 8px; }
.tier-mode-placeholder .tier-mode-desc { font-size: 14px; color: #8C8C8C; max-width: 360px; line-height: 1.6; }

/* 空状态：权益组列表 */
.rights-groups-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px;
  background: #FAFAFA;
  border: 1px dashed #D9D9D9;
  border-radius: 8px;
  color: #8C8C8C;
  margin-bottom: 12px;
}
.rights-groups-empty .empty-icon { font-size: 36px; margin-bottom: 8px; }
.rights-groups-empty .empty-text { font-size: 14px; }

/* 权益组盒子 */
.right-group-block {
  background: #fff;
  border: 1px solid #FFD591;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
  position: relative;
}
.right-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed #FFE7BA;
}
.right-group-head .right-group-index {
  background: #FFF7E6;
  color: #D46B08;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.right-group-head-actions { display: flex; gap: 8px; }
.btn-icon-trash,
.btn-icon-trash-sm {
  background: transparent;
  border: 1px solid #FFCCC7;
  border-radius: 6px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}
.btn-icon-trash-sm { width: 28px; height: 28px; font-size: 12px; }
.btn-icon-trash:hover, .btn-icon-trash-sm:hover { background: #FFF1F0; border-color: #FF7875; }

/* 权益组内字段 */
.rg-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.rg-label {
  font-size: 13px;
  color: #595959;
  font-weight: 500;
}
.rg-label.required::before {
  content: '*';
  color: #FF4D4F;
  font-weight: 600;
  margin-right: 4px;
}

/* 权益组内权益子项列表 */
.rg-items-header { margin-bottom: 8px; }
.rg-items-header .rg-label { font-size: 13px; color: #595959; }
.rg-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.rg-items-empty {
  padding: 20px 16px;
  background: #FAFAFA;
  border: 1px dashed #D9D9D9;
  border-radius: 6px;
  color: #8C8C8C;
  font-size: 13px;
  text-align: center;
}
.add-right-item-btn {
  margin-bottom: 8px;
}

/* 单条权益子项盒 */
.rg-right-item-block {
  border: 1px solid #D9D9D9;
  border-radius: 6px;
  padding: 12px 16px;
  background: #FAFAFA;
  margin-bottom: 8px;
}
.rg-right-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed #E8E8E8;
}
.rg-right-item-name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.rg-right-item-handle {
  color: #BFBFBF;
  font-size: 14px;
  cursor: grab;
  user-select: none;
  letter-spacing: -1px;
}
.rg-right-item-handle:active { cursor: grabbing; }
.rg-right-item-name {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 可编辑的名称按钮 —— 鼠标悬停高亮 + 末尾铅笔图标，提示用户可点击编辑 */
.rg-right-item-name-editable {
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
  flex: 1; min-width: 0;
  max-width: 100%;
}
.rg-right-item-name-editable:hover {
  background: #FFF7E6;
  color: #C2361B;
}
.rg-right-item-name-editable:hover::after {
  content: '✎';
  margin-left: 6px;
  font-size: 12px;
  color: #FA8C16;
  font-weight: 700;
}

/* 单条权益子项内的行 */
.rg-right-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.rg-right-item-row-label {
  font-size: 13px;
  color: #595959;
  flex-shrink: 0;
}
.rg-right-item-subrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 4px 90px;
}
.rg-right-item-subrow-label {
  font-size: 13px;
  color: #595959;
}
.rg-narrow-input {
  width: 80px;
  text-align: center;
}
.rg-right-item-subrow-unit {
  font-size: 13px;
  color: #595959;
}
.rg-right-item-subrow-prefix,
.rg-right-item-subrow-suffix {
  font-size: 13px;
  color: #595959;
}

/* 添加权益组按钮 */
.rights-config-fields > .btn {
  margin-top: 4px;
}
.rights-count-hint {
  margin-top: 4px;
  font-size: 12px;
}

/* =====================================================
 * 创建权益 Modal
 * ===================================================== */
.modal-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  animation: modal-fade-in 0.2s ease;
}
@keyframes modal-fade-in { from { opacity: 0 } to { opacity: 1 } }
.modal-dialog {
  background: #fff;
  border-radius: 10px;
  width: 480px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 48px rgba(0,0,0,0.18);
  animation: modal-zoom-in 0.2s ease;
}
@keyframes modal-zoom-in {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.create-right-modal { width: 520px; }
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #F0F0F0;
}
.modal-title { font-size: 19px; font-weight: 600; color: #262626; } /* v1.2.48: 16→19 */
.modal-close {
  width: 28px; height: 28px;
  border: none; background: transparent;
  font-size: 22px; line-height: 1;
  color: #8C8C8C; cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}
.modal-close:hover { background: #F5F5F5; color: #262626; }
.modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  flex: 1;
}
.modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-label {
  font-size: 15px; font-weight: 500; color: #262626; /* v1.2.48: 13→15 */
}
.modal-label.required::before {
  content: '*'; color: #FF4D4F; font-weight: 600; margin-right: 4px;
}
.modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #F0F0F0;
}

/* =====================================================
 * 顾客端手机预览 —— 6 个 slot 共用同一份"图 1 完整版"
 * 样式定义在 .basic-preview-phone（statusbar/navbar/hero/benefits/buy-btn）
 * + .rpp-transfer-btn & .rpp-transfer-modal（转赠按钮 + 底部抽屉）
 * 旧的 .rights-preview-phone / .rpp-banner / .rpp-empty / .rpp-card 系列已合并删除
 * ===================================================== */

/* 给 input-with-counter 在 modal 里也用 */
.modal-field .input-with-counter { max-width: 100%; }

/* ============ 7. 转赠裂变 — 商家后台配置区 ============ */
.transfer-master {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #FFF7E6, #FFEEE0);
  border: 1px solid #FFD8A8;
  border-radius: 10px;
  margin-bottom: 16px;
}
.transfer-master-label { flex: 1; }
.transfer-master-title {
  font-size: 15px;
  font-weight: 700;
  color: #262626;
  margin-bottom: 4px;
}
.transfer-body { transition: opacity 0.2s; }
.transfer-reward-value { padding-left: 20px; border-left: 3px solid #FFD8A8; margin-left: 4px; }

/* 裂变数据预览卡 */
.transfer-stats-card {
  display: flex;
  gap: 8px;
  padding: 16px 12px;
  background: linear-gradient(135deg, #FFF7E6, #FFE7BA);
  border-radius: 10px;
  margin-bottom: 12px;
}
.transfer-stat-item {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  background: rgba(255,255,255,0.6);
  border-radius: 8px;
}
.transfer-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: #FF4D4F;
  line-height: 1.2;
}
.transfer-stat-label {
  font-size: 11px;
  color: #8C8C8C;
  margin-top: 4px;
}

/* 转赠流程示意 */
.transfer-flow-card {
  padding: 14px 16px;
  background: #FAFAFA;
  border: 1px dashed #E8E8E8;
  border-radius: 10px;
  margin-bottom: 12px;
}
.transfer-flow-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.transfer-flow-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F06B3F, #C9271E);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.transfer-flow-text {
  font-size: 13px;
  color: #262626;
  line-height: 1.4;
}
.transfer-flow-arrow {
  text-align: center;
  color: #D9D9D9;
  font-size: 14px;
  line-height: 1;
  padding-left: 12px;
}

/* ============ 顾客端 — 转赠按钮 + 转赠弹窗 ============ */
.rpp-transfer-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 12px 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #F06B3F, #C9271E);
  border-radius: 12px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(201,39,30,0.3);
  transition: transform 0.15s;
}
.rpp-transfer-btn:active { transform: scale(0.98); }
.rpp-transfer-btn-icon { font-size: 20px; }
.rpp-transfer-btn-text {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.rpp-transfer-btn-arrow {
  font-size: 22px;
  font-weight: 300;
  opacity: 0.9;
}

/* ===== 转赠 FAB（v10 悬浮滑动式）=====
 *   原 .rpp-transfer-btn 是横排全宽按钮嵌在 scrollArea 末尾，顾客得滚到底才能看见。
 *   改造成右侧贴边的悬浮按钮，挂 phone 容器（position:absolute + 父 .basic-preview-phone
 *   position:relative），永远在屏、不随内容滚走。
 *
 *   视觉结构：
 *     ┌─────┐
 *     │ ⊙🎁│← 圆形白底 + 🎁 + 右上红「xN」徽章
 *     │     │
 *     │赚   │← 3 行文字：赚 / ¥X.XX / 元
 *     │¥0.00│
 *     │元   │
 *     └─────┘
 *   整体在 phone 右侧（right:6px），垂直居中（top:50% + translateY(-50%)），
 *   z-index 高于 scrollArea 内容但低于 modal。
 *
 *   「悬浮滑动」拆开理解：
 *     悬浮 = 永远贴屏（fixed-like，绝对定位在 phone 容器）
 *     滑动 = 进场动画 slideInFromRight（从屏外右侧 30px 滑入）+ hover 弹缩
 *   视觉效果上像被手机边框"裁掉一半"——左侧圆角、右侧几乎贴边。
 */
/* === 转赠「悬浮滑动式」FAB（v13 瘦身重塑）==========================================
   v12 反馈：FAB 在欢聚卡内容页上偏大、占位显眼，视觉权重盖过了主 CTA
   v13 核心改动（顾客角度）：
     · 整体瘦身：width 64→52、padding 9/10→7/8、高度从 ~95px 减到 ~73px
     · 图标再缩：30→22px —— "提示动作类型"的图标本就该小，主信息是文字
     · 字号同步收：13.5→12px —— 两行等字大原则保留，让 FAB 整体"小一圈"
     · 贴边更紧：right 4→2px —— 视觉上更"嵌入"手机边缘，不抢戏
     · 呼吸再克制：14→17→12→15px —— 让位主 CTA 入场动效
     · 入场再让位：延迟 0.25→0.3s —— 主 CTA 完全平稳后 FAB 才出现
   顾客端体验：v12 FAB 是"主行动按钮"，v13 是"轻盈辅助入口"，
                  一眼看出"主任务是开卡，转赠是顺带的小动作"
*/
/* === 转赠「悬浮滑动式」FAB（v12 重做，注释保留 v11 教训）=======================
   v11 教训：主辅字号差太大（13 vs 9.5px），割裂感强
   v12 核心改动：
     · 字号统一：两行都用 13.5px —— 「转赠好友 共享权益」读起来像一句完整标语
     · 字重保留微弱节奏：主 700 / 辅 600 —— 完全平行=呆板，差距过大=割裂
     · 圆形图标缩小：38→30px —— FAB 核心信息是文字，图标只是动作提示
     /*
   转赠 FAB —— v14「再优化」（44→58 宽松版）
   · 用户实测 v13.1 (44×59) 反馈：① 按钮太小 ② 文字 11px 太拥挤
   · 加宽到 58px（比 v13 大 12%，比 v13.1 大 32%），整体回 v13 上方一档
   · 字号 11→13（v13 是 12，v13.1 是 11，v14 取 13 给拥挤问题"放大字号留白"）
   · letter-spacing 0.5px 让"转赠好友 / 共享权益"四字横排有呼吸，不挤压
   · 图标 22px、emoji 14px，比例与正文协调
   · 右侧呼吸光晕 12→16px，视觉存在感同步扩大
*/
.bpp-transfer-fab {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  z-index: 50;
  width: 58px;                            /* v13 52, v13.1 44 → v14 58：+12% ~ +32% 宽 */
  padding: 8px 0 9px;                     /* v13 7/8, v13.1 5/6 → v14 8/9：内边距加大 */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* v299：与 CTA 主按钮同源暖红渐变（尺寸/位置不动，只统一色彩） */
  background: linear-gradient(180deg, #F06B3F 0%, #C9271E 100%);
  border-radius: 12px 4px 4px 12px;       /* 圆角同比扩大 */
  /* v1.2.15 修复：FAB box-shadow 16px 向外扩散 → 在 phone.r 处和
     panel 内边距一起看，会让红色光晕染到 panel 右边 32px gap 区，
     用户截图反馈"显示不完整、太靠右了"。把 shadow 半径收到 6px、
     透明度降到 0.28，让光晕全部收进 phone 内框。 */
  box-shadow:
    0 2px 6px rgba(201, 39, 30, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  /* 入场让位 + 呼吸：v14 让位延迟微调 0.35→0.3s */
  animation:
    bppFabSlideIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.30s both,
    bppFabPulse 2.6s ease-in-out 0.85s infinite;
}
/* 入场：从右侧 50px 滑入 + 上浮 + 透明度（cubic-bezier 回弹） */
@keyframes bppFabSlideIn {
  0%   { transform: translate(50px, calc(-50% + 8px)); opacity: 0; }
  100% { transform: translate(0, -50%); opacity: 1; }
}
/* 呼吸光晕：v1.2.15 收紧到 0 2px 6px / 0 3px 8px，扩散范围控制在 phone 内 */
@keyframes bppFabPulse {
  0%, 100% {
    box-shadow:
      0 2px 6px rgba(201, 39, 30, 0.28),
      0 1px 2px rgba(0, 0, 0, 0.06);
  }
  50% {
    box-shadow:
      0 3px 8px rgba(201, 39, 30, 0.36),
      0 1px 2px rgba(0, 0, 0, 0.08);
  }
}
/* hover/active：左浮 + 阴影增强（按下去反馈）—— v14 加大左浮幅度 1→2 */
.bpp-transfer-fab:hover {
  box-shadow:
    0 6px 18px rgba(201, 39, 30, 0.45),
    0 2px 4px rgba(0, 0, 0, 0.12);
  transform: translate(-2px, -50%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation-play-state: running, paused;
}
.bpp-transfer-fab:active {
  transform: translate(0, -50%) scale(0.96);
  transition: transform 0.1s;
}

/* —— 顶部图标：22px 白底圆形托盘 + 🎁 emoji（v14 22：与字号 13 黄金比 1.7:1）—— */
.bpp-transfer-fab-icon {
  position: relative;
  width: 22px;                            /* v14 22：与文字 13 比例 1.7:1 */
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #ffffff 0%, #fff7ec 100%);
  border-radius: 50%;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.10),
    inset 0 1px 1px rgba(255, 255, 255, 0.8);
  margin-bottom: 4px;                     /* v14 4：与文字留白加大 */
}
.bpp-transfer-fab-emoji {
  font-size: 14px;                        /* v14 14：emoji 同比放大 */
  line-height: 1;
  display: block;
  transform: translateY(-1px);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

/* —— 底部文字区：两行「转赠好友 共享权益」（v14 字号 11→13，留白 letter-spacing: 0.5px）—— */
.bpp-transfer-fab-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;                               /* v14 3：两行间距加大 */
  color: #fff;
  text-align: center;
}
/* 主文字：13px 700 + letter-spacing 0.5px —— 「转赠好友」= 行为
       v14 关键：字号放大同时给 0.5px 字距，让 4 字 (约 56px 宽) 在 58px 容器里有呼吸
       "转" "赠" "好" "友" 每字约 13.5px，4 字 ≈ 54px + 0.5×3 字距 ≈ 55.5px → 两侧各留 ~1.25px */
.bpp-transfer-fab-text-main {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 15px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
}
/* 辅文字：13px 600 + opacity 0.92 —— 「共享权益」= 价值补充 */
.bpp-transfer-fab-text-sub {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 15px;
  white-space: nowrap;
  opacity: 0.92;
}

/* 转赠弹窗（底部抽屉式） */
.rpp-transfer-modal {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 100;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.25s, visibility 0.25s;
}
.rpp-transfer-modal.show {
  visibility: visible;
  opacity: 1;
}
.rpp-transfer-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.5);
}
.rpp-transfer-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 16px 16px 0 0;
  padding: 20px 16px 16px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.rpp-transfer-modal.show .rpp-transfer-sheet {
  transform: translateY(0);
}
.rpp-transfer-sheet-title {
  font-size: 15px;
  font-weight: 700;
  color: #262626;
  text-align: center;
  margin-bottom: 16px;
}
/* v1.2.43 — 转赠权益选择器（picker）
   当权益一组下 ≥2 张可转赠券时显示；横滑 chip 横向排列 */
.rpp-transfer-picker {
  margin-bottom: 14px;
  padding: 0 4px;
}
.rpp-transfer-picker-label {
  font-size: 12px;
  color: #8C8C8C;
  margin-bottom: 8px;
  padding-left: 2px;
}
.rpp-transfer-picker-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rpp-transfer-picker-list::-webkit-scrollbar { display: none; }
.rpp-transfer-picker-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  border-radius: 18px;
  background: #F5F5F5;
  color: #595959;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s ease;
  border: 1px solid transparent;
}
.rpp-transfer-picker-chip.is-active {
  background: linear-gradient(135deg, #FFE7BA 0%, #FFD591 100%);
  color: #874C00;
  border-color: #FFB260;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(255, 138, 0, 0.18);
}
/* 分享卡片预览 */
.rpp-transfer-share-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(135deg, #FFF7E6, #FFE7BA);
  border-radius: 12px;
  margin-bottom: 12px;
  align-items: center;
  transition: background 0.25s ease;
}
.rpp-transfer-share-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  /* v299：转赠分享缩略图与 CTA/FAB 同源暖红渐变 */
  background: linear-gradient(135deg, #F06B3F, #C9271E);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  /* 票根虚线内描边 —— 暗示这是张"代金券"而不是普通图标 */
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.5),
    inset 0 0 0 3px rgba(201, 39, 30, 0.85);
  /* 票根齿孔：上下两条短白色横线，模拟撕角效果 */
}
.rpp-transfer-share-thumb::before,
.rpp-transfer-share-thumb::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 1px;
}
.rpp-transfer-share-thumb::before { top: 3px; }
.rpp-transfer-share-thumb::after  { bottom: 3px; }
/* 大字金额：¥100 —— 18px 800 字重紧凑 */
.rpp-transfer-share-thumb .thumb-amount {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
/* 小字标签：代金券 —— 9px 600 + 微间距 */
.rpp-transfer-share-thumb .thumb-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-top: 3px;
  opacity: 0.95;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.rpp-transfer-share-body { flex: 1; min-width: 0; }
.rpp-transfer-share-title {
  font-size: 14px;
  font-weight: 700;
  color: #262626;
  margin-bottom: 4px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rpp-transfer-share-desc {
  font-size: 12px;
  color: #8C8C8C;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.rpp-transfer-remain {
  font-size: 12px;
  color: #8C8C8C;
  text-align: center;
  margin-bottom: 14px;
  padding: 8px;
  background: #FAFAFA;
  border-radius: 6px;
}
.rpp-transfer-send-btn {
  display: block;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #F06B3F, #C9271E);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 8px;
  box-shadow: 0 2px 8px rgba(201,39,30,0.25);
}
.rpp-transfer-send-btn:active { transform: scale(0.98); }
.rpp-transfer-cancel-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: #F5F5F5;
  color: #595959;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
}

/* =====================================================
   1. 基础配置 — 顾客端"欢聚卡活动页"手机预览（实时同步）
   版式：状态栏 + 导航栏 + 用户头像横条 + 大 Hero 卡面 + 权益卡片列表
   ===================================================== */
.basic-preview-box { padding: 8px; }
.basic-preview-phone {
  width: 100%;           /* v1.2.16 修复：之前硬编 360px > panel 内宽 328px → 右侧被裁 / FAB 越界 */
  max-width: 360px;      /* 但不超过原设计宽度，保持手机视觉 */
  min-width: 0;
  /* v1.2.27 重构：phone 自适应 panel content 高度，不再用 min(720, 100vh-200) 固定计算
     - panel 是 flex column，phone 是 flex: 1 + max-height: 720px
     - 这样 panel 高度怎么变 phone 都跟随，不会"截掉底部"或"留空白"
     - 短视口时 phone 自适应，scrollArea 内滚动让 CTA 卡永远露底 */
  max-height: 720px;
  flex: 1;
  min-height: 0;
  margin: 0 auto;
  position: relative;
  background: #FDF9F3;   /* v299：冷灰 #f2f3f5 → 暖米白，与卡面枣红/金同色温 */
  border: 8px solid #1a1a1a;
  border-radius: 32px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #262626;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}

/* —— 滚动内容区：状态栏/导航栏下方，撑满剩余高度 ——
   由 syncPreviewPhoneScroll() 按 window.scrollY 比例驱动 scrollTop，
   隐藏滚动条避免与主页 window 滚动产生冲突。 */
.bpp-scroll-area {
  flex: 1; min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* v299：冷灰 → 暖米白微渐变，白卡区块浮在暖底上层次更柔和，
     与卡面枣红 #9C2B1F + 金色装饰同色温，整页色温统一 */
  background: linear-gradient(180deg, #FDF9F3 0%, #F8F1E7 100%);
  /* 隐藏滚动条 —— firefox */
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}
.bpp-scroll-area::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* —— 状态栏 —— */
.bpp-statusbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 16px;
  background: #fff; color: #1a1a1a;
  font-size: 11px;
  font-weight: 600;
}
.bpp-statusbar .bpp-icons { letter-spacing: 1px; }

/* —— 导航栏（左侧返回 + 中间标题 + 右侧菜单） —— */
.bpp-navbar {
  display: flex; align-items: center;
  background: #fff;
  padding: 6px 12px;
  border-bottom: 1px solid #f5f5f5;
  font-size: 13px;
  color: #262626;
}
.bpp-nav-back {
  font-size: 22px;
  font-weight: 600;
  color: #1a1a1a;
  width: 24px;
  text-align: center;
  line-height: 1;
}
.bpp-nav-title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  color: #1a1a1a;
  display: flex;
  align-items: baseline;
  justify-content: center;
  min-width: 0;          /* 允许 flex 子项收缩触发省略号 */
  overflow: hidden;
  white-space: nowrap;
}
/* v174：navbar 标题主副分层（优雅专业，中点作为视觉分隔，副标弱化不抢戏）
   v318：去掉副标后做单行结构，main 13→16 加粗 600→700 让「欢聚卡 吃得好 花得少」单行更突出；颜色保持 #1a1a1a 不越权 */
.bpp-nav-title-main {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}
.bpp-nav-title-sep {
  font-size: 13px;
  color: #C0C0C0;
  font-weight: 400;
  flex-shrink: 0;
}
.bpp-nav-title-sub {
  font-size: 12px;
  font-weight: 500;
  color: #8C8C8C;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.bpp-nav-right {
  display: flex; gap: 8px;
  font-size: 13px;
  color: #1a1a1a;
}

/* —— 用户头像横条 —— */
/* v160 顾客社交热度条：极简化让位给 hero。
   - 去掉头像/emoji/金边/滚动色块（v158 跑马灯也下线）
   - 整体高度 30px，单行灰字+极淡胶囊
   - 边框 0.5px 极淡（让分隔感在但视觉不抢）
   - 与下方 hero 卡面（红+金）拉开层次 */
/* =====================================================
   v1.2.47 · 用户社交热度条（v169 改版：左裸化+上下滚动）
   模板：左裸文字流（无胶囊背景）+ 右静态数据胶囊（保留视觉锚点）
   左 = 白圆头像 + 滚动文字（每 3s translateY 向上滚动一格，无缝循环）
   右 = 🔥 + 「已售 N 张」红色字体（白底浅边胶囊保留）
   左右反差：动态裸文字 vs 静态数据胶囊，有层次不重复
   ===================================================== */
.bpp-user-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff;
  padding: 9px 12px;
  border-bottom: 0.5px solid #f0f0f0;
  overflow: hidden;
  min-height: 36px;
}

/* 左胶囊：v169 裸化——去掉白底/边框/圆角，只剩头像+文字流 */
.bpp-user-pill-left {
  flex: 1;
  min-width: 0;
  display: flex; align-items: center; gap: 6px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  height: auto;
  max-width: none;
  overflow: hidden;
}

/* 滚动容器：固定高度 16px（容纳一行 10.5px 文字），溢出隐藏 */
.bpp-scroll {
  flex: 1;
  min-width: 0;
  height: 16px;
  overflow: hidden;
  position: relative;
}

/* 滚动 track：垂直堆叠所有文案，每条 16px 高，translateY 切换 */
.bpp-scroll-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* 单条文案行：v171 字号 11.5px → 10.5px，权重 500，精致化 */
.bpp-scroll-item {
  height: 16px;
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px;
  color: #595959;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.bpp-scroll-item-avatar {
  font-size: 10.5px;
  flex-shrink: 0;
  filter: grayscale(0.3);
  line-height: 1;
}

/* 右侧数据胶囊：保留白底浅边 1px + 圆角 16px，作为静态视觉锚点 */
.bpp-user-pill-right {
  display: flex; align-items: center; gap: 5px;
  background: #fff;
  border: 1px solid #EEEEEE;
  border-radius: 16px;
  padding: 2px 8px;
  height: 22px;
  line-height: 1;
  flex-shrink: 0;
}

/* 火焰 emoji：用 font-size 控制视觉尺寸 */
.bpp-user-pill-flame {
  font-size: 11.5px;
  line-height: 1;
  flex-shrink: 0;
}

/* 胶囊主文字：v171 11.5px → 10.5px，跟左侧滚动文字保持视觉一致 */
.bpp-user-pill-text {
  font-size: 10.5px;
  color: #262626;
  font-weight: 500;
  white-space: nowrap;
}

/* v167：右胶囊「已售 N 张」红色字体，呼应 hero 主题色 + 增强「抢」氛围 */
.bpp-user-pill-text-hot {
  color: #E63946;
  font-weight: 600;
}

/* =====================================================
   默认卡面 — VIP 会员卡（ISO 7810 ID-1 标准比例）横版
   配色：酒红底 + 金色装饰 + 琥珀暖光，象征欢聚、庆祝、温暖
   7 元素：①左上门店简称 ②左下权益主题 ③左下角感恩回馈+原价
           ④右下角有效期 ⑤右上VIP欢聚卡标识 ⑥欢聚主题配色 ⑦文字可编辑
   ===================================================== */
.card-face-700x310 {
  position: relative;
  width: 100%;                             /* v313：92%→100%，恢复"卡面占满视觉中心"的简洁形态（v310 镶金边版越权装饰） */
  margin: 0;                               /* v313：去 12px 底边距，回到 v309 干净排版 */
  /* v309：比例 700/310(2.258:1 偏扁像电影票) → 700/440(1.591:1 接近 ISO 7810 ID-1 VIP 卡物理比例 86:54)
     让卡面像真实可触摸的 VIP 会员卡，而不是横幅——用户明确要求"标准尺寸比例"必须保留 */
  aspect-ratio: 700 / 310;               /* v314：v309/v313 的 700/440 用户不认，回到 v296 原始扁长比例 */
  border-radius: 12px;                     /* v313：16→12，回滚 v310 加大的"尊享圆角"——跟整体 12px 语言保持一致 */
  overflow: hidden;
  color: #fff;
  font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  isolation: isolate;
  /* v313：回滚 v310 三层"镶金边+外光+沉影"尊享包装，回到简洁单层酒红投影——
     卡面金边是过度装饰，让卡看起来像廉价徽章而非尊贵 VIP 会员卡 */
  box-shadow: 0 4px 14px rgba(123, 30, 58, 0.3);
  flex-shrink: 0;
}
/* —— v236：X5/旧内核兜底 ——
   aspect-ratio 需 Chromium 88+；微信安卓 X5（Chromium 86）不支持 →
   hero 高度塌陷为 0 → 顾客扫码看到「已售 N 张」直接跳「权益一」（真机 hero 消失根因）。
   不支持的内核用 padding-top 百分比撑高（hero 全部子元素均为 absolute，padding 不会顶出内容）。
   v309：44.2857%(310/700) → 62.8571%(440/700)，跟新比例 700/440 同步 */
@supports not (aspect-ratio: 700 / 310) {
  .card-face-700x310 { padding-top: 44.2857%; } /* 310 / 700 → v296 原始比例 */
}

/* —— ⑥ 欢聚卡主题配色：酒红丝绸渐变 —— */
/* ========= 默认卡面（深色品牌卡 · 顶行+权益+价格+有效期）========= */
/* 阶段十七：参考「沁园醉羊蝎子火锅 欢聚卡」参考图改成深色调卡面              */
.cf-default {
  background:
    /* 顶部高光 → 底部深色，体现深蓝夜空层次 */
    linear-gradient(180deg, #2A3142 0%, #1A1F2E 60%, #14181F 100%);
}
/* 下半部分：红色丝绸质感（褶皱光影）—— 呼应参考图红丝绸 */
.cf-silk-bottom {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 40%;
  background:
    /* 暖橙丝绸高光（左下+右下） */
    radial-gradient(ellipse at 15% 100%, rgba(255, 110, 60, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 95%, rgba(255, 150, 70, 0.30) 0%, transparent 60%),
    /* 丝绸主体：暖红渐变 + 暗角 */
    linear-gradient(180deg,
      rgba(124, 18, 38, 0.88) 0%,
      rgba(190, 50, 55, 0.96) 35%,
      rgba(160, 25, 38, 1) 70%,
      rgba(85, 10, 24, 1) 100%);
  z-index: 1;
  pointer-events: none;
}
/* 丝绸上的褶皱高光 + 暗纹（用伪元素叠加） */
.cf-silk-bottom::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background:
    linear-gradient(180deg,
      transparent 0%,
      rgba(255, 180, 130, 0.10) 30%,
      rgba(255, 210, 150, 0.20) 55%,
      rgba(80, 5, 18, 0.55) 100%);
  pointer-events: none;
}
.cf-silk-bottom::after {
  content: '';
  position: absolute;
  left: -8%; right: -8%; top: 25%;
  height: 50%;
  background:
    radial-gradient(ellipse 75% 30% at 28% 30%, rgba(0, 0, 0, 0.30) 0%, transparent 70%),
    radial-gradient(ellipse 60% 25% at 75% 65%, rgba(0, 0, 0, 0.22) 0%, transparent 70%);
  filter: blur(8px);
  pointer-events: none;
}
/* 中部偏下：金色弯曲光带（参考图正餐版标志性视觉） */
.cf-gold-wave {
  position: absolute;
  left: -8%; right: -8%;
  top: 62%;
  height: 18px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 215, 120, 0.4) 12%,
    rgba(255, 240, 180, 0.95) 50%,
    rgba(255, 210, 100, 0.4) 88%,
    transparent 100%);
  filter: blur(0.6px);
  transform: rotate(-3deg);
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  box-shadow:
    0 0 16px 2px rgba(255, 200, 80, 0.45),
    0 0 30px 4px rgba(255, 180, 60, 0.25);
}
.cf-color { background: var(--cf-base-color, #7B1E3A); }
.cf-image .cf-bg-img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* 自定义图片模式：不叠加任何默认卡面底色/蒙层，让用户图片完整呈现
   —— v234：仅给图片加载中的空窗期一个深色兜底底，避免图片未就绪时卡面短暂透明/纯白 */
.cf-image { background: linear-gradient(180deg, #2A3142 0%, #14181F 100%); }

/* —— v234：短码落地页 fetch 失败/重试条 —— */
.customer-card-loadbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px auto 0;
  padding: 10px 14px;
  max-width: 420px;
  border: 1px solid #f0c36d;
  background: #fffaf0;
  border-radius: 10px;
  font-size: 13px;
  color: #8a5a00;
  line-height: 1.5;
}
.customer-card-loadbar button {
  flex-shrink: 0;
  border: none;
  background: #f0a122;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.customer-card-loadbar button:hover { background: #e08e0e; }

/* —— v270：fetch 彻底失败的卡面遮罩 —— 盖住内置演示卡（门店简称/总店/新城店等演示数据），
   只显示失败原因 + 重试，杜绝「加载失败却显示别家假卡」的张冠李戴 —— */
.cc-fail-veil {
  position: absolute;
  /* X5 兼容铁律：Chromium 86 不支持 inset，用四边显式写法 */
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: linear-gradient(180deg, #1E2430 0%, #14181F 100%);
  border-radius: inherit;
}
.cc-fail-icon { font-size: 40px; line-height: 1; opacity: .9; }
.cc-fail-title { font-size: 17px; font-weight: 700; color: #FFFFFF; }
.cc-fail-desc { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.7; }
.cc-fail-retry {
  margin-top: 6px;
  border: none;
  background: linear-gradient(135deg, #F06B3F 0%, #C9271E 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 10px 32px;
  border-radius: 999px;
  cursor: pointer;
}
.cc-fail-retry:hover { filter: brightness(1.08); }

/* —— 装饰：金色光带 + 暖光晕 —— */
/* 默认卡面专用：金色弯曲光带（cf-gold-wave）+ 红丝绸下半区（cf-silk-bottom）已替代 cf-lightbeam */

/* 欢聚暖光晕（右上角金色径向光） */
.cf-glow {
  position: absolute;
  right: -10%; top: -15%;
  width: 55%; height: 70%;
  background: radial-gradient(ellipse, rgba(255, 190, 60, 0.18) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
}

/* —— 内容层 ——
   v311：justify-content:space-between 让顶行/中部主题/底部双胶囊三段均布，
         解决 v310 截图「主文紧贴顶行、下方空一大段、底部两只胶囊挤一排」的失衡问题
         padding-bottom 10→8 给金线 + 底部胶囊多留 4px 呼吸 */
.cf-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 2;
  padding: 10px 14px 10px;               /* v314：去 v311 加的 justify-content:space-between + padding 8，回到 v296 原始布局 */
  display: flex;
  flex-direction: column;
}                              /* v314：去 v311 加的 justify-content:space-between，回到 v296 原始 padding+默认起点布局 */

/* 顶部行：v311 紧凑化降档——让中部主文成为视觉焦点
   - logo 32→28（小一档，跟右侧 13px 文字形成清晰对比）
   - brand-name 14→13（解决"蒙太火锅（朝阳店）" 14px 在 200px max-width 被 ellipsis 的截断问题）
   - card-type-main 14→13（与 brand 同阶，徽章 VIP欢聚卡是焦点而非顶行焦点）
   - 顶行总高度从 ~32px → ~28px，给中部主文+底部留出更紧凑的视觉呼吸 */
.cf-topbar {
  display: flex;
  align-items: center;
  gap: 6px;                          /* v314：5→6 回到 v296 原始间距 */
  flex-shrink: 0;
}
.cf-logo {
  width: 32px; height: 32px;          /* v314：28→32 回到 v296 logo 尺寸 */
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 0%, #FFE7BA 100%);
  border: 1.5px solid #E8B445;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  /* v311：随尺寸 32→28 同步微调外圈金边厚度，确保新尺寸下仍有"金盾贴纸"质感 */
  box-shadow:
    inset 0 0 2px rgba(232, 180, 69, 0.18),
    0 0 0 1px rgba(255, 231, 186, 0.30);
}
.cf-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-logo-default { background: linear-gradient(135deg, #FFD591, #E8920C); }
.cf-logo-default span { font-size: 11px; line-height: 1; }

/* 品牌名：v311 缩档 + 扩大 max-width
   - 14→13 让位中部主文，仍保持可读（13px 是微信小程序正文标准字阶下限）
   - max-width 200→280 修复"蒙太火锅（朝阳店）"被截断（v304 ~v310 截图全部问题） */
.cf-brand-name {
  font-size: 14px;                     /* v314：13→14 回到 v296 品牌名字号 */
  font-weight: 700;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 0 6px rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;                    /* v314：280→200 回到 v296 截断范围 */
  letter-spacing: 0.3px;
}
/* 竖线分隔符（参考图中间那个细竖条） v311：缩档同步——14→13px 顶行字号 */
.cf-brand-divider {
  width: 1px;
  height: 16px;                         /* v314：14→16 回到 v296 顶行竖条高度 */
  background: rgba(255, 255, 255, 0.45);
  flex-shrink: 0;
}
/* 卡类型名 v311：14→13 与品牌名同阶，形成清晰的顶行品牌识别 */
.cf-card-type {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  line-height: 1.2;
  white-space: nowrap;
}
.cf-card-type-main {
  font-size: 14px;                     /* v314：13→14 回到 v296 卡类型主字号 */
  font-weight: 700;
  color: #E8B445;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.cf-card-type-sub {
  font-size: 11px;
  font-weight: 400;
  color: rgba(232, 180, 69, 0.78);
  letter-spacing: 1px;
  margin-left: 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* —— ⑤ 右上区域：VIP欢聚卡金色印章 —— */
.cf-vip-badge {
  position: absolute;
  right: 12px;
  top: 10px;
  z-index: 3;
  pointer-events: none;
}
.cf-vip-badge-inner {
  display: inline-block;
  padding: 4px 12px;
  border: 1.5px solid rgba(232, 180, 69, 0.7);
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(139, 21, 56, 0.6) 0%, rgba(92, 13, 34, 0.5) 100%);
  box-shadow: 0 0 8px rgba(232, 180, 69, 0.2), inset 0 0 6px rgba(232, 180, 69, 0.1);
}
.cf-vip-badge-text {
  font-size: 14px;                      /* v296：13→14 跟顶行同阶，徽章与品牌行视觉平衡 */
  font-weight: 900;
  font-style: italic;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #FFE7BA 0%, #F5D67E 40%, #E8B445 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
  font-family: 'Impact', 'STHeiti', 'Heiti SC', sans-serif;
  white-space: nowrap;
}

/* —— ② 中部：权益主题（醒目大字）—— */
/* —— ② 中部：权益主题（v1.2.31 双行化：算式诉求「300变500」 + 礼物诉求「再送998元五粮液」） —— */
/*    整体 flex 撑满剩余空间，让主题字占据卡的视觉重心；
       内部两行：算式金色 24px + 礼物白色 15.5px，
       文字阴影增强暖色金色光晕 (rgba 232,180,69,0.22)，让"权益主题"在红丝绸上突出 */
/* v311：主文下方加一道 60px 宽金色短横线（::after 伪元素）——视觉锚点 + 节奏分层
   解决 v304~v310 「主文到卡底空一大段」的视觉稀疏问题，让顶/中/底三段各有清晰锚点
   - margin-top:auto + margin-bottom:14 让主文被 push 到 hero 上下等距位置
   - padding-bottom 12 留 12px 给 ::after 金线，::after 在 padding 区间外 */
.cf-benefit-theme {
  margin-top: 14px;                     /* v314：auto→14 回到 v296 原始顶部距离，让主文紧跟顶行 */
  margin-bottom: auto;                  /* v314：14→auto 让主文撑满中部空间 */
  font-size: 18px;
  font-weight: 900;
  color: #FFE7BA;
  line-height: 1.3;
  letter-spacing: 0.3px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7), 0 0 14px rgba(232, 180, 69, 0.28);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
/* v314：去掉 v311 加的 ::after 金色短横线，回到 v296 简洁形态 */

/* —— ③ 中部下方：促销价（v1.2.31 弱化为副价，让位中部双行主题字） —— */
/*    「感恩回馈」 + ¥1498 元，主价从 26 → 22px，符号/元单位同步降级 */
/*    v299：曾尝试 row 内联 + padding-bottom 12px 整块下沉，但用户要求整组放卡底左下角 */
/*    v302：改成整组 absolute 贴卡底左（left:14 bottom:10） */
/*    v304：用户反馈"价格块在左下抢眼，应放右下跟 validity 形成右侧双层堆叠，整档字号再收一档" */
/*         → 改 left:14 → right:14、bottom:10 → bottom:32（叠在 validity 10px 上方一行） */
/*         右上指示 chip + 中部主识别行不动；右下区域彻底让位给"感恩+价"+"有效期"双层叠放 */
.cf-price-block {
  position: absolute;
  left: 14px;                         /* v308：从右下(right:14)→ 左下，跟右下的 .cf-validity 形成左右对称呼应 */
  bottom: 10px;                       /* v308：32→10，跟 validity(bottom:10) 同水平两侧分布，零垂直挤撞 */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;                          /* v304：8→6 缩组内间距，配合整组收紧 */
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  z-index: 3;
}
/* 「感恩回馈」—— v311：从胶囊改为无底色暖金字标签
   让 1498 数字成为底部视觉焦点（左下就 1498 一组独大），1500 元跟右下 180日有效 之间有节奏对比
   - 删 rgba(201,39,30,.85) 红胶囊底（避免与左侧 1498 暖字争抢焦点）
   - 删 padding/border-radius（无胶囊形态）
   - 字号跟 .cf-validity(10px) 同次副级，letter-spacing 1.5 让四字标签更舒展 */
/* v314：9.5/10.5/16/9 → 11/12/18/10 上调一档但不超过 v304 公认上限（v304=11/12/18/10）
   让左下「感恩回馈 ¥1498 元」整体视觉权重提升，与右下「购买后180日有效(10px)」形成主次感 */
.cf-thanks-label {
  font-size: 11px;                     /* v315：9.5→11 感恩回馈红胶囊回到 v304 公认尺寸 */
  font-weight: 600;                    /* v314：500→600 回到 v296 字重 */
  color: #FFD591;
  background: rgba(201, 39, 30, 0.85); /* v314：恢复 v296 红胶囊底色 */
  padding: 2px 7px;
  border-radius: 9px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
/* 价格块：¥符号 + 数字 + 元 */
.cf-big-price {
  display: flex;
  align-items: baseline;
  gap: 1px;
  line-height: 1;
}
/* ¥ 符号：v315 10.5→12 跟 v304 公认尺寸同步，v321 12→13 跟 .cf-big-num 同步放大，整组协调 */
.cf-big-symbol {
  font-size: 13px;
  font-weight: 700;
  color: #FFD591;
  margin-right: 1px;
}
/* v1498 数字：v315 16→18（v304 公认上限），v318 18→20 中间档（介于 v304=18 / v296=22 之间，不越界 v296）
   v321 20→22：用户第三次要求放大，回到 v296 之前的尺寸上限，但不超不挤不动顶部 .cf-benefit-theme(18px) 主文 */
.cf-big-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
  color: #FFE7BA;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  margin: 0 1px;
}
/* 元：v315 9→10 跟 v304 公认尺寸同步，v321 10→11 跟 .cf-big-num 同步放大，整组协调 */
.cf-big-unit {
  font-size: 11px;
  font-weight: 600;
  color: #FFD591;
  margin-left: 2px;
}

/* ④ 右下角：有效期（绝对定位贴卡面右下）
   v296：9→10.5（9px 几乎半个像素肉眼看不清）
   v297：10.5→10（v296 矫枉过正，10.5 与感恩回馈 11px 同级抢焦点；回到副级 10px，
        比感恩回馈小 1px 让位，但仍比 v296 前 9px 略大保可读）
   v304：感恩+价挪到 right:14 bottom:32，跟 validity(bottom:10) 同列叠放两侧
   v305：擅自把 validity 也调整（right/bottom/size 都缩）→ 用户明确否决，vality 本就在右下不应再动
   v307：完整回滚到 v304 状态 —— right:14 bottom:10 font-size:10 padding:2.5px 7px z-index:3
        教训：用户说"X 挪到右下"应只动 X，不要顺手动同区域其他元素（vality 本就贴右下无脑再调）
   v316：去掉黑胶囊底 + 金色细描边 + padding + radius，改成纯暖金字角标（跟左下价格块 #FFD591 同色系呼应）
        保留 right:14 bottom:10 font-size:10 z-index:3 仅换视觉形态不挪位置 */
.cf-validity {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-size: 10px;
  color: #FFD591;                          /* v316：白字 → 暖金字，跟左下感恩回馈胶囊 #FFD591 同色系呼应 */
  background: transparent;                 /* v316：rgba(0,0,0,.4) 黑胶囊底 → 透明 */
  padding: 0;                              /* v316：2.5px 7px → 0，去胶囊形态 */
  border-radius: 0;                        /* v316：10px → 0 */
  border: 0;                               /* v316：1px solid rgba(232,180,69,.25) → 0，去金色细描边 */
  white-space: nowrap;
  font-weight: 500;
  text-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.55);  /* v316：阴影从 0.3 强化到 0.55，无胶囊底后深红底上需更强字阴影防糊 */
  flex-shrink: 0;
  z-index: 3;
}

/* =====================================================
   权益列表（白色卡片背景中的优惠券区块）
   设计要点：手机端浏览，简洁清晰
   - 每个权益组 = 一张白底圆角大卡（外层）
   - 内部头部：「权益一：xxx」+ 灰色副标题
   - 内部子项 = 券卡（chip + 标题 + desc + 右侧 ×N）
   ===================================================== */
.activity-benefits {
  background: #fff;
  padding: 0 0 14px;
}

/* —— 权益组外层大卡 ——
   v299：圆角 10→12 / 描边冷灰→暖调 / 阴影统一，三张区块卡（权益组/门店/规则）同一套卡片语言 */
.activity-benefit-group-card {
  margin: 12px 12px 0;
  background: #fff;
  border: 1px solid #F3EBDE;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* —— 权益组头部（在大卡内部，纯文本排版） —— */
.activity-benefit-group-header {
  padding: 14px 14px 12px;
  border-bottom: 1px dashed #F0F0F0;
}
.activity-benefit-group-title {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #262626;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
/* v1.2.34 恢复「权益一/二/三」编号徽章 —— 金色胶囊，提升顾客价值感知 */
.activity-benefit-group-idx {
  display: inline-block;
  flex-shrink: 0;
  padding: 2px 9px;
  margin-right: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #E8B445, #D4A017);
  border-radius: 4px;
  letter-spacing: 1px;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(212, 160, 23, 0.25);
}
.activity-benefit-group-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-benefit-group-desc {
  font-size: 12.5px;   /* v299：12 → 12.5，副级说明可读性微调 */
  color: #8C8C8C;
  margin-top: 4px;
  line-height: 1.5;
}

/* —— 券卡：chip + 标题 + 单行 desc + ×N —— */
.activity-coupon-card {
  /* 大卡内部子项，缩进归零 */
  margin: 7px 10px;
  display: flex; align-items: stretch; justify-content: space-between;
  border-radius: 8px;
  overflow: hidden;
  /* 主推券卡用更柔和的米色渐变（避免视觉过载） */
  background: linear-gradient(135deg, #FFFBF0 0%, #FFF1D6 100%);
  border: 1px solid #FFE7BA;
  box-shadow: 0 1px 2px rgba(212, 56, 13, 0.03);
}
.activity-coupon-card.muted {
  background: #FAFAFA;
  border: 1px solid #ECECEC;
  box-shadow: none;
}
/* 第一个子项贴近头部，最后一个贴近卡底 */
.activity-coupon-card:first-of-type { margin-top: 10px; }
.activity-coupon-card:last-of-type  { margin-bottom: 10px; }

/* 主信息区 */
.activity-coupon-body {
  flex: 1; min-width: 0;
  padding: 11px 12px 12px 14px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 4px;
}

/* chip —— 比之前更精致：浅底 + 橙字 + 细边，比饱和渐变更克制
   v299：10 → 11px，chip 文字（如「开卡可用」）真机可读性提升 */
.activity-coupon-chip {
  display: inline-block;
  align-self: flex-start;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.activity-coupon-card.primary .activity-coupon-chip {
  color: #D4380D;
  background: #FFF1D6;
  border: 1px solid #FFD591;
}
.activity-coupon-card.muted .activity-coupon-chip {
  color: #389E0D;
  background: #F6FFED;
  border: 1px solid #B7EB8F;
}

/* 主标题 */
.activity-coupon-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-all;
  margin-top: 1px;
}
.activity-coupon-card.primary .activity-coupon-name { color: #C2361B; }
.activity-coupon-card.muted  .activity-coupon-name { color: #262626; }

/* 单行 desc —— 加右侧 fade 渐变，文字看起来更自然而非生硬截断 */
.activity-coupon-desc {
  position: relative;
  font-size: 11px;
  color: #8C8C8C;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 18px;     /* 给 fade 让位 */
}
/* 右侧 12px 渐变到透明，让省略号不显得突兀 */
.activity-coupon-card.primary .activity-coupon-desc::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 18px;
  background: linear-gradient(to right, transparent, #FFFBF0 80%);
  pointer-events: none;
}
.activity-coupon-card.muted .activity-coupon-desc::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 18px;
  background: linear-gradient(to right, transparent, #FAFAFA 80%);
  pointer-events: none;
}

/* 右侧：票券式 —— 虚线分隔 + 浅色块承载 ×N 次 */
.activity-coupon-right {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex-shrink: 0;
  min-width: 64px;
  padding: 0 10px;
  position: relative;
}
.activity-coupon-card.primary .activity-coupon-right {
  background: rgba(250, 140, 22, 0.05);
  border-left: 1px dashed rgba(212, 56, 13, 0.22);
}
.activity-coupon-card.muted .activity-coupon-right {
  background: rgba(0, 0, 0, 0.02);
  border-left: 1px dashed rgba(0, 0, 0, 0.10);
}

.activity-coupon-count {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.5px;
}
.activity-coupon-card.primary .activity-coupon-count { color: #D4380D; }
.activity-coupon-card.muted  .activity-coupon-count { color: #595959; }

/* 不限次数 —— 「∞」字号放大、不用×前缀，配「不限」胶囊小字，更优雅 */
.activity-coupon-right.is-unlimited .activity-coupon-count {
  font-size: 30px;
  letter-spacing: 0;
  font-weight: 800;
}
.activity-coupon-right.is-unlimited .activity-coupon-count-unit {
  margin-top: 3px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #FA541C;
  background: rgba(250, 84, 28, 0.08);
  padding: 1px 6px;
  border-radius: 6px;
}
.activity-coupon-card.muted .activity-coupon-right.is-unlimited .activity-coupon-count-unit {
  color: #595959;
  background: rgba(0, 0, 0, 0.04);
}

/* 周期次数 —— / 周/月/日 比"次"语义更清楚 */
.activity-coupon-right.is-cycle .activity-coupon-count-unit {
  color: #FA541C;
  font-size: 11px;
}

.activity-coupon-count-unit {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
  color: #8C8C8C;
  letter-spacing: 0.5px;
}

/* —— 空状态 —— */
.activity-benefits-empty {
  margin: 14px 10px;
  padding: 30px 16px;
  text-align: center;
  color: #bfbfbf;
  font-size: 13px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px dashed #e8e8e8;
}
.activity-benefits-empty-icon { font-size: 28px; margin-bottom: 6px; opacity: 0.6; }
.activity-benefits-empty-sub { font-size: 11px; color: #bfbfbf; margin-top: 3px; }

/* —— 一体化「开卡价值卡」（v9）= 按钮(.bpp-buy-btn) + 价值锚副卡(.bpp-buy-hint) —— */
/*    C 端顾客端体验优化：原本按钮和米黄副卡是 2 个独立视觉组件，C 端看到会觉得"两块并列"，
       现在包在同一张 .bpp-cta-card 容器里，圆角共享、阴影共享，作为 1 个价值单元
       按钮作为卡片上半段（橙红 CTA），价值锚作为卡片下半段（米黄锚定），
       二者无缝拼接，C 端心智上是"看到 1 张开卡卡"，不是"看到 2 个组件" */
/*    v9 副卡由 2 行精简为 1 行：去掉稀缺性/slogan 行，padding 收紧、字号与按钮节奏更接近 */
/*    v1.2.22 关键回滚：放弃 v1.2.19 过度压缩策略（hintCard 压到 2-3px padding + 10.5px 字号
       + max-height:900/720px 触发激进压缩），恢复 hintCard 完整视觉
       用户反馈："想在手机预览图里能看到 享1498权益，当餐立减100元 这一行"
       → hintCard 必须有足够高度 + 显著字号 + 显眼颜色，否则"显示但显示不全"
       计算：phone height 在 720 视口下 = 520px，cta-card 总高 ~110px，scrollArea 仍剩 ~410px
       → 3-4 个权益卡完全装得下，不需要靠压缩 CTA 卡来让位 */
.bpp-cta-card {
  margin: 8px 14px 12px;     /* v1.2.22：从 v1.2.19 的 4/6 恢复到 8/12，给 CTA 卡舒展空间 */
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(201, 39, 30, 0.22);   /* 略加重阴影，让副卡更立体 */
  overflow: hidden;
  isolation: isolate;
  flex-shrink: 0;
  background: #FDF9F3;   /* v299：与页面暖米白同温（原冷灰 #f2f3f5） */
}

/* —— 卡片上半段：橙红 CTA 按钮 —— v1.2.28 扁平化重设计
   左右两端分布：左「限时特惠 ¥300」价签组 + 右「立即开通 →」CTA 动作组
   去掉 v1.2.27 的「限时特惠 ¥300 ¥1498(划线) 立即开通」4 段堆叠——
     划线价与下方 hint「享 ¥1498」形成三重冗余，去掉后视觉更干净
   右侧 CTA 字号 15px（比左侧 13px 标签大 2 档）+ 加粗 700，引导视线优先落点
   箭头 → 带 1.6s 微 nudge 动画，节奏与父按钮 2.8s pulse 错开，节奏感不冲突 */
.bpp-buy-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;   /* 关键：left/right 两端分布 */
  padding: 10px 16px 10px 18px;
  /* v299：粉橙红 → 暖红（与卡面主色 #9C2B1F 同源），整页红色系统一：
     起始 #F06B3F 保持亮度和食欲感，收尾 #C9271E 贴品牌枣红，去掉粉味 */
  background: linear-gradient(135deg, #F06B3F 0%, #C9271E 100%);
  color: #fff;
  border-radius: 0;
  min-height: 48px;                 /* v1.2.28：46 → 48，右侧 CTA+箭头更舒展 */
  flex-wrap: nowrap;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  position: relative;
  gap: 8px;
}
/* 左侧价签组：标签 + 主价，基线对齐 → 视觉上"价签"二合为一 */
.bpp-buy-btn-left {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
/* 右侧 CTA 动作组：半透明白底胶囊，"按钮中的按钮"暗示可点击（v1.2.29 去箭头改版） */
.bpp-buy-btn-right {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(2px);
}
/* 标签「限时特惠」：13px 中等字重，作为价格前的语境 */
.bpp-buy-btn-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  opacity: 0.94;
  white-space: nowrap;
}
/* 主价格 ¥300：v1.2.28 加大到 22px（原 18px 偏小，去掉划线后视觉重量需要加强） */
.bpp-buy-btn-price-main {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}
/* CTA 动作「立即开通」：15px/700，白色文字在半透明胶囊上，主动感更强 */
.bpp-buy-btn-cta {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.6px;
  white-space: nowrap;
}

/* —— 价值提示副行（一体化开卡卡下半段，米黄色锚定）——
   v1.2.22 从 v1.2.19 的 3/3 恢复到 9/8
   v312（吸底瘦身）：
     1) padding 9px 14px 8px → 6px 14px 6px（删 slogan 后副卡变单行，垂直呼吸 -6px）
     2) 删 border-top 虚线分隔（之前分隔上行数据 + 下行 slogan；删 slogan 后也连分隔一并删，更简洁）
     3) border-radius 由父容器接管，0/0 保持不变 */
.bpp-buy-hint {
  padding: 6px 14px;
  background: linear-gradient(135deg, #FFF4D6 0%, #FFE8B0 100%);
  border: 0;
  border-radius: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  text-align: center;
}
.bpp-buy-hint-row {
  font-size: 12.5px;          /* v1.2.22：从 11.5 升到 12.5，文字清晰 */
  line-height: 1.5;
  color: #5C3300;             /* v1.2.22：从 #874D00 加深，副卡文字可读性更强 */
}
.bpp-buy-hint-strong {
  color: #C9271E;             /* v1.2.22：从 #D4380D 改主红，更与按钮呼应 */
  font-weight: 800;
  font-size: 13.5px;          /* v1.2.22：从 12.5 升到 13.5，让 1498 / 立减 100 数字一眼可见 */
  letter-spacing: 0.3px;
  margin: 0 1px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);   /* 微微白高光让深色字更立体 */
}
/* —— 价值锚上行 —— */
.bpp-buy-hint-value {
  font-size: 13.5px;          /* v1.2.22：从 12.5 升到 13.5 */
  font-weight: 700;           /* 从 600 升到 700，更突出 */
  color: #C9271E;             /* 主红，与按钮形成强烈视觉锚 */
  letter-spacing: 0.3px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0;
}
/* v1.2.25 CRO 转化率优化：
   1. 恢复 v1.2.22 「超值」橙色胶囊标签 —— 视觉锚点
   2. CTA 按钮加微妙 pulse 脉动动画 —— 吸引注意力不闪烁
   v1.2.26：「省¥1198」省钱行替换为「吃得好 · 花得少」品牌价值主张 */

/* v9.1「超值」小标签 —— 橙底白字胶囊，成为副卡里的视觉小焦点：
     配合「¥1498.00 强橙色」+「100 强橙色」构成 3 个橙色锚点,
     强化"总价值 + 折扣力度"双重价值暗示 */
.bpp-buy-hint-tag {
  display: inline-block;
  margin: 0 3px 0 4px;
  padding: 1px 5px 2px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  /* v299：与 CTA 主按钮同源暖红渐变 */
  background: linear-gradient(135deg, #F06B3F 0%, #C9271E 100%);
  border-radius: 4px;
  letter-spacing: 0.5px;
  vertical-align: 1px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
  box-shadow: 0 1px 2px rgba(201, 39, 30, 0.2);
}

/* v1.2.26 价值主张 slogan：「吃得好 · 花得少」—— VIP欢聚卡品牌承诺
   设计参考整体页面：
   - Hero 卡面权益主题 16px/900 → slogan 14px/800，比主题略小但比正文大
   - 金色背景上的"印章"感：深暖棕 #7A4A00 + 宽字距 2.5px
   - 与第一行数据驱动的文案形成"理性→感性"层次递进
   - 中间小红点与上方¥1498/100 主红数字色彩呼应 */
.bpp-buy-hint-slogan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
  padding-top: 5px;
  border-top: 1px dashed rgba(199, 39, 30, 0.15);
}
.bpp-buy-hint-slogan-text {
  font-size: 14px;
  font-weight: 800;
  color: #7A4A00;
  letter-spacing: 2.5px;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
.bpp-buy-hint-slogan-dot {
  font-size: 13px;
  font-weight: 800;
  color: #C9271E;
  opacity: 0.5;
  line-height: 1;
}

/* v1.2.25 CRO：CTA 按钮脉动动画 —— 微妙的呼吸感，吸引注意力不烦人 */
@keyframes cta-pulse {
  0%, 100% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 0 0 0 rgba(201, 39, 30, 0);
  }
  50% {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 0 12px 2px rgba(201, 39, 30, 0.35);
  }
}
.bpp-buy-btn-pulse {
  animation: cta-pulse 2.8s ease-in-out infinite;
}
}

/* ===== 顾客端活动页（手机扫码看到的页面）=====

/* v1.2.22 重写自适应策略：放弃 v1.2.19 的"激进压缩"，只在 ≤ 580px（极小手机预览高度）
   才隐藏 hintCard —— 用户反馈"想看到 享1498权益，当餐立减100元"，保留这个信息优先级最高。
   计算依据：phone height = min(720px, calc(100vh - 200px))
     - 720 视口 → phone = 520，cta-card (~110) + 头部 (68) = 178，留给 scrollArea 342px → 装 3 个权益卡
     - 600 视口 → phone = 400，cta-card + 头部 = 178，留 222px → 装 2 个权益卡
     - 480 视口 → phone = 280，cta-card + 头部 = 178，留 102px → 几乎装不下权益卡，hintCard display:none */
@media (max-height: 580px) {
  /* 极小手机预览：完全去掉米黄副卡，顾客端只看到 1 个橙红 CTA —— 业务核心信息绝不丢 */
  .bpp-buy-hint { display: none; }
}

/* ===== 顾客端活动页（手机扫码看到的页面）=====
   场景：用户扫码 → 打开 #/customer-card → 看到完整欢聚卡活动页（手机视图）
   设计目标：去掉编辑器 UI、去掉"📱 顾客端"预览框标题，给用户"真在手机上"的体验
*/
body.customer-card-mode {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
}
/* 顶部登录态 app header 在顾客端模式下隐藏 —— 顾客扫码不需要看商家后台导航 */
body.customer-card-mode .app-header,
body.customer-card-mode .layout-header,
body.customer-card-mode .app-sidebar,
body.customer-card-mode .layout-sidebar { display: none !important; }

.customer-card-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 40px;
  box-sizing: border-box;
}
/* 顶部小提示：告诉扫码用户这是什么页面（可点击关闭） */
.customer-card-tip {
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 13px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  user-select: none;
  transition: opacity 0.3s, transform 0.3s;
}
.customer-card-tip b {
  color: #C9271E;   /* v299：粉红 → 品牌暖红，与整页红色系统一 */
  font-weight: 700;
}
.customer-card-tip.hide {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}
/* v220：扫码来源小条 —— dump 携带 _src_store_name 时展示，让消费者明确"这是 XX 店的推广码" */
.customer-card-src {
  background: linear-gradient(90deg, #FFF4E6 0%, #FFE8CC 100%);
  color: #AD6800;
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 12px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(255, 140, 0, 0.12);
  border: 1px solid #FFD591;
  text-align: center;
  max-width: 320px;
  line-height: 1.5;
}
.customer-card-src b {
  color: #C2410C;
  font-weight: 700;
}
/* 手机框：在顾客端模式下，让手机看起来像真手机（带边框圆角和阴影） */
body.customer-card-mode .basic-preview-phone {
  width: min(360px, calc(100vw - 32px));
  height: min(720px, calc(100vh - 130px));
  /* 适配真手机屏幕：vh 高度限制下让手机填满可用空间 */
  max-height: 900px;
  margin: 0 auto;
}
/* 在真手机上看：去掉外层边框/圆角，让手机框像占满整个屏幕
   v1.2.24 关键修复：之前 phone = 100vh + overflow:hidden，
   导致米黄副卡正好被真机浏览器 URL 栏 (~60-90px) 盖住看不见。
   新策略：
     - phone 高度改为 min-height: 100vh，让内容自然撑高
     - phone 不裁切 (overflow: visible)，米黄副卡可溢出到页面背景
     - body 可纵向滚动，确保所有内容（特别是底部 CTA 米黄副卡）总能滚动到看到
     - dvh fallback：现代浏览器 auto 适配动态视口高度 */
@media (max-width: 480px) {
  body.customer-card-mode { overflow-y: auto; }
  body.customer-card-mode .basic-preview-phone {
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;     /* 优先使用动态视口高度，避免被 URL 栏挡住 */
    height: auto;           /* 内容自然撑高，永远完整可见 */
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    overflow: visible;      /* v1.2.24：取消裁切，让米黄副卡可溢出到背景 */
  }
  .customer-card-wrap {
    padding: 0;
  }
  .customer-card-tip {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    font-size: 11px;
    padding: 6px 12px;
  }
  /* v1.2.30：顾客端 FAB 改 fixed —— phone 撑高后 absolute 的 FAB 不随滚动，
     改 fixed 让转赠按钮始终贴在视口右侧中点 */
  body.customer-card-mode .bpp-transfer-fab {
    position: fixed;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    z-index: 50;
  }
  body.customer-card-mode .bpp-transfer-fab:hover {
    transform: translate(-2px, -50%);
  }
  body.customer-card-mode .bpp-transfer-fab:active {
    transform: translate(0, -50%) scale(0.96);
  }
  /* v291：真机 CTA 吸底 —— 顾客扫码端转化核心改动。
     之前 .bpp-cta-card 在 phone 文档流末尾（6 张品宣图之后），真机要滚完全页
     才能见到「立即开通」，长页面下 CTA 曝光率极低、转化漏斗断在"看不到按钮"。
     改为 fixed 吸底常驻视野：滚到哪都能下单。配套：
       ① scroll-area 底部 padding 让位（最后一张品宣图不被吸底 CTA 盖住）
       ② 按钮触达区 48 → 52px（拇指好按）
       ③ env(safe-area-inset-bottom) 适配 iPhone Home 条，不被遮挡
     仅作用于真机扫码端（customer-card-mode + ≤480px），
     编辑器预览（你逐像素调过的布局）完全不受影响 */
  body.customer-card-mode .bpp-cta-card {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    border-radius: 14px 14px 0 0;
    z-index: 60;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.14);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #F8F1E7;   /* v299：吸底 CTA 底色同步暖米白，与页面同温 */
  }
  body.customer-card-mode .bpp-buy-btn {
    min-height: 52px;
  }
  body.customer-card-mode .bpp-scroll-area {
    padding-bottom: 140px;   /* 吸底 CTA 高度（按钮52 + 副卡~60 + 余量） */
  }
}

/* ===== 欢聚卡管理列表页 (#/cards) v1.2.50 字号+布局升级 ===== */
/* v1.2.53：紧凑化顶部区域，让欢聚卡列表表格获得更多空间 */
.cards-page { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 80px; }

.cards-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #FF6B35 0%, #FF976A 100%);
  border-radius: 12px; color: #fff;
  box-shadow: 0 3px 12px rgba(255,107,53,0.16);
}
.cards-banner-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.cards-banner-icon { font-size: 26px; line-height: 1; flex-shrink: 0; }
.cards-banner-text { flex: 1; min-width: 0; }
.cards-banner-title { font-size: 16px; font-weight: 600; margin-bottom: 2px; letter-spacing: 0.2px; }
.cards-banner-sub { font-size: 12.5px; opacity: 0.92; line-height: 1.4; }

/* v1.2.51 时间切换器（今日/昨日/近7天/近30天） */
/* v1.2.53：紧凑化 padding 和字号 */
.cards-range-tabs {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.18); /* banner 上半透明白底 */
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}
.cards-range-tabs-btn {
  padding: 5px 12px;
  border: 0; background: transparent;
  font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.92);
  border-radius: 6px; cursor: pointer; transition: background .18s, color .18s, box-shadow .18s;
  white-space: nowrap;
  font-family: inherit;
}
.cards-range-tabs-btn:hover { background: rgba(255, 255, 255, 0.18); }
.cards-range-tabs-btn.is-active {
  background: #fff; color: #C2410C; font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* v1.2.53：紧凑化统计卡 padding / 字号 / gap */
.cards-stats { gap: 10px; }
.cards-stats .stat-card { padding: 14px 16px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,0.04); border: 1px solid #F0F0F0; }
.cards-stats .stat-card.highlight { background: linear-gradient(135deg, #FFF1EC 0%, #FFE4D6 100%); border-color: #FFD0BC; }
.cards-stats .stat-card .label { font-size: 12.5px; color: var(--color-text-3); margin-bottom: 6px; font-weight: 500; }
.cards-stats .stat-card .value { font-size: 24px; font-weight: 700; color: var(--color-text-1); letter-spacing: -0.3px; line-height: 1.2; }
.cards-stats .stat-card.highlight .value { color: #C2410C; }

/* v1.2.53：紧凑化筛选条 */
.cards-filter {
  padding: 12px 16px; background: #fff; border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03); gap: 14px; align-items: flex-end;
  display: flex; flex-wrap: wrap;
}
.cards-filter .form-item { margin-bottom: 0; min-width: 160px; flex: 1; }
.cards-filter .form-item label { font-size: 13px; color: var(--color-text-2); margin-bottom: 4px; font-weight: 500; }
.cards-filter .form-item input, .cards-filter .form-item select {
  width: 100%; padding: 7px 10px; font-size: 13.5px;
  border: 1px solid var(--color-border); border-radius: 6px;
}
.cards-btn-search { padding: 7px 20px; font-size: 13.5px; flex-shrink: 0; }
.cards-btn-reset { padding: 7px 18px; font-size: 13.5px; flex-shrink: 0; }

.cards-title-row { margin: 0; display: flex; justify-content: space-between; align-items: center; }
.cards-title-row .card-title { font-size: 17px; font-weight: 600; color: var(--color-text-1); margin: 0; }
.cards-btn-create { padding: 8px 20px; font-size: 13.5px; font-weight: 500; }

.cards-table { font-size: 15px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,0.04); border: 1px solid #F0F0F0; }
/* v1.2.83：表格文字放大（表头/正文/状态/操作按钮各 +1），行内边距同步加宽，与上方 KPI 视觉重量协调 */
.cards-table thead th {
  font-size: 14px; padding: 14px 10px;
  background: #FAFAFA; font-weight: 600; color: var(--color-text-2);
  border-bottom: 1px solid var(--color-border);
}
.cards-table tbody td {
  font-size: 15px; padding: 16px 10px;
  border-bottom: 1px solid #F5F5F5; vertical-align: middle;
}
.cards-table tbody tr:last-child td { border-bottom: none; }
.cards-table tbody tr:hover { background: #FAFAFA; }

/* v1.2.82：4 列高/低排序按钮（购卡人数/售卡数/售卡额/核销数），默认降序 */
.cards-table thead th.cards-th-sort { cursor: pointer; user-select: none; }
.cards-table thead th.cards-th-sort:hover { background: #F0F0F0; }
.cards-table thead th.cards-th-sort .cards-sort-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px; width: 22px; height: 18px;
  border: 1px solid #D9D9D9; border-radius: 3px;
  background: #fff; color: #8C8C8C; font-size: 10px; line-height: 1;
  vertical-align: middle; cursor: pointer; padding: 0;
}
.cards-table thead th.cards-th-sort .cards-sort-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cards-table thead th.cards-th-sort.is-active .cards-sort-btn {
  border-color: var(--color-primary); color: #fff;
  background: var(--color-primary);
}
.cards-table .merchant-cell-name { font-size: 15px; color: var(--color-text-1); }
.cards-table .cards-cell-link { color: var(--color-primary); font-weight: 500; font-size: 15px; }
.cards-table .cards-cell-link:hover { text-decoration: underline; }
.cards-table .muted { color: #595959; font-size: 14px; }
.cards-table .muted-strong { color: #BFBFBF; }
.cards-table .tag { font-size: 13px; padding: 4px 10px; border-radius: 4px; }
.cards-table .tag.muted-tag { background: #F5F5F5; color: #8C8C8C; }

.cards-actions { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; white-space: nowrap; }
.cards-actions .btn-xs { padding: 5px 11px; font-size: 13px; border-radius: 5px; }

.cards-link-btn {
  background: transparent; border: none; cursor: pointer;
  padding: 5px 5px; font-size: 14px; font-weight: 500;
  color: var(--color-primary);
  transition: all 0.15s;
}
.cards-link-btn:hover { text-decoration: underline; }
.cards-link-toggle { color: #FA8C16; }
.cards-link-toggle:hover { color: #D46B08; }
.cards-link-on { color: #52C41A; }
.cards-link-on:hover { color: #389E0D; }
.cards-link-delete { color: #FF4D4F; }
.cards-link-delete:hover { color: #CF1322; }

/* ===== v1.2.52 分页器（完全照截图 2 铁粉卡列表的右下角一行）===== */
/* v1.2.53：紧凑化分页器 */
.cards-empty { text-align: center; color: #8C8C8C; padding: 32px 0 !important; font-size: 13.5px; }

.cards-pagination {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding: 12px 16px;
  margin-top: -4px;
  font-size: 13.5px;
  color: #595959;
  flex-wrap: wrap;
}
.cards-page-info { color: #8C8C8C; font-size: 13px; margin-right: auto; }

.cards-page-nav { display: flex; align-items: center; gap: 6px; }
.cards-page-link {
  min-width: 32px; height: 32px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: #595959;
  border: 1px solid #D9D9D9; border-radius: 4px;
  font-size: 13.5px; font-weight: 500;
  cursor: pointer; user-select: none;
  transition: border-color 0.15s, color 0.15s;
}
.cards-page-link:hover:not(:disabled):not(.is-active) { border-color: #C2410C; color: #C2410C; }
.cards-page-link.is-active {
  background: #FFF7F0; border-color: #C2410C; color: #C2410C; font-weight: 600;
  cursor: default;
}
.cards-page-link:disabled { color: #D9D9D9; background: #FAFAFA; cursor: not-allowed; }
.cards-page-ellipsis { color: #8C8C8C; padding: 0 4px; user-select: none; }

.cards-page-size-sel {
  height: 32px; padding: 0 28px 0 10px;
  border: 1px solid #D9D9D9; border-radius: 4px;
  background: #fff; color: #595959; font-size: 13.5px;
  cursor: pointer; outline: none;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23595959'%3e%3cpath d='M8 11L3 6h10z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
}
.cards-page-size-sel:hover { border-color: #C2410C; }
.cards-page-size-sel:focus { border-color: #C2410C; }

.cards-page-jump { display: inline-flex; align-items: center; gap: 6px; color: #595959; font-size: 13px; }
.cards-page-jump-inp {
  width: 56px; height: 32px;
  padding: 0 8px; text-align: center;
  border: 1px solid #D9D9D9; border-radius: 4px;
  background: #fff; color: #262626; font-size: 13.5px;
  outline: none;
}
.cards-page-jump-inp::-webkit-outer-spin-button, .cards-page-jump-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cards-page-jump-inp:focus { border-color: #C2410C; }

/* ===== v1.2.55 标题行右侧 actions + 导出按钮 ===== */
.cards-title-actions { display: inline-flex; align-items: center; gap: 10px; }
.cards-btn-export {
  padding: 8px 18px;
  background: #fff; color: #C2410C;
  border: 1px solid #FFD0BC; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: all .18s; font-family: inherit;
}
.cards-btn-export:hover { background: #FFF1EC; border-color: #FF976A; color: #C2410C; }
.cards-btn-export:active { transform: translateY(1px); }

/* ===== v1.2.55 行内「记录」按钮（复用 .cards-link-btn 风格 + 表情前缀） ===== */
/* v1.2.72：[📊 记录] 按钮已删除，summary 行直接展示数据 — 保留此样式为空选择器兼容 */

/* ===== v1.2.72 欢聚卡 records 行内展开（summary + full detail） ===== */
.cards-table .cards-records-row > td {
  padding: 0 !important;
  background: linear-gradient(180deg, #FFFBF7 0%, #FFF7F0 100%);
  border-top: 1px dashed #FFD0BC;
  border-bottom: 1px solid #FFD0BC;
}
.cards-records-row .cards-records-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  font-size: 12.5px;
  color: #595959;
  flex-wrap: wrap;
}
.crs-stats { display: flex; gap: 10px; flex: 1; min-width: 0; cursor: pointer; user-select: none; }
.crs-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #FFD0BC;
  color: #8C4A2B;
  white-space: nowrap;
  transition: all .15s;
}
.crs-pill-icon { font-size: 12px; }
.crs-pill b { font-size: 13px; font-weight: 700; color: #C2410C; }
.crs-pill-verified { border-color: #B7EB8F; color: #389E0D; }
.crs-pill-verified b { color: #389E0D; }
.crs-pill-amount { border-color: #FFE58F; color: #D48806; background: #FFFBEF; }
.crs-pill-amount b { color: #D48806; }
.crs-tip { color: #BFBFBF; font-size: 12px; }
.crs-actions { display: flex; gap: 6px; }
.cards-link-records-toggle { color: #722ED1; }
.cards-link-records-toggle:hover { color: #531DAB; }
.cards-link-records-all { color: #FA8C16; }
.cards-link-records-all:hover { color: #D46B08; }

/* 详情行：左右两列 grid，每列前 6 条 */
.cards-records-row .cards-records-detail {
  padding: 0 24px 14px;
  border-top: 1px dashed #FFD0BC;
  background: #FFFCFA;
}
.cards-records-row .cards-records-detail[hidden] { display: none; }
.crd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}
.crd-col {
  background: #fff;
  border: 1px solid #FFE7D6;
  border-radius: 8px;
  padding: 10px 14px;
  min-height: 80px;
}
.crd-col-head {
  font-size: 13px;
  font-weight: 600;
  color: #C2410C;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #FFE7D6;
  padding-bottom: 8px;
}
.crd-col-count {
  background: #FFE4D6;
  color: #C2410C;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11.5px;
  font-weight: 600;
}
.crd-list { display: flex; flex-direction: column; gap: 6px; }
.crd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  padding: 4px 0;
  border-bottom: 1px dashed #FFF1EC;
}
.crd-item:last-of-type { border-bottom: 0; }
.crd-item-name { font-weight: 600; color: #262626; min-width: 60px; }
.crd-item-meta { color: #8C8C8C; flex: 1; font-size: 12px; }
.crd-item-amount { color: #389E0D; font-weight: 600; font-variant-numeric: tabular-nums; }
.crd-tag {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 500;
}
.crd-tag-on { background: #F6FFED; color: #389E0D; border: 1px solid #B7EB8F; }
.crd-tag-off { background: #FFF7E6; color: #D46B08; border: 1px solid #FFD591; }
.crd-empty { color: #BFBFBF; text-align: center; padding: 16px 0; font-size: 12.5px; }
.crd-more { color: #BFBFBF; font-size: 12px; text-align: center; padding: 4px 0 2px; }

/* 响应式：手机端 grid 改 1 列堆叠 */
@media (max-width: 900px) {
  .crd-grid { grid-template-columns: 1fr; }
  .cards-records-row .cards-records-summary { padding: 10px 16px; gap: 8px; }
  .cards-records-row .cards-records-detail { padding: 0 16px 12px; }
}

/* ===== v1.2.55 欢聚卡查看记录抽屉（右侧滑出） ===== */
.records-drawer-mask {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 100;
  opacity: 0;
  transition: opacity .25s;
}
.records-drawer-mask.is-open { opacity: 1; }
.records-drawer-mask[hidden] { display: none; }

.records-drawer {
  position: fixed; top: 0; right: 0;
  width: 520px; max-width: 95vw;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  z-index: 101;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.records-drawer.is-open { transform: translateX(0); }
.records-drawer[hidden] { display: none; }

.records-drawer-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #F0F0F0;
  background: linear-gradient(135deg, #FFF1EC 0%, #FFE4D6 100%);
}
.records-drawer-title { font-size: 17px; font-weight: 600; color: #C2410C; margin-bottom: 4px; }
.records-drawer-sub { font-size: 12.5px; color: #8C8C8C; }
.records-drawer-close {
  width: 32px; height: 32px;
  background: transparent;
  border: 0; border-radius: 6px;
  font-size: 24px; line-height: 1;
  color: #8C8C8C; cursor: pointer;
  transition: background .15s, color .15s;
  font-family: inherit;
}
.records-drawer-close:hover { background: rgba(194, 65, 12, 0.1); color: #C2410C; }

.records-tabs {
  display: flex;
  border-bottom: 1px solid #F0F0F0;
  background: #FAFAFA;
  padding: 0 12px;
}
.records-tab {
  padding: 12px 18px;
  background: transparent;
  border: 0; border-bottom: 2px solid transparent;
  font-size: 14px; font-weight: 500;
  color: #595959;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  font-family: inherit;
}
.records-tab.is-active { color: #C2410C; border-bottom-color: #C2410C; font-weight: 600; }
.records-tab:hover:not(.is-active) { color: #262626; }
.records-tab-count {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  background: #F0F0F0; color: #595959;
  border-radius: 10px;
  font-size: 11.5px; font-weight: 600;
}
.records-tab.is-active .records-tab-count { background: #FFE4D6; color: #C2410C; }

.records-list {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 14px 18px;
  background: #FAFAFA;
}
.records-loading { text-align: center; color: #8C8C8C; padding: 40px 0; font-size: 13.5px; }
.records-empty { text-align: center; color: #BFBFBF; padding: 56px 0; font-size: 13.5px; }

.records-item {
  background: #fff;
  border: 1px solid #F0F0F0;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: box-shadow .15s, border-color .15s;
}
.records-item:hover { border-color: #FFD0BC; box-shadow: 0 2px 6px rgba(255,107,53,0.08); }

.records-item-head {
  display: flex; align-items: center;
  gap: 8px; margin-bottom: 8px;
}
.records-item-idx {
  display: inline-block;
  padding: 1px 7px;
  background: #F5F5F5; color: #8C8C8C;
  border-radius: 10px;
  font-size: 11.5px; font-weight: 600;
}
.records-item-name {
  font-size: 14px; font-weight: 600; color: #262626;
  flex: 1; min-width: 0;
}
.records-item-amount {
  font-size: 14px; font-weight: 700; color: #C2410C;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
}
.records-item-tag {
  padding: 2px 8px; border-radius: 4px;
  font-size: 11.5px; font-weight: 500;
}
.records-item-tag.is-on { background: #F6FFED; color: #389E0D; border: 1px solid #B7EB8F; }
.records-item-tag.is-off { background: #FFF7E6; color: #D46B08; border: 1px solid #FFD591; }
.records-pending { color: #BFBFBF; font-size: 12.5px; }

.records-item-meta {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 12.5px; color: #595959;
  line-height: 1.7;
}
.records-item-meta > div { display: inline-flex; align-items: center; gap: 4px; }
.records-meta-label {
  color: #8C8C8C;
  margin-right: 2px;
  font-size: 11.5px;
}
/* 抽屉滚动条美化（webkit） */
.records-list::-webkit-scrollbar { width: 6px; }
.records-list::-webkit-scrollbar-thumb { background: #D9D9D9; border-radius: 3px; }
.records-list::-webkit-scrollbar-track { background: transparent; }

/* ===== v1.2.55 行内「推广」按钮 ===== */
.cards-actions .cards-link-promo { color: #722ED1; }
.cards-actions .cards-link-promo:hover { color: #531DAB; }

/* ===== v1.2.57 欢聚卡推广抽屉（重构为：纯渠道管理）
       代运营场景：内置 9 个标准渠道（私域 4 + 公域 3 + 线下 2）分 3 组，
       每张卡独立勾选启用，每个渠道独立短链，便于扫码归因；支持用户自建临时渠道。
       v1.2.56 的海报生成 / 推广话术 两个 tab 已删除（物料商家自带）。 ===== */
.promo-drawer-mask {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 102;
  opacity: 0;
  transition: opacity .25s;
}
.promo-drawer-mask.is-open { opacity: 1; }
.promo-drawer-mask[hidden] { display: none; }

.promo-drawer {
  position: fixed; top: 0; right: 0;
  width: 560px; max-width: 95vw;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  z-index: 103;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.promo-drawer.is-open { transform: translateX(0); }
.promo-drawer[hidden] { display: none; }

.promo-drawer-header {
  flex-shrink: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 22px 12px;
  border-bottom: 1px solid #F0F0F0;
  background: linear-gradient(135deg, #F9F0FF 0%, #EFDBFF 100%);
}
.promo-drawer-title { font-size: 16px; font-weight: 600; color: #531DAB; margin-bottom: 4px; }
.promo-drawer-sub { font-size: 12.5px; color: #8C8C8C; line-height: 1.5; padding-right: 12px; }
.promo-drawer-close {
  width: 32px; height: 32px;
  background: transparent; border: 0; border-radius: 6px;
  font-size: 24px; line-height: 1; color: #8C8C8C; cursor: pointer;
  transition: background .15s, color .15s; font-family: inherit;
  flex-shrink: 0;
}
.promo-drawer-close:hover { background: rgba(114, 46, 209, 0.1); color: #531DAB; }

/* 推广 body（v1.2.57 单视图，所以不需要 tab nav） */
.promo-body {
  flex: 1; overflow-y: auto;
  padding: 16px 22px 24px;
}
.promo-body::-webkit-scrollbar { width: 6px; }
.promo-body::-webkit-scrollbar-thumb { background: #D9D9D9; border-radius: 3px; }
.promo-body::-webkit-scrollbar-track { background: transparent; }
.promo-loading, .promo-empty { text-align: center; color: #8C8C8C; padding: 40px 0; font-size: 14px; }

/* ===== 渠道库分组 ===== */
.promo-channel-tips {
  padding: 8px 12px;
  background: #F7F8FA;
  border-left: 3px solid #722ED1;
  border-radius: 4px;
  font-size: 12.5px;
  color: #595959;
  line-height: 1.55;
  margin-bottom: 14px;
}
.promo-channel-tips-neutral {
  background: #F7F8FA;
  border-left-color: #4F6EF7;
  color: #434343;
}

/* ===== v1.2.69 顶部操作条 ===== */
.promo-status-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #F9F0FF 0%, #F4E4FF 100%);
  border: 1px solid #E9D5FF;
  border-radius: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.promo-status-stat { display: flex; align-items: baseline; gap: 4px; }
.promo-stat-num { font-size: 22px; font-weight: 700; color: #722ED1; }
.promo-stat-sep { font-size: 16px; color: #B37FEB; }
.promo-stat-total { font-size: 16px; font-weight: 600; color: #722ED1; }
.promo-stat-label { font-size: 12.5px; color: #595959; margin-left: 6px; }
.promo-status-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.promo-status-btn {
  border: 1px solid #D9D9D9;
  background: #fff;
  color: #434343;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.promo-status-btn:hover:not(:disabled) { border-color: #722ED1; color: #722ED1; }
.promo-status-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.promo-status-btn-primary {
  background: #722ED1; color: #fff; border-color: #722ED1;
}
.promo-status-btn-primary:hover:not(:disabled) { background: #5B22A6; border-color: #5B22A6; color: #fff; }

.promo-section { display: flex; flex-direction: column; gap: 18px; }

.promo-channel-group {
  border: 1px solid #F0F0F0;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.promo-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  background: #FAFAFA;
  border-bottom: 1px solid #F0F0F0;
}
.promo-group-head-left {
  display: flex; align-items: center; gap: 8px;
  min-width: 0; flex: 1;
}
.promo-group-title {
  font-size: 14px; font-weight: 600; color: #262626;
  white-space: nowrap;
}
.promo-group-desc {
  font-size: 12px; color: #8C8C8C;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.promo-group-stat {
  flex-shrink: 0;
  font-size: 11.5px; font-weight: 600; color: #722ED1;
  background: #F9F0FF;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}

.promo-channel-rows {
  display: flex; flex-direction: column;
}
.promo-channel-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid #F5F5F5;
  transition: background .15s;
}
.promo-channel-row:last-child { border-bottom: 0; }
.promo-channel-row.is-off { opacity: 0.55; }
.promo-channel-row.is-off:hover { opacity: 0.85; }
.promo-channel-row:hover { background: #FAFAFA; }

.promo-row-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #F9F0FF;
  border-radius: 8px;
  font-size: 16px;
}
.promo-channel-row.is-off .promo-row-icon {
  background: #F5F5F5;
}
.promo-row-info {
  flex: 1; min-width: 0;
}
.promo-row-name {
  font-size: 13.5px; font-weight: 600; color: #262626;
  margin-bottom: 2px;
}
.promo-row-url {
  font-size: 11.5px; color: #722ED1;
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.promo-url-disabled {
  color: #BFBFBF;
  font-family: inherit;
}

/* iOS 风启停开关 */
.promo-toggle {
  position: relative;
  display: inline-block;
  width: 36px; height: 20px;
  flex-shrink: 0;
  cursor: pointer;
}
.promo-toggle input {
  opacity: 0;
  width: 0; height: 0;
}
.promo-toggle-slider {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: #D9D9D9;
  border-radius: 20px;
  transition: background .2s;
}
.promo-toggle-slider::before {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.promo-toggle input:checked + .promo-toggle-slider {
  background: #722ED1;
}
.promo-toggle input:checked + .promo-toggle-slider::before {
  transform: translateX(16px);
}

/* 复制按钮 / 新建按钮 */
.promo-mini-btn {
  padding: 4px 10px; font-size: 12px; font-weight: 500;
  background: #F9F0FF; color: #722ED1; border: 1px solid #EFDBFF;
  border-radius: 5px; cursor: pointer; transition: all .15s;
  font-family: inherit; white-space: nowrap;
}
.promo-mini-btn:hover { background: #722ED1; color: #fff; border-color: #722ED1; }
.promo-mini-btn.promo-mini-del {
  background: #FFF1F0; color: #FF4D4F; border-color: #FFD6CF;
}
.promo-mini-btn.promo-mini-del:hover {
  background: #FF4D4F; color: #fff; border-color: #FF4D4F;
}
.promo-mini-placeholder {
  display: inline-block;
  width: 32px; /* 与按钮宽度相当，保持对齐 */
}

.promo-btn-add {
  padding: 5px 14px; font-size: 13px; font-weight: 500;
  background: #722ED1; color: #fff; border: 0; border-radius: 6px;
  cursor: pointer; transition: background .15s; font-family: inherit;
  white-space: nowrap; flex-shrink: 0;
}
.promo-btn-add:hover { background: #531DAB; }

.promo-channel-custom .promo-group-head { background: #FFF7E6; }
.promo-custom-empty {
  padding: 22px 14px;
  text-align: center;
  font-size: 12.5px;
  color: #BFBFBF;
}

/* ===== v1.2.63 复购唤醒 — 会员统计卡 + 沉睡标记 + 唤醒弹窗 ===== */
.members-page { display: flex; flex-direction: column; gap: 14px; }
.members-stats-row { display: flex; gap: 12px; }
.members-stat-card {
  flex: 1; background: #fff; border-radius: 10px;
  padding: 16px 18px; border: 1px solid #F0F0F0;
  display: flex; flex-direction: column; gap: 4px;
}
.members-stat-sleepy { background: #FFF2F0; border-color: #FFCCC7; }
.members-stat-val { font-size: 26px; font-weight: 700; color: #262626; letter-spacing: -0.5px; }
.members-stat-label { font-size: 13px; color: #8C8C8C; }

.members-day-active { color: #52c41a; font-size: 12.5px; }
.members-day-warm { color: #fa8c16; font-size: 12.5px; }
.members-day-sleepy { color: #ff4d4f; font-size: 12.5px; font-weight: 500; }

/* 唤醒弹窗 */
.wakeup-modal-mask {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200;
  background: rgba(0,0,0,0.45);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s;
}
.wakeup-modal-mask.is-open { opacity: 1; }
.wakeup-modal {
  width: 820px; max-width: 95vw; max-height: 88vh;
  background: #fff; border-radius: 12px; overflow: hidden;
  display: flex; flex-direction: column;
  transform: scale(0.95); transition: transform .25s;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.wakeup-modal-mask.is-open .wakeup-modal { transform: scale(1); }
.wakeup-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid #F0F0F0;
  background: linear-gradient(135deg, #FFF7E6 0%, #FFE7BA 100%);
}
.wakeup-title { font-size: 17px; font-weight: 600; color: #D46B08; margin-bottom: 4px; }
.wakeup-sub { font-size: 13px; color: #8C8C8C; }
.wakeup-close {
  width: 32px; height: 32px; border: 0; border-radius: 6px;
  background: transparent; font-size: 24px; line-height: 1; color: #8C8C8C;
  cursor: pointer; font-family: inherit; flex-shrink: 0;
}
.wakeup-close:hover { background: rgba(212,107,8,0.1); color: #D46B08; }

.wakeup-body { flex: 1; display: flex; overflow: hidden; }
.wakeup-left {
  width: 380px; flex-shrink: 0;
  border-right: 1px solid #F0F0F0;
  display: flex; flex-direction: column;
}
.wakeup-list-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #F5F5F5;
}
.wakeup-check-all { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #262626; cursor: pointer; }
.wakeup-list-count { font-size: 12.5px; color: #8C8C8C; }
.wakeup-list { flex: 1; overflow-y: auto; padding: 8px; }
.wakeup-list::-webkit-scrollbar { width: 5px; }
.wakeup-list::-webkit-scrollbar-thumb { background: #D9D9D9; border-radius: 3px; }
.wakeup-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 10px; border-radius: 8px; cursor: pointer;
  transition: background .15s;
}
.wakeup-item:hover { background: #FAFAFA; }
.wakeup-item input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.wakeup-item-info { flex: 1; min-width: 0; }
.wakeup-item-name { font-size: 14px; font-weight: 500; color: #262626; margin-bottom: 3px; }
.wakeup-item-days {
  font-size: 11.5px; color: #ff4d4f; margin-left: 6px;
  background: #FFF2F0; padding: 1px 6px; border-radius: 4px;
}
.wakeup-item-meta { font-size: 12px; color: #8C8C8C; }

.wakeup-right { flex: 1; padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; }
.wakeup-section { display: flex; flex-direction: column; gap: 10px; }
.wakeup-section-title { font-size: 14px; font-weight: 600; color: #262626; }
.wakeup-channels { display: flex; gap: 12px; }
.wakeup-ch-radio {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid #D9D9D9; border-radius: 8px;
  font-size: 13px; cursor: pointer; transition: all .15s;
}
.wakeup-ch-radio:hover { border-color: #D46B08; }
.wakeup-ch-radio input { accent-color: #D46B08; }

.wakeup-templates { display: flex; gap: 8px; }
.wakeup-tpl {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 1px solid #D9D9D9; border-radius: 8px;
  font-size: 13px; cursor: pointer; transition: all .15s;
}
.wakeup-tpl input { accent-color: #D46B08; }
.wakeup-tpl.is-active { border-color: #D46B08; background: #FFF7E6; }
.wakeup-tpl-name { color: #262626; }

.wakeup-tpl-preview {
  background: #FAFAFA; border: 1px solid #F0F0F0; border-radius: 8px;
  padding: 14px 16px; margin-top: 4px;
}
.wakeup-tpl-title { font-size: 14px; font-weight: 600; color: #262626; margin-bottom: 8px; }
.wakeup-tpl-content {
  margin: 0; font-size: 13px; line-height: 1.7; color: #595959;
  font-family: inherit; white-space: pre-wrap; word-break: break-word;
}

.wakeup-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 24px; border-top: 1px solid #F0F0F0;
}
.wakeup-footer .btn { min-width: 80px; }

/* ===== v1.2.64 推荐拉新 — 卡编辑器样式 ===== */
.transfer-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 12px;
}
.transfer-divider-line {
  flex: 1; height: 1px; background: #EFDBFF;
}
.transfer-divider-text {
  font-size: 13px; font-weight: 600; color: #722ED1;
  white-space: nowrap;
}
.referral-body {
  /* 复用 .transfer-body 的 padding/gap */
}
.referral-config {
  display: flex; flex-direction: column; gap: 12px;
}

/* ===== v1.2.64 裂变效果抽屉样式 ===== */
.referral-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 16px;
}
.referral-stat-card {
  background: #FAF5FF; border-radius: 10px;
  padding: 12px 10px; text-align: center;
}
.referral-stat-card.referral-stat-highlight {
  background: linear-gradient(135deg, #F9F0FF 0%, #EFDBFF 100%);
}
.referral-stat-val {
  font-size: 22px; font-weight: 700; color: #531DAB;
  letter-spacing: -0.3px;
}
.referral-stat-highlight .referral-stat-val { color: #531DAB; }
.referral-stat-label {
  font-size: 11.5px; color: #8C8C8C; margin-top: 2px;
}

.referral-funnel {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; background: #F6FFED; border-radius: 10px;
  margin-bottom: 16px;
}
.referral-funnel-step {
  flex: 1; text-align: center;
}
.referral-funnel-num {
  font-size: 20px; font-weight: 700; color: #389E0D;
}
.referral-funnel-label {
  font-size: 11.5px; color: #595959; margin-top: 2px;
}
.referral-funnel-arrow {
  font-size: 18px; color: #B7EB8F; flex-shrink: 0;
}

.referral-chain-table {
  border: 1px solid #F0F0F0; border-radius: 10px; overflow: hidden;
}
.referral-chain-thead {
  display: flex; background: #FAFAFA;
  border-bottom: 1px solid #F0F0F0;
  padding: 9px 12px;
}
.referral-chain-th {
  font-size: 12px; font-weight: 600; color: #8C8C8C;
}
.referral-chain-row {
  display: flex; align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #F5F5F5;
  transition: background .12s;
}
.referral-chain-row:last-child { border-bottom: 0; }
.referral-chain-row:hover { background: #FAF5FF; }
.referral-chain-td {
  font-size: 13px; color: #262626;
}
.referral-chain-name {
  font-weight: 500; color: #262626;
}
.referral-chain-sub {
  font-size: 11.5px; color: #BFBFBF; margin-top: 1px;
}
.referral-chain-time {
  font-size: 12px; color: #BFBFBF;
}
.referral-tip {
  font-size: 12px; color: #8C8C8C; line-height: 1.6;
  padding: 10px 14px; background: #FFFBEB; border-radius: 8px;
  margin-top: 12px;
}

/* ===== v1.2.67 渠道效果漏斗（推广抽屉第二视图） ===== */
.promo-view-tabs {
  display: flex; gap: 6px;
  padding: 12px 16px 0;
  position: sticky; top: 0; z-index: 5;
  background: #fff;
}
.promo-view-tabs button {
  flex: 1;
  padding: 8px 0;
  border: 1px solid #E5E6EB;
  background: #F7F8FA;
  border-radius: 8px;
  font-size: 13px; font-weight: 500; color: #595959;
  cursor: pointer; transition: all .15s;
}
.promo-view-tabs button.active {
  background: #722ED1; border-color: #722ED1; color: #fff; font-weight: 600;
}
.cs-card {
  background: #fff; border: 1px solid #F0F0F0; border-radius: 10px;
  padding: 14px; margin-top: 12px;
}
.cs-card-title {
  font-size: 13.5px; font-weight: 700; color: #262626; margin-bottom: 10px;
}
.cs-card-sub { font-size: 11.5px; font-weight: 400; color: #8C8C8C; margin-left: 6px; }
.cs-funnel-step {
  display: grid; grid-template-columns: 76px 1fr 48px; align-items: center;
  gap: 10px; padding: 7px 0;
}
.cs-funnel-label { font-size: 12px; color: #595959; white-space: nowrap; }
.cs-funnel-track { background: #F5F5F5; border-radius: 6px; height: 22px; overflow: hidden; }
.cs-funnel-bar { height: 100%; border-radius: 6px; transition: width .4s ease; }
.cs-funnel-val { font-size: 13px; font-weight: 700; color: #262626; text-align: right; }
.cs-funnel-rate {
  grid-column: 2 / 4; font-size: 11.5px; color: #8C8C8C; margin-top: -3px; padding-bottom: 3px;
}
.cs-funnel-rate b { color: #722ED1; }
.cs-table { display: flex; flex-direction: column; }
.cs-row {
  display: grid; grid-template-columns: 1.5fr 1.1fr 0.55fr 0.55fr 0.85fr 0.85fr;
  gap: 6px; align-items: center;
  padding: 9px 6px; border-bottom: 1px solid #F5F5F5;
}
.cs-row:last-child { border-bottom: 0; }
.cs-row-head { font-size: 11px; color: #8C8C8C; font-weight: 500; border-bottom: 1px solid #E5E6EB; }
.cs-c-name { font-size: 12.5px; font-weight: 600; color: #262626; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-custom-tag {
  font-size: 10px; color: #722ED1; background: #F9F0FF;
  border-radius: 6px; padding: 1px 5px; margin-left: 4px; font-weight: 500;
}
.cs-c-num { display: flex; flex-direction: column; gap: 3px; }
.cs-num { font-size: 12.5px; font-weight: 600; color: #434343; }
.cs-strong { font-size: 13px; font-weight: 700; color: #262626; }
.cs-verifies { color: #00B578; }
.cs-mini-bar { display: block; height: 3px; background: #F0F0F0; border-radius: 2px; overflow: hidden; }
.cs-mini-bar > span { display: block; height: 100%; background: #4F6EF7; border-radius: 2px; }
.cs-c-rate { font-size: 12px; color: #595959; text-align: right; }
.cs-rate-good { color: #00B578; font-weight: 600; }
.cs-rate-bad { color: #FA541C; font-weight: 600; }
.cs-insights { background: #FFFBEF; border-color: #FFE58F; }
.cs-insight-item {
  font-size: 12.5px; color: #595959; line-height: 1.7;
  padding: 7px 0; border-bottom: 1px dashed #FFE58F;
}
.cs-insight-item:last-child { border-bottom: 0; }

/* ============ 阶梯激励（合并到第 5 步内联） ============ */
.tiered-header { padding: 0 0 4px; }
.tiered-body { margin: 10px 0 4px; }
.tiered-table-wrap {
  margin: 10px 0; overflow-x: auto; border: 1px solid #E5E6EB;
  border-radius: 8px; background: #FAFBFC;
}
.tiered-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tiered-table thead th {
  background: #F4F5F7; padding: 9px 8px; text-align: left; font-weight: 600;
  color: #595959; border-bottom: 1px solid #E5E6EB; white-space: nowrap;
}
.tiered-table tbody td { padding: 7px 8px; border-bottom: 1px solid #F0F0F0; vertical-align: middle; }
.tiered-table tbody tr:last-child td { border-bottom: 0; }
.tiered-table input[type="number"],
.tiered-table select {
  width: 100%; padding: 5px 7px; border: 1px solid #D9D9D9; border-radius: 4px;
  font-size: 13px; background: #FFF; box-sizing: border-box;
}
.tiered-table input[type="number"]:focus,
.tiered-table select:focus { border-color: #4F6EF7; outline: none; box-shadow: 0 0 0 2px rgba(79,110,247,0.1); }
.tiered-table input.t-min { width: 60px; }
.tiered-table input.t-max { width: 60px; }
.tiered-table input.t-val { width: 80px; }
.tiered-del-btn {
  padding: 4px 10px; background: #FFF1F0; color: #FA541C;
  border: 1px solid #FFCCC7; border-radius: 4px; font-size: 12px; cursor: pointer;
  transition: all 0.15s;
}
.tiered-del-btn:hover { background: #FFCCC7; }
.tiered-add-btn {
  margin-top: 10px; padding: 7px 16px; background: #F0F5FF;
  color: #2F54EB; border: 1px dashed #ADC6FF; border-radius: 6px;
  font-size: 13px; cursor: pointer; transition: all 0.15s;
}
.tiered-add-btn:hover { background: #ADC6FF; }

/* 阶梯佣金预览（右侧 slot） */
.tiered-fund-box { padding: 8px 0; }
.tiered-fund-summary { display: flex; flex-direction: column; gap: 6px; }
.tiered-card-price {
  font-size: 12px; color: #8C8C8C; padding: 6px 8px;
  background: #F5F5F5; border-radius: 6px; margin-bottom: 4px;
}
.tiered-row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; background: #FFF; border: 1px solid #F0F0F0; border-radius: 6px;
}
.tiered-row.first { background: #F6FFED; border-color: #B7EB8F; }
.tiered-range { font-size: 12.5px; font-weight: 600; color: #262626; min-width: 64px; }
.tiered-arrow { color: #BFBFBF; }
.tiered-amount { font-size: 13px; font-weight: 700; color: #FA541C; flex: 1; }
.tiered-type {
  font-size: 10px; color: #8C8C8C; background: #F5F5F5;
  padding: 2px 6px; border-radius: 4px;
}
.tiered-empty { text-align: center; color: #BFBFBF; padding: 20px; font-size: 12.5px; }

/* ── P2 提效：SOP 模板分群选择弹窗 ── */
.sop-seg-modal {
  width: 520px; max-width: calc(100vw - 32px);
  max-height: 78vh; display: flex; flex-direction: column;
}
.sop-seg-body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.sop-seg-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  background: #FAFAFA; border: 1.5px solid #F0F0F0; border-radius: 10px;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.sop-seg-item:hover { border-color: #FFBB96; }
.sop-seg-item:has(input:checked) { border-color: #D46B08; background: #FFF7E6; }
.sop-seg-item input { margin-top: 3px; accent-color: #D46B08; }
.sop-seg-info { flex: 1; min-width: 0; }
.sop-seg-name { font-size: 14px; font-weight: 600; color: #262626; }
.sop-seg-count {
  margin-left: 8px; font-size: 11.5px; font-weight: 500; color: #D46B08;
  background: #FFF2E2; padding: 1px 7px; border-radius: 9px;
}
.sop-seg-desc {
  margin-top: 3px; font-size: 12px; color: #8C8C8C; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sop-seg-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-top: 1px solid #F0F0F0; background: #FAFAFA;
  border-radius: 0 0 14px 14px;
}
.sop-seg-hint { font-size: 12.5px; color: #8C8C8C; }
.sop-tag-exec {
  font-size: 10.5px; color: #595959; background: #F5F5F5;
  padding: 2px 7px; border-radius: 9px; white-space: nowrap;
}
.sop-tag-exec-auto { color: #237804; background: #F6FFED; }
.sop-tag-exec-config { color: #006D75; background: #E6FFFB; }

/* ── P3 提效：今日动作推荐（待办引擎） ── */
.ta-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ta-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid #F0F0F0; border-left: 4px solid #185FA5;
  transition: box-shadow .15s, transform .15s;
}
.ta-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); transform: translateY(-1px); }
.ta-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.ta-body { flex: 1; min-width: 0; }
.ta-title { font-size: 14px; font-weight: 600; color: #262626; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ta-level {
  font-size: 10.5px; font-weight: 500; padding: 1px 7px;
  border-radius: 9px; border: 1px solid; white-space: nowrap;
}
.ta-desc { margin-top: 3px; font-size: 12.5px; color: #595959; line-height: 1.55; }
.ta-action {
  flex-shrink: 0; font-size: 13px; font-weight: 600;
  text-decoration: none; white-space: nowrap; padding: 6px 10px; border-radius: 8px;
}
.ta-action:hover { background: rgba(0,0,0,.04); }

/* ── nav 瘦身（方案 B）：5 主导航 + 工具手风琴 + 顶栏齿轮 ── */
.sidebar-menu .nav-spacer { height: 18px; }
.sidebar-menu .nav-drawer-btn { display: flex; align-items: center; gap: 10px; }
.sidebar-menu .nav-drawer-arrow { margin-left: auto; font-size: 11px; opacity: 0.55; transition: transform .15s; }
.sidebar-menu .nav-drawer-sub {
  list-style: none; margin: 0; padding: 2px 0 6px; background: rgba(0, 0, 0, 0.18);
}
.sidebar-menu .nav-drawer-sub a { padding: 8px 20px 8px 44px; font-size: 13px; opacity: 0.88; }
.topbar-setting-wrap { position: relative; display: inline-flex; align-items: center; }
.topbar-gear {
  border: none; background: transparent; cursor: pointer; font-size: 17px;
  padding: 4px 6px; border-radius: 8px; line-height: 1;
}
.topbar-gear:hover { background: rgba(0, 0, 0, 0.05); }
.nav-settings-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 260;
  list-style: none; margin: 0; padding: 6px 0; min-width: 148px;
  background: #fff; border: 1px solid #EBEBEB; border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13);
}
.nav-settings-title { padding: 6px 14px 4px; font-size: 11px; color: #8C8C8C; letter-spacing: 0.6px; }
.nav-settings-menu a {
  display: flex; align-items: center; gap: 9px; padding: 9px 14px;
  font-size: 13.5px; color: #333; text-decoration: none;
}
.nav-settings-menu a:hover { background: #F7F7F9; }

/* ── v136：C 端活动页「适用门店」模块（权益列表下方，视觉基准对齐 .activity-benefit-group-card 白卡） ── */
.bpp-store-block {
  margin: 12px 12px 0;
  background: #fff;
  border: 1px solid #F3EBDE;   /* v299：暖调描边 + 圆角/阴影统一 */
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 13px 14px 6px;
}
.bpp-store-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
}
.bpp-store-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #262626;
}
.bpp-store-count {
  font-size: 12.5px;   /* v299：12 → 12.5，与规则区计数同步 */
  color: #8C8C8C;
}
.bpp-store-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #F5F5F5;
}
.bpp-store-item:last-child { border-bottom: none; }
.bpp-store-thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  background: #F5F5F5;
}
/* 无门店照片时：暖橙渐变色块 + 白色首字母兜底 */
.bpp-store-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FF8A3D, #E63946);
}
.bpp-store-thumb-letter {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.bpp-store-info {
  flex: 1;
  min-width: 0;
}
.bpp-store-name {
  font-size: 14px;
  font-weight: 600;
  color: #262626;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bpp-store-addr {
  margin-top: 3px;
  font-size: 12px;   /* v291：11.5 → 12px，真机可读性 */
  color: #8C8C8C;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* v140：门店电话行（点击可拨号） —— 与 📍 地址同级，一行省略号 */
.bpp-store-phone {
  margin-top: 3px;
  font-size: 12px;   /* v291：11.5 → 12px，真机可读性 */
  color: #2563eb;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bpp-store-phone:hover { color: #1d4ed8; }
.bpp-store-call-icon {
  font-size: 10.5px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #EFF6FF;
  color: #2563eb;
  flex-shrink: 0;
}
.bpp-store-empty {
  padding: 18px 0 14px;
  text-align: center;
  font-size: 12.5px;
  color: #BFBFBF;
}

/* ── v136：C 端活动页「品宣大图」模块（适用门店下方，门店环境/菜品/活动照片） ── */
.bpp-promo-block {
  margin: 12px 12px 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.bpp-promo-img {
  width: 100%;
  display: block;
}

/* ── v171：去掉头部图标，head 改 flex 两端对齐，margin/padding 跟 bpp-store-block 完全统一 ── */
.bpp-rules-block {
  margin: 12px 12px 0;
  background: #fff;
  border: 1px solid #F3EBDE;   /* v299：暖调描边 + 圆角/阴影统一 */
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 13px 14px 6px;
}
.bpp-rules-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4px;
  cursor: pointer;
  user-select: none;
}
.bpp-rules-tail {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.bpp-rules-title {
  font-size: 15.5px;
  font-weight: 700;
  color: #262626;
  line-height: 1.2;
}
.bpp-rules-count {
  font-size: 12.5px;   /* v299：12 → 12.5，与门店区计数同步 */
  color: #8C8C8C;
}
.bpp-rules-arrow {
  font-size: 12px;
  color: #BFBFBF;
  transition: transform 0.22s ease, color 0.22s ease;
  flex-shrink: 0;
}
.bpp-rules-block.bpp-rules-open .bpp-rules-arrow {
  transform: rotate(180deg);
  color: #8C8C8C;
}

/* 展开 body（v168：去米黄底+暖橙边 → 浅灰分割线，跟 store-block 风格统一） */
.bpp-rules-body {
  display: none;
  margin-top: 10px;
  border-top: 1px solid #F5F5F5;
  padding-top: 4px;
}
.bpp-rules-block.bpp-rules-open .bpp-rules-body {
  display: block;
}
.bpp-rules-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #F5F5F5;
  font-size: 12.5px;
  color: #595959;
  line-height: 1.6;
}
.bpp-rules-item:last-child { border-bottom: none; padding-bottom: 2px; }
.bpp-rules-num {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #F5F5F5;
  color: #8C8C8C;
  font-size: 10.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5px;
}
.bpp-rules-text {
  flex: 1;
  min-width: 0;
  word-break: break-all;
}

/* ── v141：编辑器「使用规则」textarea 容器（基础配置第 12 节） ── */
.card-notes-wrap {
  max-width: 420px;
}
.card-notes-wrap .ce-input {
  resize: vertical;
  line-height: 1.6;
  font-family: inherit;
}
.card-notes-wrap .form-hint {
  margin-top: 6px;
}

/* ── v142c：CTA 上方关键规则小徽标已下线（v141 加的 2 个 chip 改为不再渲染，CSS 同步清理） —— */

/* ── v136：编辑器「品宣图」上传控件（视觉基准对齐 .brand-logo-uploader，16:9 大图框） ── */
.promo-image-cell { max-width: 360px; }
.promo-image-uploader {
  width: 320px;
  height: 180px;
  border: 1px dashed #D9D9D9;
  border-radius: 6px;
  background: #FAFAFA;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
}
.promo-image-uploader:hover { border-color: #FF7A45; }
.promo-image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promo-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.promo-image-placeholder-icon { font-size: 26px; line-height: 1; }
.promo-image-placeholder-text {
  font-size: 13.5px;
  font-weight: 500;
  color: #FF7A45;
}
.promo-image-placeholder-sub {
  font-size: 11.5px;
  color: #BFBFBF;
}

/* ── v138：编辑器「品宣图」多图宫格（最多 6 张，× 删除，尾部 ＋ 追加） ── */
.promo-images-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.promo-images-label {
  font-size: 12.5px;
  color: #8C8C8C;
}
.promo-images-counter {
  font-size: 12px;
  color: #BFBFBF;
}
.promo-images-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.promo-image-tile {
  width: 104px;
  height: 104px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: #F5F5F5;
  flex: 0 0 auto;
}
.promo-image-tile-img {
  /* v295：cover→contain，上传缩略图整图可见不裁切 */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.promo-image-remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-radius: 0 0 0 6px;
  background: rgba(0, 0, 0, 0.55);
  color: #FFF;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.promo-image-remove:hover { background: rgba(220, 38, 38, 0.85); }
.promo-image-tile-add {
  border: 1px dashed #D9D9D9;
  background: #FAFAFA;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.promo-image-tile-add:hover { border-color: #FF7A45; }
.promo-image-add-icon {
  font-size: 22px;
  line-height: 1;
  color: #FF7A45;
  font-weight: 300;
}
.promo-image-add-text {
  font-size: 11.5px;
  color: #8C8C8C;
}

/* ── v138：品宣图纵向平铺（一张一行 16:9 横幅，替代 v136 单大图）
   v252：手机端呼吸感升级——标题竖条 accent + 单图卡片化（卡片距 14px + 大圆角 14 + 序号 badge），解决 v138 的 8px 紧贴问题
   v301：卡片白底/阴影归零，图直接呈现，无卡片框感
   v303：彻底重构——
        ①删「门店精选 N 张」标题（用户原话「红框内的文字去掉」+ 简洁需求）
        ②改纵向堆叠为**横向并排双列**：gap 8px，每列宽 calc((100% - 8px)/2) 拿满
        ③比例改 8:10（≈125% padding-top）—— 比 16:9 更适合竖版海报图，
          横向并排时图显得修长优雅，符合酒水/火锅品宣海报的视觉气质
        ④整组无标题渲染，padding-top: calc((100% - 8px) / 2 * 10 / 8)
          —— 数学同 calc((100% - 8px) * 0.625) 因为 (10/8 - 1) × 0.5 ≈ 0.625
        ⑤单卡零 margin / 透明底 / 无阴影（v301 已设）保留，整张卡左右两个独立圆角 */
.bpp-promo-stack {
  display: flex;
  flex-direction: column;        /* v305：无图占位分支（tip + 编号横条纵向堆叠）修复 v303 横排副作用 */
  gap: 10px;                     /* v306：图与图 10px 呼吸间距 */
  margin: 12px;
  padding: 0;
}
/* v303：删除全部 4 个 title 相关样式（原「门店精选 N 张」标题被用户明确要求去掉）
   - .bpp-promo-stack-title
   - .bpp-promo-stack-title-bar
   - .bpp-promo-stack-title-text
   - .bpp-promo-stack-title-count */
/* ── v306：品宣图手机端纵向单列大图（替代 v303 双列并排） ──
   顾客手机端视角重构（用户明确不要横向滑动轮播）：
   ① v303 双列并排每张仅 ~172px 宽，海报文字/菜品细节根本看不清 → 太小太难看
   ② 纵向单列大图 = 手机浏览最自然范式：拇指上下滑动（零学习成本），
      每张全宽 ~351px（@375 屏），比双列大一倍，海报细节清晰可读
   ③ 图片按自身原始比例呈现（width:100% + height:auto）：
      容器高度随图自适应 → 零裁切、零留白、零比例失真
      —— 这才是 v295「整图显示」铁律的最优解（固定比例框 + contain 必然有留白）
   ④ 无标题/无序号 badge/无卡片框（v301/v303 已定）保留：图直接呈现
   ⑤ 仅四角 14px 圆角 + 图间 10px 呼吸间距，极简无装饰 */
.bpp-promo-stack-card {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;              /* 圆角裁图四角 */
  background: transparent;       /* v301：无白底卡片框 */
  box-shadow: none;              /* v301：无浮起感 */
}
/* v306：img 直接流式铺满卡宽、高度按原图比例自适应——
   不需要 absolute 铺满 + object-fit（那是固定比例框时代的方案） */
.bpp-promo-stack-item {
  display: block;
  width: 100%;
  height: auto;                  /* 整图零裁切零留白：容器就是图片本身的比例 */
}

/* ── v202：dump 模式下品宣图占位（base64 装不下 QR，扫码端展示 N 个结构占位卡） ── */
.bpp-promo-stack-item-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #fff7e6 0%, #ffe7ba 100%);
  border: 1px dashed #ffd591;
  border-radius: 10px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #d48806;
}
/* v236：X5/旧内核 aspect-ratio 兜底（内部是 flex 静态内容，用固定高度兜底） */
@supports not (aspect-ratio: 16 / 9) {
  .bpp-promo-stack-item-placeholder { height: 200px; }
}
.bpp-promo-stack-item-placeholder:last-child { margin-bottom: 0; }
.bpp-promo-stack-placeholder-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 6px;
  opacity: 0.7;
}
.bpp-promo-stack-placeholder-text {
  font-size: 13px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.bpp-promo-stack-placeholder-title {
  font-size: 14px;
  font-weight: 700;
  color: #d4380d;
  letter-spacing: 0.3px;
}
.bpp-promo-stack-placeholder-sub {
  font-size: 11px;
  color: #8c8c8c;
  font-weight: 400;
}
.bpp-promo-stack-tip {
  background: linear-gradient(90deg, #fffbe6 0%, #fff7e6 100%);
  border: 1px solid #ffe58f;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #ad6800;
  line-height: 1.5;
  text-align: center;
}

/* ── v222：扫码预览模式品宣图诚实占位（替代 v217 VIP PLUS 大卡） ──
   QR 容量物理上限（容错 M ≈ 2331 字节）装不下 base64 图，扫码端只能见张数占位。
   v217 的渐变大卡视觉太像"真图容器"，真机用户误以为该显示实拍图却没显示 → 改为
   "列表占位"形态：黄底 tip + N 张紧凑横条（编号徽章 + 📷 + 第 X/N 张），零误导。 */
.bpp-promo-stack-num {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: linear-gradient(135deg, #FFF7F0 0%, #FFEFE3 100%);
  border: 1px solid #FFD8BF;
  box-sizing: border-box;
}
.bpp-promo-stack-num:last-child { margin-bottom: 0; }
.bpp-promo-stack-num-badge {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF8C42 0%, #E85A2B 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bpp-promo-stack-num-icon {
  flex-shrink: 0;
  font-size: 24px;
  line-height: 1;
}
.bpp-promo-stack-num-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bpp-promo-stack-num-title {
  font-size: 14px;
  font-weight: 700;
  color: #ad3a08;
  letter-spacing: 0.3px;
}
.bpp-promo-stack-num-sub {
  font-size: 11px;
  color: #b5744f;
  font-weight: 400;
}
.bpp-promo-stack-num-arrow {
  flex-shrink: 0;
  font-size: 18px;
  color: #E85A2B;
  font-weight: 700;
  opacity: 0.6;
}