/* =====================================================================
 * cany_dianle 全站页面级样式覆盖
 * 适用范围: 会员中心(clientarea) + 购物车(cart) + 首页(home) + 模块内页
 *           因为 cart/home 都拼接 clientarea 的 header.php, 此文件全局生效
 *
 * 组织结构:
 *   01. 通用布局/工具
 *   02. 面包屑/页头
 *   03. 仪表盘 home.php
 *   04. 账户管理 account.php
 *   05. 安全中心 security.php
 *   06. 财务管理 finance.php
 *   07. 产品列表 productList.php
 *   08. 产品内页 productdetail.php
 *   09. 订单详情 orderDetail.php
 *   10. 跨模块/规则页
 *   11. 购物车 shoppingCar.php
 *   12. 商城 goodsList.php
 *   13. 商品配置 goods.php
 *   14. 结算 settlement.php
 *   15. 首页(home)
 *   16. 模块内页(云主机管理面板)
 * ===================================================================== */


/* ==========================================================
 * 01. 通用布局/工具
 * ========================================================== */
.template {
  background: var(--bg-page);
}
.el-main {
  padding: 0.24rem !important;
  background: var(--bg-page);
}
.cany-page {
  padding: 0;
}
.cany-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 0.24rem;
  margin-bottom: 0.2rem;
  transition: box-shadow 0.3s;
}
.cany-card:hover {
  box-shadow: var(--shadow-card-hover);
}
.cany-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}
.cany-col {
  flex: 1;
  min-width: 0;
}


/* ==========================================================
 * 02. 面包屑/页头
 * ========================================================== */
.breadcrumb,
.bread-crumb,
.el-breadcrumb {
  margin-bottom: 0.16rem !important;
  font-size: 14px;
  line-height: 1;
}
.el-page-header {
  padding-bottom: 0.16rem;
}
.el-page-header__title,
.el-page-header__content {
  color: var(--color-text-primary);
}
.el-breadcrumb__item .el-breadcrumb__inner {
  color: var(--color-text-tips);
}
.el-breadcrumb__item:last-child .el-breadcrumb__inner {
  color: var(--color-text-primary);
  font-weight: 600;
}
.el-breadcrumb__separator {
  color: var(--color-text-tips);
  margin: 0 6px;
}


/* ==========================================================
 * 03. 仪表盘 home.php
 * ========================================================== */
.home-content,
.home-container {
  padding: 0;
}
/* 顶部用户信息卡 */
.home-content .user-info,
.home-info-box,
.dashboard-user-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.28rem 0.32rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  position: relative;
  overflow: hidden;
}
.home-content .user-info::after,
.dashboard-user-card::after {
  content: '';
  position: absolute;
  right: -0.6rem;
  top: -0.6rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102, 135, 251, 0.12) 0%, rgba(102, 135, 251, 0) 70%);
  pointer-events: none;
}

/* 三色统计卡(待处理/未支付/产品数量) */
.home-data-list,
.home-stat-list,
.dashboard-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.2rem;
  margin-bottom: 0.2rem;
}
.home-data-list .data-item,
.home-stat-item,
.dashboard-stat-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.24rem 0.28rem;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 0.2rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.home-data-list .data-item:hover,
.home-stat-item:hover,
.dashboard-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.home-data-list .data-item:nth-child(1)::before,
.home-stat-item:nth-child(1)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #FFA940 0%, #FF7A00 100%);
}
.home-data-list .data-item:nth-child(2)::before,
.home-stat-item:nth-child(2)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #47D7A4 0%, #1FAE82 100%);
}
.home-data-list .data-item:nth-child(3)::before,
.home-stat-item:nth-child(3)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gradient-brand);
}
.home-data-list .data-item .data-num,
.home-data-list .data-item .num {
  font-size: 36px;
  font-weight: 700;
  font-family: var(--font-family-brand);
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

/* 余额卡 */
.home-balance-card,
.balance-info,
.home-content .home-balance {
  background: linear-gradient(135deg, #FFFFFF 0%, #F3F6FF 100%);
  border-radius: var(--radius-lg);
  padding: 0.28rem 0.32rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.2rem;
  position: relative;
  overflow: hidden;
}
.home-balance-card::before,
.home-content .home-balance::before {
  content: '';
  position: absolute;
  right: -0.6rem;
  bottom: -0.6rem;
  width: 2.8rem;
  height: 2.8rem;
  background: url("../../img/dianle/余额 Pic@2x.png") right bottom / contain no-repeat;
  opacity: 0.32;
  pointer-events: none;
}
.balance-num {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text-primary);
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 已开通产品 / 公告通知 / 资源列表 - 卡片化 */
.home-content .home-product,
.home-content .home-notice,
.home-content .home-resource,
.home-product-box,
.home-notice-box,
.home-resource-box {
  background: var(--bg-card) !important;
  border-radius: var(--radius-lg);
  padding: 0.24rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.2rem;
}


/* ==========================================================
 * 04. 账户管理 account.php
 * ========================================================== */
.account-content,
.account-container {
  background: var(--bg-page);
}
.account-content .el-tabs,
.account-tabs {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.16rem;
  box-shadow: var(--shadow-card);
}
.account-content .el-tabs__nav-wrap {
  padding: 0 0.16rem;
}
.account-content .el-tabs__item {
  font-size: 15px;
  height: 0.48rem;
  line-height: 0.48rem;
}
.account-content .el-tabs__content,
.account-tabs__content {
  padding: 0.24rem 0.16rem 0.08rem;
}

/* 账户表单分组 */
.account-section,
.account-content .info-section,
.account-content .info-group {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.24rem;
  margin-bottom: 0.2rem;
  box-shadow: var(--shadow-card);
}
.account-section-title,
.account-content .group-title,
.account-content .section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.08rem;
}
.account-section-title::before,
.account-content .group-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--gradient-brand);
}

/* 账户表单 label */
.account-content .form-item,
.account-content .form-label {
  margin-bottom: 0.16rem;
}
.account-content label {
  color: var(--color-text-regular);
  font-size: 13px;
  margin-bottom: 6px;
}


/* ==========================================================
 * 05. 安全中心 security.php
 * ========================================================== */
.security-content,
.security-container {
  background: var(--bg-page);
}
.security-list,
.security-content .security-item-list {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.08rem 0.24rem;
  box-shadow: var(--shadow-card);
}
.security-item,
.security-content .security-row {
  display: flex !important;
  align-items: center;
  gap: 0.2rem;
  padding: 0.24rem 0;
  border-bottom: 1px solid var(--border-line);
}
.security-item:last-child,
.security-content .security-row:last-child {
  border-bottom: none;
}
.security-item-icon,
.security-content .security-icon {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(230, 218, 255, 0.48), rgba(102, 135, 251, 0.16));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.security-item-icon img,
.security-content .security-icon img {
  width: 0.28rem;
  height: 0.28rem;
}
.security-item-content,
.security-content .security-info {
  flex: 1;
}
.security-item-title,
.security-content .security-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.security-item-desc,
.security-content .security-desc {
  font-size: 13px;
  color: var(--color-text-tips);
}
/* 状态标识 */
.security-status-on { color: var(--color-success); }
.security-status-off { color: var(--color-danger); }


/* ==========================================================
 * 06. 财务管理 finance.php
 * ========================================================== */
.finance-content {
  background: var(--bg-page);
}

/* 财务顶部余额栏 */
.finance-top,
.finance-content .top-info,
.finance-content .balance-card {
  background: linear-gradient(135deg, #FFFFFF 0%, #F3F6FF 100%) !important;
  border-radius: var(--radius-lg) !important;
  padding: 0.28rem 0.32rem !important;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.2rem;
  position: relative;
  overflow: hidden;
}
.finance-content .top-info::before,
.finance-top::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 3rem;
  height: 2.4rem;
  background: url("../../img/dianle/余额 Pic@2x.png") right bottom / contain no-repeat;
  opacity: 0.28;
  pointer-events: none;
}

/* 充值按钮强调 */
.finance-content .recharge-btn,
.finance-content .top-btn {
  background: var(--gradient-brand) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 0 0.24rem !important;
  height: 0.4rem !important;
  line-height: 0.4rem !important;
  color: #FFFFFF !important;
  font-weight: 500;
  box-shadow: var(--shadow-btn);
}

/* 财务 tab */
.finance-content .el-tabs {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.16rem;
  box-shadow: var(--shadow-card);
}

/* 账单列表卡片化 */
.finance-content .bill-list,
.finance-content .pay-list {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.24rem;
  box-shadow: var(--shadow-card);
}

/* 合并支付按钮 */
.finance-content .merge-pay-btn {
  background: var(--gradient-brand);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-pill);
  padding: 0 0.24rem;
  height: 0.4rem;
  line-height: 0.4rem;
}

/* 状态标记 */
.finance-content .status-paid,
.finance-content .status-success {
  color: var(--color-success);
}
.finance-content .status-unpaid {
  color: var(--color-warning);
}
.finance-content .status-failed {
  color: var(--color-danger);
}


/* ==========================================================
 * 07. 产品列表 productList.php
 * ========================================================== */
.productList-content,
.productList-container,
.product-list-content {
  background: var(--bg-page);
}

/* 顶部筛选栏 */
.productList-top,
.product-list-filter,
.productList-content .top-filter {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.2rem 0.24rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.16rem;
  align-items: center;
}

/* 操作按钮组 */
.productList-content .top-btn-box,
.product-list-actions {
  display: flex;
  gap: 0.12rem;
  align-items: center;
}

/* 表格容器 */
.productList-content .product-table,
.product-list-table-wrap {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.16rem 0.24rem;
  box-shadow: var(--shadow-card);
}

/* 状态胶囊 - 通用样式 */
.cany-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  height: 24px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  line-height: 22px;
  white-space: nowrap;
}
.cany-status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cany-status.is-Active     { background: rgba(71, 215, 164, 0.12); color: var(--color-success); }
.cany-status.is-Pending    { background: rgba(143, 169, 255, 0.12); color: var(--color-pending); }
.cany-status.is-Suspended  { background: rgba(187, 191, 201, 0.16); color: var(--color-disabled); }
.cany-status.is-Terminated { background: rgba(255, 92, 92, 0.12); color: var(--color-danger); }
.cany-status.is-Failed     { background: rgba(255, 169, 64, 0.12); color: var(--color-warning); }
.cany-status.is-Fraud      { background: rgba(255, 169, 64, 0.16); color: var(--color-warning); }

/* host-status 组件强化 */
.host-status,
.product-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  height: 22px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  line-height: 20px;
}
.host-status.status-Active,
.host-status[data-status="Active"] {
  background: rgba(71, 215, 164, 0.12);
  color: var(--color-success);
}
.host-status.status-Pending,
.host-status[data-status="Pending"] {
  background: rgba(143, 169, 255, 0.12);
  color: var(--color-pending);
}
.host-status.status-Suspended,
.host-status[data-status="Suspended"] {
  background: rgba(187, 191, 201, 0.16);
  color: var(--color-disabled);
}
.host-status.status-Terminated,
.host-status[data-status="Terminated"] {
  background: rgba(255, 92, 92, 0.12);
  color: var(--color-danger);
}


/* ==========================================================
 * 08. 产品内页 productdetail.php
 * ========================================================== */
.product_detail,
.productdetail-content {
  background: var(--bg-page);
}

/* 顶部产品信息卡(模块独有的容器) */
.product-detail-top,
.product-detail-info,
.host-info-box,
.detail-top {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.24rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.2rem;
}

/* tab 容器 */
.product_detail .el-tabs,
.productdetail-content .el-tabs {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.16rem;
  box-shadow: var(--shadow-card);
}

/* 模块内容注入区 */
.product_detail .content,
.productdetail-content .content,
.product-detail-module {
  margin-top: 0.2rem;
}


/* ==========================================================
 * 09. 订单详情 orderDetail.php
 * ========================================================== */
.orderDetail-content,
.order-detail-content {
  background: var(--bg-page);
}
.orderDetail-content .order-info,
.order-detail-info {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.32rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.2rem;
}
.orderDetail-content .order-status-bar,
.order-status-bar {
  background: linear-gradient(135deg, rgba(102, 135, 251, 0.04) 0%, rgba(128, 217, 254, 0.04) 100%);
  border: 1px solid rgba(102, 135, 251, 0.12);
  border-radius: var(--radius-md);
  padding: 0.16rem 0.24rem;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.12rem;
}

/* 订单金额 */
.orderDetail-content .total-money,
.orderDetail-content .order-total,
.order-total-money {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-price-text);
  font-family: var(--font-family-brand);
}


/* ==========================================================
 * 10. 跨模块/规则页 (crossModule / group_rules / agreement)
 * ========================================================== */
.crossModule-content,
.group_rules-content,
.agreement-content {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.32rem 0.4rem;
  box-shadow: var(--shadow-card);
  line-height: 1.8;
  color: var(--color-text-regular);
}
.crossModule-content h1,
.crossModule-content h2,
.group_rules-content h1,
.group_rules-content h2,
.agreement-content h1,
.agreement-content h2 {
  color: var(--color-text-primary);
  margin: 0.24rem 0 0.16rem;
}


/* ==========================================================
 * 11. 购物车 shoppingCar.php
 * ========================================================== */
.shoppingCar-content,
.shoppingCar {
  background: var(--bg-page);
}

/* 购物车主表 */
.shoppingCar-content .shoppingCar-list,
.shoppingCar-content .car-list,
.shoppingCar-table {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.16rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.2rem;
}

/* 购物车商品行 - 用蓝色渐变(用户指定的购物车样式) */
.shoppingCar-content .car-item,
.shoppingCar-item-card {
  border-radius: var(--radius-lg);
  margin-bottom: 0.12rem;
  padding: 0.2rem;
  transition: all 0.3s;
}
.shoppingCar-content .car-item:hover,
.shoppingCar-item-card:hover {
  background: linear-gradient(291deg, rgba(128, 217, 254, 0.04) -1%, rgba(102, 135, 251, 0.06) 89%);
}

/* 购物车结算栏 */
.shoppingCar-content .car-foot,
.shoppingCar-footer-bar {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.2rem 0.32rem;
  box-shadow: var(--shadow-card);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  bottom: 0.2rem;
  z-index: 10;
}

/* 购物车合计金额 */
.shoppingCar-content .total-money,
.shoppingCar-total-amount {
  font-size: 28px;
  font-weight: 700;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 立即结算按钮 - 用品牌渐变 */
.shoppingCar-content .checkout-btn,
.shoppingCar-content .pay-btn {
  background: var(--gradient-brand) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  padding: 0 0.4rem !important;
  height: 0.48rem !important;
  line-height: 0.48rem !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 1px;
  box-shadow: 0 6px 20px rgba(102, 135, 251, 0.32) !important;
}


/* ==========================================================
 * 12. 商城 goodsList.php
 * ========================================================== */
.goodsList-content,
.goodsList,
.goods-list-content {
  background: var(--bg-page);
}

/* 商城分类筛选 */
.goodsList-content .category-tab,
.goodsList-filter {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.16rem 0.24rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.2rem;
}

/* 商品卡片 - 重头戏 */
.goodsList-content .goods-item,
.goodsList-content .product-card,
.goods-card-item {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.24rem;
  box-shadow: var(--shadow-card);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.goodsList-content .goods-item:hover,
.goodsList-content .product-card:hover,
.goods-card-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(102, 135, 251, 0.16);
}

/* 商品卡装饰条 */
.goodsList-content .goods-item::before,
.goods-card-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.goodsList-content .goods-item:hover::before,
.goods-card-item:hover::before {
  transform: scaleX(1);
}

/* 商品价格 */
.goodsList-content .goods-price,
.goods-card-price {
  font-size: 24px;
  font-weight: 700;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 立即购买 */
.goodsList-content .buy-btn {
  background: var(--gradient-brand) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  width: 100%;
  height: 0.4rem !important;
  line-height: 0.4rem !important;
  font-weight: 600 !important;
  letter-spacing: 1px;
  box-shadow: var(--shadow-btn);
  margin-top: 0.16rem;
}


/* ==========================================================
 * 13. 商品配置 goods.php
 * ========================================================== */
.goods-content,
.goods-config-content {
  background: var(--bg-page);
}

/* 配置分组 */
.goods-content .config-section,
.goods-config-section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.24rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.2rem;
}

/* 配置选项卡片(地域/套餐/镜像) */
.goods-content .option-card,
.goods-content .config-option,
.goods-option-card {
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  padding: 0.16rem 0.2rem;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--bg-card);
}
.goods-content .option-card:hover,
.goods-option-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: 0 2px 8px rgba(102, 135, 251, 0.08);
}
.goods-content .option-card.is-selected,
.goods-content .option-card.active,
.goods-option-card.is-selected {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, rgba(102, 135, 251, 0.04) 0%, rgba(128, 217, 254, 0.06) 100%);
  box-shadow: 0 4px 12px rgba(102, 135, 251, 0.16);
}
.goods-content .option-card.is-selected::after,
.goods-option-card.is-selected::after {
  content: '\2713';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #FFFFFF;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 价格摘要侧边栏 */
.goods-content .price-summary,
.goods-summary-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.24rem;
  box-shadow: var(--shadow-card);
  position: sticky;
  top: 0.2rem;
}

/* 加入购物车 */
.goods-content .add-cart-btn {
  background: var(--gradient-brand) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  width: 100% !important;
  height: 0.48rem !important;
  font-weight: 600 !important;
}


/* ==========================================================
 * 14. 结算 settlement.php
 * ========================================================== */
.settlement-content,
.settlement {
  background: var(--bg-page);
}

/* 订单列表 */
.settlement-content .order-list,
.settlement-orders {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.24rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.2rem;
}

/* 支付方式选择 */
.settlement-content .pay-method,
.settlement-content .payment-list,
.settlement-payments {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.24rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.2rem;
}
.settlement-content .pay-item,
.payment-method-card {
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  padding: 0.16rem 0.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.12rem;
  transition: all 0.2s;
}
.settlement-content .pay-item:hover,
.payment-method-card:hover {
  border-color: var(--color-primary-light);
}
.settlement-content .pay-item.is-active,
.settlement-content .pay-item.active,
.payment-method-card.is-selected {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, rgba(102, 135, 251, 0.04), rgba(128, 217, 254, 0.06));
}

/* 优惠码区 */
.settlement-content .discount-code-box,
.settlement-discount {
  background: rgba(102, 135, 251, 0.04);
  border: 1px dashed rgba(102, 135, 251, 0.24);
  border-radius: var(--radius-md);
  padding: 0.16rem 0.2rem;
}

/* 总价 */
.settlement-content .pay-total,
.settlement-content .order-total {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-price-text);
  font-family: var(--font-family-brand);
}

/* 立即支付 */
.settlement-content .submit-btn,
.settlement-content .pay-btn {
  background: var(--gradient-brand) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  height: 0.52rem !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 0 0.48rem !important;
  box-shadow: var(--shadow-btn) !important;
}


/* ==========================================================
 * 15. 首页 home(home/template/pc/cany_dianle/home.php)
 * ========================================================== */
.home-page-content,
.home-content-wrap {
  background: var(--bg-page);
}

/* 首页 banner */
.home-banner,
.home-page-banner {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 0.24rem;
  box-shadow: var(--shadow-card);
}

/* 商品分类切换 */
.home-product-tab {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.16rem 0.24rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.2rem;
}


/* ==========================================================
 * 16. 模块内页(云主机管理面板) - 通用覆盖
 * 注: 模块HTML被注入到 productdetail.php 的 .content 中
 *      所以这些样式都在 clientarea cany-pages.css 中即可生效
 * ========================================================== */

/* 模块顶部信息栏 - cloudTop / hostTop */
#product_detail_cloud .cloud-top,
#product_detail_cloud .host-top,
.product-detail-cloud .cloud-top {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.24rem 0.28rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 0.2rem;
  position: relative;
  overflow: hidden;
}
#product_detail_cloud .cloud-top::before,
.product-detail-cloud .cloud-top::before {
  content: '';
  position: absolute;
  right: -0.3rem;
  top: -0.3rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(102, 135, 251, 0.16) 0%, rgba(102, 135, 251, 0) 70%);
  pointer-events: none;
}

/* 模块操作按钮组(开关机/重启/重装) */
#product_detail_cloud .top-btns,
#product_detail_cloud .control-btns,
.product-detail-cloud .control-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.12rem;
}
#product_detail_cloud .top-btns .el-button,
#product_detail_cloud .control-btns .el-button {
  border-radius: var(--radius-pill) !important;
  padding: 0 0.16rem !important;
  height: 0.36rem !important;
  line-height: 0.36rem !important;
  font-size: 13px !important;
}

/* 模块 tab 容器 */
#product_detail_cloud .module-tabs,
.product-detail-cloud .module-tabs {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 0.16rem;
  box-shadow: var(--shadow-card);
}

/* 资源监控卡(CPU/内存/磁盘/带宽) */
.resource-monitor-card,
.cloud-monitor-card {
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  padding: 0.16rem 0.2rem;
  text-align: center;
}
.resource-monitor-card .num,
.cloud-monitor-card .num {
  font-size: 24px;
  font-weight: 700;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 磁盘/快照/备份卡片 */
.disk-card, .snapshot-card, .backup-card,
.security-group-card, .firewall-card {
  background: var(--bg-card);
  border: 1px solid var(--border-line);
  border-radius: var(--radius-md);
  padding: 0.16rem 0.2rem;
  margin-bottom: 0.12rem;
  transition: all 0.2s;
}
.disk-card:hover, .snapshot-card:hover, .backup-card:hover {
  border-color: var(--color-primary-light);
  box-shadow: 0 4px 12px rgba(102, 135, 251, 0.08);
}

/* IP 列 */
.ip-list-cell .ip-tag {
  display: inline-block;
  padding: 0 8px;
  height: 22px;
  line-height: 22px;
  border-radius: var(--radius-pill);
  background: rgba(102, 135, 251, 0.08);
  color: var(--color-primary);
  font-size: 12px;
  margin-right: 4px;
  font-family: var(--font-family-brand);
}


/* ==========================================================
 * 全站杂项: 空状态/加载/分页
 * ========================================================== */
.el-empty {
  padding: 0.4rem 0;
}
.el-empty__description {
  color: var(--color-text-tips);
  font-size: 13px;
}
.el-loading-mask {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
}
.el-loading-spinner .circular {
  width: 32px;
  height: 32px;
}
.el-loading-spinner .path {
  stroke: var(--color-primary);
}

/* 通用 hover 效果 */
.cany-hoverable {
  transition: all 0.3s;
}
.cany-hoverable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}