/* 任务列表页样式 — 2026-03-13 全量重写，1:1 对齐 H5 原型 task-list.html */
/* AI_CHANGELOG
| 日期 | Prompt | 变更 |
|------|--------|------|
| 2026-03-13 | 重写 task-list 1:1 还原 H5 | 全量重写 |
| 2026-03-13 | banner 错位重做 | 页面内实现完整 banner |
| 2026-03-13 | 5项修复+精确还原 | 恢复纹理CSS层、盖戳改回CSS、标签恢复CSS渐变、abandoned灰化、全量line-height按排版字典校准 |
*/
/* 换算公式：rpx = H5_px × 1.8204（基于 412px 验收宽度）
 * 排版字典 B.3 硬映射：
 *   text-xs  → 22rpx / 29rpx
 *   text-sm  → 26rpx / 36rpx
 *   text-base→ 30rpx / 44rpx
 *   text-lg  → 33rpx / 51rpx
 *   text-xl  → 36rpx / 51rpx
 *   text-2xl → 44rpx / 58rpx
 *   text-3xl → 54rpx / 66rpx
 *   text-[9px]→ 16rpx（行高需视觉校准）
 */

/* ============================================
 * 页面容器
 * ============================================ */
.page-task-list {
  min-height: 100vh;
  background-color: var(--color-gray-1);
  padding-bottom: 180rpx;
}

/* ============================================
 * Banner 区域
 * 方案：SVG 做渐变底图 + CSS 做纹理叠加
 * 原因：SVG pattern 在小程序 image 组件中不渲染
 * ============================================ */
.banner-area {
  position: relative;
  /* H5: pb-4 = 16px → 29rpx */
  padding-bottom: 29rpx;
  overflow: hidden;
}

/* 渐变底图 — SVG 包含 7 层渐变 + 光晕 */
.banner-bg-img {
  position: absolute;
  top: -50rpx;
  left: 0;
  width: 100%;
  height: 110%;
  z-index: 0;
}

/* 纹理层已烘焙进 banner-bg-combined.svg，此层保留占位供未来扩展 */

/* ============================================
 * 用户信息区 — H5: .px-5.pt-10.pb-3
 * px-5=20px→36rpx, pt-10=40px→73rpx, pb-3=12px→22rpx
 * ============================================ */
.user-info-section {
  position: relative;
  z-index: 2;
  padding: 36rpx 29rpx 29rpx 29rpx;
}

/* H5: .flex.items-center.gap-4 → gap-4=16px→29rpx */
.user-info-row {
  display: flex;
  align-items: center;
  gap: 29rpx;
}

/* 头像容器 — H5: w-14 h-14 rounded-2xl bg-white/20 shadow-lg overflow-hidden */
/* w-14=56px→102rpx, rounded-2xl=16px→29rpx (实际 24rpx 更接近视觉) */
.avatar-wrap {
  width: 102rpx;
  height: 102rpx;
  border-radius: 24rpx;
  background: rgba(255,255,255,0.2);
  box-shadow: 0 10rpx 15rpx -3rpx rgba(0,0,0,0.1), 0 4rpx 6rpx -4rpx rgba(0,0,0,0.1);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-img {
  width: 100%;
  height: 100%;
}

.user-detail {
  flex: 1;
}

/* H5: .flex.items-center.gap-2.mb-1 → gap-2=8px→15rpx, mb-1=4px→7rpx */
.user-name-row {
  display: flex;
  align-items: center;
  gap: 15rpx;
  margin-bottom: 7rpx;
  line-height: 51rpx; /* text-xl line-height 容器 */
}

/* H5: text-xl font-semibold → 36rpx/51rpx */
.user-name {
  font-size: 36rpx;
  font-weight: 600;
  color: #ffffff;
}

/* H5: px-2 py-0.5 bg-white/20 rounded-full text-xs
 * px-2=8px→15rpx, py-0.5=2px→4rpx, text-xs→22rpx/29rpx */
.user-role-tag {
  font-size: 22rpx;
  padding: 0rpx 20rpx 0 20rpx;
  background: rgba(255,255,255,0.2);
  border-radius: 9999rpx;
  color: #ffffff;
  height: 35rpx;
  line-height: 35rpx;
}

/* H5: text-white/70 text-sm → 26rpx/36rpx */
.user-store-row {
  line-height: 36rpx;
}
.user-store {
  font-size: 26rpx;
  color: rgba(255,255,255,0.7);
}

/* ============================================
 * 业绩进度卡片 — H5: .mx-4 > .bg-white/15.backdrop-blur-md.rounded-2xl.px-4.py-3.border.border-white/20
 * mx-4=16px→29rpx, px-4=16px→29rpx, py-3=12px→22rpx, rounded-2xl=16px→29rpx
 * ============================================ */
.perf-card {
  position: relative;
  z-index: 2;
  margin: 0 29rpx;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 29rpx;
  padding: 22rpx 29rpx;
  border: 1rpx solid rgba(255,255,255,0.2);
}

/* --- L1: 跳档提示行 --- */
/* H5: .flex.items-center.justify-between.mb-2 → mb-2=8px→15rpx */
.perf-l1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15rpx;
}

/* H5: .flex.items-baseline.gap-2 → gap-2=8px→15rpx */
.perf-l1-left {
  display: flex;
  align-items: baseline;
  gap: 15rpx;
  line-height: 51rpx; /* text-xl 行高容器 */
}

/* H5: stat-label text-sm font-medium → 26rpx/36rpx */
.perf-label {
  font-size: 26rpx;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.15);
}

/* H5: stat-accent text-xl font-bold → 36rpx/51rpx */
.perf-accent {
  font-size: 36rpx;
  font-weight: 700;
  color: #fcd34d;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
}

/* H5: stat-secondary text-xs → 22rpx/29rpx */
.perf-l1-right {
  display: flex;
  align-items: center;
  gap: 4rpx;
  line-height: 29rpx;
}
.perf-secondary {
  font-size: 22rpx;
  color: rgba(255,255,255,0.7);
}

/* --- L2: 5段档位进度条 --- */
/* H5: .relative.mb-6 → mb-6=24px→44rpx */
.perf-l2 {
  position: relative;
}

/* ═══════════════════════════════════════════════════
 * 进度条 — 一整根方案
 * 结构：tier-track > tier-track-bg + tier-track-fill + tier-divider×4
 * ═══════════════════════════════════════════════════ */

/* 外层容器：撑高、relative 供分隔线绝对定位 */
.tier-track {
  position: relative;
  height: 14rpx;
  border-radius: 9rpx;
  overflow: visible;

}

/* 底轨：整条灰白背景 */
.tier-track-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 9rpx;
  background: rgba(255,255,255,0.18);
}

/* 填充条：仅控制裁剪宽度，overflow:hidden，不设背景色 */
.tier-track-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  border-radius: 9rpx;
  overflow: hidden;
  transition: width 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
  box-shadow: 0 0 14rpx rgba(239,68,68,0.45);
}

/* 全宽渐变层：宽度撑满轨道 100%（相对于 tier-track），不随填充宽度缩放 */
/* 小程序中 position:absolute + left:0 + width 用 vw 单位近似轨道宽度 */
.tier-gradient-bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  /* 轨道 = perf-card 内宽，约 (100vw - 29rpx*2 - 29rpx*2) ≈ 100vw - 116rpx */
  /* 用 100vw 保证渐变铺满，超出部分被父层 overflow:hidden 裁掉 */
  width: 100vw;
  background: linear-gradient(
    90deg,
    #fde68a  0%,
    #fbbf24 20%,
    #f97316 45%,
    #ef4444 70%,
    #910a0a 100%
  );
}

/* ══════════════════════════════════════════════════════
 * 高光动画
 * 默认状态：不播放（animation: none）
 * 触发：JS 设置 shineRunning=true → 挂上 .tier-shine--active → 单次播放
 * duration 由 WXML style 注入（shineDurMs），每轮由 JS 按进度+速度重算
 *
 * ★ 外观旋钮（在此修改）★
 *   --shine-width  : 光束宽度（默认50%）
 *   --shine-opacity: 峰值亮度 0~1（默认1.0）
 *   --shine-color  : RGB颜色，默认纯白
 *                    255,220,100=暖黄；255,180,80=橙
 * ══════════════════════════════════════════════════════ */
.tier-shine {
  --shine-width:   120rpx;  /* ★固定宽度，不随进度条长短变化；改大=光晕更宽 */
  --shine-opacity: 1.0;
  --shine-color:   255, 255, 255;

  position: absolute;
  top: 0;
  left: -70%;          /* 静止时停在左侧外，不可见 */
  width: var(--shine-width);
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--shine-color), 0.08) 20%,
    rgba(var(--shine-color), var(--shine-opacity)) 50%,
    rgba(var(--shine-color), 0.08) 80%,
    transparent 100%
  );
  animation: none;     /* 默认不播放 */
  pointer-events: none;
}
/* JS 设置 shineRunning=true 时挂上此 class，触发单次播放 */
.tier-shine--active {
  animation: tierShine 1s linear 1 forwards; /* duration 被 style 覆盖 */
}
@keyframes tierShine {
  /* left 用固定 rpx，确保起终点与填充条宽度无关 */
  0%   { left: -130rpx; opacity: 0; }  /* 从左侧外出发（≈ shine-width + 10rpx） */
  5%   { opacity: 1; }                 /* 淡入 */
  95%  { opacity: 1; }                 /* 接近右端 */
  100% { left: calc(100% + 10rpx); opacity: 0; } /* 到达右侧外，淡出 */
}

/* ══════════════════════════════════════════════════════
 * 进度末端导火索效果
 * 默认状态：光柱微弱待机，火花不播放
 * 触发：JS 设置 sparkRunning=true → 挂上 --active class → 单次播放
 * duration 由 WXML style 注入（sparkDurMs = SPARK_DUR_MS）
 *
 * ★ 外观旋钮（在此修改）★
 *   --spark-scale : 整体缩放，影响光柱+粒子大小+飞射距离
 *   --spark-pole-h: 光柱高度（宽度自动=高度/2）
 * ══════════════════════════════════════════════════════ */
.tier-edge-glow {
  --spark-scale:  0.7;
  --spark-pole-h: 30rpx;

  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--spark-scale));
  transform-origin: center center;
  width: calc(var(--spark-pole-h) / 2);
  height: var(--spark-pole-h);
  border-radius: 999rpx;
  background: rgba(255,255,255,1);
  /* 默认：微弱待机光 */
  opacity: 0.25;
  box-shadow: 0 0 4rpx 2rpx rgba(255,200,80,0.35);
  animation: none;
  pointer-events: none;
  overflow: visible;
  z-index: 10;
  transition: opacity 0.1s, box-shadow 0.1s;
}
/* 触发时：爆亮并消散（单次） */
.tier-edge-glow--active {
  animation: edgePulse 1s ease-out 1 forwards;
}
@keyframes edgePulse {
  0%   { opacity: 1;    box-shadow: 0 0 22rpx 12rpx rgba(255,255,255,0.95); }
  15%  { opacity: 1;    box-shadow: 0 0 26rpx 14rpx rgba(255,220, 80,0.90); }
  55%  { opacity: 0.6;  box-shadow: 0 0 12rpx  6rpx rgba(255,160, 40,0.60); }
  85%  { opacity: 0.25; box-shadow: 0 0  4rpx  2rpx rgba(255,200, 80,0.35); }
  100% { opacity: 0.25; box-shadow: 0 0  4rpx  2rpx rgba(255,200, 80,0.35); }
}

/* 火星粒子基础样式：默认隐藏，从光柱中心出发 */
.spark {
  position: absolute;
  border-radius: 999rpx;
  pointer-events: none;
  opacity: 0;
  top: 50%;
  left: 50%;
  animation: none;
}
/* 触发时播放单次散射动画 */
.spark--active { animation-iteration-count: 1; animation-fill-mode: forwards; }

/* ──────────────────────────────────────────────────────
 * 6粒火星：方向/颜色/大小各异，在 0%~15% 之间依次爆发
 * timing-function 用 linear，减速效果由关键帧间距控制：
 *   前段（爆发）：帧间距大 → 视觉上快
 *   后段（消散）：帧间距小 → 视觉上慢，自然减速飘散
 * ────────────────────────────────────────────────────── */

/* 粒子1：右上，亮白，第一个爆发 */
.spark-1 { width: 10rpx; height: 10rpx; background: #ffffff; }
.spark-1.spark--active { animation-name: spark1; animation-timing-function: linear; }
@keyframes spark1 {
  0%   { opacity: 0;   transform: translate(  0rpx,   0rpx) scale(0.0); }
  8%   { opacity: 1;   transform: translate(  8rpx, -16rpx) scale(1.6); } /* 爆发 */
  25%  { opacity: 0.9; transform: translate( 16rpx, -30rpx) scale(1.2); }
  45%  { opacity: 0.7; transform: translate( 22rpx, -40rpx) scale(0.9); }
  62%  { opacity: 0.5; transform: translate( 27rpx, -48rpx) scale(0.7); }
  76%  { opacity: 0.3; transform: translate( 31rpx, -53rpx) scale(0.5); }
  87%  { opacity: 0.15;transform: translate( 34rpx, -57rpx) scale(0.3); }
  100% { opacity: 0;   transform: translate( 36rpx, -60rpx) scale(0.1); }
}

/* 粒子2：右下，橙色 */
.spark-2 { width: 12rpx; height: 12rpx; background: #fb923c; }
.spark-2.spark--active { animation-name: spark2; animation-timing-function: linear; }
@keyframes spark2 {
  0%   { opacity: 0;   transform: translate(  0rpx,   0rpx) scale(0.0); }
  12%  { opacity: 1;   transform: translate( 10rpx,  14rpx) scale(1.5); } /* 爆发 */
  28%  { opacity: 0.8; transform: translate( 19rpx,  24rpx) scale(1.1); }
  46%  { opacity: 0.6; transform: translate( 26rpx,  32rpx) scale(0.8); }
  62%  { opacity: 0.4; transform: translate( 31rpx,  38rpx) scale(0.6); }
  76%  { opacity: 0.25;transform: translate( 35rpx,  43rpx) scale(0.4); }
  88%  { opacity: 0.1; transform: translate( 38rpx,  47rpx) scale(0.25); }
  100% { opacity: 0;   transform: translate( 42rpx,  56rpx) scale(0.1); }
}

/* 粒子3：正上，黄色，快速 */
.spark-3 { width: 8rpx; height: 8rpx; background: #fde68a; }
.spark-3.spark--active { animation-name: spark3; animation-timing-function: linear; }
@keyframes spark3 {
  0%   { opacity: 0;   transform: translate(  0rpx,   0rpx) scale(0.0); }
  6%   { opacity: 1;   transform: translate(  4rpx, -22rpx) scale(1.8); } /* 爆发 */
  20%  { opacity: 0.9; transform: translate(  7rpx, -36rpx) scale(1.3); }
  38%  { opacity: 0.7; transform: translate(  9rpx, -48rpx) scale(1.0); }
  55%  { opacity: 0.5; transform: translate( 10rpx, -57rpx) scale(0.7); }
  70%  { opacity: 0.3; transform: translate( 11rpx, -63rpx) scale(0.5); }
  84%  { opacity: 0.15;transform: translate( 11rpx, -68rpx) scale(0.3); }
  100% { opacity: 0;   transform: translate( 12rpx, -74rpx) scale(0.1); }
}

/* 粒子4：右斜上，红橙，拖尾长条 */
.spark-4 { width: 16rpx; height: 6rpx; background: #ef4444; }
.spark-4.spark--active { animation-name: spark4; animation-timing-function: linear; }
@keyframes spark4 {
  0%   { opacity: 0;   transform: translate(  0rpx,   0rpx) rotate(  0deg) scale(0.0); }
  10%  { opacity: 1;   transform: translate( 14rpx, -10rpx) rotate(-20deg) scale(1.4); } /* 爆发 */
  26%  { opacity: 0.8; transform: translate( 24rpx, -16rpx) rotate(-30deg) scale(1.0); }
  44%  { opacity: 0.6; transform: translate( 32rpx, -21rpx) rotate(-38deg) scale(0.75);}
  60%  { opacity: 0.4; transform: translate( 39rpx, -26rpx) rotate(-45deg) scale(0.55);}
  74%  { opacity: 0.25;transform: translate( 44rpx, -30rpx) rotate(-50deg) scale(0.4); }
  87%  { opacity: 0.1; transform: translate( 48rpx, -33rpx) rotate(-53deg) scale(0.25);}
  100% { opacity: 0;   transform: translate( 58rpx, -40rpx) rotate(-55deg) scale(0.1); }
}

/* 粒子5：正右，黄白，最先弹出 */
.spark-5 { width: 10rpx; height: 10rpx; background: #fbbf24; }
.spark-5.spark--active { animation-name: spark5; animation-timing-function: linear; }
@keyframes spark5 {
  0%   { opacity: 0;   transform: translate(  0rpx,  0rpx) scale(0.0); }
  5%   { opacity: 1;   transform: translate( 18rpx,  2rpx) scale(1.7); } /* 爆发（最早）*/
  20%  { opacity: 0.85;transform: translate( 30rpx,  3rpx) scale(1.2); }
  38%  { opacity: 0.65;transform: translate( 40rpx,  4rpx) scale(0.9); }
  55%  { opacity: 0.45;transform: translate( 47rpx,  5rpx) scale(0.7); }
  70%  { opacity: 0.3; transform: translate( 52rpx,  6rpx) scale(0.5); }
  84%  { opacity: 0.15;transform: translate( 56rpx,  7rpx) scale(0.3); }
  100% { opacity: 0;   transform: translate( 60rpx,  8rpx) scale(0.1); }
}

/* 粒子6：右下斜，淡橙，最大最慢 */
.spark-6 { width: 14rpx; height: 14rpx; background: #fed7aa; }
.spark-6.spark--active { animation-name: spark6; animation-timing-function: linear; }
@keyframes spark6 {
  0%   { opacity: 0;   transform: translate(  0rpx,   0rpx) scale(0.0); }
  15%  { opacity: 0.9; transform: translate(  6rpx,  18rpx) scale(1.5); } /* 爆发（最晚）*/
  30%  { opacity: 0.75;transform: translate( 10rpx,  28rpx) scale(1.1); }
  47%  { opacity: 0.55;transform: translate( 14rpx,  36rpx) scale(0.85);}
  62%  { opacity: 0.4; transform: translate( 17rpx,  43rpx) scale(0.65);}
  75%  { opacity: 0.25;transform: translate( 19rpx,  48rpx) scale(0.5); }
  87%  { opacity: 0.1; transform: translate( 21rpx,  53rpx) scale(0.35);}
  100% { opacity: 0;   transform: translate( 24rpx,  64rpx) scale(0.1); }
}


/* 分隔竖线：绝对定位叠在进度条上 */
.tier-divider {
  position: absolute;
  top: 0;
  width: 8rpx;
  height: 100%;
  background: #5381D9;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

/* 刻度 — 完成后高亮 */
.tick--done {
  color: rgba(255,255,255,0.95);
  font-weight: 600;
}
.tick--highlight {
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}

/* 刻度 — H5: text-[9px] → 16rpx */
.tier-ticks {
  position: absolute;
  width: 100%;
  top: 100%;
  margin-top: 6rpx;
  height: 24rpx;
}
.tick {
  position: absolute;
  font-size: 16rpx;
  color: rgba(255,255,255,0.55);
  transition: color 0.3s ease, font-weight 0.3s ease;
}
.tick--current {
  color: rgba(255,255,255,0.8);
  font-weight: 500;
}

/* ============================================
 * 调试面板（task-list 专属）
 * ============================================ */
.debug-panel {
  position: fixed;
  bottom: 180rpx;
  right: 30rpx;
  width: 540rpx;
  background: #ffffff;
  border-radius: 28rpx;
  padding: 30rpx 28rpx 24rpx;
  box-shadow: 0 12rpx 48rpx rgba(0,0,0,0.18);
  z-index: 999;
  opacity: 0;
  transform: translateY(20rpx) scale(0.96);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.debug-panel--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}
.debug-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f3f3f3;
}
.debug-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #242424;
  line-height: 40rpx;
}
.debug-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52rpx;
  height: 52rpx;
  border-radius: 999rpx;
  background: #f3f3f3;
}
.debug-close--hover { opacity: 0.6; }
.debug-section {
  margin-bottom: 22rpx;
}
.debug-section:last-child { margin-bottom: 0; }
.debug-section--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.debug-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
}
.debug-label {
  font-size: 24rpx;
  color: #5e5e5e;
  line-height: 36rpx;
}
.debug-value-chip {
  font-size: 22rpx;
  font-weight: 600;
  color: #10b981;
  background: rgba(16,185,129,0.10);
  padding: 4rpx 14rpx;
  border-radius: 999rpx;
  line-height: 32rpx;
}
.debug-chip--green {
  color: #10b981;
  background: rgba(16,185,129,0.10);
}
.debug-chip--yellow {
  color: #d97706;
  background: rgba(251,191,36,0.12);
}
.debug-slider {
  width: 100%;
  margin: 4rpx 0 0;
}
.debug-tick-row {
  display: flex;
  justify-content: space-between;
  margin-top: 4rpx;
}
.debug-tick {
  font-size: 18rpx;
  color: #a6a6a6;
  line-height: 28rpx;
}
.debug-tick--key {
  color: #8b8b8b;
  font-weight: 500;
}
.debug-tick--current {
  color: #0052d9;
  font-weight: 600;
}
.debug-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-top: 10rpx;
}
.debug-btn {
  padding: 10rpx 18rpx;
  background: #f3f3f3;
  border-radius: 12rpx;
  font-size: 22rpx;
  color: #5e5e5e;
  line-height: 32rpx;
  border: 2rpx solid transparent;
}
.debug-btn--active {
  background: #ecf2fe;
  color: #0052d9;
  border-color: #0052d9;
  font-weight: 600;
}
/* Toggle switch */
.debug-toggle {
  width: 88rpx;
  height: 48rpx;
  border-radius: 999rpx;
  background: #e7e7e7;
  position: relative;
  transition: background 0.25s ease;
  flex-shrink: 0;
}
.debug-toggle--on {
  background: #10b981;
}
.debug-toggle-thumb {
  position: absolute;
  top: 6rpx;
  left: 6rpx;
  width: 36rpx;
  height: 36rpx;
  border-radius: 999rpx;
  background: #ffffff;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.15);
  transition: left 0.25s ease;
}
.debug-toggle--on .debug-toggle-thumb {
  left: 46rpx;
}
/* 调试触发按钮 */
.debug-trigger {
  position: fixed;
  bottom: 230rpx;
  right: 30rpx;
  width: 88rpx;
  height: 88rpx;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(102,126,234,0.40);
  z-index: 998;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.debug-trigger--active {
  background: linear-gradient(135deg, #764ba2, #667eea);
  box-shadow: 0 12rpx 32rpx rgba(102,126,234,0.55);
  transform: rotate(15deg);
}
.debug-trigger--hover { opacity: 0.88; }
.debug-trigger-icon {
  font-size: 44rpx;
  line-height: 1;
}

/* --- L3: 课时 + 红戳 + 奖金 --- */
/* H5: .flex.items-stretch.mb-2.5 → mb-2.5=10px→18rpx */
.perf-l3 {
  display: flex;
  align-items: stretch;
  margin: 40rpx 0 30rpx 0;
}

/* 左侧：课时数据 + 红戳（flex:3） */
/* H5: .pr-4.border-r.border-white/25.flex.justify-center.items-center */
.perf-l3-left {
  flex: 3.5;
  padding-right: 0rpx;
  border-right: 1rpx solid rgba(255,255,255,0.25);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* H5: .red-stamp.inline-block.relative padding-right:35px→64rpx */
.perf-hours-wrap {
  display: inline-block;
  position: relative;
  padding-right: 62rpx;
  text-align: center;
}

/* H5: .flex.items-baseline.justify-center.gap-1.5 → gap-1.5=6px→11rpx */
.perf-hours-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 11rpx;
  line-height: 51rpx; /* text-xl 行高容器 */
}

/* H5: stat-highlight text-xl font-bold → 36rpx, color:#6ee7b7 */
.hours-green {
  font-size: 38rpx;
  font-weight: 700;
  color: #6ee7b7;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
}

/* H5: stat-secondary text-sm → 26rpx */
.hours-sep {
  font-size: 32rpx;
  color: rgba(255,255,255,0.7);
}

/* H5: stat-accent text-xl font-bold → 36rpx, color:#fcd34d */
.hours-yellow {
  font-size: 38rpx;
  font-weight: 700;
  color: #fcd34d;
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
}

/* H5: stat-value text-xl font-bold → 36rpx, color:#ffffff */
.hours-white {
  font-size: 38rpx;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2rpx 6rpx rgba(0,0,0,0.25);
}

/* H5: stat-label text-xs mt-1.5 → 22rpx/29rpx, mt-1.5=6px→11rpx */
.hours-label-row {
  margin-top: 0;
  line-height: 29rpx;
}
.hours-label {
  font-size: 22rpx;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.15);
}

/* --- 红戳徽章 — SVG 实现 --- */
/* H5: position:absolute, top:5px, right:-5px (相对于 .red-stamp 容器)
 * 52px→95rpx, rotate(-12deg), opacity:0.8 */
.stamp-badge {
  position: absolute;
  top: 9rpx;
  right: -9rpx;
  width: 95rpx;
  height: 95rpx;
  pointer-events: none;
  opacity: 0;
  transform: rotate(-12deg) scale(0);
}

/* 盖戳动画 */
@keyframes stampDown {
  0% { transform: rotate(-12deg) scale(3); opacity: 0; }
  50% { transform: rotate(-12deg) scale(0.9); opacity: 0.6; }
  70% { transform: rotate(-12deg) scale(1.05); opacity: 0.75; }
  100% { transform: rotate(-12deg) scale(1); opacity: 0.80; }
}
.stamp-animate {
  animation: stampDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 右侧：奖金激励（flex:2） */
/* H5: .pl-3.text-center.flex.flex-col.justify-center → pl-3=12px→22rpx */
.perf-l3-right {
  flex: 2;
  padding-left: 22rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bonus-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding-top: 10rpx;
}

/* H5: text-3xl font-bold text-amber-300 → 54rpx/66rpx */
.bonus-amount {
  font-size: 54rpx;
  font-weight: 700;
  color: #fcd34d;
  text-shadow:
    0 4rpx 7rpx rgba(0, 0, 0, 0.35),
    0 0 22rpx rgba(251, 191, 36, 0.5);
}

/* H5: text-base text-amber-300/80 → 30rpx */
.bonus-unit {
  font-size: 30rpx;
  color: rgba(252, 211, 77, 0.8);
}

/* H5: stat-label text-xs mt-1.5 → 22rpx/29rpx, mt-1.5=6px→11rpx */
.bonus-label-row {
  margin-top: -8rpx;
  line-height: 29rpx;
}
.bonus-label {
  font-size: 22rpx;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.15);
}

/* --- L4: 预计收入 --- */
/* H5: .flex.items-center.justify-between.pt-2.border-t.border-white/25 → pt-2=8px→15rpx */
.perf-l4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16rpx;
  border-top: 1rpx solid rgba(255,255,255,0.25);
  line-height: 29rpx;
}

/* H5: stat-label text-xs → 22rpx/29rpx */
.perf-l4-label {
  font-size: 22rpx;
  color: rgba(255,255,255,0.9);
  text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.15);
  white-space: pre;
}

/* H5: .flex.items-center.gap-1.5 → gap-1.5=6px→11rpx */
.perf-l4-right {
  display: flex;
  align-items: center;
  gap: 11rpx;
}

/* H5: stat-value text-lg font-bold → 33rpx/51rpx */
.income-value {
  font-size: 33rpx;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 2rpx 6rpx rgba(0,0,0,0.25);
}

/* H5: trend-down → color:rgba(255,255,255,0.5), font-size:12px→22rpx */
.income-trend {
  font-size: 22rpx;
  color: rgba(255,255,255,0.7);
}
.trend-down {
  color: rgba(255,255,255,0.5);
}

/* ============================================
 * Loading / Empty / Error 状态
 * ============================================ */
.state-loading {
  padding: 36rpx 29rpx;
}
.loading-placeholder {
  background: #ffffff;
  border-radius: 22rpx;
  padding: 29rpx;
  margin-bottom: 22rpx;
}
.ph-line {
  height: 22rpx;
  background: #f3f3f3;
  border-radius: 7rpx;
  margin-bottom: 15rpx;
}
.ph-line--title { width: 40%; height: 29rpx; }
.ph-line--body { width: 80%; }
.ph-line--short { width: 55%; margin-bottom: 0; }

.state-empty {
  padding: 120rpx 0;
  text-align: center;
}
.empty-text {
  font-size: 26rpx;
  color: #a6a6a6;
}

.state-error {
  padding: 120rpx 0;
  text-align: center;
}
.error-text {
  font-size: 26rpx;
  color: #a6a6a6;
  display: block;
  margin-bottom: 29rpx;
}
.retry-btn {
  display: inline-block;
  padding: 15rpx 44rpx;
  background: #0052d9;
  border-radius: 18rpx;
  color: #ffffff;
}
.retry-btn-text {
  font-size: 26rpx;
  color: #ffffff;
}

/* ============================================
 * 任务列表区域
 * ============================================ */
/* H5: .px-4.py-5 → padding: 36rpx 29rpx */
.task-section {
  padding: 36rpx 29rpx;
}

/* --- 标题行 --- */
/* H5: .flex.items-center.justify-between.mb-4 → mb-4=16px→29rpx */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 29rpx;
  line-height: 44rpx; /* text-base 行高容器 */
}

/* H5: text-base font-semibold text-gray-13 → 30rpx/44rpx */
.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #242424;
}

/* H5: text-sm text-gray-6 → 26rpx/36rpx */
.section-count {
  font-size: 26rpx;
  color: #a6a6a6;
}

/* --- 任务分组 --- */
/* H5: .mb-5 → mb-5=20px→36rpx */
.task-group {
  margin-bottom: 36rpx;
}

/* H5: .flex.items-center.gap-1.5.mb-2.5 → gap-1.5=6px→11rpx, mb-2.5=10px→18rpx */
.group-label-row {
  display: flex;
  align-items: center;
  gap: 11rpx;
  margin-bottom: 18rpx;
}

/* H5: .section-label → font-size:13px→24rpx, font-weight:500, padding:3px 10px→6rpx 18rpx, border-radius:4px→8rpx */
.group-label {
  display: inline-flex;
  align-items: center;
  gap: 7rpx;
  font-size: 24rpx;
  font-weight: 500;
  padding: 6rpx 18rpx;
  border-radius: 8rpx;
}

/* H5: text-amber-700 bg-amber-50 */
.group-label--pinned {
  color: #b45309;
  background: #fffbeb;
  /* 确保 📌 Emoji 在 Android 真机上正确渲染 */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* H5: text-gray-9 bg-gray-2 */
.group-label--normal {
  color: #5e5e5e;
  background: #eeeeee;
}

/* H5: text-gray-6 bg-gray-2 */
.group-label--abandoned {
  color: #a6a6a6;
  background: #eeeeee;
}

/* H5: text-sm text-gray-6 → 26rpx/36rpx */
.group-count {
  font-size: 26rpx;
  color: #a6a6a6;
  line-height: 36rpx;
}

/* --- 卡片列表 --- */
/* H5: .space-y-3 → gap 12px→22rpx */
.task-card-list {
  display: flex;
  flex-direction: column;
  gap: 22rpx;
}

/* ============================================
 * 任务卡片
 * H5: .task-card → border-left:4px solid transparent, bg-white rounded-xl p-4 shadow-sm
 * border-left:4px→8rpx, rounded-xl=12px→22rpx, p-4=16px→29rpx
 * ============================================ */
.task-card {
  position: relative;
  background: #ffffff;
  border-radius: 20rpx;
  border-left: 12rpx solid transparent;
  box-shadow:0rpx 4rpx 6rpx rgba(0,0,0,0.08);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* 卡片边框颜色 — 严格对齐 VI-DESIGN-SYSTEM.md 1.1 节 */
.task-card--high_priority { border-left-color: var(--task-high-priority-border); }
.task-card--priority_recall { border-left-color: var(--task-priority-recall-border); }
.task-card--relationship { border-left-color: var(--task-relationship-border); }
.task-card--callback { border-left-color: var(--task-callback-border); }

/* 置顶卡片微亮边框 — 严格对齐 VI-DESIGN-SYSTEM.md 4.1 节 */
.task-card--pinned {
  box-shadow: 0 5rpx 7rpx var(--status-pinned-shadow-light), 0 0 0 8rpx var(--status-pinned-shadow-glow);
}

/* 已放弃卡片 — 严格对齐 VI-DESIGN-SYSTEM.md 4.2 节 */
.task-card--abandoned {
  border-left-color: var(--status-abandoned-border) !important;
  opacity: var(--status-abandoned-opacity);
}

/* hover 态 */
.task-card--hover {
  background: #f9f9f9;
}

/* H5: p-4 → 29rpx */
.card-body {
  flex: 1;
  padding: 32rpx 4rpx 32rpx 32rpx;
  min-width: 0;
}

/* 右侧箭头 — H5: w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1 */
.card-arrow {
  flex-shrink: 0;
  padding: 0 22rpx 0 0;
  display: flex;
  align-items: center;
  align-self: stretch;
}

/* --- 卡片第一行：标签 + 客户名 + 心形 + 备注 --- */
/* H5: .flex.items-center.gap-2.mb-1.5 → gap-2=8px→15rpx, mb-1.5=6px→11rpx */
.card-row-1 {
  display: flex;
  align-items: center;
  gap: 15rpx;
  margin-bottom: 14rpx;
  line-height: 29rpx; /* text-xs 行高容器（标签高度基准） */
}

/* --- 任务类型标签 --- */
/* H5: px-2 py-0.5 text-white text-xs font-medium → padding:2px 8px→4rpx 15rpx, 22rpx/29rpx, border-radius:4px→8rpx */
.task-type-tag {
  display: inline-flex;
  align-items: center;
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  flex-shrink: 0;
}
.tag-text {
  font-size: 22rpx;
  font-weight: 500;
  color: #ffffff;
  line-height: 1;
}

/* 标签渐变色 — 严格对齐 VI-DESIGN-SYSTEM.md 1.1 节 */
.task-type-tag--high_priority {
  background: linear-gradient(135deg, var(--task-high-priority-from) 0%, var(--task-high-priority-to) 100%);
}
.task-type-tag--priority_recall {
  background: linear-gradient(135deg, var(--task-priority-recall-from) 0%, var(--task-priority-recall-to) 100%);
}
.task-type-tag--relationship {
  background: linear-gradient(135deg, var(--task-relationship-from) 0%, var(--task-relationship-to) 100%);
}
.task-type-tag--callback {
  background: linear-gradient(135deg, var(--task-callback-from) 0%, var(--task-callback-to) 100%);
}

/* 已放弃标签灰化 — 严格对齐 VI-DESIGN-SYSTEM.md 4.2 节 */
.task-type-tag--abandoned {
  background: var(--status-abandoned-border) !important;
}

/* H5: text-base font-semibold text-gray-13 → 30rpx/44rpx */
.customer-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #242424;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 已放弃客户名灰色 — 严格对齐 VI-DESIGN-SYSTEM.md 4.2 节 */
.customer-name--abandoned {
  color: var(--status-abandoned-text);
}

/* H5: note-indicator → font-size:12px→22rpx, margin-left:2px→4rpx */
.note-indicator {
  font-size: 22rpx;
  flex-shrink: 0;
}

/* --- 卡片第二行：到店/余额 --- */
/* H5: text-sm text-gray-7 leading-relaxed → 26rpx/36rpx（leading-relaxed≈1.625，但按字典取 36rpx） */
.card-row-2 {
  margin-bottom: 4rpx;
  line-height: 36rpx;
}
.visit-text {
  font-size: 26rpx;
  color: #8b8b8b;
}
/* 已放弃到店文字 — H5: .task-card.abandoned .task-desc { color: #c5c5c5 } */
.visit-text--abandoned {
  color: #c5c5c5;
}

/* --- 卡片第三行：AI 建议 --- */
/* H5: text-sm text-gray-6 leading-relaxed → 26rpx/36rpx */
.card-row-3 {
  display: flex;
  align-items: baseline;
  gap: 0;
  line-height: 36rpx;
}

/* AI 图标 — 全局样式见 app.wxss .ai-inline-icon / .ai-title-badge */
/* task-list 使用默认 indigo 配色，无需额外覆盖 */
.ai-suggestion-text {
  font-size: 26rpx;
  color: #a6a6a6;
  flex: 1;
  line-height: 36rpx;
}

.ai-suggestion-text {
  font-size: 26rpx;
  color: #a6a6a6;
  flex: 1;
}

/* --- 放弃原因行 --- */
.card-row-abandon {
  margin-top: 7rpx;
  line-height: 36rpx;
}
.abandon-reason {
  font-size: 26rpx;
  color: #a6a6a6;
}

/* --- 加载更多 --- */
.load-more {
  padding: 36rpx 0;
  text-align: center;
}
.load-more-text {
  font-size: 24rpx;
  color: #c5c5c5;
}

/* ============================================
 * 长按上下文菜单
 * H5: .context-overlay / .context-menu / .ctx-item
 * ============================================ */
.ctx-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.ctx-overlay--active {
  opacity: 1;
  pointer-events: all;
}

/* H5: .context-menu → border-radius:14px→25rpx, min-width:192px→350rpx, padding:6px 0→11rpx 0 */
.ctx-menu {
  position: fixed;
  z-index: 101;
  background: #ffffff;
  border-radius: 25rpx;
  box-shadow: 0 22rpx 73rpx rgba(0, 0, 0, 0.18);
  min-width: 350rpx;
  padding: 11rpx 0;
  opacity: 0;
  transform: scale(0.88);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform-origin: top left;
}
.ctx-menu--active {
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
}

/* H5: .ctx-item → gap:10px→18rpx, padding:13px 18px→24rpx 33rpx, font-size:14px→26rpx */
.ctx-item {
  display: flex;
  align-items: center;
  gap: 18rpx;
  padding: 24rpx 33rpx;
  line-height: 36rpx;
}
.ctx-item + .ctx-item {
  border-top: 1rpx solid #f3f3f3;
}
.ctx-item--hover {
  background: #f3f3f3;
}

.ctx-emoji {
  font-size: 30rpx;
  flex-shrink: 0;
  /* 确保 Emoji 在 Android 真机上正确渲染 */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.ctx-text {
  font-size: 26rpx;
  color: #393939;
}

/* ============================================
 * 放弃弹窗
 * H5: .modal-overlay / .modal-card
 * ============================================ */
.abandon-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 30vh;
  transition: align-items 0.3s ease, padding-top 0.3s ease;
}

/* 键盘弹出时，弹窗移到顶部 */
.abandon-overlay--keyboard-open {
  align-items: flex-start;
  padding-top: 0;
}

/* H5: .modal-card → border-radius:16px→29rpx, width:88%, padding:24px 20px 20px→44rpx 36rpx 36rpx */
.abandon-modal {
  background: #ffffff;
  border-radius: 29rpx;
  width: 88%;
  max-width: 655rpx;
  padding: 44rpx 36rpx 36rpx;
  box-shadow: 0 36rpx 109rpx rgba(0, 0, 0, 0.2);
  max-height: 80vh;
  overflow-y: auto;
  transition: border-radius 0.3s ease;
}

/* 键盘弹出时，改为全圆角 */
.abandon-overlay--keyboard-open .abandon-modal {
  border-radius: 0;
  max-height: none;
}

/* 弹窗标题行 */
.abandon-header {
  display: flex;
  align-items: center;
  margin-bottom: 7rpx;
  line-height: 44rpx;
}
.abandon-header-left {
  display: flex;
  align-items: center;
  gap: 11rpx;
}
.abandon-header-emoji {
  font-size: 30rpx;
}
/* H5: text-base font-semibold text-gray-13 → 30rpx/44rpx */
.abandon-header-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #242424;
}
.abandon-header-name {
  color: #e34d59;
}

/* H5: text-xs text-gray-6 mb-3 → 22rpx/29rpx, mb-3=12px→22rpx */
.abandon-desc-row {
  margin-bottom: 22rpx;
  line-height: 29rpx;
}
.abandon-desc {
  font-size: 22rpx;
  color: #a6a6a6;
}

/* H5: textarea → border:1.5px→3rpx solid #e7e7e7, border-radius:10px→18rpx, padding:12px 14px→22rpx 25rpx, font-size:14px→26rpx */
.abandon-textarea {
  width: 100%;
  min-height: 180rpx;
  border: 3rpx solid #e7e7e7;
  border-radius: 18rpx;
  padding: 22rpx 25rpx;
  font-size: 26rpx;
  line-height: 1.6;
  color: #2c2c2c;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.abandon-textarea:focus {
  border-color: #0052d9;
  background: #fff;
}
.abandon-textarea--error {
  border-color: #e34d59;
}

/* H5: .modal-error → color:#e34d59, font-size:12px→22rpx, margin-top:6px→11rpx */
.abandon-error {
  color: #e34d59;
  font-size: 22rpx;
  margin-top: 11rpx;
}

/* 弹窗按钮行 */
.abandon-actions {
  display: flex;
  gap: 18rpx;
  margin-top: 25rpx;
}

/* 键盘弹出时固定在键盘上方 */
.abandon-actions--float {
  position: fixed;
  left: 0;
  right: 0;
  padding: 12rpx 36rpx 16rpx;
  background: #fff;
  box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.06);
  z-index: 201;
}

.abandon-btn {
  flex: 1;
  padding: 22rpx 0;
  border-radius: 18rpx;
  text-align: center;
  font-size: 27rpx;
  font-weight: 500;
}
.abandon-btn--cancel {
  background: #f3f3f3;
  color: #5e5e5e;
}
.abandon-btn--cancel-hover {
  background: #e7e7e7;
}
.abandon-btn--confirm {
  background: #e34d59;
  color: #ffffff;
}
.abandon-btn--confirm-hover {
  background: #c9363f;
}

/* 逾期徽章 — 姓名行最右，红色半透明背景 */
.overdue-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 22rpx;
  font-weight: 600;
  color: #e34d59;
  background: rgba(227, 77, 89, 0.12);
  border: 1rpx solid rgba(227, 77, 89, 0.25);
  border-radius: 8rpx;
  padding: 4rpx 14rpx;
  line-height: 1.4;
}

/* 截止日期行 — DISPLAY-STANDARDS §7 */
.card-row-deadline {
  display: flex;
  align-items: center;
  margin-top: 4rpx;
  margin-bottom: 2rpx;
}
.deadline-text {
  font-size: 22rpx;
  line-height: 29rpx;
  font-weight: 500;
}
.deadline-text--muted   { color: #a6a6a6; }
.deadline-text--normal  { color: #5e5e5e; }
.deadline-text--warning { color: #ed7b2f; }
.deadline-text--danger  { color: #e34d59; font-weight: 600; }