/* =========================================================================
 * 达达广场 · 科技风格样式（叠加于 app.css 之上）
 * - 深空玻璃拟态、霓虹辉光、渐变扫描
 * - 区块之间层次分明，响应式适配
 * ========================================================================= */

/* ---------- 主题色变量（与现有 app.css 兼容） ---------- */
.page[data-page="home"], .page#page-home {
  --t-card: rgba(255, 255, 255, 0.72);
  --t-card-solid: #ffffff;
  --t-border: rgba(198, 40, 40, 0.10);
  --t-shadow-sm: 0 2px 10px rgba(20, 30, 60, 0.05);
  --t-shadow-md: 0 10px 30px rgba(198, 40, 40, 0.10);
  --t-grad-cool: linear-gradient(135deg, #C62828 0%, #E53935 60%, rgba(198,40,40,0) 100%);
  --t-grad-warm: linear-gradient(135deg, #FFB547 0%, #FF7A59 100%);
}

/* 暗色主题：home 页同享黑色主体（红→黑渐变、深色卡面） */
[data-theme='dark'] .page#page-home {
  --t-card: rgba(19, 24, 38, 0.72);
  --t-card-solid: #131826;
  --t-border: rgba(255, 255, 255, 0.12);
  --t-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45);
  --t-grad-cool: linear-gradient(135deg, #C62828 0%, #E53935 40%, #1A1A1A 100%);
}
[data-theme='dark'] .streak-fill.thunder { background: linear-gradient(90deg, #C62828, #1A1A1A, #C62828); }


/* ---------- 全屏氛围背景（点阵 + 渐变光斑） ---------- */
#page-home {
  position: relative;
}
#page-home::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 40% at 50% -10%, rgba(198, 40, 40, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 30% at 100% 100%, rgba(139, 0, 0, 0.10), transparent 60%);
  pointer-events: none; z-index: 0;
}

#page-home > * { position: relative; z-index: 1; }

/* ---------- Hero · 大积分卡（点击弹排行榜） ---------- */
.hero.t-hero {
  position: relative; overflow: hidden;
  background: var(--t-grad-cool);
  border-radius: 20px;
  margin: 8px 16px 0;
  padding: 8px 16px 7px;
  color: #fff;
  box-shadow: 0 22px 50px -22px rgba(198, 40, 40, 0.65);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.hero.t-hero:hover { transform: translateY(-3px); box-shadow: 0 28px 60px -22px rgba(198, 40, 40, 0.8); }
.hero.t-hero:active { transform: translateY(-1px); }

/* 内部光斑缓慢漂移 */
.hero.t-hero::before {
  content: ''; position: absolute; inset: -40%;
  background:
    radial-gradient(circle at 25% 30%, rgba(255, 255, 255, 0.22), transparent 45%),
    radial-gradient(circle at 75% 80%, rgba(139, 0, 0, 0.30), transparent 45%);
  animation: tGlow 9s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes tGlow { from { transform: translate(0, 0); } to { transform: translate(-3%, 2%); } }

/* 顶部扫描线 */
.hero.t-hero::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: tScan 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tScan { 0%, 100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } }

.hero .label {
  font-size: 16px;
  color: #fff;
  font-weight: 700;
}
/* Label + 排名 chip 同行 */
.hero .hero-top-row {
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 1;
}
.hero .amount {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 2px; margin-bottom: 3px;
  position: relative; z-index: 1;
}
/* ===== Hero 大余额（+300达达币）=====
   ⚠️ 根因（2026-08-21 三次修复终定位）：renderCoin 输出的数字/单位全在 span 里：
   <span class="coin"><span class="coin-sign">+</span><span class="coin-num">300</span>
   <span class="coin-unit">达达币</span></span>。app.css `.hero .amount span{font-size:13px;opacity:.85}`
   命中全部 span → 数字被压小且显灰；前两轮只改 b 字号，b 内无直接文本，故从未生效。
   正确做法：.coin/.coin-sign/.coin-num 继承 b 字号，.coin-unit 用 .78em 等比次级。 */
.hero.t-hero .amount b {
  font-size: 44px; font-weight: 800; line-height: 1;
  background: linear-gradient(180deg, #fff 25%, rgba(255, 255, 255, 0.96));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 20px rgba(255, 255, 255, 0.38));
  font-variant-numeric: tabular-nums; letter-spacing: -1px;
}
.hero.t-hero .amount .coin,
.hero.t-hero .amount .coin .coin-num {
  font-size: inherit;  /* 跟随 b 的 44px，覆盖 .hero .amount span 的 13/15px */
  opacity: 1;          /* 覆盖 opacity:.85 —— 降透明度显灰且脱离渐变裁切 */
  color: inherit;      /* transparent → 随 b 白色渐变显示 */
}
/* 可用余额不可能为负：隐藏 +/- 符号，数字与单位间补 6px 间隙（coin-sign 为独立
   span 无空格文本，display:none 后直接拼 300达达币，需 margin 撑开） */
.hero.t-hero .amount .coin .coin-sign { display: none; }
.hero.t-hero .amount .coin .coin-num { margin-right: 6px; }
.hero.t-hero .amount .coin .coin-unit {
  font-size: .78em;    /* 相对 .coin 44px ≈ 34.3px，单位等比次级弱化（禁 opacity） */
  opacity: 1; color: inherit;
}

.hero .rank-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px; font-size: 11px;
  color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  position: relative; z-index: 1;
}
.hero .rank-chip::before {
  content: '→'; display: inline-block; font-size: 10px; opacity: 0.9;
  transition: transform .25s;
}
.hero.t-hero:hover .rank-chip::before { transform: translateX(3px); }

.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin-top: 6px;
  padding-top: 6px;
  /* 右侧留白：给放大的吉祥物让位（88px 落在此区），避免遮挡「本月消耗」 */
  padding-right: 74px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  position: relative; z-index: 1;
}
.hero-stats > div { text-align: center; position: relative; }
.hero-stats > div + div::before {
  content: ''; position: absolute; left: -3px; top: 3px; bottom: 3px;
  width: 1px; background: rgba(255, 255, 255, 0.15);
}
.hero-stats .k { font-size: 10px; color: rgba(255, 255, 255, 0.72); margin-bottom: 2px; letter-spacing: .2px; }
.hero-stats .v {
  font-size: 16px; font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;

}

/* ---------- Hero 吉祥物「小达」趴角（纯新增，不改上方任何既有规则） ----------
 * 位置：右下角，放大至 88px（PC）/ 64px（移动），顶部越过统计栏分割线形成前后叠层，
 *       下缘微沉出卡底被 overflow:hidden 裁掉一点脚，形成「趴在卡沿上」的观感。
 * ⚠️ 三条约束：
 *  1. .hero 是 role="button" 整卡可点（弹排行榜），故必须 pointer-events:none，
 *     否则手指点在小达身上不触发排行榜（钉钉 webview 最易漏测）。
 *  2. .hero 的 ::before(漂移光斑) 与 ::after(顶部扫描线) 两个伪元素均已占用，
 *     无法用伪元素塞图，只能加真实 <img> 节点。
 *  3. 放大后统计栏需右侧留白（.hero-stats padding-right：PC 74px / 移动 50px），
 *     吉祥物落在留白区 + 探出卡角，不遮挡「本月消耗」文字。
 */
.hero .hero-mas {
  position: absolute; right: 6px; bottom: -18px;
  /* 放大（64→88px）+ 下探（-6→-18px）：顶部越过 hero-stats 的分割线，
     与统计栏形成前后叠层；下缘被 overflow:hidden 裁掉一点脚，仍是「趴在卡沿」。 */
  width: 88px; height: 88px;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 10px 20px rgba(120,30,30, 0.38));
  transform: rotate(-6deg);
}
.hero .hero-mas img { display: block; width: 100%; height: 100%; object-fit: contain; }

@media (prefers-reduced-motion: no-preference) {
  .hero .hero-mas { animation: heroMasFloat 4.2s ease-in-out infinite; }
  @keyframes heroMasFloat {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50% { transform: rotate(-6deg) translateY(-5px); }
  }
}


/* ---------- 积分即将过期 · 顶部滚动提示（节省 Hero 高度） ---------- */
.expire-ticker {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 16px 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 181, 71, 0.18), rgba(255, 122, 89, 0.10));
  border: 1px solid rgba(255, 181, 71, 0.42);
  overflow: hidden;
}
.expire-ticker .et-ico { flex: 0 0 auto; font-size: 15px; line-height: 1; }
.expire-ticker .et-viewport {
  flex: 1 1 auto; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #7a1010 14px, #7a1010 calc(100% - 24px), transparent);
          mask-image: linear-gradient(90deg, transparent, #7a1010 14px, #7a1010 calc(100% - 24px), transparent);
}
.expire-ticker .et-track {
  display: inline-block; white-space: nowrap;
  font-size: 12.5px; line-height: 1.45; font-weight: 600;
  color: #9a5a00;
  padding-left: 100%;
  animation: etScroll 16s linear infinite;
  will-change: transform;
}
.expire-ticker:hover .et-track { animation-play-state: paused; }
@keyframes etScroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---------- 通用卡片 ---------- */
#page-home .card {
  background: var(--t-card-solid);
  border: 1px solid var(--t-border);
  border-radius: 18px;
  box-shadow: var(--t-shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
#page-home .card:hover { box-shadow: var(--t-shadow-md); }

/* ---------- 签到卡 ---------- */
.card.checkin.t-checkin {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 181, 71, 0.10), rgba(255, 122, 89, 0.06));
  border-color: rgba(255, 181, 71, 0.22);
}
.card.checkin .ci-ico {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--t-grad-warm);
  border-radius: 14px; font-size: 24px;
  box-shadow: 0 10px 22px -10px rgba(255, 122, 89, 0.7);
  flex-shrink: 0;
}
.card.checkin .ci-txt { flex: 1; min-width: 0; }
.card.checkin .ci-t { font-weight: 600; font-size: 15px; }
.card.checkin .ci-s { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; line-height: 1.5; }
.card.checkin .btn { padding: 10px 16px; border-radius: 12px; font-weight: 600; }

/* ---------- 连击进度条（玻璃 + 流光，紧凑不突兀） ---------- */
.streak-block.t-streak {
  padding: 16px;
  margin: 0;                       /* 不再加 margin, 走 .sec 的 padding(0 16px) 统一宽度 */
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  background: var(--t-card, rgba(255,255,255,0.72));
  border: 1px solid var(--t-border, rgba(198,40,40,0.10));
  box-shadow: var(--t-shadow-sm, 0 2px 10px rgba(20,30,60,0.05));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.streak-block.t-streak .streak-row { margin-bottom: 10px; }
.streak-block.t-streak .streak-row:last-child { margin-bottom: 0; }
.streak-bar {
  height: 8px;
  flex: 0 0 80px;                   /* 固定进度条宽度, 让文字自适应 */
  width: 80px;
  max-width: 80px;
  background: rgba(198, 40, 40, 0.08);
  border-radius: 999px;
  overflow: hidden; position: relative;
}
.streak-text {
  font-size: 12.5px;
  margin-top: 0;
  flex: 1;                          /* 文字占剩余空间 */
  min-width: 0;
  color: var(--text-sub);
  display: flex; justify-content: space-between; align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.streak-fill {
  height: 100%; border-radius: 999px;
  position: relative; transition: width 1.1s cubic-bezier(.2,.7,.2,1);
  background-size: 200% 100%;
  animation: tShimmer 2.4s linear infinite;
}
.streak-fill::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 20px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5));
  border-radius: 999px;
}
@keyframes tShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.streak-fill.fire { background: linear-gradient(90deg, #ff5e5e, #FFB547, #ff5e5e); }
.streak-fill.thunder { background: linear-gradient(90deg, #C62828, rgba(198,40,40,0), #C62828); }
.streak-fill.gold { background: linear-gradient(90deg, #FFB547, #FFE066, #FFB547); }
.streak-fill.crown { background: linear-gradient(90deg, #FFB547, #ff5e5e, #C62828); }

.streak-text.done { color: var(--brand-3); }

/* ---------- 服务快捷区（6 宫格 + 科技图标） ---------- */
.service-grid.t-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 8px;
  padding: 16px;
}
.sg-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
.sg-item:hover { transform: translateY(-3px); }
.sg-ico {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(198, 40, 40, 0.10), rgba(139, 0, 0, 0.08));
  color: var(--c, var(--brand-1));
  border-radius: 16px;
  font-size: 26px;
  border: 1px solid rgba(198, 40, 40, 0.12);
  position: relative; overflow: hidden;
  transition: box-shadow .25s ease;
}
.sg-ico::before {
  content: ''; position: absolute; inset: -50%;
  background: radial-gradient(circle, currentColor 0%, transparent 70%);
  opacity: 0; transition: opacity .25s;
}
.sg-item:hover .sg-ico::before { opacity: 0.18; }
.sg-item:hover .sg-ico { box-shadow: 0 10px 22px -10px currentColor; }
.sg-tx { font-size: 12px; font-weight: 500; color: var(--text-sub); text-align: center; }

/* ---------- 区块标题（带左侧渐变条） ---------- */
.sec-head.t-sec {
  padding: 18px 4px 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.sec-head.t-sec .sec-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700;
  color: var(--text);
}
.sec-head.t-sec .sec-title::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-1), rgba(198,40,40,0));
}
.sec-head.t-sec .sec-more {
  font-size: 12.5px; color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; gap: 3px;
  transition: color .2s, gap .2s;
}
.sec-head.t-sec .sec-more:hover { color: var(--brand-1); gap: 5px; }

/* ---------- 部门排行独立分块 ---------- */
.dept-block.t-dept { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* 右下角吉祥物（v15 恢复 v8 设计 / v16 紧凑化）：小达真实 <img> 元素，固定卡片右下角；
   榜单行贴顶、形象贴底，15 行不满时形象恒在右下。v16 缩小 92→64 + margin-bottom 4→0 收紧。 */
.dept-block .d-mascot {
  display: block;
  margin-top: auto;             /* 行贴顶、形象贴底 */
  align-self: flex-end;         /* 右下角 */
  width: 64px;                  /* v16: 92→64，更紧凑 */
  height: 64px;
  object-fit: contain;
  margin-right: 8px;
  margin-bottom: 0;             /* v16: 4→0，贴底无留白 */
  opacity: 0.95;
  pointer-events: none;
  flex-shrink: 0;
}
.dept-block .d-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 8px;
  background: linear-gradient(135deg, rgba(198, 40, 40, 0.05), rgba(139, 0, 0, 0.04));
  border-bottom: 1px solid var(--t-border);
}
.dept-block .d-head .d-t {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 15px;
}
.dept-block .d-head .d-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--t-grad-cool);
  border-radius: 9px; font-size: 14px;
  box-shadow: 0 6px 14px -6px var(--brand-1);
}
.dept-block .d-head .d-more {
  font-size: 12.5px; color: var(--text-dim); cursor: pointer;
  display: flex; align-items: center; gap: 3px;
  transition: color .2s, gap .2s;
}
.dept-block .d-head .d-more:hover { color: var(--brand-1); gap: 5px; }
.dept-block .d-list {
  padding: 4px 8px 10px;
  display: flex; flex-direction: column;   /* 基础即 flex 列：行贴顶，多余高度由卡片级 ::after 承接 */
}
  .dept-block .d-row {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 10px;          /* v19d: 9→11，行间距略放宽，未滚动舒适显示 ~10 行 */
  border-radius: 12px;
  transition: background .2s;
  cursor: pointer;
}
.dept-block .d-row:hover { background: rgba(198, 40, 40, 0.05); }
.dept-block .d-row.me-highlight {
  background: rgba(198, 40, 40, 0.10);
  outline: 1.5px solid rgba(198, 40, 40, 0.55);
  outline-offset: -1.5px;
}
.dept-block .d-row.me-highlight .d-name b { color: #C62828; font-weight: 700; }
.dept-block .d-row.me-tail { margin-top: 4px; border-top: 1px dashed rgba(198, 40, 40, 0.25); padding-top: 6px; }
.dept-block .d-rank {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: rgba(198, 40, 40, 0.08);
  color: var(--brand-1);
  flex-shrink: 0;
}
.dept-block .d-rank.top1 {
  background: linear-gradient(135deg, #FFB547, #FF7A59); color: #fff;
  box-shadow: 0 4px 10px -4px #FF7A59;
}
.dept-block .d-rank.top2 {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #fff;
}
.dept-block .d-rank.top3 {
  background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff;
  box-shadow: 0 4px 10px -4px #d97706;
}
/* 姓名/部门区：必须横向单行 + 溢出省略号。
   ⚠️ 只写 min-width:0 不够——同行右侧 .d-pts 内的 .coin 是 nowrap 且实宽可达 ~90px
   （「+10,000达达币」），远超旧的 min-width:56px，会把本区挤成极窄列，
   中文随之逐字换行形成「竖排」。故此处强制 nowrap + ellipsis，并给下限宽度兜底。 */
.dept-block .d-name { width: 88px; flex: 0 0 88px; min-width: 88px; overflow: hidden; }
.dept-block .d-name b {
  display: block; font-size: 15px; font-weight: 600;       /* v19c: 14→15，行收紧后保可读性 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dept-block .d-name small {
  display: block; font-size: 12.5px; color: var(--text-dim);   /* v19c: 11.5→12.5 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dept-block .d-bar-wrap {
  /* 80→64px：进度条是纯装饰，缩窄它把宽度让给姓名/部门（避免竖排的根因之一）。
     右栏 360px 下 .d-name 可用宽 ≈117px（旧配置仅 ≈60px，中文必竖排）。 */
  width: 64px; height: 6px;
  background: rgba(198, 40, 40, 0.08);
  border-radius: 999px;
  overflow: hidden; flex-shrink: 0;
}

.dept-block .d-bar {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-1), rgba(198,40,40,0));
  transition: width 1s ease;
}
/* 达达币数值：品牌红（还原改动前配色），单位跟随 inherit 不再金黄 */
.dept-block .d-pts {
  font-size: 13px; font-weight: 700;
  color: var(--brand-1);
  flex: 0 0 auto; text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- 排行榜弹层（点击 Hero 触发） ---------- */
.rank-sheet { padding: 0; }
.rank-sheet .rk-head {
  padding: 4px 20px 14px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12.5px;
}
.rank-sheet .rk-tabs {
  display: flex; gap: 8px;
  padding: 0 16px 14px;
}
.rank-sheet .rk-tab {
  flex: 1; padding: 10px 0;
  border-radius: 12px;
  text-align: center;
  font-size: 14px; font-weight: 600;
  background: rgba(198, 40, 40, 0.06);
  color: var(--text-sub);
  cursor: pointer;
  transition: all .25s ease;
  border: 1px solid transparent;
}
.rank-sheet .rk-tab.on {
  background: var(--t-grad-cool, #C62828);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px -10px var(--brand-1, #C62828);
}
/* §1 个人榜「月度 / 完整」双视图切换 */
.rank-sheet .rk-view { padding: 0 16px 4px; }
.rank-sheet .rk-vtab {
  flex: 1; padding: 8px 0;
  border-radius: 10px;
  text-align: center;
  font-size: 13px; font-weight: 600;
  background: rgba(139, 0, 0, 0.08);
  color: var(--text-sub);
  cursor: pointer;
  transition: all .25s ease;
  border: 1px solid transparent;
}
.rank-sheet .rk-vtab.on {
  background: linear-gradient(135deg, var(--brand-1), #C62828);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 16px -10px var(--brand-3);
}
.rank-sheet .rk-mine { min-height: 16px; }

/* §3.3 任务首页卡片 */
.task-card .task-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.task-card .task-head .m-name { flex: 1; min-width: 0; }
.task-card.task-type-1 { border-color: rgba(139,0,0,0.35); }
.task-card.task-type-2 { border-color: rgba(198,40,40,0.22); }
.task-action { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.task-edit { color: var(--brand-1); font-size: 13px; cursor: pointer; margin-left: auto; }
.task-edit:hover { text-decoration: underline; }
.task-prog { margin-top: 8px; }
.task-prog-bar { background: var(--bg-2); border-radius: 8px; height: 8px; overflow: hidden; }
.task-prog-bar > div {
  background: linear-gradient(90deg, var(--brand-1), rgba(198,40,40,0));
  height: 100%; border-radius: 8px; transition: width .4s ease;
}
.task-prog-tx { font-size: 12px; color: var(--text-sub); margin-top: 4px; }

/* lsstreak1（2026-10-29）：首页「连续学习」任务卡
   限时活动卡 → 左侧品牌红竖条做视觉锚点，与常规任务卡区分（不进任务审核流，纯展示+跳转） */
.ls-streak-card { border-left: 3px solid var(--brand-1); }
.ls-streak-card .m-sub { line-height: 1.5; }
.ls-streak-card .m-sub b { color: var(--brand-1); }
.ls-streak-meta { margin-top: 6px; font-size: 12px; color: var(--text-sub); }
.ls-streak-today {
  margin-top: 6px; font-size: 12px; color: var(--text-sub);
  padding: 5px 8px; border-radius: 6px; background: var(--bg-2);
}
.ls-streak-today.on { color: var(--brand-1); }
.task-home .sec { margin-top: 10px; }
.task-home .sec:first-child { margin-top: 8px; }

/* 任务专页（#page-tasks）：标题层级放大 + 内容相对标题右缩进（2026-09-02 视觉层级优化） */
.task-home .sec-head { padding-bottom: 8px; }
.task-home .sec-title { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }
.task-home .card { margin-left: 20px; }
/* 任务专页：小版块间分割线隔离 + 上下留空（板块间通栏虚线，无 padding） */
.task-home .sec { margin-top: 0; }
.task-home .sec + .sec {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px dashed rgba(198, 40, 40, 0.16);
}
/* 空态标题底部留白：月度任务等无任务时标题与板块底部留出空白 */
.task-home .sec.th-empty { padding-bottom: 18px; }

/* 首页「我的任务」区内各任务段类型标签（2026-09-02 新增：与任务专页 sec-title 同风格） */
.th-label {
  display: flex; align-items: center; gap: 6px;
  padding: 20px 18px 0;
  font-size: 16px; font-weight: 700; color: var(--text, #101828);
  letter-spacing: -0.2px;
}
.th-label + .sec-card { margin-top: 10px; margin-left: 20px; }
/* 2026-09-16 修复：上面这条只给了左侧缩进，右侧无对应留白 →
   任务段内容（尤其 #home-thMentor 内的 .mh-card 白底卡）右侧贴边、左右不对称。
   仅对「专项成长陪跑」段补齐对称右留白，卡片水平居中；其余任务段布局不变。 */
.th-label + .sec-card#home-thMentor { margin-right: 20px; }
/* 空态标题底部留白：首页任务区标题（每日签到/个人成长等）无任务时标题下留白 */
.th-label.th-empty { padding-bottom: 18px; }
/* 首页任务区：小版块之间用分割线隔离 + 上下留空（板块间通栏虚线，无 padding） */
.task-home-section .th-label ~ .th-label,
.task-home-section .th-label + .sec-card + .th-label {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px dashed rgba(198, 40, 40, 0.16);
}

/* 首页任务大标题层级放大 */
.task-home-section .sec-head.t-sec--rank .sec-title { font-size: 18px; }

/* 导师段内子标题（我带教的学员 / 带我的导师） */
.th-sub {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--text-sub, #666);
  letter-spacing: -0.2px; margin: 10px 0 8px;
}
.th-sub:first-child { margin-top: 0; }

/* 专项成长陪跑：已分配导师欢迎语 */
.mentor-welcome {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(198,40,40,0.08), rgba(139,0,0,0.06));
  border: 1px solid rgba(198,40,40,0.18);
  border-radius: var(--r-md, 12px);
  padding: 10px 14px; margin-bottom: 10px;
  font-size: 13px; color: var(--text, #101828);
}
.mentor-welcome b { color: var(--brand-1, #C62828); font-weight: 700; }

/* §7 入职任务开启卡片 */
.onb-cta {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(198,40,40,0.08), rgba(139,0,0,0.08));
  border: 1px solid rgba(198,40,40,0.18);
}
.onb-cta-ico { font-size: 26px; }
.onb-cta-tx { flex: 1; min-width: 0; }
.onb-cta-t { font-size: 15px; font-weight: 700; }
.onb-cta-s { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.rank-sheet .rk-list {
  padding: 4px 0 12px;
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* 排行榜行（#page-rank 独立页 + .rank-sheet 弹窗共用） */
.rk-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  transition: background .2s;
  cursor: pointer;
  animation: tRowIn .35s ease backwards;
}
.rank-sheet .rk-row:hover { background: rgba(198, 40, 40, 0.05); }
.rk-row.me {
  background: linear-gradient(90deg, rgba(198, 40, 40, 0.10), transparent);
}
@keyframes tRowIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
.rk-no {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(198, 40, 40, 0.08);
  color: var(--brand-1);
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.rk-no.top1 {
  background: linear-gradient(135deg, #FFB547, #FF7A59); color: #fff;
  box-shadow: 0 4px 10px -4px #FF7A59;
}
.rk-no.top2 {
  background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #fff;
}
.rk-no.top3 {
  background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff;
  box-shadow: 0 4px 10px -4px #d97706;
}
.rk-av {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-3));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 12.5px;
  flex-shrink: 0;
  overflow: hidden;
}
.rk-av img { width: 100%; height: 100%; object-fit: cover; }
/* 排行榜行的姓名/部门：与首页卡同规则，强制横向单行 + 省略号（防竖排） */
.rk-info { flex: 1 1 auto; min-width: 72px; overflow: hidden; }
.rk-info b {
  display: block; font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rk-info small {
  display: block; font-size: 11.5px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rk-info .me-tag {
  font-size: 11px; color: var(--brand-1);
  margin-left: 6px; font-weight: 500;
}
/* 排行榜页/弹层的达达币数值：品牌红渐变文字（改动前的原始配色）。
   ⚠️ background-clip:text + color:transparent 只在「渐变背景所在元素本身」上生效，
   而 renderCoin() 输出的是嵌套 span（.coin-sign/.coin-num/.coin-unit），
   子元素若自带 color 会盖掉 transparent。故这里强制子元素 color:inherit
   并把渐变裁切声明也下放，保证整串「+1,234达达币」统一渐变。 */
.rk-pts {
  font-size: 15px; font-weight: 700;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto; white-space: nowrap;
}
.rk-pts .coin,
.rk-pts .coin-sign,
.rk-pts .coin-num,
.rk-pts .coin-unit { color: inherit; }
/* .coin-unit 已移除 opacity（见 app.css 配色铁律），子元素不再脱离本元素的
   background-clip:text 裁切范围，整串「+1,234达达币」共用同一渐变裁切盒 →
   单位与数字色值严格一致。无需再为单位单独重复渐变声明。 */

/* ---------- 区块入场动画（错落） ---------- */
@keyframes tFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
#page-home > * { animation: tFadeUp .5s ease backwards; }
#page-home > *:nth-child(1) { animation-delay: 0s; }       /* 搜索 */
#page-home > *:nth-child(2) { animation-delay: 0.05s; }    /* Hero */
#page-home > *:nth-child(3) { animation-delay: 0.10s; }    /* 6宫格 / 主网格(PC无移动块) */
#page-home > *:nth-child(4) { animation-delay: 0.15s; }
#page-home > *:nth-child(5) { animation-delay: 0.20s; }
#page-home > *:nth-child(6) { animation-delay: 0.25s; }

/* 双栏内元素错落：我的任务/活动/最近动态在 .home-col-left（左列），
   排行榜在 .home-col-right（右列），两列同高 → 底边对齐 */
.home-col-left > .task-home-section { animation: tFadeUp .5s ease backwards; animation-delay: 0.12s; }
.home-col-left > .sec { animation: tFadeUp .5s ease backwards; }
.home-col-left > .sec:nth-child(1) { animation-delay: 0.20s; }
.home-col-left > .sec:nth-child(2) { animation-delay: 0.28s; }
.home-col-right > .sec { animation: tFadeUp .5s ease backwards; animation-delay: 0.16s; }

/* ---------- 响应式 ---------- */
@media (max-width: 899px) {
  .hero.t-hero { padding: 12px 16px 10px; border-radius: 18px; }
  .hero.t-hero .amount b { font-size: 36px; }
  .hero-stats .v { font-size: 16px; }
  .hero-stats .k { font-size: 10px; }
  /* 窄屏三格统计更挤，吉祥物按比例放大（52→64px）并继续往右探出被卡缘裁掉侧身：
     64px 配 right:-12px → 可见宽约 52px；统计栏 padding-right:50px 留位，
     三栏文字不被遮挡。实测水平间隙：360px≈4px / 375px≈6px / 390px≈8px，最窄机型也安全。 */
  .hero .hero-mas { width: 64px; height: 64px; right: -12px; bottom: -10px; }
  .hero-stats { padding-right: 50px; }
  .service-grid.t-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px; }
  .sg-ico { width: 48px; height: 48px; font-size: 22px; border-radius: 14px; }
  .sg-tx { font-size: 11.5px; }
  /* 窄屏排行榜行：优先保「姓名 + 部门各占一行且不截断成竖排」。
     进度条属装饰信息，窄屏直接隐藏腾出 ~70px 给 .d-name（原先做法是隐藏部门名，
     但部门是用户明确要看的关键信息，改为牺牲进度条）。 */
  .dept-block .d-bar-wrap { display: none; }
  .dept-block .d-name { width: 88px; flex: 0 0 88px; min-width: 88px; }
  .dept-block .d-name small { display: block; }
  .dept-block .d-pts { font-size: 12.5px; }

  /* 移动端:最近动态移至底部 */
  /* ⚠️ 必须用 .on 限定：#page-home(ID,特异性1,0,0) 会压过 app.css 的
     .page{display:none}(0,1,0) 与 .page.on{display:block}(0,2,0)。若写成
     无条件的 #page-home{display:flex}，则首页在「未激活」时仍可见，切到其他
     页面时目标页会被拼接在首页下方（纵向堆叠）。仅激活态才 flex 布局。*/
  #page-home.on { display: flex; flex-direction: column; }
  #page-home > .home-search { order: 1; }
  #page-home > .hero { order: 2; }
  #page-home > .home-quick-grid { order: 3; }
  #page-home > .home-ls-card { order: 4; }
  #page-home > .home-main-grid { order: 5; }
  /* 移动端：单列堆叠，顺序 我的任务 → 活动任务 → 排行榜 → 最近动态
     （display:contents 让 .home-col-left 子项直接进 flex 流，最近动态置底） */
  #page-home.on > .home-main-grid { display: flex; flex-direction: column; gap: 16px; }
  #page-home.on > .home-main-grid > .home-col-left { display: contents; }
  #page-home.on > .home-main-grid > .home-col-left > .sec { margin-top: 0; }
  #page-home.on > .home-main-grid > .home-col-left > .task-home-section { order: 1; }
  #page-home.on > .home-main-grid > .home-col-left > .sec:not(.home-recent):not(.task-home-section) { order: 2; }
  #page-home.on > .home-main-grid > .home-col-right { order: 3; }
  #page-home.on > .home-main-grid > .home-col-left > .sec.home-recent { order: 99; }

  /* 移动端：任务板块缩进收窄（防窄屏内容挤压），标题字号同步略降 */
  .th-label + .sec-card { margin-left: 12px; }
  /* 专项陪跑段（#home-thMentor）：右留白与左缩进对齐，避免卡片右侧贴边 */
  .th-label + .sec-card#home-thMentor { margin-right: 12px; }
  .task-home .card { margin-left: 12px; }
  .th-label { font-size: 15px; padding-top: 14px; }
  .task-home .sec-title { font-size: 16px; }
  /* 移动端：板块分隔线间距同步收窄 */
  .task-home-section .th-label + .sec-card + .th-label { margin-top: 16px; padding-top: 14px; }
  .task-home .sec + .sec { margin-top: 16px; padding-top: 16px; }
}

/* ---------- 统一首页所有区块的上下间距 ---------- */
.page#page-home > .sec { margin-top: 16px; }
.page#page-home > .home-main-grid { margin-top: 16px; }

@media (min-width: 900px) {
  #page-home { max-width: 1100px; margin: 0 auto; padding-right: 4px; }

  /* PC 端双栏：左列(我的任务/活动任务/最近动态)整体 + 右列排行榜拉伸撑满。
     结构：.home-col-left 含三块、.home-col-right 为排行榜；两者同处 grid 单行，
     align-items:stretch 使右列(排行榜)拉伸撑满左列整体高度 →
     排行榜底边 = 左列底边 = 「最近动态」底边；两列顶部(标题)同线。
     去除原 sticky：排行榜随页面自然滚动，与左列始终同高对齐。 */
  .home-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    align-items: start;   /* v19 关键：start 取代 stretch，两列各自自然高，不再强制等高 */
  }
  .home-main-grid .sec { margin-top: 0; }
  /* 左列：三块整体，flex 纵向堆叠，自然高度 */
  .home-main-grid > .home-col-left {
    display: flex; flex-direction: column; gap: 10px; min-width: 0;
  }
  .home-main-grid > .home-col-left > .sec { margin-top: 0; padding: 0; }
  /* v19 方案 C：右栏 sticky 固定在视口内，左栏整页滚 → 两栏底部视觉对齐，无强制等高留白。
     - position:sticky + top:16px：滚到视口顶 16px 处固定不动
     - align-self:start：覆盖 grid stretch（grid 的 align-items:start 已设，此处冗余保险）
     - max-height:calc(100vh - 32px)：不超视口（上下各留 16px）
     - overflow:hidden：超出部分由内部 .d-list 滚动承接
     - 移动端（<900px）不受影响，仍单列堆叠 */
  .home-main-grid > .home-col-right {
    position: sticky;
    top: 6px;                  /* v19c: 8→6，更贴顶，sticky 区更长 */
    align-self: start;
    min-width: 0;
    max-height: calc(100vh - 10px);   /* v19c: 16→10，sticky 拉长至近满视口 */
    overflow: hidden;
    display: flex; flex-direction: column;
    gap: 16px;
  }
  /* 右栏单卡：自然高（不再 flex:1 撑满），padding:0 清 app.css .sec 的 0 16px 缩进 */
  .home-main-grid > .home-col-right > .sec { flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0; padding: 0; }
  /* 榜单列表内部滚动：卡固定、列表区滚（max-height 让超出视口的榜单可滚） */
  .home-main-grid > .home-col-right .d-list {
    min-height: 0; flex: 1 1 auto; max-height: calc(100vh - 120px);   /* v19c: 160→120，榜单区更长，10 行免滚 */
    display: flex; flex-direction: column; justify-content: flex-start;
    overflow-y: auto;
  }
  .home-main-grid > .home-col-right .card.dept-block { flex: 0 0 auto; display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - 10px); }
  /* ---------- 最近动态：列表 + 不足10条时的品牌红微渐变填充面板 ---------- */
  .home-recent .card.recent-body { display: flex; flex-direction: column; min-height: 0; }
  .home-recent .rec-list { display: flex; flex-direction: column; }
  .home-recent .recent-fill {
    flex: 1 1 auto; min-height: 56px; margin: 4px 10px 10px; border-radius: 14px;   /* v16: min-height 96→56, margin 12→10, 紧凑 */
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    text-align: center; padding: 10px;   /* v16: 16→10 */
    background:
      radial-gradient(130% 120% at 50% 0%, rgba(198, 40, 40, 0.07), rgba(198, 40, 40, 0) 68%),
      linear-gradient(180deg, #ffffff, #fff6f6);
    border: 1px dashed rgba(198, 40, 40, 0.20);
  }
  .home-recent .recent-fill .rf-ico { font-size: 26px; opacity: 0.55; line-height: 1; }
  .home-recent .recent-fill .rf-tx { font-size: 12.5px; color: var(--text-dim, #9aa0a8); max-width: 240px; }
  .home-recent .recent-fill .rf-btn { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--brand-1); background: rgba(198, 40, 40, 0.09); border: 1px solid rgba(198, 40, 40, 0.22); padding: 6px 16px; border-radius: 20px; cursor: pointer; transition: background 0.2s; }
  .home-recent .recent-fill .rf-btn:hover { background: rgba(198, 40, 40, 0.16); }
  /* 任务区块内各任务段之间的间距 */
  .task-home-section .sec-card + .sec-card { margin-top: 10px; }

  /* ⚠️ 三板块间距统一（2026-08-21）：我的任务/活动任务/最近动态 padding/margin 数值规范化。
     仅作用于首页左列（.home-col-left），不影响其他页面。
     基准 = 任务整卡：标题 16px 18px 8px、内容行 12px 18px、板块间 gap 16px（.home-col-left 已有）。 */
  /* 2. 标题区统一：活动/动态标题 padding 与任务标题（.t-sec--rank）一致 */
  .home-main-grid > .home-col-left > .sec > .sec-head.t-sec { padding: 16px 18px 8px; }
  /* 3. 内容行统一：左列内 .earn-head（活动头）与 .rec（活动行/动态行）padding 与任务段一致 */
  .home-col-left .card .earn-head { padding: 12px 18px; }
  .home-col-left .card .rec { padding: 12px 18px; }

  /* PC 端：任务区块整卡化——与排行榜卡片同款外观（白底/边框/圆角/阴影），
     标题渐变贴顶（overflow:hidden 裁圆角），内部任务卡去"卡中卡"直接铺开，
     背景与「个人达达币榜」卡片完全统一。 */
  .home-col-left .task-home-section {
    background: var(--t-card-solid);
    border: 1px solid var(--t-border);
    border-radius: 18px;
    box-shadow: var(--t-shadow-sm);
    overflow: hidden;
    padding: 0;
  }
  .home-col-left .task-home-section .sec-card {
    background: transparent; border: 0; box-shadow: none; border-radius: 0;
  }
  /* 内部任务卡：去掉白底小卡样式，改分隔线区分（对齐排行榜 .d-row 风格） */
  .home-col-left .task-home-section .mentor-list { gap: 0; }
  .home-col-left .task-home-section .mentor-card {
    background: transparent; border: 0; box-shadow: none;
    border-radius: 0; padding: 12px 18px;
  }
  .home-col-left .task-home-section .mentor-card + .mentor-card {
    border-top: 0;
    background-image: linear-gradient(to right, transparent 5%, rgba(198, 40, 40, 0.15) 5%, rgba(198, 40, 40, 0.15) 95%, transparent 95%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 0;
  }

  /* PC 端：「我的任务」标题样式与「个人达达币榜」完全统一
     （淡红渐变背景 + 底部 1px 分隔线 + 一致的 padding，与 .dept-block .d-head 对齐） */
  .home-col-left .task-home-section .sec-head.t-sec--rank {
    padding: 16px 18px 8px;
    background: linear-gradient(135deg, rgba(198, 40, 40, 0.05), rgba(139, 0, 0, 0.04));
    border-bottom: 1px solid var(--t-border);
  }
  .home-col-left .task-home-section .sec-head.t-sec--rank .sec-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 18px; font-weight: 700; color: var(--text);
  }
  /* 任务标题已自带图标方框，去掉通用 ::before 红条 */
  .home-col-left .task-home-section .sec-head.t-sec--rank .sec-title::before { content: none; }
  .home-col-left .task-home-section .sec-head.t-sec--rank .sec-title .d-icon {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    background: var(--t-grad-cool);
    border-radius: 9px; font-size: 14px;
    box-shadow: 0 6px 14px -6px var(--brand-1);
  }
  /* 任务头部右上角「全部 ›」样式也参照 .d-more（颜色/光标） */
  .home-col-left .task-home-section .sec-head.t-sec--rank .sec-more {
    font-size: 12.5px; color: var(--text-dim); cursor: pointer;
    display: inline-flex; align-items: center; gap: 3px;
    transition: color .2s, gap .2s;
  }
  .home-col-left .task-home-section .sec-head.t-sec--rank .sec-more:hover { color: var(--brand-1); gap: 5px; }

  /* PC 端:进度模块舒展布局 */
  .streak-block.t-streak { padding: 18px 20px; border-radius: var(--r-lg); }
  .streak-block.t-streak .streak-row { margin-bottom: 12px; align-items: center; }
  .streak-block.t-streak .streak-row:last-child { margin-bottom: 0; }
  .streak-bar {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    height: 10px;
    margin-right: 16px;
  }
  .streak-text {
    flex: 0 0 248px;
    font-size: 13px;
    white-space: normal;
    line-height: 1.45;
    text-align: right;
  }
  /* PC 端:英雄卡也更紧凑 */
  .hero.t-hero { padding: 14px 20px 12px; border-radius: var(--r-lg); }
  .hero.t-hero .amount b { font-size: 44px; }
}
/* ---------- 超宽屏（≥1240px）：排行榜右栏继续放宽，与左栏比例更协调 ----------
   #page-home 在 app.css@1240 已放宽到 1240px，右栏 360→400px 后左栏仍有 ~800px，
   任务卡不被挤压；同时排行榜行内四段（名次/姓名+部门/进度条/达达币）全部宽松单行。 */
@media (min-width: 1240px) {
  .home-main-grid { grid-template-columns: minmax(0, 1fr) 400px; }
  .dept-block .d-bar-wrap { width: 90px; }
}

/* ===================================================================
   首页 / 排行榜移动端字号收敛（≤420px，2026-08-20）
   与 app.css 末尾的全站收敛配套：Hero 大数字与列表行同步缩一档，
   避免 48px 数字 + 「达达币」单位在小屏挤压右侧统计区。
   =================================================================== */
@media (max-width: 420px) {
  /* Hero 大余额：48px → 40px，单位随 .78em 等比缩小 */
  .hero.t-hero .amount b { font-size: 34px; letter-spacing: -0.8px; }
  .hero-stats .k { font-size: 9.5px; }
  .hero-stats .v { font-size: 14px; }
  .hero .hero-hi { font-size: 13px; }

  /* 首页个人榜卡（v17：放大文字类 + 缩小辅助信息） */
  .dept-block .d-row { padding: 7px 10px; gap: 6px; }   /* v17: 9 14→7 10, gap 8→6，缩小辅助 */
  .dept-block .d-name b { font-size: 15.5px; }        /* v17: 13→15.5，放大名字（基础 14） */
  .dept-block .d-name small { font-size: 12.5px; }    /* v17: 10.5→12.5，放大部门（基础 11.5） */
  .dept-block .d-pts { font-size: 13px; }              /* v17: 12→13，适度放大达达币（基础 13） */
  .dept-block .d-rank { width: 24px; height: 24px; font-size: 10.5px; }  /* v17: 28→24, font 12→10.5，缩小排名 */
  .dept-block .d-bar-wrap { width: 44px; height: 4px; }  /* v17: 64→44, h 6→4，缩小进度条 */

  /* 排行榜页 / Hero 弹层共用行 */
  .rk-row { padding: 10px 14px; gap: 10px; }
  .rk-av { width: 34px; height: 34px; font-size: 12px; }
  .rk-info b { font-size: 13px; }
  .rk-info small { font-size: 10.5px; }
  .rk-pts { font-size: 13.5px; }
}

/* ============ 荣誉墙（冗余殿堂） ============ */
.honor-list { display: flex; flex-direction: column; gap: 12px; }
.honor-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px; border-radius: 14px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(17,24,39,.07));
  box-shadow: 0 4px 12px rgba(198,40,40,.06);
}
.hc-badge {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
  background: rgba(198,40,40,.10);
}
.hc-body { flex: 1; min-width: 0; }
.hc-title { font-size: 16px; font-weight: 700; color: var(--color-text, #101828); line-height: 1.35; }
.hc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.hc-reason { font-size: 13.5px; color: var(--color-text-secondary, #667085); line-height: 1.6; }
.hc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; gap: 8px; }
.hc-user { font-size: 13px; font-weight: 600; color: var(--color-primary, #C62828); }
.hc-time { font-size: 12px; color: var(--color-text-tertiary, #98a2b3); }
/* 通知深链高亮 */
.hc-hit { animation: hcHit 1.6s ease; }
@keyframes hcHit {
  0%, 100% { box-shadow: 0 4px 12px rgba(198,40,40,.06); }
  30% { box-shadow: 0 0 0 3px rgba(198,40,40,.35), 0 10px 28px rgba(198,40,40,.18); transform: translateY(-2px); }
}
/* 空数据态 */
.honor-empty { text-align: center; padding: 48px 20px; color: var(--color-text-secondary, #667085); }
.he-ico { font-size: 44px; margin-bottom: 10px; }
.he-tx { font-size: 15px; font-weight: 600; color: var(--color-text, #101828); }
.he-sub { font-size: 12.5px; margin-top: 6px; line-height: 1.6; }


/* ==========================================================================
   导师辅导（专项成长陪跑）v3 · 2026-09-11
   首页汇总卡 .mh-*  ｜  专页汇总与卡片 .mp-*  ｜  辅导记录弹窗 .ms-*
   目标：首页只留「已辅导次数 + 待确认内容 + 辅导入口」，学员明细收进详情弹窗。
   ========================================================================== */

/* ---------- 首页 / 我的任务页：导师制汇总卡 ---------- */
.mh-card {
  background: var(--card, #fff);
  border: 1px solid var(--bd, #e6e9f0);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}
.mh-card + .mh-card { margin-top: 12px; }
.mh-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.mh-role { font-size: 13px; font-weight: 700; color: var(--brand-1, #C62828); letter-spacing: .2px; }
.mh-link { font-size: 12.5px; font-weight: 600; color: var(--brand-1, #C62828); cursor: pointer; white-space: nowrap; }
.mh-link:hover { text-decoration: underline; }
.mh-who { font-size: 13.5px; font-weight: 650; color: var(--text, #101828); margin: 0 0 9px; }
.mh-kpis { display: flex; gap: 8px; }
.mh-kpi {
  flex: 1 1 0; min-width: 0; text-align: center; padding: 8px 4px 7px;
  background: linear-gradient(180deg, rgba(198, 40, 40, .07), rgba(198, 40, 40, .025));
  border: 1px solid rgba(198, 40, 40, .12);
  border-radius: 11px;
}
.mh-kpi b {
  display: block; font-size: 19px; line-height: 1.1; font-weight: 800;
  color: var(--text, #101828); font-variant-numeric: tabular-nums;
}
.mh-kpi span {
  display: block; margin-top: 3px; font-size: 11px; color: var(--text-dim, #667085);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mh-kpi.on { background: linear-gradient(180deg, rgba(255, 181, 71, .22), rgba(255, 181, 71, .08)); border-color: rgba(217, 139, 0, .34); }
.mh-kpi.on b { color: #d98b00; }
.mh-none { margin-top: 10px; padding: 8px 10px; font-size: 12px; color: var(--text-dim, #667085); background: rgba(120, 130, 150, .06); border-radius: 9px; }
.mh-btn { width: 100%; margin-top: 11px; }

/* ---------- 待确认内容（首页卡片 / 专页卡片共用） ---------- */
.mp-pd-wrap { margin-top: 11px; border-top: 1px dashed var(--bd, #e6e9f0); padding-top: 10px; }
.mp-pd-title { font-size: 12px; font-weight: 700; color: #d98b00; margin-bottom: 7px; }
.mp-pd {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255, 181, 71, .10);
  border: 1px solid rgba(217, 139, 0, .22);
}
.mp-pd + .mp-pd { margin-top: 6px; }
.mp-pd-body { flex: 1 1 auto; min-width: 0; }
.mp-pd-t1 { font-size: 12.5px; font-weight: 600; color: var(--text, #101828); }
.mp-pd-min { margin-left: 6px; font-size: 11.5px; font-weight: 400; color: var(--text-dim, #667085); }
.mp-pd-t2 { margin-top: 2px; font-size: 12px; color: var(--text-sub, #667085); line-height: 1.45; word-break: break-word; }
.mp-pd-act { flex: 0 0 auto; display: flex; gap: 6px; }
.mp-pd-act .btn.sm { padding: 5px 12px; font-size: 12px; }
.mp-pd-wait { flex: 0 0 auto; font-size: 11.5px; color: #d98b00; white-space: nowrap; }
.mp-pd-more { margin-top: 6px; font-size: 11.5px; color: var(--text-dim, #667085); text-align: center; }
.mp-warn { margin-top: 9px; padding: 7px 10px; font-size: 12px; line-height: 1.5; color: var(--brand-1, #C62828); background: rgba(198, 40, 40, .06); border-radius: 9px; }

/* ---------- 导师辅导专页：顶部汇总 ---------- */
#page-mentor > .sec { max-width: 780px; margin-left: auto; margin-right: auto; width: 100%; padding: 0 14px; }
#page-mentor .card#mentorBox { background: transparent; border: 0; box-shadow: none; padding: 0; }
.mp-hero {
  border-radius: 16px; padding: 16px; color: #fff;
  background: linear-gradient(135deg, rgba(139, 0, 0, .97), rgba(198, 40, 40, .93) 55%, rgba(229, 57, 53, .90));
  box-shadow: 0 6px 18px rgba(139, 0, 0, .18);
}
.mp-hero-t { font-size: 17px; font-weight: 800; letter-spacing: .5px; }
.mp-hero-s { margin-top: 4px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.mp-kpis { display: flex; gap: 8px; margin-top: 14px; }
.mp-kpi {
  flex: 1 1 0; min-width: 0; text-align: center; padding: 9px 4px 8px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 11px;
}
.mp-kpi b { display: block; font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mp-kpi span {
  display: block; margin-top: 3px; font-size: 11px; color: rgba(255, 255, 255, .82);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-kpi.on { background: rgba(255, 214, 130, .26); border-color: rgba(255, 214, 130, .55); }
.mp-kpi.on b { color: #FFE7B0; }

/* ---------- 导师辅导专页：分区与卡片 ---------- */
.mp-sec { margin-top: 16px; }
.mp-sec-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding-left: 2px; }
.mp-sec-t { font-size: 14px; font-weight: 700; color: var(--text, #101828); }
.mp-sec-n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11.5px; font-weight: 700;
  color: var(--brand-1, #C62828); background: rgba(198, 40, 40, .10);
}
.mp-card { transition: box-shadow .18s ease, border-color .18s ease; }
.mp-card:hover { box-shadow: 0 3px 12px rgba(16, 24, 40, .06); }
.mp-card--pending { border-color: rgba(217, 139, 0, .40); }
.mp-prog { margin-top: 12px; }
.mp-prog .pr-bar { height: 7px; border-radius: 999px; }
.mp-prog-tx { margin-top: 6px; font-size: 12px; color: var(--text-dim, #667085); }
.mp-acts { display: flex; gap: 8px; margin-top: 12px; }
/* 按钮按文字宽度自适应、左对齐：不拉伸（原先 flex:1 1 auto 会把两个按钮撑满整行，
   既与站内其他 .btn.sm 观感不一致，也让卡片显得空）。继承 app.css .btn.sm 的天然宽度。 */
.mp-acts .btn { flex: 0 0 auto; }
.mp-acts .btn.ghost { border: 1px solid var(--bd, #e6e9f0); background: transparent; color: var(--text, #101828); }

/* ---------- 辅导记录详情弹窗（.sheet 内容） ---------- */
.ms-sheet { padding: 16px 20px 20px; }
.ms-sheet-hd { display: flex; gap: 8px; margin-bottom: 14px; }
.ms-sh-k {
  flex: 1 1 0; text-align: center; padding: 9px 4px 8px;
  background: rgba(198, 40, 40, .06);
  border: 1px solid rgba(198, 40, 40, .12);
  border-radius: 11px;
}
.ms-sh-k i { display: block; font-style: normal; font-size: 11px; color: var(--text-dim, #667085); }
.ms-sh-k b { display: block; margin-top: 2px; font-size: 17px; font-weight: 800; color: var(--text, #101828); font-variant-numeric: tabular-nums; }
.ms-rec-list { display: flex; flex-direction: column; gap: 10px; }
.ms-rec {
  border: 1px solid var(--bd, #e6e9f0);
  border-left: 3px solid var(--bd, #e6e9f0);
  border-radius: 12px;
  padding: 11px 12px;
  background: var(--card, #fff);
}
.ms-rec--s1 { border-left-color: #FFB547; background: rgba(255, 181, 71, .06); }
.ms-rec--s2 { border-left-color: #2BA471; }
.ms-rec--s3 { border-left-color: #E5484D; background: rgba(229, 72, 77, .05); }
.ms-rec--s4 { border-left-color: #E5484D; background: rgba(229, 72, 77, .05); }
.ms-rec-hd { display: flex; align-items: center; gap: 8px; }
.ms-rec-date { font-size: 13px; font-weight: 700; color: var(--text, #101828); }
.ms-rec-min { font-size: 12px; color: var(--text-dim, #667085); }
.ms-rec-hd .tag { margin-left: auto; }
.ms-rec-tx { margin-top: 7px; font-size: 12.5px; line-height: 1.6; color: var(--text-sub, #475467); white-space: pre-wrap; word-break: break-word; }
.ms-imgs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ms-imgs .ms-thumb {
  width: 56px; height: 56px; object-fit: cover;
  border-radius: 8px; cursor: zoom-in;
  border: 1px solid var(--line, #e5e5e5);
}
.ms-audit {
  margin-top: 8px; padding: 6px 9px; border-radius: 8px;
  font-size: 12px; line-height: 1.5;
  color: var(--brand-1, #C62828);
  background: rgba(198, 40, 40, .06);
}
.ms-empty { padding: 26px 0; text-align: center; font-size: 13px; color: var(--text-dim, #667085); }

/* 历史平铺样式保留（旧引用不破） */
.ms-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.ms-summary { flex-basis: 100%; font-size: 12px; color: var(--text-sub, #667085); }

/* ---------- 移动端微调 ---------- */
@media (max-width: 420px) {
  .mh-kpi b, .mp-kpi b { font-size: 17px; }
  .mh-kpi span, .mp-kpi span { font-size: 10.5px; }
  .mp-pd { flex-wrap: wrap; }
  .mp-pd-act { width: 100%; justify-content: flex-end; margin-top: 2px; }
  .mp-hero { padding: 14px; }
}

/* v3.1 补回原有信息：周期行（导师/学员首页汇总卡） */
.mh-cycle { font-size: 12px; color: var(--text-sub, #667085); margin: 7px 2px 0; line-height: 1.4; }

/* v3.2 首页导师卡：全部学员列表 + 直接填记录 */
.mh-stus { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mh-stu {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; background: rgba(198, 40, 40, .035);
  border: 1px solid rgba(198, 40, 40, .08); border-radius: 10px;
}
.mh-stu-i { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mh-stu-n { font-size: 13.5px; font-weight: 600; color: var(--text, #333); }
.mh-stu-p { font-size: 12px; color: var(--text-sub, #667085); white-space: nowrap; }
.mh-stu-btn { flex: none; }

/* =========================================================
   部门满勤战报 · #homeMuster（2026-09-29 v2：任务卡化重设计）
   用途：部门实时打卡率、今日未打卡名单、全员满勤进度与个人差距。
   设计：与任务卡/签到卡同家族 —— 标准卡片变量（--t-card-solid /
        --t-border / --t-shadow-sm）+ 品牌色仅做数字与 tag 点缀，
        不再使用整卡深红渐变与大圆环，降低版面压迫感。
   门控：无活动 / 无部门 / 无成员 → 容器保持 hidden，不占用首页版面。
   ========================================================= */

/* 部门满勤战报（2026-10-07 由首页置顶迁入「🌅 每日签到」板块）：
   容器不再是 #page-home 直接子元素，故原移动端 order 排序规则废止；
   改为与同板块打卡卡一致的水平缩进 + 与上方卡片的垂直间距。 */
.home-muster { margin: 12px 20px 0; }

.mlb {
  background: var(--t-card-solid);
  border: 1px solid var(--t-border);
  border-radius: 16px;
  box-shadow: var(--t-shadow-sm);
  padding: 13px 16px 12px;
  color: var(--text);
  animation: tFadeUp .5s ease backwards;
  transition: box-shadow .25s ease;
}
.mlb:hover { box-shadow: var(--t-shadow-md); }

/* 头部：图标瓦片 + 标题/副题 + 状态 tag（任务卡家族同构） */
.mlb-head { display: flex; align-items: center; gap: 11px; }
.mlb-ico {
  flex: none; width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px; font-size: 20px;
  background: linear-gradient(135deg, rgba(198,40,40,.10), rgba(139,0,0,.06));
  border: 1px solid rgba(198,40,40,.14);
}
.mlb-tt { flex: 1; min-width: 0; }
.mlb-name {
  font-size: 14.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mlb-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.mlb-tag {
  flex: none; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(198,40,40,.08); color: var(--brand-1);
  white-space: nowrap;
}
.mlb-tag.ok { background: rgba(47,125,50,.10); color: #2f7d32; }
.mlb-tag.dim { background: var(--bg-2, rgba(0,0,0,.05)); color: var(--text-dim); }
.mlb[data-all="1"] { border-color: rgba(47,125,50,.22); }
.mlb[data-all="1"] .mlb-ico { background: linear-gradient(135deg, rgba(47,125,50,.10), rgba(47,125,50,.05)); border-color: rgba(47,125,50,.16); }

/* 进度区：人均满勤进度（与 .task-prog 同风格） */
.mlb-prog { margin-top: 11px; }
.mlb-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; font-size: 12px; color: var(--text-sub);
}
.mlb-row .val b { font-size: 14.5px; font-weight: 800; color: var(--text); }
.mlb-bar {
  height: 7px; border-radius: 999px; margin-top: 6px; overflow: hidden;
  background: rgba(198,40,40,.08);
}
.mlb-bar.mini { height: 6px; margin-top: 8px; }
.mlb-bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-3, #E53935));
  transition: width .45s cubic-bezier(.16, 1, .3, 1);
}
.mlb[data-all="1"] .mlb-bar > i { background: linear-gradient(90deg, #2f7d32, #4caf50); }

/* 成员点阵：已打卡=品牌红实心，未打卡=浅色空心 */
.mlb-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 8px; }
.mlb-dots i {
  width: 8px; height: 8px; border-radius: 2.5px;
  background: rgba(198,40,40,.08); border: 1px solid rgba(198,40,40,.18);
  box-sizing: border-box;
}
.mlb-dots i.on { background: var(--brand-1); border-color: var(--brand-1); }
.mlb[data-all="1"] .mlb-dots i { background: rgba(47,125,50,.08); border-color: rgba(47,125,50,.2); }
.mlb[data-all="1"] .mlb-dots i.on { background: #2f7d32; border-color: #2f7d32; }

/* 今日明细行：左=今日进度+未打卡名单，右=达标人数 */
.mlb-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 8px; font-size: 11.5px; color: var(--text-dim);
}
.mlb-meta .l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlb-meta .r { flex: none; }
.mlb-meta b { font-weight: 700; }
.mlb-meta b.warn { color: var(--brand-1); }
.mlb-meta b.ok { color: #2f7d32; }

/* 底部：规则 + 个人状态（虚线分隔，弱化为脚注感） */
.mlb-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 9px; padding-top: 9px;
  border-top: 1px dashed var(--t-border);
  font-size: 11.5px; line-height: 1.45; color: var(--text-dim);
}
.mlb-rule { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlb-rule b { color: var(--brand-1); font-weight: 700; }
.mlb-rule em { font-style: normal; color: var(--brand-1); font-weight: 700; }
.mlb-self { flex: none; }
.mlb-self b.warn { color: var(--brand-1); }
.mlb-self b.ok { color: #2f7d32; }

/* 结束态结论行 */
.mlb-ended { margin-top: 8px; font-size: 12px; font-weight: 600; }
.mlb-ended.ok { color: #2f7d32; }
.mlb-ended.no { color: var(--brand-1); }

@media (prefers-reduced-motion: reduce) {
  .mlb-bar > i { transition: none; }
}

@media (max-width: 899px) {
  .mlb { padding: 12px 14px 11px; border-radius: 14px; }
  .mlb-ico { width: 38px; height: 38px; font-size: 18px; }
  .mlb-name { font-size: 13.5px; }
}

/* ==========================================================================
   月学习之星（learnstar1 · 2026-10-15）
   排行榜页「🌟 学习之星」页签的展示样式。全部类名以 .ls- 前缀独占命名，
   不与既有选择器同名（改前已 grep 全量同名选择器），且整块追加在文件末尾，
   避免被更靠后的基础规则压掉，也不依赖任何 @media 覆盖。
   ========================================================================== */
.ls-hero { padding: 16px 18px 12px; }
.ls-hero-t { font-size: 16px; font-weight: 700; color: var(--brand-1); }
.ls-hero-s { margin-top: 5px; font-size: 11.5px; line-height: 1.55; color: var(--text-dim); }

/* 🔴 lsui3（2026-10-21 · Kamy 框选「卡片之间的空隙」反复不像进度条区分）：
   真凶 = 本行原来的 `border-top: 8px solid var(--t-border)` —— 横贯整宽、8px 高、浅红，
         正是一整条「进度条」的观感，叠在页面浅粉渐变上更明显。
   改法 = 8px 红条 → **1px 中性灰虚线** + 加大卡片间距；虚线语义=分隔线，色相也与进度条（红）彻底分开。 */
.ls-card {
  border-top: 1px dashed rgba(17, 24, 39, 0.16);
  padding: 16px 18px 8px;
  margin-top: 12px;
}
.ls-card-t { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.ls-card-t em { font-style: normal; margin-left: auto; font-size: 11.5px; font-weight: 400; color: var(--text-dim); }
.ls-card-t em.ls-warn { color: var(--brand-1); font-weight: 600; }
.ls-dim { color: var(--text-dim); font-weight: 400; }

.ls-score { display: flex; align-items: baseline; gap: 8px; padding: 2px 0 12px; }
.ls-score b { font-size: 30px; font-weight: 700; color: var(--brand-1); line-height: 1; }
.ls-score span { font-size: 12px; color: var(--text-dim); }
.ls-score em { font-style: normal; margin-left: auto; font-size: 12px; font-weight: 700; color: var(--brand-1); }
.ls-score.no b { font-size: 17px; }
.ls-score.no span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 🔴 lsui1（2026-10-21 · Kamy「指标说明上下有空隙，颜色跟下方进度条一致，会以为也是进度条」）
   → lsui2（同日二改 · Kamy「差异化不明显，块间空隙要和进度条颜色区分开」）：
   层次改为 **灰托盘 + 白卡片**：
     · .ls-grid 做浅灰托盘（块与块之间露出的是**中性灰**，与浅红进度条色相完全不同）；
     · .ls-m 做白色小卡 + 细边 + 极轻阴影 → 浮起，块感明确；
     · 说明行上方虚线再断开「说明 / 进度条」。
   🔴 刻意不用红系做任何底色 —— 红系归进度条独占，否则永远像「又一条进度」。 */
.ls-grid {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  padding: 8px; margin-bottom: 10px;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.05);
}
.ls-m {
  padding: 10px 12px 11px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.05);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.05);
}
.ls-m-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ls-m-l { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; flex: 0 0 auto; }
.ls-m-v { font-size: 12.5px; font-weight: 700; color: var(--text); }
.ls-m-bar { margin-top: 7px; height: 6px; border-radius: 99px; background: var(--t-border, rgba(198,40,40,0.10)); overflow: hidden; }
.ls-m-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand-1), var(--brand-3)); transition: width .4s ease; }
/* 说明行：与进度条拉开 7px，上方加极淡虚线 —— 明确「这是说明文字，不是第二段进度」 */
.ls-m-hint {
  margin-top: 7px; padding-top: 6px;
  border-top: 1px dashed rgba(17, 24, 39, 0.08);
  font-size: 11px; line-height: 1.5; color: var(--text-dim);
}
/* 🔴 lsui2 · 深色主题：托盘=浅白半透明(比底亮一档)，卡片=更亮一档 → 卡片浮起 */
[data-theme='dark'] .ls-grid { background: rgba(255, 255, 255, 0.035); }
[data-theme='dark'] .ls-m {
  background: rgba(255, 255, 255, 0.065);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
[data-theme='dark'] .ls-m-hint { border-top-color: rgba(255, 255, 255, 0.11); }
/* 深色下 --brand-1 是深红，在深底上几乎看不出填充比例 → 进度条单独提亮 */
[data-theme='dark'] .ls-m-bar > i { background: linear-gradient(90deg, #E53935, #FF7A6B); }
/* lsui3 · 深色主题：中性细线改白色半透明 */
[data-theme='dark'] .ls-card, [data-theme='dark'] .ls-guide { border-top-color: rgba(255, 255, 255, 0.18); }

.ls-gap { margin: 4px 0 10px; padding: 9px 12px; border-radius: 10px; background: rgba(198, 40, 40, 0.06); color: var(--brand-1); font-size: 12px; line-height: 1.55; }
.ls-gap.ok { background: rgba(47, 125, 50, 0.08); color: #2f7d32; }

.ls-win-wrap { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px 0 6px; }
.ls-win { flex: 1 1 120px; min-width: 100px; padding: 12px 12px 11px; border-radius: 12px; text-align: center; background: linear-gradient(160deg, rgba(198, 40, 40, 0.10), rgba(198, 40, 40, 0.02)); }
.ls-win-r { font-size: 11.5px; color: var(--text-dim); }
.ls-win-n { margin-top: 3px; font-size: 15px; font-weight: 700; }
.ls-win-s { margin-top: 4px; font-size: 17px; font-weight: 700; color: var(--brand-1); }
.ls-win-p { margin-top: 3px; font-size: 11.5px; color: var(--text-dim); }

.ls-sub { margin: 8px 0 4px; padding-top: 10px; border-top: 1px dashed var(--t-border, rgba(198,40,40,0.10)); font-size: 12.5px; font-weight: 700; color: var(--text-dim); }
.ls-list { margin: 0 -18px; }
.ls-empty { padding: 16px 18px 20px; font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }

.ls-row-bar { margin-top: 5px; height: 4px; border-radius: 99px; background: var(--t-border, rgba(198,40,40,0.10)); overflow: hidden; }
.ls-row-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand-1), var(--brand-3)); }
.ls-badge { display: block; margin-top: 3px; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--brand-1); }
/* 作用域限定在 .ls-list 内：.rk-pts 是全站共用类，裸改 .rk-pts small 会波及其它榜单 */
.ls-list .rk-pts small { font-size: 10.5px; font-weight: 400; color: var(--text-dim); }

/* 📖 指标说明（learnstar2 · 方案 9.4「口径透明」）：默认收起，点击标题展开。
   整块追加在文件末尾，类名独占前缀（改前已 grep 全量同名选择器，无冲突）。 */
.ls-guide { border-top: 1px dashed rgba(17, 24, 39, 0.16); padding: 0; margin-top: 12px; }
.ls-guide-h { display: flex; align-items: center; gap: 6px; padding: 13px 18px; font-size: 13px; font-weight: 700; cursor: pointer; -webkit-user-select: none; user-select: none; }
.ls-guide-h i { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 400; color: var(--text-dim); }
.ls-guide-body { padding: 0 18px 14px; }
.ls-g-b { padding: 10px 0 2px; border-top: 1px dashed var(--t-border, rgba(198,40,40,0.10)); }
.ls-g-b:first-child { border-top: 0; padding-top: 4px; }
.ls-g-t { font-size: 12.5px; font-weight: 700; color: var(--text); }
.ls-g-l { margin: 6px 0 0; padding-left: 18px; }
.ls-g-l li { font-size: 12px; line-height: 1.75; color: var(--text-dim); }
.ls-g-l li b { color: var(--text); font-weight: 600; }
.ls-g-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--t-border, rgba(198,40,40,0.10)); font-size: 11px; line-height: 1.6; color: var(--text-dim); }

/* ---------- 学习之星·申诉区（learnstar2 · 2026-10-16）
 * 渲染在排行榜页（#page-rank）→ 禁止引用 home 专属 --t-* 变量（未定义会让整条声明静默失效），
 * 一律使用全局 :root 变量并带兜底值。 */
.ls-ap { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border, rgba(17,24,39,0.07)); }
.ls-ap-h { font-size: 12.5px; font-weight: 700; color: var(--text, #101828); margin-bottom: 8px; }
.ls-ap-t { font-size: 11px; color: var(--text-dim, #98a2b3); }
.ls-ap-st { position: relative; padding: 9px 12px; border-radius: 10px; background: rgba(17,24,39,0.03); margin-bottom: 8px; }
.ls-ap-badge { display: inline-block; padding: 1px 8px; margin-right: 6px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.ls-ap-st.wait .ls-ap-badge { background: rgba(198,40,40,0.10); color: var(--brand-1, #C62828); }
.ls-ap-st.ok .ls-ap-badge { background: rgba(22,163,74,0.12); color: var(--success, #16a34a); }
.ls-ap-st.no .ls-ap-badge { background: rgba(152,162,179,0.16); color: var(--text-dim, #98a2b3); }
.ls-ap-note { margin-top: 6px; font-size: 12px; line-height: 1.6; color: var(--text-sub, #667085); }
.ls-ap-btn { width: 100%; margin-top: 4px; }
/* 申诉表单（渲染在通用 sheet 弹层内） */
.ls-ap-form { padding: 4px 2px 8px; }
.ls-ap-fh { font-size: 13px; font-weight: 700; color: var(--text, #101828); }
.ls-ap-fd { margin: 6px 0 10px; font-size: 12px; line-height: 1.65; color: var(--text-dim, #98a2b3); }
.ls-ap-ta { display: block; width: 100%; min-height: 108px; padding: 10px 12px; border: 1px solid var(--border, rgba(17,24,39,0.07)); border-radius: 12px; font-size: 13px; line-height: 1.6; color: var(--text, #101828); background: #fff; resize: vertical; box-sizing: border-box; font-family: inherit; }
.ls-ap-inp { display: block; width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border, rgba(17,24,39,0.07)); border-radius: 12px; font-size: 13px; color: var(--text, #101828); background: #fff; box-sizing: border-box; font-family: inherit; }
.ls-ap-err { min-height: 16px; margin-top: 6px; font-size: 12px; color: var(--brand-1, #C62828); }
.ls-ap-submit { display: block; width: 100%; margin-top: 4px; }