/* ==========================================================================
   赏帮赚 移动端克隆 — 样式
   参考站点：https://m.shangbangzhuan.com   （视口 390×844，iPhone UA）
   所有尺寸取自源站 computed style 测量值，见 docs/research/capture/*-metrics.json
   ========================================================================== */

:root {
  --red: #ff4040;
  --title-red: #ff4a31;
  --page-bg: #f3f2f8;
  --text: #3b4144;
  --text-strong: #303133;
  --muted: #7a7e83;
  --line: #f0f0f2;
  --btn-red: #f56c6c;
  --app-max: 100%;
  --tabbar-h: 50px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* rpx 等价单位。uni-app H5 的换算：窗口宽 <= 960 时 1rpx = w / 750 px，
     超过 960 时改用基准宽 375（1rpx = 0.5px），故 390 宽的实测值 N 渲染为：
       w <= 960 : N * w / 390
       w >  960 : N * 0.9615      （= 0.5 / (390 / 750)）
     两者用 media query 分段，与源站完全一致。 */
  --u: calc(100vw / 390);
}

@media (min-width: 961px) {
  :root { --u: 0.961538px; } /* 必须以 px 结尾，--u 在窄屏是 calc(100vw/390) 长度值 */
}

/* 平板 / 桌面（>=700）：不再把整页等比放大，改成居中的 430px 手机列。
   注意顺序——必须排在 961 断点之后，宽屏时以这一条为准。 */
@media (min-width: 700px) {
  html, body { background: #e6e9ee; }

  :root {
    --app-max: 430px;
    --u: 1.102564px; /* 430 / 390，整列放到 1.1 倍，比 1:1 更耐看 */
  }

  #app {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 18px 48px rgba(0, 0, 0, 0.16);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: #f6f6f6;
  color: #000;
  /* 与源站 uni-app 默认字体栈完全一致，否则中文字宽差 ~1%，换行点会错位 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", "Microsoft Yahei", sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

#app {
  position: relative;
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--page-bg);
  overflow-x: hidden;
}

.page {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b));
  background: var(--page-bg);
}

.page--noTab { padding-bottom: 0; }

img { border: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

/* 顶部标题栏（更多赚钱 / 任务详情） */
.title-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  height: 45px;
  background: var(--title-red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.title-bar__back {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-bar__back::before {
  content: "";
  width: 9px;
  height: 9px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  border-radius: 1px;
}

/* ============================ 我的 ============================ */

.mine-top {
  position: relative;
  height: 224px;
  background: url("../img/mine-top-bg.png") center / cover no-repeat;
  border-radius: 0 0 20px 20px;
}

.mine-top__inner {
  display: flex;
  padding: 40px 0 0 15px;
}

.mine-avatar {
  flex: 0 0 auto;
  width: 79px;
  height: 79px;
  border-radius: 50%;
  background: url("../img/logo.png") center / contain no-repeat;
  display: block;
}

.mine-id {
  margin-left: 15px;
  padding-top: 6px;
  color: #fff;
  min-width: 0;
}

.mine-id__name { font-size: 17px; font-weight: 700; line-height: 22px; }

.mine-id__no {
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
  margin-top: 6px;
}

.mine-credit {
  display: flex;
  align-items: center;
  margin-top: 6px;
  height: 19px;
}

.mine-credit__label { font-size: 14px; font-weight: 450; line-height: 19px; }

.mine-credit__bar {
  position: relative;
  width: 110px;
  height: 7px;
  margin-left: 5px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}

.mine-credit__bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  background: #fff;
}

.mine-credit__val { margin-left: 5px; font-size: 12px; font-weight: 450; }

.mine-shop {
  position: absolute;
  right: 10px;
  top: 40px;
  width: 97px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  padding-left: 15px;
  color: #fff;
  font-size: 15px;
  white-space: nowrap;
}

.mine-shop__icon {
  width: 22px;
  flex: 0 0 auto;
  height: 22px;
  background: url("../img/icon-shop.png") center / contain no-repeat;
  margin-right: 5px;
}

.vip-banner {
  position: absolute;
  left: 19.5px;
  right: 19.5px;
  bottom: 38px;
  height: 55px;
  background: url("../img/vip-bg.png") center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
  padding: 0 25px;
}

.vip-banner__crown {
  width: 15px;
  height: 15px;
  background: url("../img/icon-vip-crown.png") center / contain no-repeat;
}

.vip-banner__label {
  font-size: 14.4px;
  font-weight: 700;
  color: #ffd798;
  margin-left: 8px;
  line-height: 20px;
}

.vip-banner__btn {
  margin-left: auto;
  height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  background: #ffd798;
  color: #333;
  font-size: 14px;
  display: flex;
  align-items: center;
}

/* 用户工具卡（赏金/奖励/余额 + 两个入口） */
.toolbar-card {
  position: relative;
  z-index: 2;
  margin: -23px 12px 0;
  height: 156px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.19) 0 2px 10px 0;
}

.wallet {
  display: flex;
  height: 90px;
}

.wallet__col {
  flex: 1 1 0;
  text-align: center;
  padding-top: 8px;
}

.wallet__num {
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  color: #ff2135;
}

.wallet__label {
  font-size: 15px;
  line-height: 20px;
  margin-top: 5px;
  color: rgba(0, 0, 0, 0.9);
}

.wallet__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  height: 21px;
  padding: 0 8px;
  border-radius: 15px;
  background: #fac7c7;
  color: #d92a19;
  font-size: 12px;
  line-height: 16px;
}

.toolbar-actions {
  display: flex;
  height: 66px;
  border-top: 1px solid var(--line);
}

.toolbar-actions__item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: var(--text-strong);
}

.toolbar-actions__item { position: relative; }

.toolbar-actions__item + .toolbar-actions__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 32px;
  background: #eee;
}

.toolbar-actions__icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.icon-my-task { background-image: url("../img/icon-my-task.png"); }
.icon-publish { background-image: url("../img/icon-publish.png"); }

/* 轮播 */
.banner {
  position: relative;
  margin: 15px 12px 0;
  height: 73px;
  border-radius: 5px;
  overflow: hidden;
  background: #2c405a;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.19) 0 2px 10px 0;
}

.banner__track {
  display: flex;
  height: 100%;
  transition: transform 0.32s ease;
  will-change: transform;
}

.banner__slide {
  flex: 0 0 100%;
  height: 100%;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.banner__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.banner__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
}

.banner__dot.is-active { background: #fff; }

/* 菜单列表 */
.menu-list {
  margin: 8px 12px 0;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 2px 0, rgba(0, 0, 0, 0.19) 0 2px 10px 0;
}

.menu-row {
  display: flex;
  width: 100%;
  align-items: center;
  height: 45px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 16px;
  color: var(--text);
  position: relative;
}

.menu-row--tall { height: 66px; }

.menu-row + .menu-row::before {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  top: 0;
  height: 1px;
  background: #f2f2f4;
}

.menu-row__icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  flex: 0 0 auto;
}

.icon-invite { background-image: url("../img/icon-invite.png"); }
.icon-report { background-image: url("../img/icon-report.png"); }
.icon-msg { background-image: url("../img/icon-msg.png"); }
.icon-income { background-image: url("../img/icon-income.png"); }
.icon-setting { background-image: url("../img/icon-setting.png"); }

.menu-row__gift {
  width: 40px;
  height: 42px;
  margin-left: auto;
  margin-right: 8px;
  background: url("../img/icon-invite-gift.png") center / contain no-repeat;
}

.menu-row__arrow {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid #c8c9cc;
  border-right: 1.5px solid #c8c9cc;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.mine-footer-space { height: 25px; }

/* 登录引导面板 */
.login-sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b));
}

.login-sheet {
  width: 100%;
  max-width: var(--app-max);
  background: #fff;
  padding: 12.5px 12.5px 12px;
  padding-bottom: calc(30px + var(--safe-b));
}

.login-sheet__title {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
}

.login-sheet__sub {
  margin-top: 8px;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  color: rgba(0, 0, 0, 0.9);
}

.login-sheet__btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  height: 40px;
  border-radius: 3px;
  background: var(--btn-red);
  color: #fff;
  font-size: 14px;
}

/* ============================ 底部 tabbar ============================ */

.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max);
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: #fff;
  box-shadow: inset 0 1px 0 #f0f0f2;
  display: flex;
  z-index: 30;
}

.tabbar[hidden] { display: none; }

.tabbar__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
  color: var(--muted);
  font-size: 10px;
  line-height: 14px;
}

.tabbar__item.is-active { color: var(--red); }

.tabbar__icon {
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-bottom: 5px;
}

.tabbar__item[data-tab="home"] .tabbar__icon { background-image: url("../img/tab-home.png"); }
.tabbar__item[data-tab="home"].is-active .tabbar__icon { background-image: url("../img/tab-home-on.png"); }
.tabbar__item[data-tab="hall"] .tabbar__icon { background-image: url("../img/tab-hall.png"); }
.tabbar__item[data-tab="hall"].is-active .tabbar__icon { background-image: url("../img/tab-hall-on.png"); }
.tabbar__item[data-tab="games"] .tabbar__icon { background-image: url("../img/tab-game.png"); }
.tabbar__item[data-tab="games"].is-active .tabbar__icon { background-image: url("../img/tab-game-on.png"); }
.tabbar__item[data-tab="mine"] .tabbar__icon { background-image: url("../img/tab-mine.png"); }
.tabbar__item[data-tab="mine"].is-active .tabbar__icon { background-image: url("../img/tab-mine-on.png"); }

/* ============================ 更多赚钱 ============================ */

.games-body { padding-top: 15px; }

.game-card {
  display: flex;
  align-items: center;
  height: 78px;
  background: #fff;
  padding: 0 15px;
  text-align: left;
  width: 100%;
}

.game-card + .game-card { margin-top: 15px; }

.game-card__icon {
  width: 46px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 auto;
}

.game-card__main { margin-left: 15px; min-width: 0; }

.game-card__title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  color: #f4525f;
}

.game-card__badge {
  margin-left: 10px;
  height: 15px;
  padding: 0 5px;
  border: 1px solid rgba(243, 65, 79, 0.45);
  border-radius: 16px;
  color: #f3414f;
  font-size: 10px;
  font-weight: 400;
  line-height: 13px;
  display: inline-flex;
  align-items: center;
}

.game-card__desc {
  margin-top: 10px;
  font-size: 12px;
  line-height: 16px;
  color: #666;
}

.games-note {
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  color: #666;
}

.float-invite {
  position: fixed;
  right: 20px;
  bottom: calc(170px + var(--safe-b));
  width: 53px;
  height: 64px;
  background: url("../img/float-invite.png") center / contain no-repeat;
  z-index: 10;
}

/* ============================ 任务详情 ============================ */

.detail-body {
  padding: 16px 15px 20px;
}

.detail-body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 13px; /* 源站 26rpx */
}

/* ============================ 登录 ============================ */

.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--page-bg);
  position: relative;
  padding-bottom: calc(60px + var(--safe-b));
}

.login-back {
  position: absolute;
  left: 10px;
  top: 12.5px;
  width: 20px;
  height: 20px;
}

.login-back::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
}

.login-title {
  margin: 0;
  padding: 60px 0 0 25px;
  font-size: 25.6px;
  line-height: 34px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.9);
}

.login-logo {
  width: 75px;
  height: 75px;
  margin: 66px auto 0;
  border-radius: 50%;
  background: url("../img/logo.png") center / contain no-repeat;
}

.login-form {
  margin: 31px 25px 0;
}

.login-field {
  position: relative;
  display: flex;
  align-items: center;
  height: 51px;
  border-bottom: 1px solid #e9e9ee;
}

.login-field__icon {
  width: 14px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  flex: 0 0 auto;
}

.login-field__icon--phone { background-image: url("../img/login-icon-1.png"); }
.login-field__icon--captcha { background-image: url("../img/login-icon-2.png"); width: 12px; }
.login-field__icon--sms { background-image: url("../img/login-icon-3.png"); width: 12px; }

.login-field input {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 10px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  line-height: 22.4px;
  color: #000;
  padding: 0;
}

.login-field input::placeholder { color: #808080; }

.captcha-img {
  width: 80px;
  height: 40px;
  margin-left: 8px;
  border-radius: 4px;
  flex: 0 0 auto;
  display: block;
  cursor: pointer;
  background: #fff;
}

.sms-btn {
  flex: 0 0 auto;
  margin-left: 8px;
  font-size: 13px;
  color: var(--red);
  line-height: 17px;
}

.sms-btn:disabled { color: #b9b9c0; }

.login-help {
  margin: 9px 0 0 -1px;
  padding-left: 17px;
  font-size: 12px;
  line-height: 16px;
  color: #10aeff;
  display: inline-block;
}

.login-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  width: 100%;
  height: 40px;
  border-radius: 3px;
  background: var(--btn-red);
  color: #fff;
  font-size: 14px;
}

.login-other {
  margin-top: 8px;
  text-align: right;
  font-size: 13px;
  line-height: 17px;
  color: #999992;
}

.login-agree {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(15px + var(--safe-b));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 19px;
  color: rgba(0, 0, 0, 0.9);
  padding: 0 22px;
}

.login-agree__box {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border: 1px solid #c9c9cf;
  border-radius: 3px;
  flex: 0 0 auto;
  position: relative;
}

.login-agree__box.is-checked {
  background: #3293f7;
  border-color: #3293f7;
}

.login-agree__box.is-checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.login-agree a { color: #3293f7; text-decoration: none; }

/* ============================ 全局 toast ============================ */

#toast-root {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.toast {
  max-width: 70%;
  padding: 10px 16px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.is-show { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   首页（/pages/home/home）
   几何数据来源：docs/research/capture/home-metrics.json
   ========================================================================== */
.home-page {
  min-height: 100vh;
  background: #f6f6f6;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b));
}

.home-hero {
  padding: 15px 3% 12.7px;
  background: linear-gradient(180deg, #eb3647 0%, #ec4d43 100%);
}

.home-banner {
  position: relative;
  height: 156px; /* 源站 .banner 的 156 是 390 宽下的 rpx 计算值，随宽度缩放 */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(120, 12, 18, 0.18);
}

.home-banner__track {
  display: flex;
  height: 100%;
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.home-banner__slide {
  flex: 0 0 100%;
  height: 100%;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.home-banner__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.home-banner__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.3);
  transition: background 0.2s;
}

.home-banner__dot.is-active { background: #fff; }

/* 功能区卡片 */
.home-nav {
  margin-top: 11px;
  padding: 20px 27px 15px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.home-nav__row {
  display: flex;
  justify-content: space-between;
}

.home-nav__item {
  width: 42px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: center;
}

.home-nav__icon {
  display: block;
  width: 42px;
  height: 42px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.home-nav__label {
  display: block;
  margin: 5px 0 0 -3px;
  width: 48px;
  font-size: 12px;
  line-height: 16px;
  color: #333;
  white-space: nowrap;
}

/* 公告：单行滚动 */
.home-notice {
  position: relative;
  /* 源站 .sys_notice 为 width:84vw + 固定 25px 高，横向居中；
     改写成 327.6u（390 下等于 84vw），宽屏手机列里同样成立。 */
  width: calc(327.6 * var(--u));
  margin: 10px auto 0;
  height: 25px;
  padding: 0 8px 0 7px;
  background: #ffd7d9;
  border-radius: 11px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.home-notice__icon {
  flex: 0 0 auto;
  width: 30px;
  height: 16px;
  margin-top: 4.5px;
  align-self: flex-start;
  background: url("../img/site/notice_icon.png") no-repeat center / contain;
}

.home-notice__viewport {
  flex: 1;
  height: 20px;
  margin-left: 5px;
  overflow: hidden;
}

.home-notice__list {
  transition: transform 0.4s ease;
}

.home-notice__item {
  height: 20px;
  line-height: 16px;
  padding-top: 2px;
  font-size: 12px;
  color: #303133;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 白色内容区 */
.home-content {
  background: #fff;
  border-radius: 15px 15px 0 0;
  min-height: 60vh;
}

.home-tabs {
  display: flex;
  padding: 8.5px 0 3.5px;
}

.home-tab {
  position: relative;
  flex: 1;
  padding: 0 0 6px;
  border: 0;
  background: none;
  font-size: 17px;
  line-height: 22px;
  color: #000;
  cursor: pointer;
}

.home-tab.is-active { color: #ff4266; }

.home-tab.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 68px;
  height: 3px;
  margin-left: -34px;
  border-radius: 2px;
  background: #ff4266;
}

/* ==========================================================================
   任务列表行（首页 / 悬赏大厅共用）
   ========================================================================== */
.task-list { background: #fff; }

.task-item {
  position: relative;
  /* 源站行高不锁定：标题按 normal 换行，长标题会把整行撑高（360 宽下 100 行里有 20 行变 88px） */
  min-height: 72px;
  padding: 12px 15px 0;
  display: flex;
  background: #fff;
  cursor: pointer;
}

.task-item__avatar {
  position: relative;
  flex: 0 0 45px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #f2f2f5;
}

.task-item__vip {
  position: absolute;
  left: 24px;
  top: 25px;
  width: 24px;
  height: 18px;
  background: url("../img/site/year.png") no-repeat center / contain;
}

.task-item__main {
  flex: 1;
  min-width: 0;
  margin-left: 15px;
}

.task-item__titleline {
  display: flex;
  align-items: flex-start;
  padding-top: 1px;
  min-height: 19px;
}

.task-item__title {
  flex: 0 1 auto;
  /* 源站标题可用宽 ≈ 正文列的 56%（390 实测 168 / 300，360 实测 154 / 270），
     超出就折行而非省略号；行高随之增长，卡片最小高度 72。 */
  max-width: 56%;
  font-size: 14px;
  line-height: normal;      /* 源站 normal：390 下 19px，360 下 17px */
  color: rgba(0, 0, 0, 0.9);
  overflow: hidden;         /* 源站不截断也不省略号，靠容器 70% 宽度自然折行 */
}

.task-item__badges {
  display: flex;
  gap: 3px;
  margin-left: 3px;
  flex: 0 0 auto;
}

.task-item__badge {
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.task-item__badge--ding { background-image: url("../img/site/ding.png"); }
.task-item__badge--bao { background-image: url("../img/site/bao.png"); }
.task-item__badge--refresh { background-image: url("../img/site/refresh.png"); }
.task-item__badge--fast { background-image: url("../img/site/shen.png"); }

.task-item__money {
  position: absolute;
  right: 15px;
  top: 10px;
  height: 24px;
  display: flex;
  align-items: baseline;
  color: #ff0310;
}

.task-item__money i {
  font-style: normal;
  font-size: 14.4px;
  line-height: 20px;
}

.task-item__money b {
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
}

.task-item__money em {
  font-style: normal;
  font-size: 13px;
  line-height: 17px;
}

.task-item__meta {
  display: flex;
  align-items: center;
  margin-top: 10px;
  height: 19px;
}

.task-item__tags {
  flex: 1;
  min-width: 0;
  display: flex;
  overflow: hidden;
}

.task-item__tag {
  flex: 0 0 auto;
  max-width: 120px;
  margin-right: 7px;
  padding: 2px 5px;
  background: #f3f3f3;
  border-radius: 0 7px;
  font-size: 11px;
  line-height: 15px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-item__tag--name {
  flex: 0 1 auto;
  max-width: 150px;
}

.task-item__tags { padding-right: 4px; }

.task-item__stat {
  flex: 0 0 auto;
  margin-left: auto;
  margin-top: 2px;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  line-height: 17px;
  color: #999;
  white-space: nowrap;
}

.task-item__stat b {
  font-weight: 400;
  color: #ff0310;
}

/* 首页悬浮入口 */
/* 源站实测：button_makeMoney right:20 bottom:165 48.8x48.8；button_publish right:20 bottom:100 50x50 */
.home-float {
  position: fixed;
  right: 20px;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 12;
}

.home-float__btn {
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  cursor: pointer;
}

.home-float__btn--earn { width: 48.8px; height: 48.8px; background-image: url("../img/site/im_im_zhuanqian.png"); }
.home-float__btn--todo { background-image: url("../img/site/im_im_xiaoxi.png"); }

/* ==========================================================================
   悬赏大厅（/pages/hall/hall）
   ========================================================================== */
.hall-page {
  min-height: 100vh;
  background: #fff;
  /* 源站 .content 额外有 50px 下内边距，叠加 tabbar 占位；列表本身带 1px 上边框
     （uni-border-top-bottom 的 hairline），合计尾部留白 100px、列表下移 1px。 */
  padding-bottom: calc(50px + var(--tabbar-h) + var(--safe-b));
}

.hall-page > .task-list { border-top: 1px solid #f0f0f0; }

.hall-header {
  display: flex;
  align-items: flex-start;
  height: 53px;
  padding: 8.5px 8px 0;
  background: #ff4040;
}

.hall-do {
  flex: 0 0 52px;
  width: 52px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

.hall-do__box {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 auto;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23ffffff'/%3E%3Cpath d='M6.6 12.3l3.4 3.4 7.4-7.4' fill='none' stroke='%2322b573' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
  opacity: 0.95;
}

.hall-do.is-off .hall-do__box { opacity: 0.35; }

.hall-do__label {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 17px;
  white-space: nowrap;
}

.hall-search {
  position: relative;
  flex: 1;
  height: 36px;
  margin-left: 10px;
  padding-left: 26px;
  border-radius: 30px;
  background: #fff;
  display: flex;
  align-items: center;
}

.hall-search__icon {
  position: absolute;
  left: 10px;
  top: 10px;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.6' fill='none' stroke='%23b9b9be' stroke-width='2'/%3E%3Cpath d='M15.5 15.5L21 21' stroke='%23b9b9be' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hall-search__input {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
  color: #333;
  outline: none;
}

.hall-search__input::placeholder { color: #b0b0b5; }

.hall-publish {
  flex: 0 0 52px;
  width: 52px;
  margin-left: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

.hall-publish__icon {
  display: block;
  width: 15px;
  height: 15px;
  margin: 0 auto;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.5 2.5L2.5 10.2l7.6 3.1 3.2 7.7 8.2-18.5z' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M10.1 13.3l11.4-10.8' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
  background-size: 15px 15px;
}

.hall-publish__label {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 17px;
  white-space: nowrap;
}

.hall-filters {
  display: flex;
  align-items: center;
  height: 45px;
  padding-left: 17.5px;
  background: #fff;
}

.hall-filter-type {
  position: relative;
  width: 43px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
  line-height: 20px;
  color: #5f5f5f;
  cursor: pointer;
  text-align: left;
}

.hall-filter-type::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 8px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #9a9a9a;
}

.hall-divider {
  width: 1px;
  height: 35px;
  margin-left: 17.5px;
  background: #d7d7d7;
}

.hall-tabs {
  flex: 1;
  display: flex;
  height: 44px;
}

.hall-tab {
  position: relative;
  flex: 1;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
  line-height: 44px;
  color: #606266;
  cursor: pointer;
}

.hall-tab.is-active { color: #ff2c26; }

.hall-tab.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 50px;
  height: 3px;
  margin-left: -25px;
  border-radius: 2px;
  background: #ff4266;
}

.hall-empty {
  padding: 80px 20px;
  text-align: center;
  font-size: 14px;
  color: #999;
}

/* 大厅悬浮 */
/* 源站实测：button_daojishi right:15 bottom:180 55x52；button_wodejiedan right:20 bottom:100 50x50 */
.hall-float {
  z-index: 12;
}

.hall-float__timer {
  position: fixed;
  right: 15px;
  bottom: 180px;
  width: 55px;
  height: 52px;
  background: url("../img/site/im_im_daojishi.png") no-repeat center / 100% 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  font-size: 9px;
  line-height: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
  cursor: pointer;
}

.hall-float__todo {
  position: fixed;
  right: 20px;
  bottom: 100px;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  background: url("../img/site/im_im_wodejiedan.png") no-repeat center / 100% 100%;
  cursor: pointer;
}

/* ==========================================================================
   随视口缩放的尺寸（源站 uni-app 里真正写成 rpx 的那几处）
   --------------------------------------------------------------------------
   实测方法：源站 360 / 390 / 430 三档独立加载，逐属性对比 computed style，
   只有下面这些值会变，其余（头像 45、列表行高 72、tab 40/字号 16、tabbar 50
   等）在所有宽度下完全一致，都是写死的 px。因此不做全站 rpx 化。
   ========================================================================== */
.home-banner { height: calc(156 * var(--u)); }          /* 156/144/172 */
.home-nav__icon { width: calc(42 * var(--u)); height: calc(42 * var(--u)); } /* 42/39/47 */
.home-nav__label {
  margin-top: calc(5 * var(--u));                       /* 5/4/5 */
  font-size: calc(12 * var(--u));                       /* 12/11/13 */
}
.task-item__title { font-size: calc(14 * var(--u)); }    /* 14/13/16 */
.task-item__tag { padding: calc(2 * var(--u)) calc(4 * var(--u)); } /* 4→5 横向内边距 */

/* ---------------------------- 其他方式登录 弹层 ---------------------------- */
.oth-mask {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0, 0, 0, 0.5);
  animation: oth-fade 0.18s ease-out;
}
@keyframes oth-fade { from { opacity: 0; } to { opacity: 1; } }
.oth-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 12px 0 calc(16px + var(--safe-b));
  animation: oth-up 0.22s ease-out;
}
@keyframes oth-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.oth-sheet__title {
  padding: 0 15px;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  color: #000;
}
.oth-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 15px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.oth-item:active { background: #f7f7f9; }
.oth-item__ic {
  position: relative;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #000;
}
.oth-item__ic::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 7.5px;
  width: 7px;
  height: 6.5px;
  border-radius: 1.5px;
  background: #fff;
}
.oth-item__ic::after {
  content: "";
  position: absolute;
  left: 6.2px;
  top: 3px;
  width: 4.6px;
  height: 5.5px;
  border: 1.5px solid #fff;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}
.oth-item__t { font-size: 15px; line-height: 20px; color: #000; }
.oth-sheet__cancel {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 15px 4px;
  border: 0;
  border-top: 0.5px solid #ededf0;
  background: none;
  font-size: 15px;
  color: #666;
  cursor: pointer;
}

/* 账号密码登录（沿用登录页骨架） */
.login-mode--account { display: none; }
.login-page.is-account .login-mode--phone { display: none; }
.login-page.is-account form.login-mode--account { display: block; }
.login-page.is-account a.login-mode--account { display: inline-block; }
.login-page.is-account .login-help { margin-top: 9px; }
.login-pwd-eye {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -10px;
  width: 40px;
  height: 20px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.login-pwd-eye::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 5px;
  width: 16px;
  height: 10px;
  border: 1.5px solid #b9b9c0;
  border-radius: 50% / 60%;
}
.login-pwd-eye::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #b9b9c0;
}
.login-pwd-eye.is-on::before { border-color: #e1251b; }
.login-pwd-eye.is-on::after { background: #e1251b; }
.oth-mask[hidden] { display: none !important; }