/* =====================================================================
   LPR 车牌识别云平台 · 统一设计系统（浅色 + 深色 SaaS 双主题）
   设计方向（2026-10-14 对齐 art-design-pro）：近白页面底 #fafbfc + 纯白卡片/侧栏（浅色）
   / 深墨蓝全站（深色）；主色 #5d87ff（2026-10-14 由 Element 默认 #409eFF 换为
   art-design-pro 默认主色，含全端 Web/小程序/移动端硬编码一并替换）。
   主题切换：html[data-theme="dark"] 变量覆盖，浅色为默认基准值
   历史：浅色表面原为「灰白雾面」（页面 #eef0f3 / 卡片 #f7f8fa，两者同色导致卡片与底
       分不出层次）；2026-10-14 改为白卡 + 近白底，恢复图底层次。回退备份：
       backend/backups/ui-shell-20261014-001312/
   ===================================================================== */

:root {
  /* 主色：清透蓝（2026-10-14 换成 #5d87ff；各阶按 Element 同款公式重新派生：light-N = N% 白混入、dark-2 = 20% 黑混入） */
  --el-color-primary: #5d87ff;
  --el-color-primary-rgb: 93,135,255;   /* Element 默认给的是旧主色 64,158,255，必须同步覆盖，否则 rgba(var(--el-color-primary-rgb),α) 仍是旧蓝 */
  --el-color-primary-light-3: #8eabff;
  --el-color-primary-light-5: #aec3ff;
  --el-color-primary-light-7: #cedbff;
  --el-color-primary-light-8: #dfe7ff;
  --el-color-primary-light-9: #eff3ff;
  --el-color-primary-dark-2: #4a6ccc;
  --el-color-success: #13deb9;
  --el-color-warning: #ffae1f;
  --el-color-danger: #ff4d4f;
  --el-color-error: #fa896b;
  --el-color-info: #909399;
  --el-border-radius-base: 6px;
  /* 字体：加大、加粗，提升可读性（整体 +1px：base 14→15、small 13→14、large 16→17） */
  --el-font-size-extra-small: 13px;
  --el-font-size-small: 14px;
  --el-font-size-base: 15px;
  --el-font-size-medium: 17px;
  --el-font-size-large: 18px;
  --el-font-size-extra-large: 21px;
  --el-font-weight-primary: 500;
  /* 辅助文字（Element secondary）提亮：原 #909399 白底对比度约 2.9:1 不足，统一为可读灰 */
  --el-text-color-secondary: #6b7280;
  /* Element Plus 浅色表面：卡片/浮层纯白 + 页面近白底（art-design-pro 取值） */
  --el-bg-color: #ffffff;
  --el-bg-color-page: #fafbfc;
  --el-bg-color-overlay: #ffffff;
  --el-fill-color-blank: #ffffff;
  --el-table-bg-color: #ffffff;
  --el-table-tr-bg-color: #ffffff;
  --el-table-header-bg-color: #f4f6f8;
  --el-table-row-hover-bg-color: #f5f7fa;

  /* 平台级变量（浅色基准：近白页面底 + 纯白卡面） */
  --lpr-bg: #fafbfc;
  --lpr-card-bg: #ffffff;
  --lpr-border: #eaebf1;
  /* 分割线（表格网格线 / 表头底线 / 区块虚线分隔）：浅色一档，深色另有一档（见 html[data-theme="dark"]） */
  --lpr-divider: #e6e9ef;
  --lpr-text: #303133;
  --lpr-text-sub: #6b7280;
  --lpr-sidebar-bg: rgba(255,255,255,.97);
  --lpr-sidebar-sub: #f5f7fa;
  --lpr-sidebar-text: #7987a1;
  --lpr-sidebar-active: var(--el-color-primary);
  --lpr-header-h: 48px;
  /* 派生变量（浅色=art 取值，深色覆盖） */
  --lpr-table-head-bg: #f4f6f8;
  --lpr-table-strip-bg: #fafbfc;
  --lpr-card-shadow: 0 1px 3px 0 rgba(0,0,0,.03), 0 1px 2px -1px rgba(0,0,0,.08);
  --lpr-topbar-border: #eef0f4;
  --lpr-scrollbar-thumb: #cccccc;
  --lpr-scrollbar-thumb-hover: #b0abab;
  --lpr-login-shadow: 0 24px 60px rgba(0,0,0,.12);
  /* 旧 Element 语义色（页面内联沿用，浅色保持原值） */
  --lpr-soft-ok: #13deb9;
  /* 语义浅底/浅边框（深色下自动换深） */
  --lpr-soft-ok-bg: #f0f9eb;
  --lpr-soft-ok-border: #e1f3d8;
  --lpr-soft-warn-bg: #fdf6ec;
  --lpr-soft-warn-border: #f5dab1;
  --lpr-soft-info-bg: #f4f4f5;
  --lpr-soft-warn: #ffae1f;
  --lpr-soft-danger: #ff4d4f;

  /* ===================================================================
     端 / 大屏语义色板（岗亭终端 · 值班大屏 · 车道监控 · 云视频共用）
     说明：终端机与大屏的专属色板——浅/深两套主题保持同值（图表与状态色语义稳定），
          因此只在浅色基准定义一次，html[data-theme="dark"] 不覆盖；
          -rgb 为通道值，供 rgba(var(--viz-*-rgb),α) 生成透明底/描边。
     =================================================================== */
  --viz-blue: #5d87ff;      --viz-blue-rgb: 93,135,255;
  --viz-blue-lt: #8eabff;   /* 主色浅一档：大屏车场标签 / 终端车型色 */
  --viz-green: #13deb9;     --viz-green-rgb: 19,222,185;
  --viz-green-deep: #0cab8f;
  --viz-orange: #ffae1f;    --viz-orange-rgb: 255,174,31;
  --viz-red: #ff4d4f;       --viz-red-rgb: 255,77,79;
  --viz-red-lt: #ff7875;
  --viz-red-deep: #e64545;
  --viz-purple: #b48df3;    --viz-purple-rgb: 180,141,243;
  --viz-gray: #909399;      --viz-gray-rgb: 144,147,153;
  --viz-yellow: #ffd666;    --viz-yellow-rgb: 255,214,102;
  --viz-guide: #94a3b8;     /* 图表 hover 指示线 */
  /* 视频墙与画面浮层（深底浅字，浅色主题下同样如此） */
  --viz-video-bg: #080d16;
  --viz-on-video: #e2ebf7;      /* 画面浮层主文字 */
  --viz-on-video-dim: #8fa3bf;  /* 画面浮层次要文字 / 占位空态 */
  --viz-on-video-ok: #4ade80;
  --viz-on-video-warn: #fbbf24;
  --viz-on-video-danger: #f89898;
  --viz-on-solid: #fff;         /* 彩色/深色底上的文字、图标 */
  --viz-on-green: #04352c;      /* 亮绿底上的深色文字 */
  --viz-overlay: rgba(15,23,42,.72);        /* 画面角标底 */
  --viz-overlay-strong: rgba(15,23,42,.92); /* 悬浮提示底 */
  --viz-tip-fg: #e2e8f0;                    /* 悬浮提示文字 */
}

/* =====================================================================
   深色主题（SaaS 风格）：基于 html[data-theme="dark"] 全局变量覆盖
   ===================================================================== */
html[data-theme="dark"] {
  /* 平台级 */
  --lpr-bg: #070707;
  --lpr-card-bg: #161618;
  --lpr-border: #4c4d4f;
  /* 分割线：深色下用比行底更亮一档的深灰，保证行列分隔看得清（与浅色 #d5dae2 对应） */
  --lpr-divider: #4c4d4f;
  --lpr-text: #e5eaf3;
  --lpr-text-sub: #b3b8c2;
  --lpr-sidebar-bg: rgba(22,22,24,.98);
  --lpr-sidebar-sub: #202226;
  --lpr-sidebar-text: #a3a6ad;
  --lpr-sidebar-active: #7d9fff;
  --lpr-table-head-bg: #1d1e1f;
  --lpr-table-strip-bg: #191919;
  --lpr-card-shadow: 0 1px 3px rgba(0,0,0,.5);
  --lpr-topbar-border: #363637;
  --lpr-scrollbar-thumb: #4c4d4f;
  --lpr-scrollbar-thumb-hover: #626466;
  --lpr-login-shadow: 0 24px 60px rgba(0,0,0,.8);
  /* 旧语义色深色调亮 */
  --lpr-soft-ok: #67c23a;
  --lpr-soft-ok-bg: rgba(103,194,58,.16);
  --lpr-soft-ok-border: rgba(103,194,58,.4);
  --lpr-soft-warn-bg: rgba(230,162,60,.16);
  --lpr-soft-warn-border: rgba(230,162,60,.4);
  --lpr-soft-info-bg: #202226;
  --lpr-soft-warn: #e6a23c;
  --lpr-soft-danger: #f56c6c;

  /* Element Plus 语义色（深色下微调亮） */
  --el-color-primary: #5d87ff;
  --el-color-primary-light-3: #4865ba;
  --el-color-primary-light-5: #3a4f8c;
  --el-color-primary-light-7: #2b385d;
  --el-color-primary-light-8: #242d46;
  --el-color-primary-light-9: #1d212f;
  --el-color-primary-dark-2: #7d9fff;
  --el-color-success: #67c23a;
  --el-color-success-light-3: #488829;
  --el-color-success-light-5: #33611d;
  --el-color-success-light-7: #1f3a11;
  --el-color-success-light-8: #14270c;
  --el-color-success-light-9: #0a1306;
  --el-color-success-dark-2: #86d068;
  --el-color-warning: #e6a23c;
  --el-color-warning-light-3: #a1712a;
  --el-color-warning-light-5: #73511e;
  --el-color-warning-light-7: #453012;
  --el-color-warning-light-8: #2e200c;
  --el-color-warning-light-9: #171006;
  --el-color-warning-dark-2: #ebb86b;
  --el-color-danger: #f56c6c;
  --el-color-danger-light-3: #ac4c4c;
  --el-color-danger-light-5: #7b3636;
  --el-color-danger-light-7: #4a2020;
  --el-color-danger-light-8: #311616;
  --el-color-danger-light-9: #190b0b;
  --el-color-danger-dark-2: #f88c8c;
  --el-color-error: #f56c6c;
  --el-color-error-light-3: #ac4c4c;
  --el-color-error-light-5: #7b3636;
  --el-color-error-light-7: #4a2020;
  --el-color-error-light-8: #311616;
  --el-color-error-light-9: #190b0b;
  --el-color-error-dark-2: #f88c8c;
  --el-color-info: #a8abb2;
  --el-color-info-light-3: #76787d;
  --el-color-info-light-5: #545659;
  --el-color-info-light-7: #323335;
  --el-color-info-light-8: #222224;
  --el-color-info-light-9: #111112;
  --el-color-info-dark-2: #b9bcc1;
  --el-color-white: #ffffff;
  --el-color-black: #000000;

  /* Element Plus 基础表面/文字/边框 */
  --el-bg-color: #161618;
  --el-bg-color-page: #070707;
  --el-bg-color-overlay: #1d1e1f;
  --el-text-color-primary: #e5eaf3;
  --el-text-color-regular: #cfd3dc;
  --el-text-color-secondary: #b3b8c2;
  --el-text-color-placeholder: #8d9095;
  --el-text-color-disabled: #6c6e72;
  --el-border-color: #4c4d4f;
  --el-border-color-light: #414243;
  --el-border-color-lighter: #363637;
  --el-border-color-extra-light: #2b2b2c;
  --el-border-color-dark: #58585b;
  --el-border-color-darker: #626466;
  --el-fill-color: #303030;
  --el-fill-color-light: #262727;
  --el-fill-color-lighter: #1d1d1d;
  --el-fill-color-extra-light: #191919;
  --el-fill-color-dark: #39393a;
  --el-fill-color-darker: #424243;
  --el-fill-color-blank: #161618;
  --el-mask-color: rgba(0,0,0,.8);
  --el-mask-color-extra-light: rgba(0,0,0,.5);
  --el-box-shadow: 0 12px 32px 4px rgba(0,0,0,.36), 0 8px 20px rgba(0,0,0,.12);
  --el-box-shadow-light: 0 6px 16px rgba(0,0,0,.28);
  --el-box-shadow-lighter: 0 2px 8px rgba(0,0,0,.18);
  --el-disabled-bg-color: #303030;
  --el-disabled-border-color: #363637;
  --el-disabled-text-color: #6c6e72;

  /* EP 组件级深色变量（vendor 裁剪版无 html.dark，此处全量补齐，杜绝白块） */
  --el-table-bg-color: #161618;
  --el-table-tr-bg-color: #161618;
  --el-table-header-bg-color: #1d1e1f;
  --el-table-header-text-color: #a3a6ad;
  --el-table-text-color: #e5eaf3;
  --el-table-row-hover-bg-color: #252530;
  --el-table-border-color: var(--lpr-divider);
  --el-table-expanded-cell-bg-color: #1d1e1f;
  --el-table-fixed-left-column: #161618;
  --el-table-fixed-right-column: #161618;
  --el-descriptions-item-bordered-label-background: #1d1e1f;
  --el-input-bg-color: transparent;
  --el-drawer-bg-color: #161618;
}


html, body { height: 100%; margin: 0; }
#app { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", Arial, sans-serif;
  color: var(--lpr-text);
  background: var(--lpr-bg);
  font-size: 15px;
  font-weight: 500;      /* 中文小字号偏细：整站基准字重提到 500（macOS 生效为 Medium，Windows 等效常规） */
  line-height: 1.6;      /* 行距放开，文字不再挤成一片 */
  /* 不做细体抗锯齿：-webkit-font-smoothing:antialiased 会让中文更细更灰，回到系统默认的实心渲染 */
  -webkit-font-smoothing: auto;
}
/* 浅色主题：art 白净纯色底（去除旧蓝雾渐变） */
html:not([data-theme="dark"]) body {
  background: var(--lpr-bg);
  background-attachment: fixed;
}

/* =====================================================================
   主框架（art-design-pro 布局 1:1）：左侧栏 + 右主列（顶栏/标签/内容卡）
   ===================================================================== */
.layout { height: 100%; }

/* ---------- 侧边栏（200px ↔ 64px） ---------- */
.aside {
  background: var(--lpr-card-bg);
  border-right: 1px solid var(--lpr-topbar-border);
  display: flex; flex-direction: column; flex-shrink: 0;
  overflow-x: hidden; color-scheme: light;
}
html[data-theme="dark"] .aside { color-scheme: dark; }
.aside-header {
  display: flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 14px; flex-shrink: 0;
  border-bottom: 1px solid var(--lpr-topbar-border);
  overflow: hidden;
}
.aside-logo {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--el-color-primary), #b48df3);
  box-shadow: 0 4px 10px rgba(var(--el-color-primary-rgb),.35);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 16px; font-weight: 700;
}
/* 有 LOGO 时：方块改白底（与图片自身白底一致），避免方形框上下露出渐变蓝边 */
.aside-logo.has-logo { background: #fff; box-shadow: 0 4px 10px rgba(var(--el-color-primary-rgb),.22); }
.aside-logo img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.aside-title { min-width: 0; }
.aside-title-main { font-size: 16px; font-weight: 600; color: var(--lpr-text); line-height: 1.3; white-space: nowrap; }
.aside-title-sub { font-size: 14px; color: var(--lpr-text-sub); line-height: 1.3; white-space: nowrap; }
.aside-menu { flex: 1; overflow: auto; padding: 8px; }
/* 滚动条不显示（内容超出仍可用滚轮滚动） */
.aside-menu::-webkit-scrollbar { width: 0; height: 0; display: none; }
.aside-menu { scrollbar-width: none; }
.aside-menu .el-menu { border-right: none; background: transparent; }
/* 展开态：收窄后收紧层级缩进（L1=16px、每级 +14px），保证深层菜单文字不越出项目右缘 */
.aside-menu .el-menu:not(.el-menu--collapse) { --el-menu-base-level-padding: 16px; --el-menu-level-padding: 14px; }
/* art design 主题菜单：白底灰字、hover 灰底、active 主色浅底 */
.aside-menu .el-menu-item, .aside-menu .el-sub-menu__title {
  color: #29343d; height: 42px; line-height: 42px; font-weight: 500;
  font-size: 15px; border-radius: 6px; width: calc(100% - 16px);
  margin: 0 8px 4px;
  transition: background-color .2s ease, color .2s ease;
}
.aside-menu .el-menu-item > .el-icon, .aside-menu .el-sub-menu__title > .el-icon {
  width: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; margin-right: 8px; color: #6b6b6b;
}
.aside-menu .mi-emoji {
  width: 24px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; margin-right: 8px; color: inherit;
}
.aside-menu .el-menu-item:hover, .aside-menu .el-sub-menu__title:hover { background: #f2f4f7; color: #29343d; }
.aside-menu .el-menu-item:hover .el-icon, .aside-menu .el-sub-menu__title:hover .el-icon { color: var(--el-color-primary); }
.aside-menu .el-menu-item.is-active { color: var(--el-color-primary); background: #eff3ff; font-weight: 600; }
.aside-menu .el-menu-item.is-active .el-icon { color: var(--el-color-primary); }
.aside-menu .el-sub-menu.is-active > .el-sub-menu__title { color: var(--el-color-primary); }
/* 子菜单箭头：13px 小箭头靠右定位。注意选择器需与上方 24px 图标规则同为 (0,3,0) 且居后，
   否则会被图标规则覆盖（此前箭头实际被放大到 24px+8px 外边距，左移压到标题文字） */
.aside-menu .el-sub-menu__title > .el-sub-menu__icon-arrow { width: 13px; font-size: 14px; color: #7987a1; right: 14px; margin-right: 0; }
html[data-theme="dark"] .aside-menu .el-sub-menu__icon-arrow { color: #8f8fa3; }
/* 子菜单标题：右侧为箭头预留空间；文字超长时省略号截断，不再压到箭头（仅展开态；折叠态不受影响） */
.aside-menu .el-menu:not(.el-menu--collapse) .el-sub-menu__title { padding-right: 28px; }
.aside-menu .el-menu:not(.el-menu--collapse) .el-sub-menu__title > span:not(.mi-emoji) {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 折叠弹出菜单（art popup：40px 项高、6px 圆角、8px 内距） */
.aside-menu .el-menu--popup { padding: 8px; }
.aside-menu .el-menu--popup .el-menu-item { height: 40px; line-height: 40px; margin-bottom: 5px; border-radius: 6px; }
.aside-menu .el-menu--popup .el-menu-item:last-of-type { margin-bottom: 0; }
.aside-menu .el-menu--popup .el-menu-item.is-active { color: var(--el-color-primary); background: #eff3ff; }
.aside-menu .el-menu--popup .el-menu-item:hover { background: #f2f4f5; }
html[data-theme="dark"] .aside-menu .el-menu--popup .el-menu-item.is-active { color: #7d9fff; background: #1d212f; }
html[data-theme="dark"] .aside-menu .el-menu--popup .el-menu-item:hover { background: #252530; }
.aside-bottom {
  height: 44px; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--lpr-topbar-border);
  color: var(--lpr-text-sub); font-size: 18px;
  transition: color .2s;
}
.aside-bottom:hover { color: var(--el-color-primary); }
html[data-theme="dark"] .aside-menu .el-menu-item, html[data-theme="dark"] .aside-menu .el-sub-menu__title { color: #cfd3dc; }
html[data-theme="dark"] .aside-menu .el-menu-item .el-icon, html[data-theme="dark"] .aside-menu .el-sub-menu__title .el-icon { color: #babbbe; }
html[data-theme="dark"] .aside-menu .el-menu-item:hover, html[data-theme="dark"] .aside-menu .el-sub-menu__title:hover { background: #252530; color: #e5eaf3; }
html[data-theme="dark"] .aside-menu .el-menu-item.is-active { color: #7d9fff; background: #1d212f; }
html[data-theme="dark"] .aside-menu .el-sub-menu.is-active > .el-sub-menu__title { color: #7d9fff; }

/* ---------- 主列（art #app-main） ---------- */
.main-col { display: flex; flex-direction: column; height: 100%; }

/* ---------- 顶栏（art h-15，紧凑 48px，白底细边框） ---------- */
.header-bar {
  height: 48px; min-height: 48px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; background: var(--lpr-bg);
  position: relative; z-index: 5;
}
.header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 4px; flex-shrink: 0;
  color: #7987a1; cursor: pointer; font-size: 18px;
  transition: background-color .3s, color .3s, transform .3s;
}
.hbtn:hover { background: #e2e7ec; color: #383853; }
html[data-theme="dark"] .hbtn { color: #a3a6ad; }
html[data-theme="dark"] .hbtn:hover { background: #252530; color: #fff; }
.fullscreen-hbtn:hover { transform: scale(1.15); }
/* 顶栏图标快捷入口组（操作日志 / 导出记录 / 使用说明）：组内紧凑排列，组间仍用顶栏默认 10px 间距 */
.hbtn-group { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
/* 车场切换器（多车场账号）：宽度自适应 + 长名称省略号；
   .hbtn 固定 34px 宽，不加此覆盖会把长车场名挤成竖排（一个字符一行） */
.lot-btn { width: auto; min-width: 34px; max-width: 220px; padding: 0 8px; gap: 4px; }
.lot-btn .lot-btn-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
@media screen and (max-width: 768px) {
  .lot-btn { max-width: 160px; }
  .lot-btn .lot-btn-name { max-width: 92px; }
}
/* 用户头像（art ArtUserMenu 圆形头像） */
.avatar-btn { width: 34px; height: 34px; border-radius: 50% !important; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--el-color-primary), #b48df3); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600;
}
/* 顶栏头像：使用预设头像（emoji）时字号略大 */
.avatar-emoji { font-size: 17px; }
/* 账号设置弹窗：预设头像选择（2026-10-06） */
.avatar-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-preset {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1; color: #fff; cursor: pointer; user-select: none;
  border: 2px solid transparent;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.avatar-preset:hover { transform: scale(1.08); }
.avatar-preset.on { border-color: var(--el-color-primary); box-shadow: 0 0 0 2px rgba(93,135,255,.25); }
.avatar-preset-default { background: linear-gradient(135deg, var(--el-color-primary), #b48df3); font-size: 15px; font-weight: 600; }
/* 顶栏头像 / 弹窗头像：自定义图片铺满圆形 */
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar-preset img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* 上传图片按钮（虚线框 + 加号；已选自定义头像时显示当前图片） */
.avatar-preset-upload { background: #f4f6f8; color: #7987a1; border-style: dashed; border-color: #c0c4cc; }
.avatar-preset-upload:hover { border-color: var(--el-color-primary); }
.avatar-preset-upload.on { border-color: var(--el-color-primary); }
html[data-theme="dark"] .avatar-preset-upload { background: #2a2a33; color: #a3a6ad; border-color: #4c4d4f; }
/* 「?」小字说明图标（2026-10-06）：全站小字说明统一收进悬停气泡（hint-q 组件） */
/* 垂直位置：统一“居中后整体偏上 1.5px”——inline 文本用 vertical-align:middle 对齐文字中线，
   flex 容器（部分 el-form-item 标签）里 vertical-align 无效、改由 top 位移——两种上下文观感一致 */
.hint-q { position: relative; top: -1.5px; vertical-align: middle; margin: 0 4px 0 1px; color: var(--el-text-color-secondary); cursor: help; font-size: 13.5px; line-height: 1; }
.hint-q:hover { color: var(--el-color-primary); }
.hint-q-tip { max-width: 440px; }
.hint-q-body { line-height: 1.7; white-space: normal; }
/* 主题模式下拉项：当前选中高亮 */
.theme-mode-on { font-weight: 600; color: var(--el-color-primary); }
.el-dropdown-menu .el-dropdown-item .el-icon { color: inherit; }

/* ---------- 工作台标签（art ArtWorkTab：圆角块标签；标题条下方独立一行） ---------- */
.worktabs {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; padding: 3px 16px 5px;
}
.worktabs-scroll { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.worktabs-scroll::-webkit-scrollbar { display: none; }
.worktab {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 8px 0 12px; flex-shrink: 0;
  font-size: 14px; color: #7987a1; cursor: pointer;
  background: var(--lpr-card-bg);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px; transition: background-color .2s, color .2s;
  white-space: nowrap;
}
.worktab:hover { background: #e5e9ed; color: #383853; }
.worktab.on { color: var(--el-color-primary); font-weight: 500; }
.worktab-close {
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; color: inherit; transition: background-color .2s, color .2s;
}
.worktab-close:hover { background: #dbe0e4; color: #303133; }
html[data-theme="dark"] .worktab { color: #a3a6ad; background: var(--lpr-card-bg); border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .worktab:hover { background: #252530; color: #e5eaf3; }
html[data-theme="dark"] .worktab.on { color: #7d9fff; }
html[data-theme="dark"] .worktab-close:hover { background: #4c4d4f; color: #fff; }
.tab-more { width: 28px; height: 28px; }

/* ---------- 内容区（art #app-content：灰底留白 + 白容器圆角卡） ---------- */
.main-content { padding: 0; background: var(--lpr-bg); overflow: hidden; display: flex; flex-direction: column; }
/* 页面标题条：「页面名 + 说明」（壳层统一渲染）；现位于顶栏（自内容区顶部上移） */
.page-head { flex: 1 1 auto; display: flex; align-items: baseline; gap: 10px; min-width: 0; margin-right: 12px; }
.page-head-title { font-size: 20px; font-weight: 600; color: var(--lpr-text); line-height: 1.3; white-space: nowrap; }
.page-head-desc { font-size: 13.5px; color: var(--lpr-text-sub); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.main-content > .content-iframe { flex: 1 1 auto; min-height: 0; height: auto; }
.content-iframe { width: 100%; height: 100%; border: none; display: block; background: var(--lpr-bg); }
/* 内容页切换加载遮罩（2026-10-05）：iframe 整页重载期间覆盖显示，消除闪白/跳动 */
.main-content { position: relative; }
.frame-loading { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; background: var(--lpr-bg); }
.frame-loading__spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--lpr-border); border-top-color: var(--el-color-primary); animation: lprFrameSpin .8s linear infinite; }
@keyframes lprFrameSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .frame-loading__spin { animation: none; } }


/* =====================================================================
   通用组件细节（Element Plus 微调，让页面更精致）
   ===================================================================== */
/* 卡片：白底 + 淡蓝光晕（与登录卡片同影调） */
.el-card { border: 1px solid var(--lpr-border); box-shadow: var(--lpr-card-shadow) !important; border-radius: 12px !important; transition: box-shadow .25s cubic-bezier(.25,.1,.25,1), transform .25s cubic-bezier(.25,.1,.25,1), border-color .25s; }
.el-card__header { font-size: 16px; font-weight: 600; color: var(--lpr-text); }

/* 表格：表头淡蓝底、行 hover、字体稍大 */
/* 分割线加深（2026-09-25）：网格线 / 表头底线统一取 --lpr-divider，随主题自动换档 */
.el-table { --el-font-size: 15px; --el-table-border-color: var(--lpr-divider); }
.el-table th.el-table__cell { background: var(--lpr-table-head-bg) !important; color: #1f2329; font-weight: 600; font-size: 15px; border-bottom-color: var(--lpr-divider); }
html[data-theme="dark"] .el-table th.el-table__cell { color: #c9cdd4; }
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { background: var(--lpr-table-strip-bg); }
.el-table__body tr:hover > td.el-table__cell { background: var(--el-fill-color-light) !important; }
.el-table td.el-table__cell { color: #303133; font-size: 15px; font-weight: 500; border-bottom-color: var(--lpr-divider); }
/* 表格内操作按钮：间距收紧（EP 默认 12px → 8px），操作列一行放得下更多按钮 */
.el-table .cell .el-button + .el-button { margin-left: 8px; }
/* 时间/时长类单元格：保持一行不折行（列上加 class-name="nowrap-col"） */
.nowrap-col .cell { white-space: nowrap; }
html[data-theme="dark"] .el-table td.el-table__cell { color: #e5eaf3; }
.el-table .cell { font-variant-numeric: tabular-nums; }

/* 按钮统一 */
.el-button { font-weight: 500; }
/* 主按钮：实色主色底 + 白字（D 全局提饱和；plain / text / link 变体由 EP 高优先级规则覆盖，不受影响） */
.el-button--primary {
  --el-button-bg-color: var(--el-color-primary);
  --el-button-border-color: var(--el-color-primary);
  --el-button-text-color: #fff;
  --el-button-hover-bg-color: var(--el-color-primary-light-3);
  --el-button-hover-border-color: var(--el-color-primary-light-3);
  --el-button-hover-text-color: #fff;
  --el-button-active-bg-color: var(--el-color-primary-dark-2);
  --el-button-active-border-color: var(--el-color-primary-dark-2);
  --el-button-active-text-color: #fff;
  --el-button-disabled-bg-color: var(--el-color-primary-light-5);
  --el-button-disabled-border-color: var(--el-color-primary-light-5);
  --el-button-disabled-text-color: #fff;
}

/* 弹窗：统一圆角 + 干净的 footer */
.el-dialog { border-radius: 12px; }
.el-dialog__header { padding: 16px 20px 12px; margin-right: 0; }
.el-dialog__title { font-weight: 600; font-size: 17px; color: var(--lpr-text); }
.el-dialog__body { padding: 25px 16px; }

/* 表单 label 稍大 */
.el-form-item__label { color: #4b5563; font-weight: 500; }
html[data-theme="dark"] .el-form-item__label { color: #cfd3dc; }

/* 分页 */
.el-pagination { justify-content: flex-end; }

/* 统计卡片 */
.stat-card { border-radius: 12px; transition: box-shadow .25s, transform .25s; }
.stat-card .el-statistic__head { font-size: 14px; color: var(--lpr-text-sub); }
.stat-card .el-statistic__number { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-card.entry { border-top: 3px solid var(--el-color-success); }
.stat-card.exit { border-top: 3px solid var(--el-color-danger); }
.stat-card.total { border-top: 3px solid var(--el-color-primary); }
.stat-card.capacity { border-top: 3px solid var(--el-color-warning); }

/* 数据看板统计卡（art CardList：图标右上角圆角底 + 大数字） */
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dash-stats.d3 { grid-template-columns: repeat(3, 1fr); }
.dash-stat {
  position: relative; display: block; padding: 20px 90px 20px 20px; box-sizing: border-box;
  background: var(--lpr-card-bg); border: 1px solid var(--lpr-border); border-radius: 12px;
  transition: box-shadow .25s cubic-bezier(.25,.1,.25,1), transform .25s cubic-bezier(.25,.1,.25,1);
}
.dash-stat:hover { box-shadow: 0 6px 16px rgba(0,0,0,.08); transform: translateY(-2px); }
.dash-stat .icon {
  position: absolute; top: 0; bottom: 0; right: 20px; margin: auto;
  width: 50px; height: 50px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.dash-stat .meta { min-width: 0; }
.dash-stat .meta .label { font-size: 14px; color: var(--lpr-text-sub); white-space: nowrap; }
.dash-stat .meta .value { font-size: 26px; font-weight: 600; color: var(--lpr-text); line-height: 1.2; margin-top: 6px; font-variant-numeric: tabular-nums; }
.dash-stat.total .icon { background: var(--el-color-primary-light-9); color: var(--el-color-primary); }
.dash-stat.capacity .icon { background: #fff7e9; color: #ffae1f; }
.dash-stat.entry .icon { background: #e7fcf8; color: #13deb9; }
.dash-stat.exit .icon { background: #ffeded; color: #ff4d4f; }
.dash-stat.info .icon { background: #f2f4f5; color: #909399; }
html[data-theme="dark"] .dash-stat { border-color: rgba(255,255,255,.08); }
html[data-theme="dark"] .dash-stat.total .icon { background: rgba(var(--el-color-primary-rgb),.16); color: #7d9fff; }
html[data-theme="dark"] .dash-stat.capacity .icon { background: rgba(var(--el-color-warning-rgb),.16); color: #ebb86b; }
html[data-theme="dark"] .dash-stat.entry .icon { background: rgba(var(--el-color-success-rgb),.16); color: #86d068; }
html[data-theme="dark"] .dash-stat.exit .icon { background: rgba(var(--el-color-danger-rgb),.16); color: #f88c8c; }
html[data-theme="dark"] .dash-stat.info .icon { background: rgba(168,171,178,.16); color: #b9bcc1; }

/* 弹窗区块标题 */
.dlg-section-title {
  font-size: 14px; font-weight: 500; color: var(--el-color-primary);
  margin: 6px 0 14px; padding-left: 8px; border-left: 3px solid var(--el-color-primary);
}
.dlg-section-title:first-child { margin-top: 0; }
.dlg-field-tip { font-size: 13px; color: var(--lpr-text-sub); margin-top: 4px; line-height: 1.5; }

/* 通用工具类 */
.plate-tag { font-weight: 600; letter-spacing: 1px; }
/* 关键数据强调（预留）：金额/数量列可加 class="num-strong" */
.num-strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.v-plate-tag { font-family: 'Courier New', monospace; font-weight: 700; letter-spacing: 1px; color: var(--lpr-text); }

/* =====================================================================
   车牌壳（lpr-plate）：按车牌类型套用实际外观，文字显示真实车牌
   ===================================================================== */
.lpr-plate {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0; padding: 1px 7px; border-radius: 3px;
  font-family: 'Arial Black', 'Microsoft YaHei', sans-serif;
  font-weight: 700; font-size: 13px; letter-spacing: normal; line-height: 1.2;
  white-space: nowrap; vertical-align: middle; box-sizing: border-box;
  border: 1px solid #c8cdd4; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.25);
  cursor: pointer;   /* 点击复制车牌 */
}
.lpr-plate .lpr-plate__ch { display: inline-block; }
.lpr-plate .lpr-plate__ch--sep { letter-spacing: 0; color: inherit; opacity: .9; }
.lpr-plate .lpr-plate__ch--red { font-weight: 800; font-style: normal; }
/* 详情放大：lg=细节放大，xl=主视觉（车牌套框放大成卡片） */
.lpr-plate--lg { font-size: 17px; padding: 3px 11px; border-radius: 4px; line-height: 1.35; }
.lpr-plate--xl { font-size: 22px; padding: 5px 14px; border-radius: 5px; line-height: 1.4; }

/* 蓝牌：蓝底白字 */
.lpr-plate--blue { background: #0a4db3; color: #fff; border-color: #0a3f92; }
/* 黄牌(大型车/教练)：黄底黑字 */
.lpr-plate--yellow { background: linear-gradient(180deg,#fce66a,#f7c928); color: #101010; border-color: #d9a800; }
/* 绿牌新能源(渐变)：绿渐变底黑字 */
.lpr-plate--green_new { background: linear-gradient(90deg,#8ed39c,#2eb872 50%,#a8e59a); color: #062b12; border-color: #1b9a5a; }
/* 白牌(军警)：白底黑字，警字红 */
.lpr-plate--white { background: linear-gradient(180deg,#fbfbfb,#e8e8e8); color: #181818; border-color: #b9b9b9; }
.lpr-plate--white .lpr-plate__ch--red { color: #e11d1d; }
/* 白牌警车：白底黑字，警字红 */
.lpr-plate--white_police { background: linear-gradient(180deg,#fbfbfb,#e8e8e8); color: #181818; border-color: #b9b9b9; }
.lpr-plate--white_police .lpr-plate__ch--red { color: #e11d1d; }
/* 黑牌(港澳/使领馆)：黑底白字 */
.lpr-plate--black_hm { background: linear-gradient(180deg,#1c1c1c,#2b2b2b); color: #fff; border-color: #000; }
.lpr-plate--black_consulate { background: linear-gradient(180deg,#1c1c1c,#2b2b2b); color: #fff; border-color: #000; }

/* 车牌外层容器（2026-10-09）：`非机动车` 车型小标已随「非机动车改凭证制」移除，
   仅保留 wrap 便于并排布局；`.lpr-plate` 仍是同一个元素（页面里对 .lpr-plate 的样式不受影响）。 */
.lpr-plate-wrap { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; max-width: 100%; }

/* =====================================================================
   车牌号输入控件（plate-input）：车牌皮肤分段输入（省 / 字母 / 号码），
   点格子弹省份 / 字母选择面板，也可直接键盘输入或粘贴。
   用法：<plate-input v-model="form.plate" :provinces="provinceShorts" :letters="cityLetters" :color-hint="hint" @change="onPlateChange" />
   颜色沿用上方 .lpr-plate--* 车牌配色。
   ===================================================================== */
.plate-item .el-form-item__label { height: 34px; line-height: 34px; }
.pi { position: relative; display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 8px 0 6px; border-width: 1px; border-style: solid; border-radius: 5px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.12); user-select: none; cursor: text; }
.pi.is-focus { box-shadow: inset 0 -2px 0 rgba(0,0,0,.10), 0 0 0 2px var(--el-color-primary-light-7); }
.pi.is-disabled { opacity: .6; cursor: not-allowed; }
.pi.is-disabled .pi__cell, .pi.is-disabled .pi__clear, .pi.is-disabled .pi__dot { pointer-events: none; }
.pi__cell { display: inline-flex; align-items: center; justify-content: center; height: 26px; border-radius: 3px; font-family: 'Arial Black', 'Microsoft YaHei', monospace; font-weight: 800; font-size: 19px; line-height: 1; }
.pi__cell--prov, .pi__cell--ltr { width: 24px; cursor: pointer; }
.pi__cell--prov:hover, .pi__cell--ltr:hover { background: rgba(255,255,255,.16); }
.pi__cell--num { justify-content: flex-start; min-width: 88px; padding: 0 2px; letter-spacing: .2em; }
.pi__dot { font-weight: 800; font-size: 14px; opacity: .85; margin: 0 1px; }
.pi__ph { font-size: 13px; font-weight: 500; opacity: .45; letter-spacing: normal; }
.pi__num { white-space: nowrap; }
.pi__caret { display: inline-block; width: 2px; height: 20px; background: currentColor; border-radius: 1px; animation: pi-blink 1s steps(1) infinite; }
@keyframes pi-blink { 50% { opacity: 0 } }
.pi__clear { margin-left: 4px; font-size: 12px; line-height: 1; cursor: pointer; opacity: .55; }
.pi__clear:hover { opacity: .95; }
.pi__proxy { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; pointer-events: none; }
.pi__proxy .el-input__wrapper { padding: 0; background: transparent; box-shadow: none !important; }
.plate-op-tip { margin-left: 10px; font-size: 12px; color: var(--el-text-color-secondary); line-height: 1.5; }
/* 车牌类型：默认显示自动识别结果，手选收进「手动指定」 */
.plate-type-line { display: flex; align-items: center; gap: 8px; line-height: 24px; }
.plate-type-now { font-size: 14px; color: var(--el-text-color-primary); }
/* 省份 / 字母选择面板（teleport 到 body） */
.pi-pop { padding: 10px 12px; }
.pi-pop__t { font-size: 12px; color: var(--el-text-color-secondary); margin-bottom: 8px; }
.pi-pop__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.pi-pop__grid--ltr { grid-template-columns: repeat(9, 1fr); }
.pi-pop__btn { height: 26px; padding: 0; font-size: 13px; color: var(--el-text-color-regular); background: var(--el-fill-color-blank); border: 1px solid var(--el-border-color); border-radius: 4px; cursor: pointer; }
.pi-pop__btn:hover { color: var(--el-color-primary); border-color: var(--el-color-primary); background: var(--el-color-primary-light-9); }
.header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.blue-link { color: var(--el-color-primary); }
.mi-emoji { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 15px; margin-right: 6px; vertical-align: middle; }

/* =====================================================================
   内容页通用的筛选卡片 / 工具栏 / 分页（各页面内联已含同名类，此处作为兜底统一）
   ===================================================================== */
.filter-card { margin-bottom: 10px; }
.filter-card .el-card__body { padding: 10px 12px 4px; }
.filter-wrap { display: flex; flex-wrap: wrap; align-items: center; row-gap: 9px; column-gap: 10px; }
.field { display: inline-flex; align-items: center; gap: 5px; }
.field > .lbl { font-size: 14px; color: var(--el-text-color-regular); white-space: nowrap; min-width: 64px; text-align: right; }
.field > .ctl { display: inline-flex; align-items: center; gap: 5px; }
.toolbar-row { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--lpr-divider); flex-wrap: wrap; gap: 8px; }
.page-row { display: flex; justify-content: flex-end; align-items: center; padding: 9px 2px; gap: 8px; }

/* =====================================================================
   深色主题细节（SaaS 质感微调）
   ===================================================================== */
html[data-theme="dark"] body { background: var(--lpr-bg); }
html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--lpr-scrollbar-thumb); border-radius: 4px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--lpr-scrollbar-thumb-hover); }
/* 深色下表格分割线：随 --lpr-divider 走（比原来 #2b2b2c 更清晰，行列分隔一眼可辨；表头底色不变） */
html[data-theme="dark"] .el-table {
  --el-table-border-color: var(--lpr-divider);
  --el-table-header-bg-color: var(--lpr-table-head-bg);
}
html[data-theme="dark"] .el-table td.el-table__cell { border-bottom-color: var(--lpr-divider); }
html[data-theme="dark"] .el-table th.el-table__cell { border-bottom-color: var(--lpr-divider); }
/* 深色下 el-message / 通知自动走 overlay 变量；此处补默认弹层圆角 */
html[data-theme="dark"] .el-message { border-color: var(--lpr-border); }


/* =====================================================================
   Art Design Pro 风格动效体系（纯 CSS，不依赖 JS 改动）
   ===================================================================== */
/* 卡片 hover 上浮 + 阴影过渡 */
.el-card:hover { border-color: #cedbff; box-shadow: 0 6px 16px rgba(0,0,0,.08) !important; transform: translateY(-2px); }
html[data-theme="dark"] .el-card:hover { border-color: var(--el-color-primary); box-shadow: 0 6px 16px rgba(0,0,0,.5) !important; }
.stat-card:hover { transform: translateY(-2px); }
/* 菜单折叠展开过渡（art: 0.26s cubic-bezier(.4,0,.2,1)） */
.el-menu.el-menu--inline { transition: max-height .26s cubic-bezier(.4,0,.2,1) !important; }
.aside .el-menu-item, .aside .el-sub-menu__title { transition: background-color .2s ease, color .2s ease !important; }
/* 表格行 hover 平滑 */
.el-table td.el-table__cell { transition: background-color .2s ease; }
/* 主题切换：新主题淡入（art 圆形扩散的纯 CSS 简化版） */
@keyframes lprThemeIn { from { opacity: .55; } to { opacity: 1; } }
html[data-theme="dark"] body { animation: lprThemeIn .4s ease; }
html:not([data-theme="dark"]) body { animation: lprThemeIn .4s ease; }

/* =====================================================================
   art-design-pro 组件级细节 1:1（弹窗缩放动画 / 菜单圆角 / 表单控件）
   ===================================================================== */
/* 主题切换：View Transition 圆形扩散（从点击位置展开，art 同款） */
html { --bg-animation-color: #fafbfc; }
html.dark { --bg-animation-color: #0b0c0e; }
html::view-transition-old(*) { animation: none; }
html::view-transition-new(*) { animation: lprClip .5s ease-in both; }
html::view-transition-old(root) { z-index: 1; }
html::view-transition-new(root) { z-index: 9999; }
html.dark::view-transition-old(*) { animation: lprClip .5s ease-in reverse both; }
html.dark::view-transition-new(*) { animation: none; }
html.dark::view-transition-old(root) { z-index: 9999; }
html.dark::view-transition-new(root) { z-index: 1; }
@keyframes lprClip {
  from { clip-path: circle(0% at var(--x) var(--y)); }
  to { clip-path: circle(var(--r) at var(--x) var(--y)); }
}
/* 弹窗：缩放弹出动画（art dialog-open cubic-bezier(.32,.14,.15,.86)） */
.dialog-fade-enter-active .el-dialog:not(.is-draggable) { animation: lprDialogOpen .3s cubic-bezier(.32,.14,.15,.86); }
@keyframes lprDialogOpen {
  0% { opacity: 0; transform: scale(.2); }
  100% { opacity: 1; transform: scale(1); }
}
/* 弹窗关闭按钮：灰底 hover（art 同款） */
.el-message-box__headerbtn .el-message-box__close,
.el-dialog__headerbtn .el-dialog__close {
  top: 7px; right: 7px; width: 30px; height: 30px;
  border-radius: 5px; transition: all .3s;
}
.el-message-box__headerbtn .el-message-box__close:hover,
.el-dialog__headerbtn .el-dialog__close:hover {
  background-color: #edeff0 !important; color: #383853 !important;
}
html[data-theme="dark"] .el-message-box__headerbtn .el-message-box__close:hover,
html[data-theme="dark"] .el-dialog__headerbtn .el-dialog__close:hover {
  background-color: #252530 !important; color: #fff !important;
}
/* 消息盒：10px 圆角 + 加宽 padding（art） */
.el-message-box { padding: 25px 20px !important; border-radius: 10px !important; }
/* 弹层窄屏兜底（2026-10-05 批次3-A）：弹层宽度是固定值（el-dialog 页面里最大 760px、
   el-drawer 最大 860px、message-box 默认 420px），窗口偏小或内容区被全屏 iframe 收窄时
   右侧会被裁掉。只用 max-width 兜底，宽屏取值不变（1440 下 dialog 760 / drawer 860 / 盒 420）。
   注意：message-box 的 420px 就是 vendor 的 max-width 上限（元素自身 width:100%），
   覆盖它会直接拉满整屏（2026-10-05 修复），必须用 min() 保留原上限。 */
.el-dialog { max-width: calc(100% - 24px); }
.el-message-box { max-width: min(var(--el-messagebox-width, 420px), calc(100% - 24px)); }
.el-drawer { max-width: 100%; }
/* 下拉菜单：圆角块 + 灰底 hover（art） */
.el-dropdown-menu { padding: 6px !important; border-radius: 10px !important; border: none !important; }
.el-dropdown-menu .el-dropdown-menu__item { padding: 6px 16px !important; border-radius: 6px !important; }
.el-dropdown-menu .el-dropdown-menu__item:hover:not(.is-disabled) { color: #383853 !important; background-color: #f2f4f5 !important; }
.el-dropdown-menu .el-dropdown-menu__item:focus:not(.is-disabled) { color: #383853 !important; background-color: #f2f4f5 !important; }
html[data-theme="dark"] .el-dropdown-menu .el-dropdown-menu__item:hover:not(.is-disabled),
html[data-theme="dark"] .el-dropdown-menu .el-dropdown-menu__item:focus:not(.is-disabled) { color: #fff !important; background-color: #252530 !important; }
/* 选择下拉：34px 圆角项（art） */
.el-select-dropdown__list { padding: 5px !important; }
.el-select-dropdown__item { height: 34px !important; line-height: 34px !important; border-radius: 6px !important; }
.el-select-dropdown__item.is-selected { color: #383853 !important; font-weight: 500 !important; background-color: #f2f4f5 !important; }
.el-select-dropdown__item:hover { background-color: #edeff0 !important; }
html[data-theme="dark"] .el-select-dropdown__item.is-selected { color: #fff !important; background-color: #252530 !important; }
html[data-theme="dark"] .el-select-dropdown__item:hover { background-color: #202226 !important; }
/* 复选框 16px 圆角4（art） */
.el-checkbox--default .el-checkbox__inner { width: 16px !important; height: 16px !important; border-radius: 4px !important; }
/* 标签：26px（art） */
.el-tag.el-tag--default { height: 26px !important; }
/* 树节点：圆角 + 灰底 hover（art） */
.el-tree-node__content { border-radius: 4px; margin-bottom: 4px; padding: 1px 0; }
.el-tree-node__content:hover { background-color: #edeff0 !important; }
html[data-theme="dark"] .el-tree-node__content:hover { background-color: #202226 !important; }
/* 分页：32px 圆角6（art） */
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li { border-radius: 6px; }

/* toast / 通知（art：重阴影 + 22px 图标） */
.el-message {
  background-color: var(--lpr-card-bg) !important;
  border: 0 !important;
  box-shadow: 0 6px 16px 0 rgba(0,0,0,.08), 0 3px 6px -4px rgba(0,0,0,.12), 0 9px 28px 8px rgba(0,0,0,.05) !important;
}
html[data-theme="dark"] .el-message { background-color: #161618 !important; }
.el-notification .el-notification__icon { font-size: 22px !important; }
/* 全局滚动条（art reset：8px、圆角5、灰滑块） */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #cccccc !important; transition: all .2s; }
::-webkit-scrollbar-thumb:hover { background-color: #b0abab !important; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #393946 !important; }

/* 内容页：底色与壳层页面底一致（白卡浮在近白/深底上，恢复卡片图底层次） */
body.in-iframe { padding: 12px 14px; background: var(--lpr-bg); }

/* =====================================================================
   弹窗表单两列网格（选择框不再撑满整行，弹窗更紧凑）
   ===================================================================== */
/* 弹窗内嵌宽内容（如相机表格）会按 min-content 撑宽列，导致内容溢出到弹窗外面；
   minmax(0,1fr) 允许列收缩到弹窗宽度内，溢出交给内容自身（表格内部滚动）处理 */
.dlg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
.dlg-grid .el-form-item.is-full { grid-column: 1 / -1; }
.dlg-grid .el-form-item .el-select { width: 100%; }
.dlg-grid .el-divider { grid-column: 1 / -1; }
/* 权限分组：标题置于开关组顶部居中 */
.dlg-grid .el-form-item.perm-top .el-form-item__label {
  justify-content: center;
  text-align: center;
  font-weight: 500;
}
/* 权限说明文字左对齐（不再居中） */
.dlg-grid .el-divider .el-divider__text {
  left: 160px;
  transform: translateY(-50%);
  padding-left: 0;
  padding-right: 20px;
}

/* =====================================================================
   AI 答案配色（AI 运营助手 + 各页 AI 答案的富文本着色）
   与站内设计一致、跟随主题变量（深浅色自动适配）：
   【小节】主题主色 / 行首「键：」辅助灰 / 车牌主色 / 金额加重 / 「建议语句」浅色底片
   ===================================================================== */
.lpr-air-sec { color: var(--el-color-primary); font-weight: 600; }
.lpr-air-k { color: var(--lpr-text-sub); }
.lpr-air-plate { color: var(--el-color-primary); font-weight: 600; }
.lpr-air-num { font-weight: 600; font-variant-numeric: tabular-nums; }
.lpr-ai-quote, .lpr-air-quote { background: var(--el-color-primary-light-9, #eff3ff); border-radius: 4px; padding: 0 3px; }

/* =====================================================================
   全站彩色化（与首页驾驶舱同风格）：卡片彩色强调 + 按钮彩色图标
   —— 卡片：每张 el-card 带强调色 --hc（默认主色）：柔光渐变底 + 标题彩色竖条 + 同色描边/hover 阴影
     单卡改色：<el-card style="--hc:#13deb9">（内联变量，语义色/主题色均走 --hc）
   —— 按钮：图标带「彩色胶囊」（首页快捷入口 .qico 同语言）；无 type 按钮的图标取主色
     link / text / 圆形 / plain / 纯图标按钮保持原样
   ===================================================================== */

/* 品牌强调色钩子（--page-hc）：全站卡片强调色 --hc 默认取主色（品牌蓝 #5d87ff）；
   如需更换品牌色，只需在 body（或任意容器）上覆盖 --page-hc / --page-hc-soft 两个变量，
   卡片自身的 --hc（统计卡语义色/调色板类/内联 --hc）优先级更高，不受影响。 */

/* 卡片：同色描边（--hc 可单卡覆盖）。
   2026-10-14：撤掉卡面上的彩色渐变底（原 --hc-soft 12% 由左上角淡出）——白卡上叠一层
   淡色会让「卡片本体」显脏、也和 art-design-pro 的纯净卡面不一致；彩色只保留在
   描边 / 标题竖条 / hover 反馈上。要恢复渐变底，把下面 background-image 一行加回即可。 */
.el-card {
  --hc: var(--page-hc, var(--el-color-primary));
  --hc-soft: var(--page-hc-soft, rgba(93,135,255,.12));   /* 兜底：不支持 color-mix 的旧内核 */
  --hc-line: var(--lpr-border);
  border-color: var(--hc-line);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .el-card {
    --hc-soft: color-mix(in srgb, var(--hc) 12%, transparent);
    --hc-line: color-mix(in srgb, var(--hc) 28%, var(--lpr-border));
  }
  .el-card:hover {
    border-color: color-mix(in srgb, var(--hc) 50%, var(--lpr-border)) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--hc) 18%, rgba(0,0,0,.10)) !important;
  }
  html[data-theme="dark"] .el-card:hover {
    border-color: color-mix(in srgb, var(--hc) 55%, var(--lpr-border)) !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--hc) 22%, rgba(0,0,0,.5)) !important;
  }
}
/* 卡片标题：左侧彩色竖条（首页 .dp-card 自带竖条，排除以免重复画条） */
.el-card > .el-card__header { position: relative; border-bottom: 1px solid var(--hc-line); }
.el-card:not(.dp-card) > .el-card__header::before {
  content: ''; position: absolute; left: 11px; top: 50%; width: 3px; height: 14px; margin-top: -7px;
  border-radius: 2px; background: var(--hc);
}
/* 统计卡沿用各自既有语义色（彩色底/描边与原有彩色顶边、彩色图标一致） */
.stat-card.total    { --hc: var(--el-color-primary); }
.stat-card.capacity { --hc: var(--el-color-warning); }
.stat-card.entry    { --hc: var(--el-color-success); }
.stat-card.exit     { --hc: var(--el-color-danger); }
.dash-stat.total    { --hc: var(--el-color-primary); }
.dash-stat.capacity { --hc: #ffae1f; }
.dash-stat.entry    { --hc: #13deb9; }
.dash-stat.exit     { --hc: #ff4d4f; }
.dash-stat.info     { --hc: #909399; }
/* 已有彩色顶边的卡片（stat-compact 等）：强调色跟随其顶边颜色，底色/描边自动同色 */
.el-card[style*="border-top:3px solid var(--lpr-soft-ok)"]     { --hc: var(--lpr-soft-ok); }
.el-card[style*="border-top:3px solid var(--lpr-soft-warn)"]   { --hc: var(--lpr-soft-warn); }
.el-card[style*="border-top:3px solid var(--lpr-soft-danger)"] { --hc: var(--lpr-soft-danger); }
.el-card[style*="border-top:3px solid var(--el-text-color-secondary)"] { --hc: var(--el-text-color-secondary); }
.el-card[style*="border-top:3px solid var(--el-color-primary)"] { --hc: var(--el-color-primary); }
.el-card[style*="border-top:3px solid #5d87ff"] { --hc: #5d87ff; }
.el-card[style*="border-top:3px solid #F1C40F"] { --hc: #f1c40f; }

/* 按钮：图标彩色胶囊（与首页快捷入口图标同款） */
@supports (color: color-mix(in srgb, currentColor 15%, transparent)) {
  .el-button:not(.is-link):not(.is-text):not(.is-circle):not(.is-plain) > .el-icon:first-child:not(:only-child):not(.is-loading) {
    box-sizing: content-box; padding: 2px; border-radius: 6px;
    background: color-mix(in srgb, currentColor 15%, transparent);
  }
}
/* 无 type 按钮：图标取主色（与首页彩色图标一致） */
.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-link):not(.is-text) > .el-icon:first-child:not(:only-child):not(.is-loading) {
  color: var(--el-color-primary);
}
/* 无 type 按钮：hover 转主色底（首页快捷入口按钮同款反馈） */
.el-button:not(.el-button--primary):not(.el-button--success):not(.el-button--warning):not(.el-button--danger):not(.el-button--info):not(.is-link):not(.is-text):not(.is-plain):hover {
  --el-button-hover-bg-color: var(--el-color-primary-light-9);
  --el-button-hover-border-color: var(--el-color-primary-light-5);
  --el-button-hover-text-color: var(--el-color-primary);
}

/* 表头保持中性灰底（品牌色只用于卡片/按钮等主动元素，表头不加彩色带） */

/* =====================================================================
   全站 UI 统一 Pass（2026-09-26）
   —— 1) 表单控件统一宽度上限：弹窗 / 内容页里的单列表单控件不再拉满整行
          （文本域、多列网格 el-col / dlg-grid、筛选区自定义控件不受影响；
            单页需要放宽时在容器上覆盖 --lpr-ctrl-max 即可）
      2) 内容页切换统一轻微淡入（不改布局定位，尊重系统「减少动效」偏好）
      3) 工具栏按钮组间距兜底（按钮行支持换行；页面内联同值样式优先生效）
      4) 筛选卡片系（filter-card / filter-wrap / field / toolbar-row / page-row）以 696-703 行定义为准，页面级同名覆写已清理统一
   ===================================================================== */
:root { --lpr-ctrl-max: 520px; }
body.in-iframe .el-form-item__content > .el-input,
body.in-iframe .el-form-item__content > .el-select,
body.in-iframe .el-form-item__content > .el-date-editor,
body.in-iframe .el-form-item__content > .el-time-picker,
body.in-iframe .el-form-item__content > .el-cascader,
body.in-iframe .el-form-item__content > .el-autocomplete,
.el-dialog .el-form-item__content > .el-input,
.el-dialog .el-form-item__content > .el-select,
.el-dialog .el-form-item__content > .el-date-editor,
.el-dialog .el-form-item__content > .el-time-picker,
.el-dialog .el-form-item__content > .el-cascader,
.el-dialog .el-form-item__content > .el-autocomplete,
.el-drawer .el-form-item__content > .el-input,
.el-drawer .el-form-item__content > .el-select,
.el-drawer .el-form-item__content > .el-date-editor {
  max-width: var(--lpr-ctrl-max);
}
@keyframes lprPageIn { from { opacity: 0; } to { opacity: 1; } }
body.in-iframe #app { animation: lprPageIn .22s ease-out both; }
@media (prefers-reduced-motion: reduce) { body.in-iframe #app { animation: none; } }
.toolbar-row > .btn-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar-row > div:last-child { display: flex; align-items: center; gap: 8px; }


/* =====================================================================
   页面通用小组件（2026-10-05 批次3-B：由 38 个页面内联副本提升，值保持一致）
   ===================================================================== */
.date-sep { color: var(--el-text-color-secondary); font-size: 13px; margin: 0 2px; }
.quick-bar { display: inline-flex; gap: 3px; align-items: center; }
.quick-btn { border: 1px solid var(--el-border-color-light); border-radius: 3px; padding: 2px 9px; font-size: 13px; cursor: pointer; background: var(--lpr-card-bg); color: var(--el-text-color-regular); line-height: 1.6; }
.stat-compact .el-card__body { padding: 0; margin: 0; }

/* =====================================================================
   跨模块通用小类（2026-10-05 批次5 提升；批次7 删去提升后实测零引用的
   .quick-wrap/.quick-bar-title/.radio-group，仅保留确有使用的下列三项）
   ===================================================================== */
.stat-item { padding: 6px 12px 4px; }
.stat-label { font-size: 13px; color: var(--el-text-color-secondary); line-height: 1.3; }
.check-group { display: inline-flex; flex-wrap: wrap; gap: 2px 6px; line-height: 1.3; }
/* 弹层长文本换行（2026-10-05 批次6：由 9-13 个页面内联副本提升为单一来源）
   场景：详情抽屉/弹窗里的描述表含超长无空格串（设备号、备注）；
   实测未加时描述表撑破容器（抽屉 829>820、弹窗 775>588）、flex 行溢出（827>780），
   加入后均回落容器内。对原本已有该规则的页面为逐字同值（零变化）。 */
.el-drawer .el-descriptions__cell, .el-dialog .el-descriptions__cell { word-break: break-word; overflow-wrap: anywhere; }
.el-drawer .el-drawer__body, .el-dialog .el-dialog__body { overflow-wrap: anywhere; }

/* =====================================================================
   批次8（2026-10-05）设计统一：
   1) 表格密度：记录表全站统一紧凑单元格内边距 6px（EP 默认 8px）。
      依据：仅 6 个最宽表页（25-31 列）显式覆写为 6px；另有 22 个 ≥12 列页面仍为默认 8px，
      业务主体是宽表（24 页 ≥15 列）→ 收敛为紧凑值，6 页内联副本一并删除。
   2) 统计值：.stat-value 统一 20px/600（原 6 页为 18/20/22px 三种取值，20px 为多数值）。
   ===================================================================== */
.el-table--small .cell { padding: 0 6px; }
.stat-value { font-size: 20px; font-weight: 600; color: var(--el-text-color-primary); line-height: 1.2; }
/* 财务对账统计卡片条（2026-10-05）：图标色块 + 标签 / 数值（支付订单/临停订单页顶部汇总）；6 列栅格 10 张卡呈 6 + 4 两行 */
.fin-stat-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
@media (max-width: 1360px) { .fin-stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .fin-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fin-stat { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px; background: var(--el-fill-color-blank); border: 1px solid var(--lpr-border); border-radius: 12px; box-shadow: var(--lpr-card-shadow); transition: box-shadow .25s, transform .25s; }
.fin-stat:hover { box-shadow: 0 6px 16px rgba(0,0,0,.08); transform: translateY(-2px); }
.fin-stat__ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 19px; }
.fin-stat__lb { font-size: 13px; color: var(--el-text-color-secondary); line-height: 1.3; white-space: nowrap; }
.fin-stat__vl { font-size: 16px; font-weight: 600; color: var(--el-text-color-primary); line-height: 1.35; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 抽屉详情表：标签列按内容自适应且不换行，内容列照常折行（2026-10-05 批次8-B）
   背景：10 个页面此前各自固定标签列宽 104/110/128/158px + table-layout:fixed，前态实测
   9 字标签（如「是否超位/放行原因」）在任何一种固定值下都会折成 2 行；改为自适应后标签恒定
   单行，内容仍受 overflow-wrap:anywhere 约束（长设备号等不会撑破抽屉）。 */
.el-descriptions__table { table-layout: auto; }
.el-descriptions__label { width: 1%; white-space: nowrap; }

/* =====================================================================
   系统操作动效包（2026-10-07）
   —— 目标：给「系统操作」补一层统一、克制的交互反馈动效（点按 / 悬停 / 菜单与
      标签切换 / 表单校验 / 翻页），让每一步操作都有即时反馈，而不是点下去毫无动静。
   —— 实现：全部纯 CSS，不依赖任何 JS 改动（沿用 671-685 行「Art Design Pro 风格
      动效体系」的做法）；只动 transform / opacity（走合成层，不触发布局重排），
      时长统一 0.12-0.32s；不改变任何交互语义、控件尺寸与布局。
   —— 无障碍：文末按系统「减少动效」偏好（prefers-reduced-motion）整体关闭。
   —— 回退：本段是追加的独立章节，整段删除即回到本段之前的表现。
   ===================================================================== */

/* 1) 按钮：悬浮抬起 + 按下回弹（.el-button 自带 transition: .1s，已覆盖 transform）。
      主按钮另加一层主色光晕，让「点了有反应」在常用操作（查询/保存/新增）上明显可见 */
.el-button:not(.is-disabled):not(.is-link):not(.is-text):hover { transform: translateY(-2px); }
.el-button:not(.is-disabled):not(.is-link):not(.is-text):active { transform: translateY(0) scale(.95); }
.el-button--primary:not(.is-disabled):not(.is-plain):not(.is-link):not(.is-text):hover { box-shadow: 0 4px 12px rgba(93, 135, 255, .38); }
.el-button--danger:not(.is-disabled):not(.is-plain):not(.is-link):not(.is-text):hover { box-shadow: 0 4px 12px rgba(255, 77, 79, .32); }
.el-button--success:not(.is-disabled):not(.is-plain):not(.is-link):not(.is-text):hover { box-shadow: 0 4px 12px rgba(19, 222, 185, .34); }
.el-button--warning:not(.is-disabled):not(.is-plain):not(.is-link):not(.is-text):hover { box-shadow: 0 4px 12px rgba(255, 174, 31, .34); }

/* 2) 顶栏图标按钮：按压缩放（只把 transform 过渡提速到 .12s，配色过渡保持原样） */
.hbtn { transition: background-color .3s, color .3s, transform .12s cubic-bezier(.4, 0, .2, 1); }
.hbtn:active { transform: scale(.9); }

/* 3) 侧边栏折叠：宽度过渡（el-aside 的 width 是行内样式，可直接补间） */
.aside { transition: width .26s cubic-bezier(.4, 0, .2, 1); }
/* 品牌标题：展开时随 v-show 的 display 切换重放（元素由 none → 显示会重新触发动画） */
.aside-title { animation: lprFadeInLeft .22s ease both; }

/* 4) 侧边栏菜单：hover 右移 + 图标放大。原 !important 过渡规则需一并带上 transform，
      否则会被 679 行的 background-color/color 白名单覆盖掉 */
.aside-menu .el-menu-item, .aside-menu .el-sub-menu__title {
  transition: background-color .2s ease, color .2s ease, transform .18s cubic-bezier(.4, 0, .2, 1) !important;
}
.aside-menu .el-menu-item > .el-icon, .aside-menu .el-sub-menu__title > .el-icon,
.aside-menu .mi-emoji { transition: transform .18s cubic-bezier(.4, 0, .2, 1), color .2s ease; }
.aside-menu .el-menu-item:hover, .aside-menu .el-sub-menu__title:hover { transform: translateX(3px); }
.aside-menu .el-menu-item:hover > .el-icon, .aside-menu .el-sub-menu__title:hover > .el-icon,
.aside-menu .el-menu-item:hover > .mi-emoji, .aside-menu .el-sub-menu__title:hover > .mi-emoji { transform: scale(1.18); }
/* 当前菜单：左侧指示条滑入（.el-menu-item 由 Element 自带 position: relative） */
.aside-menu .el-menu-item.is-active::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 16px; margin-top: -8px;
  border-radius: 0 2px 2px 0; background: var(--lpr-sidebar-active);
  animation: lprBarIn .22s cubic-bezier(.22, 1, .36, 1) both;
}
/* 侧边栏底部折叠按钮：图标切换时弹一下（component :is 切换会重建该元素） */
.aside-bottom > .el-icon { animation: lprPop .2s ease-out; }

/* 5) 工作台标签：新开标签弹入；关闭按钮 hover 旋转放大 */
.worktab { animation: lprRise .2s cubic-bezier(.22, 1, .36, 1); }
.worktab-close { transition: background-color .2s, color .2s, transform .2s cubic-bezier(.4, 0, .2, 1); }
.worktab-close:hover { transform: rotate(90deg) scale(1.1); }

/* 6) 快速查询按钮（今天 / 昨天 / 近7天…）：悬停转主色 + 按压缩放 */
.quick-btn { transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease; }
.quick-btn:hover { color: var(--el-color-primary); border-color: var(--el-color-primary-light-5); }
.quick-btn:active { transform: scale(.96); }

/* 7) 表单校验失败：控件抖动 + 错误提示滑入（操作被拦下的即时反馈） */
.el-form-item.is-error > .el-form-item__content { animation: lprShake .32s cubic-bezier(.36, .07, .19, .97); }
.el-form-item__error { animation: lprErrIn .2s ease-out; }

/* 8) 勾选类控件：选中时弹一下（取消勾选不弹） */
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner { animation: lprPop .18s ease-out; }

/* 9) 分页：切页时当前页码弹一下 */
.el-pager li.is-active { animation: lprPop .2s ease-out; }

/* 10) 表格空态：无数据提示淡入 */
.el-table__empty-text { animation: lprFadeIn .3s ease; }

/* 11) 菜单切换内容页：遮罩淡出 + 新页面轻浮上移"落位"。
       说明：页面自身的入场动画在 iframe 载入完成前就跑完了（此时还被加载遮罩盖着，
       2026-10-07 实测用户完全感知不到），所以切页动效必须由壳层做——遮罩用 opacity
       淡出（.on 由 common.js 控制，见 frameLoading），内容 iframe 用 .content-in 重放 */
.frame-loading { opacity: 0; pointer-events: none; transition: opacity .26s ease; }
.frame-loading.on { opacity: 1; pointer-events: auto; transition: none; }   /* 出现要瞬时：慢淡入会漏出 iframe 换源时的空白 */
.content-iframe.content-in { animation: lprPageUp .32s cubic-bezier(.22, 1, .36, 1) backwards; }

/* 12) 表格数据落位：查询/翻页后行自上而下依次浮现。
       .lpr-data-in 由 common.js 在「用户操作触发的数据到达」时加一次（样式只负责动，
       触发时机/防轮询闪烁都在 JS 侧），因此这里是全局生效，各页面零改动 */
.lpr-data-in .el-table__body tr { animation: lprRowUp .3s cubic-bezier(.22, 1, .36, 1) backwards; }
.lpr-data-in .el-table__body tr:nth-child(1) { animation-delay: 0ms; }
.lpr-data-in .el-table__body tr:nth-child(2) { animation-delay: 18ms; }
.lpr-data-in .el-table__body tr:nth-child(3) { animation-delay: 36ms; }
.lpr-data-in .el-table__body tr:nth-child(4) { animation-delay: 54ms; }
.lpr-data-in .el-table__body tr:nth-child(5) { animation-delay: 72ms; }
.lpr-data-in .el-table__body tr:nth-child(6) { animation-delay: 90ms; }
.lpr-data-in .el-table__body tr:nth-child(7) { animation-delay: 108ms; }
.lpr-data-in .el-table__body tr:nth-child(8) { animation-delay: 126ms; }
.lpr-data-in .el-table__body tr:nth-child(9) { animation-delay: 144ms; }
.lpr-data-in .el-table__body tr:nth-child(10) { animation-delay: 162ms; }
.lpr-data-in .el-table__body tr:nth-child(11) { animation-delay: 180ms; }
.lpr-data-in .el-table__body tr:nth-child(12) { animation-delay: 198ms; }
.lpr-data-in .el-table__body tr:nth-child(n+13) { animation-delay: 216ms; }
/* 统计卡 / 图表卡：同一时机一起轻浮落位（仪表盘 .dp-card、值守统计 .dash-stat、
   订单汇总 .stat-card、财务统计条 .fin-stat）——卡片自带 hover 上浮，动画不做 fill
   保持，落地即交还 transform，不会让 hover 失效 */
.dash-stat.lpr-data-in, .stat-card.lpr-data-in, .fin-stat.lpr-data-in, .dp-card.lpr-data-in {
  animation: lprCardUp .32s cubic-bezier(.22, 1, .36, 1) backwards;
}

/* 13) 加载遮罩：主色圆环 + 外层缓慢呼吸环（切换等待期间也有「在动」的观感） */
.frame-loading__spin { position: relative; width: 32px; height: 32px; border-color: rgba(93, 135, 255, .22); border-top-color: var(--el-color-primary); }
.frame-loading__spin::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: rgba(93, 135, 255, .5);
  animation: lprFrameSpin 1.6s linear infinite;
}

/* 14) 关键帧（to 帧一律落回 transform: none，避免残留 transform 生成包含块） */
@keyframes lprPageUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lprRowUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lprCardUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lprRise { from { opacity: 0; transform: translateY(-4px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes lprBarIn { from { opacity: 0; transform: scaleY(.2); } to { opacity: 1; transform: scaleY(1); } }
@keyframes lprPop { 0% { transform: scale(.86); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes lprShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); } 40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); } 80% { transform: translateX(2px); }
}
@keyframes lprErrIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@keyframes lprFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lprFadeInLeft { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

/* 15) 系统「减少动效」偏好：整体关闭本段新增动效 */
@media (prefers-reduced-motion: reduce) {
  .el-button, .hbtn, .aside, .aside-title, .aside-menu .el-menu-item, .aside-menu .el-sub-menu__title,
  .aside-menu .el-icon, .aside-menu .mi-emoji, .aside-bottom > .el-icon,
  .worktab, .worktab-close, .quick-btn, .el-form-item__content, .el-form-item__error,
  .el-checkbox__inner, .el-radio__inner, .el-pager li, .el-table__empty-text,
  .frame-loading, .content-iframe, .lpr-data-in, .lpr-data-in .el-table__body tr, .frame-loading__spin::after,
  .aside-menu .el-menu-item.is-active::before {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   交互动效增强包（2026-10-08）
   —— 承接 2026-10-07「系统操作动效包」，补齐其尚未覆盖的三类日常交互反馈：
      录入聚焦 / 宽表行定位 / 切页页头与弹层内容落位。仍是「操作有即时回应」的思路。
   —— 实现：纯 CSS（第 3 条另需壳层模板一行 :key，见 common.js 顶栏 page-head）；
      只动 transform / opacity / box-shadow（合成层或绘制层，不触发布局重排）；
      时长 0.18-0.3s；不改变任何控件尺寸、布局与交互语义。
   —— 无障碍：文末按系统「减少动效」偏好整体关闭。
   —— 回退：独立章节，整段删除即回到本段之前的表现。
   ===================================================================== */

/* 1) 录入聚焦：输入框/文本域聚焦时在主色内描边外补一层淡光晕（当前在改哪一格一眼可见）。
      Element 默认只有 1px 主色内阴影，这里补外发光；失焦回落由 transition 补间 */
.el-input__wrapper, .el-textarea__inner { transition: box-shadow .18s ease, border-color .18s ease; }
.el-input__wrapper.is-focus { box-shadow: 0 0 0 1px var(--el-color-primary) inset, 0 2px 10px rgba(93, 135, 255, .20) !important; }
.el-textarea__inner:focus { box-shadow: 0 0 0 1px var(--el-color-primary) inset, 0 2px 10px rgba(93, 135, 255, .20); }

/* 2) 宽表行定位：指针所在行左侧亮一条主色指示条（24 列以上的宽表里快速对齐视线）。
      只给首个单元格画 inset 阴影、不位移 tr——表格有固定列时 tr 位移会让固定列错位 */
.el-table__body tr > td:first-child { transition: box-shadow .18s ease; }
.el-table__body tr:hover > td:first-child { box-shadow: inset 3px 0 0 var(--el-color-primary); }

/* 3) 切页页头落位：点菜单切换页面时，顶栏「页面标题 + 说明」自左轻滑入
      （元素由壳层模板 :key="currentPath" 重建，故每次切页都重放一次） */
.page-head { animation: lprHeadIn .26s cubic-bezier(.22, 1, .36, 1) both; }

/* 4) 弹层内容落位：抽屉/弹窗打开时，内部表单项自上而下依次落位。
      EP 只动面板本身，内容原是一起"跳"出来的；弹层关闭时子树 display:none，
      再次打开会重新触发本动画（故每次打开都有效） */
.el-drawer__body .el-form-item, .el-dialog__body .el-form-item {
  animation: lprFieldIn .22s cubic-bezier(.22, 1, .36, 1) backwards;
}
.el-drawer__body .el-form-item:nth-child(2), .el-dialog__body .el-form-item:nth-child(2) { animation-delay: 18ms; }
.el-drawer__body .el-form-item:nth-child(3), .el-dialog__body .el-form-item:nth-child(3) { animation-delay: 36ms; }
.el-drawer__body .el-form-item:nth-child(4), .el-dialog__body .el-form-item:nth-child(4) { animation-delay: 54ms; }
.el-drawer__body .el-form-item:nth-child(n+5), .el-dialog__body .el-form-item:nth-child(n+5) { animation-delay: 72ms; }

/* 5) 关键帧（to 帧一律落回 transform: none，避免残留 transform 生成包含块） */
@keyframes lprHeadIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes lprFieldIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 6) 系统「减少动效」偏好：整体关闭本段新增动效 */
@media (prefers-reduced-motion: reduce) {
  .el-input__wrapper, .el-textarea__inner, .page-head,
  .el-table__body tr > td:first-child,
  .el-drawer__body .el-form-item, .el-dialog__body .el-form-item {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== 表格列筛选（2026-10-08）：「显示列」下拉面板（列的显隐由 <lpr-cols> 真正移除列，见 common.js） ===== */
.lpr-col-list { max-height: 44vh; overflow: auto; }
.lpr-col-list .el-checkbox { display: flex; margin-right: 0; }
.lpr-col-list .el-checkbox + .el-checkbox { margin-top: 2px; }
.lpr-col-fixed { margin-left: 6px; font-size: 12px; color: var(--el-text-color-secondary); }
.lpr-col-empty { font-size: 13px; color: var(--el-text-color-secondary); padding: 6px 0; }
.lpr-col-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }

/* =====================================================================
   卡片设计体系 Pass（2026-10-14）
   —— 为什么做：全站卡片此前是「多套并行实现」——圆角 6/8/10/12/14px 五种取值、阴影 6 种写法、
      统计卡三类落差（stat-compact 只有一个彩色顶边+小数字 / fin-stat 有 36px 图标块 /
      dash-stat 有 50px 图标块）、hover 有的上浮有的不动、深色下卡片阴影几乎不可见只剩描边。
   —— 口径（一套体系两张脸，与用户确认）：
      · 列表/表单脸：白卡 + 发丝描边 + 一级阴影，克制、内容为先；
      · 数据脸：统计 / KPI 卡带品牌强调色（图标徽章 + 主题色浅底 + 3px 强调条 + 大数字）。
   —— hover 统一：只做「阴影抬升 + 强调色描边」，不再位移跳动（密集卡片列表里跳动会显得廉价）。
   —— 落地方式：整段「覆盖」实现，不改上面既有规则；回滚 = 删除本段。
      备份：backend/backups/card-system-20261014-012655/（common.css / dashboard.html / merchant-console.html）
   —— 影响面：.el-card 全站 135 页；统计卡四类（stat-compact 9 页 / stat-card 7 页 /
      dash-stat 4 页 / fin-stat 5 页）；筛选卡 .filter-card 56 页。
   ===================================================================== */

:root {
  /* 圆角三档：卡片 / 卡内小块 / 控件（原为 6/8/10/12/14 五种并存） */
  --lpr-r-card: 14px;
  --lpr-r-inner: 10px;
  --lpr-r-ctl: 8px;
  /* 发丝描边：比原来的 --lpr-border 更轻，卡片静止态靠「描边 + 阴影」立起来而不是靠彩色边框 */
  --lpr-hairline: rgba(16,24,40,.07);
  /* 表面：卡片面 / 下沉面板（筛选卡、工具栏） */
  --lpr-surface: #ffffff;
  --lpr-sunken: #f7f8fa;
  /* 阴影三档：静止 / hover / 浮层 */
  --lpr-shadow-1: 0 1px 2px rgba(16,24,40,.04), 0 2px 6px -2px rgba(16,24,40,.07);
  --lpr-shadow-2: 0 8px 20px -6px rgba(16,24,40,.14), 0 2px 6px -2px rgba(16,24,40,.08);
  --lpr-shadow-3: 0 24px 48px -12px rgba(16,24,40,.20);
  /* 既有令牌重定向到新阴影一档（manual.html / merchant-console.html 等直接用它） */
  --lpr-card-shadow: var(--lpr-shadow-1);
}

html[data-theme="dark"] {
  /* 页面底抬一档：原 #070707 太黑，#161618 的卡片压不出层次 */
  --lpr-bg: #0b0c0e;
  --el-bg-color-page: #0b0c0e;
  --lpr-hairline: rgba(255,255,255,.09);
  --lpr-surface: #17181b;
  --lpr-sunken: #101114;
  /* 深色下阴影必须更重才看得见（原来 0 1px 3px rgba(0,0,0,.5) 在纯黑底上等于没有） */
  --lpr-shadow-1: 0 1px 2px rgba(0,0,0,.55), 0 2px 8px -2px rgba(0,0,0,.45);
  --lpr-shadow-2: 0 10px 26px -6px rgba(0,0,0,.65), 0 2px 8px -2px rgba(0,0,0,.50);
  --lpr-shadow-3: 0 26px 56px -14px rgba(0,0,0,.75);
}

/* 控件圆角统一到 8px（输入框/按钮/标签等由 EP 从 --el-border-radius-base 派生） */
:root { --el-border-radius-base: var(--lpr-r-ctl); }

/* ---------- 1) 卡片本体：14px + 发丝描边 + 一级阴影 ---------- */
.el-card {
  --el-card-bg-color: var(--lpr-surface);
  --el-card-padding: 18px;
  border-radius: var(--lpr-r-card) !important;
  border-color: var(--lpr-hairline);
  box-shadow: var(--lpr-shadow-1) !important;
}
/* 静止态描边保持中性：原「强调色 28% 混色描边」让每张卡都发蓝、整片卡面显脏；
   强调色改为只出现在 标题竖条 / hover / 数据卡浅底 上 */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .el-card { --hc-line: var(--lpr-hairline); }
}
/* 卡片头：统一内距与字号；分隔线走发丝描边 */
.el-card__header { font-size: 15px; font-weight: 600; padding: 12px 16px; }
.el-card > .el-card__header { border-bottom: 1px solid var(--lpr-hairline); }
/* 卡片内容区：统一留白节奏（原为 EP 默认 20px，各页零散覆写成 8~22px） */
.el-card__body { padding: 16px 18px; }

/* ---------- 2) hover 统一：阴影 + 强调色描边，不位移 ---------- */
.el-card:hover { transform: none; box-shadow: var(--lpr-shadow-2) !important; }
.el-card:not(.filter-card):not(.stat-compact):not(.is-disabled):hover {
  border-color: color-mix(in srgb, var(--hc) 42%, var(--lpr-hairline));
}
.stat-card:hover, .dash-stat:hover, .fin-stat:hover { transform: none; box-shadow: var(--lpr-shadow-2); }

/* ---------- 3) 筛选/工具栏卡：下沉面板（与浮起的内容卡拉开层次，56 页） ---------- */
.filter-card { background: var(--lpr-sunken); box-shadow: none !important; margin-bottom: 12px; }
.filter-card:hover { transform: none; box-shadow: none !important; border-color: var(--lpr-hairline); }
.filter-card .el-card__body { padding: 12px 14px 6px; }

/* ---------- 4) 统计卡统一骨骼（四类共用：浅色强调底 + 发丝描边 + 一级阴影 + 大数字） ---------- */
.stat-compact, .stat-card, .dash-stat {
  border-radius: var(--lpr-r-card);
  border-color: var(--lpr-hairline);
  box-shadow: var(--lpr-shadow-1);
  background-image: linear-gradient(180deg, var(--hc-soft, rgba(93,135,255,.10)), transparent 62%);
}
/* .dash-stat 不是 .el-card，拿不到 --hc-soft，需自行派生 */
.dash-stat { --hc-soft: rgba(93,135,255,.10); --hc-soft: color-mix(in srgb, var(--hc, var(--el-color-primary)) 10%, transparent); }
html[data-theme="dark"] .stat-compact,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .dash-stat,
html[data-theme="dark"] .fin-stat { border-color: var(--lpr-hairline); }

/* 数据卡角标：右上角一圈主题色柔光——给「没有图标徽章」的统计卡一个视觉锚点
   （有图标块的 .dash-stat / .dp-kpi 不加，避免与徽章打架） */
.stat-compact, .stat-card { position: relative; overflow: hidden; }
.stat-compact::before, .stat-card::before {
  content: ''; position: absolute; top: -20px; right: -20px; width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--hc-soft, rgba(93,135,255,.12)), transparent 70%);
  pointer-events: none;
}

/* 数据卡内距与大数字（stat-compact 的内层是页面内联 padding/font-size，需 !important 覆盖；
   选择器限定在 .stat-compact 内且只命中显式声明 20/22px 的节点，不会误伤标签行） */
.stat-compact .el-card__body > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 11px; row-gap: 1px; padding: 12px 14px 10px !important; }
/* 统计卡图标徽章（2026-10-14 深入）：markup 里只插一个 <span class="stat-ico">，容器两列网格、
   徽章占左列并跨行——无需加包裹层，「标签在上 / 数字在下」或反过来的两种既有写法都能对齐。
   徽章底色/图标色取卡片强调色 --hc（无映射时回落主色） */
.stat-ico {
  grid-row: 1 / span 3; width: 38px; height: 38px; border-radius: var(--lpr-r-inner); flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--hc-soft, rgba(93,135,255,.12)); color: var(--hc, var(--el-color-primary));
}
.stat-compact .el-card__body [style*="font-size:20px"], .stat-compact .el-card__body [style*="font-size: 20px"],
.stat-compact .el-card__body [style*="font-size:22px"], .stat-compact .el-card__body [style*="font-size: 22px"] {
  font-size: 24px !important; font-weight: 650 !important; line-height: 1.15 !important;
}

/* 统计卡带图标徽章的两类：徽章统一 10px 圆角、略放大 */
.dash-stat { padding: 18px 84px 18px 18px; }
.dash-stat .icon { width: 46px; height: 46px; border-radius: var(--lpr-r-inner); font-size: 20px; }
.dash-stat .meta .label { font-size: 13.5px; }
.dash-stat .meta .value { font-size: 27px; font-weight: 650; }
.stat-card .el-statistic__head { font-size: 13.5px; }
.stat-card .el-statistic__number { font-size: 28px; font-weight: 650; }
.stat-value { font-size: 24px; font-weight: 650; }
.stat-item { padding: 8px 14px 6px; }
.stat-label { font-size: 13.5px; }
/* fin-stat（支付/财务汇总条）：与体系对齐，图标块 40px */
.fin-stat { border-radius: var(--lpr-r-card); border-color: var(--lpr-hairline); box-shadow: var(--lpr-shadow-1); padding: 10px 14px; background: var(--lpr-surface); }
.fin-stat__ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: var(--lpr-r-inner); font-size: 20px; }
.fin-stat__lb { font-size: 13.5px; }
.fin-stat__vl { font-size: 18px; font-weight: 650; }

/* 5) 间接校验：卡片型栅格间距统一（原来 10/12/20px 混用） */
.dash-stats { gap: 14px; }
.fin-stat-row { gap: 12px; margin: 14px 0; }
.dash-stats.d3 { gap: 14px; }

/* 7) 补齐：页面在用但从无定义的类（lane-screen-config.html 的 .form-card 此前完全没有样式来源，
      表单页同款类在各页内联里是 margin-bottom:10~12px + 更大的 body 内距） */
.form-card { margin-bottom: 12px; }

/* 统计带（2026-10-14 深入②）：列表页表格上方的数据带。
   auto-fit + minmax 让 2~4 张卡自适应等宽，窄屏自动折行；卡片本体沿用 .stat-compact + .stat-ico 体系。 */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 12px; margin-bottom: 12px; }
.stat-row .stat-compact { min-width: 0; }

/* 窄统计卡（2026-10-14，.mini-stat）：筛选卡右侧/行内的小卡位（110~140px 宽，如「月租/储值/欠费订单」
   的付款汇总、追缴证据的记录笔数/金额）。宽卡骨架是「两列网格 + 24px 数字」（见上 .stat-compact
   .el-card__body > div），窄卡里再套两列网格会把数字挤进一列窄缝、被 overflow 裁掉（即「卡片压缩变形」）；
   窄卡因此走单列堆叠 + 16px 数字（金额在 94px 内可完整显示），卡片仍沿用统计卡令牌（圆角/描边/阴影/彩色顶边）。
   用法：<el-card class="stat-compact mini-stat" style="width:130px; border-top:3px solid X; padding:0">
           <div class="mini-stat-in"><div class="mini-stat-lb">标签</div><div class="mini-stat-vl">数值</div></div>
         </el-card> */
.mini-stat .el-card__body > div { display: block; padding: 8px 12px 6px !important; }
.mini-stat .mini-stat-lb { font-size: 13px; color: var(--el-text-color-secondary); line-height: 1.3; }
.mini-stat .mini-stat-lb + .mini-stat-lb { margin-top: 1px; }
.mini-stat .mini-stat-vl { font-size: 16px; font-weight: 600; line-height: 1.35; font-variant-numeric: tabular-nums; }

/* ---------- 6) 卡片顶部强调色映射补全 ----------
   统计卡常用「内联 border-top:3px solid X」声明强调色，--hc 靠属性选择器反推；
   原映射只覆盖了无空格写法，且漏了 soft-* 的带空格写法（3 处），此处补齐。 */
.el-card[style*="border-top:3px solid var(--lpr-soft-ok)"], .el-card[style*="border-top: 3px solid var(--lpr-soft-ok)"] { --hc: var(--lpr-soft-ok); }
.el-card[style*="border-top:3px solid var(--lpr-soft-warn)"], .el-card[style*="border-top: 3px solid var(--lpr-soft-warn)"] { --hc: var(--lpr-soft-warn); }
.el-card[style*="border-top:3px solid var(--lpr-soft-danger)"], .el-card[style*="border-top: 3px solid var(--lpr-soft-danger)"] { --hc: var(--lpr-soft-danger); }
.el-card[style*="border-top:3px solid var(--el-text-color-secondary)"], .el-card[style*="border-top: 3px solid var(--el-text-color-secondary)"] { --hc: var(--el-text-color-secondary); }
.el-card[style*="border-top:3px solid var(--el-color-primary)"], .el-card[style*="border-top: 3px solid var(--el-color-primary)"] { --hc: var(--el-color-primary); }
.el-card[style*="border-top:3px solid #5d87ff"], .el-card[style*="border-top: 3px solid #5d87ff"] { --hc: #5d87ff; }