@charset "UTF-8";
/* ============================================================
   二号模板 · 现代卡片风（小夜商城风格）
   设计语言：浅灰底 + 白色圆角卡片 + 橙红强调 + 大留白
   ============================================================ */
:root {
  --s-bg: #F4F5F7;
  --s-bg-elev: #FFFFFF;
  --s-surface: #FFFFFF;
  --s-surface-2: #F8F9FB;
  --s-glass: rgba(255,255,255,.86);
  --s-side: #FFFFFF;
  --s-top: #FFFFFF;
  --s-sunken: #F1F3F6;
  --s-text: #17181C;
  --s-text-2: #5A616E;
  --s-text-3: #8E95A3;
  --s-text-3-ink: #6B7280;
  --s-text-4: #A8AEBB;
  --s-line: #ECEEF2;
  --s-line-2: #F1F3F6;
  --s-line-3: #E2E5EB;
  --s-hover: #F5F6F8;
  --s-active: #EEF0F4;
  --s-sel: rgba(240,68,31,.08);
  --s-accent: #F0441F;
  --s-accent-h: #D93A16;
  --s-accent-d: #BF3413;
  --s-accent-fill: #F0441F;
  --s-accent-bg: #FFF1ED;
  --s-accent-bg-2: rgba(240,68,31,.06);
  --s-accent-line: rgba(240,68,31,.22);
  --s-accent-ring: 0 0 0 3px rgba(240,68,31,.12);
  --s-accent-ink: #C93A19;
  --s-accent-ink-h: #A82F13;
  --s-fill: #17181C;
  --s-fill-h: #2A2C33;
  --s-fill-t: #FFFFFF;
  --s-danger: #F04438;
  --s-danger-ink: #B42318;
  --s-ok: #12B981;
  --s-r: 16px;
  --s-r-s: 12px;
  --s-r-xs: 8px;
  --s-sh-1: 0 1px 2px rgba(16,24,40,.04), 0 6px 16px rgba(16,24,40,.05);
  --s-sh-2: 0 2px 4px rgba(16,24,40,.04), 0 12px 28px rgba(16,24,40,.07);
  --s-sh-3: 0 20px 48px rgba(16,24,40,.14);
  --s-h-header: 64px;
  --s-w-aside: 232px;
  --s-gap: 18px;
  --s-pad: 22px;
}

/* ---------------- 基础 ---------------- */
.tpl-two, .tpl-two body, body.tw-body {
  background: var(--s-bg) !important;
  color: var(--s-text);
  font-family: "HarmonyOS Sans SC", "HarmonyOS Sans", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.tw-body { margin: 0; padding: 0; }

/* ---------------- 顶栏 ---------------- */
.tw-header {
  position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 22px; background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--s-line);
}
.tw-brand { display: flex; align-items: center; gap: 10px; text-decoration: none !important; }
.tw-brand-mark {
  width: 34px; height: 34px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FF6A3D, #F0441F); color: #fff; font-size: 16px;
  box-shadow: 0 6px 16px rgba(240,68,31,.28);
}
.tw-brand-text { font-size: 16px; font-weight: 700; color: var(--s-text); letter-spacing: -.01em; }
.tw-head-right { display: flex; align-items: center; gap: 14px; }
.tw-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  border-radius: 999px; background: var(--s-accent-bg); color: var(--s-accent-ink) !important;
  font-size: 13px; font-weight: 600; text-decoration: none !important;
}
.tw-icon-btn {
  width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--s-text-2) !important; position: relative; text-decoration: none !important;
}
.tw-icon-btn:hover { background: var(--s-hover); color: var(--s-text) !important; }
.tw-dot { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--s-accent); color: #fff; font-size: 10px; text-align: center; }
.tw-user { display: flex; align-items: center; gap: 8px; }
.tw-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--s-line); }
.tw-uname { font-size: 13px; color: var(--s-text-2); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-menu-btn { display: none; width: 36px; height: 36px; border: 0; background: transparent; color: var(--s-text); font-size: 18px; }

/* ---------------- 侧栏 ---------------- */
.tw-aside {
  position: fixed !important; top: 64px; bottom: 0; left: 0; width: 232px !important; max-width: 82vw !important;
  background: #fff; border-right: 1px solid var(--s-line); overflow-y: auto; z-index: 900;
  padding: 14px 12px 28px; min-height: 0 !important;
}
.tw-nav { display: flex; flex-direction: column; gap: 2px; }
.tw-nav-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--s-text-4);
  padding: 16px 12px 6px; text-transform: uppercase;
}
.tw-nav-item {
  display: flex; align-items: center; gap: 11px; height: 42px; padding: 0 12px; border-radius: 12px;
  color: var(--s-text-2) !important; font-size: 14px; text-decoration: none !important; position: relative;
}
.tw-nav-item i { width: 18px; text-align: center; font-size: 15px; color: var(--s-text-3); }
.tw-nav-item:hover { background: var(--s-hover); color: var(--s-text) !important; }
.tw-nav-item.is-active { background: var(--s-accent-bg); color: var(--s-accent-ink) !important; font-weight: 600; }
.tw-nav-item.is-active i { color: var(--s-accent); }
.tw-nav-dot {
  margin-left: auto; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--s-accent); color: #fff; font-size: 10px; font-weight: 700; text-align: center;
}
.tw-aside-mask { display: none; }

/* ---------------- 内容区 ---------------- */
.tw-app { min-height: 100vh; padding-top: 64px; box-sizing: border-box; }
.tw-content { margin-left: 232px !important; padding: 0 !important; background: transparent !important; }
.tw-content-body {
  width: 100% !important; max-width: none !important; margin: 0 !important;
  padding: 22px 28px 48px !important; box-sizing: border-box;
}
.tw-body .app-aside, .tw-body #aside { float: none; }

/* 让内容区里常见的旧容器自动变成卡片 */
.tpl-two .tw-content-body > div:not([class*="modal"]):not([class*="layer"]):not([class*="mask"]):not([class*="toast"]),
.tpl-two .tw-content-body > section,
.tpl-two .tw-content-body > form { }
.tpl-two .up-page { background: transparent !important; padding: 0 !important; }
.tpl-two .up-hero,
.tpl-two .card,
.tpl-two .panel,
.tpl-two .box { background: var(--s-surface); border: 1px solid var(--s-line); border-radius: var(--s-r);
  box-shadow: var(--s-sh-1); }
.tpl-two .up-hero { padding: 22px 24px !important; display: flex; align-items: center; gap: 16px; }
.tpl-two .up-hero-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--s-accent-bg) !important;
  color: var(--s-accent) !important; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; }
.tpl-two .up-hero-t { font-size: 19px; font-weight: 700; color: var(--s-text); margin: 0 0 4px; }
.tpl-two .up-hero-d { font-size: 13px; color: var(--s-text-3); margin: 0; }

/* 按钮 */
.tpl-two .btn { border-radius: 10px; font-weight: 600; border: 1px solid var(--s-line-3); box-shadow: none; }
.tpl-two .btn-primary, .tpl-two .btn-accent, .tpl-two .btn-success {
  background: var(--s-accent) !important; border-color: var(--s-accent) !important; color: #fff !important;
  box-shadow: 0 6px 16px rgba(240,68,31,.22);
}
.tpl-two .btn-primary:hover { background: var(--s-accent-h) !important; }
.tpl-two .btn-default { background: #fff; color: var(--s-text-2); }
.tpl-two .btn-default:hover { background: var(--s-hover); }
.tpl-two .btn-danger { background: var(--s-danger) !important; border-color: var(--s-danger) !important; }

/* 表单 */
.tpl-two .form-control, .tpl-two input[type=text], .tpl-two input[type=password], .tpl-two input[type=number],
.tpl-two input[type=email], .tpl-two select, .tpl-two textarea {
  border: 1px solid var(--s-line-3) !important; border-radius: 10px !important; box-shadow: none !important;
  background: #fff !important; color: var(--s-text) !important; height: auto; padding: 9px 12px;
}
.tpl-two .form-control:focus, .tpl-two input:focus, .tpl-two select:focus, .tpl-two textarea:focus {
  border-color: var(--s-accent) !important; box-shadow: var(--s-accent-ring) !important;
}

/* 表格 */
.tpl-two .table { background: #fff; border-radius: var(--s-r); overflow: hidden; margin-bottom: 0; }
.tpl-two .table > thead > tr > th { background: var(--s-surface-2); border-bottom: 1px solid var(--s-line);
  color: var(--s-text-3); font-weight: 600; font-size: 12.5px; padding: 12px 14px; }
.tpl-two .table > tbody > tr > td { border-top: 1px solid var(--s-line-2); padding: 13px 14px; vertical-align: middle; }
.tpl-two .table > tbody > tr:hover > td { background: var(--s-surface-2); }

/* 标签 / 徽章 */
.tpl-two .label { border-radius: 8px; font-weight: 600; padding: .28em .6em; }
.tpl-two .label-success, .tpl-two .label-primary { background: var(--s-accent-bg) !important; color: var(--s-accent-ink) !important; }

/* 分页 */
.tpl-two .pagination > li > a, .tpl-two .pagination > li > span { border-radius: 10px !important; margin: 0 3px;
  border: 1px solid var(--s-line-3); color: var(--s-text-2); }
.tpl-two .pagination > .active > a { background: var(--s-accent) !important; border-color: var(--s-accent) !important; color: #fff !important; }

/* 弹窗 */
.tpl-two .modal-content { border: 0; border-radius: var(--s-r); box-shadow: var(--s-sh-3); }
.tpl-two .modal-header { border-bottom: 1px solid var(--s-line-2); }
.tpl-two .modal-footer { border-top: 1px solid var(--s-line-2); }

/* 现代卡片辅助类（页面可直接用） */
.tw-card { background: #fff; border: 1px solid var(--s-line); border-radius: var(--s-r); box-shadow: var(--s-sh-1); }
.tw-card-pad { padding: 22px 24px; }
.tw-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.tw-page-title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0; color: var(--s-text); }
.tw-page-sub { font-size: 13px; color: var(--s-text-3); margin: 6px 0 0; }
.tw-grid { display: grid; gap: 16px; }
.tw-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tw-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tw-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tw-stat { background: #fff; border: 1px solid var(--s-line); border-radius: var(--s-r); padding: 18px 20px;
  box-shadow: var(--s-sh-1); }
.tw-stat-k { font-size: 12.5px; color: var(--s-text-3); margin-bottom: 8px; }
.tw-stat-v { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--s-text); }
.tw-stat-v small { font-size: 13px; color: var(--s-text-3); font-weight: 500; margin-left: 4px; }
.tw-list { display: flex; flex-direction: column; }
.tw-list-item { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--s-line-2); }
.tw-list-item:last-child { border-bottom: 0; }
.tw-muted { color: var(--s-text-3); }
.tw-accent { color: var(--s-accent); }
.tw-empty { text-align: center; padding: 56px 20px; color: var(--s-text-3); }
.tw-empty i { font-size: 34px; color: var(--s-line-3); display: block; margin-bottom: 12px; }

/* 底部 tabbar（仅手机端显示） */
.tw-tabbar { display: none; }

/* ---------------- 手机端 ---------------- */
@media (max-width: 991px) {
  .tw-header { height: 56px; padding: 0 14px; }
  .tw-brand-text, .tw-uname { display: none; }
  .tw-menu-btn { display: inline-flex; align-items: center; justify-content: center; }
  .tw-app { padding-top: 56px; padding-bottom: 66px; }
  .tw-aside {
    top: 0 !important; bottom: 0; width: 268px !important; padding-top: 18px;
    transform: translateX(-104%); transition: transform .26s cubic-bezier(.32,.72,0,1); box-shadow: 0 0 40px rgba(16,24,40,.18);
  }
  .tw-aside.is-open { transform: translateX(0); }
  .tw-aside-mask { display: block; position: fixed; inset: 0; background: rgba(16,24,40,.42); z-index: 899;
    opacity: 0; pointer-events: none; transition: opacity .2s; }
  .tw-aside-mask.is-show { opacity: 1; pointer-events: auto; }
  .tw-content { margin-left: 0 !important; }
  .tw-content-body { padding: 14px 14px 24px !important; }
  .tw-page-title { font-size: 19px; }
  .tw-grid-4, .tw-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; height: 58px;
    padding-bottom: env(safe-area-inset-bottom); background: rgba(255,255,255,.96);
    backdrop-filter: blur(18px); border-top: 1px solid var(--s-line);
  }
  .tw-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--s-text-3) !important; font-size: 11px; text-decoration: none !important; }
  .tw-tab i { font-size: 18px; }
  .tw-tab.is-active { color: var(--s-accent) !important; font-weight: 600; }
}

/* 维护页 */
.tw-maint { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--s-bg); }
.tw-maint-card { background: #fff; border-radius: 20px; padding: 44px 40px; text-align: center; box-shadow: var(--s-sh-2); max-width: 420px; }
.tw-maint-ico { font-size: 34px; margin-bottom: 14px; }
.tw-maint-card h1 { font-size: 20px; margin: 0 0 10px; color: var(--s-text); }
.tw-maint-card p { font-size: 14px; color: var(--s-text-3); line-height: 1.8; margin: 0; }

/* ============================================================
   页面级适配：把旧页面里写死的深色块改成二号的浅色语言
   ============================================================ */
.tpl-two .uc-hero {
  background: linear-gradient(135deg, #FFF3EE 0%, #FFE4D9 100%) !important;
  color: var(--s-text) !important;
  border: 1px solid rgba(240,68,31,.10);
  box-shadow: var(--s-sh-1) !important;
}
.tpl-two .uc-hero .uc-user-info h2,
.tpl-two .uc-hero .uc-hero-stat .label,
.tpl-two .uc-hero .uc-hero-stat .value,
.tpl-two .uc-hero .uc-hero-top,
.tpl-two .uc-hero .uc-hero-left { color: var(--s-text) !important; }
.tpl-two .uc-hero .uc-hero-stat .label { color: var(--s-text-3) !important; font-weight: 500 !important; }
.tpl-two .uc-hero .uc-hero-stats { border-top: 1px solid rgba(240,68,31,.14) !important; }
.tpl-two .uc-hero .uc-hero-stat { border-left-color: rgba(240,68,31,.14) !important; }
.tpl-two .uc-hero .uc-level-tip { color: var(--s-text-3) !important; }
.tpl-two .uc-hero .uc-avatar { background: #fff !important; border-color: rgba(240,68,31,.18) !important; }
.tpl-two .uc-hero .uc-btn-primary,
.tpl-two .uc-hero a.btn,
.tpl-two .uc-hero .uc-btn {
  background: #fff !important; color: var(--s-text) !important; border: 1px solid rgba(240,68,31,.18) !important;
  box-shadow: var(--s-sh-1);
}
.tpl-two .uc-hero .uc-btn-primary:hover,
.tpl-two .uc-hero a.btn:hover { background: var(--s-accent-bg) !important; color: var(--s-accent-ink) !important; }
.tpl-two .uc-hero .user-level-tag { background: rgba(240,68,31,.12) !important; color: var(--s-accent-ink) !important; }

/* 首页快捷入口 */
.tpl-two .uc-quick-item { border: 1px solid var(--s-line); border-radius: 14px; box-shadow: none; }
.tpl-two .uc-quick-item:hover { box-shadow: var(--s-sh-2); border-color: rgba(240,68,31,.18); }
.tpl-two .uc-quick-icon { border-radius: 13px; background: var(--s-accent-bg) !important; color: var(--s-accent) !important; }

/* 通用：页面上常见的白底面板统一圆角与描边 */
.tpl-two .uc-section .uc-site-card,
.tpl-two .uc-security-tip,
.tpl-two .uc-announce,
.tpl-two .uc-card { border: 1px solid var(--s-line) !important; border-radius: var(--s-r) !important; box-shadow: var(--s-sh-1) !important; }

/* 内容区最大宽度收敛，避免大屏过散 */
@media (min-width: 1200px) {
  .tpl-two .tw-content-body > .uc-container { max-width: 1120px; }
}
/* 账号信息、公告文字对比度修正 */
.tpl-two .uc-hero .uc-hero-meta,
.tpl-two .uc-hero .uc-hero-meta * { color: var(--s-text-3) !important; }
.tpl-two .uc-notice-text { color: var(--s-text-2) !important; opacity: 1 !important; }
.tpl-two .uc-notice-card { filter: none !important; }
.tpl-two .uc-notice-text * { color: var(--s-text-2) !important; }
/* ---- 下单页（独立整页）配色对齐二号 ---- */
.tpl-two .bp-item-buy { background: var(--s-accent-bg) !important; color: var(--s-accent-ink) !important; }
.tpl-two .bp-item-buy:hover { background: var(--s-accent) !important; color: #fff !important; }
.tpl-two .bp-badge.api { background: var(--s-accent-bg) !important; color: var(--s-accent-ink) !important; }
.tpl-two .bp-srcitem.active { background: var(--s-accent) !important; color: #fff !important; }
.tpl-two .bp-srcitem.active * { color: #fff !important; }
.tpl-two .bp-cat-item.active { background: var(--s-accent-bg) !important; color: var(--s-accent-ink) !important; }
.tpl-two .bp-search-btn,
.tpl-two .bp-search-submit { background: var(--s-accent) !important; color: #fff !important; border-color: var(--s-accent) !important; }
/* 大屏铺满：内容区不再限宽 */
@media (min-width: 1200px) {
  .tw-content-body { padding: 22px 32px 56px !important; }
}
.tpl-two .tw-content-body > * { max-width: none !important; }
/* ---- 佣金转结页：避免与后台通用 .input-wrap（搜索框）类名冲突 ---- */
.tpl-two .tm-field-row {
  display: flex; align-items: center; width: 100%; border: 1px solid var(--s-line) !important;
  border-radius: 10px; background: #F8FAFC; overflow: hidden;
}
.tpl-two .tm-field-row:focus-within { border-color: var(--s-accent-line) !important; background: #fff; box-shadow: var(--s-sh-1); }
.tpl-two .tm-field-row input {
  flex: 1 1 auto; min-width: 0; border: 0 !important; background: transparent !important;
  box-shadow: none !important; border-radius: 0 !important; height: 46px !important;
  padding: 0 16px !important; font-size: 15px; color: var(--s-text) !important;
}
.tpl-two .tm-field-row .suffix { padding: 0 16px; height: 46px; line-height: 46px; color: var(--s-text-2); font-size: 14px; background: var(--s-surface-2); }
/* ---- 首页账号卡：三个统计字段（去掉 Bootstrap .label 的灰底，字号/颜色统一） ---- */
.tpl-two .uc-hero-stat .label {
  display: inline !important;
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  color: var(--s-text) !important;
}
.tpl-two .uc-hero-stat .value {
  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
  color: var(--s-text) !important;
}
.tpl-two .uc-hero-stats { border-top-color: rgba(240,68,31,.14) !important; }
.tpl-two .uc-hero-stat { border-left-color: rgba(240,68,31,.14) !important; }

/* ============================================================
   2026-10-21 · 左侧菜单：去掉滚动条 + 一屏自适应
   原来 .tw-aside 是 overflow-y:auto，18 个菜单项在 768~900 高的屏幕上
   必然溢出 200px 以上，右侧永远挂一条滚动条。
   这里改成「行高/字号按视口高度收缩 + 隐藏滚动条」，一屏就能全部显示；
   极端矮屏（<600）仍保留滚动能力，只是不再显示滚动条。
   ============================================================ */
@media (min-width: 992px) {
  .tw-aside {
    display: flex; flex-direction: column;
    padding: 12px 10px 14px;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .tw-aside::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
  .tw-nav { flex: 1 1 auto; min-height: 0; gap: 0; justify-content: flex-start; }
  .tw-nav-label {
    padding: clamp(3px, .7vh, 12px) 12px clamp(1px, .3vh, 4px);
    font-size: clamp(9px, 1.1vh, 11px); line-height: 1.2;
  }
  .tw-nav-item {
    height: clamp(26px, 4.2vh, 42px);
    font-size: clamp(13px, 1.9vh, 14px);
    border-radius: clamp(8px, 1.1vh, 12px);
    gap: clamp(7px, 1.2vh, 11px);
  }
  .tw-nav-item i { font-size: clamp(13px, 1.75vh, 15px); }
  .tw-nav-dot { min-width: 16px; height: 16px; line-height: 16px; font-size: 10px; }
}

/* ============================================================
   2026-10-21 · 手机端「宽屏化」
   手机上原来 .tw-content 10 + .tw-content-body 14 + .uc-bare 6 + .col-sm-12 15
   = 每侧 45px，390 屏可用内容只有 308。这里收成最外层 8px 一层，
   其余页面级留白置 0；卡片自身内边距不动。
   ============================================================ */
@media (max-width: 991px) {
  .tpl-two .tw-content { padding: 0 !important; }
  .tpl-two .tw-content-body { padding: 10px 8px 24px !important; }
  .tpl-two .uc-bare { padding: 0 !important; margin: 0 !important; }
}
/* 只在真正的手机宽度把栅格列还原成整列（≥768 保留 Bootstrap 的并排行为） */
@media (max-width: 767px) {
  .tpl-two .uc-bare > [class*="col-"] {
    float: none !important; width: 100% !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }
}

/* 充值页「支付方式」两列在窄屏会撑破容器（grid-template-columns:1fr 1fr 的 1fr
   最小宽度=内容不可断行宽度，USDT-BEP20 这类长名字直接把容器顶宽 → 右侧被裁）。
   改成 minmax(0,1fr)，列宽可收缩、文字已带省略号，就不会再撑破。 */
@media (max-width: 575px) {
  .tpl-two .rc-pays { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 991px) {
  .tpl-two .rc-pay-txt,
  .tpl-two .rc-pay-name,
  .tpl-two .rc-pay-meta { min-width: 0 !important; }
}