/* 全局拟态科技主题覆盖：只改视觉层，不改接口与业务逻辑。 */
:root {
  --neo-page: #e8f0f8;
  --neo-page-deep: #dbe7f2;
  --neo-surface: #eef5fb;
  --neo-surface-2: #e4eef7;
  --neo-text: #102033;
  --neo-text-soft: #4d6075;
  --neo-muted: #728397;
  --neo-primary: #1877ff;
  --neo-primary-2: #00b8d9;
  --neo-success: #16b887;
  --neo-warning: #f5a524;
  --neo-danger: #f0526b;
  --neo-border: rgba(120, 149, 180, 0.28);
  --neo-light: rgba(255, 255, 255, 0.92);
  --neo-shadow-dark: rgba(101, 125, 150, 0.28);
  --neo-shadow-light: rgba(255, 255, 255, 0.95);
  --neo-shadow: 0.12rem 0.12rem 0.32rem var(--neo-shadow-dark), -0.12rem -0.12rem 0.32rem var(--neo-shadow-light);
  --neo-shadow-sm: 0.06rem 0.06rem 0.18rem rgba(101, 125, 150, 0.22), -0.06rem -0.06rem 0.18rem rgba(255, 255, 255, 0.9);
  --neo-inset: inset 0.07rem 0.07rem 0.18rem rgba(101, 125, 150, 0.22), inset -0.07rem -0.07rem 0.18rem rgba(255, 255, 255, 0.9);
  --neo-radius: 0.22rem;
}

html,
body {
  background: var(--neo-page);
  color: var(--neo-text);
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(0.04rem);
}

html::before {
  content: "";
  position: fixed;
  inset: -18% -12%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 111, 145, 0.12), transparent 16%),
    radial-gradient(circle at 72% 18%, rgba(255, 210, 87, 0.1), transparent 18%),
    radial-gradient(circle at 78% 74%, rgba(92, 255, 203, 0.12), transparent 18%),
    radial-gradient(circle at 28% 82%, rgba(96, 156, 255, 0.12), transparent 19%),
    conic-gradient(from 120deg at 50% 50%, rgba(255, 111, 145, 0.06), rgba(255, 210, 87, 0.045), rgba(92, 255, 203, 0.055), rgba(96, 156, 255, 0.06), rgba(255, 111, 145, 0.06));
  filter: blur(0.18rem) saturate(120%);
  opacity: 0.68;
  animation: neoAuroraDrift 28s ease-in-out infinite alternate;
}

body::before {
  width: 5rem;
  height: 5rem;
  left: 1.4rem;
  top: 0.7rem;
  background: radial-gradient(circle, rgba(0, 184, 217, 0.2), transparent 68%);
}

body::after {
  width: 5.6rem;
  height: 5.6rem;
  right: -1.2rem;
  bottom: -1rem;
  background: radial-gradient(circle, rgba(24, 119, 255, 0.16), transparent 66%);
}

.template,
.el-container,
.el-main {
  background: transparent !important;
}

.el-main {
  min-height: 100vh;
  padding: 0 !important;
}

.main-card,
.finance,
.account,
.security,
.security-box,
.product-list,
.product-detail,
.order-detail,
.withdrawal,
.transfer,
.agreement,
.news,
.not-found,
.no-permissions,
.network-error {
  position: relative;
  box-sizing: border-box;
  min-height: calc(100vh - 0.2rem);
  padding: 0.28rem;
  background:
    radial-gradient(circle at var(--neo-aurora-x, 18%) var(--neo-aurora-y, 14%), rgba(255, 111, 145, 0.07), transparent 1.5rem),
    radial-gradient(circle at 86% 18%, rgba(92, 255, 203, 0.065), transparent 1.7rem),
    radial-gradient(circle at 38% 88%, rgba(96, 156, 255, 0.07), transparent 1.8rem),
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.9), transparent 0.9rem),
    radial-gradient(circle at 92% 8%, rgba(0, 184, 217, 0.12), transparent 1.6rem),
    linear-gradient(135deg, var(--neo-page), var(--neo-page-deep));
  animation: neoPanelGlow 36s ease-in-out infinite alternate;
}

.main-card::before,
.finance::before,
.account::before,
.security::before,
.product-list::before,
.product-detail::before,
.order-detail::before,
.withdrawal::before,
.transfer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(24, 119, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 119, 255, 0.04) 1px, transparent 1px);
  background-size: 0.42rem 0.42rem;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), transparent 72%);
}

.main-card > *,
.finance > *,
.account > *,
.security > *,
.product-list > *,
.product-detail > *,
.order-detail > *,
.withdrawal > *,
.transfer > * {
  position: relative;
  z-index: 1;
}

.el-card,
.el-dialog,
.el-popover,
.el-dropdown-menu,
.el-message-box,
.finance-top,
.content_box,
.content-box,
.content,
.box,
.list-box,
.table-box,
.search-box,
.filter-box,
.form-box,
.info-box,
.top-box,
.bottom-box,
.main-box,
.right-box,
.left-box,
.host-card,
.goods-item,
.product-item,
.withdrawal-box,
.transfer-box,
.security-content,
.security-item,
.account-content,
.certification-box,
.order-content,
.news-content,
.agreement-content {
  background: var(--neo-surface) !important;
  border: 1px solid var(--neo-border) !important;
  border-radius: var(--neo-radius) !important;
  box-shadow: var(--neo-shadow) !important;
}

.el-card__header,
.finance .finance-top .finance-title,
.title,
.title-text,
.page-title,
.section-title,
.content-title,
.box-title {
  color: var(--neo-text) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01rem;
}

.el-card__body,
.el-dialog__body,
.el-form-item__label,
.el-radio,
.el-checkbox,
.el-tabs__item,
.el-table,
.el-table th,
.el-table tr,
.el-table td,
.el-descriptions,
.el-descriptions__body,
.el-pagination,
.finance,
.account,
.security,
.product-list,
.order-detail {
  color: var(--neo-text) !important;
}

p,
span,
div,
label,
.desc,
.tips,
.tip,
.text,
.sub-title,
.sub-text,
.el-table__empty-text,
.el-form-item__error {
  text-rendering: optimizeLegibility;
}

.tips,
.tip,
.desc,
.sub-text,
.el-form-item__label,
.el-table th>.cell,
.el-tabs__item,
.el-pagination__total,
.el-pagination__jump {
  color: var(--neo-text-soft) !important;
}

a,
.a-text,
.blue,
.bule-text,
.gateway-pay,
.freeze-list,
.tx-list,
.el-link.el-link--primary,
.el-button--text {
  color: var(--neo-primary) !important;
  font-weight: 600;
}

a:hover,
.a-text:hover,
.gateway-pay:hover,
.freeze-list:hover,
.tx-list:hover,
.el-button--text:hover {
  color: var(--neo-primary-2) !important;
}

.el-button,
.btn,
.more,
.copy-btn,
.search-btn,
.operate-btn {
  border-radius: 0.14rem !important;
  border: 1px solid rgba(124, 156, 190, 0.48) !important;
  background: var(--neo-surface) !important;
  color: var(--neo-text) !important;
  box-shadow: var(--neo-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(104, 129, 154, 0.12) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
}

.el-button:hover,
.btn:hover,
.more:hover,
.copy-btn:hover,
.search-btn:hover,
.operate-btn:hover {
  transform: translateY(-0.02rem);
  box-shadow: 0.09rem 0.09rem 0.22rem rgba(101, 125, 150, 0.3), -0.09rem -0.09rem 0.22rem rgba(255, 255, 255, 0.95) !important;
}

.el-button:active,
.btn:active,
.more:active,
.copy-btn:active,
.search-btn:active,
.operate-btn:active {
  transform: translateY(0);
  box-shadow: var(--neo-inset) !important;
}

.el-button--primary,
.btn-ok,
.confirm-btn,
.pay-btn,
.recharge-btn,
.no-recommend,
.el-button.el-button--primary {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--neo-primary), var(--neo-primary-2)) !important;
  border: 1px solid rgba(255, 255, 255, 0.52) !important;
  box-shadow: 0.1rem 0.1rem 0.24rem rgba(24, 119, 255, 0.28), -0.06rem -0.06rem 0.18rem rgba(255, 255, 255, 0.88), inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(0, 56, 130, 0.28) !important;
}

.el-button--danger,
.el-button.el-button--danger {
  color: #ffffff !important;
  background: linear-gradient(135deg, #ff6a7f, #e93252) !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
}

.el-button--success,
.el-button.el-button--success {
  color: #ffffff !important;
  background: linear-gradient(135deg, #26d5a5, #10a876) !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
}

.el-button--text,
.el-link,
.a-text,
.gateway-pay,
.freeze-list,
.tx-list {
  border-radius: 0.1rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.el-button.is-plain,
.balance-tx-btn,
.btn-no,
.cancel-btn {
  border: 1px solid rgba(24, 119, 255, 0.36) !important;
  background: rgba(238, 245, 251, 0.72) !important;
  box-shadow: var(--neo-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.el-input__inner,
.el-textarea__inner,
.el-select .el-input__inner,
.el-date-editor.el-input,
.el-date-editor .el-input__inner,
.el-range-editor.el-input__inner {
  color: var(--neo-text) !important;
  background: linear-gradient(145deg, rgba(213, 226, 239, 0.96), rgba(244, 249, 253, 0.92)) !important;
  border: 1px solid rgba(121, 151, 181, 0.42) !important;
  border-radius: 0.16rem !important;
  box-shadow: inset 0.08rem 0.08rem 0.2rem rgba(91, 115, 140, 0.24), inset -0.08rem -0.08rem 0.2rem rgba(255, 255, 255, 0.96), 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  line-height: 1.45 !important;
}

.el-input__inner,
.el-select .el-input__inner,
.el-date-editor .el-input__inner {
  padding-left: 0.18rem !important;
  padding-right: 0.18rem !important;
}

.el-input--prefix .el-input__inner {
  padding-left: 0.42rem !important;
}

.el-input--suffix .el-input__inner,
.el-select .el-input--suffix .el-input__inner {
  padding-right: 0.42rem !important;
}

.el-textarea__inner {
  min-height: 0.92rem !important;
  padding: 0.14rem 0.18rem !important;
}

.el-range-editor.el-input__inner {
  padding: 0.03rem 0.14rem !important;
}

.el-range-editor .el-range-input {
  color: var(--neo-text) !important;
  background: transparent !important;
}

.el-range-editor .el-range-separator {
  color: var(--neo-text-soft) !important;
}

.el-input-group__prepend,
.el-input-group__append {
  color: var(--neo-text-soft) !important;
  background: rgba(232, 240, 248, 0.82) !important;
  border-color: rgba(121, 151, 181, 0.34) !important;
  box-shadow: inset 0.04rem 0.04rem 0.1rem rgba(91, 115, 140, 0.16), inset -0.04rem -0.04rem 0.1rem rgba(255, 255, 255, 0.8) !important;
}

.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
  color: var(--neo-muted) !important;
}

.el-input__inner:focus,
.el-textarea__inner:focus,
.el-select .el-input.is-focus .el-input__inner {
  border-color: rgba(24, 119, 255, 0.58) !important;
  background: linear-gradient(145deg, rgba(209, 224, 238, 0.98), rgba(248, 252, 255, 0.94)) !important;
  box-shadow: inset 0.09rem 0.09rem 0.22rem rgba(79, 107, 137, 0.28), inset -0.09rem -0.09rem 0.22rem rgba(255, 255, 255, 0.98), 0 0 0 0.035rem rgba(24, 119, 255, 0.13) !important;
}

.el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-textarea__inner {
  border-color: rgba(240, 82, 107, 0.62) !important;
  box-shadow: inset 0.08rem 0.08rem 0.2rem rgba(91, 115, 140, 0.24), inset -0.08rem -0.08rem 0.2rem rgba(255, 255, 255, 0.96), 0 0 0 0.035rem rgba(240, 82, 107, 0.12) !important;
}

.el-input__prefix,
.el-input__suffix,
.el-select .el-input .el-select__caret {
  color: var(--neo-muted) !important;
}

.el-table,
.el-table__expanded-cell,
.el-table th,
.el-table tr,
.el-table td {
  background: transparent !important;
}

.el-table {
  border-radius: 0.18rem !important;
  overflow: hidden;
}

.el-table th {
  background: rgba(255, 255, 255, 0.48) !important;
}

.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid rgba(120, 149, 180, 0.18) !important;
}

.el-table--enable-row-hover .el-table__body tr:hover>td {
  background: rgba(24, 119, 255, 0.065) !important;
}

.el-table::before,
.el-table--border::after,
.el-table--group::after {
  background-color: rgba(120, 149, 180, 0.18) !important;
}

.el-tabs__nav-wrap::after {
  background-color: rgba(120, 149, 180, 0.2) !important;
}

.el-tabs__item.is-active,
.el-tabs__item:hover {
  color: var(--neo-primary) !important;
}

.el-tabs__active-bar {
  height: 0.04rem !important;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--neo-primary), var(--neo-primary-2)) !important;
}

.el-pagination.is-background .el-pager li,
.el-pagination .btn-prev,
.el-pagination .btn-next {
  background: var(--neo-surface) !important;
  color: var(--neo-text-soft) !important;
  border-radius: 0.12rem !important;
  box-shadow: var(--neo-shadow-sm) !important;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  color: #ffffff !important;
  background: linear-gradient(135deg, var(--neo-primary), var(--neo-primary-2)) !important;
}

.el-dialog,
.el-message-box {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.9), transparent 1.4rem),
    var(--neo-surface) !important;
}

.el-dialog__title,
.el-message-box__title {
  color: var(--neo-text) !important;
  font-weight: 700 !important;
}

.el-dialog__header,
.el-message-box__header {
  border-bottom: 1px solid rgba(120, 149, 180, 0.16);
}

.el-loading-mask {
  background-color: rgba(232, 240, 248, 0.72) !important;
  backdrop-filter: blur(0.06rem);
  -webkit-backdrop-filter: blur(0.06rem);
}

.el-loading-spinner .path {
  stroke: var(--neo-primary) !important;
}

.status-tag,
.balance-tag,
.el-tag {
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: inset 0.03rem 0.03rem 0.08rem rgba(101, 125, 150, 0.16), inset -0.03rem -0.03rem 0.08rem rgba(255, 255, 255, 0.85);
}

.status-tag.Unpaid,
.el-tag--danger {
  color: #d92d4b !important;
  background: rgba(240, 82, 107, 0.14) !important;
}

.status-tag.Paid,
.el-tag--success {
  color: #0d9168 !important;
  background: rgba(22, 184, 135, 0.14) !important;
}

.status-tag.Wait,
.el-tag--warning {
  color: #b97900 !important;
  background: rgba(245, 165, 36, 0.16) !important;
}

.status-tag.Refunded,
.el-tag--info {
  color: #2365b8 !important;
  background: rgba(24, 119, 255, 0.12) !important;
}

.finance .finance-top .finance-money-main .finance-balance .balance-left .balance-left-num,
.finance .finance-top .finance-money-main .finance-other-money .other-money-item .other-money-item-value,
.num,
.number,
.price,
.money,
.amount {
  color: var(--neo-text) !important;
  font-weight: 800 !important;
}

.finance .finance-top .finance-money-main,
.finance .finance-top .finance-title,
.el-card__header {
  border-color: rgba(120, 149, 180, 0.16) !important;
}

.finance .finance-top .finance-money-main .finance-other-money {
  border-top-color: rgba(120, 149, 180, 0.2) !important;
}

.finance .finance-top .finance-money-main .finance-other-money .other-money-item {
  border-left-color: rgba(120, 149, 180, 0.18) !important;
}

.aside-menu,
.top-menu,
.el-aside,
.el-header {
  background: rgba(238, 245, 251, 0.92) !important;
  border-color: rgba(120, 149, 180, 0.18) !important;
  box-shadow: var(--neo-shadow-sm) !important;
  backdrop-filter: blur(0.1rem);
  -webkit-backdrop-filter: blur(0.1rem);
}

.el-menu,
.el-menu-item,
.el-submenu__title {
  background: transparent !important;
  color: var(--neo-text-soft) !important;
}

.el-menu-item.is-active,
.el-submenu.is-active>.el-submenu__title,
.el-menu-item:hover,
.el-submenu__title:hover {
  color: var(--neo-primary) !important;
  background: rgba(24, 119, 255, 0.08) !important;
  border-radius: 0.14rem;
}

#login,
#regist,
#forget {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 18%, rgba(0, 184, 217, 0.2), transparent 1.8rem),
    radial-gradient(circle at 86% 76%, rgba(24, 119, 255, 0.16), transparent 2.2rem),
    linear-gradient(135deg, var(--neo-page), var(--neo-page-deep));
}

.login-container,
.regist-container,
.forget-container {
  filter: none;
}

.container-back {
  background:
    linear-gradient(135deg, rgba(24, 119, 255, 0.95), rgba(0, 184, 217, 0.88)) !important;
  border-radius: 0.34rem !important;
  box-shadow: var(--neo-shadow) !important;
}

.container-before,
.login-box,
.regist-box,
.forget-box {
  background: var(--neo-surface) !important;
  border: 1px solid var(--neo-border) !important;
  border-radius: 0.28rem !important;
  box-shadow: var(--neo-shadow) !important;
}

.read-text,
.login .qr-box .qr-box-tips {
  color: var(--neo-text-soft) !important;
}

img,
svg {
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  html::before,
  .main-card,
  .finance,
  .account,
  .security,
  .product-list,
  .product-detail,
  .order-detail,
  .withdrawal,
  .transfer {
    animation: none !important;
  }
}

@keyframes neoAuroraDrift {
  0% {
    transform: translate3d(-1.2%, -0.8%, 0) rotate(0deg) scale(1);
  }
  37% {
    transform: translate3d(1.8%, 1.1%, 0) rotate(7deg) scale(1.04);
  }
  71% {
    transform: translate3d(-0.6%, 1.9%, 0) rotate(-5deg) scale(1.02);
  }
  100% {
    transform: translate3d(1.2%, -1.4%, 0) rotate(4deg) scale(1.06);
  }
}

@keyframes neoPanelGlow {
  0% {
    --neo-aurora-x: 18%;
    --neo-aurora-y: 14%;
  }
  43% {
    --neo-aurora-x: 32%;
    --neo-aurora-y: 24%;
  }
  100% {
    --neo-aurora-x: 22%;
    --neo-aurora-y: 38%;
  }
}

@media screen and (max-width: 1280px) {
  .main-card,
  .finance,
  .account,
  .security,
  .product-list,
  .product-detail,
  .order-detail,
  .withdrawal,
  .transfer {
    padding: 0.22rem;
  }
}

@media screen and (max-width: 768px) {
  .main-card,
  .finance,
  .account,
  .security,
  .product-list,
  .product-detail,
  .order-detail,
  .withdrawal,
  .transfer,
  .agreement,
  .news {
    padding: 0.16rem;
  }

  .finance .finance-top .finance-money-main .finance-balance,
  .finance .finance-top .finance-money-main .finance-other-money,
  .content_searchbar,
  .search-box,
  .filter-box {
    align-items: stretch !important;
    flex-direction: column !important;
    gap: 0.14rem !important;
  }

  .finance .finance-top .finance-money-main .finance-other-money .other-money-item {
    padding: 0 !important;
    border-left: 0 !important;
  }

  .el-dialog,
  .el-message-box {
    width: calc(100vw - 0.32rem) !important;
  }
}

@media screen and (max-width: 520px) {
  .main-card,
  .finance,
  .account,
  .security,
  .product-list,
  .product-detail,
  .order-detail,
  .withdrawal,
  .transfer,
  .agreement,
  .news {
    padding: 0.12rem;
  }

  .el-card,
  .el-dialog,
  .finance-top,
  .content_box,
  .content-box,
  .box,
  .list-box,
  .table-box,
  .form-box,
  .info-box,
  .main-box {
    border-radius: 0.18rem !important;
  }

  .el-table {
    font-size: 0.12rem;
  }
}