/* 数字字体（与首页一致，用于余额等金额显示） */
@font-face {
  font-family: "ucNum";
  src: url("../fonts/DINPro-Medium.woff") format("woff");
  font-weight: 100 900;
  font-display: swap;
}

/* ==========================================================================
   全站黑色顶部导航 + 深色侧边栏（由首页 home.css 的 .uc-theme 方案提取而来）
   作用范围：所有含 el-header / el-aside 框架的页面（login / regist / forget 无这些元素，不受影响）
   ========================================================================== */

/* ===== 1. 顶部导航条：黑色、横跨全宽、贴左上角 ===== */
.el-header {
  left: 0;
  right: 0;
  width: 100%;
  height: 48px !important;
  padding: 0;
  box-sizing: border-box;
  background: #000;
  border-bottom: 1px solid #343a40;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #fff;
  z-index: 1002;
}

/* 右侧元素排列：首页入口(1) → 购物车(2) → 消息(3) → 费用详情(4) → 帮助(5) → 提交工单(6) → 用户(9) */
.el-header .header-right {
  margin-right: 20px;
}
.el-header .header-right > * {
  order: 9;
}
.el-header .header-right > .car-item {
  order: 2;
  margin-right: 12px;
}

/* 左侧语言切换：黑底白字，与下方「用户中心」标题文字左对齐（主区左缘20px） */
/* 顶栏是全宽黑条，左侧 190px 被侧栏（z-index 更高）盖住，
   header-left 内容必须让出侧栏宽度，否则语言切换会被压在侧栏下面 */
.el-header .header-left {
  margin-left: 210px; /* 侧栏展开 190px + 主区标题左距 20px，对齐「用户中心」 */
  transition: margin-left 0.22s ease;
}
/* 侧栏收起 64px 时同步右移到窄条右侧 */
.el-container > .el-aside.aside-collapsed ~ .el-container .header-left {
  margin-left: 84px; /* 侧栏收起 64px + 20px，与标题对齐 */
}
.el-header .uc-lang-item {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.el-header .uc-lang-switch {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px 0 8px;
  /* 一比一复刻参考图：深藏青底 + 细边框直角 + 浅灰蓝小字，108x32 */
  background: #1a1c26;
  border: 1px solid #2b2f3b;
  border-radius: 0;
  color: #a2a6a9;
  font-size: 12px;
  line-height: 28px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.el-header .uc-lang-switch:hover {
  background: #222535;
  border-color: #3a4160;
  color: #c6cede;
}
/* 国旗固定尺寸：下拉菜单留在 .el-header 内部（不挂 body），
   也不能依赖 .uc-lang-pop（该版本 popper-class 未生效），直接全局约束。
   旗子在下拉里与按钮同大（22x16），全部直角无圆角。
   旗与文字间距用 margin-right 实现（部分内核不支持 flex gap） */
.uc-lang-flag {
  display: inline-block;
  width: 22px !important;
  height: 16px !important;
  object-fit: cover;
  border-radius: 0;
  flex: none;
}
/* 按钮里旗与文字间距 6px（对齐参考图） */
.el-header .uc-lang-switch .uc-lang-flag {
  margin-right: 6px;
}
/* 下拉菜单项里旗与文字间距 10px（对齐参考图） */
.el-header .uc-lang-item .el-dropdown-menu__item .uc-lang-flag,
.uc-lang-pop .el-dropdown-menu__item .uc-lang-flag {
  margin-right: 10px;
}
/* 删掉下拉顶部的小三角（popper 箭头），只留一个框 */
.el-header .uc-lang-item .el-dropdown-menu .popper__arrow,
.uc-lang-pop .popper__arrow,
.el-header .uc-lang-item .el-dropdown-menu .x-arrow,
.uc-lang-pop .x-arrow {
  display: none !important;
  border: none !important;
}
.el-header .uc-lang-caret {
  font-size: 10px;
  color: #a2a6a9;
  margin-left: 6px;
}
/* 语言下拉（.uc-lang-menu 直接挂在菜单根节点上，无论菜单被插到哪都生效）：
   白卡直角无边框、删顶部小三角、旗字间距 10px */
.uc-lang-menu.el-dropdown-menu {
  border-radius: 0;
  border: none;
  padding: 8px 0;
  /* 关键：下拉菜单基础样式带 margin（实测 12px），会把菜单顶推离顶栏底线，
     必须清零；配合 top:48px（顶栏高度）让菜单顶正好贴住黑条下沿。
     固定定位以视口为基准，摆脱 popper 绝对定位的父级上下文干扰；
     水平 left 仍由 popper 内联提供（跟随按钮左缘，侧栏收起自动右移） */
  margin: 0 !important;
  position: fixed !important;
  top: 48px !important;
}
.uc-lang-menu .popper__arrow,
.uc-lang-menu .x-arrow,
.uc-lang-menu [x-arrow],
.uc-lang-menu .popper__arrow::after {
  display: none !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
}
.uc-lang-menu .el-dropdown-menu__item {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 5px 24px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 21px;
  color: #12205c;
  white-space: nowrap;
}
.uc-lang-menu .el-dropdown-menu__item:hover {
  background: #f2f4fa;
  color: #12205c;
}
.uc-lang-menu .uc-lang-flag {
  margin-right: 10px;
}

/* 右侧文字入口（尺寸对齐 userCenter 源码 .sky-buttons .button-a） */
.el-header .uc-nav-link {
  display: inline-flex !important;
  align-items: center;
  height: 46px;
  padding: 0 14px;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  transition: opacity 0.15s ease;
}
.el-header .uc-nav-link i {
  margin-right: 6px;
  font-size: 17px;
  color: #fff;
}
.el-header .uc-nav-link:hover {
  color: #fff;
  background: transparent;
  opacity: 0.78;
}
.el-header .uc-nav-link:hover i {
  color: #fff;
}
.el-header .uc-nav-home {
  order: 1;
}
.el-header .uc-nav-finance {
  order: 4;
}
.el-header .uc-nav-help {
  order: 5;
}
.el-header .uc-nav-ticket {
  order: 6;
}
.el-header .uc-nav-uname {
  display: inline-block !important;
  margin-right: 6px;
  font-size: 14px;
  color: #fff;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 黑色导航条里：隐藏原有的语言下拉分隔区，图标统一反白 */
.el-header .header-right .hg-24,
.el-header .cloum-line-item {
  display: none !important;
}
.el-header .header-right .header-right-item img,
.el-header .header-right .right-item img,
.el-header .menu-img,
.el-header .left-img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
.el-header .el-dropdown-country img {
  -webkit-filter: none;
  filter: none;
  border-radius: 2px;
}
.el-header .right-icon {
  color: rgba(255, 255, 255, 0.7);
}
.el-header .cloum-line {
  border-color: rgba(255, 255, 255, 0.18);
}
.el-header .un-login {
  color: rgba(255, 255, 255, 0.9);
}
.el-header .el-dropdown-header .head-box {
  width: 24px;
  height: 24px;
  margin-left: 2px;
  border-radius: 1px;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}
.el-header .el-badge__content {
  border: none;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  padding: 0 4px;
  border-radius: 10px;
  min-width: 12px;
}
/* 覆盖 common.css 里 .header-right .car-item .el-badge .el-badge__content.is-fixed 的红色 */
.el-header .header-right .car-item .el-badge .el-badge__content.is-fixed {
  background-color: #165dff;
  border-color: #165dff;
  top: 4px;
}
/* 消息信封图标 */
.el-header .uc-msg-item .right-item,
.el-header .uc-msg-item .item {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.el-header .uc-msg-item img {
  width: 17px;
  height: 17px;
}
/* 购物车图标（源码 19px，线条风） */
.el-header .header-right .car-item img {
  width: 19px;
  height: 19px;
}
.el-header .uc-cart-ico {
  font-size: 19px;
  color: #fff;
  line-height: 1;
}

/* ===== 2. 侧边栏：深色，顶部与导航条无缝拼接 ===== */
.el-aside {
  padding: 0;
  background: #181818;
  /* 让固定在导航条里的 logo 压在黑条之上 */
  z-index: 1003;
  /* 收起 / 展开过渡（宽度由 Vue 以内联样式切换，CSS transition 同样生效） */
  transition: width 0.22s ease, margin-right 0.22s ease;
  overflow-x: hidden;
  /* 纵向滚动条不许占布局宽度：common.css 给了 6px 宽的滚动条，
     一旦菜单高于视口，这 6px 会把每一项（含选中的蓝色条）右边缘一起往里挤，
     看上去就是「高亮块右边没到头」。宽度归零后仍可用滚轮滚动。 */
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.el-aside::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}
.el-aside::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 47px;
  background: #000;
  border-bottom: 1px solid #343a40;
  box-sizing: content-box;
}
/* logo 居中显示在侧栏顶部黑色区域内 */
.el-aside > .menu-alink {
  position: fixed;
  top: 0;
  left: 0;
  right: auto;
  width: 190px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1003;
  transition: width 0.22s ease;
}
.el-aside .menu-top .menu-alink {
  position: relative;
  z-index: 1;
}
.ali-logo {
  height: 26px;
  max-width: 150px;
  margin: 0;
  /* LOGO 稍微往左移一点（视觉居中偏左） */
  transform: translateX(-10px);
  transition: max-width 0.22s ease, max-height 0.22s ease, height 0.22s ease;
}
.menu-top {
  margin-top: 68px;
}
.menu-top {
  margin-top: 68px;
  /* 干掉 li 的默认列表圆点：收起态分组标题在 64px 下会露出一个小圆点 */
  list-style: none;
}
.menu-top li {
  list-style: none;
}
.menu-top .el-menu-item,
.menu-top .el-submenu__title {
  height: 40px;
  line-height: 40px;
  padding: 0 16px !important;
  border-radius: 1px;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 14px;
  background-color: transparent !important;
  transition: padding 0.22s ease, background-color 0.15s ease, color 0.15s ease;
}
.menu-top .el-menu-item i,
.menu-top .el-submenu__title i {
  color: rgba(255, 255, 255, 0.55);
  font-size: 18px;
  margin-right: 10px;
  transition: margin 0.22s ease, font-size 0.22s ease, color 0.15s ease;
}
/* 菜单文字：收起时用宽度 + 透明度渐变收进去，而不是瞬间消失 */
.aside-menu-text {
  margin-left: 0;
  display: inline-block;
  vertical-align: top;
  max-width: 150px;
  transition: max-width 0.22s ease, opacity 0.16s ease;
}
.menu-top .el-menu-item:hover,
.menu-top .el-submenu__title:hover {
  background-color: #202020 !important;
  color: #fff !important;
}
.menu-top .el-menu-item:hover i,
.menu-top .el-submenu__title:hover i {
  color: rgba(255, 255, 255, 0.85) !important;
}
.menu-top .el-menu-item.is-active,
.menu-top .el-submenu__title.is-active {
  background-color: #165dff !important;
  color: #fff !important;
}
.menu-top .el-menu-item.is-active i,
.menu-top .el-submenu__title.is-active i {
  color: #fff !important;
}
.menu-top .el-menu,
.menu-top .el-menu--inline {
  background-color: transparent !important;
}
.menu-top .el-submenu .el-menu-item {
  height: 34px;
  line-height: 34px;
  padding-left: 42px !important;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7) !important;
}
.menu-top .el-submenu .el-menu-item:hover {
  color: #fff !important;
}
.menu-top .el-submenu.is-opened > .el-submenu__title,
.menu-top .el-submenu.is-opened > .el-submenu__title i {
  color: #fff !important;
}
.menu-top .el-submenu__icon-arrow {
  color: rgba(255, 255, 255, 0.45);
  transition: opacity 0.16s ease, transform 0.22s ease;
}

/* ===== 2.0.1 一级分组（后台「左侧导航设置」编排出 group 时） =====
   分组本身不可跳转，只做层级分隔：小字号、灰色、无图标、无箭头，
   视觉上像一段小标题，把下面的二级项归到一组里。
   二级项才是「和一级菜单同款的大条目」，可以单独配图标。 */
.menu-top .el-submenu.is-menu-group > .el-submenu__title {
  height: 32px;
  line-height: 32px;
  margin: 6px 0 2px;
  padding: 0 16px !important;
  border-radius: 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.4) !important;
  background-color: transparent !important;
  border-radius: 1px;
}
/* 小标题不做 hover 高亮，避免看起来像可点的菜单 */
.menu-top .el-submenu.is-menu-group > .el-submenu__title:hover {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.62) !important;
}
/* 折叠开关关闭（默认）：分组标题不可点，永远展开、没有收起入口
   （收起态 64px 除外——那里面分组靠 hover 向右弹出子菜单，标题必须能接收悬停） */
.el-aside:not(.aside-collapsed) .menu-top:not(.is-collapsible) .el-submenu.is-menu-group > .el-submenu__title {
  pointer-events: none;
}
/* 展开态也不点亮，保持灰色小字 */
.menu-top .el-submenu.is-menu-group.is-opened > .el-submenu__title {
  color: rgba(255, 255, 255, 0.4) !important;
}
/* 分组不显示图标（即使后台给分组配了图标也不渲染） */
.menu-top .el-submenu.is-menu-group > .el-submenu__title i {
  display: none !important;
}
/* 藏掉右侧展开箭头：分组默认全展开，不需要收起入口 */
.menu-top .el-submenu.is-menu-group > .el-submenu__title .el-submenu__icon-arrow {
  display: none !important;
}
/* 折叠开关开启：分组标题可点开/收起，右侧显示小箭头（朝下=收起可展开，朝上=已展开） */
.menu-top.is-collapsible .el-submenu.is-menu-group > .el-submenu__title {
  pointer-events: auto;
}
.menu-top.is-collapsible .el-submenu.is-menu-group > .el-submenu__title .el-submenu__icon-arrow {
  display: block !important;
  position: absolute;
  right: 14px;
  top: 50%;
  margin-top: -6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.38);
}
.menu-top.is-collapsible .el-submenu.is-menu-group > .el-submenu__title:hover .el-submenu__icon-arrow {
  color: rgba(255, 255, 255, 0.7);
}
/* 分组下的二级：和一级菜单同样大小，带图标位
   16(padding) + 18(图标) + 10(margin) = 44，一级二级的首字落在同一条竖线上；
   没配图标的二级项文字也固定在 44，不会一个深一个浅。 */
.menu-top .el-submenu.is-menu-group > .el-menu .el-menu-item {
  position: relative;
  height: 40px;
  line-height: 40px;
  padding: 0 16px 0 44px !important;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9) !important;
}
.menu-top .el-submenu.is-menu-group > .el-menu .el-menu-item i {
  position: absolute;
  left: 16px;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.62);
}
.menu-top .el-submenu.is-menu-group > .el-menu .el-menu-item:hover {
  background-color: #202020 !important;
  color: #fff !important;
}
.menu-top .el-submenu.is-menu-group > .el-menu .el-menu-item:hover i {
  color: #fff;
}
.menu-top .el-submenu.is-menu-group > .el-menu .el-menu-item.is-active {
  background-color: #165dff !important;
  color: #fff !important;
}
.menu-top .el-submenu.is-menu-group > .el-menu .el-menu-item.is-active i {
  color: #fff;
}
/* 上下两组菜单之间的分割线：左右留缩进、不通栏（覆盖 common.css 的 123px 白边淡线） */
.el-aside .line {
  width: calc(100% - 24px);
  height: 1px;
  border: 0;
  opacity: 1;
  margin: 12px auto 0;
  background: rgba(255, 255, 255, 0.18);
  transition: opacity 0.16s ease;
}
/* 第二组菜单紧跟在分割线下方（.menu-top 的 68px 上边距原本两组都吃，导致下面空一大截） */
.el-aside .line + .menu-top {
  margin-top: 8px;
}

/* ===== 2.1 侧栏底部收起 / 展开按钮 ===== */
.el-aside {
  padding-bottom: 48px;
}
.aside-collapse {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 190px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #141414;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  z-index: 1004;
  /* 与 .el-aside 保持同一时长/easing，两者完全同步收展 */
  transition: width 0.22s ease, background 0.15s ease;
}
.aside-collapse:hover {
  background: #202020;
}
/* 折叠按钮提示：纯 CSS 深色气泡，固定显示在按钮右侧（左侧带小箭头），
   不用 el-tooltip——它挂在 body 上，侧栏收展时定位不跟随、会残留盖住按钮 */
.aside-collapse::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 9px);
  top: 50%;
  transform: translateY(-50%);
  background: #303133;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 9px 10px;
  white-space: nowrap;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
  z-index: 3000;
}
.aside-collapse::before {
  content: "";
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-width: 0; /* 只留右指三角，宽度=5px，正好嵌在按钮与气泡的 9px 空隙里 */
  border-right-color: #303133;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
  pointer-events: none;
  z-index: 3001;
}
.aside-collapse:hover::after,
.aside-collapse:hover::before {
  opacity: 1;
  visibility: visible;
}
.aside-collapse-ico {
  display: block;
  width: 16px;
  height: 2px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 -5px 0 rgba(255, 255, 255, 0.7), 0 5px 0 rgba(255, 255, 255, 0.7);
  transition: background 0.15s ease;
}
.aside-collapse:hover .aside-collapse-ico {
  background: #fff;
  box-shadow: 0 -5px 0 #fff, 0 5px 0 #fff;
}

/* 收起态：只留图标，菜单文字隐藏（Element 折叠模式） */
.el-aside.aside-collapsed .aside-collapse {
  width: 64px;
}
/* 必须放开裁剪，否则向右弹出的子菜单会被 el-aside 的 overflow:auto 切掉 */
.el-aside.aside-collapsed {
  overflow: visible !important;
  z-index: 2100 !important;
}
/* 收起态：logo 居中缩放在 64px 窄条内，不超出侧栏左右边界 */
.el-aside.aside-collapsed > .menu-alink {
  display: flex;
  left: 0;
  right: auto;
  width: 64px;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
/* ===== 2.1.0 悬停弹出整个菜单栏（后台「悬停弹出菜单」开关，aside-hover-open） =====
   触发：侧栏收起时鼠标悬停底部收起按钮（asideMenu.js 置 hoverOpen）。
   此时 aside-collapsed 类被移除、侧栏按 190px 完整模式渲染；
   用负右边距让它仍只占 64px 布局宽 → 190px 视觉宽度浮在内容区上，不挤动页面。 */
.el-aside.aside-hover-open {
  margin-right: -126px; /* 190 - 64 */
  z-index: 2100 !important;
  overflow: visible;
  box-shadow: 6px 0 18px rgba(0, 0, 0, 0.18);
}
.el-aside.aside-collapsed > .menu-alink .ali-logo {
  height: auto;
  width: auto;
  max-width: 62px;
  max-height: 28px;
  margin: 0;
  object-fit: contain;
  /* 收起态：LOGO 放大并靠左侧红框位置，不再额外左移 */
  transform: none;
}
.el-aside.aside-collapsed .menu-top {
  margin-top: 68px;
}
.el-aside.aside-collapsed .aside-menu-text {
  max-width: 0;
  opacity: 0;
}
/* 收起态：分组标题只留一个空行占位（无圆点、不可点、无 hover），
   它的二级项直接平铺在窄条里只显示图标（见下方规则） */
.el-aside.aside-collapsed .menu-top .el-submenu.is-menu-group > .el-submenu__title {
  pointer-events: none;
}
.el-aside.aside-collapsed .menu-top .el-submenu.is-menu-group > .el-submenu__title:hover {
  background-color: transparent !important;
}
/* 收起态：分组的二级项不再悬浮弹出，直接平铺（图标居中、文字隐藏） */
.el-aside.aside-collapsed .menu-top .el-submenu.is-menu-group > .el-menu,
.el-aside.aside-collapsed .menu-top .el-submenu.is-menu-group > .el-menu--inline {
  display: block !important;
  position: static;
  width: 100%;
  padding: 0;
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  will-change: auto;
}
.el-aside.aside-collapsed .menu-top .el-submenu.is-menu-group > .el-menu .el-menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  line-height: 40px;
  padding: 0 !important;
  font-size: 0;
  text-align: center;
}
.el-aside.aside-collapsed .menu-top .el-submenu.is-menu-group > .el-menu .el-menu-item span {
  display: none;
}
.el-aside.aside-collapsed .menu-top .el-submenu.is-menu-group > .el-menu .el-menu-item i {
  position: static;
  transform: none;
  margin: 0;
  font-size: 19px;
}
.el-aside.aside-collapsed .menu-top .el-submenu.is-menu-group > .el-menu .el-menu-item:hover {
  background-color: #202020 !important;
}
.el-aside.aside-collapsed .menu-top .el-submenu.is-menu-group > .el-menu .el-menu-item.is-active {
  background-color: #165dff !important;
}
/* 无图标的二级项收起时也留个圆点占位，行高才不会塌 */
.el-aside.aside-collapsed .menu-top .el-submenu.is-menu-group > .el-menu .el-menu-item:not(:has(i))::before {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.el-aside.aside-collapsed .menu-top .el-menu-item,
.el-aside.aside-collapsed .menu-top .el-submenu__title {
  padding: 0 !important;
  text-align: center;
  justify-content: center;
}
.el-aside.aside-collapsed .menu-top .el-menu-item i,
.el-aside.aside-collapsed .menu-top .el-submenu__title i {
  margin-right: 0;
  font-size: 19px;
}
.el-aside.aside-collapsed .menu-top .el-submenu__icon-arrow {
  opacity: 0;
  pointer-events: none;
}
/* 收起态：分割线只淡出、不消失，占位保留 → 两组图标纵向位置与展开态完全一致 */
.el-aside.aside-collapsed .line {
  opacity: 0;
  pointer-events: none;
}
/* 收起态第二组菜单也紧跟分割线（覆盖上面的 68px，保持与展开态同样的 8px 间距） */
.el-aside.aside-collapsed .line + .menu-top {
  margin-top: 8px;
}
/* 收起态：非分组子菜单改为鼠标悬浮时向右弹出（纯 CSS，不依赖 Element 折叠模式）；
   分组（is-menu-group）不在此列——它的二级项上面已经改成直接平铺 */
.el-aside.aside-collapsed .menu-top .el-submenu:not(.is-menu-group) {
  position: relative;
}
.el-aside.aside-collapsed .menu-top .el-submenu:not(.is-menu-group) > .el-menu,
.el-aside.aside-collapsed .menu-top .el-submenu:not(.is-menu-group) > .el-menu--inline {
  display: none !important;
}
.el-aside.aside-collapsed .menu-top .el-submenu:not(.is-menu-group):hover > .el-menu,
.el-aside.aside-collapsed .menu-top .el-submenu:not(.is-menu-group):hover > .el-menu--inline {
  display: block !important;
  position: absolute;
  left: 64px;
  top: 0;
  width: 168px;
  padding: 4px 0;
  background: #1f1f1f !important;
  border-radius: 2px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  z-index: 2101 !important;
  /* 独立合成层，避免被内容区元素压住 / 出现局部镂空 */
  transform: translateZ(0);
  will-change: transform;
}
.el-aside.aside-collapsed .menu-top .el-submenu:not(.is-menu-group):hover > .el-menu .el-menu-item,
.el-aside.aside-collapsed .menu-top .el-submenu:not(.is-menu-group):hover > .el-menu--inline .el-menu-item {
  display: block;
  height: 36px;
  line-height: 36px;
  padding: 0 16px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 13px;
  text-align: left;
}
.el-aside.aside-collapsed .menu-top .el-submenu:not(.is-menu-group):hover > .el-menu .el-menu-item:hover,
.el-aside.aside-collapsed .menu-top .el-submenu:not(.is-menu-group):hover > .el-menu--inline .el-menu-item:hover {
  background: #2a2a2a !important;
  color: #fff !important;
}
.el-aside.aside-collapsed .menu-top .el-submenu:not(.is-menu-group):hover > .el-menu .el-menu-item.is-active,
.el-aside.aside-collapsed .menu-top .el-submenu:not(.is-menu-group):hover > .el-menu--inline .el-menu-item.is-active {
  background: #165dff !important;
  color: #fff !important;
}
/* 弹层里恢复成「图标 + 文字」的横排，别把展开态那套绝对定位图标带进来 */
.el-aside.aside-collapsed .menu-top .el-submenu:not(.is-menu-group):hover > .el-menu .el-menu-item i,
.el-aside.aside-collapsed .menu-top .el-submenu:not(.is-menu-group):hover > .el-menu--inline .el-menu-item i {
  position: static;
  transform: none;
  margin-right: 8px;
  font-size: 16px;
  vertical-align: middle;
}

/* ===== 3. 内容区：顶栏改高后修正顶部间距，避免被导航条压住 ===== */
.el-container:nth-child(2) > .el-main {
  margin-top: calc(48px + 0.24rem);
}

/* ===== 4. 全站页面标题条（由 js/pagebar.js 注入） ===== */
.page-bar {
  height: 48px;
  background: #fff;
  border-bottom: 1px solid #eaeef4;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  flex: 0 0 auto;
  /* 滚动时标题条固定在黑色顶栏下方不动，内容从它下面滚过 */
  position: sticky;
  position: -webkit-sticky;
  top: 48px;
  z-index: 1001;
}
.page-bar-txt {
  position: relative;
  display: inline-block;
  height: 48px;
  line-height: 48px;
  font-size: 15px !important;
  font-weight: 700;
  color: #040f43;
  font-family: "Microsoft YaHei", PingFang SC, "Helvetica Neue", Arial, sans-serif;
}
.page-bar-txt::after {
  content: "";
  position: absolute;
  left: 0;
  /* 蓝条只覆盖前两个字（宽度 = 2 个字号） */
  width: 2em;
  bottom: 0;
  height: 2px;
  background: #165dff;
}

/* 带标题条的主区：去掉公共留白，让标题条通栏贴住顶栏与侧栏，底色改为浅灰 */
.el-container:nth-child(2) > .el-main.has-page-bar {
  margin: 48px 0 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #eceef6 !important;
  min-height: calc(100vh - 48px);
  display: block !important;
  overflow: visible;
  box-sizing: border-box;
}
/* 标题条以外的内容：白色卡片；左右 20px 与标题条文字左边缘严格对齐
   仅作用于真正的页面内容容器，避免把弹窗容器等兄弟节点也变成白条 */
.el-container:nth-child(2) > .el-main.has-page-bar > .main-card,
.el-container:nth-child(2) > .el-main.has-page-bar > .order-detail,
.el-container:nth-child(2) > .el-main.has-page-bar > .config-box,
.el-container:nth-child(2) > .el-main.has-page-bar > .box,
.el-container:nth-child(2) > .el-main.has-page-bar > .content-box {
  margin: 20px !important;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
}
/* 内容卡片内不再需要额外的整块留白 */
.el-container:nth-child(2) > .el-main.has-page-bar > .main-card {
  width: auto;
}

/* ===== 子账户管理（IdcsmartSubAccount 插件页）与其他页面统一版式 ===== */
/* 列表页：整块灰底 → 白卡 */
.el-main.has-page-bar > .clid-box {
  margin: 20px !important;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
}
/* 卡内标题与白色标题条重复，隐藏；「新增子账户」按钮独立成一行、左对齐 */
.el-main.has-page-bar > .clid-box > header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 16px;
}
.el-main.has-page-bar > .clid-box > header h2 {
  margin: 0 !important;
}
.el-main.has-page-bar > .clid-box > header .el-button {
  margin: 0 0 0 auto;
}
.el-main.has-page-bar > .clid-box .myPage {
  margin-top: 16px;
}

/* 新增 / 编辑子账户：头部、表单、底部按钮拼成同一张白卡 */
.el-main.has-page-bar.addAccount-content > .addAccount-header {
  margin: 20px 20px 0;
  padding: 20px 20px 8px;
  background: #fff;
  border-radius: 2px 2px 0 0;
  border-bottom: 0;
  box-sizing: border-box;
}
.el-main.has-page-bar.addAccount-content > .addAccount-header h1 {
  margin: 0 0 8px !important;
}
.el-main.has-page-bar.addAccount-content > .addAccount-box {
  margin: 0 20px;
  padding: 0 20px 20px;
  background: #fff;
  box-sizing: border-box;
}
.el-main.has-page-bar.addAccount-content > .addAccount-footer {
  margin: 0 20px 20px;
  padding: 16px 20px 20px;
  background: #fff;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}
/* 标题条上的返回图标（从原卡片标题复制而来） */
.page-bar-back {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  margin-right: 6px;
  cursor: pointer;
  vertical-align: middle;
}

/* ===== 2.4 顶部导航悬停下拉（复刻 userCenter 源码 .sky-dropdown-cost / .sky-dropdown-content） ===== */
.uc-pop {
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  /* 外层透明：卡片自己下移 3px 并带阴影，避免压住顶栏底边线、也不出现白条 */
  box-shadow: none !important;
  background: transparent !important;
}
/* ---- 费用总览下拉：宽 260、内边距 20 ---- */
.uc-pop-cost {
  width: 260px;
  /* 费用卡比用户卡定位低约 12px，用 transform 提上来（popper 是 top 定位，margin 会被抵消） */
  transform: translateY(-11px) !important;
}
.uc-cost-card {
  margin-top: 3px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.uc-cost-balance {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding: 0 0 20px;
  border-bottom: 1px solid #f3f3f3;
}
.uc-cost-bl-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.uc-cost-bl-detail span {
  color: #8187a1;
  font-size: 14px;
}
.uc-cost-bl-detail h1 {
  font-family: ucNum, "Microsoft YaHei", sans-serif;
  font-size: 26px;
  line-height: 30px;
  font-weight: 500;
  color: #040f43;
  margin: 0;
  white-space: nowrap;
}
.uc-cost-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 2px;
  background: #165dff;
  color: #fff !important;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.uc-cost-btn:hover {
  background: #3d7fff;
}
.uc-cost-btn i {
  font-size: 18px;
  color: #fff;
  margin-right: 4px;
}
.uc-cost-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid #f3f3f3;
}
.uc-cost-item {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 18px;
  cursor: pointer;
  text-decoration: none;
  line-height: 22px;
}
/* 描边图标：与源站细线图标一致 */
.uc-cost-ico {
  display: inline-flex;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-right: 10px;
  color: #1b2a4a;
}
.uc-cost-ico svg {
  width: 17px;
  height: 17px;
  display: block;
}
.uc-cost-txt {
  font-size: 14px;
  font-weight: 500;
  color: #1b2a4a;
}
/* 右侧小箭头：与源码 .cutOneSHair::after 一致 */
.uc-cost-item::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid #9db4d6;
  border-bottom: 1.5px solid #9db4d6;
  transform: translateY(-50%) rotate(-45deg);
  transition: right 0.3s ease, border-color 0.15s ease;
}
.uc-cost-item:hover::after {
  right: 6px;
}
.uc-cost-item:hover .uc-cost-txt,
.uc-cost-item:hover .uc-cost-ico {
  color: #165dff;
}
.uc-cost-item:hover::after {
  border-right-color: #165dff;
  border-bottom-color: #165dff;
}
.uc-cost-overview {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 12px 0 0;
  cursor: pointer;
}

.uc-cost-overview:hover .uc-cost-txt,
.uc-cost-overview:hover .uc-cost-ico {
  color: #165dff;
}
/* ---- 用户菜单下拉：浅灰底、无边框（恢复之前的样式） ---- */
.uc-pop-user {
  min-width: 160px;
  background: #f9f9f9;
}
.uc-user-card {
  margin-top: 3px;
  padding: 12px 0;
  background: #f9f9f9;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.uc-user-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.uc-user-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 20px;
  box-sizing: border-box;
  color: #333c54;
  text-decoration: none;
  transition: background 0.12s ease;
}
.uc-user-item i {
  font-size: 16px;
  font-weight: 700;
  color: #333c54;
}
.uc-user-txt {
  font-size: 14px;
  font-weight: 500;
  color: #333c54;
}
.uc-user-item:hover {
  background: #f3f3f3;
}
.uc-user-item:hover i,
.uc-user-item:hover .uc-user-txt {
  color: #333c54;
}

/* ---- 站内信下拉：与费用 / 用户卡一致，卡片落在顶栏底边线下方 ---- */
.uc-pop-msg {
  background: transparent !important;
  box-shadow: none !important;
}
.uc-pop-msg .top-msg-box {
  margin-top: 3px;
  padding: 0.14rem 0 0.14rem 0;
  background: #fff;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

/* 触发器：费用项需要保持 flex 结构（popover reference 包裹后） */
.el-header .uc-nav-hover {
  display: flex;
  align-items: center;
  height: 100%;
}
/* popover 的 reference 用块级容器包一层，保证下拉卡从顶栏底边开始 */
.el-header .uc-nav-ref {
  display: flex;
  align-items: center;
  height: 100%;
}

/* 顶栏头像：QQ 头像铺满 24×24 方块（不能被图标反白规则滤成白块） */
.el-header .el-dropdown-header .head-box .uc-head-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1px;
  -webkit-filter: none !important;
  filter: none !important;
}