/* ===== 主题变量（默认黑夜模式） ===== */
:root {
  color-scheme: dark;
  --bg: #000;
  --text: #eaeaea;
  --text-muted: #9b9b9b;
  --btn-bg: #1f1f1f;
  --btn-border: #333;
  --btn-hover: #2a2a2a;
  --menu-bg: #1a1a1a;
  --menu-border: #2e2e2e;
  --active: #2a2a2a;
  --shadow: rgba(0, 0, 0, 0.4);
  /* 登录卡片（配色取自 mikoro.top） */
  --accent: #ff0080;
  --accent-login: #00f2ea;
  --auth-card: #1a1a20;
  --auth-border: transparent;
  --auth-band: transparent;
  --auth-input: #22222b;
  --auth-muted: #5f6673;
  --auth-error: #ff4444;
  --auth-glow: rgba(255, 0, 128, 0.47);
  --auth-glow-login: rgba(0, 242, 234, 0.47);
  /* 底部导航栏 */
  --tabbar-bg: #141419;
  --tabbar-border: rgba(255, 255, 255, 0.08);
  --tabbar-muted: #8a8a92;
  --tabbar-active: #00f2ea;
  /* 条幅表面遮罩深浅（0~1，越大越深，想调深浅只改这一处） */
  --banner-shade: rgba(0, 0, 0, 0.25);
}

html[data-theme='light'] {
  color-scheme: light;
  --bg: #f2f3f5;
  --text: #1a1a1a;
  --text-muted: #666;
  --btn-bg: #ffffff;
  --btn-border: #d9dbdf;
  --btn-hover: #f0f1f3;
  --menu-bg: #ffffff;
  --menu-border: #e0e0e0;
  --active: #ececee;
  --shadow: rgba(0, 0, 0, 0.12);
  /* 登录卡片（配色取自 mikoro.top） */
  --accent: #ff0080;
  --accent-login: #00f2ea;
  --auth-card: #ffffff;
  --auth-border: #e6e8ee;
  --auth-band: transparent;
  --auth-input: #f2f3f5;
  --auth-muted: #8a8a92;
  --auth-error: #e0216d;
  --auth-glow: rgba(255, 0, 128, 0.4);
  --auth-glow-login: rgba(0, 242, 234, 0.4);
  /* 底部导航栏 */
  --tabbar-bg: #ffffff;
  --tabbar-border: #e6e8ee;
  --tabbar-muted: #8a8a92;
  --tabbar-active: #0891a3;
}

/* ===== 全局基础样式 ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  /* 不设 min-height:100vh——手机 Safari 的 100vh 是"地址栏收起"的高度，
     比可见高度大，会把文档强撑出一截纯黑可滚动区域；body 背景本身就能铺满视口 */

}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  transition: background 0.2s ease, color 0.2s ease;
}

button {
  font-family: inherit;
}

/* ===== 顶部栏 ===== */
.top-bar {
  position: relative; /* 语言下拉菜单要在所有卡片框的上面 */
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 20px;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* ===== 登录 / 注册卡片 ===== */
.auth-card {
  width: 100%;
  background: var(--auth-card);
  border: 1px solid var(--auth-border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.auth-tabs {
  display: flex;
  margin-bottom: 14px;
}

.auth-body {
  padding: 0;
}

.auth-tab {
  flex: 1;
  height: 46px;
  background: none;
  border: none;
  color: var(--auth-muted);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  position: relative;
}

.auth-tab.active {
  color: var(--text);
  font-weight: 600;
}

/* 登录标签：青色下划线；注册标签：玫红下划线（mikoro.top 同款） */
.auth-tab.active[data-tab='login']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: #00f2ea;
  box-shadow: 0 0 10px #00f2ea;
}

.auth-tab.active[data-tab='register']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: #ff0080;
  box-shadow: 0 0 10px #ff0080;
}

.auth-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--auth-input);
  border-radius: 12px;
  height: 48px;
  padding: 0 14px;
  margin-bottom: 12px;
  transition: background 0.2s ease;
}

.auth-field svg {
  width: 18px;
  height: 18px;
  color: var(--auth-muted);
  flex-shrink: 0;
}

.auth-field input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}

/* 手机端：输入框字号提到 16px，安卓/iOS 聚焦时不再自动放大页面（<16px 会触发浏览器自动缩放） */
@media (max-width: 768px) {
  .auth-field input,
  #u-chat-text,
  #rc-account-addr,
  #rc-bank-name,
  #rc-bank-card,
  #wd-address,
  #uc-old-pwd,
  #uc-new-pwd,
  #uc-confirm-pwd {
    font-size: 16px;
  }
}

.auth-field input::placeholder {
  color: var(--auth-muted);
}

.auth-error {
  color: var(--auth-error);
  font-size: 12.5px;
  margin: -2px 0 10px;
}

.auth-error[hidden] {
  display: none;
}

.auth-error.auth-success {
  color: #22c55e;
}

.auth-btn {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #000;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 0 14px var(--auth-glow);
  transition: filter 0.15s ease;
}

.auth-btn:hover {
  filter: brightness(1.1);
}

.auth-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* 登录按钮：青色（mikoro.top 同款） */
.auth-btn.btn-login {
  background: var(--accent-login);
  box-shadow: 0 0 14px var(--auth-glow-login);
}

.auth-online {
  text-align: center;
  margin-top: 6px;
  padding: 0 0 2px;
  font-size: 12.5px;
  color: var(--auth-muted);
}

.auth-online span {
  color: #ff3355;
  font-weight: 700;
}

/* 已登录状态 */
.logged-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.logged-box[hidden] {
  display: none;
}

.logged-hello {
  font-size: 18px;
  color: var(--text);
}

.logged-hello b {
  color: var(--accent);
}

.logout-btn {
  height: 40px;
  padding: 0 28px;
  border-radius: 999px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
}

.logout-btn:hover {
  background: var(--btn-hover);
}

/* 标语 */
.slogan {
  color: var(--auth-muted);
  font-size: 13px;
  letter-spacing: 2px;
  text-align: center;
}

/* 登录后的空白用户页（跟随黑夜/白天主题） */
#user-page {
  /* 不再 min-height:100vh：外壳被强撑到整屏会在内容下方多出一截黑边；
     背景色由 body 兜底，高度随内容走 */
  background: var(--bg);
}

#user-content {
  padding-bottom: 0;
}

/* ===== 底部导航栏 ===== */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 62px;
  background: var(--tabbar-bg);
  border-top: 1px solid var(--tabbar-border);
  display: flex;
  justify-content: center;
  z-index: 50;
}

.tabbar-item {
  flex: 1;
  max-width: 110px;
  background: none;
  border: none;
  color: var(--tabbar-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  padding-top: 6px;
  user-select: none;
}

.tabbar-item svg {
  width: 22px;
  height: 22px;
}

.tabbar-item.active {
  color: var(--tabbar-active);
}

/* 底部导航未读红点 */
.tabbar-badge {
  background: #ff3355;
  color: #fff;
  font-size: 10.5px;
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
  line-height: 16px;
  display: inline-block;
}

.tabbar-badge[hidden] {
  display: none;
}

/* 中间的"开始"大圆钮 */
.tabbar-center {
  position: relative;
}

.tabbar-center-btn {
  width: 50px;
  height: 50px;
  margin-top: -30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00f2ea, #00b3d6);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(0, 242, 234, 0.45);
  border: 4px solid var(--tabbar-bg);
}

.tabbar-center-btn svg {
  width: 22px;
  height: 22px;
}

/* ===== 用户页左上角：动态头像 + 问候 ===== */
.user-badge {
  margin-top: -46px; /* 上移，和右上角切换按钮同一水平线 */
  padding: 0 14px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-badge-ring {
  width: 42px;
  height: 42px;
  padding: 2px;
  border-radius: 50%;
  background: conic-gradient(#00f2ea, #ff0080, #ffb800, #00f2ea);
}

@keyframes badge-breath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.user-badge-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--auth-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 动画头像：小黄脸，轻轻浮动 + 眨眼（光圈保持静止） */
.avatar-anim svg {
  width: 100%;
  height: 100%;
  animation: av-bob 2.6s ease-in-out infinite;
}

.avatar-anim .av-eyes {
  animation: av-blink 3.6s infinite;
}

@keyframes av-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(1.5px); }
}

@keyframes av-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.08); }
}

.user-badge-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-badge-hello {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}

.user-badge-id {
  font-size: 11.5px;
  color: var(--auth-muted);
  letter-spacing: 0.5px;
}

/* ===== 用户页：客服聊天（锁定一屏，只有消息区滚动） ===== */
.chat-page {
  height: calc(100vh - 62px); /* 老浏览器回退 */
  height: calc(100dvh - 62px); /* 手机浏览器动态可视高度：地址栏出现时也能一屏装下，输入框直接可见 */
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 0 0 62px;
  overflow: hidden;
}

.chat-page[hidden] {
  display: none;
}

.chat-box {
  width: 100%;
  flex: 1;
  background: var(--auth-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-head {
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--auth-border);
  flex-shrink: 0;
}

.chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-hint {
  text-align: center;
  color: var(--auth-muted);
  font-size: 12.5px;
  padding: 6px 0 14px;
}

.msg {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}

.msg .msg-time {
  display: block;
  font-size: 10.5px;
  opacity: 0.55;
  margin-top: 4px;
}

/* 我发的（右侧，青色） */
.msg.me {
  align-self: flex-end;
  background: #00c2d6;
  color: #001318;
  border-bottom-right-radius: 4px;
}

/* 对方发的（左侧） */
.msg.them {
  align-self: flex-start;
  background: var(--auth-input);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.chat-input {
  display: flex;
  gap: 10px;
  padding: 12px 14px 4px; /* 底部只留一条线的距离，输入框紧贴导航栏 */
  border-top: 1px solid var(--auth-border);
  flex-shrink: 0;
}

.chat-input input {
  flex: 1;
  height: 40px;
  padding: 0 14px;
  border: none;
  border-radius: 10px;
  background: var(--auth-input);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}

.chat-input button {
  height: 40px;
  padding: 0 20px;
  border: none;
  border-radius: 10px;
  background: #00c2d6;
  color: #001318;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.chat-input button:hover {
  filter: brightness(1.08);
}

/* ===== 手机自适应 ===== */
@media (max-width: 480px) {
  .top-bar {
    padding: 12px 14px;
  }

  .icon-btn {
    height: 36px;
    width: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 50%;
  }

  /* 手机上语言按钮压缩内边距，宽度随语言文字自适应 */
  .lang-btn {
    height: 36px;
    min-width: 36px;
    padding: 0 10px;
    font-size: 12px;
    gap: 5px;
  }

  .lang-btn svg {
    width: 15px;
    height: 15px;
  }
}

.top-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ===== 按钮（胶囊形） ===== */
.icon-btn,
.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  min-width: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.icon-btn {
  padding: 0;
  width: 40px;
}

.icon-btn:hover,
.lang-btn:hover {
  background: var(--btn-hover);
}

/* 黑夜模式显示太阳图标，白天模式显示月亮图标 */
html[data-theme='dark'] .icon-moon {
  display: none;
}

html[data-theme='light'] .icon-sun {
  display: none;
}

/* ===== 登录页背景：动态流星+星尘（仅登录界面可见，登录后随 page-center 一起隐藏） ===== */
.page-center { position: relative; }
.page-center > *:not(.meteor-bg) { position: relative; z-index: 1; }
.meteor-bg {
  position: fixed;
  inset: 0;
  pointer-events: none; /* 纯装饰，不挡任何点击 */
  z-index: 0;
  opacity: .8;
}
.m-tw1 { animation: m-tw 2.6s ease-in-out infinite; }
.m-tw2 { animation: m-tw 3.2s ease-in-out .6s infinite; }
.m-tw3 { animation: m-tw 2.9s ease-in-out 1.2s infinite; }
@keyframes m-tw { 0%,100% { opacity: .3 } 50% { opacity: 1 } }
.m-comet { animation: m-comet 4.6s linear infinite; }
@keyframes m-comet {
  0% { transform: translate(0, 0); opacity: 0; }
  6% { opacity: 1; }
  40% { transform: translate(-56px, 46px); opacity: 1; }
  48% { transform: translate(-64px, 52px); opacity: 0; }
  100% { transform: translate(-64px, 52px); opacity: 0; }
}
.m-comet-b { animation: m-comet-b 5.8s linear 1.6s infinite; }
@keyframes m-comet-b {
  0% { transform: translate(0, 0); opacity: 0; }
  6% { opacity: 1; }
  40% { transform: translate(-52px, 46px); opacity: 1; }
  48% { transform: translate(-60px, 54px); opacity: 0; }
  100% { transform: translate(-60px, 54px); opacity: 0; }
}

/* ===== 页面居中区域 ===== */
.page-center {
  min-height: calc(100vh - 104px); /* 老浏览器回退 */
  min-height: calc(100dvh - 104px); /* 手机动态可视高度：地址栏出现时卡片也不会被顶下去 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  gap: 18px;
}

/* ===== 条幅下方显示框（与条幅同尺寸） ===== */
.home-box {
  width: calc(100% - 28px);
  margin: 28px 14px 21px;
  height: auto; /* 高度随内容自适应，底边贴住三个小框 */
  border-radius: 12px;
  background: var(--auth-card);
  border: 1px solid var(--auth-border);
  display: flex;
  flex-direction: column;
}
.home-box[hidden] { display: none; }

/* 我的页面：总资产框放到头像下面（用户要求：头像和卡片间距加大，整体下移） */
#page-mine .home-box:not(.mine-big-box) { margin-top: 28px; margin-bottom: 0; position: relative; overflow: hidden; isolation: isolate; }
/* 资金明细入口处：半圆透明粉红装饰（罩在内容/按钮上面，可点击不受影响） */
#page-mine .home-box:not(.mine-big-box)::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255, 130, 165, 0.12);
  top: -110px;
  right: -50px;
  pointer-events: none;
}
/* RTL（阿拉伯/波斯/乌尔都）：半圆装饰镜像到左上角 */
html[dir='rtl'] #page-mine .home-box:not(.mine-big-box)::before {
  right: auto;
  left: -50px;
}
#page-mine .asset-sub-row { margin-bottom: 24px; }

/* 框右上角：资金明细入口 */
.asset-more {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: #00f2ea;
  text-decoration: none;
  cursor: pointer;
}
.asset-more[hidden] { display: none; }
.asset-more svg { width: 13px; height: 13px; }
.asset-more:hover { color: #ff4444; }
/* RTL：资金明细入口镜像到左上角，箭头同步反向 */
html[dir='rtl'] .asset-more {
  right: auto;
  left: 16px;
}
html[dir='rtl'] .asset-more svg {
  transform: scaleX(-1);
}

/* 我的页面：横线 + 充值/提现按钮 */
.asset-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 16px;
}
html[data-theme='light'] .asset-divider { background: #e6e8ee; }

.asset-btns {
  display: flex;
  gap: 12px;
  margin: 28px 14px 16px;
}
.asset-btns[hidden] { display: none; }

.btn-recharge {
  flex: 1;
  height: 42px;
  border: none;
  border-radius: 10px;
  background: #ffffff;
  color: #10131a;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: normal;
  cursor: pointer;
}
html[data-theme='light'] .btn-recharge { border: 1px solid #d9dbdf; }
.btn-recharge:hover { background: #eef1f6; }

.btn-withdraw {
  flex: 1;
  height: 42px;
  border: none;
  border-radius: 10px;
  background: var(--auth-input); /* 与客服对方消息气泡同底色 */
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: normal;
  cursor: pointer;
}
.btn-withdraw:hover { filter: brightness(1.18); }

/* 我的页面：下方大框（高度约为上方资产框的两倍） */
.mine-big-box {
  height: auto; /* 高度随内容自适应 */
  margin-top: 28px;
}
/* 我的页面底部留白：拉到底时大框底边完整露出在导航栏上方 */
#page-mine { padding-bottom: 62px; } /* 只留底部导航栏的高度，不再多出黑边 */

/* 我的页面大框功能列表 */
.mine-menu {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}
.mine-menu[hidden] { display: none; }

.mine-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: none;
  background: none;
  color: var(--text);
  font-size: 15px;
  font-weight: 400;
  font-family: inherit;
  padding: 18px 16px;
  cursor: pointer;
  text-align: left;
}
.mine-menu-item[hidden] { display: none; }
.mine-menu-item + .mine-menu-item { border-top: 1px solid rgba(255, 255, 255, 0.06); }
html[data-theme='light'] .mine-menu-item + .mine-menu-item { border-top-color: #eef0f5; }
.mine-menu-item > svg:first-child {
  width: 18px;
  height: 18px;
  color: #00f2ea;
  flex-shrink: 0;
}
html[data-theme='light'] .mine-menu-item > svg:first-child { color: #0891a3; }
.mine-menu-item:hover { background: rgba(255, 255, 255, 0.03); }
html[data-theme='light'] .mine-menu-item:hover { background: rgba(0, 0, 0, 0.025); }
.mmi-chevron {
  margin-left: auto;
  width: 14px;
  height: 14px;
  color: #7a8494;
  flex-shrink: 0;
}

/* 退出登录：红色 */
.mine-menu-item#mm-logout { color: #ff4444; }
.mine-menu-item#mm-logout > svg:first-child { color: #ff4444; }

/* 各菜单图标颜色（按用户参考图） */
.mine-menu-item#mm-recharge-records > svg:first-child { color: #FF4D8F; } /* 充值记录：粉红 */
.mine-menu-item#mm-withdraw-records > svg:first-child { color: #FF9F3D; } /* 提现记录：橙 */
.mine-menu-item#mm-invite > svg:first-child { color: #3DDC6A; }           /* 邀请好友：绿 */
.mine-menu-item#mm-security > svg:first-child { color: #9C5BFF; }         /* 安全中心：紫 */

/* ===== 充值界面（全屏黑色） ===== */
#recharge-page, #withdraw-page, #urecords-recharge-page, #urecords-withdraw-page {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  flex-direction: column;
}
#recharge-page[hidden], #withdraw-page[hidden], #urecords-recharge-page[hidden], #urecords-withdraw-page[hidden] { display: none; }

.rc-top {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 18px 18px 0;
}
.rc-top[hidden] { display: none; }

.rc-title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
}

.rc-back {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-back[hidden] { display: none; }
.rc-back svg { width: 16px; height: 16px; }

.rc-body {
  flex: 1;
  padding: 36px 14px 48px; /* 底部多留，确认按钮不会被挡住 */
  color: var(--text);
  overflow-y: auto; /* 内容超出时上下滚动（只有这一条拉条，底层页面已锁住） */
}

/* 充值界面的框（和条幅一样大小） */
.rc-box {
  width: 100%;
  height: clamp(110px, 11vw, 200px);
  border-radius: 12px;
  background: #1a1a20;
  margin-bottom: 14px;
}
.rc-box[hidden] { display: none; }

/* 充值金额框（第二个框）：高度随内容自适应，底边不留多余空白 */
.rc-amount-box {
  height: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.rc-amount-box[hidden] { display: none; }

.rc-amount-label {
  font-size: 15px;
  color: #aab0bc; /* 和"总资产"一致 */
}

.rc-amount-input {
  width: 100%;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: #22222b;
  color: #fff;
  font-size: 16px;
  padding: 0 12px;
  font-family: inherit;
  outline: none;
}
.rc-amount-input:focus {
  border-color: rgba(255, 255, 255, 0.12); /* 聚焦不变色 */
}

.rc-amount-hint {
  font-size: 12.5px;
  color: #aab0bc; /* 和"昨日收益"一致 */
}

/* 充值方式（第一个框）：六个可选项，3列2行 */
.rc-pay-box {
  padding: 16px;
  display: flex;
  align-items: center;
}
.rc-pay-box[hidden] { display: none; }

.rc-pay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}
.rc-pay-grid[hidden] { display: none; }

.rc-pay-item {
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: #22222b;
  color: #aab0bc;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.rc-pay-item.active {
  border-color: #00f2ea;
  color: #00f2ea;
  background: rgba(0, 242, 234, 0.08);
}

/* 收款账户信息（第三个框）：高度随内容自适应，装下二维码 */
.rc-account-box {
  height: auto;
  min-height: clamp(110px, 11vw, 200px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.rc-account-box[hidden] { display: none; }

.rc-account-title {
  font-size: 15px;
  color: #aab0bc;
}

.rc-account-body {
  width: 100%;
  flex: 1;
}

/* 二维码位置：居中的方框，有地址时自动生成二维码 */
.rc-account-qr {
  width: 160px;
  height: 160px;
  margin: 6px auto;
  flex-shrink: 0;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rc-account-qr[hidden] { display: none; }
.rc-account-qr.has-qr {
  border: none;
  background: #fff;
}
.rc-account-qr img,
.rc-account-qr canvas {
  width: 100% !important;
  height: 100% !important;
}

/* 上传凭证（第四个框）：居中云朵图标 + 文字 */
.rc-upload-box {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rc-upload-box[hidden] { display: none; }

.rc-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #8a93a6;
  cursor: pointer;
}
.rc-upload svg {
  width: 44px;
  height: 44px;
}
.rc-upload span {
  font-size: 15px;
}
.rc-upload:hover {
  color: #00f2ea;
}

/* 充值提交按钮：和首页开始按钮同款尺寸，高亮青色 */
.rc-submit-btn {
  width: 100%;
  height: 52px;
  border: none;
  border-radius: 12px;
  background: #00f2ea;
  color: #001318;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.rc-submit-btn:hover {
  filter: brightness(1.08);
}

/* 透明提示弹窗：居中，2秒自动消失 */
.toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  z-index: 500;
  max-width: 80vw;
  text-align: center;
  pointer-events: none;
}
.toast[hidden] { display: none; }

/* 用户充值/提现记录列表 */
.urec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1a1a20;
  border-radius: 10px;
  padding: 17px 18px;
  margin-bottom: 12px;
}
.urec-row[hidden] { display: none; }
.urec-left {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap; /* 方式+提现金额+金额保持一行 */
}
.urec-left[hidden] { display: none; }
.urec-wallet {
  width: 20px;
  height: 20px;
  color: #3b82f6; /* 蓝色钱包图标 */
  flex-shrink: 0;
}
.urec-label {
  color: #aab0bc;
  font-size: 16px;
}
.urec-amt {
  color: #00f2ea;
  font-size: 18px;
  font-weight: 700;
}
.urec-status {
  color: #f5a623;
  font-size: 15px;
}
.urec-status.ok {
  color: #22c55e;
}
.urec-status.reject {
  color: #ff4444;
}

/* 拒绝原因：状态下面"查看原因"按钮，点开显示内容 */
.urec-status-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  max-width: 45%;
  text-align: right;
  flex-shrink: 0;
}
.urec-status-col[hidden] { display: none; }
.urec-view-reason {
  border: 1px solid rgba(255, 90, 90, 0.5);
  background: none;
  color: #ff5a5a;
  font-size: 12px;
  font-family: inherit;
  border-radius: 999px;
  padding: 2px 10px;
  cursor: pointer;
}
.urec-view-reason:hover {
  background: rgba(255, 90, 90, 0.1);
}
.urec-reason {
  font-size: 13px;
  color: #ff5a5a;
  line-height: 1.35;
  word-break: break-all;
}

.uc-modal-mask.reason-small .uc-modal {
  max-width: 300px;
  padding: 16px 16px 18px;
}
.uc-modal-mask.reason-small .uc-reason-text {
  padding: 12px;
  font-size: 13.5px;
  margin-bottom: 14px;
}
.uc-modal-mask.reason-small .uc-confirm-btn {
  height: 42px;
  font-size: 14px;
}

/* 拒绝原因弹窗内容 */
.uc-reason-text {
  background: #22222b;
  border-radius: 10px;
  padding: 16px 14px;
  color: #ff5a5a;
  font-size: 14.5px;
  line-height: 1.5;
  word-break: break-all;
  margin-bottom: 18px;
}
.urec-empty {
  text-align: center;
  color: #8a93a6;
  font-size: 14px;
  padding: 40px 0;
}

/* 凭证预览：选图后显示在框里 */
.rc-upload img.rc-proof-preview {
  max-width: 100%;
  max-height: 140px;
  border-radius: 8px;
  object-fit: contain;
}
.rc-account-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rc-account-row {
  display: flex;
  gap: 10px;
  width: 100%;
  align-items: center;
}
.rc-account-row[hidden] { display: none; }

/* 收款账户输入框：只读，内容来自后台 */
.rc-account-input {
  flex: 1;
  min-width: 0;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: #22222b;
  color: #00f2ea;
  font-size: 14px;
  padding: 0 12px;
  font-family: inherit;
  outline: none;
}

/* 锁定的地址框（后台收款地址 / 已绑定提现地址）：完全不可交互，点了没反应，只留旁边的复制按钮 */
input[data-lock='1'] {
  pointer-events: none;
}

.rc-copy-icon {
  width: 46px;
  height: 46px;
  border: none;
  background: none;
  color: #00f2ea;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  font-family: inherit;
}
.rc-copy-icon svg {
  width: 22px;
  height: 22px;
}
.rc-copy-icon:hover {
  color: #fff;
}
.rc-copy-icon.copied {
  color: #22c55e;
}

/* 总资产框内三个并排小框 */
.asset-sub-row {
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
  margin: 0 14px 12px;
}
.asset-sub-row[hidden] { display: none; }

.asset-sub-box {
  flex: 1;
  border-radius: 8px;
  background: #262633;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}
.asset-sub-box[hidden] { display: none; }
[data-theme='light'] .asset-sub-box {
  background: #eceff5;
  border-color: #dde1ea;
}

.asb-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  line-height: 1;
  color: #aab0bc;
}

.asb-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
  flex-shrink: 0;
}
.asb-dot-blue {
  background: #3B82F6;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.8);
}

.asb-value {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  font-family: inherit; /* 和总资产一致，0 不带斜杠 */
  letter-spacing: 0.5px;
  line-height: 1.2;
  margin-left: 12px; /* 与圆点后面的文字左边缘对齐 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme='light'] .asb-value { color: #1f2430; }

/* ===== 开始按钮（高度为条幅的一半） ===== */
.home-start-btn {
  width: calc(100% - 28px);
  margin: 0 14px;
  height: clamp(55px, 5.5vw, 100px);
  border: none;
  border-radius: 12px;
  background: linear-gradient(90deg, #00b3d6 0%, #c40262 50%, #00b3d6 100%);
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
  font-family: inherit;
  letter-spacing: normal;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  box-shadow: 0 0 18px rgba(0, 242, 234, 0.25);
  transition: none;
}

.home-start-btn:hover {
  filter: none;
}

.home-start-btn .hsb-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
}
.home-start-btn .hsb-lines b {
  text-transform: uppercase;
  letter-spacing: normal;
}

.home-start-btn .hsb-lines b {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 700;
  padding-left: 4px; /* 抵消"开始"字距在末尾多出的空隙，保证视觉居中 */
}

.home-start-btn .hsb-lines b svg {
  width: clamp(20px, 2vw, 26px);
  height: clamp(20px, 2vw, 26px);
  flex-shrink: 0;
}

.home-start-btn .hsb-lines i {
  font-style: normal;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: normal;
  opacity: 0.75;
}

.home-start-btn svg {
  width: 26px;
  height: 26px;
}

/* ===== 开始按钮下方栏框（比条幅稍高） ===== */
.home-box2 {
  width: calc(100% - 28px);
  margin: 21px 14px 14px;
  height: clamp(150px, 13vw, 240px); /* 固定高度，飘动时框不变化 */
  border-radius: 12px;
  background: var(--auth-card);
  border: 1px solid var(--auth-border);
  overflow: hidden;
}

/* ===== 在线用户行 ===== */
.online-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px 4px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

html[data-theme='light'] .online-row {
  color: var(--text);
}

.online-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
  flex-shrink: 0;
}

/* ===== 动态行（连续上浮的漂浮动画） ===== */
#feed-list {
  overflow: hidden;
  height: calc(100% - 38px);
}

.feed-track {
  animation: feed-float 30s linear infinite;
}

@keyframes feed-float {
  to { transform: translateY(-50%); }
}

.feed-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
}

.feed-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feed-avatar svg {
  width: 100%;
  height: 100%;
}

.feed-text {
  font-size: 15px;
  color: #aab0bc;
}

html[data-theme='light'] .feed-text {
  color: #5a6270;
}

/* 收益数字：亮青色；"收益"两字：与用户名同款暗色 */
.feed-gain {
  margin-left: auto;
  font-size: 12.5px;
  color: #aab0bc;
}

.feed-gain b {
  color: #00f2ea;
  font-weight: 700;
  font-size: 19px;
  font-family: Consolas, Monaco, monospace;
  margin-right: 5px;
}

html[data-theme='light'] .feed-gain {
  color: #5a6270;
}

html[data-theme='light'] .feed-gain b {
  color: #0098a8;
}

/* ===== 总资产 ===== */
.asset-block {
  padding: 12px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.asset-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  color: #aab0bc;
}

.asset-label svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

html[data-theme='light'] .asset-label {
  color: #5a6270;
}

.asset-value {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  font-family: inherit; /* 数字字体和充值记录一致，0 不带斜杠 */
  letter-spacing: 1px;
}

html[data-theme='light'] .asset-value {
  color: #1f2430;
}

/* VIP等级（子账户开启VIP功能后，左上角资料区ID下面显示） */
.user-badge-vip {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #f5c451;
  background: rgba(245, 196, 81, 0.12);
  border: 1px solid rgba(245, 196, 81, 0.35);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.user-badge-vip[hidden] { display: none; }

/* ===== 首页标签页 ===== */
.home-page {
  /* 不设 min-height：高度随内容走，底部不再被 100vh 撑出黑边（导航栏高度由 padding-bottom 预留） */
  padding-top: 0;
  padding-bottom: 62px; /* 只留底部导航栏的高度，不再多出黑边 */
}

.home-page[hidden] {
  display: none;
}

/* ===== 公告栏 ===== */
.notice-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 28px);
  margin: 0 14px 12px;
  height: 40px;
  border-radius: 10px;
  background: var(--auth-card);
  border: 1px solid var(--auth-border);
  padding: 0 14px;
  overflow: hidden;
}

.notice-bar svg {
  width: 16px;
  height: 16px;
  color: #ffb800;
  flex-shrink: 0;
}

.notice-label {
  font-size: 13px;
  font-weight: 600;
  color: #ffb800;
  flex-shrink: 0;
}

.notice-scroll {
  flex: 1;
  overflow: hidden;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* 跑马灯：两份相同文案首尾相接，向左无缝循环（从右往左流动） */
.notice-track {
  display: inline-flex;
  flex-shrink: 0;
  animation: notice-marquee 16s linear infinite;
}
@keyframes notice-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* RTL 阅读方向相反：流水改为从左往右 */
html[dir='rtl'] .notice-track {
  animation-direction: reverse;
}

.notice-text {
  flex-shrink: 0;
  white-space: nowrap;
  padding-right: 56px; /* 两份文案之间的间隔 */
  font-size: 13.5px;
  color: var(--text);
}

/* ===== 首页条幅（近通栏，留小边距，高度自适应，自动轮播） ===== */
.guest-banner {
  width: calc(100% - 28px);
  margin: 0 14px;
  height: clamp(110px, 11vw, 200px);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.guest-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.guest-banner img.show {
  opacity: 1;
}

.banner-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 2;
}

.banner-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background 0.3s ease, transform 0.3s ease;
}

.banner-dots .dot.active {
  background: #fff;
  transform: scale(1.25);
}

/* ===== 条幅表面遮罩：图片/视频上叠一层半透明深色，柔和不刺眼 ===== */
/* 深浅调 :root 里的 --banner-shade；pointer-events:none 不挡点击，圆点 z-index:2 在遮罩之上 */
.guest-banner::after,
.start-banner::after,
.start-task-banner:has(#tb-matching-img:not([hidden]))::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--banner-shade);
  z-index: 1;
  pointer-events: none;
}

.center-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 360px;
}

/* 屏幕较矮时收紧布局，保证一屏放下 */
@media (max-height: 800px) {
  .avatar {
    width: 88px;
    height: 88px;
  }

  .avatar svg {
    width: 44px;
    height: 44px;
  }

  .center-col {
    gap: 14px;
  }

  .auth-tab {
    height: 46px;
    font-size: 14px;
  }

  .auth-body {
    padding: 12px 20px 6px;
  }

  .auth-field {
    height: 44px;
    margin-bottom: 10px;
    border-radius: 11px;
  }

  .auth-btn {
    height: 44px;
  }

  .auth-online {
    margin-top: 10px;
    padding: 9px 0 11px;
  }
}

/* ===== 头像 ===== */
.avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.avatar svg {
  width: 56px;
  height: 56px;
}

/* ===== 语言下拉菜单 ===== */
.lang-wrap {
  position: relative;
}

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 6px;
  list-style: none;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 14px;
  box-shadow: 0 8px 24px var(--shadow);
  scrollbar-width: thin;
  scrollbar-color: var(--btn-border) transparent;
}

.lang-menu[hidden] {
  display: none;
}

.lang-menu li {
  padding: 11px 14px;
  border-radius: 9px;
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}

.lang-menu li:hover {
  background: var(--btn-hover);
}

.lang-menu li.active {
  background: var(--active, var(--btn-hover));
}

/* 银行卡信息：名字 / 账号 两行 */
.rc-bank-label {
  color: #aab0bc;
  font-size: 14px;
  flex-shrink: 0;
  margin-right: 4px;
}
.rc-bank-row2 {
  margin-top: 10px;
}

/* ===== 余额提现 ===== */
.wd-balance-box {
  height: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.wd-balance-box[hidden] { display: none; }
.wd-balance {
  font-size: 28px;
  font-weight: 700;
  color: #00f2ea;
  font-family: Consolas, Monaco, monospace;
  letter-spacing: 1px;
}

/* 提现方式按钮（五个）：复用充值方式样式 */
.wd-pay-item {
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: #22222b;
  color: #aab0bc;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.wd-pay-item.active {
  border-color: #00f2ea;
  color: #00f2ea;
  background: rgba(0, 242, 234, 0.08);
}
.wd-pay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}
.wd-pay-grid[hidden] { display: none; }

/* 提现第三个框：地址行 + 绑定符号 + 提示 */
.wd-box3 { gap: 16px; }
.wd-bind-btn {
  height: 42px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: #00f2ea; /* 绑定：亮色 */
  color: #001318;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
}
.wd-bind-btn:hover {
  filter: brightness(1.08);
}
.wd-bind-btn.bound {
  background: none;
  border: 1px solid rgba(255, 68, 68, 0.5);
  color: #ff4444; /* 已绑定：红色 */
  cursor: default;
  filter: none;
}
/* 提现地址输入的文字跟随主题（黑夜白色/白天黑色） */
#wd-address {
  color: var(--text);
}
.wd-bind-tip {
  font-size: 12.5px;
  color: #aab0bc;
}

/* 用户提现记录：单号在金额下面 */
.urec-left-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.urec-left-col[hidden] { display: none; }
.urec-wallet-out {
  color: #FF9F3D; /* 提现：橙色钱包图标 */
}
.urec-amt-minus {
  color: #FF9F3D; /* 提现金额：橙色 */
}
.urec-order {
  font-size: 12.5px;
  color: #8a93a6;
  padding-left: 27px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

/* 用户提现记录：单号后面的复制符号（亮色，点击不变样） */
.urec-copy {
  border: none;
  background: none;
  color: #00f2ea;
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  vertical-align: middle;
  line-height: 1;
}
.urec-copy svg {
  width: 14px;
  height: 14px;
}

/* ===== 邀请好友界面 ===== */
#invite-page {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  flex-direction: column;
}
#invite-page[hidden] { display: none; }

/* ===== 资金明细界面（全屏黑色） ===== */
#fund-page {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #000;
  display: flex;
  flex-direction: column;
}
#fund-page[hidden] { display: none; }

/* 资金明细流水行：左图标+名称，右金额/余额（佣金图标为紫底趋势线，扣款/返还用钱包图标；扣款金额白色，不显示日期） */
.fund-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--auth-card);
  border-radius: 12px;
  padding: 16px 14px;
  margin-bottom: 10px;
  font-family: Roboto, Arial, "Helvetica Neue", "Segoe UI", sans-serif;
}
.fund-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fund-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(77, 138, 255, 0.15);
  color: #4d8aff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.fund-icon.pre { background: rgba(245, 166, 35, 0.15); color: #f5a623; }
.fund-icon.comm { background: rgba(139, 92, 246, 0.18); color: #a78bfa; }
.fund-icon svg { width: 18px; height: 18px; }
.fund-info { min-width: 0; }
.fund-name { font-weight: 400; }
.fund-right { text-align: right; flex-shrink: 0; }
.fund-amt { color: #00f2ea; font-weight: 700; }
html[data-theme='light'] .fund-amt { color: #0891a8; }
.fund-amt.neg { color: #fff; }
html[data-theme='light'] .fund-amt.neg { color: #1f2430; }
.fund-bal { color: var(--auth-muted); font-size: 12px; margin-top: 4px; }

.inv-icon-wrap {
  width: 84px;
  height: 84px;
  margin: 20px auto 0;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 242, 234, 0.45);
  background: #111318;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00f2ea;
}
.inv-icon-wrap svg {
  width: 42px;
  height: 42px;
}

.inv-title {
  text-align: center;
  color: var(--text);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 16px;
}

.inv-code-card {
  margin: 22px 14px 0;
  background: #1a1a20;
  border-radius: 12px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.inv-code-card[hidden] { display: none; }

.inv-code-label {
  font-size: 13px;
  color: #aab0bc;
}

.inv-code-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.inv-code-row[hidden] { display: none; }

.inv-code {
  color: #00f2ea;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0; /* 取消字间隔：无邀请码提示长文字不再稀稀拉拉（等宽字体本身有间隔感） */
  font-family: Consolas, Monaco, monospace;
}

/* 无邀请码提示（二级用户）：字号与下方分享按钮一致、橙色、强制单行 */
.inv-code.inv-code-empty {
  font-size: 16px;
  color: #ff9f3c;
  white-space: nowrap;
}

.inv-link-btn {
  width: calc(100% - 28px);
  margin: 16px 14px 0;
  height: 48px;
  border: none;
  border-radius: 12px;
  background: #00f2ea;
  color: #001318;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 1px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.inv-link-btn svg {
  width: 18px;
  height: 18px;
}
.inv-link-btn:hover {
  filter: brightness(1.08);
}

.inv-rules {
  margin: 18px 14px 0;
  background: #1a1a20;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.inv-rules[hidden] { display: none; }

.inv-rules-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  padding-left: 8px;
  border-left: 3px solid #00f2ea;
  line-height: 1.2;
}

.inv-rule {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.inv-rule[hidden] { display: none; }

.inv-rule-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 242, 234, 0.12);
  color: #00f2ea;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.inv-rule-name {
  font-size: 14px;
  color: #fff;
  font-weight: 600;
}

.inv-rule-desc {
  font-size: 12.5px;
  color: #8a93a6;
  margin-top: 3px;
}

/* ===== 安全中心弹窗（用户端） ===== */
.uc-modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.uc-modal-mask[hidden] { display: none; }

.uc-modal {
  width: 100%;
  max-width: 420px;
  background: #1a1a20;
  border-radius: 18px;
  padding: 22px 22px 24px;
}

.uc-modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.uc-modal-top[hidden] { display: none; }

.uc-modal-title {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
}

.uc-close {
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  color: #8a93a6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uc-close svg {
  width: 18px;
  height: 18px;
}
.uc-close:hover {
  color: #fff;
}

.uc-modal-sub {
  font-size: 13.5px;
  color: #8a93a6;
  margin-bottom: 18px;
}

.uc-modal-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}
.uc-modal-group[hidden] { display: none; }

.uc-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: #22222b;
  padding: 0 14px;
}
.uc-input-row[hidden] { display: none; }

.uc-input-row svg {
  width: 16px;
  height: 16px;
  color: #8a93a6;
  flex-shrink: 0;
}

.uc-input-row input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
}

.uc-confirm-btn {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 12px;
  background: #00f2ea;
  color: #001318;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: normal;
  cursor: pointer;
}
.uc-confirm-btn:hover {
  filter: brightness(1.08);
}

/* ===== 全屏界面（充值/提现/记录/邀请好友/弹窗）主题适配 ===== */
#recharge-page, #withdraw-page, #urecords-recharge-page, #urecords-withdraw-page, #invite-page, #fund-page {
  background: var(--bg);
}
.rc-title { color: var(--text); }
.rc-back {
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text);
}
.rc-box { background: var(--auth-card); }
.rc-pay-item, .wd-pay-item {
  background: var(--auth-input);
  border: 1px solid var(--btn-border);
  color: var(--auth-muted);
}
.rc-pay-item.active, .wd-pay-item.active {
  border-color: rgba(0, 242, 234, 0.6);
  background: rgba(0, 242, 234, 0.08);
  color: #00f2ea;
}
.rc-amount-input {
  background: var(--auth-input);
  border: 1px solid var(--btn-border);
  color: var(--text);
}
.rc-amount-label, .rc-amount-hint, .wd-bind-tip, .rc-bank-label, .urec-label, .urec-order, .urec-empty {
  color: var(--auth-muted);
}
.urec-row { background: var(--auth-card); }
.urec-amount { color: var(--text); }
.inv-code-card, .inv-rules, .inv-icon-wrap { background: var(--auth-card); }
.inv-rule-name { color: var(--text); }
.inv-rule-desc { color: var(--auth-muted); }
.uc-modal { background: var(--auth-card); }
.uc-modal-title { color: var(--text); }
.uc-input-row {
  background: var(--auth-input);
  border: 1px solid var(--btn-border);
}
.uc-input-row input { color: var(--text); }
.uc-reason-text { background: var(--auth-input); }
.rc-upload { color: var(--auth-muted); }

/* 白天模式：青色文字加深保证可读 */
html[data-theme='light'] .rc-account-input,
html[data-theme='light'] .wd-balance,
html[data-theme='light'] .inv-code,
html[data-theme='light'] .urec-copy,
html[data-theme='light'] .rc-copy-icon,
html[data-theme='light'] .urec-amt:not(.urec-amt-minus),
html[data-theme='light'] .rc-pay-item.active,
html[data-theme='light'] .wd-pay-item.active {
  color: #0891a8;
}
html[data-theme='light'] .rc-account-input {
  background: var(--auth-input);
  border-color: var(--btn-border);
}

/* ===== 订单记录页 ===== */
.orders-title {
  color: var(--text);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 14px 16px 12px;
}

.order-card {
  background: var(--auth-card);
  border-radius: 12px;
  padding: 14px 16px;
  margin: 0 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.order-card[hidden] { display: none; }

.order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.order-row[hidden] { display: none; }

.order-no {
  font-size: 13.5px;
  color: var(--auth-muted);
  letter-spacing: 0.5px;
}

.order-time {
  font-size: 12px;
  color: var(--auth-muted);
}

.order-amount {
  font-size: 18px;
  font-weight: 700;
  color: #00f2ea;
}
html[data-theme='light'] .order-amount { color: #0891a8; }

.order-status {
  font-size: 13px;
  color: #f5a623;
}
.order-status.done {
  color: #22c55e;
}

/* 订单页：标题居中（头像下方一行）+ 筛选标签 */
#page-orders .orders-title {
  text-align: center;
  margin-top: 0;
  padding: 6px 0 14px;
}
.orders-tabs {
  display: flex;
  gap: 10px;
  padding: 0 16px 14px;
}
.orders-tabs[hidden] { display: none; }
.orders-tab {
  border: none;
  background: none;
  color: var(--auth-muted);
  font-size: 14px;
  font-family: inherit;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
}
.orders-tab.active {
  color: #00f2ea;
  background: rgba(0, 242, 234, 0.12);
}
html[data-theme='light'] .orders-tab.active {
  color: #0891a8;
  background: rgba(8, 145, 168, 0.12);
}

/* 璁㈠崟绛涢€夋爣绛撅細鏀惧ぇ灞呬腑銆侀棿璺濆姞澶?*/
.orders-tabs {
  justify-content: center;
  gap: 22px;
  padding: 0 16px 16px;
}
.orders-tab {
  font-size: 16px;
  padding: 8px 20px;
}
/* 璁㈠崟绛涢€夛細瀛椾綋鍐嶆斁澶?+ 闂磋窛涓夊€?*/
.orders-tab {
  font-size: 18px;
}
.orders-tabs {
  gap: 66px;
}

/* 璁㈠崟椤垫ā寮忥細闅愯棌澶村儚璧勬枡鍜屽彸涓婅鎸夐挳锛堜粎璁㈠崟椤电敓鏁堬級 */
/* 璁㈠崟绛涢€夛細瀛椾綋鎭㈠16px锛岄棿璺濅笁鍊嶅埌198px */
.orders-tab {
  font-size: 16px;
  white-space: nowrap; /* 防止"待处理"等标签文字被挤成竖排 */
}
.orders-tabs {
  gap: 40px; /* 手机宽度（含360px窄屏）下三个标签都能单行放下 */
}

/* 鍥哄畾婊氬姩鏉★紝閬垮厤鍒囨崲椤甸潰鏃舵粴鍔ㄦ潯鍑虹幇/娑堝け瀵艰嚧搴曢儴瀵艰埅宸﹀彸鏅冨姩 */
html {
  overflow-y: scroll;
}
/* 璁㈠崟绛涢€夋爣绛惧線涓嬬暀涓€鎺掑瓧鐨勮窛绂?*/
.orders-tabs {
  padding-top: 24px;
}
/* 璁㈠崟椤碉細鏍囬+绛涢€夊浐瀹氫笉鍔紝鍙湁璁板綍婊氬姩锛涙寜閽笅鏂规í绾匡紙涓嶈创鐫€锛?*/
.orders-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  padding-bottom: 12px;
}
.orders-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 18px 16px 0;
}
html[data-theme='light'] .orders-divider {
  background: #e6e8ee;
}
/* ===== 寮€濮嬮〉 ===== */
.start-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 8px 14px 14px;
}
html[data-theme='light'] .start-divider { background: #e6e8ee; }

.start-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 14px;
}
.start-boxes[hidden] { display: none; }

.start-box {
  background: var(--auth-card);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.start-box[hidden] { display: none; }

.start-label {
  font-size: 14px;
  color: var(--auth-muted);
}

.start-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.start-value.val-red {
  color: #ff4d4d;
}
/* 寮€濮嬮〉鏍囩鍥炬爣锛氶挶鍖呬寒鑹?/ 鏃堕挓绾㈣壊 */
.start-label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.start-ic {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.ic-wallet { color: #00f2ea; }
html[data-theme='light'] .ic-wallet { color: #0891a8; }
.ic-clock { color: #ff4d4d; }
/* 开始页：热抢商品框 + 三张轮播条幅 */
.start-hot-box {
  background: var(--auth-card);
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin: 14px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.start-hot-box[hidden] { display: none; }

.start-hot-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  color: var(--auth-muted);
}
.start-hot-label .ic-bag {
  color: #00f2ea;
}
html[data-theme='light'] .start-hot-label .ic-bag { color: #0891a8; }

.start-banner {
  position: relative;
  width: 100%;
  height: clamp(110px, 11vw, 200px);
  border-radius: 10px;
  overflow: hidden;
}
.start-banner[hidden] { display: none; }

.start-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.start-banner img.show {
  opacity: 1;
}

.sb-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2; /* 在表面遮罩之上 */
}
.sb-dots[hidden] { display: none; }

.sb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}
.sb-dot.active {
  background: #00f2ea;
}

/* 热抢商品：加粗 + 白色 */
.start-hot-label {
  font-weight: 700;
  color: #fff;
  font-size: 16px;
}
html[data-theme='light'] .start-hot-label {
  color: #1f2430;
}

/* ===== 寮€濮嬮〉锛氫粖鏃ヤ换鍔?+ 浠诲姟鏉″箙 + 鎶㈠崟鎸夐挳 ===== */
.start-task-box {
  background: var(--auth-card);
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin: 14px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.start-task-box[hidden] { display: none; }

.start-task-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.start-task-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.start-task-limit {
  font-size: 12.5px;
  color: var(--auth-muted);
}

.start-task-count {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
}
.start-task-count .c-hot { color: #00f2ea; }
html[data-theme='light'] .start-task-count .c-hot { color: #0891a8; }
.start-task-count .c-white { color: var(--text); }

.task-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--auth-input);
  overflow: hidden;
}
.task-progress[hidden] { display: none; }

.task-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #00b3d6, #ff0080);
  transition: width 0.3s ease;
}

.start-task-banner {
  position: relative;
  margin: 14px 14px 0;
  border-radius: 12px;
  overflow: hidden;
}
.start-task-banner[hidden] { display: none; }
.start-task-banner img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.start-go-btn {
  width: calc(100% - 28px);
  margin: 14px 14px 0;
  height: 52px;
  border: none;
  border-radius: 12px;
  background: #00f2ea;
  color: #001318;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 3px;
  cursor: pointer;
}
.start-go-btn:hover { filter: brightness(1.08); }

.start-protect {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 10px 14px 16px;
  font-size: 12.5px;
  color: var(--auth-muted);
  text-align: center;
}
.start-protect svg {
  width: 15px;
  height: 15px;
  color: #00f2ea;
  flex-shrink: 0;
}
html[data-theme='light'] .start-protect svg { color: #0891a8; }
/* 浠诲姟鏉″箙妗嗭細鍜屼笂鏂规潯骞呭悓楂?*/
.start-task-banner img {
  height: clamp(110px, 11vw, 200px);
}
/* 寮€濮嬮〉锛氫粖鏃ヤ换鍔?鏉″箙+鎸夐挳鍚堝苟鍒颁竴涓ぇ妗?*/
.start-task-wrap {
  background: var(--auth-card);
  border-radius: 12px;
  padding: 0;
  margin: 14px 14px 0;
  overflow: hidden;
}
.start-task-wrap[hidden] { display: none; }

.start-task-wrap .start-task-box {
  margin: 0;
  border-radius: 0;
  background: none;
  padding: 14px 16px 16px;
}
.start-task-wrap .start-task-banner {
  margin: 0;
  border-radius: 0;
}
.start-task-wrap .start-go-btn {
  width: 100%;
  margin: 0;
  border-radius: 0;
}
/* 寮€濮嬮〉搴曢儴鐣欑櫧锛氫繚鎶ゆ枃瀛楀拰鍦ㄧ嚎鐢ㄦ埛妗嗕箣鍚庤兘鎷夊埌搴?*/
/* 旧规则废除：protect 已回到任务卡内（撤回锁一屏方案） */
#page-start .start-online {
  margin-bottom: 14px;
}
#page-start {
  padding-bottom: 62px; /* 只留底部导航栏的高度，整页正常滚动 */
}
/* 抢单按钮/保护文字回到任务卡内（撤回锁一屏方案），恢复原样式 */
#page-start .start-protect {
  margin-bottom: 14px;
}
/* 寮€濮嬮〉鍦ㄧ嚎鐢ㄦ埛妗嗭細瀹炶壊鍗＄墖鑳屾櫙锛屽拰棣栭〉涓€鑷?*/
.start-online {
  background: var(--auth-card);
  border-radius: 12px;
}

/* 浠婃棩浠诲姟澶ф鍐呴儴锛氫换鍔″尯涓庢潯骞呫€佹潯骞呬笌鎸夐挳涔嬮棿鍒嗗壊寮€ */
.start-task-wrap .start-task-box {
  padding-bottom: 18px;
}
.start-task-wrap .start-task-banner {
  margin-top: 18px;
}
/* 鎸夐挳鍜屼笂闈㈡潯骞呮媺寮€璺濈 */
.start-task-wrap .start-go-btn {
  margin-top: 24px;
}
/* 淇濇姢鏂囧瓧鏀捐繘澶ф鍐咃紙妗嗗簳鐣欒竟锛夛紝鏉″箙涓庣儹鎶㈠晢鍝佹鍚岃竟璺?*/
.start-task-wrap .start-protect {
  margin: 14px 16px 16px;
}
.start-task-wrap .start-task-banner {
  margin: 18px 16px 0;
  border-radius: 10px;
  overflow: hidden;
}
/* 鎸夐挳瀹藉害鍜屾潯骞呬竴鑷达紙宸﹀彸鍚岀暀 16px锛?*/
.start-task-wrap .start-go-btn {
  width: calc(100% - 32px);
  margin: 24px 16px 0;
  border-radius: 10px;
}
/* 寮€濮嬮〉鍦ㄧ嚎鐢ㄦ埛妗嗭細鏍囬鍜屽唴瀹归棿璺濄€佹粴鍔ㄩ珮搴︿笌棣栭〉涓€鑷?*/
.start-online .online-row {
  padding: 12px 16px 10px;
}
.start-online #start-feed-list {
  height: clamp(120px, 10vw, 180px); /* 鍥哄畾楂樺害锛屽唴瀹瑰湪妗嗗唴婊氬姩 */
  overflow: hidden;
}
/* 浠婃棩浠诲姟 0/60 瀛楀彿鍔犲ぇ */
.start-task-count {
  font-size: 19px;
}
/* 0 鍐嶅姞澶э紝/60 缂╁皬涓€鐐?*/
.start-task-count .c-hot {
  font-size: 24px;
}
.start-task-count .c-white {
  font-size: 16px;
}
/* 鏉″箙锛氶粯璁?鍖归厤涓袱绉嶇姸鎬侊紙涓嶅啀鏄剧ず涓婁紶鐨勫浘鐗囷級 */
.tb-state {
  background: var(--auth-card);
  min-height: clamp(110px, 11vw, 200px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-state[hidden] { display: none; }

.tb-default, .tb-matching {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px;
}
.tb-default[hidden], .tb-matching[hidden] { display: none; }

.tb-default-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 242, 234, 0.4);
  background: var(--auth-input);
  color: #00f2ea;
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-theme='light'] .tb-default-icon { color: #0891a8; }
.tb-default-icon svg {
  width: 26px;
  height: 26px;
}
.tb-icon-spin svg {
  animation: tb-spin 1s linear infinite;
}
@keyframes tb-spin {
  to { transform: rotate(360deg); }
}

.tb-default-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.tb-default-desc {
  font-size: 12.5px;
  color: var(--auth-muted);
  text-align: center;
}
/* 鍖归厤涓細鍚庡彴鏉″箙鍥鹃摵婊℃潯骞呭尯鍩?*/
#tb-matching-img {
  width: 100%;
  height: clamp(110px, 11vw, 200px);
  object-fit: cover;
}
#tb-matching-img[hidden] { display: none; }
/* 鎶㈠崟鎸夐挳鍖归厤涓細鐏拌壊 + 杞湀鍥炬爣 + 鏂囧瓧鍙樺寲 */
.start-go-btn.matching {
  background: #4a4a52;
  color: #9b9b9b;
  cursor: wait;
}
.start-go-btn .go-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.go-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #9b9b9b;
  border-radius: 50%;
  animation: go-spin 0.8s linear infinite;
}
@keyframes go-spin {
  to { transform: rotate(360deg); }
}
/* 涓婃爣璇姞澶?/ 涓嬫爣璇缉灏?*/
.slogan-top { font-size: 16px; }
.slogan-bottom { font-size: 11.5px; }
/* 鐧诲綍椤垫爣璇細鍘诲瓧闂撮殧锛堣鐩?.slogan 鐨?2px锛夛紝瀛椾綋姝ｅ父涓嶅帇鎵?*/
.slogan-top,
.slogan-bottom {
  letter-spacing: 0;
  font-stretch: normal;
  transform: none;
}
/* 涓婃爣璇笂涓嬮棿璺濇斁澶?*/
.slogan-top {
  margin-top: 14px;
  margin-bottom: 14px;
}
/* 鎶㈠崟鎸夐挳闂數鍥炬爣锛堥潚鑹诧級 */
.go-bolt {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.go-text {
  display: inline;
}
/* 绔嬪嵆鎶㈠崟鎸夐挳锛氬幓瀛楅棿闅斻€佸瓧浣撴斁澶с€侀鑹茶皟鏆?*/
.start-go-btn {
  letter-spacing: 0;
  font-size: 19px;
  background: #00c4bd;
}
/* 浠诲姟鏉″箙瑙嗛锛氶摵婊℃潯骞呭尯鍩?*/
#tb-matching-img {
  width: 100%;
  height: clamp(110px, 11vw, 200px);
  object-fit: cover;
  display: block;
  position: relative; /* 五张图片轮播的容器 */
}
/* 轮播图片：铺满容器，一张显示其余隐藏（JS 每 160ms 切换） */
#tb-matching-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
#tb-matching-img img.show { display: block; }
#tb-matching-img[hidden] { display: none; }
/* ===== 抢单成功弹窗 ===== */
.mp-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.mp-mask[hidden] { display: none; }

.mp-card {
  width: 100%;
  max-width: 340px;
  background: #16161c;
  border-radius: 20px;
  padding: 12px 16px 18px;
}

.mp-grab {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: #3a3a44;
  margin: 0 auto 14px;
}

.mp-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 210, 160, 0.5);
  color: #2bd9a8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mp-icon svg { width: 30px; height: 30px; }

.mp-title {
  text-align: center;
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  margin-top: 12px;
}

.mp-sub {
  text-align: center;
  color: #8a8a92;
  font-size: 13px;
  margin-top: 6px;
}

.mp-product {
  display: flex;
  gap: 12px;
  background: #22222b;
  border-radius: 14px;
  padding: 12px;
  margin-top: 16px;
}
.mp-product img {
  width: 84px;
  height: 84px;
  border-radius: 10px;
  object-fit: cover;
  background: #2c2c36;
  flex-shrink: 0;
  align-self: center;
}
.mp-prod-info { flex: 1; min-width: 0; }
.mp-prod-name {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}
.mp-prod-id { color: #8a8a92; font-size: 12px; margin-top: 4px; }
.mp-price-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.mp-cur {
  width: 18px; height: 18px; border-radius: 50%;
  background: #00cfc4; color: #04302e; /* 亮色青底（和幸运单一致），不再是灰色 */
  font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.mp-price {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.mp-comm {
  background: rgba(255, 59, 92, 0.12); color: #ff3b5c;
  font-size: 11px; border-radius: 999px; padding: 2px 9px;
}
.mp-comm b { font-weight: 600; }

.mp-stats { display: flex; gap: 12px; margin-top: 14px; }
.mp-stat {
  flex: 1; background: #22222b; border-radius: 14px; padding: 12px 14px;
}
.mp-stat-right { text-align: right; }
.mp-stat-label { color: #8a8a92; font-size: 12px; }
.mp-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #00f2ea;
}
.mp-plus { margin-right: 4px; }
.mp-stat-status { font-size: 13px; font-weight: 600; color: #ff9f3c; }
.mp-stat-status i { width: 8px; height: 8px; border-radius: 50%; background: #ff9f3c; }

.mp-btns { display: flex; gap: 12px; margin-top: 16px; }
.mp-later, .mp-submit {
  flex: 1; height: 48px; border: none; border-radius: 12px;
  font-weight: 700;
}
.mp-later { background: #26262e; color: #9b9b9b; }
.mp-later:hover { background: #2e2e38; }
.mp-submit {
  background: linear-gradient(90deg, #00e5d0, #00c4bd);
  color: #001318;
}
.mp-submit:hover { filter: brightness(1.06); }

/* ===== 幸运订单弹窗：黑金配色（与普通抢单弹窗区分） ===== */
@property --lk-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.lk-card {
  position: relative;
  width: 100%;
  max-width: 340px;
  background: #131313;
  border: 1px solid rgba(212, 160, 23, 0.55);
  border-radius: 20px;
  padding: 12px 16px 18px;
  box-shadow: 0 0 28px rgba(212, 160, 23, 0.18);
}
/* 跑马灯：一段亮光沿边框转圈（光带拉长、慢速） */
.lk-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 21px;
  padding: 2px;
  background: conic-gradient(from var(--lk-angle), rgba(255, 200, 60, 0) 0deg, rgba(255, 200, 60, 0) 160deg, rgba(255, 190, 40, 0.4) 250deg, rgba(255, 210, 80, 0.85) 330deg, #ffe08a 355deg, rgba(255, 200, 60, 0) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  animation: lk-marquee 4.5s linear infinite;
  pointer-events: none;
}
@keyframes lk-marquee {
  to { --lk-angle: 360deg; }
}
/* 荧光点：从弹窗中心向四周飘散 */
.lk-dots {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.lk-dots i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sz, 3px);
  height: var(--sz, 3px);
  border-radius: 50%;
  background: var(--c, #ffd35c);
  box-shadow: 0 0 6px 2px var(--c, #ffd35c);
  opacity: 0;
  animation: lk-float var(--t, 5.5s) linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes lk-float {
  0%   { transform: translate(0, 0) scale(0.5); opacity: 0; }
  12%  { opacity: 1; }
  75%  { opacity: 0.85; }
  100% { transform: translate(var(--dx, 60px), var(--dy, -120px)) scale(1.15); opacity: 0; }
}

/* ===== 抢单弹窗：白天模式适配（浅色） ===== */
html[data-theme='light'] .mp-card {
  background: #fff;
  box-shadow: 0 12px 40px rgba(15, 20, 30, 0.18);
}
html[data-theme='light'] .mp-grab { background: #d8dce4; }
html[data-theme='light'] .mp-title { color: #1f2430; }
html[data-theme='light'] .mp-sub { color: #8a94a8; }
html[data-theme='light'] .mp-product,
html[data-theme='light'] .mp-stat { background: #f2f3f5; }
html[data-theme='light'] .mp-product img { background: #e4e7ee; }
html[data-theme='light'] .mp-prod-name { color: #1f2430; }
html[data-theme='light'] .mp-prod-id { color: #8a94a8; }
html[data-theme='light'] .mp-cur { background: #00cfc4; color: #04302e; }
html[data-theme='light'] .mp-price { color: #1f2430; }
html[data-theme='light'] .mp-stat-value { color: #0891a8; }
html[data-theme='light'] .mp-later { background: #eceef2; color: #6b7280; }
html[data-theme='light'] .mp-later:hover { background: #e2e5ea; }

/* ===== 幸运订单弹窗：白天模式适配（浅底保留金色点缀） ===== */
html[data-theme='light'] .lk-card {
  background: #fff;
  box-shadow: 0 0 28px rgba(212, 160, 23, 0.25);
}
html[data-theme='light'] .lk-grab { background: #f0d9a0; }
html[data-theme='light'] .lk-title { color: #b8860b; }
html[data-theme='light'] .lk-sub { color: #8a94a8; }
html[data-theme='light'] .lk-charge {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.35);
  color: #d9534f;
}
html[data-theme='light'] .lk-charge b { color: #b8860b; }
html[data-theme='light'] .lk-product { background: #f7f8fa; }
html[data-theme='light'] .lk-card .mp-price { color: #0891a8; }
html[data-theme='light'] .lk-comm-pill {
  background: rgba(184, 134, 11, 0.1);
  color: #b8860b;
}
html[data-theme='light'] .lk-card .mp-stat-value { color: #b8860b; }
html[data-theme='light'] .lk-card .mp-later { background: #eceef2; color: #6b7280; }
html[data-theme='light'] .lk-card .mp-later:hover { background: #e2e5ea; }
.lk-grab { background: #6b5310; }
.lk-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  border: 1.5px solid rgba(240, 168, 24, 0.6);
  color: #f0a818;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lk-icon svg { width: 30px; height: 30px; }
.lk-title {
  text-align: center;
  color: #f5b91e;
  font-size: 21px;
  font-weight: 700;
  margin-top: 12px;
}
.lk-sub {
  text-align: center;
  color: #c9c9cf;
  font-size: 13px;
  margin-top: 6px;
}
/* 充值提示框：红边红字（余额不够这单时显示） */
.lk-charge {
  margin-top: 14px;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.45);
  border-radius: 12px;
  padding: 10px 12px;
  color: #ef8b8b;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}
.lk-charge b { font-weight: 700; color: #f5b91e; }
.lk-product { background: #1e1e22; }
.lk-card .mp-price { color: #fff; }
.lk-comm-pill {
  background: rgba(245, 185, 30, 0.12);
  color: #f5b91e;
}
.lk-card .mp-stat-value { color: #f5b91e; }
.lk-card .mp-later { background: #2a2a30; color: #9b9b9b; }
.lk-card .mp-later:hover { background: #33333b; }
.lk-submit {
  flex: 1; height: 48px; border: none; border-radius: 12px;
  background: linear-gradient(90deg, #f6b62a, #f09a0a);
  font-weight: 700;
  cursor: pointer;
}
.lk-submit:hover { filter: brightness(1.06); }

/* 错误提示：红边胶囊 + 红色⊗图标 */
#toast.err {
  background: #1d1d24;
  border: 1px solid rgba(255, 77, 79, 0.6);
  box-shadow: 0 0 16px rgba(255, 77, 79, 0.22);
  display: flex;
  align-items: center;
  gap: 9px;
}
#toast.err[hidden] { display: none; }
#toast.err span { color: #eaeaea; font-size: 14px; }
.toast-err-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #ff4d4f;
}

/* 成功胶囊：绿色✓图标 + 绿边 */
#toast.ok {
  background: #1d1d24;
  border: 1px solid rgba(43, 217, 168, 0.6);
  box-shadow: 0 0 16px rgba(43, 217, 168, 0.22);
  display: flex;
  align-items: center;
  gap: 9px;
}
#toast.ok[hidden] { display: none; }
#toast.ok span { color: #eaeaea; font-size: 14px; }
.toast-ok-icon { width: 20px; height: 20px; flex-shrink: 0; color: #2bd9a8; }

/* 条幅区飘“+收益”大字 */
.tb-default { position: relative; }
.fly-profit {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #00f2ea;
  font-size: 52px;
  font-weight: 700;
  text-shadow: 0 0 24px rgba(0, 242, 234, 0.45);
  pointer-events: none;
  white-space: nowrap;
  animation: fly-up 1.6s ease-out forwards;
}
@keyframes fly-up {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.6); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  70% { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -85%) scale(0.95); }
}

/* 订单卡片：产品行布局 */
.order-prod-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.order-prod-row[hidden] { display: none; }
.order-prod-img {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: cover;
  background: #22222b;
  flex-shrink: 0;
}
.order-prod-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.order-prod-name {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.order-prod-time {
  color: #8a8a92;
  font-size: 12px;
}

/* 订单卡片布局调整 */
.order-prod-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: unset;
}
.order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 10px;
}
.order-head[hidden] { display: none; }
.order-head-id { color: var(--auth-muted); font-size: 13px; }
.order-head-status { font-size: 13px; }
.order-head-status .order-status { font-size: 13px; }
.order-amount-label { color: var(--auth-muted); font-size: 12px; }
.order-comm-label { color: var(--auth-muted); font-size: 12px; text-align: right; }
.order-comm-value {
  font-size: 18px;
  font-weight: 700;
  color: #00f2ea;
}
html[data-theme='light'] .order-comm-value { color: #0891a8; }

/* 待处理订单：亮色框边 */
.order-card.pending-bright {
  border: 1px solid rgba(0, 242, 234, 0.4);
  box-shadow: 0 0 12px rgba(0, 242, 234, 0.15);
}

/* ===== 幸运待处理订单卡：金边黑金风（布局与普通卡一致，仅配色/标记不同） ===== */
.lk-order-card {
  border: 1px solid rgba(212, 160, 23, 0.55);
  box-shadow: 0 0 12px rgba(212, 160, 23, 0.12);
}
.order-head-left { display: flex; align-items: center; gap: 8px; }
.order-head-left[hidden] { display: none; }
.lk-tag {
  border: 1px solid rgba(240, 168, 24, 0.65);
  background: rgba(240, 168, 24, 0.12);
  color: #f5b91e;
  font-size: 12px;
  border-radius: 6px;
  padding: 1px 8px;
  white-space: nowrap;
}
.lk-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(240, 168, 24, 0.65);
  background: rgba(240, 168, 24, 0.12);
  color: #f5b91e;
  font-size: 13px;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.lk-status svg { width: 14px; height: 14px; }
/* 充值提示条（余额不够这单时显示） */
.lk-charge-bar {
  margin: -2px 0 0;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.45);
  border-radius: 10px;
  padding: 9px 12px;
  color: #ef8b8b;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}
/* 金额前的青色圆点（按图） */
.lk-cur {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #00cfc4;
  color: #04302e;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  vertical-align: 2px;
}
.lk-order-card .order-amount { color: #fff; }
.lk-order-card .order-comm-value { color: #f5b91e; }

/* 全局：按钮等表单控件不继承 body 字重，统一细体（与界面风格一致） */
button, input, select, textarea {

}

/* 手机端：匹配条幅加高，画面显示更完整 */
@media (max-width: 768px) {
  #tb-matching-img { height: 270px; }

  /* 手机端任务条幅默认框与弹出视频同高（270px），点按钮后按钮不往下跳 */
  .tb-state { min-height: 270px; }
}