/* 本文件由 tools/build-detail-css.js 生成，请改 assets/css/src/ 下的源文件 */
/* ==========================================================================
   任务详情页（按用户手机截图 720×1604 逐像素复原）
   单位约定：`数字u` 在构建时替换成 calc(数字 * var(--u))，
   390 宽下 calc(1 * var(--u)) = 1px；其它宽度按视口等比缩放。
   设计基准：card 左右 calc(10.8 * var(--u))，卡片间距 calc(12.5 * var(--u))。
   ========================================================================== */

.td {
  min-height: 100vh;
  padding-bottom: calc(77 * var(--u));
  background: #fafafa;
}

/* ---------------------------- 顶部红色渐变 ---------------------------- */
.td-hero {
  position: relative;
  height: calc(182 * var(--u));
  padding-top: calc(33 * var(--u));
  box-sizing: border-box;
  background:
    radial-gradient(calc(130 * var(--u)) calc(130 * var(--u)) at calc(6 * var(--u)) calc(-26 * var(--u)), rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 68%),
    radial-gradient(calc(160 * var(--u)) calc(160 * var(--u)) at calc(336 * var(--u)) calc(6 * var(--u)), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 66%),
    radial-gradient(calc(240 * var(--u)) calc(150 * var(--u)) at calc(150 * var(--u)) calc(210 * var(--u)), rgba(255, 70, 56, 0.5), rgba(255, 70, 56, 0) 72%),
    linear-gradient(180deg, #ff7163 0%, #ff7062 58%, #ff5b48 100%);
}

/* 顶部标题栏：固定，未滚动时透明（透出 hero 渐变），滚动后实心 #fe4040 */
.td-nav {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max, 100%);
  height: calc(80.7 * var(--u));
  padding-top: calc(33 * var(--u));
  box-sizing: border-box;
  z-index: 60;
  background: transparent;
  transition: background-color 0.18s linear;
}

.td-nav.is-solid {
  background: #fe4040;
}

.td-nav__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(44 * var(--u));
}

.td-nav__title {
  font-size: calc(18.4 * var(--u));
  font-weight: 700;
  color: #fff;
  letter-spacing: calc(0.6 * var(--u));
}

/* 返回箭头：实测 7×14.6，左边界 12.5 */
.td-back {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(32 * var(--u));
  height: calc(44 * var(--u));
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.td-back::before {
  content: "";
  position: absolute;
  left: calc(13.4 * var(--u));
  top: 50%;
  width: calc(8.4 * var(--u));
  height: calc(8.4 * var(--u));
  margin-top: calc(-4.2 * var(--u));
  border-left: calc(1.16 * var(--u)) solid #fff;
  border-bottom: calc(1.16 * var(--u)) solid #fff;
  transform: rotate(45deg);
  transform-origin: center;
  box-sizing: border-box;
}

/* 汉堡菜单：15.7×12.5，右边距 16.8 */
.td-menu {
  position: absolute;
  right: calc(8.4 * var(--u));
  top: 0;
  width: calc(26 * var(--u));
  height: calc(44 * var(--u));
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.td-menu::before,
.td-menu::after,
.td-menu span {
  content: "";
  position: absolute;
  left: 50%;
  width: calc(15.7 * var(--u));
  height: calc(1.74 * var(--u));
  margin-left: calc(-7.85 * var(--u));
  background: #fff;
  border-radius: calc(1 * var(--u));
}

.td-menu::before { top: calc(15.6 * var(--u)); }
.td-menu span { top: calc(21.1 * var(--u)); }
.td-menu::after { top: calc(26.6 * var(--u)); }

/* ---------------------------- 卡片 ---------------------------- */
.td-main {
  /* 卡片顶边距页面顶 calc(110 * var(--u))，红色区域高 calc(182 * var(--u))，故上提 calc(72 * var(--u)) */
  margin-top: calc(-73 * var(--u));
}

.td-card {
  position: relative;
  margin: 0 calc(10.8 * var(--u)) calc(12.5 * var(--u));
  background: #fff;
  border-radius: calc(6.5 * var(--u));
  box-shadow: 0 calc(0.5 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.07);
}

/* ---------------------------- 任务信息卡 ---------------------------- */
.td-card--info {
  padding: 0 calc(13.5 * var(--u));
}

.td-info__row {
  display: flex;
  align-items: flex-start;
}

/* 头像列：头像 65×65 压在卡片上沿外 23.3 */
.td-info__av {
  position: relative;
  flex: 0 0 calc(65.6 * var(--u));
  width: calc(65.6 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(-23.3 * var(--u));
}

.td-info__avatar {
  width: calc(65 * var(--u));
  height: calc(65 * var(--u));
  border-radius: 50%;
  background-color: #f2f2f5;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 右下角「年卡」小标（源站 21×14.6，压头像下沿） */
.td-info__medal {
  position: absolute;
  right: 0;
  top: calc(50.3 * var(--u));
  width: calc(15.7 * var(--u));
  height: calc(10.8 * var(--u));
  padding-top: calc(1.6 * var(--u));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: calc(6.9 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: linear-gradient(180deg, #ffd05a, #ff8a1e);
  clip-path: polygon(0% 100%, 0% 30%, 17% 52%, 31% 0%, 50% 42%, 69% 0%, 83% 52%, 100% 30%, 100% 100%);
  box-sizing: border-box;
}

.td-info__id {
  margin-top: calc(3.6 * var(--u));
  font-size: calc(8.3 * var(--u));
  line-height: calc(11 * var(--u));
  color: #9a9a9a;
  white-space: nowrap;
}

.td-info__main {
  flex: 1;
  min-width: 0;
  margin-left: calc(23.6 * var(--u));
  padding-top: calc(4 * var(--u));
  padding-right: calc(68 * var(--u));
}

.td-info__title {
  font-size: calc(16.6 * var(--u));
  font-weight: 700;
  line-height: calc(23.2 * var(--u));
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-info__meta {
  display: flex;
  align-items: center;
  margin-top: calc(3.4 * var(--u));
  height: calc(16 * var(--u));
  font-size: calc(11.4 * var(--u));
  line-height: calc(16 * var(--u));
  color: #9a9a9a;
  white-space: nowrap;
}

.td-copy {
  height: calc(13.5 * var(--u));
  margin-left: calc(5.4 * var(--u));
  padding: 0 calc(3.6 * var(--u));
  font-size: calc(8.3 * var(--u));
  line-height: calc(13.5 * var(--u));
  color: #fff;
  background: #ff445c;
  border: 0;
  border-radius: calc(2.4 * var(--u));
  cursor: pointer;
}

.td-star {
  position: relative;
  width: calc(15.7 * var(--u));
  height: calc(15.7 * var(--u));
  margin-left: calc(6 * var(--u));
  flex: 0 0 calc(15.7 * var(--u));
  cursor: pointer;
}

/* 空心五角星（描边 #c1c1c1） */
.td-star::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(14.4 * var(--u));
  height: calc(14.4 * var(--u));
  margin: calc(-7.2 * var(--u)) 0 0 calc(-7.2 * var(--u));
  background: #fff;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  box-shadow: inset 0 0 0 calc(1.4 * var(--u)) #c1c1c1;
}

/* 金额：22.9 粗体 #ec353a，右边界距卡片 28.7 */
.td-money {
  position: absolute;
  right: calc(28.7 * var(--u));
  top: calc(16 * var(--u));
  display: flex;
  align-items: baseline;
  color: #ec353a;
  line-height: calc(28 * var(--u));
}

.td-money i {
  font-style: normal;
  font-size: calc(12.4 * var(--u));
  font-weight: 700;
  margin-right: calc(0.6 * var(--u));
}

.td-money b {
  font-size: calc(22.9 * var(--u));
  font-weight: 700;
}

/* 标签行：从 21.7 起，chip 高 17.3 */
.td-labels {
  display: flex;
  align-items: center;
  margin-top: calc(2.7 * var(--u));
  padding-left: calc(8.2 * var(--u));
}

.td-label {
  height: calc(17.3 * var(--u));
  padding: 0 calc(5 * var(--u));
  display: flex;
  align-items: center;
  font-size: calc(11 * var(--u));
  line-height: calc(17.3 * var(--u));
  color: #fff;
  border-radius: calc(2 * var(--u));
  white-space: nowrap;
}

.td-label + .td-label {
  margin-left: calc(8.7 * var(--u));
}

.td-label--one {
  color: #d93c37;
  background: #fff;
  border: calc(0.9 * var(--u)) solid #d93c37;
  padding: 0 calc(6.4 * var(--u));
  box-sizing: border-box;
}

.td-label--one + .td-label {
  margin-left: calc(16.2 * var(--u));
}

.td-label--two { background: #fb665e; }
.td-label--three { background: #f55981; }
.td-label--four { background: #eb3649; }

/* 四格数据：数字 16.6 / 单位 11.4 / 标签 12.5 */
.td-stats {
  display: flex;
  margin: calc(10.9 * var(--u)) calc(-1.5 * var(--u)) 0;
  padding: calc(6.3 * var(--u)) calc(12 * var(--u)) 0;
}

.td-stat {
  position: relative;
  flex: 1;
  min-width: 0;
  text-align: center;
}

.td-stat + .td-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(-6.3 * var(--u));
  width: calc(0.9 * var(--u));
  height: calc(43.3 * var(--u));
  background: #dcdcdc;
}

.td-stat b {
  display: block;
  font-size: calc(18.7 * var(--u));
  font-weight: 600;
  line-height: calc(24 * var(--u));
  color: #111;
  white-space: nowrap;
}

.td-stat b i {
  font-style: normal;
  font-size: calc(11.4 * var(--u));
  font-weight: 400;
  margin-left: calc(0.8 * var(--u));
  color: #333;
}

.td-stat small {
  display: block;
  margin-top: calc(-1.6 * var(--u));
  font-size: calc(12.5 * var(--u));
  line-height: calc(17 * var(--u));
  color: #9b9b9b;
  white-space: nowrap;
}

/* 审核时间条：与内容左右各留 5.4 的分隔线 */
.td-audit {
  display: flex;
  align-items: center;
  height: calc(32 * var(--u));
  margin: calc(11 * var(--u)) calc(-8.1 * var(--u)) 0;
  padding-left: calc(20.1 * var(--u));
  border-top: calc(0.9 * var(--u)) solid #dcdcdc;
}

.td-audit__icon {
  width: calc(14.6 * var(--u));
  height: calc(14.6 * var(--u));
  flex: 0 0 calc(14.6 * var(--u));
  border-radius: 50%;
  background: #ff4141 url("../img/site/td-shenghe.png") center / 100% 100% no-repeat;
}

.td-audit span {
  margin-left: calc(11.3 * var(--u));
  font-size: calc(12.5 * var(--u));
  line-height: calc(18 * var(--u));
  color: #9a9a9a;
}

.td-audit em {
  font-style: normal;
  color: #9a9a9a;
}

.td-audit em.is-danger { color: #ff2121; }

/* ---------------------------- 平台提示卡 ---------------------------- */
.td-tips {
  padding: calc(15 * var(--u)) calc(13.6 * var(--u)) calc(15.4 * var(--u));
}

.td-tips__line {
  font-size: calc(12.5 * var(--u));
  line-height: calc(19.5 * var(--u));
  color: #333;
}

.td-tips__stamp {
  position: absolute;
  right: calc(13 * var(--u));
  top: calc(20 * var(--u));
  width: calc(47 * var(--u));
  height: calc(40 * var(--u));
  background: url("../img/site/td-stamp.png") center / contain no-repeat;
  opacity: 0.9;
}

/* ---------------------------- 标题 + 描述 ---------------------------- */
.td-card--desc,
.td-card--steps {
  padding: calc(11.3 * var(--u)) calc(13.6 * var(--u)) calc(10.7 * var(--u));
}

.td-head {
  display: flex;
  align-items: center;
  font-size: calc(16.6 * var(--u));
  font-weight: 700;
  line-height: calc(22 * var(--u));
  color: #ff455c;
}

.td-head__icon { display: none; }

.td-head__right {
  display: flex;
  align-items: center;
  margin-left: auto;
  font-size: calc(11.4 * var(--u));
  font-weight: 400;
  color: #ff6a6a;
  cursor: pointer;
}

.td-head__video {
  position: relative;
  width: calc(12.4 * var(--u));
  height: calc(12.4 * var(--u));
  margin-left: calc(3 * var(--u));
  border-radius: 50%;
  background: #ff5a5a;
}

.td-head__video::before {
  content: "";
  position: absolute;
  left: calc(4.4 * var(--u));
  top: calc(3.2 * var(--u));
  width: 0;
  height: 0;
  border-left: calc(4.6 * var(--u)) solid #fff;
  border-top: calc(3 * var(--u)) solid transparent;
  border-bottom: calc(3 * var(--u)) solid transparent;
}

.td-remark {
  margin-top: calc(9.6 * var(--u));
  font-size: calc(13.5 * var(--u));
  font-weight: 600;
  line-height: calc(21.6 * var(--u));
  color: #333;
  word-break: break-word;
}

/* ---------------------------- 任务步骤 ---------------------------- */
.td-steps {
  margin-top: calc(14.2 * var(--u));
}

.td-step {
  margin-top: calc(19.5 * var(--u));
}

.td-step:first-child {
  margin-top: 0;
}

.td-step__row {
  display: flex;
  align-items: flex-start;
}

/* 序号圆点：21.7，红底白字 */
.td-step__num {
  flex: 0 0 calc(21.7 * var(--u));
  width: calc(21.7 * var(--u));
  height: calc(21.7 * var(--u));
  margin-top: calc(-1.5 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(13.6 * var(--u));
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #fe4040;
  border-radius: 50%;
}

.td-step__title {
  flex: 1;
  min-width: 0;
  margin-left: calc(5.8 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: calc(18.4 * var(--u));
  color: #333;
  white-space: pre-line;
  word-break: break-word;
}

.td-step__body {
  margin-top: calc(20.9 * var(--u));
}

/* 步骤图片区 */
.td-step__media {
  display: flex;
  align-items: center;
}

.td-step__media--qr {
  gap: calc(58.7 * var(--u));
  align-items: flex-start;
}

.td-step__media--shot {
  gap: calc(27 * var(--u));
  align-items: stretch;
}

.td-step__img {
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: calc(2 * var(--u));
  background: #000;
}

.td-step__media--qr .td-step__img { width: calc(153 * var(--u)); }
.td-step__media--shot .td-step__img { width: calc(154 * var(--u)); }

.td-step__img img {
  display: block;
  width: 100%;
  height: auto;
}

/* 未报名：二维码位置显示黑底「请先报名」 */
.td-step__media--lock .td-step__img {
  position: relative;
  height: calc(170.6 * var(--u));
  background: #000;
}

.td-step__media--lock .td-step__img img {
  opacity: 0;
}

.td-step__lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(14.6 * var(--u));
  color: #fff;
  background: #000;
}

/* 二维码步骤右侧两个按钮：129.5 × 31.4 */
.td-step__btns {
  flex: 0 0 calc(129.5 * var(--u));
  width: calc(129.5 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(11.4 * var(--u));
}

.td-step__media--qr .td-step__btns {
  margin-top: calc(56.9 * var(--u));
}

.td-btn {
  height: calc(31.4 * var(--u));
  padding: 0;
  font-size: calc(14.6 * var(--u));
  font-weight: 700;
  border: 0;
  border-radius: calc(5.5 * var(--u));
  cursor: pointer;
}

.td-btn--dark {
  color: #fff;
  background: #ff4141;
}

.td-btn--light {
  color: #ff4141;
  background: #ffe9e9;
}

.td-btn--ghost {
  color: #ff4141;
  background: #fff;
  border: calc(1 * var(--u)) solid #ff4141;
}

/* 上传数据图：浅灰描边方框 160.3 × 339.6，红块 76×76 居中 */
.td-upload-box {
  flex: 0 0 calc(160.3 * var(--u));
  width: calc(160.3 * var(--u));
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: calc(1 * var(--u)) solid #e8e8e8;
  border-radius: calc(4 * var(--u));
  box-sizing: border-box;
  background: #fff;
}

.td-upload {
  flex: 0 0 calc(74 * var(--u));
  width: calc(74 * var(--u));
  height: calc(74 * var(--u));
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(9.8 * var(--u));
  font-weight: 600;
  color: #fff;
  background: #ff4141;
  border: 0;
  border-radius: calc(7 * var(--u));
  cursor: pointer;
}

.td-upload i {
  position: relative;
  width: calc(27 * var(--u));
  height: calc(21 * var(--u));
  margin-bottom: calc(5 * var(--u));
  background: #fff;
  border-radius: calc(3 * var(--u));
}

.td-upload i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  margin: calc(-6 * var(--u)) 0 0 calc(-6 * var(--u));
  background: #ff4141;
  border: calc(2.6 * var(--u)) solid #fff;
  border-radius: 50%;
  box-sizing: border-box;
}

.td-upload i::after {
  content: "";
  position: absolute;
  left: calc(4 * var(--u));
  top: calc(-3.6 * var(--u));
  width: calc(8 * var(--u));
  height: calc(4 * var(--u));
  background: #fff;
  border-radius: calc(1.4 * var(--u)) calc(1.4 * var(--u)) 0 0;
}

.td-input {
  width: 100%;
  height: calc(36 * var(--u));
  padding: 0 calc(10 * var(--u));
  font-size: calc(13.5 * var(--u));
  color: #333;
  background: #f7f7f9;
  border: 0;
  border-radius: calc(4 * var(--u));
  box-sizing: border-box;
}

.td-input::placeholder { color: #c0c4cc; }

/* ---------------------------- 底部操作条 ---------------------------- */
.td-bottom {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max, 390px);
  height: calc(65 * var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(11.4 * var(--u)) 0 0;
  background: #fff;
  box-shadow: 0 calc(-1 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.td-bottom__change {
  flex: 0 0 calc(110 * var(--u));
  width: calc(110 * var(--u));
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(0.2 * var(--u));
  padding-left: calc(9.9 * var(--u));
  padding-bottom: calc(3.8 * var(--u));
  font-size: calc(12.5 * var(--u));
  line-height: calc(15 * var(--u));
  font-weight: 600;
  color: #333;
  background: none;
  border: 0;
  box-sizing: border-box;
  cursor: pointer;
}

/* 刷新图标：双箭头圆环（真机为 iconfont 圆环箭头，非半圆弧） */
.td-bottom__change svg {
  width: calc(21.7 * var(--u));
  height: calc(21.7 * var(--u));
  display: block;
  fill: none;
  stroke: #666;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.td-bottom__change svg .ar {
  fill: #666;
  stroke: none;
}

.td-bottom__sign {
  flex: 1;
  height: calc(47.1 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6.4 * var(--u));
  font-size: calc(20.5 * var(--u));
  font-weight: 500;
  color: #fff;
  background: #fe4040;
  border: 0;
  border-radius: calc(7 * var(--u));
  cursor: pointer;
}

/* 人形图标（描边白） */
/* 人形+对勾图标（真机为 iconfont 人形勾） */
.td-bottom__sign svg {
  flex: 0 0 auto;
  width: calc(28.6 * var(--u));
  height: calc(28.6 * var(--u));
  display: block;
  fill: none;
  stroke: #fff;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.td-bottom__sign.is-done {
  background: #c8c9cc;
}

/* 上级 / 后续任务沿用 .td-block 容器（样式细节见 detail.tail.css） */
.td-block {
  display: flex;
  flex-direction: column;
  margin: 0 calc(10.8 * var(--u)) calc(12.5 * var(--u));
  padding: calc(10 * var(--u));
  background: #fff;
  border-radius: calc(6.5 * var(--u));
  box-shadow: 0 calc(0.5 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.07);
}

/* ---------------------------- 上级 / 后续任务 ---------------------------- */
.td-rel-head {
  display: flex;
  align-items: center;
  font-size: 17.92px;
  font-weight: 700;
  line-height: 24px;
}

.td-rel-head {
  white-space: nowrap;
}

/* 标题右侧的空心星（源站 12×12，距标题 4px） */
.td-rel-star {
  width: 12px;
  height: 12px;
  margin-left: 4px;
  background: url("../img/site/td-label.png") center / contain no-repeat;
  cursor: pointer;
}

/* 卡片标题后的「顶 / 急 / 宝」小标（源站 15×15，间距 6px） */
.td-rel-badge {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  margin-left: 6px;
  background: center / contain no-repeat;
}

.td-rel-badge--top {
  background-image: url("../img/site/ding.png");
}

.td-rel-badge--urgent {
  background-image: url("../img/site/refresh.png");
}

.td-rel-badge--bao {
  background-image: url("../img/site/bao.png");
}

.td-rel-line {
  height: 1px;
  margin: 10px 0;
  background: #f1f1f1;
}

.td-rel-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  background: #fff;
  border: 0;
  text-align: left;
  cursor: pointer;
}

.td-rel-item__avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eee center / cover no-repeat;
}

.td-rel-item__main {
  flex: 1;
  min-width: 0;
  margin-left: 11px;
}

.td-rel-item__top {
  display: flex;
  align-items: center;
}

.td-rel-item__title {
  font-size: 13.44px;
  font-weight: 700;
  line-height: 19px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.td-rel-item__money {
  margin-left: auto;
  padding-left: 8px;
  font-size: 17.92px;
  font-weight: 700;
  line-height: 23px;
  color: #ff0310;
  white-space: nowrap;
}

.td-rel-item__money i {
  font-style: normal;
  font-size: 13.44px;
  font-weight: 400;
}

.td-rel-item__meta {
  margin-top: 5px;
  display: flex;
  align-items: center;
}

.td-rel-tag {
  margin-right: 6px;
  padding: 3px 5px;
  font-size: 8.96px;
  line-height: 15.2px;
  color: #8e939b;
  background: #f5f5f5;
  border-radius: 0 13px 0 13px;
  transform: scale(0.8);
  transform-origin: left center;
}

.td-rel-stat {
  margin-left: auto;
  font-size: 13.44px;
  line-height: 19px;
  color: #999;
  white-space: nowrap;
}

.td-rel-stat b {
  font-weight: 400;
  color: #ec343b;
}

/* ---------------------------- 右上角规则弹层 ---------------------------- */
.td-rules {
  position: fixed;
  top: 40px;
  right: 11px;
  width: 68px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
  z-index: 20;
  overflow: hidden;
}

.td-rules__item {
  display: block;
  width: 100%;
  height: 31px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  color: #515a6e;
  cursor: pointer;
}

.td-rules__item + .td-rules__item { border-top: 1px solid #f4f4f5; }

/* ---------------------------- 新人须知弹窗 ---------------------------- */
.td-guide {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
}

.td-guide__box {
  width: 320px;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.td-guide__title {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #ff6c5c 0%, #ff4436 100%);
}

.td-guide__list {
  padding: 18px 22px 6px;
}

.td-guide__item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 14px;
}

.td-guide__num {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: #ff4436;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.td-guide__text {
  margin-left: 8px;
  font-size: 14px;
  line-height: 22px;
  color: #333;
}

.td-guide__text b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #333;
}

.td-guide__check {
  display: flex;
  align-items: center;
  margin: 0 22px 10px;
  font-size: 13px;
  color: #999;
  cursor: pointer;
}

.td-guide__check span {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border: 1px solid #c8c9cc;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.td-guide__check span.is-on {
  background: #ff4436;
  border-color: #ff4436;
}

.td-guide__check span.is-on::after {
  content: "";
  width: 8px;
  height: 4px;
  margin-top: -2px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(-45deg);
}

.td-guide__btns {
  display: flex;
  gap: 12px;
  padding: 0 22px 22px;
}

.td-guide__btn {
  flex: 1;
  height: 42px;
  border-radius: 5px;
  font-size: 15px;
  cursor: pointer;
}

.td-guide__btn--ghost {
  background: #fff;
  border: 1px solid #ff4436;
  color: #ff4436;
}

.td-guide__btn--red {
  background: #ff4436;
  border: 0;
  color: #fff;
  font-weight: 700;
}

/* ---------------------------- 通用提示对话框 ---------------------------- */
.td-dialog {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
}

.td-dialog__box {
  width: 280px;
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
}

.td-dialog__header {
  padding: 15px 20px 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 36px;
  color: #303133;
}

.td-dialog__content {
  padding: 0 20px 18px;
  font-size: 15px;
  line-height: 21px;
  color: #303133;
}

.td-dialog__footer {
  display: flex;
  border-top: 1px solid #f4f4f5;
}

.td-dialog__btn {
  flex: 1;
  height: 44px;
  border: 0;
  background: none;
  font-size: 18px;
  color: #909399;
  cursor: pointer;
}

.td-dialog__btn--primary {
  color: #409eff;
  border-left: 1px solid #f4f4f5;
}

/* 快审徽标（详情页「任务描述」标题后） */
.td-fast {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 7px;
  padding: 1px 5px;
  font-size: 13.44px;
  font-weight: 400;
  line-height: 18px;
  color: #ff445b;
  border: 1px solid #ff445b;
  border-radius: 3px;
  white-space: nowrap;
}

.td-fast i {
  width: 17px;
  height: 18px;
  margin-right: 7px;
  background: url("../img/site/td-shen.png") center / contain no-repeat;
}

/* 未报名占位（黑底「请先报名」）的样式统一在 detail.src.css 中定义，
   此处的旧规则会覆盖 --qr 的 flex-start 对齐，已移除。 */

/* 任务不存在 / 已下线的兜底页 */
.td-empty {
  padding: 120px 24px 0;
  text-align: center;
}

.td-empty__face {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #f2f3f5 url("../img/site/avatar-default.png") center / 60% no-repeat;
  opacity: 0.7;
}

.td-empty p {
  margin: 0 0 24px;
  font-size: 15px;
  color: #92979e;
}

.td-empty__btn {
  height: 40px;
  padding: 0 26px;
  font-size: 15px;
  color: #fb4747;
  background: #fff;
  border: 1px solid #fb4747;
  border-radius: 20px;
}

/* ============================================================
   APP_ALIGN v1 —— 按原生 App（com.yjhb.android.feibang 3.29）
   720x1600@2x / 360dp 实测重建。单位 u = CSSpx * 1.08333
   ============================================================ */

/* 页面底 */
.td { background: #f3f2f8; }

/* 头部：纯渐变红，高 110 */
.td-hero {
  height: calc(119.3 * var(--u));
  padding-top: 0;
  background:
    radial-gradient(calc(190 * var(--u)) calc(150 * var(--u)) at 97% 10%, rgba(255, 214, 208, 0.55), rgba(255, 214, 208, 0) 62%),
    linear-gradient(92deg, #ff7062 0%, #ff5949 26%, #ff6153 54%, #ff7566 80%, #ff877c 100%);
  box-sizing: border-box;
}

.td-nav {
  height: calc(48.8 * var(--u));               /* 45dp */
  padding-top: calc(29.3 * var(--u));          /* 状态栏 27px */
  box-sizing: content-box;
  background: none;
}

.td-nav__bar {
  height: calc(48.8 * var(--u));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.td-nav__title {
  font-size: calc(21.1 * var(--u));            /* 18sp bold */
  font-weight: 700;
  color: #fff;
  letter-spacing: calc(0.2 * var(--u));
}

.td-back {
  position: absolute;
  left: calc(14.2 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  width: calc(21.7 * var(--u));
  height: calc(21.7 * var(--u));
}

.td-menu {
  position: absolute;
  right: calc(14.2 * var(--u));
  top: 50%;
  transform: translateY(-50%);
  width: calc(21.7 * var(--u));
  height: calc(21.7 * var(--u));
}

/* 主容器 */
.td-main {
  margin-top: 0;              /* 覆盖旧 calc(-73 * var(--u)) */
  padding: 0 calc(10.8 * var(--u)) calc(21.7 * var(--u));     /* 左右 10px */
  background: #f3f2f8;
}

/* 通用卡片 */
.td-card {
  border-radius: calc(9.4 * var(--u));         /* 8dp */
  background: #fff;
  padding: calc(17.6 * var(--u));              /* 15dp */
  box-shadow: 0 calc(1.1 * var(--u)) calc(2.2 * var(--u)) rgba(0, 0, 0, 0.045);
  border: 0;
  margin: 0;
}

.td-card + .td-card,
.td-card--info + .td-card,
.td-block + .td-card {
  margin-top: calc(18.4 * var(--u));           /* 17px */
}

/* 信息卡 */
.td-card--info { padding: calc(5.4 * var(--u)) calc(16.25 * var(--u)) calc(5.4 * var(--u)); margin: 0; overflow: visible; }

.td-info__row { display: flex; align-items: flex-start; }

/* 头像 60dp：溢出卡片左上（顶 -25、左 -2），不占行高 */
.td-info__av {
  position: relative;
  flex: 0 0 calc(65 * var(--u));
  width: calc(65 * var(--u));
  height: 0;
  margin: 0 0 0 calc(-2.17 * var(--u));
}

.td-info__avatar {
  position: absolute;
  top: calc(-27.08 * var(--u));
  left: 0;
  width: calc(65 * var(--u));
  height: calc(65 * var(--u));
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 calc(2.2 * var(--u)) #fff;
}

.td-info__medal {
  position: absolute;
  top: calc(18.4 * var(--u));
  left: calc(41 * var(--u));
  z-index: 3;
  height: calc(13 * var(--u));
  line-height: calc(13 * var(--u));
  padding: 0 calc(3.3 * var(--u));
  font-size: calc(9.8 * var(--u));
  color: #fff;
  background: linear-gradient(90deg, #ffd24a, #ff9a2e);
  border-radius: calc(2.2 * var(--u));
  white-space: nowrap;
}

.td-info__id {
  position: absolute;
  top: calc(40.08 * var(--u));
  left: 0;
  width: calc(65 * var(--u));
  margin: 0;
  font-size: calc(9.8 * var(--u));
  line-height: 1.2;
  color: #666;
  text-align: center;
  z-index: 2;
}

/* 联系TA：头像下方居中，描边小药丸 */
.td-info__contact {
  position: absolute;
  top: calc(55.25 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  height: calc(17.33 * var(--u));
  line-height: calc(15.2 * var(--u));
  padding: 0 calc(4.33 * var(--u));
  font-size: calc(11.9 * var(--u));
  color: #ff2c26;
  background: #fff;
  border: calc(0.9 * var(--u)) solid #ff2c26;
  border-radius: calc(2.2 * var(--u));
  white-space: nowrap;
  z-index: 2;
}

.td-info__main {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: calc(7.58 * var(--u));          /* 7dp */
  padding: 0;
}

.td-info__title {
  font-size: calc(17.33 * var(--u));           /* 16px bold */
  font-weight: 700;
  color: #000;
  line-height: 1.36;
  word-break: break-all;
}

.td-info__meta {
  margin-top: calc(3.25 * var(--u));
  display: flex;
  align-items: center;
  font-size: calc(14.1 * var(--u));            /* 12sp */
  color: #666;
  line-height: 1.27;
}

.td-copy {
  margin-left: calc(5.4 * var(--u));
  padding: 0 calc(4.3 * var(--u));
  height: calc(14.1 * var(--u));
  line-height: calc(14.1 * var(--u));
  font-size: calc(10.8 * var(--u));
  color: #fff;
  background: #ff445b;
  border-radius: calc(2.2 * var(--u));
  border: 0;
}

.td-star {
  width: calc(15.2 * var(--u));
  height: calc(15.2 * var(--u));
  margin-left: calc(8.7 * var(--u));
}

/* 金额 */
.td-money {
  flex: 0 0 auto;
  margin: 0 calc(10.83 * var(--u)) 0 calc(8.7 * var(--u));
  padding-top: 0;
  color: #ec343b;
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

.td-money i {
  font-size: calc(14.1 * var(--u));            /* ¥ */
  font-style: normal;
  font-weight: 600;
}

.td-money b {
  font-size: calc(23.5 * var(--u));            /* 数字 21sp */
  font-weight: 700;
  line-height: 1;
}

/* 标签行（在右列内，左边与标题对齐） */
.td-labels {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8.67 * var(--u));
  margin-top: calc(12.3 * var(--u));
  padding: 0;
  background: none;
  border: 0;
  min-height: 0;
}

.td-label {
  height: calc(17.33 * var(--u));
  line-height: calc(17.33 * var(--u));
  padding: 0 calc(4.87 * var(--u));
  font-size: calc(10.8 * var(--u));
  border-radius: calc(3.3 * var(--u));
  border: 0;
  color: #fff;
  background: #fb665e;
  box-sizing: border-box;
  font-weight: 400;
}

.td-label--one { color: #fff; background: #fb665e; border-color: #fb665e; }
.td-label--two { color: #fff; background: #f55881; border-color: #f55881; }
.td-label--three { color: #fff; background: #eb3549; border-color: #eb3549; }

/* 四统计 */
.td-stats {
  display: flex;
  gap: calc(9.2 * var(--u));
  margin: calc(10.83 * var(--u)) 0 0;
  padding: calc(11.4 * var(--u)) 0 0;
  border-top: 0;
  background: none;
}

.td-stat {
  flex: 1 1 0;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.td-stat + .td-stat::before {
  content: '';
  position: absolute;
  left: calc(-4.6 * var(--u));
  top: calc(-5.4 * var(--u));
  width: calc(0.54 * var(--u));
  height: calc(43.3 * var(--u));
  background: #e5e5e5;
}

.td-stat b {
  font-size: calc(16.3 * var(--u));            /* 15px bold */
  font-weight: 700;
  color: #000;
  line-height: 1.53;
}

.td-stat b i {
  font-style: normal;
  font-size: calc(11.9 * var(--u));
  font-weight: 400;
  color: #333;
  margin-left: calc(0.5 * var(--u));
}

.td-stat small {
  margin-top: 0;
  font-size: calc(13 * var(--u));              /* 12px */
  color: #999;
  line-height: 1.375;
}

/* 审核行：左右各溢出 10px，分隔线 15→345 */
.td-audit {
  margin: calc(10.83 * var(--u)) calc(-10.83 * var(--u)) 0;
  padding: calc(8.1 * var(--u)) 0 0 calc(16.25 * var(--u));
  border-top: calc(0.54 * var(--u)) solid #ededed;
  border-bottom: 0;
  height: auto;
  display: flex;
  align-items: center;
  font-size: calc(13 * var(--u));
  color: #999;
  line-height: 1.4;
}

.td-audit .td-audit__item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: calc(4.3 * var(--u));
  min-width: 0;
  margin-left: 0;
  font-size: calc(13 * var(--u));
  color: #999;
}

.td-audit__icon {
  flex: 0 0 calc(15.2 * var(--u));
  width: calc(15.2 * var(--u));
  height: calc(15.2 * var(--u));
  border-radius: 50%;
  background: url("../img/site/td-shenghe.png") center / 100% 100% no-repeat;
}

.td-audit em {
  font-style: normal;
  color: #999;
}

/* 官方提示 / 任务描述 / 任务步骤 卡 */
.td-card--desc,
.td-tips,
.td-card--steps {
  padding: calc(16.25 * var(--u));
}

.td-head {
  font-size: calc(16.5 * var(--u));            /* 15.3px bold */
  font-weight: 700;
  color: #ec343b;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  gap: calc(5.4 * var(--u));
  line-height: 1.42;
}

.td-card--desc:not(.td-tips) .td-head__icon {
  border-radius: calc(3.3 * var(--u));
  font-size: 0;
  color: transparent;
  background: #ec343b url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect x='8.5' y='1.5' width='7' height='3.6' rx='1.6' fill='%23fff'/><rect x='4.5' y='3.4' width='15' height='19' rx='2.2' fill='%23fff'/><rect x='7.4' y='8' width='9.2' height='2.1' rx='1.05' fill='%23ec343b'/><rect x='7.4' y='12.2' width='9.2' height='2.1' rx='1.05' fill='%23ec343b'/><rect x='7.4' y='16.4' width='5.6' height='2.1' rx='1.05' fill='%23ec343b'/></svg>") center / calc(11 * var(--u)) calc(11 * var(--u)) no-repeat;
}

.td-head__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(15.2 * var(--u));
  height: calc(15.2 * var(--u));
  flex: 0 0 calc(15.2 * var(--u));
  border-radius: 50%;
  background: #ec343b;
  color: #fff;
  font-size: calc(11.9 * var(--u));
  font-weight: 700;
  line-height: calc(15.2 * var(--u));
  text-align: center;
  font-style: normal;
}

.td-remark {
  margin-top: calc(10.83 * var(--u));
  font-size: calc(13 * var(--u));              /* 12px */
  color: #666;
  line-height: 1.65;
  white-space: pre-line;
  word-break: break-all;
}

.td-tips__line {
  font-size: calc(13 * var(--u));
  color: #666;
  line-height: 1.65;
}

.td-tips__line + .td-tips__line { margin-top: 0; }

/* 步骤卡 */
.td-card--steps .td-head {
  font-size: calc(17.4 * var(--u));            /* 16px bold */
  color: #ec343b;
  gap: 0;
}

.td-card--steps .td-head__icon { display: none; }

.td-head__sub { margin-left: 0; }

.td-head__sub {
  font-size: calc(15.2 * var(--u));
  font-weight: 700;
  color: #ec343b;
}

.td-steps { margin-top: 0; }

.td-step { margin-top: calc(37.9 * var(--u)); }  /* 35dp */
.td-step:first-child { margin-top: calc(9.8 * var(--u)); }

.td-step__row { display: flex; align-items: flex-start; }

.td-step__num {
  flex: 0 0 calc(21.7 * var(--u));
  width: calc(21.7 * var(--u));
  height: calc(21.7 * var(--u));
  border-radius: 50%;
  background: #ff4040;
  color: #fff;
  font-size: calc(15.2 * var(--u));            /* 14px bold */
  font-weight: 700;
  line-height: calc(21.7 * var(--u));
  text-align: center;
  margin-top: 0;
}

.td-step__title {
  flex: 1 1 auto;
  margin-left: calc(5.4 * var(--u));
  font-size: calc(15.2 * var(--u));            /* 14px */
  color: #000;
  line-height: 1.42;
  word-break: break-all;
}

.td-step__body { margin-top: calc(16.3 * var(--u)); padding-left: 0; }

/* 步骤媒体区：图片左对齐 45%，按钮列右侧 120 宽 */
.td-step__media,
.td-step__media--qr,
.td-step__media--shot {
  gap: 0;
  align-items: flex-start;
  justify-content: space-between;
}

.td-step__media .td-step__img {
  position: relative;
  flex: 0 0 auto;
  width: 45%;
  margin-left: 0;
  border-radius: 0;
  overflow: hidden;
  background: #f2f2f2;
}

/* 「验证图」角标 */
.td-step__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  height: calc(22.2 * var(--u));
  line-height: calc(22.2 * var(--u));
  padding: 0 calc(5.4 * var(--u));
  font-size: calc(13 * var(--u));
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
}

.td-step__media--lock .td-step__img {
  height: auto;
  aspect-ratio: 1 / 1;
  background: #000;
}

.td-step__img img {
  display: block;
  width: 100%;
  height: auto;
}

/* 二维码按钮组：宽 120dp，右对齐，距图片顶 15 */
.td-step__media .td-step__btns {
  flex: 0 0 calc(130 * var(--u));
  width: calc(130 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(10.8 * var(--u));
  margin-top: calc(16.25 * var(--u));
  align-items: stretch;
}

/* 上传数据图：无外框，红块 70×71 垂直居中 */
.td-upload-box {
  flex: 0 0 calc(130 * var(--u));
  width: calc(130 * var(--u));
  height: auto;
  align-self: stretch;
  border: 0;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

.td-btn {
  width: calc(130 * var(--u));
  height: calc(30.4 * var(--u));
  line-height: calc(30.4 * var(--u));
  font-size: calc(15.7 * var(--u));            /* 14.5px bold */
  font-weight: 700;
  border-radius: calc(3.3 * var(--u));
  padding: 0;
  text-align: center;
  border: 0;
}

.td-btn--dark { background: #ff4040; color: #fff; }
.td-btn--light { background: #ffe9e9; color: #ff4040; }

/* 上传数据图红块 70×71 */
.td-upload {
  flex: 0 0 calc(75.8 * var(--u));
  margin-left: calc(13.5 * var(--u));
  width: calc(75.8 * var(--u));
  height: calc(76.9 * var(--u));
  border-radius: calc(6.5 * var(--u));
  background: #ff445b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  color: #fff;
  font-size: calc(13 * var(--u));              /* 12px bold */
  font-weight: 700;
}

.td-upload i {
  width: calc(28.2 * var(--u));
  height: calc(28.2 * var(--u));
  margin-bottom: calc(5.4 * var(--u));
  background: none;
  border: 0;
}

/* 底栏：高 62，按钮 44 内缩 10 */
.td-bottom {
  height: calc(67.2 * var(--u));
  padding: calc(9.8 * var(--u)) calc(10.83 * var(--u));
  background: #fff;
  border-top: 0;
  box-shadow: 0 calc(-1.1 * var(--u)) calc(5.4 * var(--u)) rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.td-bottom__change {
  flex: 0 0 calc(99.1 * var(--u));
  width: calc(99.1 * var(--u));
  height: calc(47.7 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(17.4 * var(--u));            /* 16px bold */
  font-weight: 700;
  color: #999;
  gap: calc(1.1 * var(--u));
  background: none;
  border: 0;
  padding: 0;
}

.td-bottom__change svg { width: calc(19.5 * var(--u)); height: calc(19.5 * var(--u)); }

.td-bottom__sign {
  flex: 1 1 auto;
  height: calc(47.7 * var(--u));
  border-radius: calc(8.7 * var(--u));
  background: #ff4040;
  font-size: calc(17.4 * var(--u));            /* 16px bold */
  font-weight: 700;
  color: #fff;
  gap: calc(5.4 * var(--u));
}

.td-bottom__sign svg { width: calc(21.7 * var(--u)); height: calc(21.7 * var(--u)); }