/**
 * Sociolla.com aligned H5 shell
 * Site reference: https://www.sociolla.com/
 * Hierarchy: utility bar → main header → category nav → hero → sections
 * Logic-safe CSS only — do not rename routes/fields in HTML.
 */
:root {
  --sc-pink: #ff2d87;
  --sc-pink-deep: #e91e8c;
  --sc-pink-soft: #ff6ba8;
  --sc-pink-bg: #ffe4ef;
  --sc-pink-page: #ffffff;
  --sc-text: #1a1a1a;
  --sc-muted: #757575;
  --sc-border: #f0d0df;
  --sc-line: #eeeeee;
  --sc-white: #ffffff;
  --sc-shadow: 0 2px 12px rgba(255, 45, 135, 0.08);
  --sc-radius: 12px;
  --sc-font: 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

html,
body.sc-page,
.sc-page {
  background: #fff !important;
  color: var(--sc-text);
  font-family: var(--sc-font);
}

/* ========== 1) Sociolla utility strip ========== */
.sc-util {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  background: #fff5f8;
  border-bottom: 1px solid #f7e0ea;
  font-size: 11px;
  color: var(--sc-muted);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.sc-util a {
  color: var(--sc-muted);
  text-decoration: none;
  font-weight: 600;
  padding: 2px 6px;
}

.sc-util a.is-brand,
.sc-util .sc-util-brand {
  color: var(--sc-pink);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.sc-util-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.sc-util-right a,
.sc-util-right span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--sc-muted);
  font-size: 11px;
}

.sc-util .material-icons {
  font-size: 14px;
  color: var(--sc-pink);
}

/* ========== 2) Main header (logo + actions) ========== */
.sc-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid var(--sc-line);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 60;
}

.sc-main-header .sc-logo-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.sc-main-header .sc-logo-wrap img {
  height: 26px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
}

.sc-brand-word {
  color: var(--sc-pink);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.sc-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.sc-header-actions a,
.sc-header-actions .sc-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--sc-text);
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
}

.sc-header-actions .material-icons {
  font-size: 22px;
  color: var(--sc-pink);
}

/* ========== 3) Category nav (Sociolla Categories / Brands / ...) ========== */
.sc-nav {
  display: flex;
  gap: 4px;
  padding: 8px 10px;
  background: #fff;
  border-bottom: 1px solid var(--sc-line);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sc-nav a {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  color: #444;
  background: #fafafa;
  border: 1px solid #f0f0f0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sc-nav a .material-icons {
  font-size: 14px;
  color: var(--sc-pink);
}

.sc-nav a.is-active,
.sc-nav a:first-child {
  background: var(--sc-pink-bg);
  color: var(--sc-pink);
  border-color: #f7c3d8;
}

/* ========== Banner / hero ========== */
.sc-banner,
.banner.swiper-container.sc-banner {
  margin: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
  box-shadow: none !important;
}

.sc-banner .swiper-pagination-bullet-active {
  background: var(--sc-pink) !important;
}

/* ========== Sections like Sociolla blocks ========== */
.sc-block {
  margin: 14px 12px;
  background: #fff;
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
  border: 1px solid #f7e8ef;
  padding: 14px;
}

.sc-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--sc-text);
  margin: 16px 14px 10px;
}

.sc-block-title::before {
  content: '';
  width: 4px;
  height: 14px;
  border-radius: 4px;
  background: var(--sc-pink);
}

.membership-level-title,
.commission-title,
.notice-title,
.partner-title {
  margin: 16px 14px 10px !important;
  color: var(--sc-text) !important;
  font-weight: 800 !important;
  font-size: 0.42rem !important;
}

.membership-level-title .dot,
.commission-title .dot,
.notice-title .dot,
.partner-title .dot {
  width: 4px !important;
  height: 14px !important;
  background: var(--sc-pink) !important;
  border-radius: 4px !important;
}

/* Balance / CTA — Sociolla pink CTA */
.balance-card-container {
  margin: 12px 12px 8px !important;
  padding: 16px !important;
  background: linear-gradient(135deg, #ff2d87 0%, #ff6ba8 100%) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 24px rgba(255, 45, 135, 0.22) !important;
}

.balance-card {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.balance-card::after {
  display: none !important;
}

.balance-main,
.balance-unit,
.balance-amount,
.balance-desc {
  color: #fff !important;
}

.balance-action-btn {
  background: #fff !important;
  color: var(--sc-pink) !important;
  font-weight: 800 !important;
  border-radius: 24px !important;
  margin-top: 12px !important;
}

.quick-actions,
.article-quick-actions {
  margin: 8px 12px 12px !important;
  padding: 14px 8px !important;
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: var(--sc-shadow) !important;
  border: 1px solid #f7e8ef;
}

.quick-action-icon,
.article-quick-icon {
  background: var(--sc-pink-bg) !important;
  border-radius: 16px !important;
}

.quick-action-icon .material-icons,
.article-quick-icon .material-icons,
.sc-icon-btn .material-icons {
  color: var(--sc-pink) !important;
}

.commission-card {
  border: 1px solid #f7e8ef !important;
  border-radius: 14px !important;
  box-shadow: var(--sc-shadow) !important;
}

.commission-amount,
.notice-amount {
  color: var(--sc-pink) !important;
}

/* Auth — Sociolla login sheet */
.sc-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid var(--sc-line);
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
}

.sc-auth-hero {
  background: linear-gradient(160deg, #ff2d87 0%, #ff6ba8 60%, #ffe4ef 100%);
  padding: 28px 24px 48px;
  color: #fff;
}

.sc-auth-title {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
}

.sc-auth-sub {
  margin: 8px 0 0;
  font-size: 13px;
  opacity: 0.95;
}

.sc-auth-sheet {
  margin: -28px 12px 24px;
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--sc-shadow);
  padding: 28px 20px 32px;
  position: relative;
  z-index: 2;
  border: 1px solid #f7e8ef;
}

.sc-btn-primary,
.login-btn,
button#form-button {
  background: linear-gradient(90deg, #ff2d87, #ff6ba8) !important;
  border: none !important;
  border-radius: 24px !important;
  height: 48px !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(255, 45, 135, 0.28);
  color: #fff !important;
}

.sc-btn-ghost {
  background: #fff !important;
  color: var(--sc-pink) !important;
  border: 1.5px solid var(--sc-pink) !important;
  border-radius: 24px !important;
  height: 48px !important;
  font-weight: 700 !important;
}

.sc-input,
.sc-auth-sheet input.input-input,
.login-card input.input-input {
  border: 1.5px solid var(--sc-border) !important;
  border-radius: 12px !important;
  background: #fffafc !important;
  height: 48px !important;
}

.sc-input:focus,
.login-card input.input-input:focus {
  border-color: var(--sc-pink) !important;
  box-shadow: 0 0 0 3px rgba(255, 45, 135, 0.12);
}

.sc-tips-card {
  margin-top: 24px;
  background: #fff8fb;
  border-radius: 16px;
  padding: 16px;
}

.tips .sc-tip-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  background: #ffe4ef;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
}

.tips .sc-tip-icon .material-icons {
  font-size: 22px;
  color: var(--sc-pink);
}

.sc-eye-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #b8a0ad;
  font-size: 22px !important;
  cursor: pointer;
}

/* Footer tabs */
.footer.jc-sa,
ul.footer {
  height: 64px !important;
  border-top: 1px solid #f7e0ea !important;
  box-shadow: 0 -4px 16px rgba(255, 45, 135, 0.08) !important;
  background: #fff !important;
}

.footer .activeColor,
.footer .sc-tab-icon.is-active {
  color: var(--sc-pink) !important;
}

.footer .sc-center-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff2d87, #ff6ba8);
  box-shadow: 0 6px 16px rgba(255, 45, 135, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  border: 3px solid #fff;
}

.footer .sc-center-fab .material-icons {
  font-size: 28px;
  color: #fff;
}

/* Inner pages */
.van-nav-bar,
.van-nav-bar__content {
  background: #fff !important;
}

.van-nav-bar__title {
  color: var(--sc-pink) !important;
  font-weight: 800 !important;
}

.van-button--danger,
.van-button--primary {
  background: linear-gradient(90deg, #ff2d87, #ff6ba8) !important;
  border: none !important;
}

.operation .material-icons,
.operation-box .material-icons {
  color: var(--sc-pink) !important;
  margin-right: 10px;
  font-size: 22px;
}

.sc-icon-btn {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--sc-pink-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.header.sc-home-header,
.sc-home-header {
  height: auto !important;
  min-height: 52px;
  background: #fff !important;
  border-bottom: 1px solid var(--sc-line) !important;
  box-shadow: none !important;
}

.sc-logo-text {
  color: var(--sc-pink) !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em;
}

/* Global H5 shell: keep frontend pages in mobile layout on every device. */
:root {
  --h5-shell-width: 100vw;
  --h5-shell-left: 0px;
}

@media (min-width: 768px) {
  :root {
    --h5-shell-width: 400px;
    --h5-shell-left: calc((100vw - var(--h5-shell-width)) / 2);
  }
}

html {
  background: #f5f5f5;
}

body {
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  min-height: 100vh;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow-x: hidden;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

.app,
.main,
.wrapper,
.homepage,
.sc-page .app {
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
  left: auto !important;
  right: auto !important;
}

.header,
.app-page-header,
.sc-topbar,
.sc-main-header,
.footer.jc-sa,
ul.footer {
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  left: var(--h5-shell-left) !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box;
}

.sc-nav,
.sc-util {
  width: var(--h5-shell-width);
  max-width: var(--h5-shell-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.swiper-container,
.swiper-container-membership,
.banner.swiper-container {
  max-width: var(--h5-shell-width) !important;
}

.layui-m-layershade,
.layui-m-layermain {
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  left: var(--h5-shell-left) !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box;
}

/* Homepage system notice + layer overlays stay in H5 shell on PC */
body.sc-page .sys-notice-mask,
.sys-notice-mask {
  position: fixed !important;
  inset: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  left: var(--h5-shell-left) !important;
  right: auto !important;
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  transform: none !important;
}

body.sc-page .sys-notice-modal,
.sys-notice-modal {
  width: calc(var(--h5-shell-width) - 48px) !important;
  max-width: 340px !important;
  box-sizing: border-box !important;
}

.dialog {
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  left: var(--h5-shell-left) !important;
  top: 0 !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box;
}

.dialog-overlay {
  width: 100% !important;
  max-width: none !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box;
}

.dialog-content {
  max-width: calc(var(--h5-shell-width) - 32px) !important;
  box-sizing: border-box;
}

.image-preview-mask {
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  left: var(--h5-shell-left) !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box;
}

.rolldate-container {
  position: fixed !important;
  inset: 0 auto auto var(--h5-shell-left) !important;
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  height: 100vh !important;
  z-index: 198910200 !important;
  box-sizing: border-box;
}

.rolldate-container .rolldate-mask {
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
}

.rolldate-container .rolldate-wrapper {
  width: 86% !important;
  max-width: calc(var(--h5-shell-width) - 32px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box;
}

.rolldate-container.rolldate-six .rolldate-wrapper {
  width: 92% !important;
  left: 50% !important;
}

.layui-m-layerchild,
.logout-switch-dialog,
.lang-switch-dialog {
  max-width: calc(var(--h5-shell-width) - 32px) !important;
  box-sizing: border-box;
}

.logout-switch-popup,
.lang-switch-popup {
  max-width: calc(var(--h5-shell-width) - 32px) !important;
  box-sizing: border-box;
}

/* Account inner pages polish */
body:has(.Personal_ul),
body:has(.bink_card),
body:has(.Notice_ul),
body:has(#aboutUs),
body:has(.address_box) {
  background: #f7f7f8 !important;
}

.main:has(.Personal_ul),
.main:has(.bink_card),
.main:has(.Notice_ul),
.main:has(#aboutUs),
.wrapper:has(.address_box),
.wrapper:has(.container .bink_card),
.wrapper:has(.container .address_box) {
  min-height: 100vh;
  min-height: 100dvh;
  background: #f7f7f8 !important;
  padding-bottom: 0;
  box-sizing: border-box;
}

.main:has(.Personal_ul) .header,
.main:has(.bink_card) .header,
.main:has(.Notice_ul) .header,
.main:has(#aboutUs) .header,
.wrapper:has(.address_box) .header,
.wrapper:has(.container .bink_card) .header {
  height: 48px !important;
  min-height: 48px;
  background: #fff !important;
  color: var(--sc-text) !important;
  border-bottom: 1px solid #f7e0ea !important;
  box-shadow: 0 4px 14px rgba(255, 45, 135, 0.06);
}

.main:has(.Personal_ul) .Maintitle,
.main:has(.bink_card) .Maintitle,
.main:has(.Notice_ul) .Maintitle,
.main:has(#aboutUs) .Maintitle,
.wrapper:has(.address_box) .Maintitle,
.wrapper:has(.container .bink_card) .Maintitle {
  height: 48px !important;
  line-height: 48px !important;
  background: transparent !important;
  color: var(--sc-pink) !important;
}

.main:has(.Personal_ul) .Maintitle h3,
.main:has(.bink_card) .Maintitle h3,
.main:has(.Notice_ul) .Maintitle h3,
.main:has(#aboutUs) .Maintitle h3,
.wrapper:has(.address_box) .Maintitle h3,
.wrapper:has(.container .bink_card) .Maintitle h3 {
  margin: 0;
  color: var(--sc-pink) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 48px !important;
}

.main:has(.Personal_ul) .left_btn,
.main:has(.bink_card) .left_btn,
.main:has(.Notice_ul) .left_btn,
.main:has(#aboutUs) .left_btn,
.wrapper:has(.address_box) .left_btn,
.wrapper:has(.container .bink_card) .left_btn {
  height: 48px !important;
  line-height: 48px !important;
  padding: 0 12px !important;
  cursor: pointer;
}

.main:has(.Personal_ul) .left_btn img,
.main:has(.bink_card) .left_btn img,
.main:has(.Notice_ul) .left_btn img,
.main:has(#aboutUs) .left_btn img {
  width: 22px !important;
  height: 22px !important;
  object-fit: contain;
  filter: none;
}

.main:has(.bink_card) .material-icons,
.wrapper:has(.address_box) .material-icons,
.wrapper:has(.container .bink_card) .material-icons {
  color: var(--sc-pink) !important;
}

.Personal_ul {
  margin: 64px 12px 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border: 1px solid #f7e8ef;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--sc-shadow) !important;
}

.Personal_ul a,
.Personal_ul li {
  text-decoration: none !important;
}

.Personal_ul li {
  min-height: 58px;
  margin: 0 !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid #f2edf0;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.Personal_ul li:last-child {
  border-bottom: none;
}

.Personal_ul li > img:first-child {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px;
  background: var(--sc-pink-bg);
  padding: 6px;
  object-fit: contain;
}

.Personal_ul li h3 {
  flex: 1;
  min-width: 0;
  margin: 0 !important;
  color: var(--sc-text) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

.Personal_ul li p {
  max-width: 46%;
  margin: 0 !important;
  color: var(--sc-muted) !important;
  font-size: 13px !important;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Personal_ul_r_img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffe0ee;
}

.bink_card,
.address_box,
.Notice_ul,
#aboutUs {
  margin: 64px 12px 0 !important;
  padding: 14px !important;
  background: #fff !important;
  border: 1px solid #f7e8ef;
  border-radius: 16px;
  box-shadow: var(--sc-shadow);
  box-sizing: border-box;
}

.wrapper .container {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.wrapper .container .bink_card,
.wrapper .container .address_box {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.bink_card_ul {
  margin: 0 !important;
  padding: 0 !important;
}

.bink_card_ul li,
.address_box .van-cell {
  min-height: 54px;
  margin: 0 !important;
  padding: 12px 4px !important;
  border-bottom: 1px solid #f2edf0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}

.bink_card_ul li:last-child,
.address_box .van-cell:last-child {
  border-bottom: none !important;
}

.bink_card_ul input,
.address_box input,
.van-cell .form-control {
  flex: 1;
  min-width: 0;
  height: 36px !important;
  line-height: 36px !important;
  color: var(--sc-text) !important;
  font-size: 14px !important;
  background: transparent !important;
}

.bink_card p,
.text-mute.small {
  color: var(--sc-muted) !important;
  line-height: 1.45;
}

.form-buttom,
.bink_card .btn,
.wrapper .container button.form-buttom,
.logout-switch-btn.sure {
  width: 100% !important;
  height: 46px !important;
  border: none !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, var(--sc-pink), var(--sc-pink-soft)) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 18px rgba(255, 45, 135, 0.24);
}

.Notice_ul {
  list-style: none;
}

.Notice_ul > li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 12px 0;
  border-bottom: 1px solid #f2edf0;
}

.Notice_ul_left {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--sc-pink-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.Notice_ul h3 {
  margin: 0;
  color: var(--sc-text);
  font-size: 15px;
  font-weight: 800;
}

.Notice_ul .box {
  padding-top: 8px;
}

.Notice_ul .box ul {
  margin: 0 0 10px;
  padding: 0;
}

.Notice_ul .box li {
  margin: 0 0 10px !important;
  padding: 12px !important;
  background: #fff8fb;
  border-radius: 12px;
  color: var(--sc-text);
  line-height: 1.55;
}

#aboutUs {
  color: var(--sc-text);
  font-size: 14px;
  line-height: 1.7;
  text-align: left;
}

.main:has(#aboutUs) > img {
  display: block;
  width: 42% !important;
  max-width: 150px;
  margin: 74px auto 12px !important;
}

.box:has(.content .top) {
  min-height: 100vh;
  background-size: cover !important;
  background-position: center top !important;
}

.box .content {
  box-sizing: border-box;
}

.box .content .top {
  border: 1px solid #f7e8ef !important;
  border-radius: 18px !important;
  box-shadow: var(--sc-shadow);
}

.box .content .top .title {
  color: var(--sc-pink) !important;
  font-weight: 900;
}

/* Refined account page theme */
body.account-inner-page {
  background:
    radial-gradient(circle at 50% 0, rgba(255, 45, 135, 0.16), transparent 180px),
    linear-gradient(180deg, #fff5fa 0%, #f7f7f8 180px, #f7f7f8 100%) !important;
  color: var(--sc-text);
  height: auto !important;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: auto !important;
}

html:has(body.account-inner-page) {
  height: auto !important;
  min-height: 100dvh;
  overflow-x: hidden;
}

body.account-inner-page #app {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.account-inner-page .main,
body.account-inner-page .wrapper,
body.account-inner-page .homepage {
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  padding-bottom: 0;
  margin-bottom: 0 !important;
  box-sizing: border-box;
  overflow-x: hidden;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
}

body.account-inner-page .header {
  height: 52px !important;
  min-height: 52px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--sc-text) !important;
  border-bottom: 1px solid rgba(255, 45, 135, 0.1) !important;
  box-shadow: 0 10px 26px rgba(255, 45, 135, 0.08) !important;
  backdrop-filter: blur(12px);
}

body.account-inner-page .header .row {
  height: 52px;
  align-items: center;
}

body.account-inner-page .Maintitle,
body.account-inner-page .header button.col,
body.account-inner-page .header .btn.w-100 {
  height: 52px !important;
  line-height: 52px !important;
  background: transparent !important;
  color: var(--sc-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.account-inner-page .Maintitle h3,
body.account-inner-page .header button,
body.account-inner-page .header .btn.w-100 {
  margin: 0;
  color: var(--sc-text) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em;
}

body.account-inner-page .left_btn,
body.account-inner-page .right_btn {
  height: 52px !important;
  line-height: 52px !important;
  cursor: pointer;
}

body.account-inner-page .left_btn img.return,
body.account-inner-page .left_btn i.return,
body.account-inner-page .header .material-icons.text-white {
  width: 22px !important;
  height: 22px !important;
  line-height: 22px !important;
  color: var(--sc-pink) !important;
  filter: none !important;
}

.left_btn i.return.material-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sc-pink);
  font-size: 26px;
  vertical-align: middle;
}

body.account-inner-page .header .btn-link {
  color: var(--sc-pink) !important;
}

body.account-inner-page .Personal_ul,
body.account-inner-page .bink_card,
body.account-inner-page .address_box,
body.account-inner-page .Notice_ul,
body.account-inner-page #aboutUs {
  width: auto !important;
  margin: 72px 14px 0 !important;
  padding: 8px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(255, 45, 135, 0.1) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 36px rgba(34, 20, 28, 0.08) !important;
  overflow: hidden;
}

body.account-inner-page .Personal_ul li,
body.account-inner-page .bink_card_ul li,
body.account-inner-page .address_box .van-cell {
  min-height: 58px !important;
  margin: 0 !important;
  padding: 12px 8px !important;
  border-bottom: 1px solid rgba(255, 45, 135, 0.08) !important;
  background: transparent !important;
  transition: background 0.18s ease, transform 0.18s ease;
}

body.account-inner-page .Personal_ul li:active,
body.account-inner-page .bink_card_ul li:active,
body.account-inner-page .address_box .van-cell:active {
  background: #fff6fa !important;
  transform: scale(0.995);
}

body.account-inner-page .Personal_ul li:last-child,
body.account-inner-page .bink_card_ul li:last-child,
body.account-inner-page .address_box .van-cell:last-child {
  border-bottom: 0 !important;
}

body.account-inner-page .Personal_ul li > img:first-child,
body.account-inner-page .bink_card_ul .material-icons,
body.account-inner-page .address_box .material-icons,
body.account-inner-page .Notice_ul_left {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, #fff0f7, #ffe1ef) !important;
  color: var(--sc-pink) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 45, 135, 0.08);
  margin: 0;
}

body.account-inner-page .bink_card_ul .material-icons,
body.account-inner-page .address_box .material-icons,
body.account-inner-page .Notice_ul_left {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-right: 0 !important;
  font-size: 21px !important;
}

body.account-inner-page .Personal_ul li h3,
body.account-inner-page .Notice_ul h3,
body.account-inner-page .van-cell__title {
  color: var(--sc-text) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

body.account-inner-page .Personal_ul li p,
body.account-inner-page .bink_card p,
body.account-inner-page .text-mute.small {
  color: #8c8c8c !important;
  font-size: 12px !important;
}

body.account-inner-page .bink_card_ul input,
body.account-inner-page .address_box input,
body.account-inner-page .van-cell .form-control {
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--sc-text) !important;
  font-size: 14px !important;
  background: transparent !important;
}

body.account-inner-page .bink_card_ul input::placeholder,
body.account-inner-page .address_box input::placeholder {
  color: #b7a7af;
}

body.account-inner-page .form-buttom,
body.account-inner-page .add-btn,
body.account-inner-page .bink_card .btn,
body.account-inner-page .logout-switch-btn.sure {
  height: 48px !important;
  margin-top: 18px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #ff2d87 0%, #ff6ba8 100%) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 24px rgba(255, 45, 135, 0.28) !important;
}

body.account-inner-page .logout-switch-btn.close {
  height: 48px !important;
  border-radius: 24px !important;
  background: #fff !important;
  color: #666 !important;
  border: 1px solid #eadde4 !important;
  box-shadow: none !important;
}

body.bind-bank-page .subtitle {
  margin: 72px 14px 10px !important;
  color: var(--sc-text) !important;
  font-size: 15px;
  font-weight: 900;
}

body.bind-bank-page .address_box {
  margin-top: 0 !important;
}

body.bind-bank-page .van-cell-group {
  margin-bottom: 12px;
  padding: 6px 8px !important;
  border: 1px solid rgba(255, 45, 135, 0.08);
  border-radius: 18px !important;
  background: #fffafd !important;
  box-shadow: none !important;
}

body.bind-bank-page .px-3 {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

body.bind-bank-page .logout-switch-popup {
  border-radius: 24px !important;
  background: #fff !important;
}

body.invite-page .box {
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.9), transparent 92px),
    linear-gradient(160deg, #ff5fa7 0%, #ff8dbc 48%, #fff3f8 100%) !important;
  background-image:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.9), transparent 92px),
    linear-gradient(160deg, #ff5fa7 0%, #ff8dbc 48%, #fff3f8 100%) !important;
}

body.invite-page .box .content {
  top: 96px !important;
  padding: 0 18px !important;
}

body.invite-page .box .content .top {
  padding: 26px 18px !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 18px 40px rgba(112, 20, 62, 0.18) !important;
}

body.invite-page .box .content .top .title {
  margin-bottom: 14px !important;
  color: var(--sc-pink) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
}

body.invite-page #qrcode canvas,
body.invite-page #qrcode img {
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(255, 45, 135, 0.13);
}

body.msg-page .Notice_ul .box li {
  background: linear-gradient(180deg, #fffafd 0%, #fff 100%) !important;
  border: 1px solid rgba(255, 45, 135, 0.08);
  border-radius: 16px !important;
  box-shadow: 0 8px 20px rgba(34, 20, 28, 0.04);
}

body.msg-page .Notice_ul .box li h3 {
  margin-bottom: 6px;
}

body.about-page .main {
  text-align: center !important;
}

body.about-page .main > img {
  width: 128px !important;
  max-width: 42% !important;
  margin: 84px auto 18px !important;
  padding: 18px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(34, 20, 28, 0.08);
}

body.about-page #aboutUs {
  margin-top: 0 !important;
  padding: 18px !important;
  text-align: left !important;
}

body.about-page #aboutUs span {
  color: #555 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

body.bind-bank-page .layui-m-layershade,
body.bind-bank-page .layui-m-layermain {
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  left: var(--h5-shell-left) !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

body.bind-bank-page .layui-m-layerchild.logout-switch-dialog,
body.bind-bank-page .layui-m-layerchild {
  max-width: calc(var(--h5-shell-width) - 28px) !important;
  box-sizing: border-box !important;
}

body.bind-bank-page .picker {
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  left: var(--h5-shell-left) !important;
  right: auto !important;
  transform: none !important;
  z-index: 198910300 !important;
  box-sizing: border-box !important;
  touch-action: none !important;
}

body.bind-bank-page .picker .picker-mask,
body.bind-bank-page .picker .picker-panel {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: auto !important;
  box-sizing: border-box !important;
}

body.bind-bank-page .picker .picker-mask {
  z-index: 1 !important;
}

body.bind-bank-page .picker .picker-panel {
  z-index: 2 !important;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  overflow: hidden;
  pointer-events: auto !important;
  touch-action: none !important;
}

body.bind-bank-page .picker .picker-content,
body.bind-bank-page .picker .wheel-wrapper,
body.bind-bank-page .picker .wheel,
body.bind-bank-page .picker .wheel-scroll,
body.bind-bank-page .picker .wheel-item {
  pointer-events: auto !important;
  touch-action: none !important;
}

body.bind-bank-page.bind-bank-picker-open .layui-m-layershade {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.bind-bank-page.bind-bank-picker-open .layui-m-layermain {
  z-index: 198910200 !important;
}

body.bind-bank-page.bind-bank-picker-open .picker {
  z-index: 198910300 !important;
  pointer-events: auto !important;
}

body.deposit-page .container {
  padding-left: 14px !important;
  padding-right: 14px !important;
  box-sizing: border-box;
}

body.deposit-page .container:first-of-type {
  padding-top: 64px;
}

body.deposit-page .card.bg-template {
  height: 128px !important;
  margin: 0 0 14px !important;
  padding: 18px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.28), transparent 58px),
    linear-gradient(135deg, #ff2d87 0%, #ff7ab3 100%) !important;
  box-shadow: 0 16px 34px rgba(255, 45, 135, 0.22) !important;
  overflow: hidden;
}

body.deposit-page .card.bg-template p {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 13px !important;
  font-weight: 700;
}

body.deposit-page .card.bg-template h3 {
  color: #fff !important;
  font-size: 26px !important;
  font-weight: 900 !important;
}

body.deposit-page #main-form .container {
  margin: 0 14px !important;
  padding: 14px !important;
  width: auto !important;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 45, 135, 0.1);
  border-radius: 22px;
  box-shadow: 0 14px 36px rgba(34, 20, 28, 0.08);
}

body.deposit-page .check_money {
  gap: 10px;
  margin-bottom: 14px !important;
}

body.deposit-page .check_money span {
  flex: 1 0 calc(33.333% - 10px);
  min-width: 86px;
  height: 44px !important;
  margin: 0 !important;
  border: 1px solid #f1dce5 !important;
  border-radius: 16px !important;
  background: #fff8fb;
  color: var(--sc-text);
  font-size: 15px !important;
  font-weight: 800;
}

body.deposit-page .check_money span.check {
  border-color: var(--sc-pink) !important;
  background: linear-gradient(135deg, #fff0f7, #ffe0ee);
  color: var(--sc-pink);
  box-shadow: 0 8px 18px rgba(255, 45, 135, 0.14);
}

body.deposit-page #main-form .form-group,
body.deposit-page .wallet-address-container {
  min-height: 56px;
  margin: 0 !important;
  padding: 10px 4px !important;
  border-bottom: 1px solid rgba(255, 45, 135, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}

body.deposit-page #main-form .form-group:last-of-type {
  border-bottom: 0 !important;
}

body.deposit-page #main-form .material-icons {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff0f7, #ffe1ef);
  color: var(--sc-pink) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}

body.deposit-page #main-form .form-control {
  min-width: 0;
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--sc-text) !important;
  font-size: 14px !important;
}

body.deposit-page .deposit-bank-select-group {
  align-items: center !important;
}

body.deposit-page .deposit-bank-select {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 10px 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 45, 135, 0.16);
  background: linear-gradient(180deg, #fffafc 0%, #fff5f9 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  box-sizing: border-box;
}

body.deposit-page .deposit-bank-select-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #9a9a9a;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

body.deposit-page .deposit-bank-select.is-selected .deposit-bank-select-text {
  color: var(--sc-text);
  font-weight: 800;
}

body.deposit-page .deposit-bank-select-arrow {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--sc-pink) !important;
  font-size: 22px !important;
}

body.deposit-page .deposit-bank-detail {
  margin: 8px 0 4px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 45, 135, 0.12) !important;
  border-radius: 16px;
  background: #fffafc;
  box-shadow: 0 8px 18px rgba(255, 45, 135, 0.06);
}

body.deposit-page .deposit-bank-detail-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255, 45, 135, 0.1);
}

body.deposit-page .deposit-bank-detail-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

body.deposit-page .deposit-bank-detail-row:first-child {
  padding-top: 0;
}

body.deposit-page .deposit-bank-detail-label {
  flex-shrink: 0;
  color: var(--sc-muted);
  font-size: 13px;
  font-weight: 700;
}

body.deposit-page .deposit-bank-detail-value {
  min-width: 0;
  text-align: right;
  color: var(--sc-text);
  font-size: 13px;
  font-weight: 800;
  word-break: break-all;
  line-height: 1.4;
}

body.deposit-page .toWallet {
  color: var(--sc-pink) !important;
  font-weight: 800;
  text-decoration: none !important;
  white-space: nowrap;
  line-height: 42px;
  font-size: 12px;
}

body.deposit-page .submit-btn {
  height: 48px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #ff2d87 0%, #ff6ba8 100%) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 24px rgba(255, 45, 135, 0.28) !important;
}

body.deposit-page .text-mute.small {
  color: #8c8c8c !important;
  line-height: 1.6;
}

body.deposit-page .layui-m-layershade,
body.deposit-page .layui-m-layermain {
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  left: var(--h5-shell-left) !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

body.deposit-page .layui-m-layershade {
  background-color: rgba(20, 12, 18, 0.52) !important;
}

body.deposit-page .layui-m-layerchild {
  min-width: 90%;
  background: transparent;
  max-width: calc(var(--h5-shell-width) - 28px) !important;
  box-sizing: border-box !important;
}

body.deposit-page .deposit-fill-bank-dialog {
  width: 84% !important;
  max-width: 328px !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.deposit-page .deposit-fill-bank-dialog .layui-m-layercont,
body.deposit-page .deposit-fill-bank-dialog .layui-layer-content {
  padding: 0 !important;
}

body.deposit-page .deposit-fill-bank-popup {
  width: 100%;
  max-width: 328px;
  margin: 0 auto;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 42px rgba(34, 20, 28, 0.18);
}

body.deposit-page .deposit-fill-bank-hero {
  padding: 28px 0 18px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.42), transparent 72px),
    linear-gradient(135deg, #ff2d87 0%, #ff79b2 100%);
}

body.deposit-page .deposit-fill-bank-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 24px rgba(145, 10, 72, 0.18);
}

body.deposit-page .deposit-fill-bank-icon .material-icons {
  color: var(--sc-pink);
  font-size: 32px;
}

body.deposit-page .deposit-fill-bank-title {
  padding: 18px 22px 6px;
  text-align: center;
  color: var(--sc-text);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.4;
}

body.deposit-page .deposit-fill-bank-desc {
  padding: 0 22px 18px;
  text-align: center;
  color: var(--sc-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

body.deposit-page .deposit-fill-bank-actions {
  display: flex;
  gap: 12px;
  padding: 0 18px 20px;
  box-sizing: border-box;
}

body.deposit-page .deposit-fill-bank-btn {
  flex: 1;
  height: 46px;
  margin: 0;
  border: 0;
  border-radius: 23px;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

body.deposit-page .deposit-fill-bank-btn.close {
  background: #f8f8f8;
  color: #666;
  border: 1px solid #eee;
}

body.deposit-page .deposit-fill-bank-btn.sure {
  background: linear-gradient(135deg, #ff2d87 0%, #ff6ba8 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 45, 135, 0.26);
}

body.deposit-page .picker {
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  left: var(--h5-shell-left) !important;
  right: auto !important;
  transform: none !important;
  z-index: 198910300 !important;
  box-sizing: border-box !important;
  touch-action: none !important;
}

body.deposit-page .picker .picker-mask,
body.deposit-page .picker .picker-panel {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: auto !important;
  box-sizing: border-box !important;
}

body.deposit-page .picker .picker-mask {
  z-index: 1 !important;
}

body.deposit-page .picker .picker-panel {
  z-index: 2 !important;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  overflow: hidden;
  pointer-events: auto !important;
  touch-action: none !important;
}

body.deposit-page .picker .picker-content,
body.deposit-page .picker .wheel-wrapper,
body.deposit-page .picker .wheel,
body.deposit-page .picker .wheel-scroll,
body.deposit-page .picker .wheel-item {
  pointer-events: auto !important;
  touch-action: none !important;
}

body.deposit-page.deposit-picker-open .layui-m-layershade {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.deposit-page.deposit-picker-open .layui-m-layermain {
  z-index: 198910200 !important;
}

body.deposit-page.deposit-picker-open .picker {
  z-index: 198910300 !important;
  pointer-events: auto !important;
}

body.my-index-page .layui-m-layershade,
body.my-index-page .layui-m-layermain {
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  left: var(--h5-shell-left) !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

body.my-index-page .layui-m-layerchild.logout-switch-dialog,
body.my-index-page .layui-m-layerchild {
  max-width: calc(var(--h5-shell-width) - 32px) !important;
  box-sizing: border-box !important;
}

body.my-index-page .logout-switch-dialog {
  width: 84% !important;
  max-width: 328px !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.my-index-page .logout-switch-dialog .layui-layer-content {
  padding: 0 !important;
}

body.my-index-page .logout-switch-popup {
  width: 100% !important;
  max-width: 328px !important;
  margin: 0 auto !important;
  border-radius: 26px !important;
  overflow: hidden;
  background: #fff !important;
  box-shadow: 0 18px 42px rgba(34, 20, 28, 0.18) !important;
}

body.my-index-page .logout-switch-gradient-bg {
  padding: 28px 0 18px !important;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.42), transparent 72px),
    linear-gradient(135deg, #ff2d87 0%, #ff79b2 100%) !important;
  text-align: center;
}

body.my-index-page .logout-switch-logo-wrap {
  width: 62px !important;
  height: 62px !important;
  margin: 0 auto !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.95) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(145, 10, 72, 0.18);
}

body.my-index-page .logout-switch-logo-wrap .material-icons {
  color: var(--sc-pink);
  font-size: 32px;
}

body.my-index-page .logout-switch-popup > div:nth-child(2) {
  padding: 20px 22px 18px !important;
  color: var(--sc-text) !important;
  font-size: 16px !important;
  font-weight: 800;
  line-height: 1.5;
}

body.my-index-page .logout-switch-popup > div:last-child {
  gap: 12px;
  padding: 0 18px 20px;
  box-sizing: border-box;
}

body.my-index-page .logout-switch-btn {
  flex: 1;
  width: auto !important;
  height: 46px !important;
  margin: 0 !important;
  border-radius: 23px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  border: 0 !important;
}

body.my-index-page .logout-switch-btn.close {
  background: #f8f8f8 !important;
  color: #666 !important;
  border: 1px solid #eee !important;
}

body.my-index-page .logout-switch-btn.sure {
  background: linear-gradient(135deg, #ff2d87 0%, #ff6ba8 100%) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(255, 45, 135, 0.26);
}

body.edit-username-page .bink_card {
  margin: 72px 14px 0 !important;
  padding: 18px 14px 8px !important;
}

body.edit-username-page .bink_card > h3 {
  margin: 0 4px 14px !important;
  color: var(--sc-text) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.4;
}

body.edit-username-page .bink_card_ul li {
  min-height: 58px !important;
  margin: 0 !important;
  padding: 10px 8px !important;
  border: 1px solid rgba(255, 45, 135, 0.1) !important;
  border-radius: 16px !important;
  background: #fffafd !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px;
}

body.edit-username-page .bink_card_ul li h4 {
  flex: 0 0 auto;
  margin: 0 !important;
  color: #8c8c8c !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

body.edit-username-page .bink_card_ul li input.code {
  flex: 1;
  min-width: 0;
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--sc-text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

body.edit-username-page .bink_card_ul li input.code::placeholder {
  color: #b7a7af;
  font-weight: 500;
}

body.edit-username-page .save-btn {
  display: block;
  width: calc(100% - 28px) !important;
  height: 48px !important;
  margin: 18px 14px 0 !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #ff2d87 0%, #ff6ba8 100%) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 24px rgba(255, 45, 135, 0.28) !important;
}

body.edit-username-page .dialog {
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  left: var(--h5-shell-left) !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

body.vip-page {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  height: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 45, 135, 0.14), transparent 180px),
    linear-gradient(180deg, #fff5fa 0%, #f7f7f8 180px, #f7f7f8 100%) !important;
  box-sizing: border-box !important;
}

html:has(body.vip-page) {
  height: 100% !important;
  overflow: hidden !important;
  background: #f5f5f5 !important;
}

/* body 已是 H5 外壳，页面只需铺满 body，不要再偏移 left */
body.vip-page .page,
body.vip-page #unlock {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  display: block !important;
  background: transparent !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: 1 !important;
  transform: none !important;
}

body.vip-page .bar.bar-nav.fxbt {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 52px !important;
  padding: 0 14px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(255, 45, 135, 0.1) !important;
  box-shadow: 0 10px 26px rgba(255, 45, 135, 0.08) !important;
  backdrop-filter: blur(12px);
  box-sizing: border-box !important;
  z-index: 20 !important;
  transform: none !important;
}

body.vip-page .bar.bar-nav.fxbt .icon.icon-left {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: 2;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff0f7, #ffe1ef);
  color: var(--sc-pink) !important;
  font-size: 18px !important;
  line-height: 36px !important;
  text-decoration: none !important;
}

body.vip-page .bar.bar-nav.fxbt .title {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 52px !important;
  margin: 0 !important;
  padding: 0 52px !important;
  background: transparent !important;
  color: var(--sc-text) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 52px !important;
  text-align: center !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-sizing: border-box !important;
}

body.vip-page .bar-nav ~ .content,
body.vip-page .content.scroll-wrapper {
  top: 52px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 14px !important;
  background: transparent !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.vip-page .big-box {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 0 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

body.vip-page .vip-hero {
  position: relative;
  margin: 0 0 14px;
  padding: 18px 16px 16px;
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.34), transparent 90px),
    linear-gradient(140deg, #ff2d87 0%, #ff6ba8 48%, #ff9bc4 100%);
  box-shadow: 0 16px 34px rgba(255, 45, 135, 0.24);
}

body.vip-page .vip-hero::after {
  content: '';
  position: absolute;
  right: -24px;
  bottom: -28px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

body.vip-page .level-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border-radius: 0;
  background: transparent !important;
  background-image: none !important;
  color: #fff;
  font-weight: 800;
  box-sizing: border-box;
}

body.vip-page .vip-hero-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.02em;
}

body.vip-page .level-box .dsai-level {
  margin-top: 0;
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 10px rgba(120, 10, 60, 0.18);
}

body.vip-page .vip-balance {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  backdrop-filter: blur(8px);
  box-sizing: border-box;
}

body.vip-page .vip-balance-label {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

body.vip-page .vip-balance-value {
  color: #fff !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em;
}

body.vip-page .vip-section-title {
  margin: 0 2px 12px !important;
  padding: 0 2px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--sc-text) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em;
}

body.vip-page .sdahxu {
  margin: 0 0 10px !important;
  padding: 10px 12px !important;
  border-radius: 14px;
  background: #fffafd;
  border: 1px solid rgba(255, 45, 135, 0.08);
  color: var(--sc-text) !important;
  font-size: 14px !important;
  font-weight: 700;
  text-align: left !important;
  box-sizing: border-box;
}

body.vip-page .sdahxu span {
  color: var(--sc-pink) !important;
  font-weight: 900;
}

body.vip-page #level-swiper,
body.vip-page .swiper-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  left: auto !important;
  transform: none !important;
}

body.vip-page .swiper-slide {
  width: 100% !important;
  box-sizing: border-box !important;
}

body.vip-page .sjwka {
  display: flex;
  width: 100% !important;
  max-width: 100% !important;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  box-sizing: border-box;
}

body.vip-page .sjwka-item {
  position: relative;
  width: calc(50% - 5px) !important;
  max-width: calc(50% - 5px) !important;
  flex: 0 0 calc(50% - 5px);
  margin: 0 !important;
  padding: 18px 12px 14px !important;
  border-radius: 20px !important;
  background: #fff !important;
  background-image: none !important;
  border: 1px solid rgba(255, 45, 135, 0.1);
  box-shadow: 0 12px 28px rgba(34, 20, 28, 0.07);
  box-sizing: border-box !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
}

body.vip-page .sjwka-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff2d87, #ff8cbc);
}

body.vip-page .sjwka-item:active {
  transform: scale(0.985);
}

body.vip-page .sjwka-item.lv {
  border-color: rgba(255, 45, 135, 0.34);
  background:
    radial-gradient(circle at 100% 0, rgba(255, 45, 135, 0.1), transparent 70px),
    linear-gradient(180deg, #fff8fb 0%, #fff 72%) !important;
  box-shadow: 0 14px 30px rgba(255, 45, 135, 0.16);
}

body.vip-page .sjwka-item.lv::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sc-pink);
  box-shadow: 0 0 0 4px rgba(255, 45, 135, 0.16);
}

body.vip-page .sjwka-item .sadko {
  position: relative;
  z-index: 1;
  color: var(--sc-text);
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

body.vip-page .sjwka-item .kjfdsd {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 100%;
  margin: 10px 0 12px;
  padding: 6px 0;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 45, 135, 0.1), rgba(255, 107, 168, 0.08));
  color: var(--sc-pink);
  font-size: 20px;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.01em;
}

body.vip-page .sjwka-item .icka {
  position: relative;
  z-index: 1;
  color: #666;
  font-size: 11px;
  line-height: 1.7;
  text-align: left;
  padding: 0 2px;
}

body.vip-page .sjwka-item .djakl {
  position: relative;
  z-index: 1;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255, 45, 135, 0.16);
  color: #8c8c8c;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
}

/* modal 挂在 body 下，固定在 H5 壳内 */
body.vip-page .modal-overlay {
  position: fixed !important;
  top: 0 !important;
  left: var(--h5-shell-left) !important;
  right: auto !important;
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  height: 100% !important;
  box-sizing: border-box !important;
  transform: none !important;
}

body.vip-page .modal {
  position: fixed !important;
  left: var(--h5-shell-left) !important;
  right: auto !important;
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  margin-left: 0 !important;
  padding: 0 24px;
  border-radius: 0 !important;
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  transform: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.vip-page .modal .modal-inner {
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 auto;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 18px 42px rgba(34, 20, 28, 0.18);
}

body.vip-page .modal .dasd-title {
  padding: 22px 18px 16px;
  color: var(--sc-text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

body.vip-page .modal .btn-box {
  display: flex;
  gap: 12px;
  padding: 0 16px 18px;
}

body.vip-page .modal .cancel-btn,
body.vip-page .modal .confirm-btn {
  flex: 1;
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
}

body.vip-page .modal .cancel-btn {
  background: #f8f8f8;
  color: #666;
  border: 1px solid #eee;
}

body.vip-page .modal .confirm-btn {
  background: linear-gradient(135deg, #ff2d87 0%, #ff6ba8 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 45, 135, 0.26);
}

/* ========== Bank list page ========== */
body.bank-list-page {
  background: #f7f7f8 !important;
  height: auto !important;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto !important;
}

body.bank-list-page .wrapper.homepage {
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box;
}

body.bank-list-page header.bank-list-nav {
  position: fixed !important;
  top: 0 !important;
  left: var(--h5-shell-left) !important;
  right: auto !important;
  margin: 0 !important;
  z-index: 100;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  height: 52px !important;
  padding: 0 12px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  background-image: none !important;
  color: var(--sc-text) !important;
  border-bottom: 1px solid rgba(255, 45, 135, 0.1);
  box-shadow: 0 10px 26px rgba(255, 45, 135, 0.08);
  backdrop-filter: blur(12px);
  box-sizing: border-box;
  font-size: 16px;
}

body.bank-list-page .bank-list-nav-btn {
  position: relative;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff0f7, #ffe1ef);
  color: var(--sc-pink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  flex-shrink: 0;
}

body.bank-list-page .bank-list-nav-btn .material-icons {
  font-size: 22px;
  line-height: 1;
  color: var(--sc-pink);
}

body.bank-list-page .bank-list-nav-title {
  position: absolute;
  left: 0;
  right: 0;
  height: 52px;
  margin: 0;
  padding: 0 56px;
  color: var(--sc-text);
  font-size: 16px;
  font-weight: 900;
  line-height: 52px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-sizing: border-box;
}

body.bank-list-page .bank-list-container.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 66px 14px 20px !important;
  box-sizing: border-box;
}

body.bank-list-page .bank-list-head {
  margin: 0 2px 12px;
}

body.bank-list-page .bank-list-head-title {
  color: var(--sc-text);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.4;
}

body.bank-list-page .bank-list-head-desc {
  margin-top: 4px;
  color: var(--sc-muted);
  font-size: 12px;
  font-weight: 600;
}

body.bank-list-page .bank-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.bank-list-page .bank-card-item {
  margin: 0 0 12px;
  padding: 14px 14px 10px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(255, 45, 135, 0.1);
  box-shadow: 0 10px 24px rgba(255, 45, 135, 0.08);
  cursor: pointer;
  box-sizing: border-box;
}

body.bank-list-page .bank-card-item.is-default {
  border-color: rgba(255, 45, 135, 0.28);
  background:
    linear-gradient(180deg, #fffafc 0%, #ffffff 48%);
}

body.bank-list-page .bank-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255, 45, 135, 0.12);
}

body.bank-list-page .bank-card-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #fff0f7, #ffe1ef);
}

body.bank-list-page .bank-card-icon .material-icons {
  color: var(--sc-pink);
  font-size: 24px;
}

body.bank-list-page .bank-card-top-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.bank-list-page .bank-card-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sc-text);
  font-size: 15px;
  font-weight: 900;
}

body.bank-list-page .bank-card-badge {
  flex-shrink: 0;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  background: linear-gradient(135deg, #ff2d87 0%, #ff6ba8 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 22px;
}

body.bank-list-page .bank-card-arrow {
  color: #c9c9c9 !important;
  font-size: 22px !important;
}

body.bank-list-page .bank-card-body {
  display: flex;
  flex-direction: column;
}

body.bank-list-page .bank-card-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
}

body.bank-list-page .bank-card-label {
  flex-shrink: 0;
  color: var(--sc-muted);
  font-size: 13px;
  font-weight: 700;
}

body.bank-list-page .bank-card-value {
  min-width: 0;
  text-align: right;
  color: var(--sc-text);
  font-size: 13px;
  font-weight: 800;
  word-break: break-all;
  line-height: 1.45;
}

body.bank-list-page .bank-list-empty {
  margin-top: 36px;
  padding: 36px 20px 28px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(255, 45, 135, 0.1);
  box-shadow: 0 12px 28px rgba(255, 45, 135, 0.08);
  text-align: center;
}

body.bank-list-page .bank-list-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #fff0f7, #ffe1ef);
}

body.bank-list-page .bank-list-empty-icon .material-icons {
  color: var(--sc-pink);
  font-size: 32px;
}

body.bank-list-page .bank-list-empty-title {
  color: var(--sc-text);
  font-size: 16px;
  font-weight: 900;
}

body.bank-list-page .bank-list-empty-desc {
  margin-top: 6px;
  color: var(--sc-muted);
  font-size: 13px;
  font-weight: 600;
}

body.bank-list-page .bank-list-empty-btn {
  margin-top: 18px;
  min-width: 140px;
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(135deg, #ff2d87 0%, #ff6ba8 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(255, 45, 135, 0.26);
  cursor: pointer;
}

body.bank-list-page .layui-m-layershade,
body.bank-list-page .layui-m-layermain {
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  left: var(--h5-shell-left) !important;
  right: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

body.bank-list-page .layui-m-layerchild {
  max-width: calc(var(--h5-shell-width) - 28px) !important;
  box-sizing: border-box !important;
}

/* ========== Add / Edit bank form ========== */
body.bank-form-page {
  background: #f7f7f8 !important;
  height: auto !important;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto !important;
}

body.bank-form-page .wrapper.homepage {
  height: auto !important;
  min-height: 0 !important;
  background: transparent !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box;
}

body.bank-form-page header.bank-form-nav {
  position: fixed !important;
  top: 0 !important;
  left: var(--h5-shell-left) !important;
  right: auto !important;
  margin: 0 !important;
  z-index: 100;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: var(--h5-shell-width) !important;
  max-width: var(--h5-shell-width) !important;
  height: 52px !important;
  padding: 0 12px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  background-image: none !important;
  color: var(--sc-text) !important;
  border-bottom: 1px solid rgba(255, 45, 135, 0.1);
  box-shadow: 0 10px 26px rgba(255, 45, 135, 0.08);
  backdrop-filter: blur(12px);
  box-sizing: border-box;
  font-size: 16px;
}

body.bank-form-page .bank-form-nav-btn,
body.bank-form-page .bank-form-nav-placeholder {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

body.bank-form-page .bank-form-nav-btn {
  position: relative;
  z-index: 2;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff0f7, #ffe1ef);
  color: var(--sc-pink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
}

body.bank-form-page .bank-form-nav-btn .material-icons {
  font-size: 22px;
  line-height: 1;
  color: var(--sc-pink);
}

body.bank-form-page .bank-form-nav-title {
  position: absolute;
  left: 0;
  right: 0;
  height: 52px;
  margin: 0;
  padding: 0 56px;
  color: var(--sc-text);
  font-size: 16px;
  font-weight: 900;
  line-height: 52px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-sizing: border-box;
}

body.bank-form-page .bank-form-container.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 66px 14px 20px !important;
  box-sizing: border-box;
}

body.bank-form-page .bank-form-card {
  padding: 16px 14px 8px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(255, 45, 135, 0.1);
  box-shadow: 0 12px 28px rgba(255, 45, 135, 0.08);
}

body.bank-form-page .bank-form-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 4px 2px 14px;
  border-bottom: 1px dashed rgba(255, 45, 135, 0.12);
}

body.bank-form-page .bank-form-head-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #fff0f7, #ffe1ef);
}

body.bank-form-page .bank-form-head-icon .material-icons {
  color: var(--sc-pink);
  font-size: 26px;
}

body.bank-form-page .bank-form-head-title {
  color: var(--sc-text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

body.bank-form-page .bank-form-head-desc {
  margin-top: 3px;
  color: var(--sc-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

body.bank-form-page .bank-form-item {
  padding: 12px 2px;
  border-bottom: 1px solid rgba(255, 45, 135, 0.08);
}

body.bank-form-page .bank-form-item:last-of-type {
  border-bottom: 0;
}

body.bank-form-page .bank-form-label {
  display: block;
  margin-bottom: 8px;
  color: var(--sc-muted);
  font-size: 12px;
  font-weight: 800;
}

body.bank-form-page .bank-form-input {
  height: 44px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 45, 135, 0.14);
  background: linear-gradient(180deg, #fffafc 0%, #fff5f9 100%);
  box-sizing: border-box;
}

body.bank-form-page .bank-form-input input {
  width: 100%;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--sc-text);
  font-size: 14px;
  font-weight: 700;
}

body.bank-form-page .bank-form-input input::placeholder {
  color: #b0b0b0;
  font-weight: 600;
}

body.bank-form-page .bank-form-switch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  margin-top: 4px;
  padding: 8px 2px 12px;
}

body.bank-form-page .bank-form-switch-text {
  color: var(--sc-text);
  font-size: 14px;
  font-weight: 800;
}

body.bank-form-page .bank-form-switch > input {
  display: none;
}

body.bank-form-page .bank-form-switch > label {
  position: relative;
  width: 46px;
  height: 28px;
  margin: 0;
  border-radius: 999px;
  background: #e8e8e8;
  cursor: pointer;
  transition: background 0.2s ease;
}

body.bank-form-page .bank-form-switch > label::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
  transition: left 0.2s ease;
}

body.bank-form-page .bank-form-switch > input:checked + label {
  background: linear-gradient(135deg, #ff2d87 0%, #ff6ba8 100%);
}

body.bank-form-page .bank-form-switch > input:checked + label::after {
  left: 21px;
}

body.bank-form-page .bank-form-submit.btn {
  width: 100%;
  height: 48px;
  margin: 18px 0 0 !important;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(135deg, #ff2d87 0%, #ff6ba8 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 48px;
  text-align: center;
  box-shadow: 0 12px 24px rgba(255, 45, 135, 0.28);
  cursor: pointer;
}