/* ============================================================
   OptClouds 购物车页 · 深色科技风覆盖
   目标：1:1 复刻用户截图风格
   ============================================================ */

/* ---------- 深色变量 ---------- */
:root {
  --oc-bg: #0a0e1a;
  --oc-bg-2: #0d1326;
  --oc-panel: rgba(255, 255, 255, .045);
  --oc-panel-2: rgba(255, 255, 255, .06);
  --oc-border: rgba(0, 123, 255, .22);
  --oc-border-soft: rgba(255, 255, 255, .08);
  --oc-accent: #007bff;
  --oc-accent-2: #00d2be;
  --oc-text: #e8ecf5;
  --oc-muted: #9aa2bd;
  --oc-glow: 0 0 24px rgba(0, 123, 255, .35);
  --oc-radius: .1rem;
}

/* ---------- 页面大背景 ---------- */
body {
  background: var(--oc-bg) !important;
  color: var(--oc-text);
}
.template,
.el-container {
  background: transparent !important;
}
/* 购物车页中间区域全宽平铺：放开外层容器宽度限制，去掉左右内边距/留白 */
.template {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* 提前预留出导航吸顶高度+间距，让左侧 sticky 分类栏的初始位置与稳定位置一致，避免刷新跳变 */
  padding-top: 0.24rem !important;
}
.el-main {
  background: transparent !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}
/* 覆盖 clientarea element-comment.css 对 el-main 的 40px+0.24rem 顶边距；
   现在由 .template 的 padding-top 统一控制顶部间距，右侧主内容区自身不再额外下移 */
.template > .el-container > .el-container > .el-main,
.el-container:nth-child(2) > .el-main {
  margin: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#mainLoading {
  background: var(--oc-bg) !important;
}

/* ---------- 左侧分类边栏 ---------- */
.cat-sidebar {
  background: var(--oc-panel) !important;
  border: 1px solid var(--oc-border-soft) !important;
  border-radius: var(--oc-radius) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .25) !important;
}
.cat-sidebar-search {
  border-bottom: 1px solid var(--oc-border-soft) !important;
  padding: .16rem;
}
.cat-sidebar-search .el-input__inner {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--oc-border-soft) !important;
  color: var(--oc-text) !important;
}
.cat-sidebar-search .el-input__inner::placeholder {
  color: var(--oc-muted) !important;
}
.cat-sidebar-search .el-input-group__append {
  background: rgba(255, 255, 255, .08) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  border-left: none !important;
  color: #fff !important;
}
.cat-sidebar-search .el-input-group__append .el-icon-search,
.cat-sidebar-search .el-input-group__append i {
  color: #fff !important;
}
.cat-sidebar-search .el-input-group__append:hover {
  background: rgba(0, 123, 255, .18) !important;
  color: #00d2be !important;
}
.cat-sidebar-search .el-input-group__append:hover .el-icon-search,
.cat-sidebar-search .el-input-group__append:hover i {
  color: #00d2be !important;
}
.cat-sidebar-title {
  color: var(--oc-text) !important;
  border-bottom: 1px solid var(--oc-border-soft) !important;
}
.cat-list {
  padding: .08rem 0;
}
.cat-item {
  color: var(--oc-muted) !important;
}
.cat-item-inner {
  padding: .12rem .16rem .12rem .2rem;
  border-radius: 0 var(--oc-radius) var(--oc-radius) 0;
}
.cat-item:hover .cat-item-inner {
  background: rgba(0, 123, 255, .08) !important;
  color: #fff !important;
}
.cat-item.active > .cat-item-inner {
  background: rgba(0, 123, 255, .12) !important;
  color: #fff !important;
  font-weight: 600;
}
.cat-item.active::before {
  width: .03rem;
  background: linear-gradient(180deg, var(--oc-accent), var(--oc-accent-2)) !important;
  box-shadow: 0 0 12px var(--oc-accent);
}
.cat-sub {
  padding: .06rem 0 .06rem .2rem !important;
  background: transparent !important;
}
.cat-sub-item {
  color: var(--oc-muted) !important;
  border: 1px solid transparent !important;
  border-radius: .06rem;
  margin-right: .08rem;
}
.cat-sub-item:hover {
  color: var(--oc-accent-2) !important;
  background: rgba(0, 210, 190, .08) !important;
  border-color: rgba(0, 210, 190, .25) !important;
}
.cat-sub-item.active {
  color: var(--oc-accent-2) !important;
  background: rgba(0, 210, 190, .12) !important;
  border-color: rgba(0, 210, 190, .4) !important;
  font-weight: 600;
}

/* ---------- 二级分类 Tab ---------- */
.oc-tabs {
  border-bottom: 1px solid var(--oc-border-soft) !important;
  margin-bottom: .18rem;
}
.oc-tab {
  color: var(--oc-muted) !important;
  background: var(--oc-panel) !important;
  border: 1px solid transparent !important;
  border-radius: .2rem !important;
}
.oc-tab:hover {
  color: #fff !important;
  border-color: var(--oc-border) !important;
  box-shadow: var(--oc-glow);
}
.oc-tab--active {
  color: #fff !important;
  background: linear-gradient(90deg, var(--oc-accent), #1e6bff) !important;
  border-color: var(--oc-accent) !important;
  box-shadow: var(--oc-glow);
  font-weight: 600;
}

/* ---------- 主内容卡片 ---------- */
.main-card {
  background: transparent !important;
}
.main-title {
  color: var(--oc-text) !important;
}
.cart-des {
  background: var(--oc-panel) !important;
  border: 1px solid var(--oc-border-soft) !important;
  color: var(--oc-text) !important;
}
.cart-des * {
  all: revert;
  color: var(--oc-text) !important;
}
.main-content-box {
  background: transparent !important;
}
.second-desc {
  background: rgba(0, 123, 255, .08) !important;
  border: 1px solid var(--oc-border) !important;
  color: var(--oc-accent-2) !important;
}

/* ---------- Hero 横幅 ---------- */
.oc-hero {
  position: relative;
  border-radius: var(--oc-radius);
  overflow: hidden;
  margin-bottom: .16rem;
  padding: .16rem .4rem .24rem;
  background:
    radial-gradient(900px 380px at 70% 20%, rgba(0, 210, 190, .12), transparent 60%),
    radial-gradient(900px 420px at 20% 90%, rgba(0, 123, 255, .18), transparent 60%),
    linear-gradient(120deg, #070b16, #0d1430 55%, #070b16);
  border: 1px solid var(--oc-border);
}
.oc-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: .48rem .48rem;
  mask-image: radial-gradient(600px 300px at 50% 40%, #000, transparent 80%);
  pointer-events: none;
}
.oc-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .4rem;
}
.oc-hero__left { flex: 1; min-width: 0; }
.oc-hero__tag {
  display: inline-block;
  font-size: .13rem;
  letter-spacing: .02rem;
  color: var(--oc-accent-2);
  border: 1px solid var(--oc-border);
  padding: .05rem .14rem;
  border-radius: .3rem;
  margin-bottom: .18rem;
  background: var(--oc-panel);
}
.oc-hero__title {
  font-size: .38rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: .12rem;
  background: linear-gradient(90deg, #ffffff, #9ec5ff 55%, var(--oc-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.oc-hero__subtitle {
  font-size: .16rem;
  color: var(--oc-muted);
  margin-bottom: .24rem;
}
.oc-hero__features {
  display: flex;
  gap: .18rem;
  flex-wrap: wrap;
}
.oc-hero__feat {
  display: flex;
  align-items: center;
  gap: .08rem;
  background: var(--oc-panel);
  border: 1px solid var(--oc-border-soft);
  border-radius: .08rem;
  padding: .08rem .12rem;
  font-size: .13rem;
  color: var(--oc-text);
}
.oc-hero__feat .ico {
  width: .2rem;
  height: .2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--oc-accent), var(--oc-accent-2));
  color: #fff;
  font-size: .12rem;
}
.oc-hero__right {
  flex: 0 0 6.7rem;
  height: 3.1rem;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: .12rem;
}
.oc-stat-card {
  flex: 1;
  background: var(--oc-panel);
  border: 1px solid var(--oc-border-soft);
  border-radius: var(--oc-radius);
  padding: .1rem .14rem;
  backdrop-filter: blur(8px);
}
.oc-stat-card .num {
  font-size: .24rem;
  font-weight: 800;
  color: #fff;
}
.oc-stat-card .num small { font-size: .14rem; color: var(--oc-accent-2); }
.oc-stat-card .label {
  font-size: .12rem;
  color: var(--oc-muted);
  margin-top: .04rem;
}

/* ---------- 产品网格 5 列 ---------- */
.goods-list-div {
  grid-template-columns: repeat(5, 1fr) !important;
  gap: .16rem !important;
}
@media (max-width: 1200px) {
  .goods-list-div { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
  .goods-list-div { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- Element UI loading 遮罩深色化（防止淡入时白闪） ---------- */
.el-loading-mask {
  background-color: rgba(10, 14, 26, .9) !important;
}
.el-loading-spinner .path {
  stroke: var(--oc-accent) !important;
}
.el-loading-spinner .el-loading-text {
  color: var(--oc-muted) !important;
}

/* ---------- 产品卡片深色科技风 ---------- */
.shopping-item {
  background: var(--oc-panel) !important;
  border: 1px solid rgba(0, 123, 255, .14) !important;
  border-radius: var(--oc-radius) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .25) !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  overflow: hidden;
}
.shopping-item:hover {
  transform: translateY(-6px);
  border-color: var(--oc-accent) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45), var(--oc-glow) !important;
}
.shopping-item .goods-content {
  background: transparent !important;
}
.shopping-item .goods-info {
  background: transparent !important;
  padding: 0 .16rem .16rem;
}
/* 顶部服务器 SVG 占位图 */
.oc-card-media {
  height: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 30%, rgba(0, 123, 255, .12), transparent 70%);
  position: relative;
}
.oc-card-media svg {
  width: 1.2rem;
  height: .8rem;
  filter: drop-shadow(0 0 10px rgba(0, 123, 255, .45));
}
/* 标题 */
.shopping-item .goods-name {
  padding: .14rem .16rem !important;
  border-bottom: 1px solid var(--oc-border-soft);
}
.shopping-item .goods-name-text {
  color: #fff !important;
  font-size: .16rem !important;
  text-align: center;
  white-space: normal;
  line-height: 1.3;
}
.shopping-item .goods-name .qty-box {
  color: var(--oc-muted) !important;
}
/* 标签 */
.shopping-item .goods-tag .tag-item {
  color: var(--oc-accent-2) !important;
}
.shopping-item .goods-tag .tag-item::after {
  background: var(--oc-accent-2) !important;
}
.shopping-item .goods-active .active-name {
  color: var(--oc-accent-2) !important;
  background: rgba(0, 210, 190, .1) !important;
}
/* 配置说明：竖排图标+文字 */
.shopping-item .goods-description {
  color: var(--oc-muted) !important;
  font-size: .13rem !important;
  min-height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}
.shopping-item .goods-description ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.shopping-item .goods-description li {
  padding: .05rem 0;
  display: flex;
  align-items: center;
  gap: .06rem;
}
.shopping-item .goods-description li::before {
  content: "◈";
  color: var(--oc-accent);
  font-size: .1rem;
  flex-shrink: 0;
}
/* 价格行 */
.shopping-item .price-box {
  border-top: 1px solid var(--oc-border-soft) !important;
  padding: .14rem .16rem !important;
}
.shopping-item .price-box .item-price {
  color: var(--oc-accent-2) !important;
  font-size: .2rem !important;
  font-weight: 800;
}
.shopping-item .price-box .item-price-cycle {
  color: var(--oc-muted) !important;
}
.shopping-item .price-box .original-price {
  color: var(--oc-muted) !important;
}
.shopping-item .price-box .buy-btn {
  background: linear-gradient(90deg, var(--oc-accent), #1e6bff) !important;
  border: none !important;
  box-shadow: var(--oc-glow);
  color: #fff !important;
  border-radius: .06rem !important;
  padding: 0 .14rem !important;
  height: .34rem !important;
}
.shopping-item .price-box .buy-btn:hover {
  filter: brightness(1.1);
}

/* ---------- 底部 4 列信息条 ---------- */
.oc-info-bar {
  margin-top: .32rem;
  padding: .24rem .32rem;
  background:
    radial-gradient(600px 200px at 20% 0%, rgba(0, 123, 255, .16), transparent 60%),
    var(--oc-panel);
  border: 1px solid var(--oc-border-soft);
  border-radius: var(--oc-radius);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .24rem;
}
.oc-info-item {
  display: flex;
  align-items: center;
  gap: .12rem;
}
.oc-info-item .ico {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 123, 255, .25), rgba(0, 210, 190, .18));
  border: 1px solid var(--oc-border);
  color: var(--oc-accent-2);
  font-size: .18rem;
  flex-shrink: 0;
}
.oc-info-item .title {
  font-size: .16rem;
  font-weight: 700;
  color: #fff;
}
.oc-info-item .desc {
  font-size: .12rem;
  color: var(--oc-muted);
}
@media (max-width: 980px) {
  .oc-info-bar { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 空状态 ---------- */
.no-goods .el-empty__description,
.el-empty__description {
  color: var(--oc-muted) !important;
}
.el-empty__title {
  color: var(--oc-text) !important;
}
/* 隐藏 Element UI 默认空状态纸盒图，避免深色页中白色/灰色纸箱刺眼 */
.el-empty__image,
.el-empty__image svg,
.el-empty__image img {
  display: none !important;
}
/* 产品卡价格框/分类树内联白色箭头：强制改浅色，覆盖内联 style 的 #F6F7FB */
.pirce-box i.el-icon-arrow-down,
.cat-arrow,
.select-btn,
i[class*="el-icon-arrow"] {
  color: var(--oc-muted) !important;
}

/* ---------- 域名视图深色 ---------- */
.domain-box,
.domain-box .domain-content,
.domain-box .domain-content .domain-left,
.domain-box .domain-content .domain-right {
  color: var(--oc-text);
}
.domain-box .register-type .reg-ridio {
  color: var(--oc-muted) !important;
}
.domain-box .register-type .reg-ridio.isActice {
  color: var(--oc-accent) !important;
}
.domain-box .domain-search .el-input__inner,
.domain-box .domain-search .el-input-group__append {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--oc-border-soft) !important;
  color: var(--oc-text) !important;
}
.domain-box .domain-search .suffix-box {
  color: var(--oc-text) !important;
  background: transparent !important;
}
.domain-box .domain-search .search-button {
  background: linear-gradient(90deg, var(--oc-accent), #1e6bff) !important;
  border: none !important;
  box-shadow: var(--oc-glow);
}
.domain-box .domain-search .suffix-list {
  background: var(--oc-bg-2) !important;
  border: 1px solid var(--oc-border) !important;
}
.domain-box .domain-search .suffix-list .suffix-item {
  background: var(--oc-panel) !important;
  border-color: var(--oc-border-soft) !important;
  color: var(--oc-text) !important;
}
.domain-box .domain-search .suffix-list .suffix-item:hover,
.domain-box .domain-search .suffix-list .suffix-item.suffix-active {
  background: rgba(0, 123, 255, .12) !important;
  border-color: var(--oc-accent) !important;
  color: var(--oc-accent) !important;
}
.domain-box .domain-content .domain-left .domain-one .search-title,
.domain-box .domain-content .domain-left .domain-one .start-search p,
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-search p,
.domain-box .domain-content .domain-left .batch-box .batch-main .search-title,
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-left .domain-name,
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .whois-box,
.domain-box .domain-content .domain-right .car-top,
.domain-box .domain-content .domain-right .car-list .car-item .car-bottom,
.domain-box .domain-content .domain-right .car-list .car-item .car-name .shop-name,
.car-money {
  color: var(--oc-text) !important;
}
.domain-box .domain-content .domain-left .domain-one .domain-list,
.domain-box .domain-content .domain-left .domain-one .start-search,
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-search,
.domain-box .domain-content .domain-left .batch-box .batch-main .avail-list,
.domain-box .domain-content .domain-left .batch-box .batch-main .all-check,
.domain-box .domain-content .domain-left .batch-box .unavail-list,
.domain-box .domain-content .domain-right .car-box {
  background: var(--oc-panel) !important;
  border: 1px solid var(--oc-border-soft) !important;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item,
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item,
.domain-box .domain-content .domain-left .batch-box .unavail-list .unavail-item,
.domain-box .domain-content .domain-right .car-list .car-item {
  border-bottom: 1px solid var(--oc-border-soft) !important;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item:hover,
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item:hover,
.domain-box .domain-content .domain-right .car-list .car-item:hover {
  background: rgba(0, 123, 255, .06) !important;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-left .domain-status,
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-left .domain-status,
.domain-box .domain-content .domain-right .car-no,
.domain-box .domain-content .domain-right .car-list .car-item .car-del,
.car-money .mon-right .original-price {
  color: var(--oc-muted) !important;
}
.domain-box .domain-content .domain-left .domain-one .domain-list .domain-item .item-right .premium-type,
.domain-box .domain-content .domain-left .batch-box .batch-main .batch-item .item-right .premium-type {
  background: var(--oc-panel-2) !important;
  color: var(--oc-muted) !important;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .all-check {
  background: var(--oc-panel) !important;
}
.domain-box .domain-content .domain-left .batch-box .batch-main .all-check .el-button {
  background: linear-gradient(90deg, var(--oc-accent), #1e6bff) !important;
  border: none !important;
}
.domain-box .domain-content .domain-left .batch-box .unavail-title .open-text {
  color: var(--oc-accent) !important;
}

/* ---------- SSL 视图深色 ---------- */
.ssl-box,
.ssl-content,
.ssl-left,
.ssl-right {
  color: var(--oc-text) !important;
}
.ssl-filter .filter-item .filter-label {
  color: var(--oc-muted) !important;
}
.ssl-filter .el-radio-button__inner {
  background: var(--oc-panel) !important;
  border-color: var(--oc-border-soft) !important;
  color: var(--oc-text) !important;
}
.ssl-filter .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: linear-gradient(90deg, var(--oc-accent), #1e6bff) !important;
  border-color: var(--oc-accent) !important;
  color: #fff !important;
  box-shadow: var(--oc-glow);
}
.ssl-left .el-table,
.ssl-left .el-table__header,
.ssl-left .el-table__body,
.ssl-left .el-table th,
.ssl-left .el-table td {
  background: var(--oc-panel) !important;
  color: var(--oc-text) !important;
  border-color: var(--oc-border-soft) !important;
}
.ssl-left .el-table--enable-row-hover .el-table__body tr:hover > td {
  background: rgba(0, 123, 255, .08) !important;
}
.ssl-right {
  background: var(--oc-panel) !important;
  border: 1px solid var(--oc-border-soft) !important;
  border-radius: var(--oc-radius) !important;
}
.ssl-right .right-title {
  color: #fff !important;
  border-bottom: 1px solid var(--oc-border-soft) !important;
}
.ssl-right .config-item .config-label {
  color: var(--oc-muted) !important;
}
.ssl-right .config-item.price-area,
.ssl-right .right-footer {
  border-top: 1px solid var(--oc-border-soft) !important;
}

/* ---------- 购物车右侧结算深色 ---------- */
.car-top,
.car-box,
.car-item,
.car-money,
.car-settle {
  color: var(--oc-text) !important;
}
.car-settle .settle-btn {
  background: linear-gradient(90deg, var(--oc-accent), #1e6bff) !important;
  border: none !important;
  box-shadow: var(--oc-glow);
  border-radius: .06rem !important;
}

/* ---------- 全局链接 hover ---------- */
a:hover,
.link-hover:hover,
.blue-a-text:hover,
.footer-nav-item a:hover,
.oc-footer__link:hover,
.oc-footer__friend-link:hover,
.the-footer-g .menu .menu-item:hover,
.the-footer-g a:hover {
  color: var(--oc-accent-2) !important;
}

/* ---------- Element UI 组件深色覆盖 ---------- */
.el-input__inner,
.el-textarea__inner {
  background: rgba(255, 255, 255, .05) !important;
  border-color: var(--oc-border-soft) !important;
  color: var(--oc-text) !important;
}
.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
  color: var(--oc-muted) !important;
}
.el-button--default {
  background: var(--oc-panel) !important;
  border-color: var(--oc-border) !important;
  color: var(--oc-text) !important;
}
.el-button--default:hover {
  border-color: var(--oc-accent) !important;
  color: var(--oc-accent-2) !important;
}
.el-button--primary {
  background: linear-gradient(90deg, var(--oc-accent), #1e6bff) !important;
  border: none !important;
  box-shadow: var(--oc-glow);
}
.el-select-dropdown,
.el-popover,
.el-dropdown-menu {
  background: var(--oc-bg-2) !important;
  border-color: var(--oc-border) !important;
}
.el-select-dropdown__item,
.el-dropdown-menu__item {
  color: var(--oc-text) !important;
}
.el-select-dropdown__item:hover,
.el-dropdown-menu__item:hover {
  background: rgba(0, 123, 255, .12) !important;
  color: var(--oc-accent-2) !important;
}

/* ---------- 右侧浮窗（上云无忧 / 客服 / 返回顶部）深色化 ---------- */
.the-consult-g .activity-inlet {
  background: var(--oc-panel) !important;
  border: 1px solid var(--oc-border-soft) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4) !important;
}
.the-consult-g .activity-inlet a {
  border: 2px solid var(--oc-border-soft) !important;
  box-shadow: none !important;
}
.the-consult-g .consult-service {
  background: linear-gradient(180deg, var(--oc-bg-2) 0%, #0b1226 100%) !important;
  border: 1px solid var(--oc-border-soft) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4) !important;
}
.the-consult-g .consult-service .row {
  border-bottom: 1px solid var(--oc-border-soft) !important;
}
.the-consult-g .consult-service .row .desc {
  color: var(--oc-text) !important;
}
.the-consult-g .consult-service .row:hover .desc {
  color: var(--oc-accent-2) !important;
}
.the-consult-g .consult-service .popover .popover-sub-box {
  background: var(--oc-bg-2) !important;
}
.the-consult-g .consult-service .popover .popover-sub {
  background: linear-gradient(180deg, var(--oc-bg-2) 0%, #0b1226 100%) !important;
  border: 1px solid var(--oc-border) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45) !important;
}
.the-consult-g .consult-service .popover .popover-sub .top {
  color: var(--oc-text) !important;
  border-bottom: 1px solid var(--oc-border-soft) !important;
}
.the-consult-g .consult-service .row .popover .popover-sub .cards .card .left .text span:first-child {
  color: var(--oc-text) !important;
}
.the-consult-g .consult-service .row .popover .popover-sub .cards .card .left .text span:last-child {
  color: var(--oc-muted) !important;
}
.the-consult-g .consult-service .row.channel .popover .popover-sub .cards .card {
  border-bottom: 1px solid var(--oc-border-soft) !important;
}
.the-consult-g .consult-service .row.channel .popover .popover-sub .card:hover .left .text span:first-child {
  color: var(--oc-accent-2) !important;
}
.the-consult-g .back-top,
.the-consult-g .chat-online {
  background: var(--oc-bg-2) !important;
  border: 1px solid var(--oc-border-soft) !important;
}
.the-consult-g .back-top > div,
.the-consult-g .chat-online > div {
  background: linear-gradient(180deg, var(--oc-bg-2) 0%, #0b1226 100%) !important;
  border: 1px solid var(--oc-border-soft) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45) !important;
}
/* 功能性图标统一反白，保证在深色背景上可见（品牌 QQ/渠道图标同样反白以保持统一） */
.the-consult-g .consult-service .row .icon,
.the-consult-g .back-top .icon:before,
.the-consult-g .chat-online .icon:before,
.the-consult-g .consult-service .popover .popover-sub .top:before,
.the-consult-g .consult-service .row .popover .popover-sub .cards .card .right:before {
  filter: brightness(0) invert(1) !important;
}

/* 隐藏顶部二级分类 Tab 栏和"订购产品"标题 */
.oc-tabs,
.main-title {
  display: none !important;
}
/* ---------- Hero 右侧：地图面板 + 全球节点图 ---------- */
.oc-map-stats {
  flex: 0 0 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.oc-map-panel {
  position: relative;
  flex: 1;
  border-radius: var(--oc-radius);
  background:
    radial-gradient(600px 300px at 30% 30%, rgba(0,123,255,.12), transparent 60%),
    radial-gradient(500px 250px at 80% 80%, rgba(0,210,190,.08), transparent 60%),
    rgba(0,0,0,.18);
  border: 1px solid var(--oc-border-soft);
  overflow: hidden;
}
.oc-map-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: .24rem .24rem;
  pointer-events: none;
}
.oc-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.oc-map-svg .land {
  fill: rgba(0,123,255,.12);
  stroke: rgba(0,123,255,.28);
  stroke-width: .6;
}
.oc-map-svg .connection {
  fill: none;
  stroke: url(#lineGrad);
  stroke-width: 1.4;
  stroke-dasharray: 6,4;
  opacity: .65;
  animation: dashMove 3s linear infinite;
}
.oc-map-svg .node-core {
  fill: var(--oc-accent);
  filter: drop-shadow(0 0 4px rgba(0,123,255,.8));
  animation: pulseCore 2s ease-in-out infinite;
}
.oc-map-svg .node-ring {
  fill: none;
  stroke: var(--oc-accent-2);
  stroke-width: .8;
  opacity: .45;
  animation: ringPulse 2s ease-out infinite;
}
.oc-map-svg .city-label {
  font-size: 10px;
  fill: #e8ecf5;
  opacity: .9;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
@keyframes dashMove { to { stroke-dashoffset: -40; } }
@keyframes pulseCore { 0%,100% { r: 3; opacity: 1; } 50% { r: 4.5; opacity: .85; } }
@keyframes ringPulse { 0% { r: 4; opacity: .5; } 100% { r: 14; opacity: 0; } }
@media (max-width: 980px) {
  .oc-hero__right { flex: auto; width: 100%; height: 3.6rem; }
  .oc-map-stats { flex: 0 0 1.3rem; }
}