/* Vupex global light interface – shared by every user-facing page. */
:root {
  --vupex-bg: #f7fbff;
  --vupex-surface: #ffffff;
  --vupex-surface-soft: #f1f7ff;
  --vupex-line: #e5ecf5;
  --vupex-text: #090b20;
  --vupex-muted: #7b849a;
  --vupex-blue: #1678e8;
  --vupex-cyan: #53caee;
  --vupex-green: #20b97a;
  --vupex-red: #ed5564;
  --vupex-shadow: 0 9px 24px rgba(39, 78, 125, .10);
}
html, html.van-theme-dark, body {
  background: var(--vupex-bg) !important;
  color: var(--vupex-text) !important;
  color-scheme: light !important;
}
body {
  margin: 0 !important;
  min-height: 100vh;
  font-family: "Segoe UI", Arial, system-ui, -apple-system, sans-serif !important;
  background:
    radial-gradient(440px 260px at 50% 0%, rgba(255,255,255,.98), transparent 76%),
    linear-gradient(180deg, #fff 0%, var(--vupex-bg) 100%) !important;
  padding-bottom: 104px !important;
}
* { box-sizing: border-box; }
a { text-decoration: none; }
.phone {
  width: 430px !important;
  max-width: 100% !important;
  min-height: 100vh;
  margin: 0 auto !important;
  padding: 16px 18px 108px !important;
}
.topbar {
  min-height: 46px;
  margin: 0 1px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.brand { display: flex !important; align-items: center !important; gap: 10px !important; color: var(--vupex-text) !important; font-size: 24px !important; font-weight: 800 !important; letter-spacing: -.6px; }
.brand img { width: 39px !important; height: 39px !important; border-radius: 11px !important; filter: hue-rotate(-56deg) saturate(1.55) brightness(1.06); box-shadow: 0 5px 13px rgba(20,119,238,.22) !important; }
.icon-btns { display: flex !important; gap: 12px !important; }
.icon-btn {
  width: 44px !important; height: 44px !important; border-radius: 50% !important;
  display: grid !important; place-items: center !important;
  color: #2d4d91 !important; background: #fff !important;
  border: 1px solid var(--vupex-line) !important; box-shadow: 0 5px 14px rgba(37,77,125,.08) !important;
}
.icon-btn svg { width: 23px !important; height: 23px !important; fill: currentColor !important; }
.section-title { margin: 8px 2px 11px !important; color: var(--vupex-text) !important; font-size: 20px !important; font-weight: 800 !important; letter-spacing: -.35px; }
#app, .page, .security-page, .trade-page, .withdrawl-page, .rechargePage,
.home-page, .invite-page, .bind-page, .task-page, .team-page, .profile-page {
  width: 430px !important;
  max-width: 100% !important;
  min-height: 100vh;
  margin: 0 auto !important;
  background: transparent !important;
  color: var(--vupex-text) !important;
}
/* Remove legacy dark shells and force the same calm white canvas. */
#app > div, .page-container, .scroll, .container, .van-config-provider,
.safe-top, .safe-bottom, [style*="background-color: rgb(12, 12, 12)"],
[style*="background: rgb(12, 12, 12)"], [style*="background-color: #0c0c0c"] {
  background-color: transparent !important;
}
.textColor, .text-white1:not(.btnMain), .van-nav-bar__title, .inside-header .title,
.headers .title, h1, h2, h3, h4, h5, h6, label, .title, .name, .value {
  color: var(--vupex-text) !important;
}
.text-grey, .text-secondary, .muted, .sub, .subtitle, .desc, .description,
.van-field__label, .van-cell__label, .hint, small {
  color: var(--vupex-muted) !important;
}
.colorMain, .tw-text-primary, .van-tab--active, .active {
  color: var(--vupex-blue) !important;
}
/* Shared page header */
#assetsHead, .headers, .inside-header, .van-nav-bar, .nav, .main-header, .user-header {
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  background: rgba(255,255,255,.94) !important;
  color: var(--vupex-text) !important;
  border: 0 !important;
  box-shadow: 0 5px 18px rgba(44, 81, 124, .06) !important;
  backdrop-filter: blur(12px);
}
.van-nav-bar__content, .inside-header-con, .nav {
  min-height: 64px !important;
  height: 64px !important;
  padding: 8px 18px !important;
  display: flex;
  align-items: center;
}
.van-nav-bar__title, .inside-header .title, .nav-title {
  font-size: 18px !important;
  font-weight: 750 !important;
  letter-spacing: -.25px;
}
.main-header-con .left { color: var(--vupex-text) !important; font-weight: 750 !important; }
.van-nav-bar__left, .inside-header .left, .nav-left { z-index: 3; }
.van-nav-bar__left > div, .inside-header .back, .nav .icon-btn,
.security-page .van-nav-bar__left > div {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: #fff !important;
  border: 1px solid var(--vupex-line) !important;
  box-shadow: 0 5px 14px rgba(37, 77, 125, .08) !important;
}
.leftIvon, .inside-header .back img, .nav .icon-btn svg {
  width: 21px !important;
  height: 21px !important;
  object-fit: contain;
  filter: sepia(1) saturate(8) hue-rotate(175deg) brightness(.82) !important;
}
.van-hairline--bottom:after, .van-nav-bar:after { border: 0 !important; }
/* Cards, lists and information blocks */
.card, .menu-item, .list-card, .list-item, .task-item, .team-item, .record-item,
.coin-info, .van-cell, .van-collapse-item, .van-panel, .content-card, .auth-card,
.info-card, .form-card, .asset-card, .wallet-card, .notice-card,
[data-v-d4b9127a] .container > div, .page-container > .scroll > div:not(.headers) {
  background: rgba(255,255,255,.97) !important;
  color: var(--vupex-text) !important;
  border-color: var(--vupex-line) !important;
  box-shadow: var(--vupex-shadow) !important;
}
.card, .menu-item, .list-card, .list-item, .task-item, .team-item, .record-item,
.coin-info, .van-cell, .content-card, .auth-card, .info-card, .form-card,
.asset-card, .wallet-card, .notice-card {
  border: 1px solid var(--vupex-line) !important;
  border-radius: 14px !important;
}
.menu-list, .list, .record-list, .coin-list, .van-list, .px-32, .pl-30.pr-30,
.page-container, .trade-body, .content-wrap {
  padding-left: 18px !important;
  padding-right: 18px !important;
}
.menu-item, .list-item, .coin-info, .record-item { margin-bottom: 10px !important; }
/* Inputs */
input, textarea, select, .inputBackground, .inputBackground1, .inputBorder,
.border-grey, .van-field, .van-field__control, .van-search__content {
  color: var(--vupex-text) !important;
  background: #fff !important;
  border-color: var(--vupex-line) !important;
  caret-color: var(--vupex-blue) !important;
}
.inputBackground1, .inputBorder, .border-grey, .van-field, .van-search__content,
.field, form input, form textarea, form select {
  border: 1px solid var(--vupex-line) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 2px rgba(34, 71, 113, .025) !important;
}
input::placeholder, textarea::placeholder { color: #a0a9ba !important; opacity: 1; }
/* Buttons and selected controls */
.btnMain, .btn, button[type="submit"], input[type="submit"], .primary-btn,
.van-button--primary, .code-btn.btnMain, .task-cta-go {
  color: #fff !important;
  background: linear-gradient(135deg, var(--vupex-blue) 0%, #43bcec 100%) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(22, 120, 232, .18) !important;
}
.name-btn.btnMain, .chain-option.btnMain, .van-tab--active {
  color: var(--vupex-blue) !important;
  background: #eaf4ff !important;
  border: 1px solid #abd3fb !important;
  box-shadow: none !important;
}
/* Tabs */
.van-tabs__nav, .tabs-con, .tabs, .van-tabs__wrap {
  background: #fff !important;
  border-color: var(--vupex-line) !important;
}
.van-tabs__line { background: var(--vupex-blue) !important; }
.van-tab { color: var(--vupex-muted) !important; }
.van-tab--active { color: var(--vupex-blue) !important; font-weight: 700 !important; }
/* Blue feature/summary cards echo the homepage assets card. */
.hero, .balance-card, .assets-card, .summary-card, .phone > .summary, .team-hero, .invite-hero,
.level-card, .account-head {
  color: #fff !important;
  background: linear-gradient(135deg, #1678ed 0%, #2e9df1 57%, #61d3ed 100%) !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 26px rgba(35, 139, 224, .19) !important;
}
.hero *, .balance-card *, .assets-card *, .summary-card *, .phone > .summary *, .team-hero *,
.invite-hero *, .level-card *, .account-head * { color: #fff !important; }

/* Trading screen uses the same white cards while preserving buy/sell colors. */
.trade-page .nav-title, .trade-page .pair-row, .trade-page .trade-tabs-bottom { color: var(--vupex-text) !important; }
.trade-page .market-tab {
  color: #647087 !important;
  background: #fff !important;
  border: 1px solid var(--vupex-line) !important;
  box-shadow: 0 5px 14px rgba(37,77,125,.06) !important;
}
.trade-page .market-tab.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--vupex-blue), #43bcec) !important;
  border-color: transparent !important;
}
.trade-page .panel-card, .trade-page .history-item {
  color: var(--vupex-text) !important;
  background: #fff !important;
  border: 1px solid var(--vupex-line) !important;
  box-shadow: var(--vupex-shadow) !important;
}
.trade-page .side-tab, .trade-page .range-btn, .trade-page .field,
.trade-page .history-summary, .trade-page .ai-summary {
  color: #667188 !important;
  background: var(--vupex-surface-soft) !important;
  border-color: #dfe9f4 !important;
}
.trade-page .field input { color: var(--vupex-text) !important; background: transparent !important; }
.trade-page .trade-tabs-bottom .active { color: var(--vupex-blue) !important; border-bottom-color: var(--vupex-blue) !important; }
.trade-page .ob-row:not(.green):not(.red), .trade-page .history-meta { color: var(--vupex-muted) !important; }
.trade-page .ai-countdown-label, .trade-page .ai-countdown-time { color: #fff !important; }
.trade-page .side-tab.active.buy { color: #fff !important; background: var(--vupex-green) !important; }
.trade-page .side-tab.active.sell { color: #fff !important; background: var(--vupex-red) !important; }
.trade-page .ai-summary .val { color: var(--vupex-text) !important; }
.trade-page #aiPanel > .orderbook .ob-row span,
.trade-page #historyPanel .history-top,
.trade-page #historyPanel .history-meta,
.trade-page #historyPanel .history-summary .ob-row span {
  color: var(--vupex-text) !important;
}
.trade-page #aiStatus { color: var(--vupex-muted) !important; }
.trade-page .ai-summary .ob-row > span:first-child,
.trade-page #historyPanel .history-summary .ob-row > span:first-child,
.trade-page #historyPanel .history-meta { color: var(--vupex-muted) !important; }
.trade-page .ai-summary .profit,
.trade-page #historyPanel .history-profit { color: var(--vupex-green) !important; }
.trade-page #historyPanel .history-item { background: #fff !important; }
.logout {
  margin-bottom: 92px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--vupex-blue), #43bcec) !important;
  box-shadow: 0 8px 18px rgba(22,120,232,.18) !important;
}

/* Page-specific legacy components normalized to the Vupex light system. */
.stats-card, .info-card, .qr-box, .task-card, .history, .vip-card,
.history-card, .help-section, .empty-panel, .lang-card, .section, .process,
.level-info .box, .quantify-execute {
  color: var(--vupex-text) !important;
  background: #fff !important;
  border: 1px solid var(--vupex-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--vupex-shadow) !important;
}
.stats-card *, .info-card *, .task-card *, .history *, .vip-card *,
.history-card *, .help-section *, .empty-panel *, .lang-card *, .section *,
.level-info .box * { color: var(--vupex-text) !important; }
.stats-card .muted, .info-card .muted, .task-card .sub, .task-card .muted,
.vip-tier, .vip-row, .history-meta, .help-section p, .empty-panel p,
.lang-card .lang-sub, .level-info .box .name { color: var(--vupex-muted) !important; }
.task-card .progress { background: #e5eef8 !important; }
.task-card .progress > *, .task-card .progress span { background: var(--vupex-blue) !important; }
.vip-card::after { background: radial-gradient(170px 100px at 8% 0%, rgba(57,164,241,.12), transparent 72%) !important; }
.vip-card .vip-title span, .filter-tab.active, .top-action.active, .status.ready,
.invite-btn, .qr-btn, .copy-btn, .vip-btn, .start-btn {
  color: #fff !important;
  background: linear-gradient(135deg, var(--vupex-blue), #43bcec) !important;
  border: 0 !important;
  box-shadow: 0 8px 18px rgba(22,120,232,.17) !important;
}
.vip-card .vip-row .val { color: var(--vupex-text) !important; }
.vip-card .vip-row .profit { color: var(--vupex-green) !important; }
.invite-actions { gap: 10px !important; }
.filter-tab, .top-action, .back-btn {
  color: #637087 !important;
  background: #fff !important;
  border: 1px solid var(--vupex-line) !important;
}
.history-meta span { color: #667188 !important; background: var(--vupex-surface-soft) !important; }
.lang-item { color: var(--vupex-text) !important; border-color: var(--vupex-line) !important; }
.lang-item.active { color: var(--vupex-blue) !important; background: #eaf4ff !important; }
.quantify-info .card-con {
  color: #fff !important;
  background: linear-gradient(135deg, #1678ed 0%, #2e9df1 57%, #61d3ed 100%) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 26px rgba(35,139,224,.19) !important;
}
.quantify-info .card-con * { color: #fff !important; }
.quantify-execute { background: #fff !important; padding: 12px !important; }
.quantify-execute .transparent-button { width: 100% !important; background: transparent !important; }
.level-info .box { margin-bottom: 12px !important; }
.level-info .box-con { color: var(--vupex-text) !important; background: var(--vupex-surface-soft) !important; border-radius: 12px !important; }
.level-info .box-con * { color: var(--vupex-text) !important; }
html body #app .quantify-execute #loadButton .start-btn {
  color: #fff !important;
  background: linear-gradient(135deg, var(--vupex-blue), #43bcec) !important;
  border-radius: 14px !important;
  justify-content: center !important;
  align-items: center !important;
  box-shadow: 0 8px 18px rgba(22,120,232,.17) !important;
}
.level-info .main, .level-info .van-tabs__content, .level-info .van-swipe,
.level-info .van-swipe__track, .level-info .van-tab__panel { background: transparent !important; }

/* Legacy wallet/address forms */
.boxs .box-con, .boxs .inp-con, .boxs .input_box, .boxs .textarea,
.form-con, .form-item, .address-item, .bank-item {
  color: var(--vupex-text) !important;
  background: #fff !important;
  border-color: var(--vupex-line) !important;
  border-radius: 13px !important;
}
.boxs .inp-con, .boxs .input_box, .form-item, .address-item, .bank-item {
  border: 1px solid var(--vupex-line) !important;
  box-shadow: 0 6px 16px rgba(39,78,125,.06) !important;
}
.boxs .box-con *, .boxs .inp-con *, .boxs .input_box *, .form-con *,
.form-item *, .address-item *, .bank-item * { color: var(--vupex-text) !important; }
.page > .footer {
  bottom: 106px !important;
  background: transparent !important;
  box-shadow: none !important;
  z-index: 50 !important;
}
.page > .footer .bot button,
html body .page > .footer .bot .com-btn.on {
  color: #fff !important;
  background: linear-gradient(135deg, var(--vupex-blue), #43bcec) !important;
  border: 0 !important;
  border-radius: 13px !important;
  box-shadow: 0 8px 18px rgba(22,120,232,.18) !important;
}

/* Security/password pages */
.security-page { overflow-x: hidden !important; }
.security-page .px-32 { width: 100% !important; padding: 0 18px 110px !important; }
.security-page h1 { margin: 12px 0 0 !important; font-size: 28px !important; line-height: 1.2 !important; }
.security-page h1 + p { margin-top: 8px !important; font-size: 17px !important; }
.security-page form { width: 100% !important; }
.security-page .h-96 { width: 100% !important; height: 58px !important; }
.security-page .mt-34 { margin-top: 20px !important; }
.security-page .mt-22 { margin-top: 14px !important; }
.security-page .w-768, .security-page button[type="submit"] {
  width: 100% !important;
  max-width: 100% !important;
  height: 56px !important;
  margin-top: 26px !important;
  font-size: 17px !important;
}
.security-page .hint { margin-top: 10px !important; font-size: 12px !important; }
.security-page .van-nav-bar__left svg { fill: var(--vupex-blue) !important; }
.security-page .van-nav-bar__title img { filter: hue-rotate(-56deg) saturate(1.55) brightness(1.06) !important; }

/* Profile: aqua cards and clear feature icons. */
.profile-page .profile-info-card {
  background-color: #e8f7ff !important;
  background-image:
    linear-gradient(135deg, rgba(244,252,255,.78) 0%, rgba(222,244,255,.68) 100%),
    url('/img/profile-crypto-pattern.svg') !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, center !important;
  background-size: cover, cover !important;
  border: 1px solid #cceafa !important;
  box-shadow: 0 10px 24px rgba(55, 147, 204, .11) !important;
}
.profile-page .profile-info-card .card-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: var(--vupex-text) !important;
}
.profile-page .card-title-icon {
  width: 27px !important;
  height: 27px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--vupex-blue), #43bcec) !important;
  border-radius: 9px !important;
}
.profile-page .card-title-icon svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.profile-page .profile-info-card .info-row {
  border-bottom-color: rgba(49, 143, 203, .12) !important;
}
.profile-page .menu-list {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  gap: 11px !important;
}
.profile-page .menu-item { width: 100% !important; box-sizing: border-box !important; }
.profile-page .menu-item {
  min-height: 60px !important;
  padding: 9px 11px !important;
  display: grid !important;
  grid-template-columns: minmax(150px, 1fr) minmax(110px, auto) 18px !important;
  gap: 9px !important;
  background: linear-gradient(135deg, #f0fbff 0%, #e6f6ff 100%) !important;
  border: 1px solid #cfeaf8 !important;
  box-shadow: 0 8px 20px rgba(55, 147, 204, .09) !important;
}
.profile-page .menu-main {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.profile-page .menu-icon {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: linear-gradient(135deg, #1682ee 0%, #43c1ea 100%) !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 13px rgba(22, 130, 238, .2) !important;
}
.profile-page .menu-icon svg {
  width: 21px !important;
  height: 21px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
.profile-page .menu-label {
  color: var(--vupex-text) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}
.profile-page .menu-desc {
  color: #65758b !important;
  font-size: 11px !important;
  text-align: right !important;
  line-height: 1.3 !important;
}
.profile-page .menu-arrow {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: #70a9ca !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Market cards use the same water-blue surface as the profile. */
.vip-card,
.vip-card.luxury-2,
.vip-card.luxury-6 {
  background: linear-gradient(145deg, #f0fbff 0%, #e3f5ff 100%) !important;
  border-color: #cbe9f8 !important;
  box-shadow: 0 10px 24px rgba(55, 147, 204, .11) !important;
}
.vip-card::after,
.vip-card.luxury-3::after {
  background: radial-gradient(190px 110px at 8% 0%, rgba(47, 174, 238, .18), transparent 72%) !important;
}
.vip-card.luxury-4 { border-color: #b9def3 !important; }
.vip-card.luxury-5 { box-shadow: 0 12px 28px rgba(46, 148, 210, .15) !important; }

@media (max-width: 390px) {
  .profile-page .menu-item {
    grid-template-columns: minmax(140px, 1fr) 105px 15px !important;
    gap: 6px !important;
  }
  .profile-page .menu-icon { flex-basis: 35px !important; width: 35px !important; height: 35px !important; }
  .profile-page .menu-desc { font-size: 10.5px !important; }
}
/* QR and media panels */
.qr-img, #QRcodeCanvas, .qr-code, .image-box {
  background: #fff !important;
  border: 1px solid var(--vupex-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--vupex-shadow) !important;
}
/* Notifications */
.dialog-b, .toast, .van-toast {
  color: #fff !important;
  background: rgba(16, 37, 66, .92) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 30px rgba(11, 33, 61, .22) !important;
}
/* Unified bottom navigation */
.tabbar {
  position: fixed !important;
  left: 50% !important;
  bottom: 22px !important;
  transform: translateX(-50%) !important;
  width: 394px !important;
  max-width: calc(100% - 36px) !important;
  height: 74px !important;
  padding: 12px 9px 8px !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 2px !important;
  background: rgba(255,255,255,.96) !important;
  border: 1px solid #edf2f7 !important;
  border-radius: 17px !important;
  box-shadow: 0 11px 28px rgba(41,78,124,.13) !important;
  backdrop-filter: blur(12px) !important;
  z-index: 9999 !important;
}
.tabbar .item {
  position: relative;
  display: grid !important;
  justify-items: center;
  align-content: center;
  gap: 4px;
  color: #737c91 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  text-align: center;
}
.tabbar .item .nav-icon { width: 27px !important; height: 27px !important; color: #818a9f !important; display: block; }
.tabbar .item.active { color: var(--vupex-blue) !important; font-weight: 700 !important; }
.tabbar .item.active .nav-icon { color: var(--vupex-blue) !important; }
.tabbar .item.active:after {
  content: "";
  position: absolute;
  bottom: -5px;
  width: 39px;
  height: 3px;
  border-radius: 99px;
  background: var(--vupex-blue);
}
/* Hide old duplicated navigation when the new shared bar is present. */
body:has(.tabbar) > .footer, body:has(.tabbar) #app > .footer,
body:has(.tabbar) .main-footer { display: none !important; }
@media (max-width: 430px) {
  body { width: 100%; }
  #app, .page, .security-page, .trade-page, .withdrawl-page, .rechargePage { width: 100% !important; }
}