/* 888 VPS mobile client-area layer. Loaded after every page stylesheet. */
@media (max-width: 760px) {
  :root {
    --m-page: #061126;
    --m-panel: #0c2147;
    --m-panel-2: #102a57;
    --m-line: rgba(105, 160, 244, .28);
    --m-text: #f5f9ff;
    --m-muted: #b9cae8;
    --m-accent: #42d1ff;
  }

  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    background: var(--m-page) !important;
    -webkit-text-size-adjust: 100%;
  }

  *,
  *::before,
  *::after {
    max-width: 100%;
  }

  .template,
  .template > .el-container,
  .template > .el-container > .el-container {
    width: 100% !important;
    min-width: 0 !important;
  }

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

  .el-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 62px !important;
    padding: 0 14px !important;
    border-bottom: 1px solid var(--m-line) !important;
    background: rgba(6, 17, 38, .94) !important;
    box-shadow: 0 10px 28px rgba(0, 5, 20, .28) !important;
    backdrop-filter: blur(16px);
  }

  .header-left,
  .header-right {
    min-width: 0 !important;
    gap: 10px !important;
  }

  .header-left .menu-img {
    display: block !important;
    width: 28px !important;
    height: 28px !important;
  }

  .header-left .el-input,
  .header-left .search-box,
  .header-right .cloum-line-item,
  .header-right .country-name {
    display: none !important;
  }

  .header-right {
    margin-right: 0 !important;
  }

  .header-right .car-item {
    margin-right: 4px !important;
  }

  .header-right .header-right-item img,
  .header-right .head-box {
    width: 32px !important;
    height: 32px !important;
  }

  .el-main {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    align-self: stretch !important;
    padding: 74px 12px 96px !important;
    overflow: visible !important;
  }

  .el-main > .main-card,
  body:has(.el-aside a[href="/account.htm"]) .el-main > .main-card {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  :is(.main-title, .finance-title, .content-title, .main-card-title) {
    margin-bottom: 16px !important;
    font-size: 22px !important;
    line-height: 1.3 !important;
  }

  .el-input,
  .el-select,
  .el-cascader,
  .el-date-editor,
  .el-input-number,
  .el-textarea {
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .el-input__inner,
  .el-textarea__inner {
    box-sizing: border-box !important;
    min-height: 44px !important;
    color: var(--m-text) !important;
    border-color: var(--m-line) !important;
    border-radius: 10px !important;
    background: rgba(5, 17, 39, .72) !important;
    font-size: 15px !important;
  }

  .el-button {
    min-height: 42px;
    border-radius: 10px !important;
    font-size: 15px !important;
  }

  .el-dialog,
  .new-pay-dialog,
  .pay-dialog,
  .recharge-dialog,
  .select-coin-dialog {
    top: auto !important;
    box-sizing: border-box !important;
    width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 32px) !important;
    margin: 16px auto !important;
    overflow: hidden !important;
    border-radius: 16px !important;
  }

  .el-dialog__header {
    padding: 18px 18px 14px !important;
  }

  .el-dialog__body {
    max-height: calc(100vh - 150px) !important;
    padding: 16px !important;
    overflow-y: auto !important;
  }

  .el-dialog__footer {
    padding: 12px 16px 16px !important;
  }

  .el-message-box {
    width: calc(100vw - 32px) !important;
    border-radius: 14px !important;
  }

  .el-table,
  .el-table__header-wrapper,
  .el-table__body-wrapper {
    width: 100% !important;
  }

  .el-table__body-wrapper,
  .table-box,
  .table-content {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .el-pagination {
    display: flex !important;
    width: 100% !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  /* Login, registration and password recovery */
  :is(#login, #regist, #forget) {
    min-height: 100svh !important;
    padding: 0 !important;
    background:
      radial-gradient(circle at 90% 0, rgba(55, 201, 255, .18), transparent 38%),
      var(--m-page) !important;
  }

  :is(#login, #regist, #forget) .login-container {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: 18px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

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

  :is(#login, #regist, #forget) .container-before {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 24px 20px !important;
    border: 1px solid var(--m-line) !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, rgba(16, 42, 87, .98), rgba(7, 23, 51, .98)) !important;
    box-shadow: 0 24px 70px rgba(0, 6, 24, .45) !important;
  }

  :is(#login, #regist, #forget) .login {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

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

  :is(#login, #regist, #forget) :is(.login-form, .form-main) {
    margin-top: 24px !important;
  }

  :is(#login, #regist, #forget) .form-item {
    margin-bottom: 14px !important;
  }

  :is(#login, #regist, #forget) .login-btn {
    width: 100% !important;
    height: 48px !important;
  }

  :is(#login, #regist, #forget) :is(.login-email, .login-phone) {
    min-height: 36px !important;
    color: var(--m-muted) !important;
    font-size: 15px !important;
  }

  /* Customer dashboard */
  body:has(.statistics-box) .main-content {
    display: block !important;
  }

  body:has(.statistics-box) .info-box {
    display: grid !important;
    min-height: 0 !important;
    padding: 18px !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body:has(.statistics-box) :is(.info-second, .info-three) {
    height: auto !important;
    gap: 10px !important;
  }

  body:has(.statistics-box) :is(.phone-number, .company-name) {
    margin-left: auto !important;
  }

  body:has(.statistics-box) .statistics-box,
  body:has(.statistics-box) .product-list-box {
    margin: 12px 0 0 !important;
    padding: 0 !important;
  }

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

  body:has(.statistics-box) .money-box {
    grid-column: 1 / -1;
  }

  body:has(.statistics-box) .order-box > div,
  body:has(.statistics-box) .order-item {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 128px !important;
  }

  body:has(.statistics-box) .right-box {
    width: 100% !important;
    margin: 12px 0 0 !important;
  }

  body:has(.statistics-box) :is(.recommend-box, .recommend-box-open, .WorkOrder-box, .notice-box) {
    margin-bottom: 10px !important;
  }

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

  body:has(.goods-list-div) .search-box,
  body:has(.goods-list-div) .search-content {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body:has(.goods-list-div) .goods-list-div {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body:has(.goods-list-div) .shopping-item {
    min-height: 0 !important;
    border-radius: 15px !important;
  }

  body:has(.goods-list-div) .goods-description,
  body:has(.goods-list-div) .goods-description:empty {
    min-height: 88px !important;
    max-height: none !important;
    padding: 24px 18px 14px !important;
  }

  body:has(.goods-list-div) .goods-content {
    padding: 18px !important;
  }

  body:has(.goods-list-div) .goods-name {
    min-height: 0 !important;
    font-size: 18px !important;
  }

  body:has(.goods-list-div) .price-box {
    padding-top: 16px !important;
  }

  /* VPS configuration */
  .goods .el-main {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .goods .config-box,
  .goods .common-config,
  .goods .common-config > .main-card {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
  }

  .goods .common-config .pro-tit {
    font-size: 22px !important;
    overflow-wrap: anywhere;
  }

  .goods .common-config .config-item {
    margin: 22px 0 !important;
  }

  .goods .common-config .click-select,
  .goods .common-config .area-box {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .goods .common-config .click-select .item,
  .goods .common-config .area-box .item,
  .goods .common-config .el-radio-button,
  .goods .common-config .el-radio-button__inner {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .goods .common-config :is(.click-select .item, .area-box .item, .el-radio-button__inner) {
    min-height: 48px !important;
    padding: 13px 10px !important;
    color: #eef6ff !important;
    border-color: var(--m-line) !important;
    border-radius: 10px !important;
    background: rgba(5, 17, 39, .58) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .goods .common-config :is(.click-select .item.com-active, .click-select .item.active, .area-box .item.com-active, .area-box .item.active, .el-radio-button.is-active .el-radio-button__inner) {
    color: #fff !important;
    border-color: #37c9ff !important;
    background: linear-gradient(135deg, #256cff, #149fef) !important;
    box-shadow: 0 8px 22px rgba(27, 111, 255, .24) !important;
  }

  .goods .common-config .config-item .el-input__inner {
    color: #f5f9ff !important;
    border-color: var(--m-line) !important;
    background: #071a39 !important;
  }

  .goods .common-config .op-sysyem {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .goods .common-config .slider {
    display: block !important;
    color: var(--m-muted) !important;
    font-size: 12px !important;
  }

  .goods .common-config .slider .el-slider {
    width: calc(100% - 16px) !important;
    margin: 26px 8px !important;
  }

  .goods .f-order {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
  }

  .goods .f-order > .el-main,
  .goods .f-order .main-card {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px !important;
  }

  .goods .f-order .main-card {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px 12px !important;
  }

  .goods .f-order :is(.left, .mid, .right) {
    width: auto !important;
    min-width: 0 !important;
  }

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

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

  /* Order confirmation */
  body:has(.totalprice-box) .el-main {
    padding: 74px 10px 190px !important;
  }

  body:has(.totalprice-box) .main-card {
    min-height: 0 !important;
    padding: 16px 12px !important;
  }

  body:has(.totalprice-box) .shopping-goods {
    padding: 14px 12px !important;
  }

  body:has(.totalprice-box) .goods-table {
    display: block !important;
    overflow-x: auto !important;
  }

  body:has(.totalprice-box) .goods-table table {
    min-width: 660px;
  }

  body:has(.totalprice-box) .el-footer {
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: grid !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 12px !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
  }

  body:has(.totalprice-box) :is(.footer-left, .footer-right) {
    min-width: 0 !important;
  }

  body:has(.totalprice-box) .total-price {
    font-size: 24px !important;
  }

  body:has(.totalprice-box) .buy-btn {
    width: 112px !important;
    height: 46px !important;
  }

  /* Finance, account, security and ticket-like forms */
  body:has(.finance-balance) :is(.finance-top, .finance-money-main, .finance-balance, .finance-other-money),
  body:has(.account-main) :is(.account-main, .account-content),
  body:has(.security-main) :is(.security-main, .security-content) {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body:has(.finance-balance) .finance-balance {
    display: grid !important;
    min-height: 0 !important;
    padding: 18px !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body:has(.finance-balance) .balance-right {
    display: flex !important;
    width: 100% !important;
    flex-wrap: wrap;
    gap: 10px !important;
  }

  body:has(.finance-balance) .balance-right .el-button {
    min-width: 0 !important;
    margin: 0 !important;
    flex: 1;
  }

  .el-form-item {
    max-width: 100% !important;
  }

  .el-form-item__label {
    float: none !important;
    width: auto !important;
    line-height: 1.5 !important;
  }

  .el-form-item__content {
    margin-left: 0 !important;
  }
}

@media (max-width: 390px) {
  body:has(.statistics-box) .statistics-content,
  body:has(.statistics-box) .order-box,
  .goods .common-config .click-select,
  .goods .common-config .area-box {
    grid-template-columns: 1fr !important;
  }

  .goods .f-order .main-card,
  body:has(.totalprice-box) .el-footer {
    grid-template-columns: 1fr !important;
  }

  .goods .f-order .right .buy,
  body:has(.totalprice-box) .buy-btn {
    width: 100% !important;
  }
}