/* ==========================================================================
   WB 会员中心主题 · 全局皮肤（clientarea/template/pc/wb）
   品牌绿 #00C29A / 文字墨 #0E7C63（WCAG 5.15:1）/ 浅绿面板 #F3F9F6

   加载位：各 PHP 页面在「页面独有 CSS」之后引入本文件（见每页 @@WB-CSS@@ 标记），
   因此对所有页面样式与 Element 默认主题（theme/default/index.css，#1A56DB 蓝）
   拥有最终解释权。本壳不加载 gm-theme.css —— common.css 已提供全部壳布局
   （.el-header fixed / .el-main rem 让位 / 侧栏骨架），本文只做视觉与密度。

   单位纪律（与 public/home/template/pc/wb/css/home.css 保持一致）：
   应用型控件一律 px；只有「页头让位 padding-top」必须用 rem + !important，
   因为它必须跟随 common.js 的 rem 流（桌面=宽/19.2，移动=宽/7.5），
   用 px 会让主内容钻进 position:fixed 的顶栏底下。
   ========================================================================== */

/* ==========================================================================
   0. 设计令牌
   选择器写成 `:root, html:root[theme]` 是有意为之：
   壳的 theme/index.js 会在运行期动态追加 theme/{color}/index.css，其变量
   声明在 `:root[theme='default']`（特异性 0,2,0）上 —— 若本文件只用 :root
   （0,1,0），即便源码顺序在后也压不动它，--color-primary 会回落到 #1A56DB 蓝。
   选择器列表中的每个选择器各自计算特异性，html:root[theme]（0,2,1）
   稳稳高于主题文件，且对任意 clientarea_theme_color 取值都成立。
   ========================================================================== */
:root,
html:root[theme] {
  --wb-brand:       #00C29A;
  --wb-brand-deep:  #00A886;
  --wb-brand-ink:   #0E7C63;   /* 白底可读品牌色，5.15:1 */
  --wb-brand-50:    #F2FCFA;
  --wb-brand-100:   #DDF0EC;
  --wb-band:        #F3F9F6;
  --wb-ink:         #1A1A1A;
  --wb-ink-2:       #3D3D3D;
  --wb-ink-3:       #4C4F6B;
  --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:        #C2322A;   /* 白字压得住：5.0:1（#E03B30 只有 4.34:1） */
  --wb-r-sm:  6px;
  --wb-r-md:  8px;
  --wb-r-lg:  12px;
  --wb-r-xl:  16px;
  --wb-sh-1: 0 1px 2px rgba(26, 26, 26, .04);
  --wb-sh-2: 0 6px 22px rgba(26, 26, 26, .06);
  --wb-dur:  .2s;
  --wb-ease: cubic-bezier(.4, 0, .2, 1);

  /* 压过 theme/default/index.css 的 #1A56DB 蓝：页面 CSS 的 var(--color-primary)
     （搜索按钮 / 状态签 / 复制 / 三点操作）与 Element 组件一并改姓 wb 绿 */
  --color-primary:  #00C29A;
  --color-success:  #16A34A;

  /* 侧栏选中态：common.css 的 `.menu-top .el-menu-item.is-active` 用 !important 读取
     这两个变量（hover/active 背景与选中文字色），wb.css 同特异性压不过 !important。
     这里把变量改姓 wb，既保住品牌绿，又不必与 !important 正面对抗。 */
  --color-menu-active-bg:   var(--wb-brand-50);
  --color-menu-text-active: var(--wb-brand-ink);
  --color-warning:  #FAAD10;
  --color-danger:   #C2322A;
  --color-info:     #8C8C8C;
  --color-text-tips: var(--wb-ink-4);

  /* 菜单语义色：默认主题为「深底白字」设计（rgba(255,255,255,.8)），
     wb 侧栏是浅底，必须改成墨色，否则菜单文字不可见 */
  --color-menu-bg:            var(--wb-brand-50);
  --color-menu-active-bg:     var(--wb-brand-50);
  --color-menu-hover-bg:      var(--wb-band);
  --color-menu-text:          var(--wb-ink-2);
  --color-menu-text-active:   var(--wb-brand-ink);
}

/* ==========================================================================
   1. 基础
   ========================================================================== */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
  background: var(--wb-bg-body);
  color: var(--wb-ink-2);
  font-size: 13px;
}
#app, .el-container { background: transparent; }
a { color: var(--wb-brand-ink); text-decoration: none; }
a:hover { color: var(--wb-brand-deep); }

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

/* ==========================================================================
   2. 壳：侧栏 / 抽屉 / 顶栏 / 主区 / Loading
   ========================================================================== */

/* ---- 侧栏：浅色化（白底 + 细线），与官网 wb 浅色体系一致 ---- */
.el-aside,
#app .el-aside,
aside.el-aside {
  background: #FFFFFF;
  border-right: 1px solid var(--wb-line);
  overflow: hidden;
}
.el-aside .menu-alink {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px 10px;
}
/* 后台 logo 深浅不可控，用浅绿徽章承放，深浅都不砸锅 */
.el-aside .ali-logo {
  height: 32px;
  max-width: 150px;
  width: auto;
  background: var(--wb-band);
  border: 1px solid var(--wb-brand-100);
  border-radius: var(--wb-r-md);
  padding: 5px 10px;
  margin: 0;
  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);
}
.el-aside .menu-top {
  padding: 8px 6px 14px;
  margin-top: 8px;
  margin-bottom: 8px;
  background: transparent;
  border-right: 0;
}
.el-aside .el-menu {
  background: transparent;
  border-right: 0;
}
.el-aside .el-menu-item,
.el-aside .el-submenu__title {
  height: 42px;
  line-height: 42px;
  margin: 2px 8px;
  border-radius: var(--wb-r-md);
  padding: 0 14px;
  color: var(--wb-ink-2);
  background: transparent;
  font-size: 13px;
  transition: background var(--wb-dur) var(--wb-ease), color var(--wb-dur) var(--wb-ease);
}
.el-aside .el-menu-item:hover,
.el-aside .el-submenu__title:hover {
  background: var(--wb-band);
  color: var(--wb-brand-ink);
}
.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;
  box-shadow: inset 3px 0 0 var(--wb-brand) !important;
}
/* common.css 的 .menu-top .el-menu-item.is-active{color:var(--color-menu-text-active)}
   没有 !important，改变量即可；.menu-alink 内的文字节点需显式落色 */
.el-aside .el-menu-item .aside-menu-text { color: inherit; }
.el-aside .el-menu-item.is-active .aside-menu-text { color: var(--wb-brand-ink); }
.el-aside .el-submenu.is-active > .el-submenu__title .aside-menu-text { color: var(--wb-brand-ink); }
.el-aside .el-menu-item i,
.el-aside .el-submenu__title i,
.el-aside .el-submenu__icon-arrow { color: var(--wb-ink-4); }
.el-aside .el-menu-item:hover i,
.el-aside .el-submenu__title:hover i { color: var(--wb-brand-ink); }
.el-aside .el-menu-item.is-active i { color: var(--wb-brand-ink); }
.el-aside .line,
.el-aside hr:not(.el-divider--horizontal) {
  background: var(--wb-line-soft);
  border: 0;
  height: 1px;
  width: 82%;
  margin: 6px auto;
}
/* 折叠浮层保持浅色 */
.el-menu--popup,
.el-menu--vertical .el-menu--popup {
  background: #FFFFFF;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-lg);
  box-shadow: 0 12px 32px rgba(26, 26, 26, .12);
  padding: 6px;
}
.el-menu--popup .el-menu-item {
  color: var(--wb-ink-2);
  border-radius: var(--wb-r-sm);
  height: 38px;
  line-height: 38px;
}
.el-menu--popup .el-menu-item:hover { background: var(--wb-band); color: var(--wb-brand-ink); }
.el-menu--popup .el-menu-item.is-active { background: var(--wb-brand-50); color: var(--wb-brand-ink); }

/* 移动端抽屉菜单 */
.drawer-menu { background: #FFFFFF; }
.drawer-menu .drawer-menu-top { border-bottom: 1px solid var(--wb-line); }
.drawer-menu .drawer-menu-logo {
  max-height: 34px;
  background: var(--wb-band);
  border-radius: var(--wb-r-md);
  padding: 5px 10px;
}
.drawer-menu .el-menu-item,
.drawer-menu .el-submenu__title {
  border-radius: var(--wb-r-md);
  margin: 2px 10px;
  color: var(--wb-ink-2);
}
.drawer-menu .el-menu-item.is-active { background: var(--wb-brand-50); color: var(--wb-brand-ink); }

/* ---- 顶栏 ---- */
.el-header,
.top-menu {
  background: #FFFFFF;
  border-bottom: 1px solid var(--wb-line);
  box-shadow: 0 1px 4px rgba(21, 34, 50, .06);
  backdrop-filter: blur(10px);
}
.el-header .search-value { color: var(--wb-ink); }
.el-header .search-name { color: var(--wb-ink-5); }

/* ---- 主区 ---- */
/* 页头让位纪律（壳冲突三定律第 3 条）：.el-header 是 position:fixed（桌面 40px、
   移动端 1rem），.el-main 的 padding-top（桌面 0.83rem / 移动 1.66rem，随 common.js
   的 rem 流缩放）就是 clearance —— 必须 rem + !important，px 会让内容钻进页头底下。

   ★ 本次踩的坑（务必保留这段注释）：
   壳的 css/common/element-comment.css（由 common.css 首行 @import 引入，因此枚举
   document.styleSheets 时只看顶层规则会漏掉它 —— @import 的规则藏在
   CSSImportRule.styleSheet 里）有一条：
       .el-container:nth-child(2) > .el-main {
         padding: .24rem; margin: .24rem; margin-top: calc(40px + .24rem);
       }
   特异性 (0,3,0) 且没有 !important，于是压掉所有单类 .el-main 规则。实测移动端
   让位只剩 13.44px（=56×0.24），主区顶部被推到 y=53.44，而页头底边是 56 —— 内容
   直接钻进固定页头底下。它把 40px 写死在 margin 里，是「桌面专用 hack」，在 rem 流
   下必然失效。
   WB 侧做法：镜像同一条选择器（保持 (0,3,0)）+ !important + 更靠后的源码顺序，
   并清掉它那套 margin/border-radius 硬编码，让位统一交给 rem padding。 */
.el-main,
.el-main.home-main,
.el-container:nth-child(2) > .el-main {
  background: var(--wb-bg-body);
  margin: 0 !important;
  padding-top: 0.83rem !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-bottom: 18px !important;
  border-radius: 0;
  font-size: 13px;
}

/* ---- 首屏 Loading：品牌绿 ---- */
#mainLoading .ddr { background: var(--wb-brand); }

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

/* ---- 按钮 ---- */
.el-button {
  border-radius: var(--wb-r-md);
  font-weight: 500;
  font-size: 13px;
  transition: all var(--wb-dur) var(--wb-ease);
}
.el-button--primary {
  background: var(--wb-brand);
  border-color: var(--wb-brand);
  color: #fff;
}
.el-button--primary:hover,
.el-button--primary:focus {
  background: var(--wb-brand-deep);
  border-color: var(--wb-brand-deep);
  box-shadow: 0 6px 16px rgba(0, 194, 154, .22);
}
.el-button--primary.is-plain {
  color: var(--wb-brand-ink);
  background: var(--wb-brand-50);
  border-color: var(--wb-brand-100);
}
.el-button--text { color: var(--wb-brand-ink); }
.el-button--text:hover { color: var(--wb-brand-deep); }
.el-button--default { border-color: #DFE3E8; color: var(--wb-ink-2); }
.el-button--default:hover { color: var(--wb-brand-ink); border-color: var(--wb-brand); background: var(--wb-brand-50); }
.el-button--danger { background: var(--wb-down); border-color: var(--wb-down); }
.el-button--mini, .el-button--small { border-radius: 7px; }
.el-button.is-disabled, .el-button.is-disabled:hover { opacity: .55; }
/* 禁用态主按钮：主题默认是「白字 + 淡蓝底」（调色板替换后成淡绿底），
   白字在 #DDF0EC 上只有 1.4:1，等于看不见。改成淡绿底 + 深青字。 */
.el-button--primary.is-disabled,
.el-button--primary.is-disabled:hover,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:active {
  background: var(--wb-brand-100) !important;
  border-color: var(--wb-brand-100) !important;
  color: #4E8F80 !important;
  opacity: 1;
}
/* finance 余额区「充值」主按钮：页面 CSS 用 6 类链
   .finance...balance-right .el-button 把 radius 压成 0.04rem(~3.3px)。
   这里同链 + .el-button--primary（等特异性，wb.css 后加载胜出）重置为系统 8px。 */
.finance .finance-top .finance-money-main .finance-balance .balance-right .el-button--primary {
  border-radius: var(--wb-r-md);
}

/* ---- 输入类 ---- */
/* 圆角纪律：各页面自带的 xxx.css 里有大量 `.xxx .el-input__inner{border-radius:3px}`
   （特异性 (0,2,0)），会压过裸 `.el-input__inner`（0,1,0）。这里用 `.el-main` 前缀
   抬到 (0,2,0) 并加 !important，让全站输入类圆角统一为 8px。 */
.el-input__inner {
  border-radius: var(--wb-r-md);
  border-color: #DFE3E8;
  transition: border-color var(--wb-dur) var(--wb-ease), box-shadow var(--wb-dur) var(--wb-ease);
}
.el-main .el-input__inner,
.el-main .el-textarea__inner,
.el-main .el-input-group__append,
.el-main .el-input-group__prepend,
.el-input--medium .el-input__inner,
.el-input--small .el-input__inner,
.el-input--mini .el-input__inner {
  border-radius: var(--wb-r-md) !important;
}
.el-input__inner:focus,
.el-input.is-active .el-input__inner {
  border-color: var(--wb-brand);
  box-shadow: 0 0 0 3px rgba(0, 194, 154, .12);
}
.el-textarea__inner { border-radius: var(--wb-r-md); border-color: #DFE3E8; }
.el-textarea__inner:focus { border-color: var(--wb-brand); box-shadow: 0 0 0 3px rgba(0, 194, 154, .12); }
.el-input-group__append,
.el-input-group__prepend {
  background: var(--wb-band);
  border-color: #DFE3E8;
  color: var(--wb-ink-2);
}
.el-select-dropdown {
  border-radius: var(--wb-r-lg);
  box-shadow: 0 12px 32px rgba(26, 26, 26, .12);
  border: 1px solid var(--wb-line);
}
.el-select-dropdown__item.selected { color: var(--wb-brand-ink); font-weight: 600; }
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: var(--wb-brand);
  border-color: var(--wb-brand);
}
.el-checkbox__input.is-checked + .el-checkbox__label { color: var(--wb-brand-ink); }
.el-radio__input.is-checked .el-radio__inner { border-color: var(--wb-brand); background: var(--wb-brand); }
.el-radio__input.is-checked + .el-radio__label { color: var(--wb-brand-ink); }
.el-switch.is-checked .el-switch__core { background-color: var(--wb-brand); border-color: var(--wb-brand); }
.el-switch__core { border-color: #D6D9DD; background-color: #D6D9DD; }
.el-loading-spinner .path { stroke: var(--wb-brand); }
.el-loading-mask { background: rgba(255, 255, 255, .75); }

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

/* ---- 分页 ---- */
.el-pagination { padding: 12px 0 2px; font-weight: 400; }
.el-pager li {
  border-radius: var(--wb-r-md);
  margin: 0 2px;
  min-width: 30px;
  font-weight: 400;
  color: var(--wb-ink-2);
}
.el-pager li.active,
.el-pagination.is-background .el-pager li:not(.disabled).active {
  /* 白字压在 #00C29A 上只有 2.29:1，分页是带字的实心块，下沉一档到 brand-deep（3.13:1） */
  background: var(--wb-brand-deep);
  color: #fff;
}
.el-pager li:hover,
.el-pagination.is-background .el-pager li:not(.disabled):hover { color: var(--wb-brand-ink); }

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

/* ---- 弹窗 / 抽屉 / 消息 / 通知 / 气泡 ---- */
.el-dialog {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(26, 26, 26, .18);
}
.el-dialog__header {
  background: #FAFBFB;
  border-bottom: 1px solid var(--wb-line);
  padding: 16px 20px;
}
.el-dialog__title { font-weight: 700; color: var(--wb-ink); }
.el-dialog__headerbtn .el-dialog__close { color: var(--wb-ink-4); }
.el-dialog__headerbtn:hover .el-dialog__close { color: var(--wb-brand-ink); }
.el-dialog__footer { border-top: 1px solid var(--wb-line); padding: 12px 20px; }
.el-message { border-radius: var(--wb-r-lg); box-shadow: 0 10px 30px rgba(26, 26, 26, .12); }
.el-message--success { background: #F0FBF6; border-color: #B5E8D6; }
.el-message--error   { background: #FEF2F1; border-color: #F8CBC8; }
.el-message--warning { background: #FFF9EB; border-color: #F5E3B3; }
.el-message-box { border-radius: 14px; }
.el-message-box__title { font-weight: 700; color: var(--wb-ink); }
.el-message-box__status.el-icon-warning { color: var(--wb-brand-ink); }
.el-notification { border-radius: var(--wb-r-lg); box-shadow: 0 16px 40px rgba(26, 26, 26, .14); }
.el-popover {
  border-radius: var(--wb-r-lg);
  border-color: var(--wb-line);
  box-shadow: 0 12px 32px rgba(26, 26, 26, .12);
}
.el-tooltip__popper.is-dark { background: var(--wb-ink); }

/* ---- 标签页 / 步骤 / 进度 / 空态 / 描述 ---- */
.el-tabs__item { font-size: 13px; color: var(--wb-ink-3); }
.el-tabs__item.is-active { color: var(--wb-brand-ink); font-weight: 600; }
.el-tabs__item:hover { color: var(--wb-brand-ink); }
.el-tabs__active-bar { background: var(--wb-brand); }
.el-tabs__nav-wrap::after { height: 1px; background: var(--wb-line); }
.el-steps .el-step__head.is-finish,
.el-steps .el-step__title.is-finish { color: var(--wb-brand-ink); }
.el-steps .el-step__head.is-process { color: var(--wb-brand); }
.el-step__title.is-process { color: var(--wb-brand); font-weight: 600; }
.el-progress-bar__outer { border-radius: 99px; background: var(--wb-line-soft); }
.el-progress-bar__inner { border-radius: 99px; }
.el-progress__text { font-weight: 600; color: var(--wb-ink-2); }
.el-empty__description p { color: var(--wb-ink-5); }
.el-descriptions__header { margin-bottom: 12px; }
.el-descriptions-item__label { color: var(--wb-ink-4); }
.el-alert { border-radius: var(--wb-r-lg); }
.el-alert--info.is-light { background: var(--wb-band); border-color: var(--wb-brand-100); color: var(--wb-ink-2); }
.el-alert--success.is-light { background: #F0FBF6; border-color: #B5E8D6; color: #15803D; }
.el-alert--error.is-light { background: #FEF2F1; border-color: #F8CBC8; color: #C2322A; }
.el-alert--warning.is-light { background: #FFF9EB; border-color: #F5E3B3; color: #B45309; }
.el-drawer { background: #FFFFFF; }

/* ---- 卡片 / 日期 / 上传 ---- */
.el-card,
.el-main .el-card,
.el-main .card {
  border-radius: var(--wb-r-lg);
  border-color: var(--wb-line);
  box-shadow: var(--wb-sh-1);
}
.el-card__header { background: #FAFBFB; border-bottom-color: var(--wb-line); padding: 14px 18px; }
.el-card__body { padding: 18px 20px; }
.el-date-picker__header-label:hover,
.el-picker-panel__shortcut:hover { color: var(--wb-brand-ink); }
.el-date-table td.current:not(.disabled) span { background: var(--wb-brand); }
.el-date-table td.today span { color: var(--wb-brand-ink); }
.el-upload-dragger { border-radius: var(--wb-r-lg); border-color: var(--wb-brand-100); background: var(--wb-brand-50); }
.el-upload-dragger:hover { border-color: var(--wb-brand); }

/* ---- 品牌色当「文字」用时的对比度兜底 ----
   theme/default/element-ui.css 已做过调色板替换（#1A56DB → #00C29A），但品牌绿
   在白底上的对比度只有 1.93:1，用作填充/描边没问题，用作正文色不合格（WCAG AA 4.5:1）。
   凡是「主色当文字色」的语义位，统一改走 --wb-brand-ink（#0E7C63，5.15:1）。 */
.el-link.el-link--primary,
.el-link.el-link--primary:hover,
.el-dropdown-menu__item:hover,
.el-dropdown-menu__item:focus,
.el-select-dropdown__item.selected,
.el-checkbox__input.is-checked + .el-checkbox__label,
.el-checkbox__input.is-indeterminate + .el-checkbox__label,
.el-radio__input.is-checked + .el-radio__label,
.el-radio-button__orig-radio:checked + .el-radio-button__inner,
.el-transfer-panel__item:hover { color: var(--wb-brand-ink); }
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background: var(--wb-brand); border-color: var(--wb-brand); color: #FFFFFF;
  box-shadow: -1px 0 0 0 var(--wb-brand);
}

/* ==========================================================================
   4. 页面通用结构
   ========================================================================== */

/* ---- 主卡片：gm 主题下是「透明 + 12px 圆角」（视觉上没有卡），
       wb 统一收敛成白底卡片，让所有会员中心子页共享同一层级语汇 ---- */
.main-card {
  background: #FFFFFF;
  border: 1px solid var(--wb-line);
  border-radius: var(--wb-r-lg);
  box-shadow: var(--wb-sh-2);
  padding: 20px 22px;
  margin: auto;
}
.home-main .main-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
.main-card-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--wb-ink);
  margin: 0;
  line-height: 1.4;
}

/* ---- 搜索工具栏：左按钮 / 右侧筛选 ---- */
.content_searchbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.content_searchbar .left-btn,
.content_searchbar .searchbar .el-button--primary {
  height: 34px;
  line-height: 1;
  padding: 0 16px;
  background: var(--wb-brand);
  color: #FFF;
  border-radius: var(--wb-r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background var(--wb-dur) var(--wb-ease), box-shadow var(--wb-dur) var(--wb-ease);
}
.content_searchbar .left-btn:hover {
  background: var(--wb-brand-deep);
  box-shadow: 0 6px 16px rgba(0, 194, 154, .24);
}
.content_searchbar .com-search { display: flex; align-items: center; gap: 8px; }

/* ---- 表壳 ---- */
.content-table, .content_table, .tabledata, .main_table { margin-top: 14px; }

/* ---- 状态签（安全/白名单开关等）---- */
.open-show .un-open,
.open-show .open {
  height: 24px;
  min-width: 56px;
  padding: 0 8px;
  border-radius: var(--wb-r-sm);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.open-show .un-open { background: #F2F3F5; color: var(--wb-ink-4); }
.open-show .open { background: var(--wb-brand-50); color: var(--wb-brand-ink); border: 1px solid var(--wb-brand-100); }
.open-show .setting { color: var(--wb-brand-ink); font-size: 13px; margin-left: 8px; cursor: pointer; }
.open-show .setting:hover { color: var(--wb-brand-deep); }

/* ---- 三点更多操作 ---- */
.more-operation { padding: 6px; cursor: pointer; }
.more-operation .dot {
  width: 5px;
  height: 5px;
  border: 0;
  border-radius: 50%;
  background: var(--wb-ink-5);
  margin-right: 3px;
}
.more-operation:hover .dot { background: var(--wb-brand-ink); }
.el-popover .operation-item { color: var(--wb-ink-2); padding: 4px 8px; border-radius: var(--wb-r-sm); }
.el-popover .operation-item:hover { color: var(--wb-brand-ink); background: var(--wb-brand-50); }

/* ---- 对话框自定义按钮（account/security/finance 各页都在用 div.btn-ok/btn-no）---- */
.dialog-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--wb-ink);
  line-height: 1.4;
}
.dialog-footer .btn-ok,
.dialog-footer .btn-no,
.delete-dialog .del-dialog-footer .btn-ok,
.delete-dialog .del-dialog-footer .btn-no,
.create-api-dialog .dialog-footer .btn-ok,
.create-api-dialog .dialog-footer .btn-no {
  min-width: 96px;
  border-radius: var(--wb-r-md);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--wb-dur) var(--wb-ease);
}
.dialog-footer .btn-ok,
.create-api-dialog .dialog-footer .btn-ok { background: var(--wb-brand); color: #FFFFFF; }
.dialog-footer .btn-ok:hover,
.create-api-dialog .dialog-footer .btn-ok:hover { background: var(--wb-brand-deep); box-shadow: 0 6px 16px rgba(0, 194, 154, .22); }
.dialog-footer .btn-no,
.create-api-dialog .dialog-footer .btn-no { background: #F2F3F5; color: var(--wb-ink-2); border: 1px solid var(--wb-line); }
.dialog-footer .btn-no:hover,
.create-api-dialog .dialog-footer .btn-no:hover { border-color: var(--wb-brand); color: var(--wb-brand-ink); }
.delete-dialog .del-dialog-title { color: var(--wb-down); }
.delete-dialog .del-dialog-footer .btn-ok { background: var(--wb-down); color: #FFFFFF; }
.delete-dialog .del-dialog-footer .btn-no { background: #F2F3F5; color: var(--wb-ink-2); }
.delete-dialog .del-dialog-main { color: var(--wb-ink); }

/* ---- 表单行（账户资料页 .box-item 结构）---- */
.box-item { margin-bottom: 16px; }
.box-item-t { font-size: 13px; color: var(--wb-ink-4); margin-bottom: 8px; }
.box-item-b .el-input__inner,
.box-item-b .el-select .el-input__inner { height: 38px; line-height: 38px; }
.basic-title { font-size: 15px; font-weight: 600; color: var(--wb-ink); }
.content-box { margin-top: 4px; }

/* ---- 财务页核心区块 ---- */
.balance-left-title, .balance-title-num { color: var(--wb-ink-4); }
.balance-left-num { color: var(--wb-brand-ink); font-weight: 700; }
.balance-tx-btn,
.credit-btn {
  background: var(--wb-brand);
  color: #FFFFFF;
  border-radius: var(--wb-r-md);
  transition: background var(--wb-dur) var(--wb-ease), box-shadow var(--wb-dur) var(--wb-ease);
}
.balance-tx-btn:hover,
.credit-btn:hover { background: var(--wb-brand-deep); box-shadow: 0 6px 16px rgba(0, 194, 154, .22); }
.balance-tag { border-radius: var(--wb-r-sm); }
.credit-content { border-color: var(--wb-line); border-radius: var(--wb-r-lg); }
.credit-top { color: var(--wb-ink-2); }
.is-active { color: var(--wb-brand-ink); }
.no-active { color: var(--wb-ink-5); }
.contract-status { border-radius: var(--wb-r-sm); }
.cancel-btn { color: var(--wb-ink-4); }
.cancel-btn:hover { color: var(--wb-brand-ink); }
.a-text { color: var(--wb-brand-ink); }
.a-text:hover { color: var(--wb-brand-deep); }
.orderid_a { color: var(--wb-brand-ink); }
.orderid_a:hover { color: var(--wb-brand-deep); }
.delete-box .delete-btn,
.delete-btn { color: var(--wb-down); }

/* ---- 开关型状态胶囊（SSH 白名单 / 安全组 / 端口开关）----
   页面 CSS 里是 `.main-card .content-table .tabledata .open-show .un-open { … }`
   （特异性 (0,5,0)，圆角 3px，灰字 #757575 压在 #EEEEEE 上只有 3.97:1 —— 11px 字号
   下读起来发虚）。这里用 !important 抬过它，统一成品牌胶囊：开=品牌浅底+品牌墨，
   关=中性灰底+深灰字（#5A5A5A on #EFEFEF ≈ 5.9:1）。 */
.open-show .open,
.open-show .un-open {
  border-radius: 99px !important;
  font-size: 12px !important;
  font-weight: 500;
}
.open-show .un-open { background: #EFEFEF !important; color: #5A5A5A !important; }
.open-show .open { background: var(--wb-brand-100) !important; color: var(--wb-brand-ink) !important; }

/* ---- Common：myPage 分页容器 ---- */
.myPage { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ==========================================================================
   5. 认证页（login / regist / forget）骨架
   ========================================================================== */
.login-container,
.login-box,
.regist-box,
.forget-box {
  --wb-auth-card-bg: #FFFFFF;
}
.login-container .login-btn,
.login-box .login-btn,
.regist-box .regist-btn,
.forget-box .forget-btn {
  border-radius: var(--wb-r-md);
  background: var(--wb-brand);
  border-color: var(--wb-brand);
  font-weight: 500;
  transition: background var(--wb-dur) var(--wb-ease), box-shadow var(--wb-dur) var(--wb-ease);
}
.login-container .login-btn:hover,
.login-box .login-btn:hover,
.regist-box .regist-btn:hover,
.forget-box .forget-btn:hover {
  background: var(--wb-brand-deep);
  border-color: var(--wb-brand-deep);
  box-shadow: 0 8px 22px rgba(0, 194, 154, .26);
}
.login-container .el-input__inner,
.login-box .el-input__inner,
.regist-box .el-input__inner,
.forget-box .el-input__inner {
  border-radius: var(--wb-r-md);
  border-color: #DFE3E8;
}
.login-container .el-input__inner:focus,
.login-box .el-input__inner:focus,
.regist-box .el-input__inner:focus,
.forget-box .el-input__inner:focus {
  border-color: var(--wb-brand);
  box-shadow: 0 0 0 3px rgba(0, 194, 154, .12);
}
.login-container .el-link.el-link--primary,
.login-container .bule-text { color: var(--wb-brand-ink); }
.login-container .el-link.el-link--primary:hover { color: var(--wb-brand-deep); }

/* ==========================================================================
   6. 响应式：≤750px 与壳同断点（common.css 在此切换 rem 流与隐藏侧栏）
   ========================================================================== */
@media screen and (max-width: 750px) {
  .el-main,
  .el-main.home-main,
  .el-container:nth-child(2) > .el-main {
    padding-top: 1.66rem !important;   /* 与壳同断点：rem=宽/7.5，420px → 92.96px，页头底边 56px */
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 16px !important;
  }
  .main-card {
    padding: 14px 14px;
    border-radius: var(--wb-r-lg);
  }
  .main-card-title { font-size: 17px; }
  .content_searchbar { flex-direction: column; align-items: stretch; }
  .content_searchbar .left-btn { width: 100%; }
  .box-item { margin-bottom: 12px; }
  .el-dialog { width: 92% !important; margin: 0 auto; }
  .el-dialog__body { padding-left: 18px; padding-right: 18px; }
  .delete-dialog .el-dialog__body { padding-left: 18px; padding-right: 18px; }
  .el-message { min-width: 84vw; }
}