/* 888 VPS customer portal visual layer — keep business templates upgrade-safe. */
:root {
  --vps-ink: #10213f;
  --vps-muted: #64748b;
  --vps-line: #e5eaf2;
  --vps-surface: #ffffff;
  --vps-canvas: #f5f7fb;
  --vps-primary: #1769e0;
  --vps-primary-strong: #0b4fb3;
  --vps-accent: #00c2ff;
  --vps-radius: 16px;
  --vps-shadow: 0 14px 38px rgba(15, 35, 70, 0.08);
  --color-primary: var(--vps-primary) !important;
}

html,
body {
  overflow-x: hidden;
  background: var(--vps-canvas) !important;
  color: var(--vps-ink);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 80% -10%, rgba(0, 194, 255, 0.10), transparent 33%),
    radial-gradient(circle at 12% 104%, rgba(23, 105, 224, 0.08), transparent 30%),
    var(--vps-canvas);
}

/* App shell */
.template > .el-container {
  min-height: 100vh;
}

.el-aside {
  position: relative;
  overflow: hidden !important;
  width: 214px !important;
  padding: 22px 14px 18px;
  border-right: 0 !important;
  background: linear-gradient(180deg, #0c1d3a 0%, #102a55 58%, #0b1d3a 100%) !important;
  box-shadow: 12px 0 34px rgba(10, 29, 58, 0.10);
}

.el-aside::after {
  position: absolute;
  right: -80px;
  bottom: -70px;
  width: 210px;
  height: 210px;
  content: "";
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 194, 255, 0.18), transparent 68%);
  pointer-events: none;
}

.el-aside .menu-alink:first-child {
  position: relative;
  display: flex;
  height: 64px;
  margin: 0 8px 20px;
  align-items: center;
  text-decoration: none;
}

.el-aside .menu-alink:first-child::before {
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  content: "";
  border: 0;
  background: url("/upload/common/default/vps-brand-icon.png?v=20260818") center / contain no-repeat;
  box-shadow: none;
}

.el-aside .menu-alink:first-child::after {
  margin-left: 11px;
  content: "VPS CLOUD";
  color: #fff;
  font-size: 15px;
  font-weight: 760;
  letter-spacing: 0.08em;
}

.el-aside .ali-logo {
  display: none !important;
}

.el-aside .el-menu,
.el-aside .el-submenu,
.el-aside .el-menu-item,
.el-aside .el-submenu__title {
  border: 0 !important;
  background: transparent !important;
}

.el-aside .el-menu-item,
.el-aside .el-submenu__title {
  height: 48px !important;
  margin: 5px 0;
  padding: 0 15px !important;
  line-height: 48px !important;
  border-radius: 12px;
  color: #b9c8df !important;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.el-aside .el-menu-item:hover,
.el-aside .el-submenu__title:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  transform: translateX(2px);
}

.el-aside .el-menu-item.is-active {
  color: #fff !important;
  background: linear-gradient(100deg, rgba(23, 105, 224, 0.96), rgba(0, 194, 255, 0.72)) !important;
  box-shadow: 0 8px 22px rgba(0, 128, 255, 0.22);
}

.el-aside .iconfont {
  margin-right: 11px;
  color: currentColor !important;
  font-size: 18px !important;
}

.el-aside .line {
  margin: 14px 12px;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

.el-header {
  height: 70px !important;
  padding: 0 28px !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.84);
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 6px 22px rgba(15, 35, 70, 0.04);
  backdrop-filter: blur(18px);
}

.el-header .right-item,
.el-header .header-right-item {
  border-radius: 10px;
}

.el-header .head-box {
  color: #fff !important;
  background: linear-gradient(145deg, var(--vps-primary), var(--vps-accent)) !important;
  box-shadow: 0 6px 18px rgba(23, 105, 224, 0.20);
}

.el-main {
  padding: 26px 30px 40px !important;
  background: transparent !important;
}

/* Surfaces */
.main-card,
.el-card,
.content_box,
.finance-top,
.info-box,
.goods-box,
.recommend-box,
.WorkOrder-box,
.notice-box {
  border: 1px solid rgba(226, 232, 240, 0.92) !important;
  border-radius: var(--vps-radius) !important;
  background: var(--vps-surface) !important;
  box-shadow: var(--vps-shadow) !important;
}

.main-card {
  overflow: hidden;
}

.el-card__header {
  padding: 20px 24px !important;
  border-bottom-color: var(--vps-line) !important;
  color: var(--vps-ink);
  font-weight: 700;
}

.title-text,
.finance-title,
.page-title,
.content-title,
h1,
h2,
h3 {
  color: var(--vps-ink) !important;
  letter-spacing: -0.015em;
}

/* Form controls */
.el-input__inner,
.el-textarea__inner,
.el-select .el-input__inner {
  border-color: #dbe3ef !important;
  border-radius: 10px !important;
  background: #fbfcfe !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.el-input__inner:hover,
.el-textarea__inner:hover {
  border-color: #aac4e8 !important;
  background: #fff !important;
}

.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: var(--vps-primary) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(23, 105, 224, 0.10) !important;
}

.el-button {
  min-height: 38px;
  border-radius: 10px !important;
  font-weight: 650;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.el-button:hover {
  transform: translateY(-1px);
}

.el-button--primary {
  border-color: transparent !important;
  background: linear-gradient(100deg, var(--vps-primary), #078ee8) !important;
  box-shadow: 0 8px 18px rgba(23, 105, 224, 0.18);
}

.el-button--primary:hover,
.el-button--primary:focus {
  opacity: .94;
  box-shadow: 0 10px 22px rgba(23, 105, 224, 0.26);
}

.el-tabs__item {
  color: var(--vps-muted) !important;
  font-weight: 600;
}

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

.el-tabs__active-bar {
  height: 3px !important;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--vps-primary), var(--vps-accent)) !important;
}

.el-table {
  overflow: hidden;
  border-radius: 12px;
  color: var(--vps-ink) !important;
}

.el-table th,
.el-table__header-wrapper {
  color: #53657e !important;
  background: #f7f9fc !important;
}

.el-table td,
.el-table th.is-leaf {
  border-bottom-color: #edf1f6 !important;
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: #f3f7fd !important;
}

.el-dialog {
  overflow: hidden;
  border-radius: 18px !important;
  box-shadow: 0 30px 70px rgba(15, 35, 70, 0.22) !important;
}

.el-dialog__header {
  padding: 22px 24px 18px !important;
  border-bottom: 1px solid var(--vps-line);
}

.el-tag {
  border-radius: 999px !important;
}

/* Login / register / password recovery */
body:has(#login),
body:has(#regist),
body:has(#forget) {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 14%, rgba(0, 194, 255, .18), transparent 25%),
    radial-gradient(circle at 88% 80%, rgba(23, 105, 224, .22), transparent 28%),
    linear-gradient(135deg, #07152b 0%, #0b2852 52%, #0a1a35 100%) !important;
}

#login .login-container {
  width: min(1180px, calc(100vw - 48px)) !important;
  height: min(680px, calc(100vh - 72px)) !important;
  min-height: 570px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(22px);
}

#login .container-back {
  overflow: hidden;
  width: 58% !important;
  border-radius: 28px 0 0 28px !important;
  background:
    radial-gradient(circle at 72% 30%, rgba(0, 194, 255, .28), transparent 30%),
    linear-gradient(145deg, rgba(23, 105, 224, .92), rgba(8, 37, 83, .96)) !important;
}

#login .container-back::before {
  position: absolute;
  top: 42px;
  left: 46px;
  z-index: 2;
  padding: 11px 14px;
  content: "888 VPS  ·  GLOBAL CLOUD";
  color: #fff;
  font-size: 13px;
  font-weight: 780;
  letter-spacing: .11em;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 12px;
  background: rgba(255, 255, 255, .10);
}

#login .back-line1,
#login .back-line2,
#login .back-line3 {
  opacity: .18 !important;
  filter: saturate(.7);
}

#login .back-text {
  z-index: 2;
  left: 52px !important;
}

#login .text-welcome {
  font-size: clamp(42px, 4vw, 66px) !important;
  font-weight: 820 !important;
  letter-spacing: -.045em;
}

#login .text-title {
  max-width: 430px;
  font-size: 24px !important;
  font-weight: 650;
}

#login .text-level {
  max-width: 430px;
  color: rgba(255, 255, 255, .72) !important;
  font-size: 15px !important;
  line-height: 1.8;
}

#login .container-before {
  right: 0 !important;
  width: 42% !important;
  border-radius: 0 28px 28px 0 !important;
  background: rgba(255, 255, 255, .98) !important;
  box-shadow: none !important;
}

#login .login {
  box-sizing: border-box !important;
  width: 100% !important;
  padding-right: 44px !important;
  padding-left: 44px !important;
}

#login .login-form {
  width: 100% !important;
}

#login .login-text-title {
  color: var(--vps-ink) !important;
  font-size: 28px !important;
  font-weight: 780 !important;
}

#login .login-form .el-input__inner {
  height: 48px !important;
}

#login .login-btn,
#login .pass-btn {
  width: 100% !important;
  height: 48px !important;
  margin-left: 0 !important;
}

#login .login-jump-btn {
  top: 18px !important;
  right: 20px !important;
  z-index: 5;
}

#login .lang-box span {
  color: #718096 !important;
}

#login .lang-box span.active {
  color: var(--vps-primary) !important;
  font-weight: 700;
}

@media (max-width: 980px) {
  .el-aside {
    width: 0 !important;
    padding: 0 !important;
  }

  .el-main {
    padding: 20px 16px 32px !important;
  }

  .el-header {
    padding: 0 16px !important;
  }

  #login .login-container {
    width: min(540px, calc(100vw - 28px)) !important;
    height: auto !important;
    min-height: 620px;
    border-radius: 22px !important;
  }

  #login .container-back {
    display: none !important;
  }

  #login .container-before {
    position: relative !important;
    width: 100% !important;
    min-height: 620px;
    border-radius: 22px !important;
  }
}

/* Final catalog cascade: keep desktop cards in a balanced two-column layout. */
body:has(.goods-list-div) .goods-list-div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

body:has(.goods-list-div) .shopping-item {
  position: relative;
  display: flex !important;
  min-width: 0;
  min-height: 330px;
  padding-bottom: 0;
  flex-direction: column;
  border-color: rgba(105, 160, 244, .3) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 100% 0, rgba(55, 201, 255, .13), transparent 34%),
    linear-gradient(145deg, rgba(16, 42, 86, .98), rgba(7, 23, 51, .98)) !important;
  box-shadow: 0 18px 46px rgba(0, 7, 24, .3), inset 0 1px rgba(255, 255, 255, .035);
}

body:has(.goods-list-div) .goods-description {
  min-height: 112px;
  max-height: 112px;
  padding: 42px 22px 18px;
  border-bottom-color: rgba(105, 160, 244, .2);
  background: rgba(5, 17, 39, .48) !important;
}

body:has(.goods-list-div) .goods-description:empty,
body:has(.goods-list-div) .goods-description:not(:has(*)) {
  min-height: 112px;
  max-height: 112px;
  align-items: flex-start;
}

body:has(.goods-list-div) .goods-content {
  display: flex;
  padding: 22px;
  flex: 1;
  flex-direction: column;
}

body:has(.goods-list-div) .goods-name {
  min-height: 54px;
  margin: 0;
  padding: 0;
}

body:has(.goods-list-div) .goods-active {
  min-height: 0;
  margin: 4px 0 0;
  padding: 0;
}

body:has(.goods-list-div) .price-box {
  margin-top: auto;
  padding: 20px 0 0;
  align-items: flex-end;
  border-top: 1px solid rgba(105, 160, 244, .18);
}

body:has(.goods-list-div) .buy-btn {
  min-width: 104px;
  height: 44px !important;
  border-radius: 10px !important;
}

@media (max-width: 900px) {
  body:has(.goods-list-div) .goods-list-div {
    grid-template-columns: 1fr;
  }
}

/* Customer console dashboard */
body:has(.statistics-box) .el-main {
  padding: 24px 28px 48px !important;
}

body:has(.statistics-box) .main-card {
  width: min(1440px, 100%);
  max-width: 1440px !important;
  margin: 0 auto;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body:has(.statistics-box) .main-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  align-items: start;
}

body:has(.statistics-box) .left-box {
  min-width: 0;
}

body:has(.statistics-box) .info-box {
  min-height: 138px;
  padding: 28px 30px;
  align-items: center;
  flex-wrap: nowrap;
  border: 1px solid rgba(105, 160, 244, .28) !important;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 20%, rgba(55, 201, 255, .13), transparent 28%),
    linear-gradient(145deg, rgba(16, 42, 86, .98), rgba(7, 23, 51, .98)) !important;
  box-shadow: 0 18px 48px rgba(0, 7, 24, .28);
}

body:has(.statistics-box) .info-first {
  align-items: center;
}

body:has(.statistics-box) .name-first {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: linear-gradient(145deg, #2f7bff, #8b42f5) !important;
  box-shadow: 0 12px 28px rgba(56, 103, 255, .28);
  font-size: 34px;
}

body:has(.statistics-box) .name-box {
  margin-left: 14px;
}

body:has(.statistics-box) .hello,
body:has(.statistics-box) .email-box,
body:has(.statistics-box) .phone-box {
  color: #91a4c6 !important;
  font-size: 13px;
}

body:has(.statistics-box) .name {
  margin-top: 5px;
  color: #fff !important;
  font-size: 17px;
  font-weight: 720;
}

body:has(.statistics-box) .phone-number,
body:has(.statistics-box) .company-name {
  max-width: 210px;
  margin-left: 24px;
  overflow: hidden;
  color: #dce8ff !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:has(.statistics-box) .info-second .phone-box {
  display: none;
}

body:has(.statistics-box) .divider-box {
  height: 58px !important;
  border-color: rgba(135, 164, 213, .24) !important;
}

body:has(.statistics-box) .bule-text {
  color: #64d2ff !important;
}

body:has(.statistics-box) .statistics-box,
body:has(.statistics-box) .product-list-box {
  margin-top: 20px;
  padding: 0;
}

body:has(.statistics-box) .title-text {
  margin: 0 0 12px;
  color: #eef4ff !important;
  font-size: 17px;
  font-weight: 720;
}

body:has(.statistics-box) .statistics-content {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(260px, .9fr) minmax(430px, 1.6fr);
  gap: 14px;
}

body:has(.statistics-box) .money-box,
body:has(.statistics-box) .order-item,
body:has(.statistics-box) .goods-box,
body:has(.statistics-box) .recommend-box,
body:has(.statistics-box) .recommend-box-open,
body:has(.statistics-box) .WorkOrder-box,
body:has(.statistics-box) .notice-box {
  border: 1px solid rgba(105, 160, 244, .24) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(14, 36, 75, .96), rgba(7, 23, 51, .96)) !important;
  box-shadow: 0 16px 42px rgba(0, 7, 24, .22);
}

body:has(.statistics-box) .money-box {
  min-width: 0;
  padding: 24px;
}

body:has(.statistics-box) .statistics-top,
body:has(.statistics-box) .statistics-bottom {
  margin: 0;
}

body:has(.statistics-box) .statisticstop-left {
  margin: 0;
}

body:has(.statistics-box) .statisticstop-right {
  display: none;
}

body:has(.statistics-box) .statistics-credit {
  color: #fff !important;
  font-size: 34px;
  letter-spacing: -.03em;
}

body:has(.statistics-box) .recharge-btn {
  height: 30px;
  padding: 0 13px;
  border-radius: 8px;
  background: linear-gradient(135deg, #256cff, #13a8ff);
  line-height: 30px;
  box-shadow: 0 8px 18px rgba(30, 107, 255, .25);
}

body:has(.statistics-box) .statistics-bottom {
  margin-top: 22px;
  align-items: center;
}

body:has(.statistics-box) .progress-box .el-progress-circle {
  width: 82px !important;
  height: 82px !important;
}

body:has(.statistics-box) .statistics-bottom-right {
  margin-left: 18px;
  padding: 0;
}

body:has(.statistics-box) .money-num {
  color: #eef4ff !important;
}

body:has(.statistics-box) .order-box {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body:has(.statistics-box) .order-box > div {
  width: auto;
  height: auto;
  min-height: 218px;
  margin: 0;
}

body:has(.statistics-box) .order-item {
  position: relative;
  justify-content: center;
  gap: 14px;
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease;
}

body:has(.statistics-box) .order-item::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  content: "";
  border-radius: 50%;
  background: rgba(55, 201, 255, .1);
  filter: blur(10px);
  transform: translate(35%, -35%);
}

body:has(.statistics-box) .order-item:hover {
  transform: translateY(-3px);
  border-color: rgba(55, 201, 255, .55) !important;
}

body:has(.statistics-box) .order-type-img {
  margin: 0;
}

body:has(.statistics-box) .order-type-img img {
  width: 52px;
  height: 52px;
}

body:has(.statistics-box) .order-title {
  color: #91a4c6 !important;
}

body:has(.statistics-box) .order-nums {
  margin: 0;
  color: #fff !important;
  font-size: 34px;
}

body:has(.statistics-box) .goods-box {
  position: relative;
  min-height: 290px;
  overflow: hidden;
}

body:has(.statistics-box) .goods-table thead td {
  padding: 16px 20px;
  color: #91a4c6 !important;
  border-bottom: 1px solid rgba(105, 160, 244, .2);
  background: rgba(5, 17, 39, .34);
}

body:has(.statistics-box) .goods-table tbody td {
  padding: 17px 20px;
  color: #dce8ff !important;
  border-bottom: 1px solid rgba(105, 160, 244, .14);
}

body:has(.statistics-box) .product-item:hover {
  background: rgba(55, 201, 255, .07) !important;
}

body:has(.statistics-box) .no-product {
  display: flex;
  min-height: 250px;
  padding: 24px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background:
    radial-gradient(circle at 50% 25%, rgba(55, 201, 255, .09), transparent 32%),
    transparent !important;
}

body:has(.statistics-box) .no-product h2 {
  color: #eef4ff !important;
  font-size: 22px;
}

body:has(.statistics-box) .no-product p {
  margin: 10px 0 20px;
  color: #91a4c6 !important;
}

body:has(.statistics-box) .right-box {
  width: 340px;
  padding: 0;
  background: transparent !important;
}

body:has(.statistics-box) .recommend-box,
body:has(.statistics-box) .recommend-box-open,
body:has(.statistics-box) .WorkOrder-box,
body:has(.statistics-box) .notice-box {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 20px;
  padding: 20px;
}

body:has(.statistics-box) .recommend-box img {
  width: 100%;
  max-height: 220px;
  object-fit: contain;
}

body:has(.statistics-box) .recommend-box h2,
body:has(.statistics-box) .recommend-box p,
body:has(.statistics-box) .recommend-text {
  color: #91a4c6 !important;
}

body:has(.statistics-box) .WorkOrder-title {
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(105, 160, 244, .2);
}

body:has(.statistics-box) .notice-item,
body:has(.statistics-box) .WorkOrder-item {
  border-color: rgba(105, 160, 244, .16) !important;
  background: transparent !important;
}

body:has(.statistics-box) .notice-time,
body:has(.statistics-box) .notice-title,
body:has(.statistics-box) .replay-title {
  color: #eef4ff !important;
}

body:has(.statistics-box) .notice-type,
body:has(.statistics-box) .replay-name {
  color: #91a4c6 !important;
}

@media (max-width: 1280px) {
  body:has(.statistics-box) .main-content {
    grid-template-columns: 1fr;
  }

  body:has(.statistics-box) .right-box {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width: 900px) {
  body:has(.statistics-box) .statistics-content,
  body:has(.statistics-box) .right-box {
    grid-template-columns: 1fr;
  }

  body:has(.statistics-box) .info-box {
    gap: 20px;
    align-items: flex-start;
    flex-direction: column;
  }

  body:has(.statistics-box) .divider-box {
    display: none;
  }
}

@media (max-width: 620px) {
  body:has(.statistics-box) .el-main {
    padding: 14px 12px 30px !important;
  }

  body:has(.statistics-box) .order-box {
    grid-template-columns: 1fr;
  }

  body:has(.statistics-box) .order-box > div {
    min-height: 150px;
  }
}

/* Premium two-column VPS catalog */
body:has(.goods-list-div) .goods-list-div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

body:has(.goods-list-div) .shopping-item {
  position: relative;
  display: flex !important;
  min-width: 0;
  min-height: 330px;
  padding-bottom: 0;
  flex-direction: column;
  border-color: rgba(105, 160, 244, .3) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 100% 0, rgba(55, 201, 255, .13), transparent 34%),
    linear-gradient(145deg, rgba(16, 42, 86, .98), rgba(7, 23, 51, .98)) !important;
  box-shadow: 0 18px 46px rgba(0, 7, 24, .3), inset 0 1px rgba(255, 255, 255, .035);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

body:has(.goods-list-div) .shopping-item:hover {
  transform: translateY(-4px);
  border-color: rgba(55, 201, 255, .62) !important;
  box-shadow: 0 24px 60px rgba(0, 7, 24, .42), 0 0 0 1px rgba(55, 201, 255, .08);
}

body:has(.goods-list-div) .shopping-item::after {
  position: absolute;
  top: 17px;
  right: 18px;
  width: 7px;
  height: 7px;
  content: "";
  border-radius: 50%;
  background: #45e3a3;
  box-shadow: 0 0 0 5px rgba(69, 227, 163, .1), 0 0 16px rgba(69, 227, 163, .65);
}

body:has(.goods-list-div) .goods-description {
  min-height: 112px;
  max-height: 112px;
  padding: 42px 22px 18px;
  border-bottom-color: rgba(105, 160, 244, .2);
  background: rgba(5, 17, 39, .48) !important;
}

body:has(.goods-list-div) .goods-description::after {
  position: absolute;
  top: 16px;
  left: 22px;
  content: "READY TO DEPLOY";
  color: #64d2ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

body:has(.goods-list-div) .goods-description:empty,
body:has(.goods-list-div) .goods-description:not(:has(*)) {
  min-height: 112px;
  max-height: 112px;
  align-items: flex-start;
}

body:has(.goods-list-div) .goods-content {
  display: flex;
  padding: 22px;
  flex: 1;
  flex-direction: column;
}

body:has(.goods-list-div) .goods-name {
  min-height: 54px;
  margin: 0;
  padding: 0;
}

body:has(.goods-list-div) .goods-name-text {
  display: -webkit-box;
  overflow: hidden;
  font-size: 19px !important;
  font-weight: 720;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

body:has(.goods-list-div) .goods-active {
  min-height: 0;
  margin: 4px 0 0;
  padding: 0;
}

body:has(.goods-list-div) .price-box {
  margin-top: auto;
  padding: 20px 0 0;
  align-items: flex-end;
  border-top: 1px solid rgba(105, 160, 244, .18);
}

body:has(.goods-list-div) .item-price {
  font-size: 34px !important;
  letter-spacing: -.03em;
}

body:has(.goods-list-div) .item-price-prefix,
body:has(.goods-list-div) .item-price-cycle {
  font-size: 13px !important;
  letter-spacing: 0;
}

body:has(.goods-list-div) .buy-btn {
  min-width: 104px;
  height: 44px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #256cff, #13a8ff) !important;
  box-shadow: 0 10px 24px rgba(30, 107, 255, .28);
  font-weight: 720;
}

body:has(.goods-list-div) .buy-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 13px 30px rgba(30, 107, 255, .4);
}

@media (max-width: 900px) {
  body:has(.goods-list-div) .goods-list-div {
    grid-template-columns: 1fr;
  }
}

/* Service agreement */
#content .contnet-right-out {
  box-sizing: border-box;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 28px 24px 56px;
}

#content .content-right {
  padding: 34px 38px;
  border: 1px solid var(--vps-line) !important;
  border-radius: 14px !important;
  background: rgba(8, 22, 48, .82) !important;
  box-shadow: var(--vps-shadow);
}

#content .right-title {
  color: #fff !important;
}

#content .right-keywords-time,
#content .right-time,
#content .right-keywords {
  color: #91a4c6 !important;
}

#content .right-content {
  color: #dce8ff !important;
}

#content .right-attachment:not(:has(.right-attachment-item)) {
  display: none !important;
}

@media (max-width: 750px) {
  #content .contnet-right-out {
    padding: 16px 12px 34px;
  }

  #content .content-right {
    padding: 24px 18px;
  }
}

/* VPS product catalog */
body:has(.goods-list-div) .el-main {
  padding: 24px 28px 42px !important;
}

body:has(.goods-list-div) .el-container {
  background: transparent !important;
}

body:has(.goods-list-div) .main-card {
  box-sizing: border-box;
  width: min(1180px, 100%);
  min-height: calc(100vh - 136px);
  margin: 0 auto;
  padding: 24px !important;
}

body:has(.goods-list-div) .main-title {
  margin: 0 0 16px;
  color: transparent !important;
  font-size: 0 !important;
}

body:has(.goods-list-div) .main-title::after {
  content: "VPS 服务器";
  color: #fff;
  font-size: 26px;
  font-weight: 760;
  letter-spacing: -.02em;
}

body:has(.goods-list-div) .main-content-box {
  padding: 0 !important;
}

body:has(.goods-list-div) .search-box {
  justify-content: flex-start;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--vps-line);
  border-radius: 12px;
  background: rgba(6, 18, 42, .62);
}

body:has(.goods-list-div) .search-box .el-select {
  display: none;
}

body:has(.goods-list-div) .search-input {
  width: min(440px, calc(100% - 96px));
}

body:has(.goods-list-div) .search-btn {
  width: 86px;
  height: 44px;
  margin-left: 0;
}

body:has(.goods-list-div) .shopping-box {
  min-height: 280px;
  margin-top: 18px;
}

body:has(.goods-list-div) .goods-list-div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 360px));
  gap: 20px;
  align-items: start;
}

body:has(.goods-list-div) .shopping-item {
  min-height: 0;
  padding-bottom: 18px;
  overflow: hidden;
  border: 1px solid rgba(135, 164, 213, .24) !important;
  border-radius: 14px !important;
  background: linear-gradient(155deg, rgba(16, 40, 81, .96), rgba(8, 25, 54, .96)) !important;
  box-shadow: 0 18px 42px rgba(0, 7, 24, .26);
}

body:has(.goods-list-div) .goods-description {
  box-sizing: border-box;
  min-height: 138px;
  max-height: 150px;
  padding: 16px 20px 14px;
  overflow: auto;
  color: #b9c9e6 !important;
  border-bottom: 1px solid var(--vps-line);
  background: rgba(5, 17, 39, .62) !important;
  font-size: 13px;
  line-height: 1.75;
}

body:has(.goods-list-div) .goods-description,
body:has(.goods-list-div) .goods-description * {
  color: #b9c9e6 !important;
  background-color: transparent !important;
  font-family: inherit !important;
}

body:has(.goods-list-div) .goods-description:empty,
body:has(.goods-list-div) .goods-description:not(:has(*)) {
  display: flex;
  min-height: 82px;
  max-height: 82px;
  align-items: center;
}

body:has(.goods-list-div) .goods-description:empty::before,
body:has(.goods-list-div) .goods-description:not(:has(*))::before {
  content: "配置、库存与可选区域请在购买页面确认";
  color: #91a4c6;
}

body:has(.goods-list-div) .goods-description ul {
  margin: 0 !important;
  padding-left: 18px !important;
}

body:has(.goods-list-div) .goods-name {
  margin-top: 16px;
  padding: 0 20px;
}

body:has(.goods-list-div) .goods-name-text {
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1.45;
}

body:has(.goods-list-div) .goods-active {
  min-height: 22px;
  margin-top: 8px;
  padding: 0 20px;
}

body:has(.goods-list-div) .goods-active:has(.active-name[style*="opacity: 0"]) {
  display: none;
}

body:has(.goods-list-div) .price-box {
  margin-top: 18px;
  padding: 0 20px;
}

body:has(.goods-list-div) .price-box-left {
  align-items: baseline !important;
  text-align: left !important;
}

body:has(.goods-list-div) .item-price {
  color: #fff !important;
  font-size: 30px !important;
  font-weight: 760;
}

body:has(.goods-list-div) .item-price-prefix,
body:has(.goods-list-div) .item-price-cycle {
  color: #91a4c6 !important;
}

body:has(.goods-list-div) .buy-btn {
  min-width: 92px;
  height: 42px !important;
}

@media (max-width: 760px) {
  body:has(.goods-list-div) .el-main {
    padding: 14px 12px 28px !important;
  }

  body:has(.goods-list-div) .main-card {
    padding: 20px 14px !important;
  }

  body:has(.goods-list-div) .goods-list-div {
    grid-template-columns: 1fr;
  }

  body:has(.goods-list-div) .search-box {
    align-items: stretch;
  }

  body:has(.goods-list-div) .search-input {
    width: calc(100% - 82px);
  }

  body:has(.goods-list-div) .search-btn {
    width: 72px;
  }
}

/* Keep full operating-system names visible. */
.goods .common-config .op-sysyem {
  width: min(920px, 100%) !important;
  grid-template-columns: minmax(230px, .8fr) minmax(430px, 1.7fr) !important;
}

.goods .common-config .op-sysyem .el-input__inner {
  overflow: visible !important;
  padding-right: 44px !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: 16px !important;
}

.el-select-dropdown__item {
  box-sizing: border-box;
  height: auto !important;
  min-height: 40px;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  overflow: visible !important;
  color: #fff !important;
  line-height: 1.45 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

@media (max-width: 760px) {
  .goods .common-config .op-sysyem {
    grid-template-columns: 1fr !important;
  }
}

/* High-contrast client typography: white + vivid cyan only. */
body:not(:has(#login)):not(:has(#regist)):not(:has(#forget)) :is(
  .main-title,
  .main-card-title,
  .content-title,
  .title-text,
  .el-form-item__label,
  .el-checkbox__label,
  .el-radio__label,
  .el-table__empty-text,
  .el-empty__description p
) {
  color: #fff !important;
}

body:not(:has(#login)):not(:has(#regist)):not(:has(#forget)) :is(
  .el-tabs__item,
  .el-table th,
  .el-table__header-wrapper,
  .el-input__inner::placeholder,
  .el-textarea__inner::placeholder
) {
  color: #bfeeff !important;
}

body:has(.statistics-box) :is(
  .hello,
  .email-box,
  .phone-box,
  .credit-name,
  .statistics-item-name,
  .order-title,
  .no-product p,
  .recommend-box h2,
  .recommend-box p,
  .recommend-text,
  .notice-type,
  .replay-name
) {
  color: #fff !important;
}

body:has(.statistics-box) :is(
  .notice-btn,
  .bule-text,
  .credit-num .s-24,
  .statistics-item-value .s-12
) {
  color: #64d2ff !important;
}

body:has(.totalprice-box) :is(
  .main-title,
  .dont-save-password,
  .goods-name,
  .goods-table th,
  .goods-table td,
  .goodsInfo-name,
  .goodsInfo-val,
  .goodsInfo-price,
  .goodsInfo-type,
  .default-color,
  .item-price,
  .item-total,
  .price,
  .footer-left,
  .footer-right,
  .pay-text,
  .check-box,
  .el-checkbox__label,
  .el-radio__label
) {
  color: #fff !important;
}

body:has(.totalprice-box) :is(.total-price, .bule-text, .total-icon) {
  color: #64d2ff !important;
}

/* Final UI fixes for navigation, finance, dialogs, payment and OS fields. */
.el-aside {
  width: 214px !important;
}

.el-aside > .menu-top {
  margin-top: 8px !important;
}

.el-aside > .line {
  margin: 10px 18px !important;
}

.el-aside .menu-top .menu-alink {
  display: block !important;
  margin: 3px 0 !important;
}

.el-aside .el-menu-item,
.el-aside .aside-menu-text {
  color: #fff !important;
}

.el-aside .el-menu-item .iconfont {
  color: #64d2ff !important;
}

.el-aside .el-menu-item.is-active {
  color: #fff !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #256cff, #13a8ff) !important;
}

.el-aside .el-menu-item.is-active .iconfont {
  color: #fff !important;
}

body:has(.finance-balance) :is(.balance-left-title, .balance-left-num, .tx-list, .el-badge) {
  color: #fff !important;
}

body:has(.finance-balance) .balance-left-num {
  font-size: 40px !important;
  font-weight: 780 !important;
}

body:has(.finance-balance) .balance-left-num .prefix {
  color: #64d2ff !important;
}

.recharge-dialog,
.new-pay-dialog,
.pay-dialog,
.select-coin-dialog {
  color: #fff !important;
  border-color: rgba(100, 210, 255, .42) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #102b58, #081a38) !important;
}

.recharge-dialog .el-dialog__header,
.new-pay-dialog .el-dialog__header,
.pay-dialog .el-dialog__header,
.select-coin-dialog .el-dialog__header {
  display: none !important;
  background: transparent !important;
}

.recharge-dialog .el-dialog__body,
.new-pay-dialog .el-dialog__body,
.pay-dialog .el-dialog__body,
.select-coin-dialog .el-dialog__body {
  color: #fff !important;
  background: transparent !important;
}

.recharge-dialog :is(.title-text, .close-btn, .el-icon-close),
.new-pay-dialog :is(.title-text, .close-btn, .el-icon-close),
.pay-dialog :is(.title-text, .close, .el-icon-close) {
  color: #fff !important;
}

.recharge-dialog .el-input__inner {
  color: #fff !important;
  border-color: rgba(100, 210, 255, .48) !important;
  border-radius: 10px !important;
  background: #071a39 !important;
}

.recharge-dialog .el-input__inner::placeholder {
  color: #fff !important;
  opacity: .8;
}

.new-pay-dialog :is(
  .pay-order-tip-text,
  .pay-order-id,
  .pay-order-top-right,
  .pay-order-check,
  .pay-method-item-text,
  .type-dec,
  .pay-qr-text,
  .pay-footer-left,
  .pay-footer-right
),
.pay-dialog :is(.qr-money, .des, .item, .txt) {
  color: #fff !important;
}

.new-pay-dialog :is(.pay-order-price, .pay-order-total-price, .pay-order-balance, .pay-order-coin-num),
.pay-dialog :is(.pay-money, .font-26) {
  color: #64d2ff !important;
}

.new-pay-dialog .pay-method-item,
.new-pay-dialog .pay-method-box {
  color: #fff !important;
  border-color: rgba(105, 160, 244, .35) !important;
  border-radius: 11px !important;
  background: rgba(5, 17, 39, .56) !important;
}

.new-pay-dialog .pay-method-item.active {
  border-color: #37c9ff !important;
  background: rgba(37, 108, 255, .2) !important;
}

.new-pay-dialog .pay-footer,
.pay-dialog .dia-fotter,
.select-coin-dialog .select-coin-footer {
  color: #fff !important;
  border-top-color: rgba(105, 160, 244, .24) !important;
  background: rgba(5, 17, 39, .76) !important;
}

.new-pay-dialog .cancel-btn,
.pay-dialog .cancel-btn,
.select-coin-dialog .cancel-btn {
  color: #fff !important;
  border-color: rgba(100, 210, 255, .5) !important;
  background: rgba(55, 201, 255, .08) !important;
}

.goods .common-config .op-sysyem {
  display: grid !important;
  width: min(920px, 100%) !important;
  grid-template-columns: minmax(230px, .8fr) minmax(430px, 1.7fr) !important;
  gap: 16px !important;
}

.goods .common-config .op-sysyem > .el-select,
.goods .common-config .op-sysyem .system,
.goods .common-config .op-sysyem .el-input,
.goods .common-config .op-sysyem .el-input__inner {
  box-sizing: border-box;
  width: 100% !important;
}

.goods .common-config .op-sysyem .el-input__inner {
  overflow: visible !important;
  padding-right: 44px !important;
  color: #fff !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

.goods .common-config .op-sysyem .el-input__suffix {
  right: 12px !important;
}

.el-select-dropdown__item {
  box-sizing: border-box;
  height: auto !important;
  min-height: 40px;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  overflow: visible !important;
  color: #fff !important;
  line-height: 1.45 !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

@media (max-width: 760px) {
  .goods .common-config .op-sysyem {
    grid-template-columns: 1fr !important;
  }
}

/* Compact, high-contrast sidebar */
.el-aside {
  width: 214px !important;
}

.el-aside > .menu-top {
  margin-top: 8px !important;
}

.el-aside > .line {
  margin: 10px 18px !important;
  border-color: rgba(105, 160, 244, .15) !important;
}

.el-aside .menu-top .menu-alink {
  display: block !important;
  margin: 3px 0 !important;
}

.el-aside .el-menu-item {
  height: 48px !important;
  margin: 0 !important;
  color: #fff !important;
  border-radius: 10px !important;
  line-height: 48px !important;
}

.el-aside .el-menu-item .iconfont {
  color: #64d2ff !important;
}

.el-aside .el-menu-item:hover {
  color: #fff !important;
  background: rgba(55, 201, 255, .09) !important;
}

.el-aside .el-menu-item.is-active {
  color: #fff !important;
  background: linear-gradient(135deg, #256cff, #13a8ff) !important;
  box-shadow: 0 10px 26px rgba(30, 107, 255, .27);
}

.el-aside .el-menu-item.is-active .iconfont {
  color: #fff !important;
}

/* Finance balance card */
body:has(.finance-balance) .finance-balance {
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 90% 18%, rgba(55, 201, 255, .12), transparent 30%),
    linear-gradient(145deg, rgba(14, 36, 75, .98), rgba(7, 23, 51, .98)) !important;
}

body:has(.finance-balance) .balance-left-title,
body:has(.finance-balance) .tx-list,
body:has(.finance-balance) .el-badge {
  color: #fff !important;
}

body:has(.finance-balance) .balance-left-num {
  color: #fff !important;
  font-size: 40px !important;
  font-weight: 780;
  letter-spacing: -.035em;
}

body:has(.finance-balance) .balance-left-num .prefix {
  color: #64d2ff !important;
  font-size: 22px !important;
}

body:has(.finance-balance) .balance-right .el-button {
  min-width: 92px;
  height: 42px;
  color: #fff !important;
  border-color: rgba(100, 210, 255, .5) !important;
  border-radius: 10px !important;
  background: rgba(55, 201, 255, .08) !important;
}

body:has(.finance-balance) .balance-right .el-button--primary {
  border: 0 !important;
  background: linear-gradient(135deg, #256cff, #13a8ff) !important;
}

/* Recharge dialog */
.recharge-dialog {
  width: min(750px, calc(100vw - 32px)) !important;
  overflow: hidden;
  border: 1px solid rgba(100, 210, 255, .42) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, #102b58, #081a38) !important;
  box-shadow: 0 30px 80px rgba(0, 7, 24, .56) !important;
}

.recharge-dialog .el-dialog__header {
  display: none !important;
}

.recharge-dialog .el-dialog__body {
  padding: 26px !important;
  color: #fff !important;
  background: transparent !important;
}

.recharge-dialog .recharge-title {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
  justify-content: space-between;
}

.recharge-dialog .recharge-title .title-text {
  color: #fff !important;
  font-size: 22px;
  font-weight: 760;
}

.recharge-dialog .close-btn,
.recharge-dialog .el-icon-close {
  color: #64d2ff !important;
  font-size: 22px;
}

.recharge-dialog .recharge-box {
  padding: 18px;
  border: 1px solid rgba(105, 160, 244, .22);
  border-radius: 14px;
  background: rgba(5, 17, 39, .52);
}

.recharge-dialog .recharge-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px;
  gap: 14px;
}

.recharge-dialog .el-input-number,
.recharge-dialog .el-input,
.recharge-dialog .el-input__inner {
  width: 100% !important;
}

.recharge-dialog .el-input__inner {
  height: 48px !important;
  color: #fff !important;
  border-color: rgba(100, 210, 255, .48) !important;
  border-radius: 10px !important;
  background: #071a39 !important;
}

.recharge-dialog .el-input__inner::placeholder {
  color: #fff !important;
  opacity: .78;
}

.recharge-dialog .el-button--primary {
  height: 48px;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #256cff, #13a8ff) !important;
}

/* Unified online payment dialog */
.new-pay-dialog,
.pay-dialog,
.select-coin-dialog {
  width: min(1120px, calc(100vw - 40px)) !important;
  overflow: hidden;
  color: #fff !important;
  border: 1px solid rgba(100, 210, 255, .42) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, #102b58, #081a38) !important;
  box-shadow: 0 34px 90px rgba(0, 7, 24, .6) !important;
}

.new-pay-dialog .el-dialog__header,
.pay-dialog .el-dialog__header,
.select-coin-dialog .el-dialog__header {
  display: none !important;
}

.new-pay-dialog .el-dialog__body,
.pay-dialog .el-dialog__body,
.select-coin-dialog .el-dialog__body {
  padding: 0 !important;
  color: #fff !important;
  background: transparent !important;
}

.new-pay-dialog :is(.pay-title, .dia-title, .select-coin-title),
.pay-dialog :is(.pay-title, .dia-title),
.select-coin-dialog .select-coin-title {
  display: flex;
  min-height: 66px;
  padding: 0 28px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(105, 160, 244, .24);
  background: rgba(5, 17, 39, .42);
}

.new-pay-dialog :is(.title-text, .close-btn, .el-icon-close),
.pay-dialog :is(.title-text, .close, .el-icon-close),
.select-coin-dialog :is(.title-text, .close-btn, .el-icon-close) {
  color: #fff !important;
}

.new-pay-dialog .close-btn,
.pay-dialog .close,
.select-coin-dialog .close-btn {
  color: #64d2ff !important;
}

.new-pay-dialog .pay-content,
.pay-dialog .dia-content,
.select-coin-dialog .select-coin-box {
  padding: 28px !important;
  color: #fff !important;
  background: transparent !important;
}

.new-pay-dialog :is(
  .pay-order-tip-text,
  .pay-order-id,
  .pay-order-top-right,
  .pay-order-check,
  .pay-method-item-text,
  .type-dec,
  .pay-qr-text,
  .custom-text-title,
  .pay-footer-left,
  .pay-footer-right
),
.pay-dialog :is(.qr-money, .des, .item, .txt) {
  color: #fff !important;
}

.new-pay-dialog :is(.pay-order-price, .pay-order-total-price, .pay-order-balance, .pay-order-coin-num),
.pay-dialog :is(.pay-money, .font-26) {
  color: #64d2ff !important;
}

.new-pay-dialog .pay-order-top,
.new-pay-dialog .pay-order-check,
.new-pay-dialog .pay-order-method,
.pay-dialog .pay-top,
.pay-dialog .custom-text {
  border-color: rgba(105, 160, 244, .24) !important;
}

.new-pay-dialog .pay-method-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.new-pay-dialog .pay-method-item {
  min-height: 76px;
  color: #fff !important;
  border: 1px solid rgba(105, 160, 244, .35) !important;
  border-radius: 11px !important;
  background: rgba(5, 17, 39, .56) !important;
}

.new-pay-dialog .pay-method-item.active {
  border-color: #37c9ff !important;
  background: rgba(37, 108, 255, .2) !important;
  box-shadow: 0 0 0 1px rgba(55, 201, 255, .12);
}

.new-pay-dialog .pay-method-box {
  margin-top: 20px;
  color: #fff !important;
  border: 1px solid rgba(105, 160, 244, .22) !important;
  border-radius: 14px;
  background: rgba(5, 17, 39, .5) !important;
}

.new-pay-dialog .pay-footer,
.pay-dialog .dia-fotter,
.select-coin-dialog .select-coin-footer {
  display: flex;
  min-height: 86px;
  padding: 18px 28px;
  align-items: center;
  justify-content: flex-end;
  color: #fff !important;
  border-top: 1px solid rgba(105, 160, 244, .24);
  background: rgba(5, 17, 39, .68) !important;
}

.new-pay-dialog .cancel-btn,
.pay-dialog .cancel-btn,
.select-coin-dialog .cancel-btn {
  color: #fff !important;
  border-color: rgba(100, 210, 255, .5) !important;
  border-radius: 10px !important;
  background: rgba(55, 201, 255, .08) !important;
}

.new-pay-dialog .el-button--primary,
.pay-dialog .submit-btn,
.select-coin-dialog .el-button--primary {
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #256cff, #13a8ff) !important;
}

/* VPS operating-system selectors */
.goods .common-config .op-sysyem {
  display: grid !important;
  width: min(780px, 100%) !important;
  grid-template-columns: minmax(220px, .9fr) minmax(320px, 1.3fr);
  gap: 16px;
}

.goods .common-config .op-sysyem > .el-select,
.goods .common-config .op-sysyem .system,
.goods .common-config .op-sysyem .el-input,
.goods .common-config .op-sysyem .el-input__inner {
  box-sizing: border-box;
  width: 100% !important;
}

.goods .common-config .op-sysyem .el-input__inner {
  height: 48px !important;
  padding-right: 42px !important;
  color: #fff !important;
  border-color: rgba(100, 210, 255, .42) !important;
  border-radius: 10px !important;
  background: #071a39 !important;
  line-height: 48px !important;
}

.goods .common-config .op-sysyem .el-input__suffix {
  right: 12px !important;
}

@media (max-width: 760px) {
  .el-aside {
    width: 100% !important;
  }

  .new-pay-dialog .pay-method-list,
  .goods .common-config .op-sysyem {
    grid-template-columns: 1fr;
  }

  .recharge-dialog .recharge-input {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .el-main {
    padding: 14px 10px 24px !important;
  }

  .main-card,
  .el-card,
  .content_box,
  .finance-top {
    border-radius: 12px !important;
  }

  #login .login {
    width: 100% !important;
    padding-right: 20px !important;
    padding-left: 20px !important;
  }

  #login .login-jump-btn {
    right: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation-duration: .01ms !important;
  }
}

/* mirror.888.cab direction: monochrome, precise, infrastructure-first. */
:root {
  --vps-ink: #f3f3ef;
  --vps-muted: #9b9b95;
  --vps-line: #2a2a2a;
  --vps-surface: #111111;
  --vps-canvas: #090909;
  --vps-primary: #f3f3ef;
  --vps-primary-strong: #ffffff;
  --vps-accent: #7767ff;
  --vps-radius: 0px;
  --vps-shadow: none;
}

html,
body,
.template,
.template > .el-container {
  color: #f3f3ef !important;
  background: #090909 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "PingFang SC", monospace !important;
}

body::before {
  background:
    radial-gradient(circle at 8% -8%, rgba(119, 103, 255, .10), transparent 24%),
    #090909 !important;
}

.el-aside {
  border-right: 1px solid #2a2a2a !important;
  background: #090909 !important;
  box-shadow: none !important;
}

.el-aside::after {
  display: none;
}

.el-aside .menu-alink:first-child::before {
  border: 0;
  border-radius: 0;
  background: url("/upload/common/default/vps-brand-icon.png?v=20260818") center / contain no-repeat;
  box-shadow: none;
}

.el-aside .menu-alink:first-child::after {
  content: "eSIMuse · VPS";
  color: #f3f3ef;
  letter-spacing: .03em;
}

.el-aside .el-menu-item,
.el-aside .el-submenu__title {
  color: #9b9b95 !important;
  border-radius: 0 !important;
}

.el-aside .el-menu-item:hover,
.el-aside .el-submenu__title:hover {
  color: #f3f3ef !important;
  background: #111 !important;
  transform: none;
}

.el-aside .el-menu-item.is-active {
  color: #090909 !important;
  background: #f3f3ef !important;
  box-shadow: none !important;
}

.el-header {
  border-bottom: 1px solid #2a2a2a;
  background: rgba(9, 9, 9, .94) !important;
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.el-header .head-box {
  color: #090909 !important;
  border-radius: 0 !important;
  background: #f3f3ef !important;
  box-shadow: none;
}

.el-main {
  background: #090909 !important;
}

.main-card,
.el-card,
.content_box,
.finance-top,
.info-box,
.goods-box,
.recommend-box,
.WorkOrder-box,
.notice-box,
.money-box,
.order-box,
.finance-money-main,
.finance-balance,
.finance-other-money {
  color: #f3f3ef !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 0 !important;
  background: #111 !important;
  box-shadow: none !important;
}

.main-card *,
.el-card *,
.content_box *,
.finance-top * {
  border-color: #2a2a2a;
}

.title-text,
.finance-title,
.page-title,
.content-title,
.main-card h1,
.main-card h2,
.main-card h3,
.el-card h1,
.el-card h2,
.el-card h3 {
  color: #f3f3ef !important;
}

.griy-12,
.hello,
.email-box,
.phone-box,
.el-form-item__label,
.el-empty__description p,
.el-pagination__total,
.el-pagination__jump {
  color: #9b9b95 !important;
}

.el-input__inner,
.el-textarea__inner,
.el-select .el-input__inner,
.el-input-group__prepend,
.el-input-group__append {
  color: #f3f3ef !important;
  border-color: #333 !important;
  border-radius: 0 !important;
  background: #111 !important;
  box-shadow: none !important;
}

.el-input__inner:hover,
.el-textarea__inner:hover,
.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: #f3f3ef !important;
  background: #111 !important;
  box-shadow: none !important;
}

.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
  color: #696965 !important;
}

.el-button {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.el-button--primary {
  color: #090909 !important;
  border-color: #f3f3ef !important;
  background: #f3f3ef !important;
  box-shadow: none !important;
}

.el-button--primary:hover,
.el-button--primary:focus {
  color: #090909 !important;
  border-color: #fff !important;
  background: #fff !important;
}

.el-button--default,
.el-button.is-plain {
  color: #f3f3ef !important;
  border-color: #3a3a3a !important;
  background: transparent !important;
}

.el-tabs__nav-wrap::after {
  background: #2a2a2a !important;
}

.el-tabs__item {
  color: #9b9b95 !important;
}

.el-tabs__item.is-active,
.el-tabs__item:hover {
  color: #f3f3ef !important;
}

.el-tabs__active-bar {
  height: 1px !important;
  border-radius: 0;
  background: #f3f3ef !important;
}

.el-table,
.el-table tr,
.el-table td,
.el-table th,
.el-table__header-wrapper,
.el-table__body-wrapper {
  color: #d9d9d4 !important;
  border-color: #2a2a2a !important;
  background: #111 !important;
}

.el-table th,
.el-table__header-wrapper {
  color: #9b9b95 !important;
  background: #151515 !important;
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: #171717 !important;
}

.el-table::before,
.el-table--border::after,
.el-table--group::after {
  background: #2a2a2a !important;
}

.el-dialog,
.el-popover,
.el-dropdown-menu,
.el-select-dropdown {
  color: #f3f3ef !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 0 !important;
  background: #111 !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .42) !important;
}

.el-dropdown-menu__item,
.el-select-dropdown__item {
  color: #c7c7c1 !important;
}

.el-dropdown-menu__item:hover,
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  color: #f3f3ef !important;
  background: #1a1a1a !important;
}

.el-pagination button,
.el-pager li {
  color: #9b9b95 !important;
  background: #111 !important;
}

.el-pager li.active {
  color: #090909 !important;
  background: #f3f3ef !important;
}

body:has(#login),
body:has(#regist),
body:has(#forget) {
  background: #090909 !important;
}

#login .login-container {
  border: 1px solid #2a2a2a;
  border-radius: 0 !important;
  background: #090909 !important;
  box-shadow: none !important;
  backdrop-filter: none;
}

#login .container-back {
  border-right: 1px solid #2a2a2a;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 30% 40%, rgba(105, 92, 255, .13), transparent 34%),
    #090909 !important;
}

#login .container-back::before {
  display: flex;
  min-height: 36px;
  padding: 0 0 0 46px;
  align-items: center;
  content: "eSIMuse · VPS.888.CAB";
  color: #9b9b95;
  border: 0;
  border-radius: 0;
  background: url("/upload/common/default/vps-brand-icon.png?v=20260818") left center / 36px 36px no-repeat;
  box-shadow: none;
}

#login .back-line1,
#login .back-line2,
#login .back-line3 {
  opacity: .08 !important;
  filter: grayscale(1);
}

#login .text-welcome,
#login .text-title {
  color: #f3f3ef !important;
}

#login .text-level {
  color: #9b9b95 !important;
}

#login .container-before {
  border-radius: 0 !important;
  background: #111 !important;
}

#login .login-text-title,
#login .login-text-regist,
#login .read-text,
#login .pass-btn {
  color: #f3f3ef !important;
}

#login a {
  color: #b7afff !important;
}

#login .lang-box span {
  color: #696965 !important;
}

#login .lang-box span.active {
  color: #f3f3ef !important;
}

@media (max-width: 980px) {
  #login .login-container,
  #login .container-before {
    border-radius: 0 !important;
  }
}

/* VPS configurator */
.goods .el-main {
  margin-bottom: 118px !important;
}

.goods .config-box {
  width: 100%;
  height: auto !important;
  max-width: 1320px;
  margin: 0 auto;
}

.goods .config-box > .content,
.goods .common-config {
  width: 100%;
}

.goods .common-config > .main-card {
  box-sizing: border-box;
  height: auto !important;
  min-height: calc(100vh - 188px);
  padding: 34px 38px 28px !important;
  overflow: visible !important;
}

.goods .common-config .pro-tit {
  position: relative;
  padding-top: 28px;
  color: #f3f3ef !important;
  font-size: clamp(25px, 2.2vw, 36px) !important;
  font-weight: 760;
  line-height: 1.25 !important;
  letter-spacing: -.035em;
}

.goods .common-config .pro-tit::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "VPS CONFIGURATOR  /  01";
  color: #777771;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
}

.goods .common-config .common-box {
  padding-bottom: 118px !important;
}

.goods .common-config .config-item {
  margin-top: 38px !important;
  padding-top: 2px;
}

.goods .common-config .config-tit {
  margin-bottom: 15px !important;
  padding-left: 13px !important;
  color: #aaa9a3 !important;
  font-size: 13px !important;
  font-weight: 650;
  line-height: 18px !important;
  letter-spacing: .04em;
}

.goods .common-config .config-tit::before {
  width: 2px !important;
  height: 16px !important;
  margin-top: -8px !important;
  background: #f3f3ef !important;
}

.goods .common-config .config-way {
  width: 100%;
  min-width: 0;
}

.goods .common-config .click-select {
  display: grid !important;
  width: 100% !important;
  margin-top: 0 !important;
  overflow: visible !important;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 11px;
}

.goods .common-config .click-select .item,
.goods .common-config .click-select.area .item {
  box-sizing: border-box !important;
  float: none !important;
  width: auto !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 15px !important;
  overflow: hidden;
  color: #d6d6d1 !important;
  line-height: 46px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid #333 !important;
  border-radius: 0 !important;
  background: #0c0c0c !important;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}

.goods .common-config .click-select .item:hover {
  color: #fff !important;
  border-color: #777 !important;
  background: #151515 !important;
}

.goods .common-config .click-select .item.com-active {
  color: #090909 !important;
  border-color: #f3f3ef !important;
  background: #f3f3ef !important;
}

.goods .common-config .com-active::after {
  display: none !important;
}

.goods .common-config .com-active .el-icon-check {
  top: 50% !important;
  right: 13px !important;
  bottom: auto !important;
  display: block !important;
  color: #090909 !important;
  font-weight: 800;
  transform: translateY(-50%);
}

.goods .common-config .op-sysyem {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 10px;
}

.goods .common-config .op-sysyem .system {
  width: min(230px, 100%) !important;
}

.goods .common-config .op-sysyem > .el-select:not(.system) {
  width: min(360px, 100%) !important;
}

.goods .common-config .op-sysyem .el-input__inner,
.goods .common-config .el-select input {
  height: 46px !important;
  line-height: 46px !important;
}

.goods .common-config .slider {
  width: min(720px, 100%);
  color: #9b9b95;
}

.goods .common-config .slider .el-slider {
  flex: 1;
  width: auto !important;
  min-width: 180px;
}

.goods .common-config .el-slider__runway {
  height: 2px;
  background: #343434;
}

.goods .common-config .el-slider__bar {
  height: 2px;
  background: #f3f3ef !important;
}

.goods .common-config .el-slider__button {
  width: 8px !important;
  height: 22px !important;
  background: #f3f3ef !important;
}

.goods .common-config .config-item.host .el-input,
.goods .common-config .custom-filed-box .el-input,
.goods .common-config .custom-filed-box .el-textarea {
  width: min(420px, 100%) !important;
}

/* Stable order bar — the original was clipped by the global content padding. */
.goods .f-order {
  height: 96px !important;
  color: #f3f3ef !important;
  border-top: 1px solid #2a2a2a;
  background: #090909 !important;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .34);
  z-index: 60 !important;
}

.goods .f-order .l-empty {
  width: 214px !important;
  height: 96px !important;
}

.goods .f-order > .el-main {
  box-sizing: border-box;
  height: 96px !important;
  margin: 0 !important;
  padding: 0 28px !important;
  overflow: visible !important;
  border: 0 !important;
  background: #0d0d0d !important;
  box-shadow: none !important;
}

.goods .f-order .main-card {
  box-sizing: border-box;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

.goods .f-order .left,
.goods .f-order .mid,
.goods .f-order .right {
  min-width: 0;
}

.goods .f-order .time {
  margin-right: 22px !important;
}

.goods .f-order .l-txt {
  color: #9b9b95 !important;
  font-size: 12px;
}

.goods .f-order .duration-select {
  width: 110px !important;
}

.goods .f-order .el-input-number {
  width: 116px !important;
}

.goods .f-order .line-empty {
  margin: 0 18px !important;
  border-left-color: #383838 !important;
}

.goods .f-order .link {
  color: #c9c9c3 !important;
  border-bottom: 1px solid #555 !important;
  font-size: 12px;
}

.goods .f-order .bot-price .new {
  color: #f3f3ef !important;
}

.goods .f-order .bot-price .new span {
  font-family: inherit !important;
  font-size: 24px !important;
}

.goods .f-order .right .add-cart {
  width: 48px !important;
  height: 46px !important;
  border-color: #444 !important;
  border-radius: 0 !important;
  background: #111;
}

.goods .f-order .right .buy {
  width: 148px !important;
  margin-left: 8px !important;
  color: #090909 !important;
  font-size: 14px !important;
  font-weight: 750;
  line-height: 46px !important;
  background: #f3f3ef !important;
}

.goods .f-order .right .buy:hover,
.goods .f-order .right .add-cart:hover {
  filter: brightness(1.08);
}

.cur-content,
.free-content {
  color: #f3f3ef !important;
  border-color: #2a2a2a !important;
  background: #111 !important;
}

.cur-content .c-item,
.free-content .c-item,
.cur-content .tit,
.free-content .tit {
  color: #d4d4cf !important;
  border-color: #2a2a2a !important;
}

@media (max-width: 1180px) {
  .goods .common-config .click-select {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }

  .goods .f-order .mid .link,
  .goods .f-order .line-empty {
    display: none;
  }
}

@media (max-width: 980px) {
  .goods .common-config > .main-card {
    padding: 26px 20px 24px !important;
  }

  .goods .common-config .click-select {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }

  .goods .f-order .l-empty {
    display: none;
  }

  .goods .f-order .left {
    display: none !important;
  }

  .goods .f-order > .el-main {
    padding: 0 14px !important;
  }
}

@media (max-width: 560px) {
  .goods .common-config .click-select {
    grid-template-columns: 1fr;
  }

  .goods .common-config .slider {
    flex-wrap: wrap;
    gap: 8px;
  }

  .goods .common-config .slider .el-slider {
    order: 3;
    width: 100% !important;
    flex-basis: 100%;
  }

  .goods .f-order .right .buy {
    width: 120px !important;
  }
}

/* Unified deep-blue storefront theme. */
:root {
  --vps-ink: #eef4ff;
  --vps-muted: #91a4c6;
  --vps-line: rgba(135, 164, 213, .22);
  --vps-surface: #0c1d3f;
  --vps-canvas: #071127;
  --vps-primary: #1e6bff;
  --vps-primary-strong: #1457d4;
  --vps-accent: #37c9ff;
  --vps-radius: 14px;
  --vps-shadow: 0 18px 48px rgba(0, 8, 28, .24);
}

html,
body,
.template,
.template > .el-container {
  color: var(--vps-ink) !important;
  background: var(--vps-canvas) !important;
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

body::before {
  background:
    linear-gradient(rgba(105, 141, 203, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 141, 203, .04) 1px, transparent 1px),
    radial-gradient(circle at 92% 8%, rgba(30, 107, 255, .22), transparent 34%),
    var(--vps-canvas) !important;
  background-size: 56px 56px, 56px 56px, auto, auto !important;
}

.el-aside {
  border-right: 1px solid var(--vps-line) !important;
  background: #081630 !important;
  box-shadow: 12px 0 34px rgba(0, 8, 28, .18) !important;
}

.el-aside .menu-alink:first-child::after {
  content: "888 VPS";
  color: #fff;
  letter-spacing: .05em;
}

.el-aside .el-menu-item,
.el-aside .el-submenu__title {
  color: #9fb0d0 !important;
  border-radius: 10px !important;
}

.el-aside .el-menu-item:hover,
.el-aside .el-submenu__title:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, .07) !important;
}

.el-aside .el-menu-item.is-active {
  color: #fff !important;
  background: linear-gradient(100deg, #1e6bff, #1598ff) !important;
  box-shadow: 0 10px 24px rgba(30, 107, 255, .24) !important;
}

.el-header {
  border-bottom: 1px solid var(--vps-line) !important;
  background: rgba(8, 22, 48, .92) !important;
  box-shadow: none !important;
}

.el-header .head-box {
  color: #fff !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #1e6bff, #25b8ff) !important;
}

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

.main-card,
.el-card,
.content_box,
.finance-top,
.info-box,
.goods-box,
.recommend-box,
.WorkOrder-box,
.notice-box,
.money-box,
.order-box,
.finance-money-main,
.finance-balance,
.finance-other-money,
.cur-content,
.free-content {
  color: var(--vps-ink) !important;
  border: 1px solid var(--vps-line) !important;
  border-radius: var(--vps-radius) !important;
  background: rgba(12, 29, 63, .92) !important;
  box-shadow: var(--vps-shadow) !important;
}

.title-text,
.finance-title,
.page-title,
.content-title,
.main-card h1,
.main-card h2,
.main-card h3,
.el-card h1,
.el-card h2,
.el-card h3,
.goods .common-config .pro-tit,
.goods .common-config .config-tit {
  color: var(--vps-ink) !important;
}

.griy-12,
.hello,
.email-box,
.phone-box,
.el-form-item__label,
.el-empty__description p,
.el-pagination__total,
.el-pagination__jump,
.goods .common-config .config-tit {
  color: var(--vps-muted) !important;
}

.el-input__inner,
.el-textarea__inner,
.el-select .el-input__inner,
.el-input-group__prepend,
.el-input-group__append {
  color: var(--vps-ink) !important;
  border-color: rgba(135, 164, 213, .30) !important;
  border-radius: 9px !important;
  background: #091832 !important;
}

.el-input__inner:hover,
.el-textarea__inner:hover,
.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: #37c9ff !important;
  background: #0b1c3a !important;
  box-shadow: 0 0 0 3px rgba(55, 201, 255, .10) !important;
}

.el-button {
  border-radius: 9px !important;
}

.el-button--primary,
.goods .f-order .right .buy {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, #1e6bff, #1598ff) !important;
  box-shadow: 0 10px 24px rgba(30, 107, 255, .24) !important;
}

.el-button--default,
.el-button.is-plain {
  color: #dce8ff !important;
  border-color: rgba(135, 164, 213, .32) !important;
  background: rgba(255, 255, 255, .04) !important;
}

.el-tabs__nav-wrap::after,
.el-table::before,
.el-table--border::after,
.el-table--group::after {
  background: var(--vps-line) !important;
}

.el-tabs__item {
  color: var(--vps-muted) !important;
}

.el-tabs__item.is-active,
.el-tabs__item:hover {
  color: #fff !important;
}

.el-tabs__active-bar {
  height: 2px !important;
  background: linear-gradient(90deg, #1e6bff, #37c9ff) !important;
}

.el-table,
.el-table tr,
.el-table td,
.el-table th,
.el-table__header-wrapper,
.el-table__body-wrapper {
  color: #dce8ff !important;
  border-color: var(--vps-line) !important;
  background: #0c1d3f !important;
}

.el-table th,
.el-table__header-wrapper {
  color: #91a4c6 !important;
  background: #0a1934 !important;
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: #102851 !important;
}

.el-dialog,
.el-popover,
.el-dropdown-menu,
.el-select-dropdown {
  color: var(--vps-ink) !important;
  border: 1px solid var(--vps-line) !important;
  border-radius: 12px !important;
  background: #0c1d3f !important;
}

.el-dropdown-menu__item,
.el-select-dropdown__item {
  color: #c7d5ef !important;
}

.el-dropdown-menu__item:hover,
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  color: #fff !important;
  background: #102851 !important;
}

body:has(#login),
body:has(#regist),
body:has(#forget) {
  background: #071127 !important;
}

:is(#login, #regist, #forget) .login-container {
  width: min(1180px, calc(100vw - 48px)) !important;
  height: min(680px, calc(100vh - 72px)) !important;
  min-height: 570px;
  border: 1px solid var(--vps-line) !important;
  border-radius: 20px !important;
  background: #081630 !important;
  box-shadow: 0 34px 90px rgba(0, 5, 20, .38) !important;
}

:is(#login, #regist, #forget) .container-back {
  overflow: hidden;
  width: 58% !important;
  border-right: 1px solid var(--vps-line) !important;
  border-radius: 20px 0 0 20px !important;
  background:
    radial-gradient(circle at 75% 30%, rgba(55, 201, 255, .18), transparent 32%),
    linear-gradient(rgba(105, 141, 203, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 141, 203, .045) 1px, transparent 1px),
    #081630 !important;
  background-size: auto, 46px 46px, 46px 46px, auto !important;
}

:is(#login, #regist, #forget) .container-back::before {
  position: absolute;
  top: 42px;
  left: 46px;
  z-index: 2;
  display: flex;
  min-height: 40px;
  padding-left: 58px;
  align-items: center;
  content: "888 VPS · GLOBAL CLOUD";
  color: #b9c9e6;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .12em;
  background: url("/upload/common/default/vps-brand-icon.png?v=20260818") left center / 48px 40px no-repeat;
}

:is(#login, #regist, #forget) .back-text {
  z-index: 2;
  left: 52px !important;
  color: #fff !important;
}

:is(#login, #regist, #forget) .text-welcome {
  color: #fff !important;
  font-size: clamp(42px, 4vw, 64px) !important;
}

:is(#login, #regist, #forget) .text-title {
  color: #fff !important;
  font-size: 24px !important;
}

:is(#login, #regist, #forget) .text-level {
  color: #91a4c6 !important;
}

:is(#login, #regist, #forget) .container-before {
  right: 0 !important;
  width: 42% !important;
  border-radius: 0 20px 20px 0 !important;
  background: #0c1d3f !important;
  box-shadow: none !important;
}

:is(#login, #regist, #forget) .login {
  box-sizing: border-box !important;
  width: 100% !important;
  padding-right: 44px !important;
  padding-left: 44px !important;
}

:is(#login, #regist, #forget) .login-form {
  width: 100% !important;
}

:is(#login, #regist, #forget) .login-text-title,
:is(#login, #regist, #forget) .login-text-regist,
:is(#login, #regist, #forget) .read-text {
  color: #eef4ff !important;
}

:is(#login, #regist, #forget) a {
  color: #64d2ff !important;
}

:is(#login, #regist, #forget) .login-email,
:is(#login, #regist, #forget) .login-phone {
  color: #91a4c6 !important;
}

:is(#login, #regist, #forget) .login-email.active,
:is(#login, #regist, #forget) .login-phone.active {
  color: #fff !important;
  border-color: #37c9ff !important;
}

.goods .common-config .config-item .el-radio-button__inner,
.goods .common-config .click-select .item,
.goods .common-config .area-box .item {
  color: #c8d6ef !important;
  border-color: rgba(135, 164, 213, .32) !important;
  border-radius: 9px !important;
  background: #091832 !important;
}

.goods .common-config .config-item .el-radio-button.is-active .el-radio-button__inner,
.goods .common-config .click-select .item.active,
.goods .common-config .area-box .item.active {
  color: #fff !important;
  border-color: #37c9ff !important;
  background: linear-gradient(135deg, #1e6bff, #1598ff) !important;
  box-shadow: 0 8px 20px rgba(30, 107, 255, .22) !important;
}

.goods .f-order {
  color: #eef4ff !important;
  border-top-color: var(--vps-line) !important;
  background: #081630 !important;
}

.goods .f-order > .el-main {
  background: #081630 !important;
}

.goods .f-order .l-txt,
.goods .f-order .link {
  color: #91a4c6 !important;
}

.goods .f-order .bot-price .new {
  color: #fff !important;
}

.goods .el-container {
  background: transparent !important;
}

.el-aside .menu-top > .menu-alink:first-child {
  display: block;
  height: auto;
  margin: 0;
}

.el-aside .menu-top > .menu-alink:first-child::before,
.el-aside .menu-top > .menu-alink:first-child::after {
  display: none;
}

@media (max-width: 980px) {
  :is(#login, #regist, #forget) .login-container {
    width: min(540px, calc(100vw - 28px)) !important;
    height: auto !important;
    min-height: 620px;
    border-radius: 16px !important;
  }

  :is(#login, #regist, #forget) .container-back {
    display: none !important;
  }

  :is(#login, #regist, #forget) .container-before {
    position: relative !important;
    width: 100% !important;
    min-height: 620px;
    border-radius: 16px !important;
  }
}

/* Catalog layout must remain last in the cascade. */
body:has(.goods-list-div) .goods-list-div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

body:has(.goods-list-div) .shopping-item {
  min-width: 0;
  min-height: 330px;
  padding-bottom: 0;
  border-color: rgba(105, 160, 244, .3) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 100% 0, rgba(55, 201, 255, .13), transparent 34%),
    linear-gradient(145deg, rgba(16, 42, 86, .98), rgba(7, 23, 51, .98)) !important;
}

body:has(.goods-list-div) .goods-description,
body:has(.goods-list-div) .goods-description:empty,
body:has(.goods-list-div) .goods-description:not(:has(*)) {
  min-height: 112px;
  max-height: 112px;
  padding: 42px 22px 18px;
}

body:has(.goods-list-div) .goods-content {
  display: flex;
  padding: 22px;
  flex: 1;
  flex-direction: column;
}

body:has(.goods-list-div) .goods-name {
  min-height: 54px;
  margin: 0;
  padding: 0;
}

body:has(.goods-list-div) .goods-active {
  min-height: 0;
  margin: 4px 0 0;
  padding: 0;
}

body:has(.goods-list-div) .price-box {
  margin-top: auto;
  padding: 20px 0 0;
  align-items: flex-end;
  border-top: 1px solid rgba(105, 160, 244, .18);
}

@media (max-width: 900px) {
  body:has(.goods-list-div) .goods-list-div {
    grid-template-columns: 1fr;
  }
}

/* Final client-area surface normalization */
body:not(:has(#login)):not(:has(#regist)):not(:has(#forget)),
body:not(:has(#login)):not(:has(#regist)):not(:has(#forget)) .template,
body:not(:has(#login)):not(:has(#regist)):not(:has(#forget)) .template > .el-container,
body:not(:has(#login)):not(:has(#regist)):not(:has(#forget)) .template > .el-container > .el-container,
body:not(:has(#login)):not(:has(#regist)):not(:has(#forget)) .el-main {
  background-color: #071127 !important;
}

body:not(:has(#login)):not(:has(#regist)):not(:has(#forget)) .el-main {
  background-image:
    linear-gradient(rgba(105, 141, 203, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 141, 203, .028) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}

body:not(:has(#login)):not(:has(#regist)):not(:has(#forget)) .main-card {
  color: #dce8ff !important;
  border-color: rgba(105, 160, 244, .22) !important;
  background-color: rgba(12, 29, 63, .94) !important;
}

.el-loading-mask {
  background: rgba(7, 17, 39, .82) !important;
  backdrop-filter: blur(3px);
}

.el-loading-spinner .path {
  stroke: #37c9ff !important;
}

.el-loading-spinner .el-loading-text,
.el-table__empty-text,
.el-empty__description p {
  color: #91a4c6 !important;
}

body:has(.statistics-box) .main-content,
body:has(.statistics-box) .product-list-box,
body:has(.statistics-box) .statistics-bottom,
body:has(.statistics-box) .money-credit {
  background: transparent !important;
}

body:has(.statistics-box) .product-list-box {
  border: 0 !important;
}

body:has(.statistics-box) .no-product .el-button {
  min-width: 150px;
  height: 44px;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #256cff, #13a8ff) !important;
  box-shadow: 0 10px 24px rgba(30, 107, 255, .25) !important;
}

body:has(.statistics-box) .statistics-bottom svg path:first-child {
  stroke: rgba(135, 164, 213, .18) !important;
}

body:has(.statistics-box) .statistics-bottom svg path:last-child {
  stroke: #37c9ff !important;
}

/* Current dashboard balance component */
body:has(.statistics-box) .money-top,
body:has(.statistics-box) .money-credit {
  background: transparent !important;
}

body:has(.statistics-box) .credit-name,
body:has(.statistics-box) .statistics-item-name {
  color: #91a4c6 !important;
}

body:has(.statistics-box) .credit-money,
body:has(.statistics-box) .credit-num,
body:has(.statistics-box) .statistics-item-value {
  color: #fff !important;
}

body:has(.statistics-box) .credit-num {
  margin-top: 18px;
  font-size: 36px !important;
  font-weight: 760;
  letter-spacing: -.03em;
}

body:has(.statistics-box) .credit-num .s-24,
body:has(.statistics-box) .statistics-item-value .s-12 {
  color: #91a4c6 !important;
}

body:has(.statistics-box) .notice-btn {
  color: #64d2ff !important;
}

body:has(.statistics-box) .statistics-item-divider {
  background: rgba(135, 164, 213, .24) !important;
}

/* Settlement and order confirmation */
body:has(.totalprice-box) .el-main {
  padding: 28px 32px 190px !important;
}

body:has(.totalprice-box) .main-card {
  box-sizing: border-box;
  width: min(1180px, 100%);
  min-height: calc(100vh - 260px);
  margin: 0 auto;
  padding: 30px !important;
  border: 1px solid rgba(105, 160, 244, .26) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(55, 201, 255, .1), transparent 24%),
    linear-gradient(145deg, rgba(14, 36, 75, .97), rgba(7, 23, 51, .97)) !important;
  box-shadow: 0 20px 54px rgba(0, 7, 24, .3) !important;
}

body:has(.totalprice-box) .main-title {
  margin-bottom: 26px;
  color: #fff !important;
  font-size: 27px !important;
  font-weight: 760;
  letter-spacing: -.02em;
}

body:has(.totalprice-box) .dont-save-password {
  margin-top: 9px;
  color: #91a4c6 !important;
  font-size: 13px;
  font-weight: 400;
}

body:has(.totalprice-box) .shopping-goods {
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(105, 160, 244, .22);
  border-radius: 14px;
  background: rgba(5, 17, 39, .48);
}

body:has(.totalprice-box) .goods-name {
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 720;
}

body:has(.totalprice-box) .goods-table {
  overflow: hidden;
  border-color: rgba(105, 160, 244, .22) !important;
  border-radius: 10px;
  background: rgba(8, 24, 52, .72) !important;
}

body:has(.totalprice-box) .goods-table thead {
  color: #91a4c6 !important;
  background: rgba(55, 201, 255, .07) !important;
}

body:has(.totalprice-box) .goods-table th,
body:has(.totalprice-box) .goods-table td {
  padding-right: 18px;
  padding-left: 18px;
  color: #dce8ff !important;
  border-color: rgba(105, 160, 244, .17) !important;
}

body:has(.totalprice-box) .goodsInfo-name,
body:has(.totalprice-box) .goodsInfo-val,
body:has(.totalprice-box) .default-color,
body:has(.totalprice-box) .original-price {
  color: #91a4c6 !important;
}

body:has(.totalprice-box) .goodsInfo-price,
body:has(.totalprice-box) .goodsInfo-type,
body:has(.totalprice-box) .item-price,
body:has(.totalprice-box) .item-total,
body:has(.totalprice-box) .price {
  color: #eef4ff !important;
}

body:has(.totalprice-box) .el-footer {
  left: 214px;
  box-sizing: border-box;
  width: calc(100vw - 214px) !important;
  min-height: 116px !important;
  padding: 18px 34px !important;
  border-top: 1px solid rgba(105, 160, 244, .28);
  background: rgba(7, 17, 39, .96) !important;
  box-shadow: 0 -16px 46px rgba(0, 7, 24, .4) !important;
  backdrop-filter: blur(16px);
}

body:has(.totalprice-box) .footer-left,
body:has(.totalprice-box) .footer-right,
body:has(.totalprice-box) .pay-text,
body:has(.totalprice-box) .check-box,
body:has(.totalprice-box) .el-checkbox__label,
body:has(.totalprice-box) .el-radio__label {
  color: #c8d6ef !important;
}

body:has(.totalprice-box) .total-price {
  color: #fff !important;
  font-size: 30px !important;
  font-weight: 780;
  letter-spacing: -.03em;
}

body:has(.totalprice-box) .bule-text {
  color: #64d2ff !important;
}

body:has(.totalprice-box) .buy-btn {
  width: 180px;
  height: 48px;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #256cff, #13a8ff) !important;
  box-shadow: 0 12px 28px rgba(30, 107, 255, .3) !important;
  font-size: 16px;
  font-weight: 720;
}

/* Prevent legacy pages from restoring near-black typography. */
body:not(:has(#login)):not(:has(#regist)):not(:has(#forget)) :is(.main-title, .main-card-title, .content-title) {
  color: #eef4ff !important;
}

body:not(:has(#login)):not(:has(#regist)):not(:has(#forget)) :is(.el-form-item__label, .el-checkbox__label, .el-radio__label) {
  color: #b9c9e6 !important;
}

@media (max-width: 760px) {
  body:has(.totalprice-box) .el-main {
    padding: 14px 12px 200px !important;
  }

  body:has(.totalprice-box) .main-card {
    padding: 20px 14px !important;
  }

  body:has(.totalprice-box) .el-footer {
    left: 0;
    width: 100% !important;
    padding: 16px !important;
  }
}

/* Final high-contrast text cascade */
body:not(:has(#login)):not(:has(#regist)):not(:has(#forget)) :is(
  .main-title,
  .main-card-title,
  .content-title,
  .title-text,
  .el-form-item__label,
  .el-checkbox__label,
  .el-radio__label,
  .el-table__empty-text,
  .el-empty__description p
) {
  color: #fff !important;
}

body:has(.statistics-box) :is(
  .hello,
  .email-box,
  .phone-box,
  .credit-name,
  .statistics-item-name,
  .order-title,
  .no-product p,
  .recommend-box h2,
  .recommend-box p,
  .recommend-text,
  .notice-type,
  .replay-name
) {
  color: #fff !important;
}

body:has(.statistics-box) :is(.notice-btn, .bule-text, .credit-num .s-24, .statistics-item-value .s-12) {
  color: #64d2ff !important;
}

body:has(.totalprice-box) :is(
  .main-title,
  .dont-save-password,
  .goods-name,
  .goods-table th,
  .goods-table td,
  .goodsInfo-name,
  .goodsInfo-val,
  .goodsInfo-price,
  .goodsInfo-type,
  .default-color,
  .item-price,
  .item-total,
  .price,
  .footer-left,
  .footer-right,
  .pay-text,
  .check-box,
  .el-checkbox__label,
  .el-radio__label
) {
  color: #fff !important;
}

body:has(.totalprice-box) :is(.total-price, .bule-text, .total-icon) {
  color: #64d2ff !important;
}