/* ==========================================================================
   智简魔方 V10 · 会员中心 / 购物车 视觉层  skin.css
   作用域：会员中心(clientarea) + 购物车(cart，共用 clientarea header)
   引入方式：clientarea/template/{themes}/header.php 中 common.css 之后一行 <link>
   回滚方式：删除 header.php 中那一行 <link> 即可，其他文件零改动

   设计语言：深海蓝 #4073FF + 浅灰蓝底 + 白卡 + 8/10/14/18 圆角 + 三层柔和阴影
   量纲：站点用 JS 动态根字号（1920 设计稿 → 1rem = 100px，1440 → 75px），
        故「会随视口缩放」的尺寸用 rem，「不该缩放」的细节（边框/圆角/阴影/小字号）用 px。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 设计令牌
   -------------------------------------------------------------------------- */
:root {
  --zk-navy: #4073FF;
  --zk-navy-deep: #325AC7;
  --zk-navy-soft: #628CFF;
  /* 品牌色的 RGB 三通道，供 rgba() 使用。换品牌色时主题控制台只改这一个，
     下面所有半透明品牌色（阴影 / 边框 / 底纹）会一起跟着变。 */
  --zk-navy-rgb: 64, 115, 255;
  --zk-navy-ghost: rgba(var(--zk-navy-rgb), 0.08);
  --zk-navy-ring: rgba(var(--zk-navy-rgb), 0.14);

  --zk-ink: #101828;
  --zk-text: #344054;
  --zk-text-2: #667085;
  --zk-text-3: #98A2B3;

  --zk-line: #E4E9F0;
  --zk-line-soft: #EDF1F6;

  --zk-bg: #E9EEF6;
  --zk-bg-2: #F5F8FC;
  --zk-card: #FFFFFF;

  /* 直角风格（2026-10-04 用户要求「全改直角」）：圆角刻度整体归零。
     回滚：把这五行改回 6 / 8 / 10 / 14 / 18，并删掉文件末尾第 11 节「全局直角」。 */
  --zk-r-xs: 0;
  --zk-r-sm: 0;
  --zk-r-md: 0;
  --zk-r-lg: 0;
  --zk-r-xl: 0;
  /* 全场圆角总闸：文件末尾第 11 节用它一次性控制所有元素的圆角。
     0 = 直角（当前风格）；「运营后台 → 主题」想换成圆角时只改这一个变量。 */
  --zk-r-all: 0;

  --zk-sh-1: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --zk-sh-2: 0 4px 12px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
  --zk-sh-3: 0 12px 32px rgba(16, 24, 40, 0.12), 0 2px 8px rgba(16, 24, 40, 0.06);

  --zk-font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei",
             "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, sans-serif;
}

/* 系统自带主色跟随品牌色。
   官方主题文件 clientarea/.../theme/default/index.css 把主色写死成深蓝 #1b3b6f，
   选择器是 `:root[theme="default"]`（比 `:root` 优先级高），所以这里用重复的
   `:root` 把优先级提到同级；本文件由插件注入在官方之后加载，同级即胜。
   效果：登录页 / 会员中心 / 购物车里所有 `var(--color-primary)` 的地方
   （官方按钮、开关、分页、对话框等）都会跟着品牌色一起走。 */
:root:root {
  --color-primary: var(--zk-navy);
}

/* --------------------------------------------------------------------------
   1. 基础排版
   -------------------------------------------------------------------------- */
body {
  font-family: var(--zk-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--zk-text);
  background: var(--zk-bg);
}

{ font-family: var(--zk-font); }

/* 滚动条 */
*::-webkit-scrollbar,
.el-aside::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb,
.el-aside::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover,
.el-aside::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.5); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------------------------------------------------
   2. 骨架：侧边栏 / 顶栏 / 主区
   -------------------------------------------------------------------------- */
/* 右侧主区底色 */
.el-container:nth-child(2) {
  background: var(--zk-bg) !important;
}

/* 侧边栏：深海蓝渐变 */
.el-aside {
  background: linear-gradient(180deg, #2A4BA6 0%, var(--zk-navy) 46%, var(--zk-navy-deep) 100%) !important;
  box-shadow: 4px 0 24px rgba(16, 24, 40, 0.10);
  padding: 0 0.1rem !important;
}

.el-aside .line {
  background: rgba(255, 255, 255, 0.16) !important;
  height: 1px !important;
  width: auto !important;
  margin: 0.2rem 0.1rem !important;
  opacity: 1 !important;
  border: 0 !important;
}

/* 侧边菜单容器：原为固定 86px 上边距，收到与留白协调的间距 */
.menu-top { margin-top: 0.22rem !important; }

/* 侧边菜单项：胶囊化。
   ★ 字号 / 高度一律写「固定 px」：原来写的是 0.14rem，会跟着根字号一起缩放 ——
     1920 屏是 14px、1440 屏只剩 10.5px、手机端只剩 7.3px（高度同理，手机端
     只有 21.8px，手指根本点不准）。同一份样式在不同屏幕上字忽大忽小，
     正是这次要消灭的问题。 */
.menu-top .el-menu-item,
.menu-top .el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
  border-radius: var(--zk-r-md) !important;
  margin: 3px 0 !important;
  padding: 0 10px !important;
  font-size: 14px !important;
  transition: background-color .18s ease, color .18s ease;
}
/* element-ui 给「图标 + 文字」之间塞了 20px 外边距。侧栏只有 175px 内宽，
   字号提到 14px 后「DCIM(自定义配置)」「魔方云(自定义配置)」就差 2~6px 被截成
   「DCIM(自定义…」。收到 10px，名字完整显示。 */
.menu-top .aside-menu-text { margin-left: 10px !important; }

.menu-top .el-menu-item:hover,
.menu-top .el-submenu__title:hover {
  background-color: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
.menu-top .el-menu-item:hover i,
.menu-top .el-submenu__title:hover i { color: #fff !important; }

/* 选中态：白色胶囊 */
.menu-top .el-menu-item.is-active {
  background-color: #FFFFFF !important;
  color: var(--zk-navy) !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 16px rgba(8, 20, 44, 0.22);
}
.menu-top .el-menu-item.is-active i { color: var(--zk-navy) !important; }

/* 二级菜单：与一级「同字号」，只靠缩进区分层级。
   （原来一级 0.14rem、二级 0.13rem —— 一级大二级小，是用户点名的问题之一） */
.menu-top .el-menu--inline,
.menu-top .el-submenu .el-menu { background: transparent !important; }
.menu-top .el-submenu .el-menu .el-menu-item {
  min-width: auto !important;
  height: 36px !important;
  line-height: 36px !important;
  padding: 0 10px 0 36px !important;
  font-size: 14px !important;
}

/* 顶栏 */
.el-header {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 1px 0 var(--zk-line), 0 2px 12px rgba(16, 24, 40, 0.04) !important;
  z-index: 20;
}

/* 用户头像/首字母圆点（顶栏只有 40px 高，这里同步收紧） */
.el-header .head-box {
  background: linear-gradient(135deg, var(--zk-navy-soft), var(--zk-navy)) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 8px rgba(var(--zk-navy-rgb), .28);
  min-width: 26px;
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  text-align: center;
}
.el-header .cloum-line { background: var(--zk-line) !important; }

/* 主内容白卡 */
.el-container:nth-child(2) > .el-main {
  background: var(--zk-card) !important;
  border-radius: var(--zk-r-lg) !important;
  box-shadow: var(--zk-sh-2) !important;
  border: 1px solid rgba(228, 233, 240, 0.9);
  margin: 0.28rem !important;
  margin-top: calc(40px + 0.28rem) !important;
  padding: 0.32rem !important;
}

/* 页面标题 */
.main-title,
.main-card-title {
  font-size: 0.27rem !important;
  font-weight: 600 !important;
  color: var(--zk-ink) !important;
  letter-spacing: -0.2px;
  padding-left: 0.14rem !important;
  position: relative;
}
.main-title::before,
.main-card-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.04rem;
  bottom: 0.04rem;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--zk-navy-soft), var(--zk-navy));
}

/* --------------------------------------------------------------------------
   3. Element 通用组件覆盖
   -------------------------------------------------------------------------- */

/* ---- 按钮 ---- */
.el-button {
  border-radius: var(--zk-r-sm) !important;
  font-family: var(--zk-font) !important;
  font-weight: 500 !important;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.el-button:not(.is-disabled):hover { transform: translateY(-1px); }
.el-button:not(.is-disabled):active { transform: translateY(0); }
.el-button [class^="el-icon-"] + span { margin-left: 4px; }

.el-button--primary {
  background: linear-gradient(135deg, #628CFF 0%, var(--zk-navy) 55%, #1D3473 100%) !important;
  border-color: var(--zk-navy) !important;
  box-shadow: 0 4px 12px rgba(var(--zk-navy-rgb), 0.24) !important;
  color: #fff !important;
}
.el-button--primary:not(.is-disabled):hover,
.el-button--primary:not(.is-disabled):focus {
  background: linear-gradient(135deg, #6A92FF 0%, #263FA0 55%, #325AC7 100%) !important;
  border-color: #1D3473 !important;
  box-shadow: 0 8px 20px rgba(var(--zk-navy-rgb), 0.30) !important;
  color: #fff !important;
}
.el-button--primary.is-plain {
  background: var(--zk-bg-2) !important;
  color: var(--zk-navy) !important;
  border-color: #C7D5E8 !important;
  box-shadow: none !important;
}

.el-button--default {
  background: #fff !important;
  border-color: var(--zk-line) !important;
  color: var(--zk-text) !important;
}
.el-button--default:not(.is-disabled):hover {
  border-color: #B9C7DC !important;
  color: var(--zk-navy) !important;
  background: #FBFCFF !important;
}

.el-button--text { color: var(--zk-navy) !important; }
.el-button--text:not(.is-disabled):hover {
  color: var(--zk-navy-soft) !important;
  background: var(--zk-navy-ghost) !important;
  border-radius: var(--zk-r-xs);
}

.el-button.is-round { border-radius: 0 !important; }
.el-button--small { border-radius: var(--zk-r-xs) !important; }
.el-button-group > .el-button:first-child { border-radius: var(--zk-r-sm) 0 0 var(--zk-r-sm) !important; }
.el-button-group > .el-button:last-child { border-radius: 0 var(--zk-r-sm) var(--zk-r-sm) 0 !important; }

/* ---- 输入 / 选择 ---- */
.el-input__inner,
.el-textarea__inner {
  border-radius: var(--zk-r-sm) !important;
  border-color: var(--zk-line) !important;
  color: var(--zk-ink) !important;
  font-family: var(--zk-font) !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.el-input__inner:hover,
.el-textarea__inner:hover { border-color: #C4D1E3 !important; }
.el-input__inner:focus,
.el-textarea__inner:focus {
  border-color: var(--zk-navy) !important;
  box-shadow: 0 0 0 3px var(--zk-navy-ring) !important;
}
.el-input.is-disabled .el-input__inner { background: var(--zk-bg-2) !important; }
.el-input__prefix,
.el-input__suffix { color: var(--zk-text-3) !important; }

.el-input-group__prepend,
.el-input-group__append {
  background: var(--zk-bg-2) !important;
  border-color: var(--zk-line) !important;
  border-radius: var(--zk-r-sm) !important;
  color: var(--zk-text-2) !important;
}

.el-input-number__decrease,
.el-input-number__increase {
  background: var(--zk-bg-2) !important;
  border-color: var(--zk-line) !important;
  color: var(--zk-text-2) !important;
}
.el-input-number__decrease:hover,
.el-input-number__increase:hover { color: var(--zk-navy) !important; }

/* 表单 */
.el-form-item__label { color: var(--zk-text) !important; font-weight: 500 !important; }
.el-form-item.is-error .el-input__inner { border-color: #E5484D !important; }

/* ---- 下拉 / 浮层 ---- */
.el-select-dropdown,
.el-dropdown-menu,
.el-autocomplete-suggestion,
.el-picker-panel,
.el-popover {
  border-radius: var(--zk-r-md) !important;
  border: 1px solid var(--zk-line) !important;
  box-shadow: var(--zk-sh-3) !important;
  overflow: hidden;
}
.el-select-dropdown__item.selected { color: var(--zk-navy) !important; font-weight: 600 !important; }
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover { background: var(--zk-bg-2) !important; }
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
  background: var(--zk-bg-2) !important;
  color: var(--zk-navy) !important;
}
.el-dropdown-menu__item { font-family: var(--zk-font) !important; }
.el-tooltip__popper.is-dark { background: #1B2C45 !important; border-color: #1B2C45 !important; }

/* ---- 表格 ---- */
.el-table {
  border-radius: var(--zk-r-md);
  color: var(--zk-text);
}
.el-table th.el-table__cell {
  background-color: var(--zk-bg-2) !important;
  color: #55637A !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--zk-line) !important;
}
.el-table td.el-table__cell { border-bottom: 1px solid var(--zk-line-soft) !important; }
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: #F7FAFE !important;
}
.el-table::before,
.el-table::after { background-color: var(--zk-line) !important; }
.el-table--border,
.el-table--border th,
.el-table--border td { border-color: var(--zk-line) !important; }
.el-table__empty-text { color: var(--zk-text-2) !important; }

/* 原生表格（购物车/结算 goods-table） */
.goods-table thead th {
  background: var(--zk-bg-2) !important;
  color: #55637A !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--zk-line) !important;
}
.goods-table tbody td { border-bottom: 1px solid var(--zk-line-soft) !important; }
.goods-table tbody tr:hover td { background: #F7FAFE !important; }

/* ---- 分页 ---- */
.el-pagination {
  font-family: var(--zk-font) !important;
  font-weight: 400 !important;
}
.el-pagination button,
.el-pager li {
  border-radius: var(--zk-r-xs) !important;
  background: #fff !important;
  border: 1px solid var(--zk-line) !important;
  min-width: 0.32rem !important;
  height: 0.32rem !important;
  line-height: 0.3rem !important;
  margin-right: 0.06rem !important;
  color: var(--zk-text-2) !important;
  font-size: 0.13rem !important;
  transition: all .16s ease;
}
.el-pager li:hover { color: var(--zk-navy) !important; border-color: #B9C7DC !important; }
.el-pager li.active,
.el-pager li.active:hover {
  background: var(--zk-navy) !important;
  border-color: var(--zk-navy) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(var(--zk-navy-rgb), .24);
}
.el-pager li.active + li { border-left: 1px solid var(--zk-line) !important; }

/* ---- 标签 / 徽标 ---- */
.el-tag {
  border-radius: 0 !important;
  border: none !important;
  font-family: var(--zk-font) !important;
  font-weight: 500 !important;
  padding: 0 10px !important;
}
.el-tag--success { background: #E7F6EF !important; color: #067647 !important; }
.el-tag--danger { background: #FDECEC !important; color: #B42318 !important; }
.el-tag--warning { background: #FEF3E2 !important; color: #B54708 !important; }
.el-tag--info { background: #EEF2F7 !important; color: #475467 !important; }
.el-tag--primary,
.el-tag:not([class*="el-tag--"]) { background: rgba(var(--zk-navy-rgb), .08) !important; color: var(--zk-navy) !important; }
.el-badge__content {
  border-radius: 0 !important;
  border: none !important;
  background: #E5484D !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 6px rgba(229, 72, 77, .35);
}

/* ---- 弹窗 ---- */
.el-dialog {
  border-radius: var(--zk-r-lg) !important;
  overflow: hidden;
  box-shadow: var(--zk-sh-3) !important;
}
.el-dialog__header {
  padding: 20px 24px 16px !important;
  border-bottom: 1px solid var(--zk-line-soft) !important;
}
.el-dialog__title {
  font-family: var(--zk-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--zk-ink) !important;
}
.el-dialog__headerbtn .el-dialog__close { color: var(--zk-text-3) !important; }
.el-dialog__headerbtn:hover .el-dialog__close { color: var(--zk-navy) !important; }
.el-dialog__body { padding: 22px 24px !important; color: var(--zk-text) !important; }
.el-dialog__footer { padding: 0 24px 22px !important; }

.el-message-box {
  border-radius: var(--zk-r-lg) !important;
  border: none !important;
  box-shadow: var(--zk-sh-3) !important;
  font-family: var(--zk-font) !important;
}
.el-message-box__title { font-weight: 600 !important; color: var(--zk-ink) !important; }
.el-message-box__btns .el-button { border-radius: var(--zk-r-sm) !important; }
.el-message-box__btns .el-button--primary {
  background: linear-gradient(135deg, #628CFF, var(--zk-navy)) !important;
  border-color: var(--zk-navy) !important;
}

.el-drawer { box-shadow: var(--zk-sh-3) !important; }

/* --------------------------------------------------------------------------
   窗口统一字号：弹窗 / 消息框 / 抽屉 / 下拉 / 浮层
   --------------------------------------------------------------------------
   一个「窗口」里只允许三档字号：
     · 标题 16px     （.el-dialog__title / .title-text / .el-message-box__title）
     · 正文与控件 13px（正文、表单标签、输入框、按钮、下拉项、勾选文字）
     · 金额大字 18px （弹窗里唯一允许比正文大的内容）
   配套约定：菜单类（侧栏 / 抽屉 / 分类树 / 顶栏下拉）一律 14px，见上面的菜单段落。
   为什么需要这一节：面板里的文字来自四处 —— element-ui 默认值、官方模板的 rem、
   各插件自己的 CSS、本皮肤 —— 同一个弹窗里同时出现 10.5 / 12 / 14 / 16 四种字号
   是常态（实测「充值」弹窗里标题 12px、按钮 14px，层级正好反过来）。
   统一写死 px，并用 !important 保证压过那些按 rem 写的规则。
   -------------------------------------------------------------------------- */
.el-dialog__body,
.el-message-box__content,
.el-message-box__message,
.el-message-box__message p,
.el-drawer__body,
.el-select-dropdown,
.el-autocomplete-suggestion,
.el-popover {
  font-size: 13px !important;
}
/* 顶栏下拉（账户信息 / 退出登录 / 语言）属于「菜单」，与侧栏菜单同号 14px —— */

.el-dialog__body .el-form-item__label,
.el-dialog__body .el-input__inner,
.el-dialog__body .el-textarea__inner,
.el-dialog__body .el-button,
.el-dialog__body .el-radio__label,
.el-dialog__body .el-checkbox__label,
.el-dialog__body .el-tag,
.el-dialog__body .el-table,
.el-dialog__body .el-table th,
.el-dialog__body .el-table td,
.el-dialog__footer .el-button,
.el-message-box__message,
.el-message-box__message p,
.el-message-box__btns .el-button,
.el-drawer .el-button,
.el-drawer .el-input__inner,
.el-drawer .el-form-item__label,
.el-select-dropdown__item,
.el-dropdown-menu__item,
.el-popover .el-button,
.el-popover .el-input__inner,
.el-popover .el-form-item__label {
  font-size: 13px !important;
}
.el-dropdown-menu,
.el-dropdown-menu__item { font-size: 14px !important; }
/* 标题：全站窗口标题统一 16px，比正文正好大一档。
   官方那批自定义弹窗（充值 / 支付 / 选币 / 安全 / 续费 …）的标题用的是
   .title-text（0.16rem）—— 1440 屏只剩 12px，比弹窗里的按钮（14px）还小，
   层级整个反过来，这里一并拉平。 */
.el-dialog__title,
.el-message-box__title,
.el-dialog .title-text,
.el-dialog .close-btn,
.el-dialog .dialog-title,
.el-dialog .tips-title,
.el-dialog .custom-text-title,
.el-dialog .active-title,
.el-dialog .com-tit { font-size: 16px !important; }

/* 金额 / 大数字：弹窗里唯一允许比正文大的内容，统一 18px */
.el-dialog .pay-money,
.el-dialog .qr-money,
.el-dialog .total-price,
.el-dialog .font-26,
.el-dialog .f-20,
.el-dialog .f-32,
.el-dialog .f-40,
.el-dialog [class*="money"],
.el-dialog [class*="price"] { font-size: 18px !important; }

/* 弹窗底部的大按钮（支付 / 确认）：15px，比正文大一档但不当成大标题 */
.el-dialog .def-btn,
.el-dialog .cancel-btn { font-size: 15px !important; }

/* 兜底：「弹窗正文」里凡是没被上面点名的文字，一律 13px。
   官方 + 插件在这块写了一堆零碎值（0.1 / 0.12 / 0.13 / 0.14 / 0.15 / 0.16rem），
   1440 屏折成 7.5~12px、手机上折成 6.2~8.3px，逐个点名改不完，用排除法兜底。
   只排除三类：图标、标题、金额大字（再往下细分的层级交给颜色和字重）。 */
.el-dialog__body *:not(i):not(.el-icon):not([class*="icon"]):not(.title-text):not(.close-btn):not(.dialog-title):not(.tips-title):not(.custom-text-title):not(.active-title):not(.pay-money):not(.qr-money):not(.total-price):not(.font-26):not(.f-20):not(.f-32):not(.f-40):not(.def-btn):not(.cancel-btn):not([class*="money"]):not([class*="price"]) {
  font-size: 13px !important;
}
.el-message-box__message *:not(i):not(.el-icon):not([class*="icon"]) {
  font-size: 13px !important;
}
/* ⚠️ 抽屉里不要用「所有子孙」兜底 —— 前台唯一的 .el-drawer 就是手机端菜单抽屉，
   一条 `.el-drawer__body *` 会把菜单项自己的 14px 压成 13px（实测踩过）。
   抽屉正文只设继承值，菜单字号交给上面的 .menu-top 规则。 */
.el-drawer__body { font-size: 13px !important; }
/* 弹窗底部按钮区同样兜底：官方给这批按钮的 <span> 单独写了 0.16rem，
   光改 .el-button 压不住（实测「确认 / 取消」仍是 12px、其它弹窗 10.5px）。 */
.el-dialog__footer *:not(i):not(.el-icon):not([class*="icon"]):not(.def-btn):not(.cancel-btn),
.el-message-box__btns *:not(i):not(.el-icon):not([class*="icon"]) {
  font-size: 13px !important;
}

.el-message {
  border-radius: var(--zk-r-md) !important;
  border: 1px solid var(--zk-line) !important;
  box-shadow: var(--zk-sh-2) !important;
  font-family: var(--zk-font) !important;
}
.el-notification {
  border-radius: var(--zk-r-md) !important;
  border: 1px solid var(--zk-line) !important;
  box-shadow: var(--zk-sh-3) !important;
  font-family: var(--zk-font) !important;
}
.el-notification__title { color: var(--zk-ink) !important; }

/* ---- Tab ---- */
/* 字号统一 14px（与菜单同号）。插件给配置页的 Tab 写的是 0.18rem / 0.14rem，
   1440 屏变成 13.5 / 10.5px、手机上 9.4 / 7.3px —— 同一个页面里两种 Tab 字号。 */
.el-tabs__item {
  font-family: var(--zk-font) !important;
  font-size: 14px !important;
  color: var(--zk-text-2) !important;
  font-weight: 500 !important;
}
.el-tabs__item.is-active { color: var(--zk-navy) !important; font-weight: 600 !important; }
.el-tabs__item:hover { color: var(--zk-navy-soft) !important; }
.el-tabs__active-bar { background-color: var(--zk-navy) !important; height: 2.5px !important; border-radius: 0 !important; }
.el-tabs__nav-wrap::after { background-color: var(--zk-line) !important; }

/* ---- 复选框 / 单选框 / 开关 ---- */
.el-checkbox__inner,
.el-radio__inner {
  border-color: #C4D1E3 !important;
  border-radius: 0 !important;
}
.el-radio__inner { border-radius: 50% !important; }
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner {
  background-color: var(--zk-navy) !important;
  border-color: var(--zk-navy) !important;
}
.el-checkbox__input.is-checked + .el-checkbox__label,
.el-radio__input.is-checked + .el-radio__label { color: var(--zk-navy) !important; }
.el-checkbox__label { color: var(--zk-text) !important; font-family: var(--zk-font) !important; }

.el-switch.is-checked .el-switch__core {
  background-color: var(--zk-navy) !important;
  border-color: var(--zk-navy) !important;
}

/* ---- 其它 ---- */
.el-link.el-link--primary { color: var(--zk-navy) !important; }
.el-link.el-link--primary:hover { color: var(--zk-navy-soft) !important; }

.el-card {
  border-radius: var(--zk-r-lg) !important;
  border-color: var(--zk-line) !important;
  box-shadow: var(--zk-sh-1) !important;
}
.el-card__header { border-bottom: 1px solid var(--zk-line-soft) !important; }

.el-alert { border-radius: var(--zk-r-md) !important; }
.el-alert--info.is-light { background: #EEF4FC !important; color: var(--zk-navy) !important; }
.el-alert--warning.is-light { background: #FEF6E7 !important; color: #B54708 !important; }
.el-alert--error.is-light { background: #FDECEC !important; color: #B42318 !important; }
.el-alert--success.is-light { background: #E7F6EF !important; color: #067647 !important; }

.el-step__head.is-finish,
.el-step__head.is-process { color: var(--zk-navy) !important; border-color: var(--zk-navy) !important; }
.el-step__head.is-process .el-step__icon { background: var(--zk-navy) !important; color: #fff !important; }
.el-step__title.is-process { font-weight: 600 !important; color: var(--zk-ink) !important; }

.el-empty__description p { color: var(--zk-text-3) !important; }

.el-divider { background-color: var(--zk-line) !important; }

.el-loading-mask { background-color: rgba(255, 255, 255, 0.72) !important; }
.el-loading-spinner .path { stroke: var(--zk-navy) !important; }

/* 首屏那 5 根竖条的加载动画：官方把它写死成固定的主题色（--color-primary），
   后台改了配色它不跟着变，跟页面主色对不上。这里让它跟随当前配色。 */
#mainLoading .ddr { background-color: var(--zk-navy) !important; }

.el-collapse-item__header { font-family: var(--zk-font) !important; font-weight: 500 !important; color: var(--zk-ink) !important; }

/* --------------------------------------------------------------------------
   4. 购物车 / 订购 专属
   -------------------------------------------------------------------------- */
/* 搜索 / 筛选条（仅会员中心的通用搜索条；购物车 .search-box 是右对齐的轻量输入，不动容器） */
.com-search,
.searchbar,
.content_searchbar,
.balance-searchbar {
  background: var(--zk-bg-2) !important;
  border: 1px solid var(--zk-line) !important;
  border-radius: var(--zk-r-md) !important;
  padding: 0.12rem 0.14rem !important;
  box-shadow: none !important;
}
.com-search .el-input__inner,
.searchbar .el-input__inner { background: #fff !important; }
.search-btn,
.search-button {
  border-radius: var(--zk-r-sm) !important;
  background: linear-gradient(135deg, #628CFF, var(--zk-navy)) !important;
  border-color: var(--zk-navy) !important;
  color: #fff !important;
}

/* 商品分组卡 */
.shopping-goods {
  border: 1px solid var(--zk-line) !important;
  border-radius: var(--zk-r-lg) !important;
  box-shadow: var(--zk-sh-1) !important;
  overflow: hidden;
  margin-bottom: 0.16rem !important;
  transition: box-shadow .2s ease;
}
.shopping-goods:hover { box-shadow: var(--zk-sh-2) !important; }

.shopping-goods .table-name {
  background: linear-gradient(180deg, #FBFCFE, var(--zk-bg-2)) !important;
  border-bottom: 1px solid var(--zk-line) !important;
  padding: 0.12rem 0.16rem !important;
}
.table-name .goods-name {
  font-weight: 600 !important;
  color: var(--zk-ink) !important;
}

.goods-table thead th { padding: 0.11rem 0.14rem !important; }
.goods-table tbody td { padding: 0.14rem !important; }

.goods-info { line-height: 1.9 !important; }
.goodsInfo-type { color: var(--zk-text-2) !important; }
.goodsInfo-val { color: var(--zk-ink) !important; font-weight: 500; }
.goodsInfo-price { color: var(--zk-text-2) !important; }

.item-price .price,
.item-total span:first-child,
.total-price {
  color: #E5484D !important;
  font-weight: 700 !important;
}
.total-price { letter-spacing: -0.5px; }
.original-price { color: var(--zk-text-3) !important; text-decoration: line-through; }
.discount-codeNumber {
  border-radius: var(--zk-r-xs) !important;
  background: #E7F6EF !important;
  color: #067647 !important;
  padding: 2px 8px !important;
  display: inline-block;
  font-size: 12px;
}

/* 结算底部条 */
.el-footer {
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--zk-line) !important;
  box-shadow: 0 -4px 20px rgba(16, 24, 40, 0.06);
  border-radius: var(--zk-r-lg) !important;
  margin: 0 0.28rem 0.28rem !important;
}
.btn-box .buy-btn {
  border-radius: var(--zk-r-md) !important;
  box-shadow: 0 6px 16px rgba(var(--zk-navy-rgb), 0.26) !important;
  letter-spacing: .5px;
}
.check-box { color: var(--zk-text-2) !important; }
.bule-text { color: var(--zk-navy) !important; }

/* --------------------------------------------------------------------------
   5. 卡片 / 列表通用小件
   -------------------------------------------------------------------------- */
.content-box,
.content_table,
.content_tab,
.finance-balance,
.balance-left,
.balance-right {
  border-radius: var(--zk-r-lg) !important;
}

.finance-balance,
.balance-left,
.box-top,
.box-item,
.content_table,
.content_tab,
.tabledata,
.credit-top {
  border-color: var(--zk-line) !important;
  box-shadow: var(--zk-sh-1) !important;
}

.balance-left-num,
.balance-title-num,
.now-price,
.price-new {
  color: var(--zk-navy) !important;
  font-weight: 700 !important;
}
.price-blue,
.blue-a-text,
.base-color { color: var(--zk-navy) !important; }

.balance-tag,
.goods-tag,
.tag-item { border-radius: 0 !important; }

/* 悬浮/回到顶部等浮层 */
.side-floating-window,
.back-top-img { border-radius: var(--zk-r-md) !important; box-shadow: var(--zk-sh-2) !important; }

/* 移动端抽屉菜单 */
.drawer-menu { background: linear-gradient(180deg, #2A4BA6, var(--zk-navy-deep)) !important; }
.drawer-menu .el-menu-item,
.drawer-menu .el-submenu__title { border-radius: var(--zk-r-md) !important; }

/* --------------------------------------------------------------------------
   6. 响应式微调
   -------------------------------------------------------------------------- */
@media (max-width: 1366px) {
  /* margin 简写会把 margin-top 一起冲掉 —— 而 margin-top 里含着 40px 顶栏高度，
     丢了它白卡会钻到固定顶栏下面（实测 1366 下卡片 y=14，顶栏占 0~40）。
     所以这里必须把 margin-top 单独再声明一次。 */
  .el-container:nth-child(2) > .el-main {
    margin: 0.2rem !important;
    margin-top: calc(40px + 0.2rem) !important;
  }
}

/* --------------------------------------------------------------------------
   Element 固定列：去掉侧边阴影与分隔线，避免表格里出现竖向"裂缝"
   -------------------------------------------------------------------------- */
.el-table__fixed-right,
.el-table__fixed { box-shadow: none !important; }
.el-table__fixed-right::before,
.el-table__fixed::before,
.el-table__fixed-right-patch { display: none !important; }

/* --------------------------------------------------------------------------
   7. 手机端（≤750px，与官方断点一致）
   --------------------------------------------------------------------------
   窄屏下根字号切成 屏幕宽 / 7.5（390px ⇒ 1rem = 52px），所以这里不再用 rem，
   一律写 px，避免尺寸随屏幕宽度乱跳。
   官方的 750 断点把 .el-header 高度改成 1rem、.el-main padding-top 1.66rem；
   本文件第 2 节用 margin-top 顶开顶栏，这里同步改成跟着 .el-header 的真实高度走，
   否则卡片会被固定顶栏压住几个像素。
   -------------------------------------------------------------------------- */
@media (max-width: 750px) {
  .el-container:nth-child(2) > .el-main {
    margin: 10px !important;
    margin-top: calc(1rem + 10px) !important;
    padding: 14px !important;
    padding-bottom: 20px !important;
    border-radius: 0 !important;
  }

  /* 顶栏圆点：官方移动端是 0.56rem，这里同步放大一点 */
  .el-header .head-box {
    min-width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 13px !important;
  }

  /* 页面标题：固定 px，别跟着屏幕变 */
  .main-title,
  .main-card-title { font-size: 17px !important; }
  .main-title::before,
  .main-card-title::before { top: 3px; bottom: 3px; }

  /* 底部结算条兜底（购物车/结算页的细化规则在 cart 的 skin.css 第十节） */
  .el-footer {
    margin: 0 10px 10px !important;
    border-radius: 0 !important;
  }
}

/* ==========================================================================
   7. 手机端（≤750px）· 会员中心列表页打磨
   --------------------------------------------------------------------------
   390×844 实测发现的问题：
   ① 财务页「订单类型」筛选条（.content_searchbar .left_tips）是 flex 且
      flex-wrap:nowrap，5 个筛选项在 307px 里被压到每个只剩 23px 宽 ⇒
      文字一个字一行竖着排，整块高 255px，「批量删除」按钮也被挤在里面。
   ② 安全页「创建 API」条（.content_searchbar > .left-btn）同样被挤扁，
      右侧搜索框只剩一个细条。
   ③ 财务页余额卡：「¥0.00」和「充值 / 提现」抢空间，金额被压到换行。
   ④ 已订购页搜索行 .right-search 宽 396px、起点 x=128 ⇒ 搜索按钮跑出屏幕。
   ⑤ mini 按钮 / 分页按钮只有 17~26px 高，手指点不准。
   ⑥ 账单、安全等页 el-table 总宽 1200~1350px。body-wrapper 本身是
      overflow:auto（可横滑，实测 sw 1350 / cw 315），这里只做三件事：
      压缩单元格内边距让一屏能多看到一列、给固定列加浮起阴影、把格内
      按钮和链接撑到能点的尺寸。**不改表格结构**。
   注意：本文件在购物车页也会加载（共用 header），所以表格类规则统一用
        .main-card 限定 —— 购物车配置页的表格在 .main-content-box 里，不在
        .main-card 里，不会被误伤（.f-order 底栏那个 .main-card 里没有表格）。
   ========================================================================== */
@media (max-width: 750px) {

  /* ---------- ① 筛选条不再竖排 ---------- */
  .content_searchbar {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    height: auto !important;
  }
  .content_searchbar .left_tips {
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    font-size: 13px !important;
  }
  .content_searchbar .left_tips .tips_item {
    flex: 0 0 auto !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  .content_searchbar .left_tips .tips_item > span,
  .content_searchbar .left_tips .tips_item > label,
  .content_searchbar .left_tips .tips_item .el-checkbox__label,
  .content_searchbar .left_tips .tips_item .el-radio__label,
  .content_searchbar .left_tips > span { white-space: nowrap !important; }
  /* 筛选条里的按钮别被压扁 */
  .content_searchbar .left_tips .all-pay,
  .content_searchbar .left_tips .all-del,
  .content_searchbar .left_tips .el-button,
  .content_searchbar .left-btn,
  .content_searchbar > .el-button {
    flex: 0 0 auto !important;
    min-height: 36px !important;
    height: auto !important;
    line-height: 36px !important;
    white-space: nowrap !important;
  }
  /* 搜索区独占一行，不再和左侧按钮抢宽度 */
  .content_searchbar > .el-input,
  .content_searchbar > .searchbar,
  .content_searchbar > .right-search,
  .content_searchbar > .el-select,
  .content_searchbar > .mob-searchbar {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .content_searchbar > .el-input .el-input__inner,
  .content_searchbar > .searchbar .el-input,
  .content_searchbar > .searchbar .el-input__inner { width: 100% !important; margin-left: 0 !important; }

  /* 搜索条里的空壳子：安全页的 .searchbar.com-search 在没有输入框时
     只剩一条 14px 高的细线，看着像多余的横线，直接收起来。
     真出现输入框时（:has 不成立）照常显示。 */
  .content_searchbar .searchbar.com-search:not(:has(.el-input)) { display: none !important; }

  /* ---------- ② 余额卡改竖排 ---------- */
  .finance-balance {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    height: auto !important;
    padding: 14px !important;
  }
  .finance-balance .balance-left { width: 100% !important; height: auto !important; }
  .finance-balance .balance-right {
    width: 100% !important;
    height: auto !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }
  .finance-balance .el-button { min-height: 38px !important; }
  /* 余额数字 24 → 18（原来是页面里最大的字，比标题大 7px，过于抢眼） */
  .balance-left-num,
  .balance-title-num { font-size: 18px !important; line-height: 1.3 !important; }
  .balance-left-title { font-size: 13px !important; }

  /* ---------- ③ 已订购页搜索行换行 ---------- */
  .main-card-search {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    height: auto !important;
  }
  .main-card-search .right-search,
  .right-search {
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-left: 0 !important;
    gap: 8px !important;
  }
  .right-search .el-select,
  .right-search .el-input { flex: 1 1 100% !important; width: 100% !important; }
  .right-search .el-select .el-input,
  .right-search .el-input,
  .right-search .el-select .el-input__inner,
  .right-search .el-input__inner { width: 100% !important; margin-left: 0 !important; }
  .right-search .search-btn { flex: 1 1 100% !important; width: 100% !important; height: 40px !important; }

  /* ---------- ④ 列表页表格：一屏多看点、格内可点 ---------- */
  .main-card .el-table { font-size: 13px !important; }
  .main-card .el-table .cell {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }
  .main-card .el-table .el-table__header th.el-table__cell {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .main-card .el-table .el-table__body td.el-table__cell {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  /* 横向滑动更顺滑；固定列加浮起阴影，滑到哪儿一目了然 */
  .main-card .el-table__body-wrapper { -webkit-overflow-scrolling: touch; }
  /* 细滚动条：明示「右边还有列」。el-table 本身会把滚动条藏掉，这里强制显示 */
  .main-card .el-table__body-wrapper {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--zk-navy-rgb), .3) transparent;
  }
  .main-card .el-table__body-wrapper::-webkit-scrollbar { height: 5px !important; width: 0 !important; }
  .main-card .el-table__body-wrapper::-webkit-scrollbar-track { background: transparent !important; }
  .main-card .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background: rgba(var(--zk-navy-rgb), .3) !important;
    border-radius: 0 !important;
  }
  .main-card .el-table__fixed-right { box-shadow: -6px 0 12px rgba(16, 24, 40, .06) !important; }
  .main-card .el-table__fixed { box-shadow: 6px 0 12px rgba(16, 24, 40, .06) !important; }
  .main-card .el-table__fixed-right::before,
  .main-card .el-table__fixed::before { display: none !important; }
  /* 格内按钮 / 链接撑到能点 */
  .main-card .el-table .el-button { min-height: 34px !important; padding: 0 12px !important; }
  .main-card .el-table .el-button--mini,
  .main-card .el-table .el-button--small { min-height: 32px !important; padding: 0 10px !important; }
  .main-card .el-table .el-link,
  .main-card .el-table .a-text,
  .main-card .el-table .blue-a-text,
  .main-card .el-table .setting {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 32px !important;
  }

  /* ---------- ⑤ 通用触点放大 ---------- */
  .el-button { min-height: 36px !important; }
  .el-button--mini,
  .el-button--small { min-height: 32px !important; padding-left: 10px !important; padding-right: 10px !important; }
  .el-pagination .btn-prev,
  .el-pagination .btn-next { min-width: 36px !important; height: 36px !important; }
  .el-pagination .el-pager li { min-width: 32px !important; height: 34px !important; line-height: 34px !important; }
  .el-pagination .el-input__inner { height: 34px !important; width: 54px !important; }
  .el-checkbox { display: inline-flex !important; align-items: center !important; min-height: 32px !important; }

  /* ---------- ⑥ 弹窗不超出屏幕 ---------- */
  .el-dialog { width: 92% !important; max-width: 92vw !important; margin-top: 10vh !important; }
  .el-message-box { width: 88% !important; }
}

/* ==========================================================================
   8. 手机端（≤750px）· 会员中心「字号兜底」
   --------------------------------------------------------------------------
   现象：首页的问候语、余额卡、统计卡，财务页标题，工单页按钮，资源页卡片标题
        这些文字在手机上只有 6~8px，几乎看不清。
   原因：这些页面的样式是按桌面基准写的（1920 下 1rem = 100px，0.16rem = 16px），
        但窄屏下根字号被切成 屏幕宽 / 7.5（390 ⇒ 52px），同一个 0.16rem 只剩
        8.3px —— 相当于整页字体被腰斩。
   处理：把这些已知的小字统一改成固定 px，不再跟着根字号变。
   注意：这里的每个选择器都带了足够具体的限定（.main-card / .el-pane /
        .content_searchbar / .transfer 等），不写裸的 .title、.des 这类通用类名，
        避免误伤其它页面里本来就正常的同名元素。
   ========================================================================== */
@media (max-width: 750px) {

  /* 首页 · 顶部问候语 */
  .main-card .hello { font-size: 16px !important; }

  /* 首页 · 账号信息条 */
  .main-card .id-text,
  .main-card .phone-number,
  .main-card .left-type { font-size: 12px !important; }
  .main-card .company-name,
  .main-card .bule-text { font-size: 13px !important; }

  /* 首页 · 余额 / 统计卡 */
  .main-card .credit-btn { font-size: 13px !important; }
  .main-card .credit-name { font-size: 12px !important; }
  .main-card .notice-btn { font-size: 12px !important; }
  .main-card .order-title { font-size: 12px !important; }
  .main-card .statistics-item-name { font-size: 12px !important; }
  .main-card .statistics-item-value { font-size: 13px !important; }
  .main-card .statistics-item-value .s-12 { font-size: 12px !important; }

  /* 首页 · 产品列表小标题 / 空态 / 推介提示 */
  .main-card .product-list-box .title-text { font-size: 15px !important; }
  .main-card .product-list-box .no-product p { font-size: 13px !important; }
  .main-card .recommend-box .recommend-text { font-size: 13px !important; }

  /* 首页 · 公告列表 */
  .main-card .notice-box .notice-time { font-size: 12px !important; }
  .main-card .notice-box .notice-title { font-size: 14px !important; }
  .main-card .notice-box .notice-type { font-size: 12px !important; }

  /* 财务页标题 */
  .finance-title { font-size: 17px !important; }
  .finance-top .finance-title::before { top: 3px; bottom: 3px; }

  /* 搜索条左侧主按钮（安全页「创建 API」、工单页「新建工单」） */
  .content_searchbar > .left-btn,
  .content_searchbar > .left-btn span,
  .content_searchbar .new-ticket-btn { font-size: 14px !important; }

  /* 分页页码：官方按桌面基准写的 0.13rem，窄屏只剩 6.8px。
     这几条原生规则都带 !important（common.css:385 起），所以要写得一样具体
     才能压过 —— 本文件加载在其后，同权重按顺序取胜。 */
  .main-card .el-pagination,
  .tabledata .el-pagination,
  .el-pagination .el-pager li,
  .el-pagination button,
  .myPage .el-pagination .el-pager li,
  .myPage .el-pagination .el-pagination__jump,
  .myPage .el-pagination .page-total { font-size: 13px !important; }

  /* 资源页（插件 21）卡片列表 */
  .com-r-box .total { font-size: 13px !important; }
  .com-r-box .total .tag,
  .com-r-box .file_folder .tag { font-size: 11px !important; line-height: 1.3 !important; padding: 1px 6px !important; }
  .com-l-box .news-list .item-right .title { font-size: 14px !important; line-height: 1.45 !important; }
  .com-l-box .news-list .item-right .info { font-size: 12px !important; }

  /* 跳转提示页 */
  .transfer .info .des { font-size: 14px !important; line-height: 1.6 !important; }
  .transfer .info .link { font-size: 14px !important; }
  .transfer .info .btn { font-size: 15px !important; }

  /* ---------- 字号放大后，把被固定高度卡住的容器放开 ---------- */
  /* 问候语原来 height = 0.237rem（窄屏只剩 12px）且 overflow:hidden，
     字一放大就被横着切一半。容器跟着内容长高即可。 */
  .main-card .info-first,
  .main-card .info-first .name-box,
  .main-card .hello {
    height: auto !important;
    min-height: 0 !important;
  }
  .main-card .hello {
    overflow: visible !important;
    line-height: 1.35 !important;
  }
  .main-card .info-first { align-items: center !important; gap: 10px !important; }

  /* 统计条（本月消费 / 总消费）：两项并排时每项只有 147px，
     名称 107px 撑成两行、金额 36px 把「¥0.00」掰成两行。
     改成上下排——名称一行、金额一行，左右两项各占一半宽。 */
  .main-card .statistics-bottom {
    flex-wrap: wrap !important;
    height: auto !important;
    row-gap: 10px !important;
    margin-top: 14px !important;
  }
  .main-card .statistics-bottom .statistics-item {
    flex: 1 1 46% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 3px !important;
    width: auto !important;
    height: auto !important;
  }
  .main-card .statistics-bottom .statistics-item-divider { display: none !important; }
  .main-card .statistics-bottom .statistics-item-name,
  .main-card .statistics-bottom .statistics-item-value {
    width: 100% !important;
    height: auto !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   9. 手机端（≤750px）· 会员中心宽表格改卡片
   --------------------------------------------------------------------------
   现象：财务页账单表总宽 1350px、安全页 API 表 1200px，而可视区只有 315~340px，
        右边「金额 / 状态 / 操作」全在屏幕外；element-ui 的表头是独立层，
        横滑时表头不跟动，很难对上列。
   处理：改成卡片 —— 表头整层隐藏（文字由 js/common/mobile-table.js 写进每格的
        data-zk-label，多语言安全），一行 = 一张卡，一格 = 一行「列名 …… 值」，
        勾选框抽到卡片右上角。
   注意：① 作用域是 .zk-mt —— 这个类由 js/common/mobile-table.js 在「成功把表头文字
          写进每格」之后才加到 .el-table 根节点上。用它而不是 .tabledata，是因为
          /productList.htm 的表格外面没有 .tabledata 外壳（结构是 .main-card > .table
          > .el-table），只写 .tabledata 那一页就漏了。改用 JS 打标后，凡是脚本认得
          的数据表都会自动卡片化，也不会误伤 cart 配置页插件渲染的机型选择表
          （那张表在 .config-box 里，脚本主动排除）。
        ② element-ui 用了固定列时会把固定列复制一份到 .el-table__fixed(-right)，
           必须整层隐藏，否则卡片里会出现重复内容；主表体本身含全部列，隐藏无碍。
   ========================================================================== */
@media (max-width: 750px) {

  /* ---------- 容器：不再横滑，高度自适应 ---------- */
  .el-table.zk-mt,
  .el-table.zk-mt .el-table__body-wrapper,
  .el-table.zk-mt .el-table__body,
  .el-table.zk-mt .el-table__body > tbody {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }
  .el-table.zk-mt colgroup { display: none !important; }
  .el-table.zk-mt::before,
  .el-table.zk-mt::after,
  .el-table.zk-mt .el-table__body-wrapper::before,
  .el-table.zk-mt .el-table__body-wrapper::after { display: none !important; }

  /* 表头与固定列整层隐藏（固定列是 element-ui 复制出来的副本） */
  .el-table.zk-mt .el-table__header-wrapper,
  .el-table.zk-mt .el-table__fixed,
  .el-table.zk-mt .el-table__fixed-right,
  .el-table.zk-mt .el-table__fixed-header-wrapper { display: none !important; }

  /* ---------- 一行 = 一张卡片 ---------- */
  .el-table.zk-mt .el-table__body > tbody > tr {
    display: block !important;
    position: relative !important;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 10px 14px !important;
    background: #fff !important;
    border: 1px solid #E8ECF2 !important;
    border-radius: 0 !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
  }
  .el-table.zk-mt .el-table__body > tbody > tr:last-child { margin-bottom: 0 !important; }
  /* 斑马纹 / 悬停底色一律去掉，卡片保持白底 */
  .el-table.zk-mt .el-table__body > tbody > tr > td,
  .el-table.zk-mt .el-table__body > tbody > tr:hover > td,
  .el-table.zk-mt .el-table__body > tbody > tr.el-table__row--striped > td,
  .el-table.zk-mt .el-table__body > tbody > tr.current-row > td {
    background: transparent !important;
  }

  /* ---------- 一格 = 一行「列名 …… 值」 ---------- */
  .el-table.zk-mt .el-table__body td.el-table__cell {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: 8px 0 !important;
    border: 0 !important;
    border-bottom: 1px dashed #EEF1F5 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-align: left !important;
  }
  .el-table.zk-mt .el-table__body td.el-table__cell:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; }
  .el-table.zk-mt .el-table__body td.el-table__cell > .cell {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  /* 列名（取自真实表头，由 mobile-table.js 注入） */
  .el-table.zk-mt .el-table__body td.el-table__cell > .cell[data-zk-label]::before {
    content: attr(data-zk-label) !important;
    flex: 0 0 auto !important;
    font-size: 13px !important;
    color: #7A8699 !important;
    white-space: nowrap !important;
  }
  /* 表头为空的列（如「操作」）：整行留白给按钮 */
  .el-table.zk-mt .el-table__body td.el-table__cell > .cell:not([data-zk-label]) {
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* ---------- 勾选框列：抽到卡片右上角 ---------- */
  .el-table.zk-mt .el-table__body > tbody > tr:has(td:first-child .el-checkbox) { padding-right: 44px !important; }
  .el-table.zk-mt .el-table__body > tbody > tr:has(td:first-child .el-checkbox) > td.el-table__cell:first-child {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .el-table.zk-mt .el-table__body > tbody > tr > td.el-table__cell:first-child > .cell { justify-content: flex-end !important; }
  /* 勾选框本身撑到能点 */
  .el-table.zk-mt .el-checkbox { min-height: 28px !important; }
  .el-table.zk-mt .el-checkbox__inner { width: 18px !important; height: 18px !important; }
  .el-table.zk-mt .el-checkbox__inner::after { left: 6px !important; top: 2px !important; }

  /* ---------- 格内按钮 / 链接撑到能点 ---------- */
  .el-table.zk-mt .el-button { min-height: 34px !important; padding: 0 12px !important; }
  .el-table.zk-mt .el-button + .el-button { margin-left: 0 !important; }
  .el-table.zk-mt .a-text,
  .el-table.zk-mt .blue-a-text,
  .el-table.zk-mt .setting { display: inline-flex !important; align-items: center !important; min-height: 32px !important; }
  /* 空态：没有数据时 element-ui 会把空块撑成原来的总列宽（实测 1200px），
     手机上会横着溢出，先把它收回容器宽度。 */
  .el-table.zk-mt .el-table__empty-block {
    width: 100% !important;
    min-height: 110px !important;
  }
  .el-table.zk-mt .el-table__empty-text {
    width: 100% !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--zk-text-2) !important;   /* 原 #98A2B3 对白底仅 2.58:1，读不清 */
  }

  /* ---------- 统一字号层级：手机端只留 11 / 12 / 13 / 14 / 15 / 16 六档 ----------
     官方按 1rem=100px 设计（0.12 / 0.14 / 0.16 / 0.24 / 0.28rem …），手机根
     字号却是 屏宽/7.5（390 ⇒ 52px），同一套 rem 就变成 12.5 / 14.6 / 15.6 /
     16.6 / 17.7 / 18.7 / 20.8 这类非整数 —— 一个页面里七八种字号，大小关系
     还是乱的（标签页 17.7px 竟比页面标题 17px 还大）。
     归位后再整体收一档：标题类一律不超过 16px，避免手机上「头重脚轻」。 */

  /* 12.5 → 13：余额 / 统计卡里的「¥」符号 */
  .main-card .prefix,
  .main-card .s-12,
  .main-card .s-24 { font-size: 13px !important; }

  /* 14.6 → 13：账户资料字段名、子账户标题、空态文字 */
  .main-card .box-item-t,
  .main-card .clid-box,
  .main-card .no-product { font-size: 13px !important; }

  /* 页面主标题 17 → 16（会员中心各页标题 + 购物车 / 列表页大标题） */
  .main-card .main-card-title,
  .main-card .finance-title,
  .template .main-title { font-size: 16px !important; }

  /* 区块小标题 17 → 15 */
  .main-card .basic-title,
  .main-card .account-title,
  .main-card .name-first { font-size: 15px !important; }

  /* 首页统计卡大数字 16.6 → 15 */
  .main-card .order-nums { font-size: 15px !important; }

  /* 首页问候语 16 → 15 */
  .main-card .hello { font-size: 15px !important; }

  /* 账户名大字 20.8 → 16（原来比页面标题还大） */
  .main-card .name-text { font-size: 16px !important; }

  /* 标签页 17.7 → 14（原来比页面标题还大，层级颠倒） */
  .el-tabs__item { font-size: 14px !important; }

  /* 主按钮 17.7 → 14（原来和正文 13px 差 4.7px，过大） */
  .main-card .el-button,
  .content_searchbar .el-button { font-size: 14px !important; }
  /* 例外：表格内按钮 / 分页按钮 与所在文字同号，避免比表格正文还大 */
  .el-table.zk-mt .el-button,
  .main-card .el-pagination .el-button,
  .main-card .el-pagination button { font-size: 13px !important; }

  /* 资源页分类标题 / 空态标题 / 跳转页标题 15.6 → 14 */
  .main-card .tit,
  .main-card .no-product h2,
  .transfer .info .tit { font-size: 14px !important; line-height: 1.45 !important; }

  /* 输入框 15.6 → 14（零碎值，且比正文 13px 还大） */
  .el-input__inner { font-size: 14px !important; }

  /* 搜索放大镜 / 输入框内图标 20.8 → 16（图标比旁边正文大一大截） */
  .el-input__icon,
  .el-input__suffix i,
  .el-icon-search { font-size: 16px !important; }

  /* ---------- 菜单（抽屉）与窗口：一二级同号 ----------
     手机端抽屉菜单沿用桌面那套 0.42rem / 0.14rem，按 52px 根字号折算只剩
     21.8px 高、7.3px 字 —— 字看不清、行也点不准。这里改成固定 px。
     内边距与缩进跟桌面保持一致（L1 左右各 10px；L2 左缩进 36px，正对一级文字）。 */
  .menu-top .el-menu-item,
  .menu-top .el-submenu__title {
    height: 48px !important;
    line-height: 48px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
  }
  .menu-top .el-submenu .el-menu .el-menu-item {
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 10px 0 36px !important;
    font-size: 14px !important;
  }
  /* 抽屉里的分组分隔线与菜单起点，跟着新的行高和内边距重排 */
  .drawer-menu .drawer-menu-list-top { padding: 0 10px; }
  .drawer-menu .line { margin: 14px 4px !important; }
}

/* ==========================================================================
   10. 界面质量专项：对比度 / 键盘可达 / 渲染状态 / 桌面字号阶梯归位
   --------------------------------------------------------------------------
   本轮全量体检（.workbuddy/audit_ui.js，9 页 × 桌面 1440 / 手机 390）的结果：
     · 对比度：多处文字低于 WCAG AA（4.5:1），最低 1.88（统计卡白字压在浅绿上）。
       根因是官方调色板偏浅（@text-secondary #8692b0 对白底只有 3.1:1）。
     · 键盘：聚焦时没有可见反馈（element-ui 的按钮 :focus 只改色，不改轮廓）。
     · 渲染状态：分页「上一页/下一页」在禁用后看起来仍和可点的一样。
     · 样式：桌面端同样存在零碎字号（9 / 9.8 / 10.5 / 13.5 / 20.3 / 21 / 27），
       来源和手机端一样 —— 官方按 1rem=100px 写 rem，而 1440 下 1rem=75px，
       0.14rem 就变成 10.5px。手机端那套阶梯已经修正，桌面这一半本轮补齐。
   全部规则只做「颜色/字号/轮廓」三件事，不动布局结构 ⇒ 不会影响几何回归。
   ========================================================================== */

/* ---------- 10.1 两端通用：键盘焦点必须看得见 ----------
   reset.css 与 element-ui 都没写 :focus-visible，element-ui 的 .el-button:focus
   只改文字色，所以键盘用户 Tab 到哪里完全看不出来。用 :focus-visible 只在
   键盘操作时出现轮廓，鼠标点击不会多一圈（不影响现有观感）。 */
:focus-visible {
  outline: 2px solid var(--zk-navy) !important;
  outline-offset: 2px !important;
  border-radius: 0;
}
/* element-ui 给输入框写了 outline:none，聚焦只靠边框变蓝 —— 对比度不够，
   补一圈更明显的轮廓。 */
.el-input__inner:focus-visible,
.el-textarea__inner:focus-visible,
.el-input__inner:focus,
.el-textarea__inner:focus {
  outline: 2px solid var(--zk-navy-soft) !important;
  outline-offset: 1px !important;
}
.el-button:focus-visible,
.el-checkbox__original:focus-visible + .el-checkbox__inner,
.el-radio__original:focus-visible + .el-radio__inner,
.el-menu-item:focus-visible,
.el-tabs__item:focus-visible,
.el-pager li:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--zk-navy) !important;
  outline-offset: 2px !important;
}

/* ---------- 10.2 两端通用：禁用态要看得出来 ----------
   体检发现分页「上一页/下一页」在 .is-disabled 时的颜色和正常态一模一样
   （都是 --zk-text-2），用户不知道点了会不会有反应。统一弱化。 */
.el-pagination button.is-disabled,
.el-pagination button:disabled,
.el-pagination .btn-prev.is-disabled,
.el-pagination .btn-next.is-disabled,
.el-button.is-disabled,
.el-button.is-disabled:hover,
.el-button--disabled,
button:disabled {
  color: var(--zk-text-3) !important;
  cursor: not-allowed !important;
  opacity: .62 !important;
  box-shadow: none !important;
}
.el-input.is-disabled .el-input__inner,
.el-input__inner:disabled,
.el-input-number.is-disabled .el-input-number__decrease,
.el-input-number.is-disabled .el-input-number__increase {
  color: var(--zk-text-3) !important;
  background-color: var(--zk-bg-2) !important;
  cursor: not-allowed !important;
}

/* ---------- 10.3 两端通用：文字对比度达标（WCAG AA ≥ 4.5:1）----------
   下面每条都标注了「改前的对比度」，改后全部 ≥ 4.5（大字 ≥ 3）。
   颜色取值全部落在既有设计变量上（--zk-text-2 / --zk-text-3 / --zk-danger），
   不引入新的色相 ⇒ 视觉观感几乎不变，只是「看得清了」。 */
.el-table__empty-text,
.el-table__empty-block .el-table__empty-text,
.el-empty__description p,
.no-product p,
.zk-no-data {
  color: var(--zk-text-2) !important;   /* 原 #98A2B3 → 2.58:1 */
}
/* 官方 @text-secondary #8692b0 对白底只有 3.11:1，是最集中的一处（14 处命中）。
   这些元素全是「次要说明文字」，统一到 --zk-text-2。 */
.left-type,
.notice-type,
.box-item-t,
.box-item-title,
.recommend-text,
.title-text .more,
.WorkOrder-title .more,
.notice-item h4,
.notice-item h5,
.cloud-name .name,
.statistics-item-name,
.credit-name,
.id-text,
.phone-number,
.no-product p,
.agreement,
.info-second span,
.info-three span,
.info-three div,
.right-title,
.right-text {
  color: var(--zk-text-2) !important;
}
/* 上面那批里，推荐位的底色是 #EEF4FF（不是纯白），#667085 压上去只有 4.45:1，
   差一点点 ⇒ 这一处再深一档。 */
.recommend-text { color: #5D6B82 !important; }

/* 购物车角标：白字压 #E5484D 只有 3.91:1 */
.el-badge__content,
.el-badge__content.is-fixed,
.el-badge__content--danger {
  background-color: #C81E1E !important;
  color: #fff !important;
}
/* 危险按钮：白字压 #F13939 只有 3.90:1 */
.el-button--danger,
.finance .el-button--danger,
.el-message-box__btns .el-button--danger {
  background-color: #D92D20 !important;
  border-color: #D92D20 !important;
  color: #fff !important;
}
.el-button--danger:hover,
.el-button--danger:focus {
  background-color: #B42318 !important;
  border-color: #B42318 !important;
}
/* 状态标签：⚠️ 不要在这一层统一改 .status 的文字色！
   /productList.htm 的状态色是 js/productList.js 里按「每个状态一个色值」内联上去的
   （Unpaid/Pending/Active/Suspended/Deleted… 各自一对 color+bgColor），
   一律覆盖会让「已逾期 / 已删除」看起来和「未付款」一个颜色。
   那里的修法是在 JS 的色表里逐项压深（见 js/productList.js 的 status 映射）。 */
/* 首页三张统计卡：白字压浅色底全都不达标（绿 1.88 / 蓝 2.93 / 紫 4.90）。
   把底色压深到同一明度区间，白字对比度 5.3 ~ 5.8:1，三张卡也从此「一个调子」。 */
.order-item.order-box-1 { background: #7C3AED !important; }
.order-item.order-box-2 { background: #1565C0 !important; }
.order-item.order-box-3 { background: #0F7B4F !important; }
.order-item .order-title,
.order-item .order-nums { color: #fff !important; }
/* 账户信息卡左上的粉色数字块：白字压 #EF8BA2 只有 2.20:1 */
.name-first {
  background: #BE185D !important;
  color: #fff !important;
}
/* 财务页余额数字 / 标题：确认与正文形成层级但不失真 */
.balance-left-title,
.balance-title-num,
.balance-left-num,
.now-price,
.price-new { color: inherit; }

/* ---------- 10.4 手机端：标签页条不再被切 ----------
   我的产品页 5 个页签（使用中/即将到期/已逾期/已删除/全部）实测总宽 324px，
   而不滚动时可视区只有 310px ⇒ element-ui 判定「可滚」，把当前页签滚进视野、
   最左边那个被推出屏幕（实测 L=-49，"使用中" 只露出半截）。
   做法：把页签字号 14→13、左右内边距 9→8，5 条加起来 ≈297px < 310px，
   排得下之后 element-ui 就不再进入滚动状态，箭头也不会出现。
   ② 左侧箭头样式仍保留：英文等更长语言下依然会滚，出现时要点得中。
      ⚠️ 不要写 display:flex，会把「不可滚时隐藏」这个状态一起冲掉。 */
@media (max-width: 750px) {
  .el-tabs__item { font-size: 13px !important; padding: 0 8px !important; }
  .el-tabs__nav-prev,
  .el-tabs__nav-next {
    width: 26px !important;
    min-width: 26px !important;
    height: 100% !important;
    font-size: 14px !important;
    color: var(--zk-text-2) !important;
    background: #fff !important;
  }
  /* 「查询」按钮（我的产品页右栏搜索）在 390 下只剩 8.3px */
  .right-search .search-btn,
  .right-search .search-btn span,
  .main-card-table .search-btn { font-size: 13px !important; }
}

/* ---------- 10.5 仅桌面（≥751px）：字号阶梯归位 ----------
   桌面阶梯（与手机端那套 11/12/13/14/15/16/18 对齐放大一档）：
     12 次要说明 · 13 表格与表单正文 · 14 常规正文 · 15 小标题
     16 卡片标题 · 18 强调 · 20 页面主标题 · 24 大数字
   改前实测的零碎值：9 / 9.8 / 10.5 / 13.5 / 20.3 / 21 / 27
   （9 = 0.12rem、9.75 = 0.13rem、10.5 = 0.14rem… 都是 1440 下 1rem=75px 的产物）
   ⚠️ 必须包 @media (min-width:751px)：手机端第 8 节已有一整套字号设定，
      不加媒体查询会把它整段盖掉。 */
@media (min-width: 751px) {

  /* --- 9 / 9.8 → 12（原来只有 9~9.8px，是页面上最小的字） --- */
  .page-total,
  .s-12,
  .notice-btn,
  .create-notice .notice-btn,
  .statistics-item-value .s-12 { font-size: 12px !important; }

  /* --- 9.8 → 12：统计卡标题 / 表单标签 / 公告分类 / 页码 --- */
  .order-title,
  .box-item-t,
  .box-item-title,
  .notice-type { font-size: 12px !important; }
  /* 分页这几处官方也是 rem + !important 写的（common.css:385 起），
     权重 (0,2,0) / (0,3,0)，只写 .page-total / li 会被压过 ⇒ 选择器必须一样具体。 */
  .el-pagination .page-total,
  .myPage .el-pagination .page-total { font-size: 12px !important; }
  .myPage .el-pagination .el-pager li,
  .el-pagination .el-pager li { font-size: 12px !important; }
  /* 上一页 / 下一页箭头：官方是 0.13rem，1440 下只剩 9.75px（页面上最小的字）。
     手机端第 8 节已把它们统一到 13px，桌面端这边漏了。 */
  .el-pagination .btn-prev,
  .el-pagination .btn-next,
  .el-pagination button { font-size: 12px !important; }
  .myPage .el-pagination .el-pagination__jump,
  .el-pagination .el-pagination__jump,
  .el-pagination__editor { font-size: 12px !important; }

  /* --- 10.5 → 13：常见「次要正文」档 --- */
  .id-text,
  .phone-number,
  .left-type,
  .credit-name,
  .credit-btn,
  .statistics-item-name > span,
  .cashier-name,
  .notice-title,
  .notice-item,
  .title-text,
  .balance-left-title,
  .edit-goods,
  .bule-text,
  .text-red,
  .current-config-link,
  .el-popover__reference,
  .zk-total-label,
  .goodsInfo-type > span,
  .goodsInfo-val,
  .goodsInfo-price,
  .item-price > span,
  .item-total > span,
  .company-name,
  .el-dropdown-menu__item,
  .el-select-dropdown__item { font-size: 13px !important; }
  /* 搜索条左侧按钮 / 筛选标签：同样 10.5px */
  .content_searchbar > .left-btn,
  .content_searchbar > .left-btn span,
  .content_searchbar .left_tips .tips_item,
  .content_searchbar .left_tips .tips_item span { font-size: 13px !important; }
  /* 空态说明文字 */
  .no-product p,
  .product-list-box .no-product p,
  .recommend-text { font-size: 13px !important; line-height: 1.6 !important; }

  /* --- 13.5 → 14：配置页分节标题 / 全选勾选标签 --- */
  .com-tit,
  p.com-tit,
  .el-checkbox__label { font-size: 14px !important; }

  /* --- 20.3 → 20：页面主标题（账户 / 安全 / 订购产品 / 购物车 / 请核对商品信息） --- */
  .main-card-title,
  .main-title,
  .finance-title { font-size: 20px !important; }

  /* --- 21 → 20：空态标题；21 → 20：底栏合计金额（金额单独一档 20px） --- */
  .no-product h2,
  .el-empty__description h2 { font-size: 20px !important; }
  .total-price { font-size: 20px !important; line-height: 1.2 !important; }

  /* --- 27 → 24：账户卡角标数字，与统计卡大数字同档 --- */
  .name-first { font-size: 24px !important; line-height: 1 !important; }
  .order-nums { font-size: 24px !important; line-height: 1.15 !important; }
}

/* ==========================================================================
   11. 账户信息页：下划线式表单的输入框归位
   --------------------------------------------------------------------------
   这一页（.box-main 只出现在 account.php 的「账户概览」标签页里，弹窗在它之外）
   官方把输入框设计成「只有一条下划线」：account.css 明确写了
   .el-input__inner{border:none}、禁用态 background:#fff。
   本皮肤前面的通用规则把这套设计冲掉了，实测三处：
     ① 「语言」下拉在多语言关闭时是禁用态 ⇒ 被 10.2 节的灰底 + 8px 圆角
        变成一块灰色圆角方块，还把下面那条下划线盖住了（官方本来是白底纯文字）；
     ② 点进任意输入框 ⇒ 第 5 节的 :focus 边框色 + 光圈、10.1 节的 outline
        一起生效，而这里的 border-style 本来就是 none，于是凭空冒出一个
        悬空的圆角蓝框，下划线本身却不变色；
     ③ 手机 / 邮箱 / 密码 / 操作密码 是 readonly，点一下就会聚焦 ⇒ 同样冒蓝框。
   修法：这一页的输入框恢复「透明底、无圆角、无光圈」，焦点改成「下划线变蓝」。
   ========================================================================== */
.box-main .el-input__inner,
.box-main .el-textarea__inner {
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* 通用禁用态会给灰底（--zk-bg-2），这里是下划线式表单 —— 禁用也保持白底，
   否则会出现「一块灰方块把下划线盖住」的怪样子。
   文字色用 --zk-text-2：#98A2B3 对白底只有 2.58:1，禁用也要看得清。 */
.box-main .el-input.is-disabled .el-input__inner,
.box-main .el-select .el-input.is-disabled .el-input__inner,
.box-main .el-input__inner:disabled {
  background-color: transparent !important;
  color: var(--zk-text-2) !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}
/* 焦点：不要悬空光圈，改让下划线变蓝。
   1px 改色 + 1px 阴影 = 视觉 2px，且不改变盒高、不会引起下方内容位移。 */
.box-main .el-input__inner:focus,
.box-main .el-input__inner:focus-visible,
.box-main .el-textarea__inner:focus,
.box-main .el-textarea__inner:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
.box-main .box-item-b > .el-input:focus-within,
.box-main .box-item-b > .el-select:focus-within,
.box-main .box-item-b > .el-textarea:focus-within {
  border-bottom-color: var(--zk-navy) !important;
  box-shadow: 0 1px 0 0 var(--zk-navy) !important;
}
/* 手机 / 邮箱 / 密码 / 操作密码：整块可点开弹窗。
   鼠标悬停时下划线也变蓝，提示「这里能点」。 */
.box-main .box-item-b:has(.edit-icon) { cursor: pointer; }
.box-main .box-item-b:has(.edit-icon):hover > .el-input,
.box-main .box-item-b:has(.edit-icon):hover > .el-select {
  border-bottom-color: var(--zk-navy) !important;
}
/* 铅笔图标是这几个字段唯一的「可编辑」提示：#98A2B3 只有 2.58:1，
   图标至少要 3:1 ⇒ 用 --zk-text-2，悬停时变主题色。 */
.box-main .edit-icon { color: var(--zk-text-2) !important; }
.box-main .box-item-b:hover .edit-icon { color: var(--zk-navy) !important; }

/* ---------- 10.7 账户信息：下划线式输入框撑满所在列 ----------
   官方 account.css:107 把 .box-item-b 里的输入框写死 width: 3.2rem
   （1440 屏 = 240px），而所在列宽 337.8px ⇒ 下划线只画了约 7 成、
   右侧空出一截：左边和上方标签对齐，右边界却对不齐，看着像没画完。
   手机端官方本来就是 100%（account.css:355），所以这里只补桌面端。
   一并覆盖 .el-select（语言 / 国家 / 是否接收通知）与 .el-textarea。 */
@media (min-width: 751px) {
  .box-main .box-item-b > .el-input,
  .box-main .box-item-b > .el-select,
  .box-main .box-item-b > .el-textarea {
    width: 100% !important;
  }
}


/* ==========================================================================
   11. 全场直角（2026-10-04 · 用户要求「全改直角」）
   --------------------------------------------------------------------------
   做法：先把所有元素的圆角归零，再把「本来就是圆形」的少数几个恢复成圆。

   为什么不逐个列组件：官方 element-ui.css(90 处) + common.css(37 处) +
   各页面级 css(100+ 处) 都写了圆角，而且大量用 rem（会随屏幕缩放变化），
   逐个覆盖既容易漏、又会被后面加载的页面级 css 反压。通配一刀切最彻底。

   ⚠️ 伪元素（::before / ::after / 滚动条 thumb）不受 `*` 影响，
      圆形小装饰天然保留，无需处理。

   圆角总闸：值取自 --zk-r-all（见文件开头的设计令牌）。
            0 = 直角；想全局改圆角只改那一个变量即可，不用碰本节。

   回滚：删掉本节，并把文件开头的 --zk-r-* 圆角刻度改回 6 / 8 / 10 / 14 / 18。
   ========================================================================== */
body * { border-radius: var(--zk-r-all, 0) !important; }

/* 保留圆形 —— 这些不是「框」，是圆点/头像，变方反而难看 */
.el-radio__inner,             /* 单选钮的圆点 */
.el-avatar,                   /* 头像组件 */
.el-header .head-box,         /* 顶栏用户头像 */
.el-slider__button,           /* 滑动条的滑块 */
.zk-term,                     /* 商品配置页的圆形问号图标 */
[class*="avatar"], [class*="circle"] {
  border-radius: 50% !important;
}

/* ==========================================================================
   12. 商品分组旗帜（2026-10-04）
   --------------------------------------------------------------------------
   后台「分组旗帜」页给分组配的国旗，由 zk-flag.js 插到分组名后面。
   尺寸写固定 px（手机端也用同一套），图片本身是 40x27 的小图。
   回滚：删掉本节即可（zk-flag.js 找不到样式只是没圆角描边，不影响功能）。
   ========================================================================== */
img.zk-flag {
  display: inline-block;
  width: 20px;
  height: 14px;
  object-fit: cover;
  margin-left: 6px;
  vertical-align: -2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  background: #fff;
}

/* ==========================================================================
   13. 会员中心专属外观（2026-10-05）
   --------------------------------------------------------------------------
   后台「用户中心」设置页里的两个专属项，由插件按场景注入变量驱动：
     · 表格斑马纹：--zk-stripe，默认 transparent ⇒ 没设置时和现在长得一模一样
     · 表格行距：--zk-row-pad，默认 12px 与 element-ui 原生一致
   回滚：删掉本节即可（变量还在也无害）。
   ========================================================================== */

/* 斑马纹：隔行浅色底。
   用 background-image 而不是 background-color —— 默认 none 时对现有外观「零影响」，
   也不会盖掉官方自己对表格行设的底色（比如选中行）。 */
.el-table__body tr:nth-child(even):not(:hover) > td.el-table__cell {
  background-image: var(--zk-stripe-img, none) !important;
}

/* 行距：只作用在电脑端（手机端行高在第 8 节里另有固定值，别覆盖它） */
@media (min-width: 751px) {
  .el-table td.el-table__cell {
    padding-top: var(--zk-row-pad, 12px) !important;
    padding-bottom: var(--zk-row-pad, 12px) !important;
  }
}