/* ============================================================
   星极云 · 控制台视觉层 v3
   风格：阿里云 / 腾讯云 —— 白底、细边框、克制蓝、大留白
   ============================================================ */
:root {
  --brand: #1657E0;
  --brand-hover: #0E40B5;
  --brand-light: #EBF1FF;
  --ink: #0B1220;
  --ink-2: #4E5969;
  --ink-3: #86909C;
  --ink-4: #A8B3C4;
  --bg: #F7F9FC;
  --card: #FFFFFF;
  --line: #E8ECF3;
  --line-2: #F2F5FA;
  --radius: 8px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(11,18,32,.04);
  --shadow-md: 0 2px 8px rgba(11,18,32,.06);
}

body {
  background: var(--bg) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ---------- 布局容器 ---------- */
body .home-main { background: transparent !important; padding: 20px !important; }
body .main-card { background: transparent !important; box-shadow: none !important; border: none !important; }
body .main-content { background: transparent !important; gap: 16px !important; }
body .left-box { flex: 1 !important; gap: 16px !important; background: transparent !important; }

/* ---------- 用户信息卡：白底，去掉渐变 ---------- */
body .info-box {
  position: relative !important;
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  padding: 24px 28px !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--ink) !important;
  overflow: hidden !important;
}
body .info-box::after { display: none !important; }

body .name-first {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  background: var(--brand-light) !important;
  color: var(--brand) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body .name-box .hello {
  color: var(--ink) !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  letter-spacing: -0.2px !important;
}
body .name-box .name { color: var(--ink-2) !important; font-size: 14px !important; }
body .name-box .id-text { color: var(--ink-3) !important; font-size: 13px !important; }
body .level-badge {
  color: var(--brand) !important;
  background: var(--brand-light) !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

/* 信息项文字 */
body .info-box .info-second,
body .info-box .info-three { color: var(--ink-2) !important; }
body .info-box .email-box,
body .info-box .phone-number,
body .info-box .company-name,
body .info-box .certify-text,
body .info-box .right-title { color: var(--ink) !important; font-size: 13.5px !important; }
body .info-box .bule-text { color: var(--brand) !important; cursor: pointer !important; }
body .info-box .left-type,
body .info-box .right-type { color: var(--ink-3) !important; font-size: 12.5px !important; }
body .info-box .divider-box { background: var(--line) !important; }

/* ---------- 余额卡：白底蓝字 ---------- */
body .money-box {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px 24px !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm) !important;
  position: relative !important;
  overflow: hidden !important;
}
body .money-box::before { display: none !important; }

body .credit-money,
body .credit-num {
  color: var(--ink) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: -0.8px !important;
  background: none !important;
  -webkit-text-fill-color: var(--ink) !important;
  font-variant-numeric: tabular-nums !important;
}
body .credit-name { color: var(--ink-3) !important; font-size: 13.5px !important; }

body .credit-btn {
  background: var(--brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 0 18px !important;
  height: 32px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background .18s !important;
}
body .credit-btn:hover { background: var(--brand-hover) !important; transform: none !important; box-shadow: none !important; }

body .credit-tag {
  background: var(--brand-light) !important;
  color: var(--brand) !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
}

/* ---------- 统计卡 ---------- */
body .statistics-box {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  padding: 22px 24px !important;
  box-shadow: var(--shadow-sm) !important;
}
body .statistics-item {
  background: var(--bg) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius) !important;
  padding: 16px 18px !important;
  text-align: left !important;
  transition: border-color .18s !important;
}
body .statistics-item:hover {
  background: var(--card) !important;
  border-color: #C9DAF8 !important;
  transform: none !important;
  box-shadow: var(--shadow-sm) !important;
}
body .statistics-item-name { color: var(--ink-3) !important; font-size: 13px !important; }
body .statistics-item-value {
  color: var(--ink) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.6px !important;
  font-variant-numeric: tabular-nums !important;
}
body .statistics-item .green-text { color: #0E7A45 !important; }
body .statistics-item .red-text { color: #D93026 !important; }

/* ---------- 侧边栏 ---------- */
body aside.el-aside {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  background: #fff !important;
  border-right: 1px solid var(--line) !important;
}
body aside.el-aside .el-menu {
  background: #fff !important;
  border-right: none !important;
  width: 100% !important;
}
body aside.el-aside .el-menu-item,
body aside.el-aside .el-submenu__title {
  height: 42px !important;
  line-height: 42px !important;
  font-size: 14px !important;
  color: var(--ink-2) !important;
  padding-left: 48px !important;
  padding-right: 12px !important;
  border-radius: 6px !important;
  margin: 2px 8px !important;
  white-space: normal !important;
  transition: background .15s, color .15s !important;
}
body aside.el-aside .el-menu-item:hover,
body aside.el-aside .el-submenu__title:hover {
  background: var(--bg) !important;
  color: var(--ink) !important;
}
body aside.el-aside .el-menu-item.is-active {
  background: var(--brand-light) !important;
  color: var(--brand) !important;
  font-weight: 550 !important;
  border-right: none !important;
}
body aside.el-aside .el-menu-item.is-active::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 3px !important;
  background: var(--brand) !important;
  border-radius: 0 2px 2px 0 !important;
}
body aside.el-aside .aside-menu-text {
  margin-left: 12px !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.35 !important;
}

/* ---------- 顶部栏 ---------- */
body .top-menu,
body .el-header {
  background: #fff !important;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: none !important;
}
body .yfx-header { background: #fff !important; }
body .yfx-header-name { color: var(--ink) !important; font-size: 14px !important; }
body .header-search input {
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  height: 34px !important;
  font-size: 13.5px !important;
}

/* ---------- 产品列表 / 表格 ---------- */
body .product-list-box {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  padding: 22px 24px !important;
  box-shadow: var(--shadow-sm) !important;
}
body .product-list-box .title-text {
  font-size: 16px !important;
  font-weight: 650 !important;
  color: var(--ink) !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  display: block !important;
}
body .product-list-box .el-table,
body .el-table {
  font-size: 13.5px !important;
  color: var(--ink-2) !important;
}
body .el-table th {
  background: var(--bg) !important;
  color: var(--ink-2) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  border-bottom: 1px solid var(--line) !important;
}
body .el-table td {
  border-bottom: 1px solid var(--line-2) !important;
  padding: 12px 0 !important;
}
body .el-table tr:hover > td { background: #FAFCFF !important; }
body .el-table::before { display: none !important; }

/* ---------- 右栏卡片 ---------- */
body .right-box > div,
body .index-right-box > div,
body .right-item {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px !important;
}

/* ---------- 通用按钮 ---------- */
body .el-button--primary {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
}
body .el-button--primary:hover {
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
}
body .el-button {
  border-radius: 6px !important;
  font-size: 13.5px !important;
}

/* ---------- 标签 / 状态 ---------- */
body .el-tag {
  border-radius: 4px !important;
  font-size: 12px !important;
  border: none !important;
}
body .el-tag--success { background: #E6F5EC !important; color: #0E7A45 !important; }
body .el-tag--danger { background: #FDECEA !important; color: #D93026 !important; }
body .el-tag--warning { background: #FFF4E6 !important; color: #D97706 !important; }
body .el-tag--info { background: var(--bg) !important; color: var(--ink-3) !important; }

/* 到期时间红色改为更柔和 */
body .el-table .red-text,
body .el-table .color-red { color: #D93026 !important; }

/* ---------- 滚动条 ---------- */
body ::-webkit-scrollbar { width: 8px; height: 8px; }
body ::-webkit-scrollbar-thumb { background: #D5DCE8; border-radius: 4px; }
body ::-webkit-scrollbar-thumb:hover { background: #BCC6D6; }
body ::-webkit-scrollbar-track { background: transparent; }

/* ---------- 响应式 ---------- */
@media (max-width: 1200px) {
  body aside.el-aside { width: 200px !important; min-width: 200px !important; flex: 0 0 200px !important; }
}
@media (max-width: 768px) {
  body .home-main { padding: 12px !important; }
  body .info-box { padding: 18px !important; }
  body .credit-num { font-size: 24px !important; }
}

/* ===== 细节修复（合并自旧增强层）===== */
/* 侧栏菜单完整显示 */
body aside.el-aside .aside-menu-text {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-break: break-word !important;
  line-height: 1.35 !important;
}
body aside.el-aside .el-menu-item { height: auto !important; min-height: 42px !important; }

/* 统计项上下布局，金额不换行 */
body .statistics-bottom .statistics-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 6px !important;
}
body .statistics-bottom .statistics-item .statistics-item-name {
  font-size: 13px !important; color: var(--ink-3) !important;
  white-space: nowrap !important; display: block !important; width: 100% !important;
}
body .statistics-bottom .statistics-item .statistics-item-value {
  font-size: 20px !important; font-weight: 700 !important; color: var(--ink) !important;
  white-space: nowrap !important; display: block !important; width: 100% !important;
  font-variant-numeric: tabular-nums !important;
}
body .statistics-bottom { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
body .statistics-bottom .statistics-item { width: 100% !important; min-width: 0 !important; }
body .statistics-bottom .statistics-item-divider { display: none !important; }

/* 隐藏 KPI 彩色大色块，改白底 */
body .order-box-1, body .order-box-2, body .order-box-3 {
  background: var(--card) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--ink) !important;
}
body .order-box-1 .order-num, body .order-box-2 .order-num, body .order-box-3 .order-num,
body .order-box-1 .order-name, body .order-box-2 .order-name, body .order-box-3 .order-name {
  color: var(--ink) !important;
}

/* 去掉右栏双层边框 */
body .right-box .right-item > div,
body .index-right-box .index-right-item > div {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 顶部残留浮层隐藏 */
body .el-popover.el-popper:not([aria-hidden="false"]) { display: none !important; }


/* ===== KPI 卡片：白底 + 数据清晰 ===== */
body .order-item {
  width: auto !important;
  flex: 1 !important;
  min-width: 0 !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--line) !important;
  background: var(--card) !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: none !important;
}
body .order-item:hover { transform: none !important; border-color: #C9DAF8 !important; }
body .order-item .order-num { color: var(--ink) !important; font-size: 26px !important; font-weight: 700 !important; }
body .order-item .order-name { color: var(--ink-3) !important; font-size: 13px !important; }
body .order-item img, body .order-item .order-icon { display: none !important; }

/* ===== 侧栏选中态：用 CSS 兜底高亮第一个或当前路径 ===== */
body aside.el-aside .el-menu-item:hover {
  background: var(--bg) !important;
}
/* 如果框架没有 is-active，用 JS 补 */


/* ===== KPI 卡片修正：宽度撑开、高度自适应 ===== */
body .order-box {
  display: flex !important;
  gap: 12px !important;
  width: 100% !important;
}
body .order-item {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 90px !important;
  max-height: none !important;
  padding: 16px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  background: var(--card) !important;
  box-shadow: none !important;
  overflow: visible !important;
}
body .order-item * {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
body .order-item .order-name,
body .order-item > div:first-child {
  color: var(--ink-3) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
}
body .order-item .order-num,
body .order-item > div:last-child {
  color: var(--ink) !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  font-variant-numeric: tabular-nums !important;
}


/* ===== KPI 卡片：正确类名 ===== */
body .order-item {
  flex: 1 1 0 !important; min-width: 0 !important; width: auto !important;
  height: auto !important; min-height: 96px !important;
  padding: 18px 20px !important;
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important; justify-content: center !important;
  gap: 8px !important;
  border: 1px solid var(--line) !important; border-radius: var(--radius) !important;
  background: var(--card) !important; box-shadow: none !important;
  overflow: visible !important;
}
body .order-item .order-type-img { display: none !important; }
body .order-item .order-title {
  color: var(--ink-3) !important; font-size: 13px !important;
  font-weight: 400 !important; line-height: 1.4 !important;
  margin: 0 !important; white-space: nowrap !important;
  overflow: visible !important;
}
body .order-item .order-nums {
  color: var(--ink) !important; font-size: 26px !important;
  font-weight: 700 !important; line-height: 1.1 !important;
  letter-spacing: -0.6px !important; font-variant-numeric: tabular-nums !important;
  margin: 0 !important;
}


/* ===== 选中态加强 + 其余收尾 ===== */
body aside.el-aside .el-menu-item.is-active {
  background: #E3ECFF !important;
  color: #1249C7 !important;
  font-weight: 600 !important;
  position: relative !important;
}
body aside.el-aside .el-menu-item.is-active::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 6px !important; bottom: 6px !important;
  width: 3px !important;
  background: #1657E0 !important;
  border-radius: 0 2px 2px 0 !important;
}
/* 菜单文字不折行到括号 */
body aside.el-aside .aside-menu-text {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* 待接单标签对比度 */
body .el-tag--success, body .tag-success {
  background: #E6F5EC !important;
  color: #0A6B3C !important;
  font-weight: 500 !important;
}
/* 消费条背景去掉裁切问题 */
body .statistics-bottom {
  background: transparent !important;
}
/* 右栏插画弱化 */
body .right-box img, body .index-right-box img {
  opacity: .72 !important;
  filter: saturate(.55) !important;
}
/* 顶部残留浮层 */
body .el-popper.is-light:empty { display: none !important; }
/* 页面底部留白 */
body .home-main { min-height: auto !important; }


/* ===== 选中态加强 ===== */
body aside.el-aside .el-menu-item.is-active {
  background: #E3ECFF !important;
  color: #1249C7 !important;
  font-weight: 600 !important;
  position: relative !important;
}
body aside.el-aside .el-menu-item.is-active::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 6px !important; bottom: 6px !important;
  width: 3px !important;
  background: #1657E0 !important;
  border-radius: 0 2px 2px 0 !important;
}
/* 菜单文字省略号，不折到括号 */
body aside.el-aside .aside-menu-text {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* 待接单标签加深 */
body .el-tag--success { background: #E6F5EC !important; color: #0A6B3C !important; font-weight: 500 !important; }
/* 消费条容器透明，避免色块裁切 */
body .statistics-bottom { background: transparent !important; }
/* 右栏插画弱化 */
body .right-box img, body .index-right-box img { opacity: .7 !important; filter: saturate(.5) !important; }
/* 空 popper 隐藏 */
body .el-popper.is-light:empty { display: none !important; }


/* ===== 最终收尾 ===== */
/* 选中态蓝条铺满整行 */
body aside.el-aside .el-menu-item.is-active::before {
  top: 0 !important; bottom: 0 !important;
  width: 3px !important; border-radius: 0 !important;
}
body aside.el-aside .el-menu-item.is-active {
  font-weight: 700 !important;
  color: #0E40B5 !important;
}
/* 去掉本月消费的 100% 残留 */
body .statistics-item .statistics-item-name span.green-text,
body .statistics-item .statistics-item-name span.red-text {
  display: none !important;
}
/* KPI 三卡与消费双栏统一间距 */
body .statistics-bottom { gap: 12px !important; margin-top: 12px !important; }