/* =========================================================
   pages.css — 首页 / 钱包 / 任务 / 我的 / 搜索 等页面组件
   全部逻辑属性，RTL 优先
   ========================================================= */

/* ---------------- 首页赚币横幅 ---------------- */
.earn-banner {
  margin: 2px 14px 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 198, 92, .20), transparent 62%),
    linear-gradient(135deg, rgba(139, 61, 255, .28), rgba(255, 46, 116, .16));
  border: 1px solid rgba(255, 198, 92, .28);
  position: relative;
  overflow: hidden;
}
.earn-banner::after {
  content: '';
  position: absolute;
  inset-block-start: -40%;
  inset-inline-start: -30%;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 198, 92, .35), transparent 70%);
  animation: glowPulse 3.2s ease-in-out infinite;
}
@keyframes glowPulse { 50% { opacity: .45; transform: scale(1.15); } }
.eb-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.eb-ico {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 20px;
  color: #3a2500;
  background: var(--grad-gold);
  box-shadow: 0 8px 22px -10px rgba(255, 166, 61, .95);
  animation: coinBob 2.6s ease-in-out infinite;
}
@keyframes coinBob { 50% { transform: translateY(-3px) rotate(-6deg); } }
.eb-title { font-size: 13px; font-weight: 800; }
.eb-sub { font-size: 11px; color: rgba(246, 243, 250, .68); margin-top: 2px; }
.eb-right { text-align: center; flex: 0 0 auto; }
.eb-num { font-size: 18px; font-weight: 900; color: var(--gold); line-height: 1.1; }
.eb-cap { font-size: 10px; color: rgba(246, 243, 250, .55); margin-top: 2px; }

/* ---------------- 热门横滑 ---------------- */
.hero-row {
  display: flex;
  gap: 10px;
  padding: 0 14px 4px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.hero-row::-webkit-scrollbar { display: none; }
.hero-card {
  position: relative;
  flex: 0 0 auto;
  width: 148px;
  aspect-ratio: 3 / 4.15;
  border-radius: var(--r-md);
  overflow: hidden;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  background: var(--surface);
  transition: transform .2s;
}
.hero-card:active { transform: scale(.975); }
.hero-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s;
}
.hero-card img.loaded { opacity: 1; }
.hero-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 35%, rgba(8,6,14,.94) 100%);
}
.hero-card .rank-badge {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: 6px;
  z-index: 2;
  padding: 1px 7px;
  border-radius: 7px;
  background: var(--grad-brand);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  box-shadow: var(--glow-pink);
  direction: ltr;
}
.hero-card .hc-body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  padding: 8px 9px 9px;
}
.hc-name {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .9);
}
.hc-sub {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: rgba(246, 243, 250, .62);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.hc-sub .ic { color: var(--pink); }

.load-tip {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-mute);
}

/* ---------------- 钱包 ---------------- */
.bal-card {
  position: relative;
  margin: 14px;
  padding: 20px 18px 18px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(255, 198, 92, .22), transparent 58%),
    linear-gradient(140deg, #2a1a3f 0%, #16131F 62%);
  border: 1px solid rgba(255, 198, 92, .22);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.bal-card::after {
  content: '';
  position: absolute;
  inset-block-end: -60px;
  inset-inline-end: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 46, 116, .30), transparent 70%);
}
.bal-label { font-size: 12px; color: var(--text-dim); }
.bal-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
  font-size: 36px;
  font-weight: 900;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -.5px;
}
.bal-value .unit { font-size: 13px; font-weight: 700; color: rgba(255, 198, 92, .7); }
.bal-sub {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.bal-actions { margin-top: 16px; display: flex; gap: 10px; position: relative; z-index: 2; }
.bal-actions .btn { height: 42px; font-size: 13.5px; flex: 1; }

/* 钱包三格统计 */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}
.stat-row .st {
  padding: 13px 8px;
  text-align: center;
  border-inline-end: 1px solid var(--line);
}
.stat-row .st:last-child { border-inline-end: 0; }
.stat-row .st b {
  display: block;
  font-size: 16px;
  font-weight: 900;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.stat-row .st span { font-size: 10.5px; color: var(--text-mute); }

/* ---------------- 提现档位 ---------------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  padding: 0 14px;
}
.tier {
  position: relative;
  padding: 14px 6px 11px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1.5px solid var(--line);
  display: grid;
  justify-items: center;
  gap: 3px;
  transition: .18s;
}
.tier .amt {
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.tier .eq { font-size: 10px; color: var(--text-mute); font-variant-numeric: tabular-nums; direction: ltr; }
.tier.active {
  border-color: var(--gold);
  background: rgba(255, 198, 92, .09);
  box-shadow: 0 0 0 3px rgba(255, 198, 92, .10);
}
.tier.active .amt { color: var(--gold); }
.tier[disabled] { opacity: .42; }
.tier .lock { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; font-size: 11px; color: var(--text-mute); }
.tier .hot-tag {
  position: absolute;
  inset-block-start: -7px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 0 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 800;
  background: var(--grad-brand);
  color: #fff;
  white-space: nowrap;
}

/* ---------------- 表单 ---------------- */
.form { padding: 0 14px; display: grid; gap: 12px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.input {
  width: 100%;
  height: 48px;
  padding-inline: 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1.5px solid var(--line);
  color: var(--text);
  font-size: 14px;
  transition: border-color .18s, box-shadow .18s;
  font-family: inherit;
}
.input::placeholder { color: var(--text-mute); }
.input:focus {
  outline: 0;
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255, 46, 116, .14);
}
.pay-list { display: grid; gap: 8px; }
.pay-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1.5px solid var(--line);
  width: 100%;
  text-align: start;
  transition: .18s;
}
.pay-item .p-ico {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--surface-2);
  font-size: 16px;
}
.pay-item .p-name { font-size: 13.5px; font-weight: 700; flex: 1; }
.pay-item .radio {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: grid; place-items: center;
}
.pay-item.active { border-color: var(--pink); background: rgba(255, 46, 116, .07); }
.pay-item.active .radio { border-color: var(--pink); }
.pay-item.active .radio::after {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: var(--glow-pink);
}
.note { font-size: 11px; color: var(--text-mute); line-height: 1.7; padding: 0 16px; }
.fixed-bottom {
  position: sticky;
  bottom: 0;
  padding: 12px 14px calc(12px + var(--safe-b));
  background: linear-gradient(180deg, transparent, rgba(11, 10, 16, .96) 34%);
  z-index: 20;
}

/* ---------------- 签到 7 天 ---------------- */
.days {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 14px 4px;
}
.day {
  position: relative;
  padding: 11px 4px 9px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1.5px solid var(--line);
  display: grid;
  justify-items: center;
  gap: 3px;
}
.day .d-n { font-size: 10px; color: var(--text-mute); }
.day .d-coin {
  display: flex; align-items: center; gap: 2px;
  font-size: 12px; font-weight: 900; color: var(--gold);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.day.done { border-color: rgba(61, 220, 151, .45); background: rgba(61, 220, 151, .09); }
.day.done .d-coin { color: var(--green); }
.day.today { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 198, 92, .12); }
.day .d-check { font-size: 13px; color: var(--green); }

/* ---------------- 进度条 ---------------- */
.prog {
  height: 7px;
  border-radius: 7px;
  background: var(--surface-2);
  overflow: hidden;
}
.prog > i {
  display: block;
  height: 100%;
  border-radius: 7px;
  background: var(--grad-brand);
  transition: width .4s cubic-bezier(.2, .8, .3, 1);
}
.prog.gold > i { background: var(--grad-gold); }

/* ---------------- 任务卡 ---------------- */
.task-card {
  margin: 12px 14px;
  padding: 15px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.task-head { display: flex; align-items: center; gap: 11px; }
.task-head .ic-wrap {
  width: 40px; height: 40px;
  border-radius: 13px;
  display: grid; place-items: center;
  font-size: 19px;
  background: rgba(255, 46, 116, .12);
  color: var(--pink);
}
.task-card.gold .task-head .ic-wrap { background: rgba(255, 198, 92, .13); color: var(--gold); }
.task-card.green .task-head .ic-wrap { background: rgba(61, 220, 151, .12); color: var(--green); }
.task-head .t-body { flex: 1; min-width: 0; }
.task-head .t-title { font-size: 13.5px; font-weight: 800; }
.task-head .t-desc { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }
.task-body { margin-top: 13px; }
.task-foot {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--text-mute);
}
.task-foot .btn { height: 36px; font-size: 12.5px; padding-inline: 16px; margin-inline-start: auto; }

/* ---------------- 我的 ---------------- */
.me-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 18px 16px 14px;
}
.avatar {
  width: 58px; height: 58px;
  border-radius: 20px;
  display: grid; place-items: center;
  font-size: 24px;
  font-weight: 900;
  color: #fff;
  background: var(--grad-brand);
  box-shadow: var(--shadow-pop);
  flex: 0 0 auto;
}
.me-name { font-size: 16px; font-weight: 800; }
.me-id { font-size: 11px; color: var(--text-mute); margin-top: 3px; direction: ltr; }
.me-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 4px 14px 0;
  padding: 13px 0;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.me-stats .st { text-align: center; }
.me-stats .st b { display: block; font-size: 15px; font-weight: 900; }
.me-stats .st span { font-size: 10.5px; color: var(--text-mute); }

/* ---------------- 搜索 ---------------- */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 6px;
}
.search-bar .sb-input {
  flex: 1;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 13px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1.5px solid var(--line);
  transition: border-color .18s;
}
.search-bar .sb-input:focus-within { border-color: var(--pink); }
.search-bar .sb-input .ic { color: var(--text-mute); font-size: 17px; }
.search-bar input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: 0;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text);
}
.search-bar .sb-clear { color: var(--text-mute); font-size: 15px; }

/* ---------------- 横向视频行 ---------------- */
.h-list { padding: 0 14px; display: grid; gap: 9px; }
.h-item {
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .18s;
}
.h-item:hover { border-color: var(--line-strong); }
.h-item .h-thumb {
  position: relative;
  width: 74px;
  aspect-ratio: 3 / 4;
  border-radius: 9px;
  overflow: hidden;
  flex: 0 0 auto;
  background: var(--surface-2);
}
.h-item .h-thumb img { width: 100%; height: 100%; object-fit: cover; }
.h-item .h-thumb .prog-mini {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 3px;
  background: rgba(0, 0, 0, .55);
}
.h-item .h-thumb .prog-mini i { display: block; height: 100%; background: var(--pink); }
.h-item .h-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-block: 2px; }
.h-item .h-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.h-item .h-sub {
  font-size: 10.5px;
  color: var(--text-mute);
  display: flex;
  align-items: center;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}
.h-item .h-actions { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }

/* ---------------- 记录表 ---------------- */
.rec-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
}
.rec-item:last-child { border-bottom: 0; }
.rec-item .r-body { flex: 1; min-width: 0; }
.rec-item .r-amt { font-size: 15px; font-weight: 900; color: var(--gold); direction: ltr; font-variant-numeric: tabular-nums; }
.rec-item .r-meta { font-size: 11px; color: var(--text-mute); margin-top: 3px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}
.badge.wait { background: rgba(255, 198, 92, .14); color: var(--gold); }
.badge.ok { background: rgba(61, 220, 151, .13); color: var(--green); }
.badge.fail { background: rgba(255, 46, 116, .14); color: var(--pink); }
.spin {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- 详情 / 评论 sheet ---------------- */
.cmt-item { display: flex; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--line); }
.cmt-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
  background: var(--surface-2);
  color: var(--text-dim);
}
.cmt-body { flex: 1; min-width: 0; }
.cmt-name { font-size: 11.5px; color: var(--text-dim); font-weight: 700; }
.cmt-text { font-size: 12.5px; line-height: 1.6; margin-top: 3px; word-break: break-word; }
.cmt-meta { font-size: 10.5px; color: var(--text-mute); margin-top: 5px; display: flex; gap: 10px; }

@keyframes popIn { from { opacity: 0; transform: scale(.9); } }

/* ---------------- 语言 / 品牌页 ---------------- */.brand-hero {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 30px 20px 10px;
  text-align: center;
}
.brand-hero .logo {
  width: 64px; height: 64px;
  border-radius: 22px;
  background: var(--grad-brand);
  box-shadow: var(--shadow-pop);
  display: grid; place-items: center;
  font-size: 30px; color: #fff;
}
.brand-hero h1 { font-size: 20px; font-weight: 900; letter-spacing: .3px; }
.brand-hero p { font-size: 12px; color: var(--text-mute); }