/* 琉璃会员中心壳覆盖（所有 clientarea 页共用，header.php 引入）
   —— 与购物车 liuli 视觉对齐：顶栏 50px、侧栏白底。
   侧栏配色走变量重定义：common.css 的菜单规则与 asideMenu 组件内联样式
   均引用 --color-menu-* 变量，此处改一处全局生效，免特异性对抗 */
.template .el-header {
  height: 50px !important;  /* 基座 common.css 为 40px !important */
}
/* 顶栏固定加高的补偿：改内容盒 margin-top（基座 element-comment 为 calc(40px + 0.24rem)） */
.template .el-container:nth-child(2) > .el-main {
  margin-top: calc(50px + 0.24rem);
}
.template .el-aside {
  --color-menu-bg: #ffffff;            /* 侧栏白底 */
  --color-menu-text: #1D2129;          /* 菜单文字深色（含组件内联引用） */
  --color-menu-text-active: var(--color-primary);
  --color-menu-hover-bg: #F0F3F9;
  --color-menu-active-bg: #E8F3FF;
}
/* 第一段菜单上移：顶距对齐右侧内容区首元素（顶栏 50px + 0.24rem = logo 12px+28px 之后的 ul 顶距 calc(10px + 0.24rem)） */
.template .el-aside .menu-top:nth-of-type(1) {
  margin-top: calc(10px + 0.24rem);
}
.template .el-aside .menu-top:nth-of-type(2) {
  margin-top: 0;
}
.template .el-aside .line {
  margin: 0 auto;
}
/* 图标与文字间距统一 5px（对齐 cart 域 goodsList 重建项观感）：压掉基座 .aside-menu-text 的 20px 附加左距，
   仅命中带图标的行（顶级项/折叠标题），无图标的二级子项缩进不受影响 */
.template .el-aside .el-menu-item .aside-menu-text,
.template .el-aside .el-submenu__title .aside-menu-text {
  margin-left: 5px;
}

/* ---------- 右上角用户菜单琉璃化（topMenu el-dropdown） ----------
   element-ui.css 由 theme/index.js 运行时追加到 head 末尾，层叠在本文件之后，
   故下列规则全部用 (0,2,0)+ 选择器以特异性取胜；head-box 底色为组件内联随机色，唯一允许 !important */
.header-right .header-right-item .el-dropdown-header {
  padding: 4px 8px; border-radius: 8px; transition: background .2s;
}
.header-right .header-right-item .el-dropdown-header:hover {
  background: #F5F7FA;
}
.header-right .header-right-item .el-dropdown-header .head-box {
  width: 28px; height: 28px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, #3A7BFF 0%, #165DFF 100%) !important;  /* 压过 topMenu 内联随机底色 */
  color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: 0 0 0 2px #E8F3FF;
}
.header-right .header-right-item .el-dropdown-header .head-name {
  margin-left: 8px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; color: #1D2129;
}
.header-right .header-right-item .el-dropdown-header .right-icon {
  margin-left: 6px; color: #86909C;
}
/* 下拉面板（popper 挂 body）：圆角卡片、条目悬停主色、退出项红色并带分隔 */
.el-dropdown-menu.el-popper {
  margin: 10px 0 0 !important;
  padding: 6px !important;
  border: 1px solid #F2F3F5 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(23, 44, 69, .12) !important;
}
.el-dropdown-menu.el-popper .popper__arrow { display: none; }
.el-dropdown-menu .el-dropdown-menu__item {
  height: 36px; line-height: 36px; padding: 0 12px; margin: 0;
  border-radius: 6px; font-size: 14px; color: #41464F;
}
.el-dropdown-menu .el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu .el-dropdown-menu__item:not(.is-disabled):focus {
  background: #E8F3FF; color: #165DFF;
}
.el-dropdown-menu .el-dropdown-menu__item--divided {
  margin-top: 5px; border-top: 1px solid #F2F3F5;
}
.el-dropdown-menu .el-dropdown-menu__item--divided:before { display: none; }  /* Element 自带分隔占位伪元素，-20px 边距会溢出 6px 内衬 */
.el-dropdown-menu .cc-quit { color: #F53F3F; }
.el-dropdown-menu .cc-quit:not(.is-disabled):hover,
.el-dropdown-menu .cc-quit:not(.is-disabled):focus {
  background: #FFECE8; color: #F53F3F;
}