/**
 * StarSaltTheme 全局 UI 皮肤（批 9-K1/K2 定稿）
 *
 * 定位：把所有系统页 / 插件页 / 购物车页的「骨架」统一到 demo 视觉，
 *       页面只需写业务结构，不必重复定义卡片、表格、按钮样式。
 *
 * 依赖顺序（header.php 中已保证）：
 *   reset.css → theme/{配色}/index.css（运行时插入）→ common.css
 *   → theme-vars.css → 本文件
 *
 * 单位说明：本文件一律使用 px，不依赖根字号缩放。
 *   系统 js/common/common.js 会把 html 的 font-size 设为 clientWidth/19.2
 *   （1920→100px，1440→75px），凡用相对根字号的单位都会在窄屏整体缩水 25%。
 *   demo 用的是固定 px（1920 设计稿），所以这里也必须是 px。
 *   （校验：本文件 grep 相对根字号单位应命中 0 条）
 *
 * 令牌来源：css/theme-vars.css（唯一）。本文件不定义任何颜色字面量，
 *           除了纯白/纯黑这种无品牌语义的值。
 */

/* ============================================================
   0. 页面骨架
   ============================================================ */
/* 滚动条常驻。
   控制台首屏是「骨架 → 数据」两态，内容一变长就会凭空多出一条 15px 的
   纵向滚动条，整页可用宽度缩水，`.el-main` 里那些按百分比分的栅格跟着
   重算，看上去就是加载完成的瞬间页面往左跳了一下。
   用 overflow-y: scroll 让滚动条始终占位（骨架态也占），宽度就不变了。
   不用 scrollbar-gutter: stable —— 它预留的 gutter 不含在 fixed 顶栏的
   100% 里，顶栏右端会空出一条露出背景的白边。 */
html {
  overflow-y: scroll;
  scrollbar-width: thin;
  scrollbar-color: rgba(37, 99, 235, .24) transparent;
}
/* 常驻的滚动条顺手做细、做成主题蓝，否则 Windows 上是一条 15px 的灰槽 */
html::-webkit-scrollbar {
  width: 10px;
}
html::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, .24);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 5px;
}
html::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 99, 235, .38);
  background-clip: content-box;
}

/* 弹窗锁滚动时不要再补 padding-right。
   Element 的 PopupManager 打开弹窗会给 body 加 `el-popup-parent--hidden`
   并内联 padding-right = 滚动条宽度（Windows 上 10px），用来抵消「滚动条消失」
   带来的内容变宽。但本主题的滚动条挂在 html 上且常驻（见上一段），
   根本没消失，再补一次等于把 body 压窄 10px，居中的内容整体左移约 5px——
   这就是打开退出登录确认框时页面「往左抖一下」的原因。
   把补偿项归零，宽度恒定，弹窗开关不再横跳。 */
body.el-popup-parent--hidden {
  padding-right: 0 !important;
}

body {
  background: var(--bg-color);
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 首屏加载：白底 + 主题色律动条（覆盖 common.css 旧样式） */
#mainLoading {
  background: var(--surface);
}
#mainLoading .ddr {
  width: 7px;
  height: 64px;
  margin: 3px;
  border-radius: 4px;
  background-color: var(--brand-blue);
  animation: ss-loading 1.1s infinite ease-in-out;
}
#mainLoading .ddr2 { animation-delay: -1s; }
#mainLoading .ddr3 { animation-delay: -0.9s; }
#mainLoading .ddr4 { animation-delay: -0.8s; }
#mainLoading .ddr5 { animation-delay: -0.7s; }
@keyframes ss-loading {
  0%, 40%, 100% { transform: scaleY(0.4); opacity: 0.6; }
  20% { transform: scaleY(1); opacity: 1; }
}

.el-container {
  min-width: 0;
}

/* 内容区：顶栏 56px 固定悬浮，内容从 76px 开始（= demo .console-content 的 76px）
   加 html 前缀是为了压过页面级 CSS 的 .el-main { padding: 0 !important }
   （css/finance.css:1）。旧皮肤的顶栏是 static，页面不需要顶部留白，所以那时候这样写是对的；
   现在顶栏 fixed，不留 76px 就会被盖住 56px。
   html .el-main 的优先级 (0,1,1) 高于页面的 (0,1,0)，两个 !important 之间也能赢。
   这是外壳的兜底，K3 不许在页面里回写 padding。 */
html .el-main {
  padding: 76px var(--space-24) var(--space-40) !important;
  background: var(--bg-color);
  overflow-x: hidden;
  font-size: var(--fs-14);
  /* 内容区的纵向节奏只在这里定义一次。
     以前每页各写一套 margin（16/18/20/24 混用），有的页干脆没写，
     结果就是「卡片上下贴在一起」。统一成 flex + gap 后，页里再写 margin 也不会翻倍：
     下面把直接子元素的外边距清掉，间距只由 gap 决定。 */
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  /* 必须显式写 stretch：Chrome 下 flex 容器的 align-items:normal 并没有把块级子项
     拉满宽度，子项按 fit-content 收缩（账户页面板因此窄了 160px、
     财务页表格则撑破视口）。min-width:0 同时允许子项被内容撑开时回缩。 */
  align-items: stretch;
}
/* 宽度直接钉死为 100%：部分页面面板里有 tab / 表格，按 fit-content 会收缩或溢出。
   box-sizing 一并改掉，避免 1px 描边把总宽撑出容器。 */
html .el-main > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-width: 0;
  box-sizing: border-box;
}
/* width 单独用 :where() 降到 0 优先级：它只是「内容块默认撑满」的兜底值。
   原先写在上面那条里（优先级 0,1,1），会把 .el-main 里 position: fixed 的
   抽屉/弹窗也强行拉成 width:100%——购物车「立即订购」的侧边抽屉就是这样
   变成全屏的。降到 0 优先级后，组件自己的 width 才盖得住。 */
:where(html .el-main > *) {
  width: 100%;
}

/* ============================================================
   1. 顶栏（.el-header + topMenu 内部结构）
   逐条移植 demo base/topbar.css 的 console 形态：
     demo .console-topbar → .el-header（56 高 / flex / fixed）
     demo .topbar-logo    → .ss-topbar-brand（200 / gap 14 / 无右边框）
     demo .topbar-body    → .ss-topbar-body（padding 0 28 / 下边框）
   其余类名（.topbar-brand / .sidebar-brand-* / .topbar-title* /
   .topbar-link / .topbar-btn / .topbar-dropdown* / .topbar-lang-* /
   .topbar-notify-* / .topbar-user-* / .sidebar-toggle）与 demo 完全同名，
   数值逐一对应，便于日后与 demo 源码直接 diff。
   ============================================================ */
.el-header {
  /* common.css 里是 width: calc(100% - 190px) + 静态定位，会右溢 10px；
     这里用 left+right 锚死，宽度由浏览器算，不依赖静态位置。
     left 归 0：demo 顶栏整宽，品牌区占左上角，侧栏从 56px 下沿才开始。 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: var(--ss-header-h) !important;
  display: flex;
  /* demo .console-topbar 是 stretch：品牌区与内容区都撑满 56px */
  align-items: stretch;
  justify-content: space-between;
  /* padding 交给内部两个区各自负责：品牌区 20px、内容区 28px */
  padding: 0;
  /* 底色与磨砂放在 ::before 上，不放 .el-header 本身。
     原因：backdrop-filter 会让元素成为 fixed 后代的包含块，
     而 topMenu 的消息弹窗（.ss-msg-popup-wrap，position:fixed;bottom:24px）就挂在
     .el-header 里面——直接写在顶栏上会让它相对 56px 的顶栏定位，
     实测被顶到 y=-82，大半截跑到视口外并压住顶栏。伪元素没有后代，不受此影响。 */
  background: transparent;
  /* demo 的下边框只在 .topbar-body 上，品牌区下方无线，故此处不留 border */
  border-bottom: none;
  box-shadow: none;
  z-index: 1000;
}

.el-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--nav-bg);
}

/* ===== 品牌区：demo .topbar-logo ===== */
.ss-topbar-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 var(--ss-aside-w);
  width: var(--ss-aside-w);
  padding: 0 var(--space-20);
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  /* 品牌区当作侧栏的顶部延伸：与 .ss-aside 同底色、同一条右侧竖线，
     两者上下相接后 logo 视觉上落在侧栏上，而不是浮在顶栏左侧。
     底色与侧栏共用 --nav-aside-bg，两者上下相接后连成一条。 */
  background: var(--nav-aside-bg);
}
/* demo .topbar-brand：a 标签内的图标 + 两行文字 */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}
/* 图标 30×30：demo .sidebar-brand-icon（有 logo 时用 img，无则用首字块） */
.ss-topbar-brand-logo,
.sidebar-brand-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
}
.ss-topbar-brand-logo {
  object-fit: contain;
}
.sidebar-brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-hero);
  color: #ffffff;
  font-size: var(--fs-14);
  font-weight: 900;
  line-height: 1;
}
.sidebar-brand-text {
  display: block;
  font-size: var(--fs-15);
  font-weight: 800;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-brand-ver {
  display: block;
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: var(--fs-9);
  color: var(--text-5);
  letter-spacing: .5px;
  white-space: nowrap;
}

/* ===== 内容区：demo .topbar-body ===== */
.ss-topbar-body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-28);
  border-bottom: 1px solid var(--card-border);
  box-sizing: border-box;
}

/* 页面标题：demo .topbar-page-title / .topbar-title / .topbar-title-en */
.topbar-page-title {
  display: flex;
  align-items: center;
  min-width: 0;
}
.topbar-title {
  margin: 0;
  font-size: var(--fs-15);
  font-weight: 800;
  line-height: var(--lh-tight);
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-title-en {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-style: normal;
  font-weight: 600;
  color: var(--text-5);
  letter-spacing: 1px;
}

/* 右侧按钮组：demo .topbar-right */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* 文字入口：demo .topbar-link */
.topbar-link {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-3);
  padding: 6px var(--space-12);
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: color var(--motion-fast);
  font-family: inherit;
}
.topbar-link:hover {
  color: var(--brand-blue);
}
.topbar-link svg {
  width: 12px;
  height: 12px;
  transition: transform var(--motion-base);
}

/* 分割线：demo .topbar-divider（1×20 实底，不是 border） */
.topbar-divider {
  width: 1px;
  height: 20px;
  background: var(--divider);
  margin: 0 4px;
}

/* 图标按钮：demo .topbar-btn（36×36 透明底，悬停浅底） */
.topbar-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-4);
  cursor: pointer;
  transition: color var(--motion-fast), background var(--motion-fast);
  position: relative;
}
.topbar-btn:hover {
  color: var(--brand-blue);
  background: var(--accent-soft);
}
.topbar-btn svg {
  width: 18px;
  height: 18px;
}
/* 未读红点：demo .notif-dot（7px 圆点 + 1.5px 表面色描边） */
.topbar-btn .notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--danger-bright);
  border: 1.5px solid var(--surface);
}
/* 购物车角标（系统业务，demo 无）：带数字，故比红点宽，皮肤同源 */
.topbar-btn .cart-dot {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger-bright);
  border: 1.5px solid var(--surface);
  color: #ffffff;
  font-size: var(--fs-9);
  font-weight: 700;
  line-height: 12px;
  text-align: center;
  box-sizing: border-box;
}

/* 主题切换日月交叉：demo topbar.css:69-78 */
.topbar-btn .icon-moon,
.topbar-btn .icon-sun {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .3s ease, transform .3s ease;
}
.topbar-btn .icon-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(.4);
  position: absolute;
}
.topbar-btn .icon-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}
[data-theme="dark"] .topbar-btn .icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
  position: relative;
}
[data-theme="dark"] .topbar-btn .icon-moon {
  opacity: 0;
  transform: rotate(90deg) scale(.4);
  position: absolute;
}

/* 用户入口：demo .topbar-user-trigger */
.topbar-user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-4) var(--space-8);
  color: var(--text-3);
  font-family: inherit;
  transition: color var(--motion-fast);
}
.topbar-user-trigger:hover {
  color: var(--brand-blue);
}
.topbar-user-avatar {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  object-fit: cover;
}
/* 无头像时回落为首字块（demo 用真实头像，系统账号可能没传） */
.topbar-user-avatar--text {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-blue);
  color: #ffffff;
  font-size: var(--fs-13);
  font-weight: 700;
  line-height: 1;
}
.topbar-user-name {
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-user-trigger > svg {
  transition: transform var(--motion-base);
}

/* ===== 下拉：demo .topbar-dropdown / .topbar-dropdown-menu ===== */
.topbar-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}
.topbar-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 268px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-dropdown);
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transform-origin: top;
  transition: clip-path .3s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .3s;
  z-index: 200;
  padding: var(--space-8) 0;
  box-sizing: border-box;
}
.topbar-dropdown-menu--right {
  left: auto;
  right: 0;
  width: 172px;
}
.topbar-dropdown-menu--notify {
  left: auto;
  right: 0;
  width: 340px;
}
/* 展开：hover / 点击（.open）/ 键盘聚焦 三路同效，与 demo 一致 */
.topbar-dropdown.open .topbar-dropdown-menu,
.topbar-dropdown:hover .topbar-dropdown-menu,
.topbar-dropdown:focus-within .topbar-dropdown-menu {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path .36s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
/* 语言下拉只认点击，不跟 hover / focus。
   切完语言鼠标通常还停在按钮上，hover 会把菜单重新撑开——用户看到的就是
   「选了语言，菜单没收起来」。focus-within 同理（点过的按钮还带着焦点）。
   放在上面那条之后，靠同优先级后者胜出。 */
.topbar-dropdown--lang:hover .topbar-dropdown-menu,
.topbar-dropdown--lang:focus-within .topbar-dropdown-menu {
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .3s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .3s;
}
.topbar-dropdown--lang.open .topbar-dropdown-menu {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path .36s cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
/* chevron 跟随展开旋转 180°（图标按钮不带 chevron，故单独排除） */
.topbar-dropdown:hover .topbar-dropdown-trigger > svg,
.topbar-dropdown:hover .topbar-user-trigger > svg,
.topbar-dropdown:focus-within .topbar-dropdown-trigger > svg,
.topbar-dropdown:focus-within .topbar-user-trigger > svg,
.topbar-dropdown.open .topbar-dropdown-trigger svg {
  transform: rotate(180deg);
}
.topbar-btn.topbar-dropdown-trigger > svg {
  transform: none !important;
}

/* 费用下拉的余额头部：demo .topbar-dropdown-header 系列 */
.topbar-dropdown-header {
  padding: var(--space-16) var(--space-20) 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.topbar-dropdown-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-13);
  color: var(--text-5);
}
.topbar-dropdown-label svg {
  width: 16px;
  height: 16px;
  color: var(--brand-blue);
}
.topbar-dropdown-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar-dropdown-balance {
  font-family: var(--font-numbers);
  font-size: var(--fs-24);
  font-weight: 400;
  color: var(--text-main);
  line-height: var(--lh-solid);
}
.topbar-dropdown-charge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: fit-content;
  padding: 7px 14px;
  font-size: var(--fs-12);
  font-weight: 700;
  font-family: inherit;
  background: var(--brand-blue);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background var(--motion-fast);
}
.topbar-dropdown-charge:hover {
  background: var(--brand-blue-dark);
}
.topbar-dropdown-charge svg {
  width: 13px;
  height: 13px;
}
.topbar-dropdown-divider {
  height: 1px;
  background: var(--divider);
  margin: 6px 0;
}
/* 下拉条目：demo .topbar-dropdown-item */
.topbar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  font-size: var(--fs-14);
  color: var(--text-3);
  text-decoration: none;
  transition: background var(--motion-fast), color .15s;
  white-space: nowrap;
}
.topbar-dropdown-item svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--text-5);
  transition: color var(--motion-fast);
}
.topbar-dropdown-item:hover {
  background: var(--accent-tint);
  color: var(--text-main);
}
.topbar-dropdown-item:hover svg {
  color: var(--brand-blue);
}
.topbar-dropdown-item--danger {
  color: var(--danger-bright);
}
.topbar-dropdown-item--danger svg {
  color: currentColor;
}
.topbar-dropdown-item--danger:hover {
  color: #fff;
  background: var(--danger-bright);
}
.topbar-dropdown-item--danger:hover svg {
  color: currentColor;
}

/* ===== 站内信下拉：demo .topbar-notify-* ===== */
.topbar-notify-header {
  padding: 14px 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar-notify-title {
  color: var(--text-main);
  font-size: var(--fs-14);
  font-weight: 700;
}
.topbar-notify-readall {
  color: var(--brand-blue);
  font-size: var(--fs-12);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}
.topbar-notify-readall:hover {
  text-decoration: underline;
}
.topbar-notify-list {
  max-height: 280px;
  overflow-y: auto;
}
.topbar-notify-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  color: var(--text-main);
  text-decoration: none;
}
.topbar-notify-item:hover {
  background: var(--accent-tint);
}
.topbar-notify-dot {
  width: 8px;
  height: 8px;
  margin-top: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
}
.topbar-notify-item--unread .topbar-notify-dot {
  background: var(--brand-blue);
}
.topbar-notify-body {
  flex: 1;
  min-width: 0;
}
.topbar-notify-text {
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  color: var(--text-main);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.topbar-notify-item--unread .topbar-notify-text {
  font-weight: 600;
}
.topbar-notify-time {
  margin-top: 3px;
  font-size: var(--fs-11);
  color: var(--text-5);
}
.topbar-notify-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: var(--fs-12);
  color: var(--text-5);
}
.topbar-notify-footer {
  display: block;
  padding: 10px 16px;
  border-top: 1px solid var(--divider);
  color: var(--brand-blue);
  font-size: var(--fs-12);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.topbar-notify-footer:hover {
  background: var(--accent-tint);
}

/* ===== 语言选择：demo .topbar-lang-* ===== */
.topbar-lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  background: var(--accent-soft);
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-size: var(--fs-13);
  font-weight: 600;
  font-family: inherit;
  border-radius: 0;
  transition: color var(--motion-fast), background .15s;
}
.topbar-lang-trigger:hover {
  color: var(--brand-blue);
  background: var(--accent-tint);
}
.topbar-lang-trigger svg {
  width: 12px;
  height: 12px;
  transition: transform var(--motion-base);
}
.topbar-dropdown.open .topbar-lang-trigger svg {
  transform: rotate(180deg);
}
.topbar-lang-flag {
  width: 18px;
  height: 12px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.topbar-lang-name {
  white-space: nowrap;
}
.topbar-lang-menu {
  /* 128px 容不下「旗帜 + 中文名 + 打勾」，打勾会被挤到菜单边上甚至被裁 */
  width: 168px;
  padding: 6px 0;
  border-radius: 0;
}
.topbar-lang-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  font-size: var(--fs-13);
  font-weight: 600;
  text-align: left;
  font-family: inherit;
  transition: background var(--motion-fast), color .15s;
  box-sizing: border-box;
}
.topbar-lang-item:hover {
  background: var(--accent-tint);
  color: var(--text-main);
}
.topbar-lang-item.active {
  color: var(--brand-blue);
}
.topbar-lang-item .topbar-lang-name {
  flex: 1;
}
.topbar-lang-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--brand-blue);
}

/* 汉堡按钮：demo .sidebar-toggle（桌面隐藏，≤700 显现） */
.sidebar-toggle {
  display: none;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-4);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.sidebar-toggle svg {
  width: 20px;
  height: 20px;
}

/* 未登录入口（系统业务：demo 控制台恒为登录态） */
.un-login {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--space-8);
  font-size: var(--fs-13);
  font-weight: 600;
  font-family: inherit;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--motion-fast);
}
.un-login:hover {
  color: var(--brand-blue);
}
.un-login img {
  width: 20px;
  height: 20px;
}

/* ===== 响应式（demo topbar.css:344-375）===== */
@media (max-width: 900px) {
  .topbar-link {
    display: none;
  }
  .topbar-divider {
    display: none;
  }
}

@media (max-width: 700px) {
  .sidebar-toggle {
    display: flex;
  }
  .ss-topbar-brand {
    flex: 0 0 auto;
    width: auto;
    padding: 0 16px;
    /* 移动端侧栏是抽屉（.ss-aside 已 display:none），品牌区不再充当侧栏顶部，
       白底与竖线留着会变成一条无意义的断头线 */
    background: transparent;
    border-right: none;
  }
  .ss-topbar-body {
    padding: 0 16px;
  }
  .topbar-brand {
    width: auto;
  }
  .topbar-brand-text {
    display: none;
  }
  .topbar-page-title {
    padding-left: 10px;
  }
  .topbar-user-name {
    display: none;
  }
  .topbar-dropdown-menu {
    right: 0;
    left: auto;
  }
  .topbar-lang-name {
    display: none;
  }
  .topbar-lang-trigger {
    padding: 0 8px;
  }
}

@media (max-width: 480px) {
  .ss-topbar-brand {
    padding: 0 12px;
  }
}


/* ============================================================
   2. 侧边栏（配套 components/asideMenu）
   目标数值来自 demo base/console.css:70-133（侧栏）/ base/topbar.css（顶栏）
   宽 200 / 分组 18 20 5 / 链接 11 16 + margin 1 8 + 13px + r8
   ============================================================ */
.el-aside.ss-aside {
  /* demo 侧栏（base/console.css:70）是 { position: fixed; top: 56px; bottom: 0 }，
     品牌区在上方圆角之外——换算到本系统就是：顶栏整宽 56px，侧栏从顶栏下沿开始。
     用 fixed 而不是 common.css 的 sticky：sticky 会随 body 滚出视口，
     长内容页面（订单列表、工单）一滚侧栏就没了。 */
  position: fixed;
  top: var(--ss-header-h);
  left: 0;
  bottom: 0;
  height: auto;
  z-index: 100;
  padding: 0;
  background: var(--nav-aside-bg);
  /* 不画右边框：侧栏与内容区靠「淡蓝 vs 灰白」的色差分层，
     加线会把它框成一个盒子，与全站去边框的语言冲突 */
  border-right: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: var(--ss-aside-w);
}

/* aside 脱离文档流后必须给内层 el-container 补位。
   这里用相邻兄弟而不是 :has()：外层 el-container 是 aside 的父级、不是兄弟，
   所以这条只命中内层，不会双倍偏移，也不依赖 :has 的浏览器支持。 */
.el-aside.ss-aside + .el-container {
  margin-left: var(--ss-aside-w);
  width: calc(100% - var(--ss-aside-w));
}

/* 品牌区已上移到顶栏（.ss-topbar-brand）；侧栏里不再有 logo 行，
   与 demo 一致：.console-sidebar 顶格从 56px 下沿开始。
   未配 logo 时的品牌块图标由 .sidebar-brand-icon 提供（见第 1 节），
   侧栏内不再需要独立品牌块。 */

.ss-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0;
  scrollbar-width: none;
}
.ss-nav::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* 自绘滚动条：demo console.css:94-112（5px 细条，悬停侧栏显现，无圆角） */
.ss-scrollbar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--motion-base);
}
.el-aside.ss-aside:hover .ss-scrollbar {
  opacity: 1;
}
.ss-scrollbar-thumb {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  min-height: 24px;
  background: var(--gray-3);
}

/* 分组标题：demo 分组标题 console.css:107-111 */
.ss-nav-section {
  padding: 18px var(--space-20) 5px;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-5);
  line-height: var(--lh-default);
}

/* 菜单项：demo 侧栏链接 console.css:114-120。11 + 11 + 13×1.2 ≈ 38px 高，验收项① */
.ss-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px var(--space-16);
  margin: 1px var(--space-8);
  font-size: var(--fs-13);
  font-weight: 400;
  line-height: var(--lh-tight);
  /* 原 --text-main(#1a1a1a)：压在淡蓝侧栏上偏黑、偏硬。
     换成同一色相族里的深灰蓝，图标走 currentColor 一并变淡。 */
  color: #3d4453;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--motion-mid), background var(--motion-mid);
}
.ss-nav-link:hover {
  color: var(--brand-blue);
  /* 原为 --accent-tint（灰白），在淡蓝侧栏上等于「变白」，与选中态的白底混淆。
     改成主色 7%：悬停是加深，选中是浮起，两种反馈能区分开。 */
  background: rgba(37, 99, 235, .07);
}
.ss-nav-link.is-active {
  color: var(--brand-blue);
  /* 原为 --brand-blue-tint-10，与淡蓝侧栏底色几乎同值，选中项会「消失」。
     改白底 + 极轻投影，在淡蓝底上自然浮起一层。 */
  background: var(--surface);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(37, 99, 235, .10);
}
/* 图标 = <ss-icon>（内联 SVG 24×24 viewBox，17px 显示，demo console.css:130） */
.ss-nav-link .ss-icon,
.ss-nav-link svg,
.ss-nav-sub-title .ss-icon,
.ss-nav-sub-title svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--text-main);
  transition: color var(--motion-mid);
}
.ss-nav-link:hover .ss-icon,
.ss-nav-link:hover svg,
.ss-nav-link.is-active .ss-icon,
.ss-nav-link.is-active svg {
  color: var(--brand-blue);
}
.ss-nav-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-nav-badge {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 16px;
  padding: 1px 5px;
  font-size: var(--fs-10);
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
}

/* 二级菜单（后台给某导航挂了子项时才出现） */
.ss-nav-sub {
  margin: 0 var(--space-8) 2px;
}
.ss-nav-sub-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px var(--space-16);
  font-size: var(--fs-13);
  line-height: var(--lh-tight);
  color: var(--text-main);
  border-radius: 8px;
  cursor: pointer;
}
.ss-nav-sub-title:hover {
  background: var(--accent-tint);
}
.ss-nav-sub .ss-nav-link {
  padding-left: 34px;
  font-size: var(--fs-13);
  color: var(--text-2);
}

/* 后台「分隔符」模板分支已删除（asideMenu 不再渲染 hasDivider），
   demo 分组之间无细线，靠分组标题上间距分隔 */

/* 抽屉菜单（窄屏/汉堡菜单）里的分组标题与间距 */
.drawer-menu-section {
  padding: 14px var(--space-20) 4px;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--text-5);
}
.drawer-menu-list-top .menu-top {
  margin-top: 0;
}
.drawer-menu-list-top .el-menu-item {
  border-radius: 8px;
  margin: 1px var(--space-8);
}

/* ============================================================
   3. 主卡片与页头
   ============================================================ */
/* 主卡片：两个类名共用一套视觉。
   .ss-card 是共享组件层的现行类名；.main-card 是系统旧模板（含插件页）沿用的容器名，
   短期不可能全量迁移。两者若各写一份，内距就会一个 20px 一个 24px，
   换页时内容左边缘跳 4px——所以只在这里定义一次。 */
.ss-card,
.main-card {
  background: var(--surface);
  border-radius: var(--ss-radius-card);
  padding: var(--space-20);
  box-shadow: var(--shadow-card);
  color: var(--text-main);
}

/* 页头：title + 可选说明 + 右侧操作区 */
.main-card-title {
  /* 与 .ss-card-title 同角色，字号必须一致 */
  font-size: var(--fs-14);
  font-weight: 600;
  line-height: var(--lh-default);
  color: var(--text-main);
}

.ss-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
  margin-bottom: var(--space-16);
}
/* 标题只在顶栏呈现（demo 的做法），内容区页头多半只剩搜索框或操作按钮。
   只剩搜索/操作时靠右，避免孤零零贴在左边；页面自有说明文字（.ss-page-sub）
   不能被推走，所以只认这两个类名而不是 :only-child。 */
.ss-page-head > .ss-search:only-child,
.ss-page-head > .ss-page-actions:only-child {
  margin-left: auto;
}
.ss-page-head-main {
  min-width: 0;
}
.ss-page-title {
  /* 层级：页面 18 / 卡片 14 / 正文 13-14。字重降到 600，靠层级和留白区分而不是靠加粗 */
  font-size: var(--fs-18);
  font-weight: 600;
  color: var(--text-main);
  line-height: var(--lh-heading);
  letter-spacing: -0.01em;
}
.ss-page-desc {
  margin-top: var(--space-4);
  font-size: var(--fs-12);
  color: var(--text-5);
  line-height: var(--lh-copy);
}
.ss-page-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

/* 子卡片 */
.ss-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}
.ss-card-title {
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--text-main);
}

/* ============================================================
   4. 按钮
   ============================================================ */
.el-button {
  border-radius: var(--ss-radius-btn);
  font-weight: 500;
  transition: color var(--motion-mid), background var(--motion-mid),
    border-color var(--motion-mid);
}
.el-button--primary {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}
.el-button--primary:hover,
.el-button--primary:focus {
  background-color: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
}
/* 主按钮状态锁（2026-11-01）
   配色主题的 element-ui.css 由 theme/index.js 运行时插入，排在本文之后，
   里面有一条 `.el-button:focus, .el-button:hover { color: 品牌色; background: 浅蓝 }`，
   优先级 (0,2,0) 高于上面的 `.el-button--primary` (0,1,0)。
   于是主按钮一聚焦/悬停就变成「浅底 + 品牌色字」，确认框的「确定」按钮
   打开即被 Element 自动聚焦，字和底几乎同色，可读性极差。
   这里用 html 前缀把优先级提到 (0,3,1)/(0,4,1)，只作用于实心主按钮，
   不碰 is-plain（描边款）和 is-disabled（禁用款）。 */
html .el-button--primary:not(.is-plain):not(.is-disabled) {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}
html .el-button--primary:not(.is-plain):not(.is-disabled):hover,
html .el-button--primary:not(.is-plain):not(.is-disabled):focus,
html .el-button--primary:not(.is-plain):not(.is-disabled):active {
  background-color: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
  color: #fff;
}
.el-button--primary.is-plain {
  background: var(--brand-blue-tint-10);
  border-color: var(--brand-blue);
  color: var(--brand-blue);
}
.el-button--primary.is-plain:hover,
.el-button--primary.is-plain:focus {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}
.el-button--default {
  border-color: var(--border);
  color: var(--text-2);
}
.el-button--default:hover,
.el-button--default:focus {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  background: var(--brand-blue-tint-06);
}
.el-button--text {
  color: var(--brand-blue);
  padding: 0;
}
.el-button--text:hover,
.el-button--text:focus {
  color: var(--brand-blue-dark);
}
.el-button.is-disabled,
.el-button.is-disabled:hover {
  opacity: 0.55;
}

/* ============================================================
   5. 表单控件
   ============================================================ */
/* html 前缀是为了压过 theme/{配色}/element-ui.css —— 那是主题包自带的
   Element 样式，里面 .el-input__inner 写死 3px 圆角，与本主题 4px 打架，
   同特异性下谁后加载谁赢，出现过同一个控件在 A 页 4px、B 页 3px。 */
html .el-input__inner,
html .el-textarea__inner {
  border-radius: var(--ss-radius-btn);
  border-color: var(--border);
  /* 不写背景色会继承 Element 的 #fff，暗色下卡片是深色、输入框是白块 */
  background-color: var(--surface);
  color: var(--text-main);
  transition: border-color var(--motion-mid), box-shadow var(--motion-mid);
}
html .el-input__inner:hover,
html .el-textarea__inner:hover {
  border-color: var(--gray-4);
}
html .el-input__inner:focus,
html .el-textarea__inner:focus {
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-focus);
}
/* Element 主题包给小尺寸输入框单独锁了 3px 圆角（如
   .el-pagination .el-select .el-input .el-input__inner 特异性达 0,4,0），
   普通层叠盖不住，这里显式压到 4px，避免同一页出现两种圆角。 */
html .el-input--mini .el-input__inner,
html .el-input--small .el-input__inner {
  border-radius: var(--ss-radius-btn) !important;
}
.el-input.is-disabled .el-input__inner {
  background: var(--bg-color);
  color: var(--text-5);
}
.el-form-item__label {
  color: var(--text-2);
  font-weight: 500;
}
.el-select-dropdown__item.selected {
  color: var(--brand-blue);
  font-weight: 600;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.el-checkbox__input.is-checked + .el-checkbox__label,
.el-radio__input.is-checked + .el-radio__label {
  color: var(--brand-blue);
}
.el-switch.is-checked .el-switch__core {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}

/* ============================================================
   6. 表格（验收项⑤：行高与分隔线对齐 demo base/ui.css）
   demo .data-table：th 12px 16px / 11px 700 / 浅底；td 16px / 1px 分隔
   ============================================================ */
.el-table {
  font-size: var(--fs-13);
  color: var(--text-2);
  /* Element 自带 .el-table{background:#fff} / .el-table tr{background:#fff}，
     暗色下整块发白。表格底色跟卡片走，行透明，固定列单独给不透明底（否则横向滚动会透字）。 */
  background-color: var(--surface);
}
.el-table tr {
  background-color: transparent;
}
.el-table td.el-table__cell {
  background-color: transparent;
}
.el-table__fixed,
.el-table__fixed-right {
  background-color: var(--surface);
}
/* 固定列浮在滚动内容之上，必须有一道投影才读得出"这是浮起来的"。
   没有投影时，被压住的那一列会像是被裁掉了半截（财务页的"支付方式"就是这样）。 */
.el-table__fixed-right {
  box-shadow: -10px 0 12px -10px rgba(15, 23, 42, .28);
}
.el-table__fixed-right::before,
.el-table__fixed::before {
  background-color: var(--divider);
}
/* Element 用 `.el-table th.el-table__cell.is-leaf{border-bottom:1px solid #ebeef5}`
   盖掉了上面的分隔线，暗色下就成了一条发亮的白线 */
.el-table th.el-table__cell.is-leaf {
  border-bottom-color: var(--divider);
}
/* 表头与首页手写表格（.ss-table）统一：等宽字体、全大写、拉开字距、次要色。
   原来是 12px/500 的正文字体，和卡片里其他标记（分区标记、图例）不是一个系统，
   表格看起来像另一套产品。 */
.el-table th.el-table__cell {
  background-color: var(--accent-tint);
  color: var(--text-5);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  /* 左右内距由下面的 .cell 承担，放在 th 上会被 Element 的 cell 内边距叠加 */
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
/* 单元格左右内距统一 16px（Element 默认 10px，与 demo 的 16px 不符）。
   统一后通栏卡内的表格与弹性卡内的表格左右对齐一致，不再各自打补丁。 */
.el-table th.el-table__cell > .cell,
.el-table td.el-table__cell > .cell {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}
.el-table td.el-table__cell {
  padding: 12px 0;
  border-bottom: 1px solid var(--divider);
  color: var(--text-main);
  /* 数字等宽：金额、日期、IP 多行并排时能对齐，纵向扫读更稳 */
  font-variant-numeric: tabular-nums;
}
.el-table--border,
.el-table--group {
  border-color: var(--card-border);
}
.el-table::before {
  display: none;
}
.el-table__body tr:hover > td.el-table__cell {
  background-color: var(--accent-tint) !important;
}
.el-table__empty-block {
  min-height: 160px;
}
.el-table__empty-text {
  color: var(--text-5);
  font-size: var(--fs-13);
}

/* ============================================================
   7. 标签页（对齐 demo：下划线 + 加粗选中）
   ============================================================ */
.el-tabs__item {
  height: 40px;
  line-height: 40px;
  font-size: var(--fs-14);
  color: var(--text-2);
  font-weight: 500;
}
.el-tabs__item.is-active {
  color: var(--brand-blue);
  font-weight: 700;
}
.el-tabs__item:hover {
  color: var(--brand-blue);
}
.el-tabs__active-bar {
  background-color: var(--brand-blue);
  height: 2px;
}
.el-tabs__nav-wrap::after {
  height: 1px;
  background-color: var(--divider);
}

/* ============================================================
   8. 分页
   ============================================================ */
.el-pagination {
  font-weight: 400;
  color: var(--text-2);
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: var(--brand-blue);
}
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: var(--brand-blue);
}
.el-pager li.active {
  color: var(--brand-blue);
}
.el-pager li:hover {
  color: var(--brand-blue);
}

/* ============================================================
   9. 弹窗
   ============================================================ */
.el-dialog {
  /* 卡片是 8px，弹窗原本是直角，同屏出现两种形态。统一到 --ss-radius-card */
  border-radius: var(--ss-radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-modal);
}
.el-dialog__header {
  padding: 18px var(--space-24) var(--space-12);
  border-bottom: 1px solid var(--divider);
}
.el-dialog__title {
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--text-main);
}
.el-dialog__body {
  padding: var(--space-20) var(--space-24);
  color: var(--text-2);
  font-size: var(--fs-13);
}
.el-dialog__footer {
  padding: var(--space-12) var(--space-24) var(--space-20);
}
.el-message-box {
  border-radius: var(--ss-radius-card);
}
.el-message-box__title {
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--text-main);
}

/* 抽屉（部分插件页使用） */
.el-drawer__header {
  margin-bottom: 0;
  padding: 18px var(--space-24) var(--space-12);
  border-bottom: 1px solid var(--divider);
  color: var(--text-main);
  font-weight: 700;
}

/* ============================================================
   10. 提示与标签
   ============================================================ */
.el-alert {
  border-radius: var(--ss-radius-btn);
}
.el-tag {
  border-radius: var(--ss-radius-btn);
  /* 与共享徽标 .ss-tag 同一档字号，否则同一屏上「已读/未读」11px、
     工单状态 12px，看起来像两套组件 */
  font-size: var(--fs-11);
  font-weight: 700;
  padding: 0 8px;
  /* 行高由标签自身占满，行高 23 = 表格数据的单行文字高度。
     不锁死的话 Element 默认 line-height:30 + 上下 1px 边框 = 32，
     会把带状态标签的表格行从 56 顶到 65（实测 finance.htm）。 */
  height: 23px;
  line-height: 21px;
  box-sizing: border-box;
  padding: 0 var(--space-8);
  /* 不设 vertical-align 时标签按基线对齐，行盒会在下方多留 1px 下沉空间，
     让容器 .cell 从 23 变 24，行高就卡在 57 而不是 56。 */
  vertical-align: top;
}
.el-tag--primary {
  background: var(--brand-blue-tint-10);
  border-color: transparent;
  color: var(--brand-blue);
}
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.72);
}

/* 步骤条（合同签署使用） */
.el-step__title.is-process {
  color: var(--brand-blue);
  font-weight: 700;
}
.el-step__head.is-process {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}

/* ============================================================
   10.5 浮层（弹出层统一皮肤）
   Element 出厂浮层是园角 4 + #e4e7ed 边框 + 0 2px 12px 阴影，
   与主题的直角、1px 细边框、冷灰大阴影不一致；页面静态看没问题，
   一点开下拉/日期就穿帮。这里把 popper 基座、下拉、日期面板、
   日期单元格、浮层滚动条一次性接管，全站共用。
   ============================================================ */

/* --- 10.5.1 浮层基座 --- */
.el-popper {
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--ss-radius-btn);
  box-shadow: var(--shadow-dropdown);
  color: var(--text-2);
  font-family: var(--font-main);
}
.el-popper[x-placement^="bottom"] {
  margin-top: 6px;
}
.el-popper[x-placement^="top"] {
  margin-bottom: 6px;
}
/* demo 的浮层是贴边方块、不带箭头；只有 tooltip 需要指向性，单独保留 */
.el-popper .popper__arrow {
  display: none;
}

/* --- 10.5.2 下拉（select / dropdown / autocomplete 共用） --- */
.el-select-dropdown,
.el-dropdown-menu,
.el-autocomplete-suggestion {
  padding: 4px 0;
  border: 1px solid var(--card-border);
  border-radius: var(--ss-radius-btn);
  box-shadow: var(--shadow-dropdown);
}
.el-select-dropdown__wrap,
.el-autocomplete-suggestion__wrap {
  max-height: 268px;
}
.el-select-dropdown__item,
.el-dropdown-menu__item {
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
  font-size: var(--fs-13);
  color: var(--text-2);
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover,
.el-dropdown-menu__item:not(.is-disabled):hover,
.el-dropdown-menu__item:focus {
  background: var(--accent-tint);
  color: var(--text-main);
}
.el-select-dropdown__item.selected {
  background: var(--accent-soft);
  color: var(--brand-blue);
  font-weight: 600;
}
.el-select-dropdown__item.selected.hover {
  background: var(--accent-soft);
}
.el-select-dropdown__item.selected::after {
  right: 12px;
  border-color: var(--brand-blue);
}
.el-select-dropdown__empty,
.el-autocomplete-suggestion__list li {
  padding: 10px 12px;
  font-size: var(--fs-13);
  color: var(--text-4);
}
.el-dropdown-menu__item--divided {
  margin-top: 4px;
  border-top: 1px solid var(--divider);
}
.el-dropdown-menu__item--divided::before {
  display: none;
}

/* --- 10.5.3 日期 / 时间选择器 --- */
.el-picker-panel {
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--ss-radius-btn);
  box-shadow: var(--shadow-dropdown);
  color: var(--text-2);
  font-family: var(--font-main);
}
.el-picker-panel__icon-btn {
  color: var(--text-4);
  font-size: var(--fs-13);
  margin-top: 6px;
}
.el-picker-panel__icon-btn:hover {
  color: var(--brand-blue);
}
.el-picker-panel__footer {
  padding: 8px 12px;
  background: var(--surface);
  border-top: 1px solid var(--divider);
}
.el-picker-panel__shortcut {
  font-size: var(--fs-13);
  color: var(--text-4);
}
.el-picker-panel__shortcut:hover {
  color: var(--brand-blue);
}
.el-date-picker__header {
  margin: 12px 12px 6px;
}
.el-date-picker__header-label {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text-main);
}
.el-date-picker__header-label.active,
.el-date-picker__header-label:hover {
  color: var(--brand-blue);
}
.el-picker-panel__content {
  width: 292px;
  margin: 0 12px 8px;
}
.el-date-table th {
  padding: 6px 0;
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--text-5);
  border-bottom: 1px solid var(--divider);
}
.el-date-table td {
  padding: 2px 0;
}
.el-date-table td span,
.el-date-table td div {
  height: 30px;
  line-height: 30px;
  border-radius: var(--ss-radius-btn);
}
.el-date-table td.available:hover {
  color: var(--brand-blue);
}
.el-date-table td.today span {
  color: var(--brand-blue);
  font-weight: 700;
}
.el-date-table td.current:not(.disabled) span,
.el-date-table td.start-date span,
.el-date-table td.end-date span {
  background: var(--brand-blue);
  color: #fff;
}
.el-date-table td.in-range div,
.el-date-table td.in-range div:hover {
  background: var(--accent-soft);
}
.el-date-table td.next-month,
.el-date-table td.prev-month {
  color: var(--text-5);
}
.el-date-table td.disabled div {
  background: var(--bg-color);
  color: var(--text-5);
}
.el-month-table td .cell,
.el-year-table td .cell {
  height: 40px;
  line-height: 40px;
  border-radius: var(--ss-radius-btn);
  font-size: var(--fs-13);
  color: var(--text-2);
}
.el-month-table td.today .cell,
.el-year-table td.today .cell {
  color: var(--brand-blue);
  font-weight: 700;
}
.el-month-table td.current:not(.disabled) .cell,
.el-year-table td.current:not(.disabled) .cell {
  background: var(--brand-blue);
  color: #fff;
}
.el-time-panel {
  border: 1px solid var(--card-border);
  border-radius: var(--ss-radius-btn);
  box-shadow: var(--shadow-dropdown);
}
.el-time-panel__content::after,
.el-time-panel__content::before {
  border-top-color: var(--divider);
  border-bottom-color: var(--divider);
}
.el-time-spinner__item {
  font-size: var(--fs-13);
  color: var(--text-4);
}
.el-time-spinner__item:hover:not(.disabled):not(.active) {
  background: var(--accent-tint);
}
.el-time-spinner__item.active:not(.disabled) {
  color: var(--text-main);
  font-weight: 700;
}

/* --- 10.5.4 浮层滚动条 --- */
.el-scrollbar__bar {
  opacity: 1;
  z-index: 3;
}
.el-scrollbar__thumb {
  background: rgba(0, 0, 0, .16);
  border-radius: 0;
  opacity: 1;
  transition: background var(--motion-fast);
}
.el-scrollbar__thumb:hover {
  background: rgba(0, 0, 0, .30);
}

/* --- 10.5.5 tooltip（唯一保留箭头的浮层） --- */
.el-tooltip__popper.is-dark {
  padding: 6px 10px;
  background: var(--toast-bg);
  border: none;
  border-radius: var(--ss-radius-btn);
  font-size: var(--fs-12);
  color: #fff;
  box-shadow: var(--shadow-dropdown);
}
.el-tooltip__popper.is-dark .popper__arrow {
  display: block;
  border-color: transparent;
}
.el-tooltip__popper.is-dark[x-placement^="top"] .popper__arrow {
  border-top-color: var(--toast-bg);
}
.el-tooltip__popper.is-dark[x-placement^="top"] .popper__arrow::after {
  border-top-color: var(--toast-bg);
}
.el-tooltip__popper.is-dark[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: var(--toast-bg);
}
.el-tooltip__popper.is-dark[x-placement^="bottom"] .popper__arrow::after {
  border-bottom-color: var(--toast-bg);
}
.el-tooltip__popper.is-dark[x-placement^="left"] .popper__arrow {
  border-left-color: var(--toast-bg);
}
.el-tooltip__popper.is-dark[x-placement^="left"] .popper__arrow::after {
  border-left-color: var(--toast-bg);
}
.el-tooltip__popper.is-dark[x-placement^="right"] .popper__arrow {
  border-right-color: var(--toast-bg);
}
.el-tooltip__popper.is-dark[x-placement^="right"] .popper__arrow::after {
  border-right-color: var(--toast-bg);
}

/* --- 10.5.6 popover（内容浮层） --- */
.el-popover {
  padding: 12px;
  font-size: var(--fs-13);
  color: var(--text-2);
}
.el-popover__title {
  margin-bottom: 8px;
  font-size: var(--fs-13);
  font-weight: 700;
  color: var(--text-main);
}

/* --- 10.5.7 message（顶部提示） ---
   demo 的 toast（base/ui.css:7-24）：fixed top 24 / 水平居中 / 10px 24px 内距 /
   实底色块白字 / fs-13 粗体 / --shadow-toast / 直角。Element 默认是顶部居中
   悬浮白底描边圆角条，方向与观感都对不上，这里整体接管。 */
.el-message {
  height: auto;
  /* Element 默认 min-width:380，短提示会被撑成一条长条；
     demo toast 是内容宽度 + 24px 内距，这里归零让它贴合内容 */
  min-width: 0;
  padding: 10px var(--space-24);
  border: none;
  border-radius: 0;
  background: var(--toast-bg);
  box-shadow: var(--shadow-toast);
  font-size: var(--fs-13);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.el-message .el-message__content {
  font-size: var(--fs-13);
  font-weight: 700;
  line-height: normal;
  color: #fff;
}
/* 图标随底色同白，去掉 Element 自带的状态色描边感 */
.el-message .el-message__icon {
  font-size: var(--fs-16);
  color: #fff;
}
.el-message .el-message__closeBtn {
  color: rgba(255, 255, 255, .8);
}
.el-message .el-message__closeBtn:hover {
  color: #fff;
}
/* 四种状态只换底色，字体与布局不回落 Element 默认 */
.el-message--success {
  background: var(--toast-bg);
}
.el-message--error {
  background: var(--danger);
}
.el-message--warning {
  background: var(--warning-dark);
}
.el-message--info {
  background: var(--toast-bg);
}

/* --- 10.5.8 notification（右上角通知） ---
   demo 无对应组件；沿用 toast 的设计语言：直角、实底、白字、
   --shadow-toast 阴影、fs-13，只是落位在右上角并允许换行。 */
.el-notification {
  width: 330px;
  border: 1px solid var(--card-border);
  border-radius: 0;
  box-shadow: var(--shadow-toast);
}
.el-notification__title {
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text-main);
}
.el-notification__content {
  font-size: var(--fs-13);
  color: var(--text-2);
}
.el-notification__closeBtn {
  color: var(--text-5);
}
.el-notification__closeBtn:hover {
  color: var(--text-3);
}

/* --- 10.5.9 loading（v-loading 遮罩） ---
   demo 无全屏 loading；只接管文字与主色。遮罩底色已由
   第 10 节的 .el-loading-mask 统一为 rgba(255,255,255,.72)。 */
.el-loading-spinner .el-loading-text {
  margin-top: 6px;
  font-size: var(--fs-13);
  color: var(--text-3);
}
.el-loading-spinner .path {
  stroke: var(--brand-blue);
}

/* --- 10.5.10 message-box（确认框）补齐按钮与内容 ---
   9 节已接管标题与圆角，这里补内容字号、按钮皮肤，
   让它和 demo modal（head 58 / foot 13px 20px 内距 / 34px 高按钮）一致。 */
.el-message-box__content {
  font-size: var(--fs-13);
  color: var(--text-2);
}
.el-message-box__btns .el-button {
  min-width: 74px;
  height: 34px;
  padding: 0 var(--space-16);
  font-size: var(--fs-12);
  font-weight: 700;
  border-radius: var(--ss-radius-btn);
}
.el-message-box__btns .el-button--primary {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
}
.el-message-box__btns .el-button--primary:hover,
.el-message-box__btns .el-button--primary:focus {
  background: var(--brand-blue-dark);
  border-color: var(--brand-blue-dark);
}

/* ============================================================
   11. 响应式（顶栏三档在 1 节末尾：900 / 700 / 480，与 demo 同值）
   侧栏让位与主内容收窄在此节处理：
   - <700 侧栏隐藏（与 demo console.css 的 700 断点对齐，同时是汉堡按钮出现的断点）
   - <1200 主内容左右收窄
   ============================================================ */
@media (max-width: 1200px) {
  html .el-main {
    padding-left: var(--space-20) !important;
    padding-right: var(--space-20) !important;
  }
}

@media (max-width: 700px) {
  .el-aside.ss-aside {
    display: none;
  }
  .el-aside.ss-aside + .el-container {
    margin-left: 0;
    width: 100%;
  }
  .el-header {
    left: 0;
  }
  html .el-main {
    padding: 76px var(--space-16) var(--space-32) !important;
  }
  .ss-card,
  .main-card {
    padding: var(--space-16);
  }
}

/* ============================================================
   12. mfconsole 消息弹窗提醒（topMenu 挂载）
   ============================================================ */
.ss-msg-popup-wrap {
  position: fixed;
  right: var(--space-24);
  bottom: var(--space-24);
  /* 必须低于弹窗层（遮罩 1200 / 弹窗 1201），否则用户正在填表时会被通知卡遮住；
     高于顶栏 1000，保证在壳层之上可见 */
  z-index: 1190;
  width: 320px;
}
.ss-msg-popup {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--ss-radius-card);
  box-shadow: var(--shadow-dropdown);
  overflow: hidden;
}
.ss-msg-popup-head {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 14px var(--space-16) 0;
}
.ss-msg-popup-badge {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
}
.ss-msg-popup-title {
  flex: 1;
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--text-main);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-msg-popup-close {
  flex: none;
  cursor: pointer;
  color: var(--text-5);
  font-size: var(--fs-14);
}
.ss-msg-popup-close:hover {
  color: var(--text-main);
}
.ss-msg-popup-body {
  padding: 10px var(--space-16) var(--space-4);
  font-size: var(--fs-12);
  line-height: var(--lh-copy-lg);
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ss-msg-popup-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--space-16) 14px;
}
.ss-msg-popup-time {
  font-size: var(--fs-12);
  color: var(--text-5);
  font-variant-numeric: tabular-nums;
}
.ss-msg-popup-link {
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--brand-blue);
  cursor: pointer;
}
.ss-msg-popup-link:hover {
  color: var(--brand-blue-dark);
}

@media (max-width: 768px) {
  .ss-msg-popup-wrap {
    right: var(--space-12);
    left: var(--space-12);
    bottom: var(--space-12);
    width: auto;
  }
}

/* ============================================================
   15. 图形验证码弹窗（tp_captcha 后端直出，内联样式旧：rem 尺寸、
       #0058FF 按钮、灰遮罩、5px 圆角。此处统一覆盖为主题语言，
       登录 / 注册 / 找回密码 / 合同签署等所有调用点同步生效）
   ============================================================ */
#captcha-outer {
  background: rgba(15, 23, 42, .45) !important;
  backdrop-filter: blur(3px);
}
#captcha-outer .captcha-content {
  width: 500px !important;
  max-width: calc(100vw - 32px);
  left: 50% !important;
  top: 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  padding: var(--space-24) !important;
  border-radius: var(--ss-radius-card) !important;
  box-shadow: 0 12px 40px rgba(15, 23, 42, .18) !important;
  box-sizing: border-box;
}
#captcha-outer .captcha-title {
  font-size: var(--fs-16) !important;
  font-weight: 700;
  line-height: 1.3 !important;
  color: var(--text-main);
}
#captcha-outer .captcha-main {
  padding-left: 0 !important;
  margin-top: var(--space-16) !important;
  align-items: center;
}
#captcha-outer #captcha-input {
  flex: 1;
  width: auto !important;
  height: 44px !important;
  margin-right: 10px !important;
  padding: 0 12px !important;
  border: 1px solid var(--card-border);
  border-radius: var(--ss-radius-btn);
  font-size: var(--fs-13);
  color: var(--text-main);
  background: var(--surface);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--motion-mid), box-shadow var(--motion-mid);
}
#captcha-outer #captcha-input:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--brand-blue-tint-08);
}
#captcha-outer #captcha-img {
  /* 只限宽不限高、不裁切：tp_captcha 返回的是固定宽高比的验证码图，
     之前 object-fit:cover + 限高 36 把图上下切掉了。让图按原比例完整展示。
     96px 太窄看不清字符，放大到约 2 倍（192px，高按比例约 47px）。 */
  width: 192px !important;
  height: auto !important;
  max-height: 60px;
  object-fit: contain;
  border: 1px solid var(--card-border);
  border-radius: var(--ss-radius-btn);
  align-self: center;
}
#captcha-outer #captcha-error-text {
  margin: 8px 0 0;
  font-size: var(--fs-12) !important;
  color: var(--danger) !important;
  min-height: 1em;
}
#captcha-outer .captcha-footer {
  margin-top: var(--space-20) !important;
  gap: 10px;
}
#captcha-outer #check-btn,
#captcha-outer #cancel-btn {
  height: 40px !important;
  padding: 0 20px;
  border-radius: var(--ss-radius-btn) !important;
  font-size: var(--fs-13) !important;
  font-weight: 700;
  transition: background var(--motion-mid), border-color var(--motion-mid), color var(--motion-mid);
}
#captcha-outer #check-btn {
  background: var(--brand-blue) !important;
  border: 1px solid var(--brand-blue) !important;
  color: #fff !important;
}
#captcha-outer #check-btn:hover {
  background: var(--brand-blue-dark) !important;
}
#captcha-outer #cancel-btn {
  background: var(--surface) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--text-3) !important;
  margin-left: 0 !important;
}
#captcha-outer #cancel-btn:hover {
  border-color: var(--brand-blue) !important;
  color: var(--brand-blue) !important;
}
@media (max-width: 750px) {
  #captcha-outer .captcha-content {
    width: calc(100vw - 32px) !important;
  }
  /* 窄屏：验证码图占宽会挤掉输入框，适当收一档 */
  #captcha-outer #captcha-img {
    width: 140px !important;
  }
  #captcha-outer #captcha-input {
    height: 40px !important;
  }
  #captcha-outer #check-btn,
  #captcha-outer #cancel-btn {
    height: 40px !important;
    font-size: var(--fs-14) !important;
  }
  #captcha-outer #cancel-btn {
    margin-top: 0 !important;
  }
}

/* ============================================================
   侧边栏暗色适配
   .ss-nav-link 的文字色是硬编码 #3d4453（为淡蓝侧栏调的），
   暗色下压在 #1a2138 上几乎不可见，这里整组重定义。
   ============================================================ */
[data-theme="dark"] .ss-nav-section {
  color: rgba(255, 255, 255, 0.42);
}
[data-theme="dark"] .ss-nav-link {
  color: rgba(255, 255, 255, 0.72);
}
[data-theme="dark"] .ss-nav-link:hover {
  color: #93c5fd;
  background: rgba(96, 165, 250, 0.12);
}
[data-theme="dark"] .ss-nav-link.is-active {
  color: #93c5fd;
  background: rgba(96, 165, 250, 0.18);
  box-shadow: none;
}
[data-theme="dark"] .ss-nav-link .ss-icon,
[data-theme="dark"] .ss-nav-link svg {
  color: rgba(255, 255, 255, 0.55);
}
[data-theme="dark"] .ss-nav-link:hover .ss-icon,
[data-theme="dark"] .ss-nav-link:hover svg,
[data-theme="dark"] .ss-nav-link.is-active .ss-icon,
[data-theme="dark"] .ss-nav-link.is-active svg {
  color: #93c5fd;
}
[data-theme="dark"] .ss-nav-sub-title {
  color: rgba(255, 255, 255, 0.62);
}
[data-theme="dark"] .ss-nav-sub-title .ss-icon,
[data-theme="dark"] .ss-nav-sub-title svg {
  color: rgba(255, 255, 255, 0.5);
}
[data-theme="dark"] .ss-nav-sub .ss-nav-link {
  color: rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .ss-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
}

/* ============================================================
   移动端兜底（≤768px）
   目标不是把每页重排成 App，而是先保证「能用」：
   不横向溢出、控件够大能点、弹窗不超屏、间距不挤成一条。
   页面级特殊布局（列表改卡片等）另在各页 CSS 里处理。
   ============================================================ */
@media (max-width: 768px) {
  /* 内容区内距收紧，把宽度让给内容 */
  .el-main {
    padding: 12px;
  }
  .ss-card,
  .cy-card,
  .main-card {
    border-radius: 12px;
  }
  .ss-card {
    padding: 14px;
  }

  /* 页面头：标题与操作纵向堆叠 */
  .ss-page-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
  }
  .ss-page-head .ss-page-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  /* 表格：横向滚动而不是把列压扁 */
  .el-table {
    font-size: var(--fs-12);
  }
  .el-table__body-wrapper,
  .el-table__header-wrapper {
    overflow-x: auto;
  }
  .el-table th,
  .el-table td {
    padding: 8px 0;
  }

  /* 表单控件触控高度 ≥ 40px */
  .el-input__inner,
  .el-select .el-input__inner,
  .el-textarea__inner {
    font-size: 14px;
  }
  .el-input__inner,
  .el-select .el-input__inner {
    height: 40px;
    line-height: 40px;
  }
  .el-button {
    min-height: 40px;
  }
  .el-button--mini,
  .el-button--small {
    min-height: 34px;
  }

  /* 弹窗：留 12px 边距，内容区可滚 */
  .el-dialog {
    width: calc(100% - 24px) !important;
    margin-top: 8vh !important;
  }
  .el-dialog__body {
    max-height: 70vh;
    overflow-y: auto;
  }
  .el-drawer {
    width: 100% !important;
  }

  /* 分页：去掉每页条数选择，保留翻页 */
  .el-pagination .el-pagination__sizes,
  .el-pagination .el-pagination__jump {
    display: none;
  }

  /* 两列栅格统一降为单列 */
  .ss-form-grid,
  .ss-acct-fields,
  .bento-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* 标签页可横向滚，不换行挤压 */
  .el-tabs__nav-wrap {
    overflow-x: auto;
  }
  .el-tabs__nav-wrap::after {
    display: none;
  }
}

/* ============================================================
   全站内容区底纹：把首页的点阵背景推广到所有控制台页面
   20px 点阵 / 18% 主色，纹理钉在视口上（滚动时不动，只有卡片在纹理上滑过）
   ============================================================ */
html .el-main {
  background-color: var(--bg-color, #f4f5f7);
  background-image: radial-gradient(circle, rgba(37, 99, 235, 0.18) 1px, transparent 1px);
  background-size: 20px 20px;
  background-attachment: fixed;
}
[data-theme="dark"] html .el-main {
  background-image: radial-gradient(circle, rgba(96, 165, 250, 0.14) 1px, transparent 1px);
}

/* ============================================================
   底纹铺满修正
   问题：点阵只加在 .el-main 上，而 .el-main 高度跟内容走——
   内容短的页面（工单详情、空列表）容器不满视口，下半截露出 body 纯色，
   出现「上半有点阵、下半是平的」断层。
   处理：
     1) body 也铺同规格点阵（20px + fixed，与 el-main 完全对齐，不会错位）
     2) el-main 至少撑满视口剩余高度，内容少也不塌
   ============================================================ */
body {
  background-color: var(--bg-color, #f4f5f7);
  background-image: radial-gradient(circle, rgba(37, 99, 235, 0.18) 1px, transparent 1px);
  background-size: 20px 20px;
  background-attachment: fixed;
}
[data-theme="dark"] body {
  background-image: radial-gradient(circle, rgba(96, 165, 250, 0.14) 1px, transparent 1px);
}
html .el-main {
  min-height: calc(100vh - var(--ss-header-h, 56px));
}