/* ==========================================================================
   WB 会员中心首页主题 · 同步官网 wb 设计系统（public/web/wb）
   品牌绿 #00C29A / 文字墨 #0E7C63（WCAG 5.15:1）/ 浅绿面板 #F3F9F6
   紧凑间距：卡片内距 18-20px，区块距 14px，正文 13px（应用型密度）
   单位纪律：全 px（Element UI 控件即 px 基准；壳的 rem 流式缩放不适用于
   控制台类界面，固定 px 保证 1200-1920 视口下控件不变形）
   覆盖纪律：壳主题（gm/default）注入的 gm-theme.css / common.css 会与本文
   冲突，冲突处一律镜像其选择器 + !important，本文在 body 内后加载即胜出。
   ========================================================================== */

:root {
  --wb-brand:      #00C29A;
  --wb-brand-deep: #00A886;
  --wb-brand-ink:  #0E7C63;   /* 白底文字版品牌绿，5.15:1 */
  --color-primary: #00C29A;   /* Element UI 主题变量，压过 gm-theme 的 #149CF4 */
  --wb-brand-50:   #F2FCFA;
  --wb-brand-100:  #DDF0EC;
  --wb-band:       #F3F9F6;
  --wb-ink:        #1A1A1A;
  --wb-ink-2:      #3D3D3D;
  --wb-ink-4:      #646464;
  --wb-ink-5:      #A1A1A1;
  --wb-line:       #ECECEC;
  --wb-line-soft:  #F2F2F2;
  --wb-bg:         #FFFFFF;
  --wb-bg-body:    #F7F8F9;
  --wb-up:         #16A34A;
  --wb-down:       #E03B30;
  --wb-r-sm: 6px;
  --wb-r-md: 10px;
  --wb-r-lg: 12px;
  --wb-r-xl: 16px;
  --wb-sh-1: 0 1px 2px rgba(26, 26, 26, .04);
  --wb-sh-2: 0 4px 16px rgba(26, 26, 26, .06);
  --wb-dur: .2s;
  --wb-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   1. 壳品牌覆盖（侧栏 / 顶栏 / 主区 / Loading）
   ========================================================================== */

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', sans-serif !important;
  background: var(--wb-bg-body);
  color: var(--wb-ink-2);
  font-size: 13px;
}

/* ---- 侧栏：浅色化（白底 + 细线），与官网 wb 的浅色体系一致 ---- */
.el-aside,
#app .el-aside,
aside.el-aside {
  background: #FFFFFF !important;
  border-right: 1px solid var(--wb-line) !important;
  overflow: hidden;
}
.el-aside .menu-alink,
#app .el-aside .menu-alink {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px 12px !important;
}
/* 后台 logo 常为深色字/透明底，浅绿徽章承放，深浅 logo 都不砸锅 */
.el-aside .ali-logo,
.el-aside img.ali-logo {
  height: 32px !important;
  max-width: 150px !important;
  width: auto !important;
  background: var(--wb-band) !important;
  border: 1px solid var(--wb-brand-100) !important;
  border-radius: var(--wb-r-md) !important;
  padding: 5px 10px !important;
  margin: 0 !important;
  object-fit: contain;
  cursor: pointer;
  transition: transform var(--wb-dur) var(--wb-ease), box-shadow var(--wb-dur) var(--wb-ease);
}
.el-aside .ali-logo:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 194, 154, .18) !important;
}
.el-aside .menu-top,
.el-aside ul.menu-top {
  padding: 8px 6px 16px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  background: transparent !important;
  border-right: 0 !important;
}
.el-aside .el-menu,
.el-aside .el-menu {
  background: transparent !important;
  border-right: 0 !important;
}
.el-aside .el-menu-item,
.el-aside .el-submenu__title {
  height: 42px !important;
  line-height: 42px !important;
  margin: 3px 8px !important;
  border-radius: var(--wb-r-md) !important;
  padding: 0 14px !important;
  color: var(--wb-ink-2) !important;
  background: transparent !important;
  font-size: 13px !important;
  transition: background var(--wb-dur) var(--wb-ease), color var(--wb-dur) var(--wb-ease) !important;
}
.el-aside .el-menu-item:hover,
.el-aside .el-submenu__title:hover {
  background: var(--wb-band) !important;
  color: var(--wb-brand-ink) !important;
}
.el-aside .el-menu-item.is-active,
.el-aside .el-submenu.is-active > .el-submenu__title {
  background: var(--wb-brand-50) !important;
  color: var(--wb-brand-ink) !important;
  font-weight: 500 !important;
  box-shadow: inset 3px 0 0 var(--wb-brand);
}
.el-aside .el-menu-item i,
.el-aside .el-submenu__title i,
.el-aside .el-submenu__icon-arrow {
  color: var(--wb-ink-4) !important;
}
.el-aside .el-menu-item:hover i,
.el-aside .el-submenu__title:hover i { color: var(--wb-brand-ink) !important; }
.el-aside .el-menu-item.is-active i { color: var(--wb-brand-ink) !important; }
/* gm-theme.css 有一条 .el-aside .el-menu-item.is-active .aside-menu-text{color:#fff!important}
   (0,4,0) 直击文字 span，浅底上白字不可见 —— 镜像同特异性覆盖 */
.el-aside .el-menu-item.is-active .aside-menu-text { color: var(--wb-brand-ink) !important; }
.el-aside .el-submenu.is-active > .el-submenu__title .aside-menu-text { color: var(--wb-brand-ink) !important; }
.el-aside .line,
.el-aside hr:not(.el-divider--horizontal) {
  background: var(--wb-line-soft) !important;
  border: 0;
  height: 1px;
  width: 82% !important;
  margin: 6px auto !important;
}
/* 折叠浮层保持浅色 */
.el-menu--popup,
.el-menu--vertical .el-menu--popup {
  background: #FFFFFF !important;
  border: 1px solid var(--wb-line) !important;
  border-radius: var(--wb-r-lg) !important;
  box-shadow: 0 12px 32px rgba(26, 26, 26, .12) !important;
  padding: 6px !important;
}
.el-menu--popup .el-menu-item {
  color: var(--wb-ink-2) !important;
  border-radius: var(--wb-r-sm) !important;
  height: 38px !important;
  line-height: 38px !important;
}
.el-menu--popup .el-menu-item:hover { background: var(--wb-band) !important; color: var(--wb-brand-ink) !important; }
.el-menu--popup .el-menu-item.is-active { background: var(--wb-brand-50) !important; color: var(--wb-brand-ink) !important; }

/* ---- 顶栏 ---- */
.top-menu,
.el-header {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--wb-line) !important;
  box-shadow: none !important;
}

/* ---- 主区 ---- */
/* 顶部让位纪律：壳的 .el-header 是 position:fixed（高 40px，移动端 1rem）。
   .el-main 原生的 padding-top（桌面 0.83rem / 移动 1.66rem，经 common.js 的 rem 流
   随视口缩放）就是页头 clearance —— 必须用 rem 单位 + !important 覆盖：
   ① px 会破坏 rem 流，内容将钻进固定页头底下；
   ② gm-theme.css 的 .el-main.home-main{padding:22px 26px!important} 特异性 (0,2,0)
      高于 common.css 原生规则，不覆盖的话 clearance 只剩 22px。 */
.el-main,
.el-main.home-main {
  background: var(--wb-bg-body) !important;
  padding-top: 0.83rem !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 18px !important;
}
@media screen and (max-width: 750px) {
  .el-main,
  .el-main.home-main {
    padding-top: 1.66rem !important; /* 与壳同断点：rem=宽/7.5，420px → 93px */
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ---- 页面主 Loading：品牌绿 ---- */
#mainLoading .ddr {
  background: var(--wb-brand) !important;
}

/* ==========================================================================
   2. Element UI 组件品牌化
   ========================================================================== */

/* ---- 按钮 ---- */
.el-button {
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  transition: all var(--wb-dur) var(--wb-ease) !important;
}
.el-button--primary {
  background: var(--wb-brand) !important;
  border-color: var(--wb-brand) !important;
  color: #fff !important;
}
.el-button--primary:hover,
.el-button--primary:focus {
  background: var(--wb-brand-deep) !important;
  border-color: var(--wb-brand-deep) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 194, 154, .25);
}
.el-button--primary.is-plain {
  color: var(--wb-brand-ink) !important;
  background: var(--wb-brand-50) !important;
  border-color: var(--wb-brand-100) !important;
}
.el-button--text { color: var(--wb-brand-ink) !important; }
.el-button--default { border-color: #DFE3E8 !important; color: var(--wb-ink-2) !important; }
.el-button--default:hover { color: var(--wb-brand-ink) !important; border-color: var(--wb-brand) !important; background: var(--wb-brand-50) !important; }
.el-button--mini, .el-button--small { border-radius: 7px !important; }

/* ---- 输入类 ---- */
.el-input__inner {
  border-radius: 8px !important;
  border-color: #DFE3E8 !important;
  transition: border-color var(--wb-dur) var(--wb-ease), box-shadow var(--wb-dur) var(--wb-ease) !important;
}
.el-input__inner:focus,
.el-input.is-active .el-input__inner {
  border-color: var(--wb-brand) !important;
  box-shadow: 0 0 0 3px rgba(0, 194, 154, .12) !important;
}
.el-textarea__inner { border-radius: 8px !important; }
.el-textarea__inner:focus { border-color: var(--wb-brand) !important; }
.el-select-dropdown {
  border-radius: var(--wb-r-md) !important;
  box-shadow: 0 12px 32px rgba(26, 26, 26, .12) !important;
  border: 1px solid var(--wb-line) !important;
}
.el-select-dropdown__item.selected { color: var(--wb-brand-ink) !important; font-weight: 600; }
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: var(--wb-brand) !important;
  border-color: var(--wb-brand) !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label { color: var(--wb-brand-ink) !important; }
.el-radio__input.is-checked .el-radio__inner {
  border-color: var(--wb-brand) !important;
  background: var(--wb-brand) !important;
}
.el-radio__input.is-checked + .el-radio__label { color: var(--wb-brand-ink) !important; }
.el-switch.is-checked .el-switch__core { background-color: var(--wb-brand) !important; border-color: var(--wb-brand) !important; }
.el-loading-spinner .path { stroke: var(--wb-brand) !important; }
.el-loading-mask { background: rgba(255, 255, 255, .75) !important; backdrop-filter: blur(2px); }

/* ---- 链接 ---- */
a { color: var(--wb-brand-ink); }
a:hover { color: var(--wb-brand-deep); }

/* ---- 表格 ---- */
.el-table {
  border-radius: var(--wb-r-md) !important;
  overflow: hidden;
  font-size: 13px !important;
}
.el-table th.el-table__cell {
  background: var(--wb-band) !important;
  color: var(--wb-ink-2) !important;
  font-weight: 600 !important;
  border-bottom-color: var(--wb-brand-100) !important;
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf { border-bottom-color: #F0F2F4 !important; }
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { background: #FAFBFB !important; }
.el-table__row:hover > td.el-table__cell { background: var(--wb-brand-50) !important; }
.el-table__empty-block { min-height: 120px; }

/* ---- 分页 ---- */
.el-pagination { padding: 12px 0 2px !important; font-weight: 400; }
.el-pager li {
  border-radius: 8px !important;
  margin: 0 2px;
  min-width: 30px;
  font-weight: 400 !important;
  color: var(--wb-ink-2) !important;
}
.el-pager li.active,
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: var(--wb-brand) !important;
  color: #fff !important;
}
.el-pager li:hover,
.el-pagination.is-background .el-pager li:not(.disabled):hover { color: var(--wb-brand-ink) !important; }

/* ---- 标签 ---- */
.el-tag {
  border-radius: 99px !important;
  border: 0 !important;
  padding: 0 10px !important;
  font-size: 12px !important;
}
.el-tag--success { background: rgba(22, 163, 74, .12) !important; color: #15803D !important; }
.el-tag--warning { background: rgba(250, 173, 16, .14) !important; color: #B45309 !important; }
.el-tag--danger  { background: rgba(224, 59, 48, .1) !important; color: #C2322A !important; }
.el-tag--info    { background: #EEF1F4 !important; color: var(--wb-ink-4) !important; }
.el-badge__content { border: 2px solid #fff; }

/* ---- 弹窗 / 消息 / 通知 ---- */
.el-dialog {
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(26, 26, 26, .18) !important;
}
.el-dialog__header {
  background: #FAFBFB !important;
  border-bottom: 1px solid var(--wb-line);
  padding: 16px 20px !important;
}
.el-dialog__title { font-weight: 700; color: var(--wb-ink); }
.el-dialog__footer { border-top: 1px solid var(--wb-line); padding: 12px 20px !important; }
.el-message { border-radius: var(--wb-r-md) !important; box-shadow: 0 10px 30px rgba(26, 26, 26, .12) !important; }
.el-message--success { background: #F0FBF6 !important; border-color: #B5E8D6 !important; }
.el-message--error   { background: #FEF2F1 !important; border-color: #F8CBC8 !important; }
.el-message--warning { background: #FFF9EB !important; border-color: #F5E3B3 !important; }
.el-notification { border-radius: var(--wb-r-lg) !important; box-shadow: 0 16px 40px rgba(26, 26, 26, .14) !important; }

/* ---- 标签页 / 步骤 / 进度 / 空态 ---- */
.el-tabs__item { font-size: 13px !important; }
.el-tabs__item.is-active { color: var(--wb-brand-ink) !important; font-weight: 600; }
.el-tabs__active-bar { background: var(--wb-brand) !important; }
.el-tabs__nav-wrap::after { height: 1px !important; background: var(--wb-line) !important; }
.el-steps .el-step__head.is-finish,
.el-steps .el-step__title.is-finish { color: var(--wb-brand-ink) !important; }
.el-steps .el-step__head.is-process { color: var(--wb-brand) !important; }
.el-step__title.is-process { color: var(--wb-brand) !important; font-weight: 600; }
.el-progress-bar__outer { border-radius: 99px !important; background: var(--wb-line-soft) !important; }
.el-progress-bar__inner { border-radius: 99px !important; }
.el-progress__text { font-weight: 600; color: var(--wb-ink-2) !important; }
.el-empty__description p { color: var(--wb-ink-5) !important; }
.el-descriptions-item__label { color: var(--wb-ink-4) !important; }
.el-alert { border-radius: var(--wb-r-md) !important; }

/* ---- gm-theme.css 同项 !important 镜像（el-card / 标签 / 分页 / 浮层反馈） ---- */
/* 注意 .el-main .el-card 特异性 (0,2,0) 高于裸 .el-card (0,1,0)，必须并列镜像 */
.el-card,
.el-main .el-card,
.el-main .card { border-radius: var(--wb-r-lg) !important; border-color: var(--wb-line) !important; box-shadow: var(--wb-sh-1) !important; }
.el-card__header { background: #FAFBFB !important; border-bottom-color: var(--wb-line) !important; }
.el-card__body { padding: 18px 20px !important; }
.el-tag--primary { background: rgba(0, 194, 154, .1) !important; color: var(--wb-brand-ink) !important; border-color: rgba(0, 194, 154, .3) !important; }
.el-pager li { border-radius: 8px !important; }
.el-pager li.active { background: var(--wb-brand) !important; color: #FFFFFF !important; }
.el-pagination.is-background .el-pager li:not(.disabled).active { background-color: var(--wb-brand) !important; }
.el-pagination.is-background .el-pager li:not(.disabled):hover { color: var(--wb-brand-ink) !important; }
.el-message { border-radius: var(--wb-r-md) !important; box-shadow: 0 10px 30px rgba(26, 26, 26, .12) !important; }
.el-message--success { background: #F0FBF6 !important; border-color: #B8ECC4 !important; }
.el-message--error { background: #FEF2F1 !important; border-color: #F8CBC8 !important; }
.el-notification { border-radius: var(--wb-r-lg) !important; }

/* ---- 滚动条 ---- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #D6D9DD; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--wb-brand); }

/* ==========================================================================
   3. 首页布局骨架（紧凑：左右分栏 + 右栏 320px 固定）
   ========================================================================== */

.home-main .main-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.home-main .main-content {
  display: flex;
  column-gap: 16px;
  align-items: flex-start;
}
.home-main .left-box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  row-gap: 14px;
}
.home-main .right-box {
  flex: 0 0 320px;
  width: 320px;
  display: flex;
  flex-direction: column;
  row-gap: 14px;
}

/* 区块标题：品牌绿 kicker 小竖条 */
.home-main .title-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--wb-ink);
  margin: 0;
}
.home-main .title-text::before {
  content: '';
  width: 3px;
  height: 14px;
  background: var(--wb-brand);
  border-radius: 2px;
  flex: 0 0 auto;
}
/* gm-theme.css 对这两个语境的 title-text 注入 font-weight:700 / #14122B !important，
   镜像其选择器保持 wb 的 600 / 墨色 */
.home-main .product-list-box .title-text,
.home-main .right-box .title-text { font-weight: 600 !important; color: var(--wb-ink) !important; }
.home-main .WorkOrder-title {
  justify-content: space-between;
}
.home-main .WorkOrder-title .more {
  cursor: pointer;
  color: var(--wb-ink-5);
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--wb-r-sm);
  transition: color var(--wb-dur) var(--wb-ease), background var(--wb-dur) var(--wb-ease);
}
.home-main .WorkOrder-title .more:hover { color: var(--wb-brand-ink); background: var(--wb-brand-50); }

/* ==========================================================================
   4. 用户信息横幅（品牌绿渐变 · 全页视觉焦点）
   ========================================================================== */

.home-main .info-box {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  box-sizing: border-box;
  padding: 22px 26px !important;
  border-radius: var(--wb-r-xl) !important;
  background:
    radial-gradient(620px 300px at 92% -40%, rgba(255, 255, 255, .18), transparent 65%),
    radial-gradient(420px 280px at -8% 135%, rgba(0, 194, 154, .32), transparent 62%),
    linear-gradient(135deg, #00C29A 0%, #00A886 55%, #00997A 100%) !important;
  box-shadow: 0 14px 36px rgba(0, 154, 122, .22) !important;
}
/* 细网格纹理（官网 hero 同款语言，低透明度） */
.home-main .info-box::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .10;
  background-image:
    linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at 25% 50%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse at 25% 50%, #000 25%, transparent 75%);
}
.home-main .info-box > * { position: relative; z-index: 1; }
.home-main .info-box,
.home-main .info-box * { color: #FFFFFF !important; }
.home-main .info-box a { color: #D6F7EE !important; }
.home-main .info-box a:hover { color: #FFFFFF !important; }
.home-main .info-box .el-divider--vertical { background: rgba(255, 255, 255, .28) !important; height: 44px !important; }

.home-main .info-first {
  height: auto;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.home-main .name-first {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  font-weight: 600;
  background: rgba(255, 255, 255, .18);
  width: 54px;
  height: 54px;
  min-width: 54px;
  border-radius: 14px;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .35);
  backdrop-filter: blur(4px);
}
.home-main .name-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 14px;
}
.home-main .hello {
  font-weight: 500;
  font-size: 16px;
  color: #FFFFFF;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.home-main .level-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .22);
  border: 1px solid rgba(255, 255, 255, .4);
  cursor: pointer;
  line-height: 18px;
}
.home-main .name {
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 400;
  margin-top: 4px;
}
.home-main .name .id-text { color: #FFFFFF; font-weight: 500; }

/* 邮箱 / 手机 */
.home-main .info-second {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}
.home-main .info-second .email-box,
.home-main .info-second .phone-box {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.home-main .info-second img { width: 15px; height: 15px; opacity: .85; filter: brightness(0) invert(1); }
.home-main .info-second .phone-number { color: rgba(255, 255, 255, .92); font-weight: 400; }

/* 实名认证（企业 / 个人） */
.home-main .info-three {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}
.home-main .compny-box,
.home-main .person-box { display: flex; align-items: flex-start; gap: 10px; }
.home-main .left-icon { display: flex; align-items: center; gap: 6px; min-width: 76px; }
.home-main .left-icon img { width: 15px; height: 15px; filter: brightness(0) invert(1); opacity: .85; }
.home-main .left-type { font-size: 12px; color: rgba(255, 255, 255, .78); white-space: nowrap; }
.home-main .right-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.home-main .right-title { display: flex; align-items: center; gap: 8px; }
.home-main .company-name {
  font-size: 13px;
  font-weight: 500;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-main .bule-text { color: #D6F7EE !important; cursor: pointer; font-size: 12px; }
.home-main .bule-text:hover { color: #FFFFFF !important; text-decoration: underline; }
.home-main .certify-id { display: flex; align-items: center; gap: 6px; }
.home-main .right-type { font-size: 12px; color: rgba(255, 255, 255, .72); white-space: nowrap; }
.home-main .certify-bottom { display: inline-flex; align-items: center; gap: 6px; }
.home-main .certify-text { font-size: 12px; color: rgba(255, 255, 255, .92); }
.home-main .cpoy-btn { width: 13px; height: 13px; cursor: pointer; opacity: .75; filter: brightness(0) invert(1); }
.home-main .cpoy-btn:hover { opacity: 1; }

/* ==========================================================================
   5. 余额 / 代币 / 信用额度（白卡）
   ========================================================================== */

.home-main .statistics-box {
  background: #FFFFFF !important;
  border: 1px solid var(--wb-line) !important;
  border-radius: var(--wb-r-lg) !important;
  padding: 18px 20px !important;
  box-shadow: var(--wb-sh-1) !important;
  margin-top: 0 !important; /* 左栏间距由 row-gap 负责，清零 gm 注入的 16px */
}
.home-main .statistics-content { display: flex; flex-direction: column; gap: 16px; }
.home-main .money-box { display: flex; flex-direction: column; gap: 16px; }
.home-main .money-top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.home-main .money-credit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--wb-band);
  border: 1px solid var(--wb-brand-100);
  border-radius: var(--wb-r-md);
}
.home-main .credit-btn {
  align-self: flex-start;
  background: var(--wb-brand);
  color: #FFFFFF !important;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 14px;
  border-radius: 99px;
  cursor: pointer;
  transition: background var(--wb-dur) var(--wb-ease), transform var(--wb-dur) var(--wb-ease);
}
.home-main .credit-btn:hover { background: var(--wb-brand-deep); transform: translateY(-1px); }
.home-main .credit-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.home-main .credit-name { font-size: 12px; color: var(--wb-ink-4); display: flex; align-items: center; gap: 4px; }
.home-main .credit-name svg { color: var(--wb-ink-5); }
.home-main .credit-detail { font-size: 12px; color: var(--wb-brand-ink); text-decoration: none; }
.home-main .credit-detail:hover { color: var(--wb-brand-deep); }
.home-main .create-notice { display: flex; align-items: center; gap: 6px; }
.home-main .notice-status {
  width: 30px;
  height: 16px;
  border-radius: 99px;
  background: #D8DCE1;
  position: relative;
  cursor: pointer;
  transition: background var(--wb-dur) var(--wb-ease);
}
.home-main .notice-status::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform var(--wb-dur) var(--wb-ease);
}
.home-main .notice-status.active { background: var(--wb-brand); }
.home-main .notice-status.active::after { transform: translateX(14px); }
.home-main .notice-btn { font-size: 12px; color: var(--wb-brand-ink); cursor: pointer; }
.home-main .voucher-box { font-size: 12px; color: var(--wb-ink-4); }
.home-main .voucher-box .bule-text { color: var(--wb-brand-ink) !important; font-weight: 500; }
.home-main .credit-money { display: flex; align-items: baseline; gap: 4px; }
.home-main .credit-num {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--wb-ink);
  font-variant-numeric: tabular-nums;
}
.home-main .credit-num .s-24 { font-size: 15px; font-weight: 400; color: var(--wb-ink-4); margin-right: 2px; }
.home-main .recharge-text {
  font-size: 12px;
  color: var(--wb-brand-ink);
  cursor: pointer;
  margin-left: 10px;
  font-weight: 500;
}
.home-main .recharge-text:hover { color: var(--wb-brand-deep); text-decoration: underline; }
.home-main .credit-title.coin-title { justify-content: flex-start; }

/* 信用额度条 */
.home-main .money-order {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  background: #FAFBFB;
  border: 1px dashed var(--wb-line);
  border-radius: var(--wb-r-md);
}
.home-main .money-order-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.home-main .money-order-title { font-size: 12px; color: var(--wb-ink-4); display: flex; align-items: center; gap: 6px; }
.home-main .money-order-value { font-size: 17px; font-weight: 600; color: var(--wb-ink); font-variant-numeric: tabular-nums; }
.home-main .money-order-value .s-12 { font-size: 12px; font-weight: 400; color: var(--wb-ink-4); }
.home-main .money-order-divider { width: 1px; align-self: stretch; background: var(--wb-line); }
.home-main .credit-tag {
  font-size: 11px;
  padding: 0 8px;
  border-radius: 99px;
  line-height: 18px;
  font-weight: 500;
  background: #EEF1F4;
  color: var(--wb-ink-4);
}

/* ==========================================================================
   6. 订单三块（浅绿面板磁贴）
   ========================================================================== */

.home-main .order-box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.home-main .order-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--wb-band) !important;
  border: 1px solid var(--wb-brand-100) !important;
  border-radius: var(--wb-r-lg) !important;
  padding: 14px 16px;
  cursor: pointer;
  transition: transform var(--wb-dur) var(--wb-ease), border-color var(--wb-dur) var(--wb-ease),
    box-shadow var(--wb-dur) var(--wb-ease);
}
.home-main .order-item:hover {
  transform: translateY(-2px);
  border-color: var(--wb-brand);
  box-shadow: 0 10px 24px rgba(0, 194, 154, .14);
}
.home-main .order-type-img {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--wb-r-md);
  background: #FFFFFF;
  border: 1px solid var(--wb-brand-100);
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-main .order-type-img img { width: 20px; height: 20px; object-fit: contain; }
/* 选择器特异性须与 gm-theme.css 的 .home-main .order-item .order-title 对等（0,3,0），
   后加载 + !important 方能胜出 */
.home-main .order-item .order-title { font-size: 12px; font-weight: 400; color: var(--wb-ink-4) !important; margin: 0; }
.home-main .order-item .order-nums {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--wb-brand-ink) !important;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   7. 消费统计条（白卡 · 两项）
   ========================================================================== */

.home-main .statistics-bottom {
  display: flex;
  align-items: stretch;
  gap: 18px;
  background: #FFFFFF !important;
  border: 1px solid var(--wb-line) !important;
  border-radius: var(--wb-r-lg) !important;
  padding: 14px 20px !important;
  box-shadow: var(--wb-sh-1) !important;
  margin-top: 0 !important; /* 同上：row-gap 已管间距 */
}
.home-main .statistics-item { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.home-main .statistics-item-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--wb-ink-4);
}
.home-main .statistics-item-name .green-text,
.home-main .statistics-item-name .red-text {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.home-main .green-text { color: var(--wb-up) !important; }
.home-main .red-text { color: var(--wb-down) !important; }
.home-main .statistics-item-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--wb-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.home-main .statistics-item-value .s-12 { font-size: 13px; font-weight: 400; color: var(--wb-ink-4); margin-right: 2px; }
.home-main .statistics-item-divider { width: 1px; align-self: stretch; background: var(--wb-line-soft); }

/* ==========================================================================
   8. 快捷入口（wb-quick · 四联磁贴）
   ========================================================================== */

.home-main .wb-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.home-main .wb-quick a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  background: #FFFFFF;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-lg);
  padding: 13px 14px;
  color: var(--wb-ink);
  box-shadow: var(--wb-sh-1);
  transition: transform var(--wb-dur) var(--wb-ease), border-color var(--wb-dur) var(--wb-ease),
    box-shadow var(--wb-dur) var(--wb-ease);
}
.home-main .wb-quick a:hover {
  transform: translateY(-2px);
  border-color: var(--wb-brand);
  box-shadow: 0 12px 26px rgba(0, 194, 154, .14);
}
.home-main .wb-quick .qi-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--wb-r-md);
  background: var(--wb-brand-50);
  display: grid;
  place-items: center;
  color: var(--wb-brand-ink);
}
.home-main .wb-quick .qi-icon svg { width: 17px; height: 17px; }
.home-main .wb-quick .qi-txt { min-width: 0; }
.home-main .wb-quick .qi-txt b { display: block; font-size: 13px; font-weight: 600; color: var(--wb-ink); }
.home-main .wb-quick .qi-txt small { display: block; font-size: 11px; color: var(--wb-ink-5); margin-top: 1px; }
.home-main .wb-quick .arrow { margin-left: auto; color: #C9CDD3; font-size: 14px; transition: transform var(--wb-dur) var(--wb-ease), color var(--wb-dur) var(--wb-ease); }
.home-main .wb-quick a:hover .arrow { transform: translateX(3px); color: var(--wb-brand); }

/* ==========================================================================
   9. 产品列表（白卡 + 表格）
   ========================================================================== */

.home-main .product-list-box {
  background: #FFFFFF !important;
  border: 1px solid var(--wb-line) !important;
  border-radius: var(--wb-r-lg) !important;
  padding: 18px 20px !important;
  box-shadow: var(--wb-sh-1) !important;
  margin-top: 0 !important;
}
.home-main .product-list-box .title-text { margin-bottom: 14px; }
.home-main .product-name { color: var(--wb-brand-ink); text-decoration: none; font-weight: 500; }
.home-main .product-name:hover { color: var(--wb-brand-deep); text-decoration: underline; }
.home-main .red-time { color: var(--wb-down) !important; font-weight: 500; }
.home-main .no-product { text-align: center; padding: 36px 18px; }
.home-main .no-product h2 { font-size: 15px; font-weight: 600; color: var(--wb-ink-2); margin: 0 0 6px; }
.home-main .no-product p { font-size: 12px; color: var(--wb-ink-5); margin: 0 0 16px; }

/* ==========================================================================
   10. 右栏：推介 / 工单 / 公告
   ========================================================================== */

/* ---- 推介计划（开启态：品牌渐变卡） ---- */
.home-main .recommend-box-open {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(420px 240px at 90% -30%, rgba(255, 255, 255, .16), transparent 65%),
    linear-gradient(135deg, #00C29A 0%, #00A886 60%, #00997A 100%);
  border-radius: var(--wb-r-lg);
  padding: 18px 20px;
  box-shadow: 0 12px 30px rgba(0, 154, 122, .20);
}
.home-main .recommend-box-open,
.home-main .recommend-box-open * { color: #FFFFFF !important; }
.home-main .recommend-box-open .title-text { color: #FFFFFF !important; }
.home-main .recommend-box-open .title-text::before { background: rgba(255, 255, 255, .85) !important; }
.home-main .recommend-top { display: flex; justify-content: space-between; gap: 14px; }
.home-main .recommend-top .left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.home-main .recommend-top .row1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.home-main .recommend-top .reword {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .3);
  white-space: nowrap;
}
.home-main .recommend-top .reword:hover { background: rgba(255, 255, 255, .28); }
.home-main .recommend-top .reword img { width: 13px; height: 13px; filter: brightness(0) invert(1); }
.home-main .recommend-top .row2 { font-size: 12px; color: rgba(255, 255, 255, .82); }
.home-main .recommend-top .row3 { font-size: 19px; font-weight: 600; }
.home-main .recommend-top .row4 { font-size: 11px; color: rgba(255, 255, 255, .72); }
.home-main .recommend-top .right { width: 74px; opacity: .9; }
.home-main .recommend-box-open .url {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--wb-r-md);
  padding: 8px 10px;
}
.home-main .recommend-box-open .url-text {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, .92);
}
.home-main .recommend-box-open .copy-btn {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 99px;
  background: #FFFFFF;
  color: var(--wb-brand-ink) !important;
  cursor: pointer;
  white-space: nowrap;
}
.home-main .recommend-box-open .top-statistic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.home-main .recommend-box-open .top-item {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--wb-r-md);
  padding: 10px 12px;
}
.home-main .recommend-box-open .top-money { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.home-main .recommend-box-open .top-text { font-size: 11px; color: rgba(255, 255, 255, .78); margin-top: 2px; }

/* ---- 推介计划（未开启：白卡空态） ---- */
.home-main .recommend-box {
  position: relative;
  background: #FFFFFF !important;
  border: 1px solid var(--wb-line) !important;
  border-radius: var(--wb-r-lg) !important;
  padding: 22px 20px !important;
  box-shadow: var(--wb-sh-1) !important;
  text-align: center;
}
.home-main .recommend-box img { display: none; }
.home-main .recommend-box h2 { font-size: 15px; font-weight: 600; color: var(--wb-ink); margin: 0 0 6px; }
.home-main .recommend-box p { font-size: 12px; color: var(--wb-ink-4); margin: 0 0 14px; line-height: 1.7; }
.home-main .recommend-box .no-recommend {
  display: inline-block;
  background: var(--wb-brand);
  color: #FFFFFF !important;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 18px;
  border-radius: 99px;
  cursor: pointer;
  transition: background var(--wb-dur) var(--wb-ease), transform var(--wb-dur) var(--wb-ease);
}
.home-main .recommend-box .no-recommend:hover { background: var(--wb-brand-deep); transform: translateY(-1px); }
.home-main .recommend-box .recommend-text { font-size: 12px; color: var(--wb-ink-5); }

/* ---- 工单 / 公告（白卡） ---- */
.home-main .WorkOrder-box,
.home-main .notice-box,
.home-main .wb-notice-card {
  background: #FFFFFF !important;
  border: 1px solid var(--wb-line) !important;
  border-radius: var(--wb-r-lg) !important;
  padding: 18px 20px !important;
  box-shadow: var(--wb-sh-1) !important;
}
/* 右栏五类卡片的间距一律由 .right-box 的 row-gap 负责；
   gm-theme.css 对 recommend-box/notice-box 注入了 margin-top:14px !important，
   此处镜像其选择器清零，特异性对等 + 后加载即胜出 */
.home-main .right-box .recommend-box,
.home-main .right-box .notice-box,
.home-main .right-box .recommend-box + .notice-box,
.home-main .right-box .notice-box + .recommend-box,
.home-main .right-box .WorkOrder-box,
.home-main .right-box .wb-notice-card,
.home-main .right-box .recommend-box-open { margin-top: 0 !important; }
.home-main .WorkOrder-box .title-text,
.home-main .notice-box .title-text,
.home-main .wb-notice-card .title-text { margin-bottom: 10px; }
.home-main .WorkOrder-content { display: flex; flex-direction: column; }
.home-main .WorkOrder-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px;
  border-radius: var(--wb-r-sm);
  cursor: pointer;
  transition: background var(--wb-dur) var(--wb-ease);
}
.home-main .WorkOrder-item:hover { background: var(--wb-brand-50); }
.home-main .replay-div {
  flex: 0 0 auto;
  font-size: 11px;
  color: #FFFFFF;
  padding: 1px 8px;
  border-radius: var(--wb-r-sm);
  line-height: 18px;
  margin-top: 1px;
}
.home-main .replay-box { min-width: 0; flex: 1; }
.home-main .replay-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--wb-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-main .replay-name { font-size: 11px; color: var(--wb-ink-5); margin-top: 3px; }

/* ---- 平台公告（gm_promo 置顶卡） ---- */
.home-main .wb-nc-list { display: flex; flex-direction: column; gap: 2px; }
.home-main .wb-nc-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 8px; border-radius: var(--wb-r-sm); }
.home-main .wb-nc-item:hover { background: var(--wb-brand-50); }
.home-main .wb-nc-date { flex: 0 0 auto; font-size: 11px; color: var(--wb-ink-5); padding-top: 2px; }
.home-main .wb-nc-body { flex: 1; min-width: 0; font-size: 12px; }
.home-main .wb-nc-body b { color: var(--wb-ink); display: block; font-weight: 500; }
.home-main .wb-nc-body i {
  font-style: normal;
  color: var(--wb-ink-4);
  font-size: 11px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.home-main .wb-nc-item a { color: var(--wb-brand-ink) !important; font-size: 12px; }

/* ---- 站内公告 ---- */
.home-main .notice-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-left: 3px solid transparent;
  border-radius: var(--wb-r-sm);
  cursor: pointer;
  transition: background var(--wb-dur) var(--wb-ease), border-color var(--wb-dur) var(--wb-ease);
}
.home-main .notice-item:hover { border-left-color: var(--wb-brand); background: var(--wb-brand-50); }
.home-main .notice-item-left { min-width: 0; flex: 1; }
.home-main .notice-time { font-size: 11px; color: var(--wb-brand-ink) !important; font-weight: 600 !important; margin: 0; }
.home-main .notice-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--wb-ink);
  margin: 3px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-main .notice-type { font-size: 11px; font-weight: 400; color: var(--wb-ink-5); margin: 3px 0 0; }
.home-main .notice-item-right { color: #C9CDD3; flex: 0 0 auto; }
.home-main .notice-item:hover .notice-item-right { color: var(--wb-brand); }

/* ==========================================================================
   11. 弹窗 / 微信入口
   ========================================================================== */

.home-main .open-dialog .el-dialog__body { padding: 20px 24px !important; color: var(--wb-ink-2); line-height: 1.8; }
.home-main .btn-ok { background: var(--wb-brand) !important; border-color: var(--wb-brand) !important; border-radius: 8px !important; }
.home-main .btn-ok:hover { background: var(--wb-brand-deep) !important; border-color: var(--wb-brand-deep) !important; }
.home-main .btn-no { border-radius: 8px !important; }

.home-main .wx-code { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 100; }
.home-main .wx-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFFFFF url("../img/wx.svg") center / 20px no-repeat;
  border: 1px solid var(--wb-line);
  box-shadow: var(--wb-sh-2);
  cursor: pointer;
  transition: transform var(--wb-dur) var(--wb-ease), box-shadow var(--wb-dur) var(--wb-ease);
}
.home-main .wx-img:hover { transform: scale(1.06); box-shadow: 0 10px 24px rgba(0, 194, 154, .2); }
.home-main .wx-box { text-align: center; padding: 8px 4px; }
.home-main .wx-box .tit { font-size: 12px; color: var(--wb-ink-4); margin: 0 0 8px; }
.home-main .wx-box .img { width: 160px; min-height: 160px; display: flex; align-items: center; justify-content: center; }
.home-main .wx-box .img img { width: 100%; }

/* ==========================================================================
   12. 响应式（1200 / 980 / 760，紧凑同步收敛）
   ========================================================================== */

@media (max-width: 1200px) {
  .home-main .right-box { flex: 0 0 280px; width: 280px; }
  .home-main .wb-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-main .money-top { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .home-main .main-content { flex-direction: column; }
  .home-main .right-box { flex: 1 1 auto; width: 100%; }
  .home-main .info-box { padding: 20px; }
  .home-main .info-box .el-divider--vertical { display: none !important; }
  .home-main .hello { max-width: 100%; }
}

@media (max-width: 760px) {
  /* el-main 的 padding 不在此处收敛：页头 clearance 由上方 750px 断点块接管，
     此处若写 padding 简写会把 fixed 页头的让位打掉（移动端内容钻页头底下） */
  .home-main .left-box,
  .home-main .right-box { row-gap: 12px; }
  .home-main .order-box { grid-template-columns: 1fr; }
  .home-main .wb-quick { grid-template-columns: 1fr; }
  .home-main .statistics-bottom { flex-direction: column; gap: 12px; }
  .home-main .statistics-item-divider { display: none; }
  .home-main .money-order { flex-direction: column; align-items: flex-start; gap: 10px; }
  .home-main .money-order-divider { display: none; }
  .home-main .recommend-top { flex-direction: column; }
  .home-main .recommend-top .right { display: none; }
  .home-main .recommend-box-open .top-statistic { grid-template-columns: 1fr; }
  .home-main .credit-num { font-size: 24px; }
  .home-main .order-nums { font-size: 19px; }
  .home-main .wx-code { display: none; }
}