/* ============================================================================
   aurora · 魔方业务系统 V10 会员中心换肤（OPTXIO 策拓云）
   ----------------------------------------------------------------------------
   设计原则（与购物车主题 aurora-brand.css 保持一致）：
   1. 只改「观感」，不改结构与逻辑：本文件是纯 CSS，不碰 .php / .js 任何契约。
   2. 品牌色对齐官网：主色 #ff6739，深藏青 #13182c / #1a1c2a，边框 #e6eaed。
   3. 特异性策略（重要，勿随意精简选择器）：
      · 官方主题包由 theme/index.js 运行时异步 append，
        形如 `:root[theme='default'] { --color-primary: ... }`。
        故变量覆盖统一写 `:root[theme]`（属性存在即命中，不看具体值），
        配 !important，无论后台选 default 还是 theme1~theme9 都稳定生效。
      · 组件规则一律加 `:root[theme] body` 前缀，把特异性抬到 (0,3,1)。
        原因：本文件在 header.php 内加载，而各页面自己的
        `.finance .el-button` 之类规则在其后加载（特异性 (0,2,0)）。
        计算：:root(0,1,0) + [theme](0,1,0) + body(0,0,1) + .el-xxx(0,1,0)
              = (0,3,1) > (0,2,0)，稳定压过页面样式。
        注意：写成 `html body .el-xxx` 只有 (0,1,2)，类数 1 < 2，
               会被页面样式覆盖 —— 此处务必保持 :root[theme] 前缀。
   4. 【作用域铁律】菜单相关规则必须限定在 `.el-aside` 内（v20261104b 修复）：
      Element UI 的二级菜单弹层（.el-menu--popup）是渲染到 body 上的独立节点，
      若 `.el-menu` / `.el-menu-item` 规则不限定作用域，弹层会被一并命中，
      出现「透明底 + 白字 = 菜单隐形」。弹层必须单独给白底深字。

   版本：v20261104c
     · v20261104b：修复 logo 被压扁变形（原 height:28px + max-width:130px 强约束）
     · v20261104b：logo 区与顶栏同高同白底，消除左上角 190px 深色断层
     · v20261104b：修正 .el-main 过大的四边留白（1.02rem / 0.83rem → 24px / 64px）
     · v20261104b：移除 .main-card 上错误的背景/边框/圆角（官方该容器本就无装饰）
     · v20261104b：修复二级菜单弹层白字白底/透明隐形
     · v20261104c：收敛侧栏菜单组间距（.menu-top 86px + .line 90px 叠加成 176px 空白）
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. 品牌调色板 · 变量收口
   --------------------------------------------------------------------------- */
:root,
:root[theme] {
  --color-primary: #ff6739 !important;
  --color-primary-light: #ff754c;
  --color-primary-dark: #e45931;

  --color-success: #12a150 !important;
  --color-warning: #f5a623 !important;
  --color-danger: #e5484d !important;
  --color-info: #8c93a5 !important;
  --color-text-tips: #6b7280 !important;

  /* 左侧菜单：深藏青底 + 白字，选中项品牌橙 */
  --color-menu-bg: #13182c !important;
  --color-menu-active-bg: #ffffff !important;
  --color-menu-hover-bg: rgba(255, 255, 255, .10) !important;
  --color-menu-text: rgba(255, 255, 255, .72) !important;
  --color-menu-text-active: #ff6739 !important;

  --color-price-text: #ff6739 !important;
  --color-discount-num: #f5a623 !important;
  --color-cash-num: #ff6739 !important;

  /* aurora 自有 token */
  --aurora-brand: #ff6739;
  --aurora-brand-light: #ff754c;
  --aurora-brand-dark: #e45931;
  --aurora-brand-soft: #fff3ee;
  --aurora-navy: #13182c;
  --aurora-navy-2: #1a1c2a;
  --aurora-line: #e6eaed;
  --aurora-text: #1f2437;
  --aurora-muted: #6b7280;
  --aurora-radius: 10px;
  --aurora-shadow: 0 2px 10px rgba(19, 24, 44, .06);
  --aurora-shadow-hover: 0 8px 24px rgba(19, 24, 44, .10);
  /* 顶栏高度：与 common.css 的 .el-header { height: 40px } 及侧栏 logo 区保持一致 */
  --aurora-header-h: 40px;
}

/* ---------------------------------------------------------------------------
   2. 全局观感
   --------------------------------------------------------------------------- */
:root[theme] body {
  background-color: #f5f7f9;
  color: var(--aurora-text);
  -webkit-font-smoothing: antialiased;
}

/* 顶部栏：白底 + 1px 分隔线。
   注意：官方是 rgba(255,255,255,.4) + backdrop-filter 玻璃感；
   换成纯白后必须保证左侧 logo 区也是同高同色白底（见 §3.1），
   否则 190px 的深色侧栏会在左上角形成一块「错位」的深色缺口。 */
:root[theme] body .el-header {
  background: #fff !important;
  border-bottom: 1px solid var(--aurora-line) !important;
  box-shadow: none !important;
}

/* 内容卡片：统一圆角 / 描边 / 悬浮阴影 */
:root[theme] body .el-card {
  border-radius: var(--aurora-radius) !important;
  border: 1px solid var(--aurora-line) !important;
  box-shadow: var(--aurora-shadow) !important;
  transition: box-shadow .2s ease;
}
:root[theme] body .el-card:hover {
  box-shadow: var(--aurora-shadow-hover) !important;
}

/* ---------------------------------------------------------------------------
   3. 左侧菜单（aside-menu）
   --------------------------------------------------------------------------- */
:root[theme] body .el-aside {
  background: var(--aurora-navy) !important;
}

/* 3.1 顶部 logo 区 —— 与顶栏连成完整白色横带
   官方：.el-aside { padding: 0 8px } + .ali-logo { height:28px; max-width:130px;
         margin:12px auto 0 }，logo 贴在深色侧栏顶部，与白色顶栏硬切。
   改法：把这个 a 做成 40px 高（= .el-header 高度）的白色条，
         用负 margin 吃掉 aside 的 8px 横向内边距，让白条正好铺满 190px，
         与右侧 .el-header 无缝相接；下边框与顶栏同值，接缝处不出现高差。 */
:root[theme] body .el-aside > .menu-alink:first-of-type {
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--aurora-header-h);
  margin: 0 -8px;
  background: #fff;
  border-bottom: 1px solid var(--aurora-line);
  position: relative;
  z-index: 2;
}

/* 3.2 logo 等比缩放 —— 修复「被压扁 / 拉长」
   官方 .ali-logo 同时锁 height:28px 与 max-width:130px，
   宽横版 logo 会被强行压到 130px 宽却仍保持 28px 高，比例必然失真。
   改为只约束最大外框、高度自适应 + object-fit: contain，任何比例都不变形。 */
:root[theme] body .ali-logo {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 130px;
  max-height: 28px;
  margin: 0 !important;
  object-fit: contain;
}

/* 3.3 菜单本体（作用域限定 .el-aside，勿外溢到弹层，见文件头第 4 条） */
:root[theme] body .el-aside .el-menu {
  background: transparent !important;
  border-right: none !important;
}
:root[theme] body .el-aside .el-menu-item,
:root[theme] body .el-aside .el-submenu__title {
  color: rgba(255, 255, 255, .72) !important;
}
/* 图标跟随文字色，避免深色底上残留深灰图标 */
:root[theme] body .el-aside .el-menu-item .iconfont,
:root[theme] body .el-aside .el-submenu__title .iconfont {
  color: inherit !important;
}
:root[theme] body .el-aside .el-menu-item:hover,
:root[theme] body .el-aside .el-submenu__title:hover {
  background-color: rgba(255, 255, 255, .10) !important;
  color: #fff !important;
}
:root[theme] body .el-aside .el-menu-item.is-active {
  background-color: #fff !important;
  color: var(--aurora-brand) !important;
  font-weight: 600;
  border-radius: 6px;
}
/* 当前分组展开时，一级标题也提亮，避免「选中项在子级、父级仍发灰」 */
:root[theme] body .el-aside .el-submenu.is-active > .el-submenu__title {
  color: #fff !important;
}

/* 3.4 二级菜单弹层 —— 白底深字
   原先 .el-menu 全局透明 + .el-menu-item 全局白字，弹层（挂到 body 上）
   既没白底又是白字，展开后菜单「隐形」。此处单独收口。 */
:root[theme] body .el-menu--popup {
  background: #fff !important;
  border: 1px solid var(--aurora-line);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(19, 24, 44, .12);
  padding: 6px !important;
}
:root[theme] body .el-menu--popup .el-menu-item {
  color: var(--aurora-text) !important;
  border-radius: 6px;
  min-width: 148px;
  line-height: 36px;
  height: 36px;
}
:root[theme] body .el-menu--popup .el-menu-item:hover {
  background-color: var(--aurora-brand-soft) !important;
  color: var(--aurora-brand) !important;
}
/* 弹层里的三级菜单标题同样需要深字（否则继承不到 .el-aside 的白字，反而变成默认色） */
:root[theme] body .el-menu--popup .el-submenu__title {
  color: var(--aurora-text) !important;
  border-radius: 6px;
  line-height: 36px;
  height: 36px;
}
:root[theme] body .el-menu--popup .el-submenu__title:hover {
  background-color: var(--aurora-brand-soft) !important;
  color: var(--aurora-brand) !important;
}
:root[theme] body .el-menu--popup .el-submenu__title .iconfont {
  color: inherit !important;
}
:root[theme] body .el-menu--popup .el-menu-item.is-active {
  color: var(--aurora-brand) !important;
  background-color: var(--aurora-brand-soft) !important;
  font-weight: 600;
  border-radius: 6px;
}

/* 3.5 侧栏菜单组间距 —— 「其他」→「账户信息」之间空出 176px 的根因
   官方两处叠加：
     · .menu-top { margin-top: 86px }：该类同时加在「分隔符」上下两个 el-menu 上，
       所以两组菜单各自都带 86px 上外边距；
     · .line { margin: 90px auto }：分隔符本身上下各 90px。
   结果：上一组最后一项（如「其他」）到下一组第一项（如「账户信息」）之间
   是 90 + 86 = 176px 纯空白；同时 logo 与第一个菜单项之间也白占 86px。
   这里只收敛间距，不改菜单结构与图标。 */
:root[theme] body .el-aside .menu-top,
:root[theme] body .drawer-menu .menu-top {
  margin-top: 10px !important;
}
:root[theme] body .el-aside .line,
:root[theme] body .drawer-menu .line {
  width: auto !important;
  height: 0 !important;
  margin: 12px 8px !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .14) !important;
  opacity: 1 !important;
}
/* 移动端抽屉里的菜单列表同样有 0.86rem 的过大上边距（约 43px @375 屏） */
:root[theme] body .drawer-menu-list-top {
  margin-top: 0.16rem !important;
}

/* ---------------------------------------------------------------------------
   4. Element UI 组件品牌化
   --------------------------------------------------------------------------- */

/* 主按钮 */
:root[theme] body .el-button--primary {
  background-color: var(--aurora-brand) !important;
  border-color: var(--aurora-brand) !important;
}
:root[theme] body .el-button--primary:hover,
:root[theme] body .el-button--primary:focus {
  background-color: var(--aurora-brand-light) !important;
  border-color: var(--aurora-brand-light) !important;
}
:root[theme] body .el-button--primary:active {
  background-color: var(--aurora-brand-dark) !important;
  border-color: var(--aurora-brand-dark) !important;
}
:root[theme] body .el-button--primary.is-disabled,
:root[theme] body .el-button--primary.is-disabled:hover,
:root[theme] body .el-button--primary.is-disabled:focus {
  background-color: #ffb79f !important;
  border-color: #ffb79f !important;
}
:root[theme] body .el-button--primary.is-plain {
  color: var(--aurora-brand) !important;
  background: var(--aurora-brand-soft) !important;
  border-color: #ffc0ac !important;
}

/* 文字按钮 */
:root[theme] body .el-button--text {
  color: var(--aurora-brand) !important;
}
:root[theme] body .el-button--text:hover {
  color: var(--aurora-brand-light) !important;
}

/* 输入框 */
:root[theme] body .el-input__inner:focus,
:root[theme] body .el-textarea__inner:focus {
  border-color: var(--aurora-brand) !important;
}
:root[theme] body .el-input__inner:hover,
:root[theme] body .el-textarea__inner:hover {
  border-color: #ffc0ac !important;
}

/* 单选 / 复选 / 开关 */
:root[theme] body .el-checkbox__input.is-checked .el-checkbox__inner,
:root[theme] body .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: var(--aurora-brand) !important;
  border-color: var(--aurora-brand) !important;
}
:root[theme] body .el-checkbox__input.is-checked + .el-checkbox__label {
  color: var(--aurora-brand) !important;
}
:root[theme] body .el-radio__input.is-checked .el-radio__inner {
  background: var(--aurora-brand) !important;
  border-color: var(--aurora-brand) !important;
}
:root[theme] body .el-radio__input.is-checked + .el-radio__label {
  color: var(--aurora-brand) !important;
}
:root[theme] body .el-switch.is-checked .el-switch__core {
  background-color: var(--aurora-brand) !important;
  border-color: var(--aurora-brand) !important;
}

/* 标签页 */
:root[theme] body .el-tabs__item.is-active {
  color: var(--aurora-brand) !important;
}
:root[theme] body .el-tabs__item:hover {
  color: var(--aurora-brand-light) !important;
}
:root[theme] body .el-tabs__active-bar {
  background-color: var(--aurora-brand) !important;
}

/* 分页 */
:root[theme] body .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: var(--aurora-brand) !important;
}
:root[theme] body .el-pager li:hover,
:root[theme] body .el-pagination button:hover {
  color: var(--aurora-brand) !important;
}

/* 表格 */
:root[theme] body .el-table th.el-table__cell {
  background-color: #fafbfc !important;
  color: var(--aurora-text) !important;
  font-weight: 600;
}
:root[theme] body .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: var(--aurora-brand-soft) !important;
}

/* 进度 / 滑块 / 步骤条 */
:root[theme] body .el-progress-bar__inner,
:root[theme] body .el-slider__bar {
  background-color: var(--aurora-brand) !important;
}
:root[theme] body .el-slider__button {
  border-color: var(--aurora-brand) !important;
}
:root[theme] body .el-step__head.is-process {
  color: var(--aurora-brand) !important;
  border-color: var(--aurora-brand) !important;
}
:root[theme] body .el-step__title.is-process {
  color: var(--aurora-brand) !important;
}

/* 下拉菜单 / 选择器 */
:root[theme] body .el-select-dropdown__item.selected {
  color: var(--aurora-brand) !important;
}
:root[theme] body .el-dropdown-menu__item:hover {
  background-color: var(--aurora-brand-soft) !important;
  color: var(--aurora-brand) !important;
}

/* 弹窗 / 消息 / 角标 */
:root[theme] body .el-dialog {
  border-radius: 12px !important;
}
:root[theme] body .el-dialog__headerbtn:hover .el-dialog__close {
  color: var(--aurora-brand) !important;
}
:root[theme] body .el-badge__content--primary {
  background-color: var(--aurora-brand) !important;
}

/* 分隔线淡化 */
:root[theme] body .el-divider {
  background-color: var(--aurora-line) !important;
}

/* ---------------------------------------------------------------------------
   5. 会员中心首页（home.php）专属精修
   ---------------------------------------------------------------------------
   注意：不要把背景 / 边框 / 圆角 / 阴影加到 .main-card 上。
   官方 common.css 的 .main-card 只有字体与 margin:auto，且 home.css 里
   .el-main 是 padding:0!important（内容紧贴视口四边），
   给贴边容器加圆角边框只会得到「屏幕四周一圈发丝线 + 圆角被裁」。 */
:root[theme] body .home-main .main-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* 头部信息区左侧品牌竖条 */
:root[theme] body .home-main .info-first {
  position: relative;
}
:root[theme] body .home-main .info-first::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--aurora-brand), var(--aurora-brand-dark));
}

:root[theme] body .home-main .hello {
  font-weight: 600;
}
:root[theme] body .home-main .name .id-text {
  font-variant-numeric: tabular-nums;
  color: var(--aurora-brand);
  font-weight: 600;
}
:root[theme] body .home-main .email-box span,
:root[theme] body .home-main .phone-box span {
  color: var(--aurora-muted);
}
:root[theme] body .home-main .price-num,
:root[theme] body .home-main .num {
  color: var(--aurora-brand);
  font-variant-numeric: tabular-nums;
}

/* 等级徽标 */
:root[theme] body .level-badge {
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   6. 滚动条（Webkit）
   --------------------------------------------------------------------------- */
:root[theme] body ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
:root[theme] body ::-webkit-scrollbar-thumb {
  background: #ccd2dc;
  border-radius: 4px;
}
:root[theme] body ::-webkit-scrollbar-thumb:hover {
  background: #b3bccc;
}
:root[theme] body ::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------------------------------------------------------------------------
   7. 布局留白收敛（「空白过多」的根因）
   ---------------------------------------------------------------------------
   官方 common.css：.el-main { padding-top: .83rem; padding-left/right: 1.02rem }
   本系统 rem 基准 = 视口宽 / 19.2（1920 屏 → 1rem = 100px），即
   顶部约 83px、左右各约 102px，而顶栏实际只有 40px 高 ——
   顶部多出 40 余 px 纯空白、左右又各自空出 100px，是页面「大而空」的主因。
   此处只收敛留白，不改任何结构与字号。
   放在 min-width:751px 内，≤750px 沿用官方移动端覆盖值（.el-aside 此时已 display:none）。 */
@media screen and (min-width: 751px) {
  :root[theme] body .el-main {
    padding-top: calc(var(--aurora-header-h) + 24px) !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-bottom: 24px !important;
  }

  /* 仪表盘首页：home.css 原为 padding:0!important（内容贴屏幕四边），
     补一圈统一留白，卡片不再被视口切边 */
  :root[theme] body .home-main {
    padding: 24px !important;
    background: #f5f7f9;
  }

  /* 例外：财务页。官方 finance.css 明确写过 .el-main{padding:0!important}，
     由页面内的 .finance.main-card 自管间距，属于有意设计，此处保持不动。
     （:has 不支持的旧内核会整条忽略，降级为上面的 24px，无副作用） */
  :root[theme] body .el-main:has(.main-card.finance) {
    padding: 0 !important;
  }
}