/* ===== 会员中心 UI 增强（2026-10-10）=====
   目标：内容区卡片化、区块标题层级、表单/表格/按钮统一，解决"太朴素"
   作用范围：只对会员中心页面生效（页面里存在 .el-aside 时）
*/
body:has(.el-aside) {
  --k8-ui-border: #eef1f6;
  --k8-ui-text: #1f2733;
  --k8-ui-text-2: #5b667a;
  --k8-ui-text-3: #98a2b3;
  --k8-ui-primary: #1a56db;
  --k8-ui-radius: 10px;
}

/* ---------- 页面标题 ---------- */
body:has(.el-aside) .main-card-title {
  position: relative;
  margin: 0 0 16px;
  padding-left: 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--k8-ui-text);
}
body:has(.el-aside) .main-card-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  bottom: 3px;
  width: 4px;
  border-radius: 2px;
  background: var(--k8-ui-primary);
}

/* 有些页面（产品列表等）标题自带蓝条（.title-text），不要再叠加我这条 */
body:has(.el-aside) .main-card-title:has(.title-text)::before {
  display: none !important;
}

/* ---------- 内容卡片 ---------- */
/* 有 .content-box 的页面（账户信息等）：白卡提到 .main-card 层，
   这样页面标题「账户」也落在白底里，而不是飘在灰底上 */
body:has(.el-aside) .main-card:has(.content-box) {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--k8-ui-border);
  border-radius: var(--k8-ui-radius);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}
body:has(.el-aside) .main-card:has(.content-box) .content-box {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* 兜底：内容区直接放 .content-box（没有 .main-card）时仍然给白卡 */
body:has(.el-aside) .el-main > .content-box {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--k8-ui-border);
  border-radius: var(--k8-ui-radius);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

/* 内容区与顶部留出呼吸空间（白卡不要贴着页头） */
body:has(.el-aside) .el-main {
  padding-top: 34px !important;
}

/* 没有 .content-box 包裹的页面（安全中心 / 工单中心 / 资源中心 / 产品列表 等）：
   直接把 .main-card 当白卡，否则内容就平铺在灰底上。
   工单中心这类页面既没有 .content-box 也没有 .el-tabs，所以这里不能再要求 :has(.el-tabs)。
   首页（内容区是 .main-content，内部自带白色区块）不在此列，避免外面再套一层白卡。 */
body:has(.el-aside) .main-card:not(:has(.content-box)):not(:has(.main-content)) {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--k8-ui-border);
  border-radius: var(--k8-ui-radius);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

/* 内容区里的表格容器别再自带外边距，避免出现双重留白 */
body:has(.el-aside) .main-card .content-table {
  padding: 0;
}

/* 子户管理这类没有 .main-card / .content-box 的页面（内容直接放在 .el-main 下） */
body:has(.el-aside) .el-main > .clid-box {
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--k8-ui-border);
  border-radius: var(--k8-ui-radius);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}
body:has(.el-aside) .el-main > .clid-box > header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--k8-ui-text);
}

/* ---------- 页签 ---------- */
body:has(.el-aside) .el-tabs__header {
  margin-bottom: 18px;
}
body:has(.el-aside) .el-tabs__item {
  height: 44px;
  line-height: 44px;
  font-size: 15px;
  color: var(--k8-ui-text-2);
}
body:has(.el-aside) .el-tabs__item.is-active {
  font-weight: 600;
  color: var(--k8-ui-primary);
}
body:has(.el-aside) .el-tabs__active-bar {
  height: 3px;
  border-radius: 2px;
  background-color: var(--k8-ui-primary);
}

/* ---------- 区块小标题（基础资料 / 账户信息 …） ---------- */
body:has(.el-aside) .box-main .title,
body:has(.el-aside) .box-main .sub-title,
body:has(.el-aside) .box-top .title,
body:has(.el-aside) .com-title,
body:has(.el-aside) .table-title {
  position: relative;
  margin: 18px 0 14px;
  padding-left: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--k8-ui-text);
}
body:has(.el-aside) .box-main .title::before,
body:has(.el-aside) .box-main .sub-title::before,
body:has(.el-aside) .box-top .title::before,
body:has(.el-aside) .com-title::before,
body:has(.el-aside) .table-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--k8-ui-primary);
}
body:has(.el-aside) .box-main .title:first-child,
body:has(.el-aside) .box-top .title:first-child {
  margin-top: 0;
}

/* ---------- 顶部资料条 ---------- */
body:has(.el-aside) .box-top {
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--k8-ui-border);
}

/* ---------- 表单 ---------- */
body:has(.el-aside) .el-form-item {
  margin-bottom: 18px;
}
body:has(.el-aside) .el-form-item__label {
  font-size: 13px;
  line-height: 20px;
  color: var(--k8-ui-text-2);
  padding-bottom: 6px;
}
body:has(.el-aside) .el-input__inner,
body:has(.el-aside) .el-textarea__inner {
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--k8-ui-text);
  background: #fbfcfe;
  border-color: #e3e7ef;
  border-radius: 8px;
}
body:has(.el-aside) .el-textarea__inner {
  height: auto;
  padding: 10px 12px;
}
body:has(.el-aside) .el-input__inner:focus,
body:has(.el-aside) .el-textarea__inner:focus {
  background: #fff;
  border-color: var(--k8-ui-primary);
  box-shadow: 0 0 0 3px rgba(26, 86, 219, 0.08);
}

/* ---------- 按钮 ---------- */
body:has(.el-aside) .el-button {
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
  border-radius: 8px;
}
body:has(.el-aside) .el-button--primary {
  background: var(--k8-ui-primary);
  border-color: var(--k8-ui-primary);
}

/* ---------- 表格 ---------- */
body:has(.el-aside) .el-table th.el-table__cell {
  background: #f7f9fc !important;
  color: var(--k8-ui-text-2);
  font-size: 13px;
  font-weight: 600;
}
body:has(.el-aside) .el-table td.el-table__cell {
  font-size: 14px;
  color: var(--k8-ui-text);
  padding: 12px 0;
}
body:has(.el-aside) .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background: #fafbff;
}

/* ---------- 搜索/工具条 ---------- */
body:has(.el-aside) .searchbar,
body:has(.el-aside) .com-search {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

/* ===== 手机端：产品详情页标题区重排（原来按钮/状态挤在一行会互相压住） ===== */
@media (max-width: 900px) {
  body:has(.el-aside) .common_product_detail .main-card-title {
    display: block !important;
    margin-bottom: 10px !important;
  }
  body:has(.el-aside) .common_product_detail .main-card-title .left {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }
  body:has(.el-aside) .common_product_detail .main-card-title .left .title {
    flex: 0 1 auto !important;
    font-size: 17px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  body:has(.el-aside) .common_product_detail .main-card-title .left .tag {
    flex: 0 0 auto !important;
  }
  /* 操作区：独立一行，按钮等分排布，不再互相压住 */
  body:has(.el-aside) .common_product_detail .common-detail-top-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 12px !important;
  }
  body:has(.el-aside) .common_product_detail .common-detail-top-actions .el-button,
  body:has(.el-aside) .common_product_detail .common-detail-top-actions .common-unsubscribe {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 18px !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    text-align: center !important;
    line-height: 38px !important;
  }
  body:has(.el-aside) .common_product_detail .common-detail-top-actions .unsubscribe-btn,
  body:has(.el-aside) .common_product_detail .common-detail-top-actions .refund-btn {
    white-space: nowrap !important;
  }
  body:has(.el-aside) .common_product_detail .common-detail-top-actions img {
    flex: 0 0 auto !important;
    width: 30px !important;
    height: 30px !important;
    margin-left: auto !important;
  }
  /* 财务信息条目：手机上一行一条 */
  body:has(.el-aside) .common_product_detail .finance-info .box {
    display: block !important;
  }
  body:has(.el-aside) .common_product_detail .finance-info .box .item {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  /* 「管理」页签里的电源操作：下拉通栏、确认按钮单独一行 */
  body:has(.el-aside) .manage-content .manage-item {
    width: 100% !important;
  }
  body:has(.el-aside) .manage-content .item-top {
    display: block !important;
  }
  body:has(.el-aside) .manage-content .item-top .el-select {
    display: block !important;
    width: 100% !important;
  }
  body:has(.el-aside) .manage-content .item-top .el-input__inner {
    width: 100% !important;
    height: 40px !important;
    line-height: 40px !important;
    border-radius: 8px !important;
  }
  body:has(.el-aside) .manage-content .item-top-btn {
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    line-height: 40px !important;
    margin: 10px 0 0 !important;
    text-align: center !important;
    border-radius: 8px !important;
  }
  body:has(.el-aside) .manage-content .item-bottom {
    margin-top: 8px !important;
  }

  /* ===== 产品列表页手机端 ===== */
  /* 工具条（批量续费 / 状态筛选 / 搜索）换行排，搜索框独占一行，避免横向突出 */
  body:has(.el-aside) .main-card-search {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }
  body:has(.el-aside) .main-card-search .batch-op-btn,
  body:has(.el-aside) .main-card-search .traffic-warning {
    flex: 0 0 auto !important;
  }
  body:has(.el-aside) .main-card-search .right-search {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }
  body:has(.el-aside) .main-card-search .right-search .el-input,
  body:has(.el-aside) .main-card-search .right-search input {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* 标签条：保持 Element 自己的行为（可滚动时它会在标签行两端渲染 ‹ › 箭头），
     这里只保证标签不换行——换行会让箭头看起来孤零零占一行 */
  body:has(.el-aside) .product-tab-list .el-tabs__item {
    white-space: nowrap !important;
  }
  body:has(.el-aside) .product-tab-list .el-tabs__nav-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body:has(.el-aside) .product-tab-list .el-tabs__nav-scroll::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
  }
}

/* ---------- 内容区贴近顶部栏 / 侧边栏 ----------
   基础样式给 .el-main 的是 margin: 0.24rem + margin-top: calc(40px + 0.24rem)，
   自身还带 0.24rem 内边距，白卡离顶栏约 40~54px、离侧栏约 40px，太空。
   这里收紧成 6px 外边距 + 6px 内边距：白卡与顶栏、侧栏各留 12px 细缝，
   右侧和底部的留白保持不变。手机端没有侧栏，沿用模板自带留白。 */
@media (min-width: 751px) {
  body:has(.el-aside) .el-main {
    margin-top: 46px !important; /* 40px 顶栏 + 6px */
    padding-top: 6px !important;
    margin-left: 6px !important;
    padding-left: 6px !important;
  }
}

/* 手机端顶栏是 1rem 高、侧栏 display:none（:has 仍然命中），
   上面那条 .el-main { padding-top: 34px } 的旧规则会顶出 35px 的空隙，这里一并压平。 */
@media (max-width: 750px) {
  body:has(.el-aside) .el-main {
    margin-top: 1rem !important; /* 手机端顶栏高 1rem */
    padding-top: 8px !important;
  }
}

/* ---------- 远程电脑面板：远程地址一行不再留一大片空白 ----------
   插件自带 .cp-remote-url{flex:1 1 260px} 会把地址框拉满整行，
   文字短、框很长，右边就是一片空的。这里让地址框按内容收缩（最多 380px，
   超出用省略号），「有效期至 …」推到行尾，整行看起来就短了。 */
.cp-remote-row {
  gap: 8px !important;
}
.cp-remote-row > .cp-remote-url {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}
.cp-remote-row > span:last-child {
  margin-left: auto;
}

/* 手机端：地址框可以顶满一行，有效期跟在下面 */
@media (max-width: 900px) {
  .cp-remote-row > .cp-remote-url {
    max-width: 100%;
  }
  .cp-remote-row > span:last-child {
    margin-left: 0;
  }
}