:root,
:root[theme] {
  --dy-blue: #2463e8;
  --dy-blue-2: #1751cb;
  --dy-blue-soft: #eaf2ff;
  --dy-bg: #edf4fd;
  --dy-card: #ffffff;
  --dy-ink: #0d1729;
  --dy-text: #42526b;
  --dy-muted: #7b8aa2;
  --dy-line: #d9e4f2;
  --dy-orange: #f04422;
  --dy-green: #16b57f;
  --dy-navy: #0b1424;
  --dy-radius: 18px;
  --dy-shadow: 0 12px 35px rgba(24, 62, 108, .075);
  --color-primary: var(--dy-blue) !important;
  --color-price-text: var(--dy-orange) !important;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 0 !important;
  color: var(--dy-ink);
  background:
    radial-gradient(circle at 92% 0, rgba(36, 99, 232, .12), transparent 34rem),
    var(--dy-bg) !important;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
}

.template > .el-container {
  min-height: 100vh;
}

.el-aside {
  width: 228px !important;
  padding: 0 14px 24px !important;
  background:
    radial-gradient(circle at 20% 0, rgba(49, 111, 236, .28), transparent 18rem),
    linear-gradient(180deg, #111f36 0%, #091322 70%) !important;
  box-shadow: 18px 0 45px rgba(13, 31, 56, .12);
}

.ali-logo {
  display: block !important;
  width: auto !important;
  max-width: 168px !important;
  height: 42px !important;
  margin: 18px auto 8px !important;
  filter: brightness(0) invert(1);
  object-fit: contain;
}

.menu-top {
  margin-top: 38px !important;
}

.menu-top .el-menu-item,
.menu-top .el-submenu__title {
  display: flex !important;
  width: 100% !important;
  height: 48px !important;
  align-items: center !important;
  margin: 5px 0 !important;
  padding: 0 14px !important;
  color: #a8b7cf !important;
  border-radius: 12px !important;
  line-height: 48px !important;
}

.menu-top .el-menu-item.is-active,
.menu-top .el-submenu.is-active > .el-submenu__title {
  color: #fff !important;
  background: linear-gradient(135deg, #3477f1, #2057c7) !important;
  box-shadow: 0 9px 24px rgba(20, 64, 158, .35);
}

.menu-top .menu-alink {
  display: flex !important;
  width: 100%;
  min-width: 0;
  align-items: center;
}

.menu-top .iconfont {
  width: 24px;
  flex: 0 0 24px;
  font-size: 19px !important;
  text-align: center;
}

.aside-menu-text {
  display: block !important;
  overflow: hidden;
  margin-left: 12px !important;
  font-size: 14px;
  font-weight: 650 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-header {
  width: calc(100% - 228px) !important;
  height: 72px !important;
  padding: 0 30px !important;
  background: rgba(255, 255, 255, .94) !important;
  border-bottom: 1px solid rgba(211, 224, 240, .9) !important;
  box-shadow: 0 8px 28px rgba(22, 54, 96, .05) !important;
  backdrop-filter: blur(18px);
}

.el-header .menu-img {
  display: none !important;
}

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

.header-right-item {
  min-height: 42px;
}

.el-main {
  min-width: 0 !important;
  padding: 96px 30px 56px !important;
}

.main-card,
.qqg-page-intro,
.qqg-coupon-banner,
.qqg-console-head,
.home-main {
  width: min(1380px, 100%) !important;
  max-width: 1380px !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.main-content-box,
.info-box,
.statistics-box,
.product-list-box,
.recommend-box,
.recommend-box-open,
.news-box,
.WorkOrder-box,
.shopping-goods,
.table-content,
.goods .config-box,
.el-dialog {
  background: var(--dy-card) !important;
  border: 1px solid var(--dy-line) !important;
  border-radius: var(--dy-radius) !important;
  box-shadow: var(--dy-shadow) !important;
}

.el-input__inner,
.el-textarea__inner,
.el-select .el-input__inner {
  min-height: 46px;
  color: var(--dy-ink) !important;
  background: #f9fbfe !important;
  border-color: #d6e1ef !important;
  border-radius: 11px !important;
}

.el-input__inner:focus,
.el-textarea__inner:focus,
.el-select .el-input.is-focus .el-input__inner {
  background: #fff !important;
  border-color: var(--dy-blue) !important;
  box-shadow: 0 0 0 3px rgba(36, 99, 232, .1);
}

.el-button {
  min-height: 42px;
  border-radius: 11px !important;
  font-weight: 700 !important;
}

.el-button--primary,
.buy-btn {
  color: #fff !important;
  background: linear-gradient(135deg, #3274ef, #1c56d2) !important;
  border-color: var(--dy-blue) !important;
  box-shadow: 0 8px 18px rgba(36, 99, 232, .2);
}

/* 会员中心首页使用独立的控制台信息架构 */
.qqg-console-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  margin-bottom: 18px !important;
}

.qqg-console-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--dy-blue);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 1.7px;
}

.qqg-console-head h1 {
  margin: 0;
  color: var(--dy-ink);
  font-size: 30px;
  line-height: 1.25;
}

.qqg-console-head p {
  margin: 7px 0 0;
  color: var(--dy-muted);
  font-size: 13px;
}

.qqg-console-head .console-actions {
  display: flex;
  gap: 9px;
}

.qqg-console-head .console-actions a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  color: #344054;
  background: #fff;
  border: 1px solid var(--dy-line);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}

.qqg-console-head .console-actions a:first-child {
  color: #fff;
  background: var(--dy-blue);
  border-color: var(--dy-blue);
  box-shadow: 0 8px 18px rgba(36, 99, 232, .2);
}

.qqg-dashboard-overview {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.qqg-dashboard-overview article {
  display: flex;
  min-height: 156px;
  flex-direction: column;
  padding: 21px;
  background: #fff;
  border: 1px solid var(--dy-line);
  border-radius: 16px;
  box-shadow: 0 9px 26px rgba(24, 62, 108, .055);
}

.qqg-dashboard-overview article > span {
  color: var(--dy-muted);
  font-size: 12px;
}

.qqg-dashboard-overview article > strong {
  margin-top: 15px;
  color: var(--dy-ink);
  font-size: 34px;
  line-height: 1;
}

.qqg-dashboard-overview article > strong small {
  margin-right: 3px;
  font-size: 16px;
}

.qqg-dashboard-overview article > a,
.qqg-dashboard-overview article > button {
  align-self: flex-start;
  margin-top: auto;
  padding: 0;
  color: var(--dy-blue);
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}

.qqg-dashboard-overview .primary-overview {
  color: #fff;
  background:
    radial-gradient(circle at 100% 0, rgba(71, 134, 255, .32), transparent 14rem),
    linear-gradient(145deg, #172c4b, #0c1728);
  border-color: #213957;
}

.qqg-dashboard-overview .primary-overview > span {
  color: #9cb0ca;
}

.qqg-dashboard-overview .primary-overview > strong {
  color: #fff;
}

.qqg-dashboard-overview .primary-overview > button {
  color: #72adff;
}

.home-main .main-content {
  display: grid !important;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, .7fr) !important;
  align-items: start;
  gap: 16px !important;
}

.home-main .left-box,
.home-main .right-box {
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
}

.home-main .info-box,
.home-main .statistics-box,
.home-main .product-list-box,
.home-main .recommend-box,
.home-main .recommend-box-open,
.home-main .WorkOrder-box,
.home-main .news-box {
  margin: 0 0 16px !important;
}

/* 登录与注册：真正的左右分屏，而不是旧模板悬浮卡片 */
#login,
#regist {
  width: 100vw !important;
  min-height: 100vh !important;
  align-items: stretch !important;
  background: #f1f6fd !important;
}

#login .login-container,
#regist .login-container {
  display: grid !important;
  width: 100vw !important;
  height: auto !important;
  min-height: 100vh !important;
  grid-template-columns: minmax(520px, 56%) minmax(520px, 44%);
  align-items: stretch !important;
}

#login .login-jump-btn,
#regist .login-jump-btn {
  z-index: 20;
  top: 26px !important;
  right: 34px !important;
}

#login .container-back,
#regist .container-back {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 20%, rgba(255, 255, 255, .16), transparent 24rem),
    radial-gradient(circle at 12% 90%, rgba(7, 34, 103, .22), transparent 28rem),
    linear-gradient(145deg, #2f73ed 0%, #1754cf 72%, #1045b7 100%) !important;
  border-radius: 0 !important;
}

#login .container-back::before,
#regist .container-back::before {
  position: absolute;
  width: 440px;
  height: 440px;
  content: "";
  right: -130px;
  bottom: -150px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(255, 255, 255, .035),
    0 0 0 140px rgba(255, 255, 255, .025);
}

.qqg-auth-brand {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  padding: 42px clamp(42px, 6vw, 92px) 48px;
  color: #fff;
}

.qqg-auth-logo {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}

.qqg-auth-logo-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--dy-blue);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(5, 28, 91, .22);
  font-size: 22px;
  font-weight: 900;
}

.qqg-auth-logo > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.qqg-auth-logo strong {
  color: #fff;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -.3px;
}

.qqg-auth-logo small {
  color: rgba(255, 255, 255, .62);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

.qqg-auth-copy {
  width: min(590px, 90%);
  margin: auto 0;
}

.qqg-auth-eyebrow,
.qqg-form-kicker {
  display: block;
  margin-bottom: 15px;
  color: rgba(255, 255, 255, .64);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
}

.qqg-auth-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(38px, 4.1vw, 62px);
  line-height: 1.14;
  letter-spacing: -2px;
}

.qqg-auth-copy > p {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .74);
  font-size: 16px;
  line-height: 1.8;
}

.qqg-auth-copy ul {
  display: grid;
  gap: 17px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.qqg-auth-copy li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, .9);
  font-size: 15px;
}

.qqg-auth-copy li i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 9px;
  font-style: normal;
}

.qqg-auth-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 14px;
}

.qqg-auth-proof span {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(11, 43, 113, .18);
}

.qqg-auth-proof strong {
  color: #fff;
  font-size: 20px;
}

.qqg-auth-proof small {
  margin-top: 3px;
  color: rgba(255, 255, 255, .58);
  font-size: 11px;
}

#login .container-before,
#regist .container-before {
  position: relative !important;
  right: auto !important;
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100vh !important;
  align-items: center;
  justify-content: center;
  background: #f1f6fd !important;
  box-shadow: none !important;
}

#login .login,
#regist .login {
  width: min(510px, calc(100% - 72px));
  max-height: calc(100vh - 84px);
  overflow-y: auto;
  padding: 36px 8px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

#login .login-text,
#regist .login-text {
  display: block !important;
}

#login .qqg-form-kicker,
#regist .qqg-form-kicker {
  margin-bottom: 10px;
  color: var(--dy-blue);
}

#login .login-text-title,
#regist .login-text-title {
  color: var(--dy-ink) !important;
  font-size: 34px !important;
  font-weight: 800;
  line-height: 1.2 !important;
}

.qqg-form-subtitle {
  margin: 9px 0 0;
  color: var(--dy-muted);
  font-size: 14px;
}

#login .login-text-regist,
#regist .login-text-regist {
  margin-top: 10px !important;
  color: var(--dy-text) !important;
}

#login .login-form,
#regist .login-form {
  margin-top: 32px !important;
}

#login .form-main,
#regist .form-main {
  margin-top: 22px !important;
}

#login .form-item,
#regist .form-item {
  margin-top: 16px !important;
}

#login .login-top,
#regist .login-top {
  gap: 28px;
  border-bottom: 1px solid var(--dy-line);
}

#login .login-email,
#login .login-phone,
#regist .login-email,
#regist .login-phone {
  height: 38px !important;
  margin: 0 !important;
  padding: 0 2px;
  color: var(--dy-muted);
  font-weight: 650;
}

#login .active,
#regist .active {
  color: var(--dy-blue) !important;
  border-bottom: 2px solid var(--dy-blue) !important;
}

#login .login-btn,
#regist .login-btn,
#regist .regist-btn {
  width: 100%;
  min-height: 48px;
}

#login .qr-code {
  top: 40px !important;
  right: 8px !important;
}

/* 产品目录改成当云式横向套餐，不再是四列小卡片 */
.goods-list-div {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

.shopping-item {
  display: grid !important;
  min-height: 112px !important;
  grid-template-columns: 260px minmax(0, 1fr) 250px;
  align-items: center;
  overflow: visible !important;
  padding: 0 18px 0 20px !important;
  background: #fff !important;
  border: 1px solid var(--dy-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 22px rgba(25, 61, 103, .05) !important;
}

.shopping-item:hover {
  border-color: #adc8f5 !important;
  box-shadow: 0 14px 34px rgba(28, 71, 135, .10) !important;
}

.shopping-item .goods-description {
  display: none !important;
}

.shopping-item .goods-content {
  display: contents !important;
}

.shopping-item .goods-name {
  grid-column: 1;
  margin: 0 !important;
  padding: 0 16px 0 54px !important;
}

.shopping-item .goods-name::before {
  position: absolute;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  margin-left: -52px;
  color: #fff;
  background: linear-gradient(145deg, #3979ef, #1c56cd);
  border-radius: 11px;
  box-shadow: 0 8px 18px rgba(36, 99, 232, .18);
  content: "云";
  font-size: 14px;
  font-weight: 800;
}

.shopping-item.product-defense .goods-name::before {
  content: "盾";
  background: linear-gradient(145deg, #18b981, #087e5a);
}

.shopping-item.product-dedicated .goods-name::before {
  content: "机";
  background: linear-gradient(145deg, #7b61e8, #5032bc);
}

.shopping-item.product-multi .goods-name::before {
  content: "群";
  background: linear-gradient(145deg, #f29b37, #df6f18);
}

.shopping-item .goods-name-text {
  color: var(--dy-ink) !important;
  font-size: 17px !important;
  font-weight: 780 !important;
}

.shopping-item .goods-active {
  grid-column: 2;
  align-self: center;
  margin: 0 !important;
  padding: 0 20px !important;
}

.shopping-item .goods-active:empty::before {
  color: var(--dy-muted);
  content: "实时库存 · 原生配置 · 即时开通";
  font-size: 13px;
}

.shopping-item .price-box {
  grid-column: 3;
  justify-content: flex-end !important;
  gap: 18px;
  margin: 0 !important;
  padding: 0 !important;
}

.shopping-item .item-price {
  color: var(--dy-orange) !important;
  font-size: 26px !important;
  font-weight: 850 !important;
}

.shopping-item .buy-btn {
  min-width: 112px;
}

/* 购物车和确认订单保留原生数据，但呈现为清晰的大卡片 */
.shopping-goods {
  overflow: hidden;
  margin-bottom: 18px !important;
}

.shopping-goods .table-name {
  min-height: 68px;
  padding: 18px 22px !important;
  background: #f8fbff;
  border-bottom: 1px solid var(--dy-line);
}

.shopping-goods .goods-name {
  color: var(--dy-ink) !important;
  font-size: 17px !important;
  font-weight: 780 !important;
}

.goods-table {
  margin: 0 !important;
  overflow: hidden;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0;
}

.goods-table thead {
  height: 52px !important;
  color: var(--dy-muted) !important;
  background: #fff !important;
  border-bottom: 1px solid var(--dy-line);
}

.goods-table tbody tr td {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  border-top: 1px solid #edf2f8;
}

.goods-table .info-box {
  padding: 16px !important;
  background: #f8fbff !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.goods-table .item-total,
.goods-table .total-price {
  color: var(--dy-orange) !important;
  font-size: 22px !important;
  font-weight: 850 !important;
}

.el-footer {
  width: calc(100vw - 228px) !important;
  min-height: 92px !important;
  padding: 14px 30px !important;
  background: rgba(255, 255, 255, .96) !important;
  border-top: 1px solid var(--dy-line);
  box-shadow: 0 -10px 30px rgba(23, 57, 99, .07) !important;
  backdrop-filter: blur(18px);
}

.el-footer .footer-box {
  width: min(1380px, 100%) !important;
}

.el-footer .total-price {
  color: var(--dy-orange) !important;
  font-size: 28px !important;
  font-weight: 850 !important;
}

@media (max-width: 1120px) {
  #login .login-container,
  #regist .login-container {
    grid-template-columns: 48% 52%;
  }

  .qqg-auth-copy h1 {
    font-size: 40px;
  }

  .shopping-item {
    grid-template-columns: 230px minmax(0, 1fr) 230px;
  }

  .qqg-dashboard-overview {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-main .main-content {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 750px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .el-aside {
    width: 84vw !important;
    max-width: 340px !important;
    padding: 0 16px 28px !important;
  }

  .ali-logo {
    max-width: 172px !important;
    margin: 18px 0 8px 12px !important;
  }

  .menu-top {
    margin-top: 26px !important;
  }

  .menu-top .el-menu-item,
  .menu-top .el-submenu__title {
    height: 50px !important;
    line-height: 50px !important;
  }

  .aside-menu-text {
    display: block !important;
    color: inherit !important;
    font-size: 15px !important;
    opacity: 1 !important;
  }

  .el-header {
    left: 0 !important;
    width: 100% !important;
    height: 62px !important;
    padding: 0 14px !important;
  }

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

  .el-main {
    padding: 78px 14px 130px !important;
  }

  .qqg-page-intro {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .qqg-console-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .qqg-console-head .console-actions {
    width: 100%;
    overflow-x: auto;
  }

  .qqg-console-head .console-actions a {
    flex: 0 0 auto;
  }

  .qqg-dashboard-overview {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .qqg-dashboard-overview article {
    min-height: 132px;
    padding: 16px;
  }

  .qqg-dashboard-overview article > strong {
    font-size: 28px;
  }

  .qqg-dashboard-overview .primary-overview {
    grid-column: 1 / -1;
  }

  .qqg-coupon-banner {
    grid-template-columns: 1fr !important;
  }

  .qqg-coupon-banner code {
    justify-self: start;
  }

  #login .login-container,
  #regist .login-container {
    display: block !important;
  }

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

  #login .container-before,
  #regist .container-before {
    min-height: 100vh !important;
    padding: 20px 0;
  }

  #login .login,
  #regist .login {
    width: calc(100% - 32px);
    max-height: none;
    padding: 28px 8px !important;
  }

  #login .login-text-title,
  #regist .login-text-title {
    font-size: 30px !important;
  }

  .shopping-item {
    display: grid !important;
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }

  .shopping-item .goods-name,
  .shopping-item .goods-active,
  .shopping-item .price-box {
    grid-column: 1 !important;
  }

  .shopping-item .goods-name {
    padding: 0 0 0 52px !important;
  }

  .shopping-item .goods-active {
    margin-top: 16px !important;
    padding: 0 !important;
  }

  .shopping-item .price-box {
    justify-content: space-between !important;
    margin-top: 18px !important;
  }

  .goods-table,
  .goods-table tbody,
  .goods-table tr,
  .goods-table td {
    display: block !important;
    width: 100% !important;
  }

  .goods-table thead {
    display: none !important;
  }

  .goods-table tbody tr td {
    padding: 9px 16px !important;
    border: 0 !important;
    text-align: left !important;
  }

  .goods-table tbody tr td:last-child {
    padding-bottom: 18px !important;
  }

  .el-footer {
    left: 0 !important;
    width: 100% !important;
    min-height: 104px !important;
    padding: 12px 14px !important;
  }

  .el-footer .footer-right,
  .el-footer .btn-box {
    width: 100%;
  }

  .el-footer .buy-btn {
    width: 100% !important;
    margin: 10px 0 0 !important;
  }
}