/*!
 * yang-ui.css — 氧MDUI 现代化设计系统层 (Glassmorphism + Bento Grid)
 * 加载于 mdui.min.css / bootstrap / app.min.css 之后，覆盖其视觉表现。
 * 设计原则：一致性(令牌) / 可复用性(工具类) / 可访问性 / 高性能(单层模糊+transform动画)
 */

/* ============================================================
   S1. 设计令牌 Design Tokens
   ============================================================ */
:root {
  /* 背景与表面 */
  --ui-bg: #f4f6fb;
  --ui-surface: #ffffff;
  --ui-surface-2: #f1f3f8;
  --ui-surface-muted: #e8ebf2;

  /* 玻璃（不再使用 backdrop-filter，避免 Windows 硬件加速下“鼠标移入弹窗→乱闪”；
     用较高不透明度 + 柔和光斑模拟磨砂，透明度即可读性折中） */
  --ui-glass-bg: rgba(255, 255, 255, 0.74);
  --ui-glass-bg-strong: rgba(255, 255, 255, 0.9);
  --ui-glass-nav-bg: rgba(255, 255, 255, 0.82);
  --ui-glass-border: rgba(255, 255, 255, 0.65);
  --ui-blur: 18px;
  --ui-saturate: 140%;

  /* 边框 */
  --ui-border: rgba(15, 23, 42, 0.08);
  --ui-border-strong: rgba(15, 23, 42, 0.14);

  /* 文字 */
  --ui-text: #1a2233;
  --ui-text-secondary: #5b6472;
  --ui-text-muted: #8a94a3;

  /* 品牌/语义色（主题色由下方 body.mdui-theme-primary-* 映射注入） */
  --ui-primary: #3f51b5;
  --ui-accent: #e91e63;
  --ui-primary-contrast: #ffffff;
  --ui-success: #16a34a;
  --ui-warning: #d97706;
  --ui-danger: #dc2626;
  --ui-info: #0ea5e9;

  /* 阴影（柔和悬浮阶梯） */
  --ui-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
  --ui-shadow-md: 0 10px 30px -12px rgba(15, 23, 42, 0.18), 0 4px 12px -6px rgba(15, 23, 42, 0.1);
  --ui-shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, 0.28);
  --ui-shadow-glow: 0 0 0 1px var(--ui-glass-border), 0 14px 40px -12px rgba(15, 23, 42, 0.24);

  /* 圆角 */
  --ui-radius-sm: 10px;
  --ui-radius-md: 16px;
  --ui-radius-lg: 24px;
  --ui-radius-pill: 999px;

  /* 间距 */
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-space-6: 32px;

  /* 字体 */
  --ui-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;

  /* 动效 */
  --ui-dur-1: 180ms;
  --ui-dur-2: 280ms;
  --ui-dur-3: 480ms;
  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ui-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 深色模式令牌重映射（specificity 0,2,1 压制 MDUI 的 0,2,0） */
body.mdui-theme-layout-dark {
  color-scheme: dark;
  --ui-bg: #11141b;
  --ui-surface: #1e2430;
  --ui-surface-2: #262c3a;
  --ui-surface-muted: #2e3544;
  --ui-glass-bg: rgba(30, 36, 48, 0.76);
  --ui-glass-bg-strong: rgba(30, 36, 48, 0.9);
  --ui-glass-nav-bg: rgba(18, 22, 31, 0.86);
  --ui-glass-border: rgba(255, 255, 255, 0.1);
  --ui-border: rgba(255, 255, 255, 0.08);
  --ui-border-strong: rgba(255, 255, 255, 0.14);
  --ui-text: #e7eaf0;
  --ui-text-secondary: #a9b2c0;
  --ui-text-muted: #7c8694;
  --ui-success: #4ade80;
  --ui-warning: #fbbf24;
  --ui-danger: #f87171;
  --ui-info: #38bdf8;
  --ui-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35);
  --ui-shadow-md: 0 12px 34px -14px rgba(0, 0, 0, 0.6);
  --ui-shadow-lg: 0 28px 70px -20px rgba(0, 0, 0, 0.7);
  --ui-shadow-glow: 0 0 0 1px var(--ui-glass-border), 0 14px 40px -12px rgba(0, 0, 0, 0.6);
  --ui-blur: 22px;
  --ui-saturate: 120%;
}

/* 主题色 → 令牌 映射（对齐 MDUI mdui-theme-primary-* / accent-* 色值） */
body.mdui-theme-primary-red { --ui-primary: #f44336; }
body.mdui-theme-primary-pink { --ui-primary: #e91e63; }
body.mdui-theme-primary-purple { --ui-primary: #9c27b0; }
body.mdui-theme-primary-deep-purple { --ui-primary: #673ab7; }
body.mdui-theme-primary-indigo { --ui-primary: #3f51b5; }
body.mdui-theme-primary-blue { --ui-primary: #2196f3; }
body.mdui-theme-primary-light-blue { --ui-primary: #03a9f4; }
body.mdui-theme-primary-cyan { --ui-primary: #00bcd4; }
body.mdui-theme-primary-teal { --ui-primary: #009688; }
body.mdui-theme-primary-green { --ui-primary: #4caf50; }
body.mdui-theme-primary-light-green { --ui-primary: #8bc34a; }
body.mdui-theme-primary-lime { --ui-primary: #cddc39; }
body.mdui-theme-primary-yellow { --ui-primary: #ffeb3b; }
body.mdui-theme-primary-amber { --ui-primary: #ffc107; }
body.mdui-theme-primary-orange { --ui-primary: #ff9800; }
body.mdui-theme-primary-deep-orange { --ui-primary: #ff5722; }
body.mdui-theme-primary-brown { --ui-primary: #795548; }
body.mdui-theme-primary-grey { --ui-primary: #9e9e9e; }
body.mdui-theme-primary-blue-grey { --ui-primary: #607d8b; }
body.mdui-theme-accent-red { --ui-accent: #f44336; }
body.mdui-theme-accent-pink { --ui-accent: #e91e63; }
body.mdui-theme-accent-purple { --ui-accent: #9c27b0; }
body.mdui-theme-accent-deep-purple { --ui-accent: #673ab7; }
body.mdui-theme-accent-indigo { --ui-accent: #3f51b5; }
body.mdui-theme-accent-blue { --ui-accent: #2196f3; }
body.mdui-theme-accent-light-blue { --ui-accent: #03a9f4; }
body.mdui-theme-accent-cyan { --ui-accent: #00bcd4; }
body.mdui-theme-accent-teal { --ui-accent: #009688; }
body.mdui-theme-accent-green { --ui-accent: #4caf50; }
body.mdui-theme-accent-light-green { --ui-accent: #8bc34a; }
body.mdui-theme-accent-lime { --ui-accent: #cddc39; }
body.mdui-theme-accent-yellow { --ui-accent: #ffeb3b; }
body.mdui-theme-accent-amber { --ui-accent: #ffc107; }
body.mdui-theme-accent-orange { --ui-accent: #ff9800; }
body.mdui-theme-accent-deep-orange { --ui-accent: #ff5722; }
body.mdui-theme-accent-brown { --ui-accent: #795548; }
body.mdui-theme-accent-grey { --ui-accent: #9e9e9e; }
body.mdui-theme-accent-blue-grey { --ui-accent: #607d8b; }

/* ============================================================
   S2. 基础 Base（低优先级 :where()，仅全局通用）
   ============================================================ */
:where(body) {
  font-family: var(--ui-font-sans);
  background-color: var(--ui-bg);
  color: var(--ui-text);
  color-scheme: light;
}

/* 自定义滚动条 */
:where(.mdui-container, .mdui-table-fluid, body)::-webkit-scrollbar { width: 10px; height: 10px; }
:where(.mdui-container, .mdui-table-fluid, body)::-webkit-scrollbar-thumb {
  background: var(--ui-border-strong);
  border-radius: var(--ui-radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
:where(.mdui-container, .mdui-table-fluid, body)::-webkit-scrollbar-track { background: transparent; }

::selection { background: var(--ui-primary); color: var(--ui-primary-contrast); }

:focus-visible {
  outline: 2px solid var(--ui-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================
   S3. 背景系统：固定光斑 + 全视口单层模糊
   ============================================================ */
.ui-bg-orbs {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
.ui-bg-orb {
  position: absolute;
  display: block;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  opacity: 0.5;
  will-change: transform;
  animation: ui-orb-float 16s ease-in-out infinite alternate;
}
.ui-bg-orb--1 {
  top: -12%;
  left: -8%;
  background: radial-gradient(circle at 35% 35%, var(--ui-primary), transparent 68%);
}
.ui-bg-orb--2 {
  top: 38%;
  right: -12%;
  width: 40vw;
  height: 40vw;
  background: radial-gradient(circle at 60% 40%, var(--ui-accent), transparent 66%);
  animation-duration: 20s;
  animation-delay: -4s;
}
.ui-bg-orb--3 {
  bottom: -16%;
  left: 30%;
  width: 38vw;
  height: 38vw;
  background: radial-gradient(circle at 50% 50%, var(--ui-info), transparent 64%);
  opacity: 0.4;
  animation-duration: 22s;
  animation-delay: -8s;
}
@keyframes ui-orb-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(24px, -30px, 0) scale(1.08); }
}

/* 弹窗/模态框打开时冻结光斑动画：光斑是全视口模糊板背面的唯一运动源，
   它们一动 → 模糊板每帧重采样 → 叠在上面的固定弹窗就乱闪。冻结后打开过程稳定。 */
body:has(.mdui-overlay-show) .ui-bg-orb,
body:has(.modal-backdrop.show) .ui-bg-orb,
body.modal-open .ui-bg-orb {
  animation: none;
}

/* 全视口模糊板：已移除。
   原 backdrop-filter: blur() 全视口固定层会在“弹窗内鼠标移动触发 hover 过渡 →
   合成层变化 → Chromium 反复重栅格化整块模糊板”时整帧乱闪（实测 avgDiff 35/255，
   translateZ(0) 提升为独立层也无法避免）。直接移除后不再有任何 backdrop-filter 重采样，
   光斑本身是柔和径向渐变，磨砂观感由高不透明度玻璃表面承担。 */

/* ============================================================
   S4. 玻璃工具类
   ============================================================ */
.ui-glass {
  background: var(--ui-glass-bg);
  border: 1px solid var(--ui-glass-border);
}
.ui-glass-strong {
  background: var(--ui-glass-bg-strong);
  border: 1px solid var(--ui-glass-border);
}
.ui-glass-nav {
  background: var(--ui-glass-nav-bg);
  border-bottom: 1px solid var(--ui-glass-border);
  color: var(--ui-text);
}
.ui-surface {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
}

/* ============================================================
   S5. MDUI 原语全局重构（让所有页面自动继承新皮肤）
   ============================================================ */
/* —— 卡片 —— */
.mdui-card {
  background: var(--ui-glass-bg);
  border: 1px solid var(--ui-glass-border);
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow-sm);
  color: var(--ui-text);
}
body.mdui-theme-layout-dark .mdui-card {
  background: var(--ui-glass-bg);
  border-color: var(--ui-glass-border);
  color: var(--ui-text);
}
.mdui-card-primary-title { font-weight: 700; letter-spacing: 0.01em; }
.mdui-card-primary-subtitle { color: var(--ui-text-secondary); }
.mdui-card-content { color: var(--ui-text); }
.mdui-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2);
}
/* MDUI 的 clearfix 伪元素在 flex 下会变成多余 flex item，禁用；按钮间距交给 gap */
.mdui-card-actions::before,
.mdui-card-actions::after {
  display: none;
}
.mdui-card-actions .mdui-btn {
  margin: 0;
}
.mdui-card-header-title { color: var(--ui-text); font-weight: 600; }
.mdui-card-header-subtitle { color: var(--ui-text-secondary); }

/* 悬停抬升（保留 MDUI hoverable 语义，扩展 transform 过渡） */
.mdui-hoverable {
  transition: box-shadow var(--ui-dur-2) var(--ui-ease), transform var(--ui-dur-2) var(--ui-ease),
    border-color var(--ui-dur-2) var(--ui-ease);
}
.mdui-hoverable:hover,
.mdui-hoverable:focus {
  box-shadow: var(--ui-shadow-md);
  border-color: var(--ui-border-strong);
  transform: translateY(-3px);
}

/* —— 按钮 —— */
.mdui-btn,
.mdui-fab {
  border-radius: var(--ui-radius-pill);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  transition: transform var(--ui-dur-1) var(--ui-ease-spring), box-shadow var(--ui-dur-1) var(--ui-ease),
    background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease);
}
.mdui-btn { min-height: 36px; }
.mdui-btn-raised { box-shadow: var(--ui-shadow-sm); }
.mdui-btn-raised:hover { box-shadow: var(--ui-shadow-md); transform: translateY(-1px); }
.mdui-btn:active, .mdui-btn-icon:active { transform: scale(0.96); }
.mdui-toolbar .mdui-btn-icon { min-width: 44px; min-height: 44px; }

/* —— 悬浮球 FAB —— */
.mdui-fab-wrapper .mdui-fab {
  border: 1px solid var(--ui-glass-border);
  box-shadow: var(--ui-shadow-md);
}
.mdui-fab-wrapper .mdui-fab:hover { box-shadow: var(--ui-shadow-lg); transform: translateY(-2px); }

/* —— 表格 —— */
.mdui-table-fluid {
  border-radius: var(--ui-radius-md);
  overflow: hidden;
}
.mdui-table {
  background: transparent;
  color: var(--ui-text);
}
.mdui-table thead th {
  background: var(--ui-surface-2);
  color: var(--ui-text-secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--ui-border);
}
.mdui-table tbody td { border-top: 1px solid var(--ui-border); }
body.mdui-theme-layout-dark .mdui-table thead th { background: var(--ui-surface-2); color: var(--ui-text-secondary); }

/* —— Chip —— */
.mdui-chip {
  background: var(--ui-glass-bg);
  border: 1px solid var(--ui-glass-border);
  border-radius: var(--ui-radius-pill);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-sm);
}

/* —— 标签页 Tabs —— */
.mdui-tab {
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-text-secondary);
}
.mdui-tab a { color: var(--ui-text-secondary); font-weight: 600; }
.mdui-tab .mdui-tab-active { color: var(--ui-primary); }
.mdui-tab-indicator { background-color: var(--ui-primary); }

/* —— 文本输入 —— */
.mdui-textfield-label { color: var(--ui-text-secondary); }
.mdui-textfield-input {
  color: var(--ui-text);
  border-bottom: 2px solid var(--ui-border);
}
.mdui-textfield-input:focus { border-bottom-color: var(--ui-primary); }
body.mdui-theme-layout-dark .mdui-textfield-input { color: var(--ui-text); }
.mdui-textfield-fixed .mdui-textfield-input { border-bottom-color: var(--ui-border-strong); }

/* —— 进度条 —— */
.mdui-progress { background-color: var(--ui-surface-muted); border-radius: var(--ui-radius-pill); height: 6px; }
.mdui-progress-determinate { background: linear-gradient(90deg, var(--ui-primary), var(--ui-accent)); border-radius: var(--ui-radius-pill); }

/* —— 列表 / 菜单 / 面板 —— */
.mdui-list { color: var(--ui-text); }
.mdui-list-item { color: var(--ui-text); }
/* 弹窗类元素：不用 backdrop-filter、用不透明表面。
   原因：光斑持续动画会让全视口模糊板逐帧重采样，任何半透明固定弹窗叠上去都会乱闪。
   弹窗用不透明 --ui-surface，彻底与背景解耦（视觉仍是主题表面色，仅不再透出背景运动）。 */
.mdui-menu {
  background: var(--ui-surface);
  border: 1px solid var(--ui-glass-border);
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow-md);
  color: var(--ui-text);
}
.mdui-menu-item a { color: var(--ui-text); }
.mdui-menu-item > a .mdui-menu-item-icon { color: var(--ui-text-secondary); }
body.mdui-theme-layout-dark .mdui-menu { background: var(--ui-surface-2); color: var(--ui-text); }

.mdui-panel { background: transparent; }
.mdui-panel-item {
  background: var(--ui-glass-bg);
  border: 1px solid var(--ui-glass-border);
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow-sm);
  color: var(--ui-text);
}
.mdui-panel-item-header { color: var(--ui-text); }

/* —— 对话框 —— */
.mdui-dialog {
  background: var(--ui-surface);
  border: 1px solid var(--ui-glass-border);
  border-radius: var(--ui-radius-lg);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-lg);
}
.mdui-dialog-title { color: var(--ui-text); }
.mdui-dialog-content { color: var(--ui-text); }
body.mdui-theme-layout-dark .mdui-dialog { background: var(--ui-surface-2); color: var(--ui-text); }

/* —— 弹窗乱闪根治：隐藏遮罩层 ——
   经 CDP 逐帧实测定位：乱闪的根因是 Chromium 合成器 bug —— 半透明
   固定层(.mdui-overlay 默认 rgba(0,0,0,.4) 全视口、will-change:opacity,visibility、
   过渡 opacity) 会导致叠在它上方的固定弹窗层在“鼠标移到弹窗上移动”时被
   周期性丢弃合成图层 → 白/暗帧狂闪。逐帧对比：
     overlay 原样         → 9 点扫过 3 帧暗（弹窗图层被丢）
     overlay 静止(无过渡) → 2 帧暗
     overlay display:none → 0 帧暗（彻底稳定）
  曾试在弹窗自身加 100vmax box-shadow 压暗替代遮罩，结果压暗区域本身
  被同样的 bug 周期性丢弃（明暗闪烁），故弃用。最终方案：直接隐藏遮罩
  （代价：弹窗不再有全局压暗，但绝不再闪）。 */
.mdui-overlay,
.modal-backdrop {
  display: none !important;
}
.mdui-dialog,
.mdui-menu,
.mdui-tooltip,
.modal-content {
  will-change: auto !important;
}

/* —— 弹窗打开态兜底 ——
   ⚠️ 千万不要给弹窗加 transition:none！MDUI 的打开/关闭状态机靠
   transitionend 推进：doOpen/close() 里 .transitionEnd() 等真实
   transitionend，一旦过渡被禁用该事件永不触发 → state 永久停在
   opening/closing → close() 里 .hide() 永不执行 → jQuery .show()
   留下的内联 display:block 残留 → 弹窗卡在屏幕上关不掉
   （确认/取消按钮全部“失效”，实测即此）。本版已移除 transition:none。
   下方的 .mdui-dialog-open 强制可见仅作打开态兜底（防 MDUI hide() 竞态
   把正在打开的弹窗掉掉），关闭时类被移除即不生效，不影响关闭流程。
   弹窗闪/抽搐的已根治根因：
   ① 卡片 hover 的 transform 成为 fixed 弹窗的包含块 → top 变卡片相对
      → 由 yang-ui.js fixPopupRoots 把弹窗搬到 body 末尾解决；
   ② 半透明 .mdui-overlay 的合成器掉层 → 由上方 display:none 解决。 */
.mdui-dialog.mdui-dialog-open {
  display: block !important;
}
.mdui-dialog,
.mdui-menu,
.mdui-tooltip,
.mdui-snackbar,
.mdui-dialog-actions,
.modal,
.modal-dialog,
.modal-content {
  will-change: auto !important;
}

/* —— 副标题/分割 —— */
.mdui-subheader, .mdui-subheader-inset { color: var(--ui-text-secondary); }
.mdui-divider { background-color: var(--ui-border); }

/* ============================================================
   S6. Bootstrap 等价重构（覆盖父主题与 AJAX 注入标记）
   ============================================================ */
/* —— 按钮 —— */
.btn {
  border-radius: var(--ui-radius-pill) !important;
  font-weight: 600;
  transition: transform var(--ui-dur-1) var(--ui-ease-spring), box-shadow var(--ui-dur-1) var(--ui-ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--ui-shadow-md); }
.btn-primary { background-color: var(--ui-primary); border-color: var(--ui-primary); }
.btn-outline-light, .btn-secondary { border-radius: var(--ui-radius-pill) !important; }

/* —— 表单控件 —— */
.form-control {
  border: 1px solid var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background-color: var(--ui-glass-bg);
  color: var(--ui-text);
}
.form-control:focus {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ui-primary) 25%, transparent);
}
body.mdui-theme-layout-dark .form-control { background-color: var(--ui-surface); color: var(--ui-text); }
.form-group label, .col-form-label { color: var(--ui-text-secondary); }
.input-group > .form-control, .input-group > .input-group-append > .form-control { border-radius: var(--ui-radius-sm); }

/* —— 模态框 —— */
.modal-content {
  background: var(--ui-surface);
  border: 1px solid var(--ui-glass-border);
  border-radius: var(--ui-radius-lg);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-lg);
}
.modal-header, .modal-footer { border-color: var(--ui-border); }
body.mdui-theme-layout-dark .modal-content { background: var(--ui-surface-2); color: var(--ui-text); }
body.mdui-theme-layout-dark .modal-header, body.mdui-theme-layout-dark .modal-footer { border-color: var(--ui-border); }

/* —— 分页（覆盖原生 Bootstrap .page-link 与 bst() 转换后的 .mdui-btn 两条路径） —— */
.pagination { gap: 6px; margin-bottom: 0; }

/* 翻页按钮：清晰的玻璃胶囊（在玻璃卡上可读），hover 主题色浮起，active 主题色辉光 */
.pagination .page-link,
.pagination-sm .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 0.7rem;
  margin: 0;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  color: var(--ui-text);
  border-radius: var(--ui-radius-pill);
  font-weight: 500;
  line-height: 1;
  transition: transform var(--ui-dur-1) var(--ui-ease-spring), box-shadow var(--ui-dur-1) var(--ui-ease),
    background-color var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease),
    border-color var(--ui-dur-1) var(--ui-ease);
}
.pagination-sm .page-link { min-width: 32px; height: 32px; padding: 0 0.6rem; font-size: 0.875rem; }
/* 覆盖 Bootstrap first/last-child 的 3.2px 圆角，两端按钮也是完整胶囊 */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link { border-radius: var(--ui-radius-pill); }
.pagination .page-link:hover {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-primary-contrast);
  box-shadow: var(--ui-shadow-sm);
  transform: translateY(-1px);
}
.pagination .page-item.active .page-link {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-primary-contrast);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ui-primary) 35%, transparent);
  font-weight: 600;
}
.pagination .page-item.disabled .page-link {
  background: var(--ui-surface-muted);
  border-color: transparent;
  color: var(--ui-text-muted);
  opacity: 0.55;
  box-shadow: none;
  transform: none;
}
.pagination .page-link:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }

/* 暗色适配（--ui-surface 已自适应，这里统一边框即可） */
body.mdui-theme-layout-dark .pagination .page-link { border-color: var(--ui-border-strong); }

/* bst() 转换路径：.page-link → mdui-btn mdui-btn-icon mdui-btn-dense */
.mdui-table-fluid .pagination .mdui-btn.mdui-btn-icon.mdui-btn-dense,
.table-pagination .pagination .mdui-btn.mdui-btn-icon.mdui-btn-dense {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-pill) !important;
  color: var(--ui-text);
  margin: 0 2px;
  min-width: 32px;
  height: 32px;
}
.mdui-table-fluid .pagination .mdui-btn.mdui-btn-icon.mdui-btn-dense:hover,
.table-pagination .pagination .mdui-btn.mdui-btn-icon.mdui-btn-dense:hover {
  background: var(--ui-primary);
  color: var(--ui-primary-contrast);
}
.mdui-table-fluid .pagination .page-item.active .mdui-btn,
.table-pagination .pagination .page-item.active .mdui-btn {
  background: var(--ui-primary);
  color: var(--ui-primary-contrast);
  border-color: var(--ui-primary);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--ui-primary) 35%, transparent);
}

/* —— 表头工具条（父主题 table-header 等） —— */
.table-header, .table-filter, .table-search { background: transparent; }
.table-header h6, .table-filter h6 { color: var(--ui-text); }

/* 「共 X 条 / 每页 N 条」信息条：一体玻璃胶囊，下拉内嵌 */
.table-pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}
.table-pageinfo {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  padding: 5px 14px;
  background: var(--ui-glass-bg);
  border: 1px solid var(--ui-glass-border);
  border-radius: var(--ui-radius-pill);
  color: var(--ui-text-secondary);
  font-size: 0.875rem;
  white-space: nowrap;
}
.table-pageinfo select,
.table-pageinfo #limitSel {
  appearance: none;
  -webkit-appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239088a0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  border: none;
  color: var(--ui-text);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  padding: 2px 20px 2px 4px;
  cursor: pointer;
  color-scheme: light;
}
.table-pageinfo select:hover,
.table-pageinfo #limitSel:hover { color: var(--ui-primary); }
.table-pageinfo select:focus,
.table-pageinfo #limitSel:focus { outline: none; color: var(--ui-primary); }
body.mdui-theme-layout-dark .table-pageinfo select,
body.mdui-theme-layout-dark .table-pageinfo #limitSel {
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a9b4c6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.table-pageinfo select option,
.table-pageinfo #limitSel option {
  background-color: var(--ui-surface);
  color: var(--ui-text);
}
body.mdui-theme-layout-dark .table-pageinfo select option,
body.mdui-theme-layout-dark .table-pageinfo #limitSel option {
  background-color: var(--ui-surface-2);
  color: var(--ui-text);
}
/* 主题化下拉（yangUI 替换原生 select 弹窗；面板 position:fixed 挂 body） */
.ui-select { position: relative; display: inline-block; vertical-align: middle; }
.ui-select__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; padding: 2px 4px;
  color: var(--ui-text); font-weight: 600; font-size: 0.875rem; line-height: 1.2;
  font-family: inherit; cursor: pointer;
  border-radius: 6px;
}
.ui-select__trigger:hover { color: var(--ui-primary); }
.ui-select__trigger:focus-visible { outline: 2px solid var(--ui-primary); outline-offset: 2px; }
.ui-select__caret {
  width: 10px; height: 6px; flex: 0 0 auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239088a0' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  transition: transform var(--ui-dur-1) var(--ui-ease);
}
.ui-select.is-open .ui-select__caret { transform: rotate(180deg); }
body.mdui-theme-layout-dark .ui-select__caret {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a9b4c6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.ui-select__panel {
  position: fixed; z-index: 2400;
  margin: 0; padding: 4px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-shadow-md);
  overflow: hidden;
}
body.mdui-theme-layout-dark .ui-select__panel { background: var(--ui-surface); border-color: var(--ui-border-strong); }
.ui-select__item {
  display: block; width: 100%; text-align: left;
  padding: 8px 14px; border: none; background: transparent;
  color: var(--ui-text); font-size: 0.875rem; font-weight: 500;
  font-family: inherit; border-radius: 8px; cursor: pointer;
  transition: background var(--ui-dur-1) var(--ui-ease), color var(--ui-dur-1) var(--ui-ease);
}
.ui-select__item:hover { background: var(--ui-primary); color: var(--ui-primary-contrast); }
.ui-select__item.is-selected {
  background: color-mix(in srgb, var(--ui-primary) 12%, transparent);
  color: var(--ui-primary); font-weight: 600;
}
.ui-select__item.is-selected:hover { background: var(--ui-primary); color: var(--ui-primary-contrast); }
.ui-select__native {
  position: absolute !important; width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important;
  border: 0 !important; padding: 0 !important; margin: 0 !important;
  clip: rect(0 0 0 0) !important; overflow: hidden !important;
}
.search-box { border-radius: var(--ui-radius-pill); background: var(--ui-glass-bg); border: 1px solid var(--ui-glass-border); }
.search-box .search-icon { color: var(--ui-text-secondary); }

/* —— 徽章 —— */
.badge { border-radius: var(--ui-radius-pill); font-weight: 600; }
.badge-pill { border-radius: var(--ui-radius-pill); box-shadow: var(--ui-shadow-sm); }

/* —— 复选框/单选框（MDUI） —— */
.mdui-checkbox-icon, .mdui-radio-icon, .mdui-switch-icon { color: var(--ui-text-secondary); }

/* ============================================================
   S7. Bento 便当盒网格
   ============================================================ */
.ui-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--ui-space-4);
  align-items: stretch;
}
.ui-bento-item {
  grid-column: span 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  contain: layout style;
}
/* 格内卡片拉伸填满格高：消除「格子比卡片高」造成的空洞 */
.ui-bento-item > .mdui-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 0 !important; /* 抵消 mdui-m-b-1(!important)，避免格内多余边距 */
}
/* 有操作按钮的卡片：按钮沉底，内容区自然留白 */
.ui-bento-item > .mdui-card > .mdui-card-actions {
  margin-top: auto;
}
/* 无操作按钮的卡片（如服务支持）：内容垂直居中，避免大块底部留白 */
.ui-bento-item > .mdui-card:not(:has(.mdui-card-actions)) {
  justify-content: center;
}
.ui-bento-item--2 { grid-column: span 2; }
.ui-bento-item--3 { grid-column: span 3; }
.ui-bento-item--4 { grid-column: span 4; }
.ui-bento-item--6 { grid-column: span 6; }
.ui-bento-item--8 { grid-column: span 8; }
.ui-bento-item--12 { grid-column: 1 / -1; }
.ui-bento-item--row { grid-row: span 2; }
/* 跨两行的快速管理卡：内容封顶内部滚动。否则实例表有多高就把右侧两行撑多高，
   服务支持/公告被拉成 2 倍高的大空壳。封顶后右侧行高≈内容自然高，缝隙消失。 */
.ui-bento-item--row > .mdui-card > .mdui-card-content {
  max-height: 380px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 淡化滚动条：纤细 + 主题色半透明，悬停时才清晰（Firefox 用 scrollbar-width/color） */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ui-primary) 30%, transparent) transparent;
}
.ui-bento-item--row > .mdui-card > .mdui-card-content::-webkit-scrollbar { width: 6px; }
.ui-bento-item--row > .mdui-card > .mdui-card-content::-webkit-scrollbar-track { background: transparent; }
.ui-bento-item--row > .mdui-card > .mdui-card-content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ui-primary) 26%, transparent);
  border-radius: 3px;
}
.ui-bento-item--row > .mdui-card:hover > .mdui-card-content::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ui-primary) 45%, transparent);
}
/* 用户资料卡（clientarea 中唯一带 .mdui-card-header 的卡）：内容区占满 header 与
   操作按钮之间的空间，各行均分填满，消除底部留白（否则看起来比右侧账户资产矮） */
.ui-bento-item > .mdui-card:has(.mdui-card-header) > .mdui-card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

@media (max-width: 960px) {
  .ui-bento-item,
  .ui-bento-item--2, .ui-bento-item--3, .ui-bento-item--4,
  .ui-bento-item--6, .ui-bento-item--8 { grid-column: 1 / -1; }
  /* 单列布局下跨行修饰符失效，否则快速管理会独占两行留下空格 */
  .ui-bento-item--row { grid-row: span 1; }
}

/* ============================================================
   S8. 微交互 Micro-interactions
   ============================================================ */
.ui-lift {
  transition: transform var(--ui-dur-2) var(--ui-ease-spring), box-shadow var(--ui-dur-2) var(--ui-ease);
}
.ui-lift:hover { transform: translateY(-4px); box-shadow: var(--ui-shadow-md); }

.ui-scale { transition: transform var(--ui-dur-1) var(--ui-ease); }
.ui-scale:hover { transform: scale(1.03); }

.ui-glow { box-shadow: var(--ui-shadow-glow); }
.ui-glow:hover { box-shadow: var(--ui-shadow-lg); }

.ui-press { transition: transform var(--ui-dur-1) var(--ui-ease); }
.ui-press:active { transform: translateY(1px) scale(0.98); }

/* 图标微摆动 */
.mdui-card-primary-title .mdui-icon { vertical-align: -4px; margin-right: 2px; }

/* ============================================================
   S9. 滚动显现 Scroll Reveal（由 yang-ui.js 添加 .is-inview）
   ============================================================ */
.ui-js .ui-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--ui-dur-3) var(--ui-ease), transform var(--ui-dur-3) var(--ui-ease);
  will-change: opacity, transform;
}
.ui-js .ui-reveal--fade { transform: none; }
.ui-js .ui-reveal--left { transform: translateX(-28px); }
.ui-js .ui-reveal--right { transform: translateX(28px); }
.ui-js .ui-reveal--zoom { transform: scale(0.96); }
.ui-js .ui-reveal--delay-1 { transition-delay: 60ms; }
.ui-js .ui-reveal--delay-2 { transition-delay: 120ms; }
.ui-js .ui-reveal--delay-3 { transition-delay: 180ms; }
.ui-js .ui-reveal--delay-4 { transition-delay: 240ms; }
.ui-js .ui-reveal--delay-5 { transition-delay: 300ms; }
.ui-js .ui-reveal--delay-6 { transition-delay: 360ms; }
.ui-reveal.is-inview { opacity: 1; transform: none; }

/* ============================================================
   S10. 动感排版 Kinetic Typography
   ============================================================ */
.ui-kinetic {
  background: linear-gradient(90deg, var(--ui-primary), var(--ui-accent), var(--ui-primary));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: ui-kinetic 6s linear infinite;
}
@keyframes ui-kinetic {
  to { background-position: -220% center; }
}
.ui-type-grad {
  background: linear-gradient(90deg, var(--ui-primary), var(--ui-accent));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   S11. 认证页布局
   ============================================================ */
.ui-auth {
  max-width: 560px;
  margin: 28px auto;
}
.ui-auth--wide { max-width: 900px; }
.ui-auth .mdui-card { box-shadow: var(--ui-shadow-lg); }

/* ============================================================
   S12. 导航 / 抽屉 / 页脚
   ============================================================ */
/* 玻璃导航栏（移除 mdui-color-theme 后的文字颜色接管） */
.mdui-appbar.mdui-glass-nav {
  box-shadow: 0 6px 24px -12px rgba(15, 23, 42, 0.2);
}
.mdui-glass-nav .mdui-toolbar,
.mdui-glass-nav .mdui-typo-headline,
.mdui-glass-nav .mdui-typo-title,
.mdui-glass-nav .mdui-btn {
  color: var(--ui-text);
}
body.mdui-theme-layout-dark .mdui-glass-nav .mdui-toolbar,
body.mdui-theme-layout-dark .mdui-glass-nav .mdui-typo-headline,
body.mdui-theme-layout-dark .mdui-glass-nav .mdui-typo-title,
body.mdui-theme-layout-dark .mdui-glass-nav .mdui-btn { color: var(--ui-text); }
body.mdui-theme-layout-dark .mdui-glass-nav { border-bottom-color: var(--ui-border); }

/* 玻璃抽屉 */
.mdui-drawer.ui-glass-nav {
  background: var(--ui-glass-nav-bg);
  border-right: 1px solid var(--ui-glass-border);
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-md);
}
.mdui-drawer.ui-glass-nav .mdui-list-item a,
.mdui-drawer.ui-glass-nav .mdui-subheader { color: var(--ui-text); }
.mdui-drawer.ui-glass-nav .mdui-list-item .mdui-icon { color: var(--ui-text-secondary); }
body.mdui-theme-layout-dark .mdui-drawer.ui-glass-nav { background: var(--ui-glass-nav-bg); }

/* 页脚玻璃块 */
.ui-footer {
  background: var(--ui-glass-bg);
  border: 1px solid var(--ui-glass-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-sm);
  color: var(--ui-text);
  padding: var(--ui-space-4);
}
.ui-footer a { color: var(--ui-primary); }
body.mdui-theme-layout-dark .ui-footer { background: var(--ui-glass-bg); }

/* ============================================================
   S13. 保留类兼容（仅叠加，不改名、不改布局）
   ============================================================ */
body.mdui-theme-layout-dark .dots { border-color: rgba(255, 255, 255, 0.4); }
.biankuang { border-color: var(--ui-border-strong); }
.border-hover:hover { box-shadow: var(--ui-shadow-md); }

/* ============================================================
   S14. backdrop-filter 已整体弃用
   本主题不再使用任何 backdrop-filter（全视口模糊板 + 玻璃工具类已移除）。
   原因：Windows 硬件加速下，弹窗内鼠标移动触发 hover 过渡 → 合成层变化 →
   Chromium 反复重栅格化全视口 backdrop-filter 层 → 整帧乱闪。
   磨砂观感改由高不透明度玻璃表面 + 柔和光斑承担。 */

/* ============================================================
   S15. 动效减速偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ui-bg-orb { animation: none; }
  .ui-kinetic { animation: none; }
  .ui-js .ui-reveal { opacity: 1; transform: none; transition: none; }
  .ui-lift:hover, .mdui-hoverable:hover, .mdui-btn-raised:hover, .ui-scale:hover { transform: none; }
}

/* ============================================================
   S16. 订购选配页（configureproduct / cart 购物车页）紧凑排版 + 防抖
   仅作用于购物车选配页：#addCartForm 表单区 + .configoption_total 汇总区。
   背景：默认选配页卡片 padding 24px、标题 20px、单选 48px 高，信息稀疏；
   且点付费周期时汇总区被临时替换成矮 spinner → 高度塌缩 → scroll anchoring
   把整页拽上拽下（实测 scrollY 583→256→583）。以下统一收紧 + 防抖。
   ============================================================ */

/* 防抖：禁用浏览器对该页表单/汇总区做 scroll anchoring，
   选项或付费周期切换导致的高度变化不再触发整页上下抽搐 */
#addCartForm,
.configoption_total {
  overflow-anchor: none;
}

/* 计算中遮罩（由 configureproduct.tpl 注入到 .configoption_total 上，
   覆盖在汇总内容上方而不是替换它 → 高度不塌缩、不抽搐） */
.configoption_total {
  position: relative;
}
.configoption_loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 5;
  font-size: 13px;
  color: var(--ui-text-secondary, #555);
  background: rgba(255, 255, 255, 0.82);
  border-radius: inherit;
}
body.mdui-theme-layout-dark .configoption_loading {
  background: rgba(30, 36, 48, 0.82);
  color: rgba(255, 255, 255, 0.75);
}

/* —— 选配表单紧凑化 —— */
#addCartForm.configoption_form .mdui-card {
  margin-bottom: 8px;
}
/* 卡片头（简介卡/汇总卡统一收紧） */
#addCartForm.configoption_form .mdui-card-primary {
  padding: 10px 16px !important;
}
#addCartForm.configoption_form .mdui-card-primary-title {
  font-size: 15px !important;
  line-height: 1.4 !important;
}
/* 卡片内容区 */
#addCartForm.configoption_form .mdui-card-content {
  padding: 10px 16px 14px !important;
}
/* 简介卡说明文字收紧 */
#addCartForm.configoption_form .mdui-row:first-child .mdui-card-content {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ui-text-secondary, #555);
}
/* 选配项标题：更小、行高更低、图标对齐 */
#addCartForm.configoption_form .mdui-card-content .mdui-typo-title {
  font-size: 14px;
  line-height: 1.4;
  margin: 8px 0 2px;
  display: flex;
  align-items: center;
}
#addCartForm.configoption_form .mdui-typo-title .mdui-icon {
  font-size: 18px;
  margin-right: 4px;
}
/* 选配项说明文字 */
#addCartForm.configoption_form .mdui-card-content .mdui-typo-title + div {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ui-text-secondary, #555);
}
/* 分隔线收紧 */
#addCartForm.configoption_form hr {
  margin: 8px 0;
  border-color: rgba(0, 0, 0, 0.06);
}
/* 单选/复选更紧凑（MDUI 默认高 48px，改为按内容自适应） */
#addCartForm.configoption_form .mdui-radio,
#addCartForm.configoption_form .mdui-checkbox {
  font-size: 13px;
  height: auto;
  min-height: 26px;
  line-height: 1.4;
  margin: 3px 0;
}
/* 数量 range 行收紧 */
#addCartForm.configoption_form .mdui-row.mdui-p-y-2 {
  padding: 0 !important;
  margin: 4px 0;
}
/* 主机名/密码输入框收紧 */
#addCartForm.configoption_form .mdui-textfield {
  padding-top: 2px;
  padding-bottom: 2px;
}

/* —— 订单汇总区紧凑化（ordersummary 注入内容）—— */
.configoption_total .mdui-row {
  margin-bottom: 8px;
}
.configoption_total .mdui-card-primary {
  padding: 8px 16px !important;
}
.configoption_total .mdui-card-primary-title {
  font-size: 14px !important;
  line-height: 1.4 !important;
}
.configoption_total .mdui-table th,
.configoption_total .mdui-table td {
  padding: 5px 8px !important;
  font-size: 13px;
  line-height: 1.4;
}

/* S17. 订单汇总便当盒（configureproduct 选配页）—— 可配置费用详情高卡 + 基础费用/保存配置竖排 */
.configoption_total {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-auto-rows: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}
.configoption_total > .mdui-row {
  display: flex;
  margin: 0 !important;
  padding: 0 !important;
}
.configoption_total > .mdui-row > .mdui-col-xs-12 {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  max-width: 100%;
  padding: 0;
}
.configoption_total > .mdui-row .mdui-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  margin-bottom: 0 !important;
}
/* 可配置费用详情：左列跨两行高卡（ordersummary 片段首子为 <style>，须按 div 类型计数） */
.configoption_total > .mdui-row:nth-of-type(2) {
  grid-column: 1;
  grid-row: 1 / span 2;
}
/* 实例基础费用：右上 */
.configoption_total > .mdui-row:nth-of-type(1) {
  grid-column: 2;
  grid-row: 1;
}
/* 保存配置：右下 */
.configoption_total > .mdui-row:nth-of-type(3) {
  grid-column: 2;
  grid-row: 2;
}
/* 内容居上（不高低居中） */
.configoption_total > .mdui-row .mdui-table-fluid {
  display: flex;
  flex-direction: column;
}
.configoption_total > .mdui-row .mdui-card-actions {
  margin-top: auto;
}
@media (max-width: 959px) {
  .configoption_total {
    display: block;
  }
  .configoption_total > .mdui-row {
    grid-column: auto;
    grid-row: auto;
    height: auto;
  }
}

/* S18 (p) 修复：卡片内的下拉/菜单被卡片 hover transform 锁死层叠上下文
   .mdui-hoverable:hover 的 translateY(-3px) 会创建层叠上下文，
   把内部 bootstrap-select / bootstrap dropdown / MDUI menu 的 z-index 关在卡片里；
   卡片 z-index:auto 且排在兄弟卡片之前 → 下拉与下方卡片重叠区被覆盖、无法点击。
   :has() 命中「展开中的弹层」时，解除该卡的 transform 并抬升 z-index。 */
.mdui-hoverable:has(.bootstrap-select.show),
.mdui-hoverable:has(.dropdown-menu.show),
.mdui-hoverable:has(.mdui-menu-open) {
  transform: none !important;
  z-index: 50;
}