/**
 * 后台统一主题 —— 全站唯一的换肤入口
 *
 * 结构:
 *   1) 调色板        —— 主色/语义色/中性色(改这里 = 全站换色)
 *   2) 组件变量      —— 阴影、圆角、卡片、表格、弹窗、菜单、统计…
 *   3) 页面骨架      —— 底图、进入动效、滚动条
 *   4) 布局粘合类    —— .admin-page / .admin-toolbar / .admin-block …
 *   5) 组件点缀      —— 卡片标题色条、表头、按钮投影、弹窗分隔线、外壳
 *
 * 原则:优先用 Element Plus 自己的 CSS 变量换肤;点缀层只做"层次感",
 *       不改任何组件的结构与交互。
 */

/* ============================================================
   1. 调色板
   ============================================================ */
:root {
  /* ---------- 主色(蓝) ---------- */
  --el-color-primary: #2563eb;
  --el-color-primary-light-3: #6692f1;
  --el-color-primary-light-5: #92b1f5;
  --el-color-primary-light-7: #bed0f9;
  --el-color-primary-light-8: #d3e0fb;
  --el-color-primary-light-9: #e9effd;
  --el-color-primary-dark-2: #1e4fbc;

  /* ---------- 成功(青绿) ---------- */
  --el-color-success: #10b981;
  --el-color-success-light-3: #58d0ab;
  --el-color-success-light-5: #88dcc0;
  --el-color-success-light-7: #b7e9d6;
  --el-color-success-light-8: #cfefe1;
  --el-color-success-light-9: #e7f7f0;
  --el-color-success-dark-2: #0d9467;

  /* ---------- 警告(琥珀) ---------- */
  --el-color-warning: #f59e0b;
  --el-color-warning-light-3: #f8bb55;
  --el-color-warning-light-5: #facf85;
  --el-color-warning-light-7: #fce2b6;
  --el-color-warning-light-8: #fdeccd;
  --el-color-warning-light-9: #fef5e6;
  --el-color-warning-dark-2: #c47e09;

  /* ---------- 危险(红) ---------- */
  --el-color-danger: #ef4444;
  --el-color-danger-light-3: #f47c7c;
  --el-color-danger-light-5: #f7a2a2;
  --el-color-danger-light-7: #fac7c7;
  --el-color-danger-light-8: #fcdada;
  --el-color-danger-light-9: #fdecec;
  --el-color-danger-dark-2: #bf3636;

  --el-color-error: #ef4444;
  --el-color-error-light-3: #f47c7c;
  --el-color-error-light-5: #f7a2a2;
  --el-color-error-light-7: #fac7c7;
  --el-color-error-light-8: #fcdada;
  --el-color-error-light-9: #fdecec;
  --el-color-error-dark-2: #bf3636;

  /* ---------- 信息(灰) ---------- */
  --el-color-info: #6b7280;
  --el-color-info-light-3: #979ca6;
  --el-color-info-light-5: #b5b9c0;
  --el-color-info-light-7: #d3d5d9;
  --el-color-info-light-8: #e1e3e6;
  --el-color-info-light-9: #f0f1f2;
  --el-color-info-dark-2: #565b66;

  /* ---------- 圆角 / 字号 ---------- */
  --el-border-radius-base: 8px;
  --el-border-radius-small: 6px;
  --el-border-radius-round: 999px;
  /* 全站基准字号:13px 比 Element Plus 默认的 14px 更紧凑
     (表格/按钮/输入框/表单标签都是从这里派生的,想放松改回 14px 即可) */
  --el-font-size-base: 13px;
  --el-dialog-content-font-size: 13px;

  /* ---------- 中性色(偏冷灰,更干净) ---------- */
  --el-text-color-primary: #1f2937;
  --el-text-color-regular: #4b5563;
  --el-text-color-secondary: #6b7280;
  --el-text-color-placeholder: #9ca3af;
  --el-border-color: #e2e8f0;
  --el-border-color-light: #e8edf5;
  --el-border-color-lighter: #eef2f8;
  --el-border-color-extra-light: #f5f7fb;
  --el-fill-color-light: #f4f7fb;
  --el-fill-color-lighter: #f8fafc;
  --el-bg-color-page: #f3f6fb;

  /* ---------- 主题自有变量(仅供本文件与外壳使用) ---------- */
  --admin-accent: #7c3aed;
  --admin-border-soft: #e8edf5;
  --admin-gap: 16px;
  --admin-gap-sm: 8px;
  --admin-content-max: 1600px;
  --admin-ring: 0 0 0 3px rgba(37, 99, 235, 0.12);

  /* ---------- 控件宽度口径(全站统一,别再各页写零散 px) ---------- */
  --admin-field-w: 220px;      /* 工具条里的搜索/文本输入 */
  --admin-field-w-sm: 150px;   /* 工具条里的下拉、单日期 */
  --admin-field-w-lg: 260px;   /* 工具条里的日期范围 */
  --admin-form-max: 420px;     /* 桌面端表单控件的最大宽度(手机不受限) */
}

/* ============================================================
   2. 组件变量 —— 只改变量,不动组件内部实现
   ============================================================ */
:root {
  /* 阴影:统一一套"柔和层叠"投影 */
  --el-box-shadow-lighter: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
  --el-box-shadow-light: 0 2px 6px rgba(16, 24, 40, 0.05), 0 10px 26px -14px rgba(16, 24, 40, 0.18);
  --el-box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08), 0 18px 44px -18px rgba(16, 24, 40, 0.22);
  --el-box-shadow-dark: 0 8px 24px rgba(16, 24, 40, 0.12), 0 28px 64px -22px rgba(16, 24, 40, 0.3);

  /* 卡片 */
  --el-card-border-radius: 12px;
  --el-card-padding: 18px;

  /* 表格 */
  --el-table-border-color: #edf1f7;
  --el-table-header-bg-color: #f6f9fd;
  --el-table-header-text-color: #334155;
  --el-table-text-color: #475569;
  --el-table-row-hover-bg-color: #f2f7ff;
  --el-table-current-row-bg-color: #e9f1ff;

  /* 弹窗 / 下拉 / 遮罩 */
  --el-dialog-border-radius: 14px;
  --el-dialog-padding-primary: 18px;
  --el-messagebox-border-radius: 14px;
  --el-popover-border-radius: 12px;
  --el-overlay-color-lighter: rgba(15, 23, 42, 0.5);

  /* 输入 / 分页 / 标签 / 折叠面板 */
  --el-input-border-radius: 8px;
  --el-pagination-border-radius: 8px;
  --el-tag-border-radius: 6px;
  --el-collapse-header-height: 48px;
  --el-collapse-header-bg-color: #f8fafd;
  --el-alert-border-radius-base: 10px;
  --el-alert-padding: 12px 14px;

  /* 侧边菜单 */
  --el-menu-item-height: 44px;
  --el-menu-sub-item-height: 40px;
  --el-menu-item-font-size: 14px;
  --el-menu-hover-bg-color: #f2f7ff;

  /* 统计数字 */
  --el-statistic-title-font-size: 13px;
  --el-statistic-title-color: #64748b;
  --el-statistic-content-font-size: 26px;
  --el-statistic-content-font-weight: 700;
  --el-statistic-content-color: #0f172a;
}

/* ============================================================
   3. 页面骨架
   ============================================================ */

/* 底色:一层浅冷灰 + 两团极淡的品牌色光晕(固定,不随滚动) */
body.admin-body {
  margin: 0;
  background-color: var(--el-bg-color-page);
  background-image:
    radial-gradient(1000px 460px at 0% -12%, rgba(37, 99, 235, 0.1), transparent 62%),
    radial-gradient(820px 420px at 100% -8%, rgba(124, 58, 237, 0.09), transparent 60%),
    linear-gradient(180deg, #f7f9fd 0%, #f2f5fb 48%, #eef2f9 100%);
  background-attachment: fixed;
  color: var(--el-text-color-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Vue 挂载前隐藏模板,避免闪现原始标签 */
[v-cloak] {
  display: none;
}

/* 页面进入动效
 *
 * ⚠️ 这里只允许动 opacity,绝对不要加 transform / filter / backdrop-filter!
 *
 * 页面里的 el-dialog 默认不 append-to-body,遮罩层 .el-overlay 就挂在
 * .admin-page 内部。只要 .admin-page 身上(哪怕最终值)有 transform,
 * 它就会成为 position:fixed 的"包含块",弹窗不再相对屏幕定位而是相对整页,
 * 用户滚动页面后再打开弹窗就会跑到可视区外面(实测 rectTop 从 0 变成 -594)。
 */
@keyframes adminFadeUp {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 细滚动条:默认透明底,滑块内缩成胶囊 */
* {
  scrollbar-width: thin;
  scrollbar-color: #c7d2e0 transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  background-clip: content-box;
  border: 2px solid transparent;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
  background-clip: content-box;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* ============================================================
   4. 布局粘合类
   ============================================================ */

/* 表单辅助说明文字 —— Element Plus 没有 hint 组件,这里只做排版 */
.admin-hint {
  font-size: 12px;
  line-height: 1.6;
  color: var(--el-text-color-secondary);
  margin-top: 4px;
}

/* 页面容器:统一内边距与最大宽度 */
.admin-page {
  padding: var(--admin-gap);
  max-width: var(--admin-content-max);
  margin: 0 auto;
  box-sizing: border-box;
  animation: adminFadeUp 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 垂直居中容器:用于登录页这类独立页面 */
.admin-center {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--admin-gap);
  box-sizing: border-box;
}

/* 顶部操作条:排布搜索框和按钮 */
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--admin-gap-sm);
  margin-bottom: var(--admin-gap);
}

.admin-toolbar > .admin-toolbar-right {
  margin-left: auto;
}

/* ---------- 工具条里的筛选控件:按类型给固定宽度 ----------
   之前各页写的宽度五花八门(200/220/260px,还有 flex:1 直接撑满整行),
   同一行里"搜索框巨宽、下拉很窄"看着就不协调。这里统一口径,
   页面上不要再写 width / flex,交给这三个变量。 */
.admin-toolbar > .el-input,
.admin-toolbar > .el-input-number {
  width: var(--admin-field-w);
}

.admin-toolbar > .el-select,
.admin-toolbar > .el-date-editor--date {
  width: var(--admin-field-w-sm);
}

.admin-toolbar > .el-date-editor--daterange {
  width: var(--admin-field-w-lg);
}

/* 桌面端:表单里的控件不要拉满整页
   整页宽的卡片里,el-input 默认 width:100% 会变成 1200px+ 的长条。
   这里限个上限,读起来才像一张表单;窄弹窗(宽度 < 420px)不受影响。 */
@media (min-width: 769px) {
  .el-form-item .el-input,
  .el-form-item .el-select,
  .el-form-item .el-input-number,
  .el-form-item .el-cascader,
  .el-form-item .el-date-editor {
    max-width: var(--admin-form-max);
  }
}

/* .admin-toolbar 是靠 gap 排版的,Element Plus 默认给"相邻按钮"加的
   12px 左外边距会破坏对齐 —— 在 flex 里只是间距不均,在 grid 里会让
   同一列的按钮整体右移 12px 并对出格外(实测 left 从 31 变 43)。
   只影响工具条;弹窗底部等非工具条的按钮保留 Element Plus 原样。 */
.admin-toolbar .el-button + .el-button {
  margin-left: 0;
}

/* ---------- 相邻按钮间距:统一改成"容器用 gap" ----------
   Element Plus 用 `.el-button + .el-button { margin-left: 12px }` 做按钮间距,
   这是老式方案。放在 flex/grid + gap 的容器里会叠加成 20px;更麻烦的是
   **换行后新一行的第一个按钮也带着这 12px**,整行右移 —— 看起来就是"没对齐"。
   所以全局置 0,下面再给真正靠外边距排布的三处补回间距。 */
body .el-button + .el-button {
  margin-left: 0;
}

/* 表单项里按钮挨着排,补回间距(该容器本身是 flex,不能用 gap,会波及输入框) */
body .el-form-item__content > .el-button + .el-button {
  margin-left: 8px;
}

/* 表格操作列同理 */
body .el-table .cell > .el-button + .el-button {
  margin-left: 8px;
}

/* 消息框按钮区本来就是 flex,给它 gap 替代上面的外边距 */
.el-message-box__btns {
  gap: 8px;
}

/* 区块垂直间距 */
.admin-block {
  margin-top: var(--admin-gap);
}

/* 页面第一个元素不需要顶部间距 */
.admin-page > :first-child,
.admin-page > .el-row:first-child {
  margin-top: 0;
}

/* 同一行里的卡片等高 */
.el-row > .el-col > .el-card {
  height: 100%;
}

/* ============================================================
   5. 组件点缀(只有层次感,没有结构改动)
   ============================================================ */

/* ---------- 卡片 ---------- */
.el-card {
  position: relative;
  border-color: var(--admin-border-soft);
  box-shadow: var(--el-box-shadow-lighter);
  transition: box-shadow 0.24s ease, transform 0.24s ease, border-color 0.24s ease;
}

.el-card:hover {
  border-color: var(--el-color-primary-light-7);
  box-shadow: var(--el-box-shadow-light);
  transform: translateY(-2px);
}

/* 卡片标题:左侧一根主题色小竖条 + 顶部一层极淡渐变 */
.el-card__header {
  position: relative;
  font-weight: 600;
  color: #1e293b;
  padding-left: calc(var(--el-card-padding) + 6px);
  background-image: linear-gradient(180deg, #fbfcff 0%, #f6f9fe 100%);
}

.el-card__header::before {
  content: '';
  position: absolute;
  left: var(--el-card-padding);
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  border-radius: 999px;
  background-image: linear-gradient(180deg, var(--el-color-primary) 0%, var(--admin-accent) 100%);
}

/* 纯统计卡:顶部一条彩色进度条(四列依次换色),数字用等宽数字更整齐 */
.el-statistic__number {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.el-card:has(.el-statistic) {
  overflow: hidden;
}

.el-card:has(.el-statistic)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background-image: linear-gradient(90deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
}

.el-row > .el-col:nth-child(3n + 2):has(.el-statistic) .el-card::after {
  background-image: linear-gradient(90deg, var(--el-color-success) 0%, var(--el-color-success-light-3) 100%);
}

.el-row > .el-col:nth-child(3n + 3):has(.el-statistic) .el-card::after {
  background-image: linear-gradient(90deg, var(--el-color-warning) 0%, var(--el-color-warning-light-3) 100%);
}

/* ---------- 表格 ---------- */
/* 圆角只在表头两角体现:
   这里刻意不加 overflow:hidden —— 它会把 .el-table 变成滚动容器,
   有可能影响 fixed 列(position:sticky)的吸附行为。 */
.el-table {
  border-radius: 10px;
}

.el-table th.el-table__cell:first-child {
  border-top-left-radius: 10px;
}

.el-table th.el-table__cell:last-child {
  border-top-right-radius: 10px;
}

.el-table th.el-table__cell {
  background-image: linear-gradient(180deg, #f8fafd 0%, #f2f6fc 100%);
  font-weight: 600;
  color: var(--el-table-header-text-color);
}

.el-table tbody tr:hover > td.el-table__cell {
  background-color: var(--el-table-row-hover-bg-color);
}

.el-table .el-table__cell {
  padding: 8px 0;
}

/* 单元格左右内边距比默认的 12px 收一点,列多时省出不少横向空间 */
.el-table .cell {
  padding: 0 10px;
}

/* ---------- 表单 / 输入 ---------- */
.el-form-item {
  margin-bottom: 18px;
}

.el-input__wrapper,
.el-textarea__inner,
.el-select__wrapper {
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}

.el-input__wrapper.is-focus,
.el-textarea__inner:focus,
.el-select__wrapper.is-focused {
  box-shadow: 0 0 0 1px var(--el-color-primary) inset, var(--admin-ring) !important;
}

/* ---------- 按钮 ---------- */
.el-button {
  font-weight: 500;
}

.el-button--primary:not(.is-plain):not(.is-text):not(.is-link) {
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.22), 0 8px 18px -12px rgba(37, 99, 235, 0.75);
}

.el-button--primary:not(.is-plain):not(.is-text):not(.is-link):hover {
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.26), 0 12px 24px -12px rgba(37, 99, 235, 0.8);
}

.el-button--danger:not(.is-plain):not(.is-text):not(.is-link) {
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.2), 0 8px 18px -12px rgba(239, 68, 68, 0.7);
}

.el-button--success:not(.is-plain):not(.is-text):not(.is-link),
.el-button--warning:not(.is-plain):not(.is-text):not(.is-link) {
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 8px 18px -12px rgba(16, 24, 40, 0.45);
}

/* ---------- 弹窗 ---------- */
.el-dialog {
  overflow: hidden;
}

.el-dialog__header {
  padding-right: 44px; /* 给右上角关闭按钮留位,用 padding 而不是 margin,分隔线才能拉满整行 */
  padding-bottom: 12px;
  border-bottom: 1px solid var(--el-border-color-lighter);
  cursor: default;
}

.el-dialog__title {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
}

.el-dialog__body {
  padding-top: 14px;
  max-height: 68vh;
  max-height: 68dvh;
  overflow-y: auto;
}

.el-dialog__footer {
  padding-top: 14px;
  border-top: 1px solid var(--el-border-color-lighter);
  /* 用 flex + gap 排按钮:手机上按钮多/文案长时换行,新行不会被外边距顶歪 */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* ---------- 标签 / 折叠面板 / 描述列表 ---------- */
.el-tag {
  font-weight: 500;
}

.el-collapse {
  border-radius: 10px;
  overflow: hidden;
  border-color: var(--admin-border-soft);
}

.el-collapse-item__header {
  font-weight: 600;
  color: #334155;
}

.el-descriptions__label.el-descriptions__cell.is-bordered-label {
  background-color: #f8fafd;
  font-weight: 500;
  color: #475569;
}

/* ---------- 分页 ---------- */
.el-pagination.is-background .el-pager li,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev {
  border-radius: 8px;
}

/* ---------- 提示条 ---------- */
.el-alert {
  border: 1px solid transparent;
}

/* ---------- 外壳:顶栏 / 侧边栏 / 标签页 ---------- */
.shell-header {
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--admin-border-soft);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.shell-brand {
  letter-spacing: 0.01em;
  color: #0f172a;
}

.shell-brand::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  vertical-align: -5px;
  border-radius: 7px;
  background-image: linear-gradient(135deg, var(--el-color-primary) 0%, var(--admin-accent) 100%);
  box-shadow: 0 5px 12px -5px rgba(37, 99, 235, 0.8);
}

.shell-user {
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.shell-user:hover {
  background-color: var(--el-fill-color-light);
}

.shell-user .el-avatar {
  background-image: linear-gradient(135deg, var(--el-color-primary) 0%, var(--admin-accent) 100%);
  color: #fff;
  font-weight: 600;
}

.shell-aside {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
}

.el-menu {
  border-right: 0;
  padding: 8px;
}

.el-menu-item,
.el-sub-menu__title {
  border-radius: 10px;
  margin: 2px 0;
}

.el-menu-item.is-active {
  font-weight: 600;
  background-image: linear-gradient(90deg, var(--el-color-primary-light-9) 0%, rgba(255, 255, 255, 0) 100%);
}

.shell-tabbar {
  background-color: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid var(--admin-border-soft);
  backdrop-filter: blur(8px);
}

.el-tabs--card > .el-tabs__header {
  border-bottom: 0;
}

.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-radius: 8px 8px 0 0;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  font-weight: 600;
  background-image: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.el-tabs__item {
  font-weight: 500;
}

/* ============================================================
   6. 移动端
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --admin-gap: 10px;
    --admin-gap-sm: 6px;
    --el-card-padding: 12px;
    --el-statistic-content-font-size: 22px;
  }

  /* 卡片宽度 = 屏幕的 95%
     页面左右各留 2.5%,box-sizing 已是 border-box,
     所以 .admin-page 的直接子卡片正好占 95% 屏宽。
     用百分比而不是 vw,避免桌面端滚动条占宽导致的溢出。 */
  .admin-page {
    padding-left: 2.5%;
    padding-right: 2.5%;
    /* 底部多留一截:手机浏览器底部工具栏 / iOS 小白条会盖住最后一个元素(分页、保存按钮)。
       两类内核都要兼顾:
         · 工具栏在视口之外 —— 这段留白只是让末尾元素不贴边,不碍事;
         · 工具栏浮在内容之上(部分国产内核 innerHeight 会把它算进去) —— 这段留白
           正好把分页顶到工具栏上方,否则页面里怎么滚都躲不开。
       env(safe-area-inset-bottom) 仅在 viewport-fit=cover 时非 0,写 0px 兜底。 */
    padding-bottom: calc(var(--admin-gap) + 32px + env(safe-area-inset-bottom, 0px));
  }

  .admin-toolbar > .admin-toolbar-right {
    margin-left: 0;
  }

  /* 工具条控件:手机上搜索框满宽,下拉等宽两列铺开,日期范围独占一行 */
  .admin-toolbar > .el-input,
  .admin-toolbar > .el-input-number,
  .admin-toolbar > .el-date-editor--daterange {
    width: 100%;
    flex: 0 0 auto;
  }

  .admin-toolbar > .el-select,
  .admin-toolbar > .el-date-editor--date {
    width: auto;
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  /* ------------------------------------------------------------
     手机端弹窗:水平 + 垂直居中
     之前靠 margin-top:8vh 顶在屏幕上方,"流量明细"这类长弹窗
     在手机上会顶到屏幕外,用户看不到内容。改成:
       1) 遮罩层 .el-overlay-dialog 变 flex 容器,弹窗双向居中
          (Element Plus 2.13 的 ElFocusTrap 不渲染包裹层,
           .el-dialog 就是遮罩层的直接子元素)
       2) 整框限制在 92vh 内,超长内容交给 .el-dialog__body 自己滚
          —— 这样"永远放得下",center 也就不会把顶部顶出屏幕
     ------------------------------------------------------------ */
  .el-overlay-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 保险:若将来 Element Plus 在中间插入包裹层,让它铺满并继续居中,
     免得 92% 宽度被算在"内容宽度"上而溢出 */
  .el-overlay-dialog > :not(.el-dialog) {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .el-dialog {
    width: 95% !important;
    max-width: 95% !important;
    margin: 0 !important;
    max-height: 92vh;
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    --el-dialog-padding-primary: 14px;
  }

  /* 头尾固定高度,中间的 body 吃掉剩余空间并内部滚动 */
  .el-dialog__header,
  .el-dialog__footer {
    flex: none;
  }

  .el-dialog__body {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 表单与卡片在手机上更紧凑 */
  .el-form-item {
    margin-bottom: 14px;
  }

  /* 只改纵向内边距,横向留给 .el-card__header 的 calc(色条 + 间距) */
  .el-card__header {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  /* 卡片悬浮位移在触屏上没有意义,去掉避免误触抖动 */
  .el-card:hover {
    transform: none;
  }

  .el-button {
    min-height: 34px;
  }

  /* 手机上表头/单元格收窄 */
  .el-table .el-table__cell {
    padding: 6px 0;
  }
}

/* ============================================================
   7. 无障碍:尊重"减少动效"系统偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .admin-page {
    animation: none;
  }
  .el-card,
  .el-button,
  .el-tabs--card > .el-tabs__header .el-tabs__item {
    transition: none;
  }
  .el-card:hover {
    transform: none;
  }
}