.login-page[data-v-c31fa84c] {
  position: relative;
}
.login-card[data-v-c31fa84c] {
  position: relative;
  z-index: 1;
}
.login-brand[data-v-c31fa84c] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.brand-logo[data-v-c31fa84c] {
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
}
.login-brand-text[data-v-c31fa84c] {
  display: flex;
  flex-direction: column;
}
.login-brand-text h2[data-v-c31fa84c] {
  margin: 0;
  text-align: left;
  font-size: 22px;
  font-weight: 600;
  color: var(--zc-text-primary);
  line-height: 1.2;
}
.login-sub[data-v-c31fa84c] {
  margin-top: 3px;
  font-size: 12px;
  color: var(--zc-text-tertiary);
  letter-spacing: 0.04em;
}
.login-card[data-v-c31fa84c] .el-form {
  margin-top: 4px;
}
.login-card[data-v-c31fa84c] .el-button--primary {
  height: 40px;
  letter-spacing: 2px;
}
.login-footer[data-v-c31fa84c] {
  text-align: center;
  color: var(--zc-text-tertiary);
  font-size: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--zc-border-lighter);
}
@media (max-width: 480px) {
.login-card[data-v-c31fa84c] .el-input__inner {
    font-size: 16px;
}
}

.code-row[data-v-dc5aa419] {
  display: flex;
  gap: 10px;
}
.code-btn[data-v-dc5aa419] {
  min-width: 120px;
  flex-shrink: 0;
}
/* =========================================================================
   终成云 ERP · 统一 UI 设计系统 v4.0
   依据：Miora UI 设计规范（图片版）
   主色：#0066FF（Primary-500）
   设计语言：企业级数据平台 —— 专业、清爽、高密度、一致性
   =========================================================================

   ▍设计规范速查（新页面必须遵循，禁止另行硬编码一套视觉样式）
   ─ 主色：var(--zc-brand-blue) #0066FF / hover #0052CC / active #003D99
   ─ 完整色阶：Primary-50 #E6F0FF → Primary-900 #001433（10 级）
   ─ 语义色：Success #52C41A / Warning #FAAD14 / Error #F5222D / Info #1890FF
   ─ 中性色：Gray-50 #F5F5F5 → Gray-900 #000000（10 级）
   ─ 禁止色：Element Plus 默认蓝 #409eff、终成旧品牌蓝 #315AA8、紫蓝模板渐变
   ─ 字体：PingFang SC / Microsoft YaHei / Helvetica Neue / Arial
   ─ 字号：Display 48 / H1 32 / H2 24 / H3 20 / H4 16 / Body 14 / Small 12
   ─ 间距：4px 基准，space-0(0) → space-16(64px)
   ─ 圆角：none(0) / sm(2) / base(4) / md(6) / lg(8) / xl(12) / full(9999)
   ─ 阴影：7 级 elevation（sm / base / md / lg / xl / 2xl）
   ─ 动效：fast 150ms / base 200ms / slow 300ms，easing cubic-bezier(0.4,0,0.2,1)
   ─ z-index：dropdown(1000) → tooltip(1070)
   ========================================================================= */

:root {
  /* ===================== 主色阶（Primary Scale） ===================== */
  --zc-primary-50: #E6F0FF;
  --zc-primary-100: #CCE0FF;
  --zc-primary-200: #99C2FF;
  --zc-primary-300: #66A3FF;
  --zc-primary-400: #3385FF;
  --zc-primary-500: #0066FF;
  --zc-primary-600: #0052CC;
  --zc-primary-700: #003D99;
  --zc-primary-800: #002966;
  --zc-primary-900: #001433;

  /* 兼容别名（向后兼容 --zc-brand-blue 系列） */
  --zc-brand-blue: var(--zc-primary-500);
  --zc-brand-blue-hover: var(--zc-primary-600);
  --zc-brand-blue-active: var(--zc-primary-700);
  --zc-brand-blue-light: var(--zc-primary-50);
  --zc-brand-blue-light-2: var(--zc-primary-100);
  --zc-brand-blue-soft: #F0F6FF;
  --zc-brand-blue-border: var(--zc-primary-200);

  /* ===================== 语义色（Semantic Colors） ===================== */
  --zc-success: #52C41A;
  --zc-success-hover: #49B018;
  --zc-success-active: #3D9C15;
  --zc-success-soft: #F6FFED;
  --zc-success-border: #B7EB8F;

  --zc-warning: #FAAD14;
  --zc-warning-hover: #E09B12;
  --zc-warning-active: #C68810;
  --zc-warning-soft: #FFFBE6;
  --zc-warning-border: #FFE58F;

  --zc-danger: #F5222D;
  --zc-danger-hover: #DC1010;
  --zc-danger-active: #C00808;
  --zc-danger-soft: #FFF1F0;
  --zc-danger-border: #FFA39E;

  --zc-info: #1890FF;
  --zc-info-hover: #096DD9;
  --zc-info-active: #0050B3;
  --zc-info-soft: #E6F7FF;
  --zc-info-border: #91D5FF;

  /* 辅助强调色（保留兼容，映射到 Info 色系） */
  --zc-tech-cyan: var(--zc-info);
  --zc-tech-cyan-2: var(--zc-info-active);
  --zc-tech-cyan-soft: var(--zc-info-soft);

  /* ===================== 中性色阶（Gray Scale） ===================== */
  --zc-gray-50: #F5F5F5;
  --zc-gray-100: #F0F0F0;
  --zc-gray-200: #D9D9D9;
  --zc-gray-300: #BFBFBF;
  --zc-gray-400: #8C8C8C;
  --zc-gray-500: #595959;
  --zc-gray-600: #434343;
  --zc-gray-700: #262626;
  --zc-gray-800: #141414;
  --zc-gray-900: #000000;

  /* 文字色 */
  --zc-text-primary: var(--zc-gray-700);
  --zc-text-regular: var(--zc-gray-600);
  --zc-text-secondary: var(--zc-gray-500);
  --zc-text-tertiary: var(--zc-gray-400);
  --zc-text-placeholder: var(--zc-gray-300);
  --zc-text-disabled: var(--zc-gray-300);

  /* 面色 / 背景 */
  --zc-bg-page: var(--zc-gray-50);
  --zc-bg-surface: #FFFFFF;
  --zc-bg-solid: #FFFFFF;
  --zc-bg-soft: var(--zc-gray-50);
  --zc-bg-subtle: var(--zc-gray-100);
  --zc-bg-header: #FFFFFF;
  --zc-fill-hover: rgba(0, 0, 0, 0.04);
  --zc-fill-light: var(--zc-gray-50);
  --zc-fill-lighter: #FAFAFA;

  /* 边框 */
  --zc-border-light: var(--zc-gray-200);
  --zc-border-lighter: var(--zc-gray-100);
  --zc-border-strong: var(--zc-gray-300);
  --zc-divider: rgba(0, 0, 0, 0.06);

  /* ===================== 圆角（Border Radius） ===================== */
  --zc-radius-none: 0px;
  --zc-radius-xs: 2px;
  --zc-radius-sm: 4px;
  --zc-radius-base: 4px;
  --zc-radius: 6px;
  --zc-radius-md: 8px;
  --zc-radius-lg: 12px;
  --zc-radius-xl: 12px;
  --zc-radius-2xl: 16px;
  --zc-radius-full: 9999px;

  /* ===================== 间距（Spacing, 4px base） ===================== */
  --zc-space-0: 0px;
  --zc-space-1: 4px;
  --zc-space-2: 8px;
  --zc-space-3: 12px;
  --zc-space-4: 16px;
  --zc-space-5: 20px;
  --zc-space-6: 24px;
  --zc-space-8: 32px;
  --zc-space-10: 40px;
  --zc-space-12: 48px;
  --zc-space-16: 64px;

  /* ===================== 阴影（Elevation System） ===================== */
  --zc-shadow-none: none;
  --zc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --zc-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --zc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --zc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --zc-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --zc-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* 兼容别名 */
  --zc-shadow-subtle: var(--zc-shadow-sm);
  --zc-shadow-card: var(--zc-shadow-base);
  --zc-shadow-hover: var(--zc-shadow-md);
  --zc-shadow-focus: 0 0 0 2px rgba(0, 102, 255, 0.2);
  --zc-shadow-pop: var(--zc-shadow-lg);

  /* ===================== 动效（Transitions） ===================== */
  --zc-duration-fast: 150ms;
  --zc-duration-base: 200ms;
  --zc-duration-slow: 300ms;
  --zc-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
  --zc-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --zc-easing-out: cubic-bezier(0, 0, 0.2, 1);

  /* ===================== Z-Index 层级 ===================== */
  --zc-z-dropdown: 1000;
  --zc-z-sticky: 1020;
  --zc-z-fixed: 1030;
  --zc-z-modal-backdrop: 1040;
  --zc-z-modal: 1050;
  --zc-z-popover: 1060;
  --zc-z-tooltip: 1070;

  /* ===================== 透明度 ===================== */
  --zc-opacity-disabled: 0.6;
  --zc-opacity-loading: 0.8;

  /* ===================== 布局尺寸 ===================== */
  --zc-header-height: 56px;
  --zc-sidebar-width: 208px;
  --zc-sidebar-collapsed-width: 80px;
  --zc-sidebar-bg: #001529;
  --zc-sidebar-bg-sub: #000C17;
  --zc-sidebar-text: #A6ADB4;
  --zc-sidebar-active-bg: var(--zc-primary-500);
  --zc-sidebar-active-text: #FFFFFF;
  --zc-sidebar-hover-bg: rgba(255, 255, 255, 0.05);

  /* ===================== 图表色板 ===================== */
  --zc-chart-1: #0066FF;
  --zc-chart-2: #52C41A;
  --zc-chart-3: #FAAD14;
  --zc-chart-4: #F5222D;
  --zc-chart-5: #1890FF;
  --zc-chart-6: #722ED1;
  --zc-chart-7: #13C2C2;
  --zc-chart-8: #EB2F96;

  /* ===================== 字体系统（Typography） ===================== */
  --zc-font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --zc-font-family-numeric: "Helvetica Neue", "DIN Alternate", "DIN", Arial, sans-serif;
  --zc-font-family-mono: "SF Mono", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;

  --zc-font-size-display: 48px;
  --zc-font-size-h1: 32px;
  --zc-font-size-h2: 24px;
  --zc-font-size-h3: 20px;
  --zc-font-size-h4: 16px;
  --zc-font-size-body-lg: 16px;
  --zc-font-size-body: 14px;
  --zc-font-size-body-sm: 12px;
  --zc-font-size-caption: 12px;

  --zc-line-height-display: 56px;
  --zc-line-height-h1: 40px;
  --zc-line-height-h2: 32px;
  --zc-line-height-h3: 28px;
  --zc-line-height-h4: 24px;
  --zc-line-height-body-lg: 24px;
  --zc-line-height-body: 22px;
  --zc-line-height-body-sm: 20px;
  --zc-line-height-caption: 18px;

  --zc-font-weight-regular: 400;
  --zc-font-weight-medium: 500;
  --zc-font-weight-semibold: 600;
  --zc-font-weight-bold: 700;

  /* ===================== 响应式断点 ===================== */
  --zc-breakpoint-xs: 576px;
  --zc-breakpoint-sm: 576px;
  --zc-breakpoint-md: 768px;
  --zc-breakpoint-lg: 992px;
  --zc-breakpoint-xl: 1200px;
  --zc-breakpoint-xxl: 1600px;

  /* ===================== Element Plus 主题覆写 ===================== */
  --el-color-primary: #0066FF;
  --el-color-primary-light-3: #4D94FF;
  --el-color-primary-light-5: #80B2FF;
  --el-color-primary-light-7: #B3D1FF;
  --el-color-primary-light-8: #CCE0FF;
  --el-color-primary-light-9: #E6F0FF;
  --el-color-primary-dark-2: #0052CC;

  --el-color-success: #52C41A;
  --el-color-success-light-3: #95DE64;
  --el-color-success-light-5: #B7EB8F;
  --el-color-success-light-7: #D9F7BE;
  --el-color-success-light-8: #E8F8D8;
  --el-color-success-light-9: #F6FFED;
  --el-color-success-dark-2: #49B018;

  --el-color-warning: #FAAD14;
  --el-color-warning-light-3: #FFD666;
  --el-color-warning-light-5: #FFE58F;
  --el-color-warning-light-7: #FFF1B8;
  --el-color-warning-light-8: #FFF7D6;
  --el-color-warning-light-9: #FFFBE6;
  --el-color-warning-dark-2: #E09B12;

  --el-color-danger: #F5222D;
  --el-color-danger-light-3: #FF7875;
  --el-color-danger-light-5: #FFA39E;
  --el-color-danger-light-7: #FFCCC7;
  --el-color-danger-light-8: #FFE0DD;
  --el-color-danger-light-9: #FFF1F0;
  --el-color-danger-dark-2: #DC1010;

  --el-color-error: #F5222D;
  --el-color-info: #1890FF;
  --el-color-info-light-3: #69C0FF;
  --el-color-info-light-5: #91D5FF;
  --el-color-info-light-7: #BAE0FF;
  --el-color-info-light-8: #D6E4FF;
  --el-color-info-light-9: #E6F7FF;
  --el-color-info-dark-2: #096DD9;

  --el-text-color-primary: #262626;
  --el-text-color-regular: #434343;
  --el-text-color-secondary: #595959;
  --el-text-color-placeholder: #BFBFBF;
  --el-text-color-disabled: #BFBFBF;

  --el-border-color: #D9D9D9;
  --el-border-color-light: #D9D9D9;
  --el-border-color-lighter: #F0F0F0;
  --el-border-color-extra-light: #F5F5F5;
  --el-border-color-dark: #BFBFBF;
  --el-border-color-darker: #8C8C8C;

  --el-fill-color: #F0F0F0;
  --el-fill-color-light: #F5F5F5;
  --el-fill-color-lighter: #FAFAFA;
  --el-fill-color-blank: #FFFFFF;
  --el-fill-color-dark: #D9D9D9;
  --el-fill-color-darker: #BFBFBF;

  --el-bg-color: #FFFFFF;
  --el-bg-color-page: #F5F5F5;
  --el-bg-color-overlay: #FFFFFF;

  --el-border-radius-base: 4px;
  --el-border-radius-small: 4px;
  --el-border-radius-round: 999px;

  --el-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --el-box-shadow-light: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --el-box-shadow-lighter: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --el-box-shadow-dark: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ===================== 暗色主题 ===================== */
:root[data-theme="dark"] {
  --zc-primary-500: #3385FF;
  --zc-primary-600: #4D94FF;
  --zc-primary-700: #66A3FF;

  --zc-brand-blue: var(--zc-primary-500);
  --zc-brand-blue-hover: var(--zc-primary-600);
  --zc-brand-blue-active: var(--zc-primary-700);
  --zc-brand-blue-light: #001A40;
  --zc-brand-blue-light-2: #002966;
  --zc-brand-blue-soft: #001433;
  --zc-brand-blue-border: #003D99;

  --zc-text-primary: #F5F7FA;
  --zc-text-regular: #E5EAF3;
  --zc-text-secondary: #A8B3C7;
  --zc-text-tertiary: #7F8CA3;
  --zc-text-placeholder: #59647A;
  --zc-text-disabled: #4A5568;

  --zc-bg-page: #0A0F1A;
  --zc-bg-surface: #141B2D;
  --zc-bg-solid: #1A2335;
  --zc-bg-soft: #0F1623;
  --zc-bg-subtle: #1E2838;
  --zc-bg-header: #0F1623;
  --zc-fill-hover: rgba(51, 133, 255, 0.12);
  --zc-fill-light: #141B2D;
  --zc-fill-lighter: #1A2335;

  --zc-border-light: #2A3548;
  --zc-border-lighter: #1E2838;
  --zc-border-strong: #3B4A63;
  --zc-divider: rgba(229, 234, 243, 0.08);

  --zc-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.32), 0 8px 24px rgba(0, 0, 0, 0.22);
  --zc-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --zc-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.34), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --zc-shadow-focus: 0 0 0 2px rgba(51, 133, 255, 0.3);
  --zc-shadow-pop: 0 10px 15px -3px rgba(0, 0, 0, 0.42), 0 4px 6px -2px rgba(0, 0, 0, 0.25);

  --zc-sidebar-bg: #000A14;
  --zc-sidebar-bg-sub: #00050A;
  --zc-sidebar-text: #6B7785;
  --zc-sidebar-active-bg: var(--zc-primary-500);
  --zc-sidebar-active-text: #FFFFFF;
  --zc-sidebar-hover-bg: rgba(255, 255, 255, 0.03);

  --el-color-primary: #3385FF;
  --el-color-primary-light-3: #1A5CB8;
  --el-color-primary-light-5: #144299;
  --el-color-primary-light-7: #0D2E70;
  --el-color-primary-light-8: #0A2358;
  --el-color-primary-light-9: #061A40;
  --el-color-primary-dark-2: #4D94FF;

  --el-text-color-primary: #F5F7FA;
  --el-text-color-regular: #E5EAF3;
  --el-text-color-secondary: #A8B3C7;
  --el-text-color-placeholder: #59647A;
  --el-text-color-disabled: #4A5568;

  --el-border-color: #2A3548;
  --el-border-color-light: #2A3548;
  --el-border-color-lighter: #1E2838;
  --el-border-color-extra-light: #141B2D;
  --el-border-color-dark: #3B4A63;
  --el-border-color-darker: #4D5D78;

  --el-fill-color: #1E2838;
  --el-fill-color-light: #141B2D;
  --el-fill-color-lighter: #1A2335;
  --el-fill-color-blank: #141B2D;
  --el-fill-color-dark: #2A3548;
  --el-fill-color-darker: #3B4A63;

  --el-bg-color: #141B2D;
  --el-bg-color-page: #0A0F1A;
  --el-bg-color-overlay: #1A2335;
}

:root[data-theme="dark"] img {
  color-scheme: dark;
}

/* ===================== 基础重置 ===================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body, #app {
  height: 100%;
  font-family: var(--zc-font-family);
  color: var(--zc-text-regular);
  background: var(--zc-bg-page);
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  font-size: var(--zc-font-size-body);
  line-height: 1.571;
}

body {
  min-width: 320px;
}

#app-root {
  min-height: 100%;
}

::selection {
  color: #fff;
  background: rgba(0, 102, 255, 0.86);
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: var(--zc-radius-full);
  background: rgba(0, 0, 0, 0.18);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.32);
}

/* ===================== 布局壳 ===================== */

.layout-container {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--zc-bg-page);
}

/* 顶栏 */
.layout-header {
  height: var(--zc-header-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--zc-space-5);
  background: #FFFFFF;
  border-bottom: 1px solid var(--zc-border-light);
  box-shadow: var(--zc-shadow-sm);
  z-index: var(--zc-z-fixed);
}

.layout-header .logo {
  display: flex;
  align-items: center;
  gap: var(--zc-space-2);
  font-size: var(--zc-font-size-h4);
  font-weight: var(--zc-font-weight-semibold);
  color: var(--zc-text-primary);
  letter-spacing: 0;
  cursor: pointer;
}

.layout-header .logo .logo-img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
}

.layout-header .logo .logo-divider {
  width: 1px;
  height: 18px;
  background: var(--zc-border-light);
  margin: 0 2px;
}

.layout-header .logo .logo-sub {
  font-size: var(--zc-font-size-body-sm);
  font-weight: var(--zc-font-weight-medium);
  color: var(--zc-text-tertiary);
  padding: 2px var(--zc-space-2);
  border-radius: var(--zc-radius-full);
  background: var(--zc-bg-subtle);
}

.layout-body {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

/* 侧边栏：暗色导航 */
.layout-sidebar {
  position: relative;
  z-index: var(--zc-z-sticky);
  width: 152px;
  flex-shrink: 0;
  padding: 0;
  background: var(--zc-sidebar-bg);
  overflow: visible;
  transition: width var(--zc-duration-base) var(--zc-easing-default);
}

.layout-sidebar.has-secondary {
  width: 328px;
}

.layout-sidebar.is-collapsed {
  width: 64px;
}

.layout-sidebar.is-collapsed.has-secondary {
  width: 240px;
}

.layout-sidebar.is-collapsed.is-primary-hovering {
  width: 152px;
}

.layout-sidebar.is-collapsed.has-secondary.is-primary-hovering {
  width: 328px;
}

.layout-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--zc-space-5);
  background: var(--zc-bg-page);
  min-width: 0;
}

.layout-footer {
  display: none;
}

.mobile-sidebar-drawer .el-drawer__body {
  padding: var(--zc-space-2) var(--zc-space-2);
  background: var(--zc-sidebar-bg);
}

/* ===================== 按钮 ===================== */

.el-button {
  border-radius: var(--zc-radius-sm);
  font-weight: var(--zc-font-weight-medium);
  letter-spacing: 0;
  transition: background-color var(--zc-duration-fast) var(--zc-easing-default),
              border-color var(--zc-duration-fast) var(--zc-easing-default),
              color var(--zc-duration-fast) var(--zc-easing-default);
}

.el-button:not(.is-disabled):hover {
  transform: none;
}

.el-button:not(.is-disabled):active {
  transform: none;
}

.el-button--primary {
  --el-button-bg-color: var(--zc-primary-500);
  --el-button-border-color: var(--zc-primary-500);
  --el-button-hover-bg-color: var(--zc-primary-600);
  --el-button-hover-border-color: var(--zc-primary-600);
  --el-button-active-bg-color: var(--zc-primary-700);
  --el-button-active-border-color: var(--zc-primary-700);
  --el-button-text-color: #FFFFFF;
  box-shadow: none;
}

.el-button--primary:not(.is-disabled):hover {
  box-shadow: var(--zc-shadow-focus);
}

.el-button--success {
  --el-button-bg-color: var(--zc-success);
  --el-button-border-color: var(--zc-success);
  --el-button-hover-bg-color: var(--zc-success-hover);
  --el-button-hover-border-color: var(--zc-success-hover);
  --el-button-text-color: #FFFFFF;
  box-shadow: none;
}

.el-button--warning {
  --el-button-bg-color: var(--zc-warning);
  --el-button-border-color: var(--zc-warning);
  --el-button-hover-bg-color: var(--zc-warning-hover);
  --el-button-hover-border-color: var(--zc-warning-hover);
  --el-button-text-color: #FFFFFF;
  box-shadow: none;
}

.el-button--danger {
  --el-button-bg-color: var(--zc-danger);
  --el-button-border-color: var(--zc-danger);
  --el-button-hover-bg-color: var(--zc-danger-hover);
  --el-button-hover-border-color: var(--zc-danger-hover);
  --el-button-text-color: #FFFFFF;
  box-shadow: none;
}

.el-button.is-text,
.el-button--default {
  box-shadow: none;
}

.el-button--default:not(.is-link):not(.is-text) {
  background: #FFFFFF;
  border-color: var(--zc-border-light);
  color: var(--zc-text-regular);
}

.el-button--default:not(.is-disabled):hover {
  color: var(--zc-primary-500);
  border-color: var(--zc-primary-400);
  background: var(--zc-primary-50);
}

.el-button.is-link,
.el-button.is-text {
  border-radius: var(--zc-radius-sm);
}

.el-button.is-link:not(.is-disabled):hover,
.el-button.is-text:not(.is-disabled):hover {
  background: var(--zc-fill-hover);
  color: var(--zc-primary-500);
}

/* ===================== 卡片 / 弹窗 / 浮层 ===================== */

.el-card,
.el-dialog,
.el-message-box,
.el-popper,
.el-popover.el-popper,
.table-container,
.page-header,
.dashboard-toolbar,
.search-bar,
.filter-bar,
.stat-card,
.metric-card,
.grid-card,
.stat-item {
  border-color: var(--zc-border-light);
}

.el-card {
  border: 1px solid var(--zc-border-lighter);
  border-radius: var(--zc-radius);
  background: var(--zc-bg-surface);
  box-shadow: var(--zc-shadow-sm) !important;
  color: var(--zc-text-regular);
}

.el-card__header {
  padding: var(--zc-space-4) var(--zc-space-6);
  border-bottom: 1px solid var(--zc-border-lighter);
  color: var(--zc-text-primary);
  font-weight: var(--zc-font-weight-semibold);
}

.el-card__body {
  padding: var(--zc-space-6);
}

/* ===================== 筛选工具栏 ===================== */

.search-bar,
.filter-bar,
.toolbar,
.filters,
.ledger-filter-form,
.filter-form,
.meeting-filters,
.match-filter-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--zc-space-3);
}

.search-bar,
.filter-card .el-card__body {
  padding: var(--zc-space-3) var(--zc-space-4);
}

.filter-card,
.search-card,
.toolbar-card,
.main-card,
.top-card {
  border-radius: var(--zc-radius);
}

.filter-card {
  margin-bottom: var(--zc-space-3);
}

.filter-card .el-form-item,
.ledger-filter-form .el-form-item,
.filter-form .el-form-item,
.meeting-filters .el-form-item,
.match-filter-form .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}

.query-tabs,
.zc-query-tabs {
  display: inline-flex;
  align-items: center;
  height: 38px;
  margin-bottom: var(--zc-space-3);
  border: 1px solid var(--zc-border-light);
  border-radius: var(--zc-radius-sm);
  overflow: hidden;
  background: var(--zc-bg-surface);
}

.query-tab,
.zc-query-tab {
  height: 36px;
  padding: 0 var(--zc-space-4);
  border: 0;
  border-right: 1px solid var(--zc-border-light);
  color: var(--zc-text-secondary);
  background: transparent;
  cursor: pointer;
  font: inherit;
  transition: color var(--zc-duration-fast) var(--zc-easing-default),
              background-color var(--zc-duration-fast) var(--zc-easing-default);
}

.query-tab:last-child,
.zc-query-tab:last-child {
  border-right: 0;
}

.query-tab:hover,
.query-tab.active,
.zc-query-tab:hover,
.zc-query-tab.active {
  color: var(--zc-primary-500);
  background: var(--zc-primary-50);
}

.query-panel,
.zc-query-panel,
.zc-query-strip {
  margin-bottom: var(--zc-space-3);
  padding: var(--zc-space-4) var(--zc-space-5);
  background: var(--zc-bg-surface);
  border-bottom: 1px solid var(--zc-border-lighter);
}

.zc-query-strip {
  border: 1px solid var(--zc-border-light);
  border-radius: 0;
  box-shadow: none;
}

.query-row,
.zc-query-row,
.action-row,
.zc-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--zc-space-3);
}

.action-row,
.zc-action-row {
  margin-top: var(--zc-space-3);
}

.query-row .el-input,
.query-row .el-select,
.query-row .el-date-editor,
.zc-query-row .el-input,
.zc-query-row .el-select,
.zc-query-row .el-date-editor {
  max-width: 360px;
}

.query-label,
.zc-query-label {
  color: var(--zc-text-primary);
  font-weight: var(--zc-font-weight-medium);
  white-space: nowrap;
}

.zc-query-spacer {
  flex: 1 1 auto;
  min-width: 24px;
}

.detail-list-card {
  border-radius: var(--zc-radius);
  overflow: hidden;
}

.detail-list-card > .el-card__body {
  padding: 0;
}

.detail-list-card .el-table {
  border-radius: 0;
}

.detail-list-card .el-tabs {
  padding: 0 var(--zc-space-4) var(--zc-space-4);
}

.detail-page-shell {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.detail-table-card {
  border-radius: 0;
  box-shadow: none !important;
}

.detail-table-card > .el-card__body {
  padding: 0;
}

.detail-table-card .pagination-bar {
  padding: 0 var(--zc-space-4) var(--zc-space-4);
}

@media (max-width: 768px) {
  .query-panel,
  .zc-query-panel {
    padding: var(--zc-space-3);
  }

  .query-row,
  .zc-query-row,
  .action-row,
  .zc-action-row {
    align-items: stretch;
  }

  .query-row .el-input,
  .query-row .el-select,
  .query-row .el-date-editor,
  .zc-query-row .el-input,
  .zc-query-row .el-select,
  .zc-query-row .el-date-editor {
    width: 100% !important;
    max-width: none;
  }
}

/* ===================== 表格 ===================== */

.el-table {
  width: 100%;
  font-size: 13px;
  color: var(--zc-text-regular);
  border-radius: var(--zc-radius);
  overflow: hidden;
  --el-table-header-bg-color: #FAFAFA;
  --el-table-header-text-color: var(--zc-text-primary);
  --el-table-border-color: var(--zc-border-lighter);
  --el-table-row-hover-bg-color: var(--zc-primary-50);
  --el-table-current-row-bg-color: var(--zc-primary-100);
  --el-table-tr-bg-color: #FFFFFF;
}

.el-table th.el-table__cell {
  font-weight: var(--zc-font-weight-semibold);
  background: #FAFAFA !important;
  color: var(--zc-text-primary);
}

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

.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background: #FAFAFA;
}

.el-table__body tr,
.el-table__row {
  transition: background-color var(--zc-duration-fast) var(--zc-easing-default);
}

.el-table .cell {
  line-height: 1.5;
}

.el-table__inner-wrapper::before,
.el-table--border::after,
.el-table--border::before {
  background-color: var(--zc-border-lighter);
}

.el-table th.el-table__cell,
.el-table td.el-table__cell {
  border-bottom-color: var(--zc-border-lighter);
}

.el-table .el-button.is-link,
.el-table .el-button.is-text {
  padding: var(--zc-space-1) var(--zc-space-2);
  min-height: 26px;
  font-weight: var(--zc-font-weight-medium);
}

/* ===================== 表单 / 输入 ===================== */

.el-form-item__label {
  color: var(--zc-text-regular);
  font-weight: var(--zc-font-weight-medium);
}

.el-input__wrapper,
.el-select__wrapper,
.el-textarea__inner,
.el-date-editor.el-input__wrapper,
.el-cascader .el-input__wrapper {
  min-height: 32px;
  border-radius: var(--zc-radius-sm);
  background: #FFFFFF;
  box-shadow: 0 0 0 1px var(--zc-border-light) inset;
  transition: box-shadow var(--zc-duration-fast) var(--zc-easing-default),
              background-color var(--zc-duration-fast) var(--zc-easing-default);
}

.el-input__wrapper:hover,
.el-select__wrapper:hover,
.el-textarea__inner:hover {
  box-shadow: 0 0 0 1px var(--zc-primary-400) inset;
}

.el-input__wrapper.is-focus,
.el-select__wrapper.is-focused,
.el-textarea__inner:focus {
  background: var(--zc-bg-surface);
  box-shadow: 0 0 0 1px var(--zc-primary-500) inset, var(--zc-shadow-focus);
}

.el-input__inner::placeholder,
.el-textarea__inner::placeholder {
  color: var(--zc-text-placeholder);
}

.el-input-group__append,
.el-input-group__prepend {
  border-color: var(--zc-border-light);
  background: var(--zc-bg-subtle);
  color: var(--zc-text-secondary);
}

/* ===================== 弹窗 / 抽屉 ===================== */

.el-dialog {
  --el-dialog-width: 560px;
  border-radius: var(--zc-radius-md);
  overflow: hidden;
  background: var(--zc-bg-surface);
  box-shadow: var(--zc-shadow-xl);
}

.el-overlay {
  background-color: rgba(0, 0, 0, 0.45);
}

.el-dialog__header {
  margin-right: 0;
  padding: var(--zc-space-4) var(--zc-space-5);
  border-bottom: 1px solid var(--zc-border-lighter);
}

.el-dialog__title {
  color: var(--zc-text-primary);
  font-weight: var(--zc-font-weight-semibold);
  font-size: var(--zc-font-size-h4);
}

.el-dialog__body {
  padding: var(--zc-space-5);
}

.el-dialog__footer {
  padding: var(--zc-space-3) var(--zc-space-5) var(--zc-space-4);
  border-top: 1px solid var(--zc-border-lighter);
  background: var(--zc-bg-subtle);
}

.el-drawer {
  border-radius: 0;
}

/* ===================== 标签 / 分页 / Tabs ===================== */

.el-tag {
  border-radius: var(--zc-radius-sm);
  font-weight: var(--zc-font-weight-medium);
  border-width: 1px;
}

.el-tag--primary,
.el-tag.el-tag--primary {
  --el-tag-bg-color: var(--zc-info-soft);
  --el-tag-border-color: var(--zc-info-border);
  --el-tag-text-color: var(--zc-primary-500);
}

.el-tag--success { --el-tag-bg-color: var(--zc-success-soft); --el-tag-border-color: var(--zc-success-border); --el-tag-text-color: #389E0D; }
.el-tag--warning { --el-tag-bg-color: var(--zc-warning-soft); --el-tag-border-color: var(--zc-warning-border); --el-tag-text-color: #D48806; }
.el-tag--danger { --el-tag-bg-color: var(--zc-danger-soft); --el-tag-border-color: var(--zc-danger-border); --el-tag-text-color: #CF1322; }
.el-tag--info { --el-tag-bg-color: var(--zc-info-soft); --el-tag-border-color: var(--zc-info-border); --el-tag-text-color: var(--zc-info); }

.el-tabs__item {
  font-weight: var(--zc-font-weight-medium);
  color: var(--zc-text-secondary);
  transition: color var(--zc-duration-fast) var(--zc-easing-default);
}

.el-tabs__item.is-active {
  color: var(--zc-primary-500);
  font-weight: var(--zc-font-weight-semibold);
}

.el-tabs__active-bar {
  height: 2px;
  border-radius: var(--zc-radius-full);
  background: var(--zc-primary-500);
}

.el-pagination {
  margin-top: var(--zc-space-4);
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--zc-space-2);
  --el-pagination-hover-color: var(--zc-primary-500);
  --el-pagination-button-color: var(--zc-text-regular);
  --el-pagination-button-bg-color: #FFFFFF;
  --el-pagination-border-radius: var(--zc-radius-sm);
}

.el-pagination.is-background .el-pager li.is-active,
.el-pagination .el-pager li.is-active {
  color: #fff;
  background: var(--zc-primary-500);
}

/* ===================== 菜单 / 侧边栏项 ===================== */

.el-menu {
  border-right: none !important;
}

.layout-sidebar .el-menu,
.mobile-sidebar-drawer .el-menu {
  background: transparent !important;
}

.layout-sidebar .el-menu-item,
.layout-sidebar .el-sub-menu__title,
.mobile-sidebar-drawer .el-menu-item,
.mobile-sidebar-drawer .el-sub-menu__title {
  height: 40px;
  line-height: 40px;
  margin: 2px 0;
  padding: 0 var(--zc-space-3) 0 var(--zc-space-6);
  border-radius: var(--zc-radius-sm);
  color: var(--zc-sidebar-text) !important;
  transition: background-color var(--zc-duration-fast) var(--zc-easing-default),
              color var(--zc-duration-fast) var(--zc-easing-default);
}

.layout-sidebar .el-menu-item:hover,
.layout-sidebar .el-sub-menu__title:hover,
.mobile-sidebar-drawer .el-menu-item:hover,
.mobile-sidebar-drawer .el-sub-menu__title:hover {
  color: #FFFFFF !important;
  background: var(--zc-sidebar-hover-bg) !important;
}

.layout-sidebar .el-menu-item.is-active,
.mobile-sidebar-drawer .el-menu-item.is-active {
  position: relative;
  color: var(--zc-sidebar-active-text) !important;
  background: var(--zc-sidebar-active-bg) !important;
  font-weight: var(--zc-font-weight-semibold);
}

.layout-sidebar .el-menu-item.is-active .el-icon,
.mobile-sidebar-drawer .el-menu-item.is-active .el-icon {
  color: var(--zc-sidebar-active-text);
}

.layout-sidebar .el-sub-menu .el-menu-item,
.mobile-sidebar-drawer .el-sub-menu .el-menu-item {
  background: transparent !important;
  padding-left: 40px !important;
  height: 38px;
  line-height: 38px;
  font-size: 13px;
  color: var(--zc-sidebar-text) !important;
}

.layout-sidebar .el-sub-menu .el-menu-item.is-active,
.mobile-sidebar-drawer .el-sub-menu .el-menu-item.is-active {
  background: var(--zc-sidebar-active-bg) !important;
  color: var(--zc-sidebar-active-text) !important;
}

.layout-sidebar .el-sub-menu.is-opened > .el-sub-menu__title,
.mobile-sidebar-drawer .el-sub-menu.is-opened > .el-sub-menu__title {
  color: #FFFFFF !important;
  background: var(--zc-sidebar-hover-bg) !important;
}

.el-menu .el-icon {
  opacity: 1;
}

/* ===================== 浮层 / 下拉 ===================== */

.el-dropdown-menu,
.el-picker-panel,
.el-select-dropdown,
.el-popover.el-popper {
  border-radius: var(--zc-radius);
  border: 1px solid var(--zc-border-light);
  box-shadow: var(--zc-shadow-lg);
}

.el-empty__description p {
  color: var(--zc-text-secondary);
}

.el-loading-mask {
  background-color: rgba(245, 245, 245, 0.72);
}

.el-message,
.el-message-box {
  border-radius: var(--zc-radius);
  border-color: var(--zc-border-light);
  box-shadow: var(--zc-shadow-lg);
}

.el-progress-bar__outer {
  background: var(--zc-gray-100);
}

.el-progress-bar__inner {
  background: var(--zc-primary-500);
}

.el-switch.is-checked .el-switch__core {
  border-color: var(--zc-primary-500);
  background: var(--zc-primary-500);
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner {
  border-color: var(--zc-primary-500);
  background: var(--zc-primary-500);
}

.el-checkbox__input.is-checked + .el-checkbox__label,
.el-radio__input.is-checked + .el-radio__label {
  color: var(--zc-primary-500);
}

/* ===================== 通用业务容器 ===================== */

.page-header,
.dashboard-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--zc-space-4);
  margin-bottom: var(--zc-space-4);
  padding: var(--zc-space-3) var(--zc-space-4);
  background: var(--zc-bg-surface);
  border: 1px solid var(--zc-border-light);
  border-radius: var(--zc-radius-md);
  box-shadow: var(--zc-shadow-sm);
}

.page-header h1,
.page-header h2,
.dashboard-toolbar h2 {
  margin: 0;
  color: var(--zc-text-primary);
  font-weight: var(--zc-font-weight-semibold);
  line-height: 1.3;
}

.page-header h1 { font-size: var(--zc-font-size-h3); }
.page-header h2,
.dashboard-toolbar h2 { font-size: var(--zc-font-size-h4); }

.search-bar,
.filter-bar {
  margin-bottom: var(--zc-space-4);
  padding: var(--zc-space-3) var(--zc-space-3) 2px;
  display: flex;
  gap: var(--zc-space-3);
  align-items: center;
  flex-wrap: wrap;
  background: #FFFFFF;
  border: 1px solid var(--zc-border-light);
  border-radius: var(--zc-radius-md);
  box-shadow: var(--zc-shadow-sm);
}

.table-container {
  background: #FFFFFF;
  border: 1px solid var(--zc-border-light);
  border-radius: var(--zc-radius-md);
  padding: var(--zc-space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--zc-shadow-sm);
}

.card-title {
  font-size: 15px;
  font-weight: var(--zc-font-weight-semibold);
  margin-bottom: var(--zc-space-4);
  color: var(--zc-text-primary);
  display: flex;
  align-items: center;
  gap: var(--zc-space-2);
}

.card-title::before {
  content: '';
  width: 3px;
  height: 14px;
  background: var(--zc-primary-500);
  border-radius: var(--zc-radius-full);
}

/* 指标卡 / 网格卡 */
.stat-card,
.metric-card,
.grid-card,
.stat-item,
.stats-card,
.summary-card,
.overview-card,
.kpi-card,
.dashboard-card,
.compact-metric {
  position: relative;
  border: 1px solid var(--zc-border-light) !important;
  border-left: 1px solid var(--zc-border-light) !important;
  border-radius: var(--zc-radius-lg) !important;
  background: var(--zc-bg-surface) !important;
  box-shadow: var(--zc-shadow-sm) !important;
  overflow: hidden;
  transition: transform var(--zc-duration-base) var(--zc-easing-default),
              border-color var(--zc-duration-base) var(--zc-easing-default),
              box-shadow var(--zc-duration-base) var(--zc-easing-default),
              background-color var(--zc-duration-base) var(--zc-easing-default);
}

.stat-card::before,
.metric-card::before,
.grid-card::before,
.stat-item::before,
.stats-card::before,
.summary-card::before,
.overview-card::before,
.kpi-card::before,
.dashboard-card::before,
.compact-metric::before,
.stat-card::after,
.metric-card::after,
.grid-card::after,
.stat-item::after,
.stats-card::after,
.summary-card::after,
.overview-card::after,
.kpi-card::after,
.dashboard-card::after,
.compact-metric::after {
  display: none !important;
  content: none !important;
}

.stat-card.active,
.metric-card.active,
.grid-card.active,
.stat-item.active,
.stats-card.active,
.summary-card.active,
.overview-card.active,
.kpi-card.active,
.dashboard-card.active,
.compact-metric.active,
.stat-card:hover,
.metric-card:hover,
.grid-card:hover,
.stat-item:hover,
.stats-card:hover,
.summary-card:hover,
.overview-card:hover,
.kpi-card:hover,
.dashboard-card:hover,
.compact-metric:hover {
  border-color: var(--zc-primary-300) !important;
  box-shadow: var(--zc-shadow-md) !important;
  transform: translateY(-1px);
}

.stat-card strong,
.metric-card strong,
.compact-metric strong,
.stat-card b,
.metric-card b,
.stat-card .value,
.metric-card .value,
.stat-number,
.stat-num {
  color: var(--zc-primary-500);
  font-weight: var(--zc-font-weight-bold);
  letter-spacing: -0.01em;
}

.empty-state,
.error-state {
  background: var(--zc-bg-surface);
  border: 1px dashed var(--zc-border-strong);
  border-radius: var(--zc-radius-md);
}

/* ===================== 登录页 ===================== */

.login-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--zc-bg-page);
  padding: var(--zc-space-4);
}

.login-card {
  width: 100%;
  max-width: 400px;
  padding: 36px var(--zc-space-8) 28px;
  background: var(--zc-bg-surface);
  border: 1px solid var(--zc-border-light);
  border-radius: var(--zc-radius-md);
  box-shadow: var(--zc-shadow-xl);
}

.login-card h2 {
  text-align: center;
  margin: 0 0 var(--zc-space-1);
  color: var(--zc-text-primary);
  font-size: var(--zc-font-size-h2);
  font-weight: var(--zc-font-weight-semibold);
  letter-spacing: 0;
}

.login-card .subtitle {
  text-align: center;
  margin: 0 0 var(--zc-space-6);
  color: var(--zc-text-tertiary);
  font-size: 13px;
}

/* ===================== 提示 / 警告 ===================== */

.el-alert {
  border-radius: var(--zc-radius);
  border: 1px solid transparent;
}

.el-alert--success.is-light { border-color: var(--zc-success-border); }
.el-alert--warning.is-light { border-color: var(--zc-warning-border); }
.el-alert--error.is-light { border-color: var(--zc-danger-border); }
.el-alert--info.is-light { border-color: var(--zc-info-border); }

.el-message {
  padding: var(--zc-space-2) var(--zc-space-4);
  background: #FFFFFF;
}

.el-message--success { --el-message-bg-color: var(--zc-success-soft); --el-message-border-color: var(--zc-success-border); --el-message-text-color: #389E0D; }
.el-message--warning { --el-message-bg-color: var(--zc-warning-soft); --el-message-border-color: var(--zc-warning-border); --el-message-text-color: #D48806; }
.el-message--error { --el-message-bg-color: var(--zc-danger-soft); --el-message-border-color: var(--zc-danger-border); --el-message-text-color: #CF1322; }
.el-message--info { --el-message-bg-color: var(--zc-info-soft); --el-message-border-color: var(--zc-info-border); --el-message-text-color: var(--zc-info); }

.el-empty {
  padding: var(--zc-space-8) 0;
}

.el-skeleton__item {
  background: linear-gradient(90deg, #F0F0F0 25%, #F5F5F5 37%, #F0F0F0 63%);
  background-size: 400% 100%;
}

/* ===================== 顶栏用户区 ===================== */

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--zc-space-2);
  min-height: 34px;
  padding: 0 var(--zc-space-3);
  color: var(--zc-text-regular);
  font-size: var(--zc-font-size-body);
  border: 1px solid var(--zc-border-light);
  border-radius: var(--zc-radius-full);
  background: #FFFFFF;
  transition: border-color var(--zc-duration-fast) var(--zc-easing-default),
              background-color var(--zc-duration-fast) var(--zc-easing-default);
}

.user-info:hover {
  color: var(--zc-primary-500);
  border-color: var(--zc-primary-300);
  background: var(--zc-primary-50);
}

.menu-btn {
  display: none;
  border-radius: var(--zc-radius-sm);
}

/* ===================== 响应式 ===================== */

@media (max-width: 768px) {
  .layout-header {
    padding: 0 var(--zc-space-3);
    height: 52px;
  }

  .layout-header .logo {
    font-size: 15px;
    gap: var(--zc-space-2);
  }

  .layout-header .logo .logo-sub {
    display: none;
  }

  .layout-sidebar {
    display: none;
  }

  .layout-content {
    padding: var(--zc-space-3);
  }

  .page-header,
  .dashboard-toolbar,
  .search-bar,
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--zc-space-2);
    padding: var(--zc-space-3);
    border-radius: var(--zc-radius);
  }

  .search-bar > *,
  .filter-bar > * {
    width: 100% !important;
  }

  .search-bar .el-select,
  .filter-bar .el-select {
    width: 100% !important;
  }

  .table-container {
    padding: var(--zc-space-3);
    margin: 0 calc(-1 * var(--zc-space-3));
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .table-container .el-table {
    font-size: 12px;
  }

  .card-title {
    font-size: 14px;
    margin-bottom: var(--zc-space-3);
  }

  .el-dialog {
    --el-dialog-width: 92vw !important;
    max-width: 92vw;
    margin: 0 auto !important;
    align-self: flex-start !important;
    margin-top: 10vh !important;
  }

  .el-drawer {
    width: 85vw !important;
  }

  .el-pagination {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--zc-space-1);
  }

  .el-form-item {
    margin-bottom: var(--zc-space-3);
  }

  .el-form-item__label {
    font-size: 13px;
  }

  .el-input__inner {
    font-size: 14px !important;
  }

  .mobile-hide {
    display: none !important;
  }

  .mobile-show {
    display: block !important;
  }

  .pc-only {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .layout-content {
    padding: var(--zc-space-2);
  }

  .login-card {
    padding: 28px var(--zc-space-5);
    border-radius: var(--zc-radius);
  }

  .login-card h2 {
    font-size: 22px;
  }

  .card-title {
    font-size: 14px;
  }

  .el-button {
    font-size: 13px;
    padding: var(--zc-space-2) var(--zc-space-4);
  }

  .el-dialog {
    --el-dialog-width: 96vw !important;
    max-width: 96vw;
    border-radius: var(--zc-radius);
  }

  .el-message-box {
    width: 90vw !important;
    max-width: 90vw;
  }

  .el-notification {
    width: calc(100vw - 32px) !important;
  }

  .el-tag {
    font-size: 11px;
    padding: 0 var(--zc-space-2);
  }

  .el-tabs__header {
    margin-bottom: var(--zc-space-2);
  }

  .el-tabs__item {
    font-size: 13px;
    padding: 0 var(--zc-space-3);
  }

  .grid-card {
    padding: var(--zc-space-3) !important;
  }

  .stat-number {
    font-size: 20px !important;
  }

  .summary-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 375px) {
  .layout-content {
    padding: var(--zc-space-1);
  }

  .el-form-item {
    margin-bottom: var(--zc-space-3);
  }
}

.mobile-hide {
  display: initial;
}

.mobile-show {
  display: none !important;
}

.mobile-full-btn {
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
/**
 * 终成云 ERP · 列表页全局标准样式（唯一 UI 模板标准）
 * 所有列表页必须使用此样式体系，禁止页面自行硬编码颜色/间距/圆角
 * 版本: 3.0.0
 * 日期: 2026-07-22
 * 基础变量来自 index.css（--zc-* 体系），此处不重复定义
 *
 * 标准列表页六大区块结构（对照 UI 标准图片）：
 *   ① std-top-nav-bar     — 顶部导航条（面包屑 + 返回按钮）
 *   ② std-page-header     — 页面标题（仅标题，左侧蓝色竖条，无描述文字）
 *   ③ std-status-tabs     — 状态标签页（可选，无标签页则不放）
 *   ④ std-filter-panel    — 筛选面板（可选，无筛选则不放）
 *   ⑤ std-toolbar         — 操作按钮行 + 顶部分页（右侧）
 *   ⑥ std-table           — 数据表格
 *   ⑦ std-pagination      — 底部分页
 */

/* ========== 1. 顶部导航条（面包屑 + 返回） ========== */

.std-top-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: var(--zc-bg-surface);
  border: 1px solid var(--zc-border-light);
  border-radius: var(--zc-radius);
  margin-bottom: 12px;
}
.std-top-nav-bar .std-top-nav-right {
  flex-shrink: 0;
}

/* 面包屑 */
.std-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--zc-text-tertiary);
  margin-bottom: 0;
  line-height: 1.5;
}
.std-breadcrumb .std-breadcrumb-item {
  color: var(--zc-text-tertiary);
  transition: color 0.15s ease;
  cursor: default;
}
.std-breadcrumb .std-breadcrumb-item.clickable {
  cursor: pointer;
}
.std-breadcrumb .std-breadcrumb-item.clickable:hover {
  color: var(--zc-brand-blue);
}
.std-breadcrumb .std-breadcrumb-item.current {
  color: var(--zc-text-primary);
  font-weight: 600;
}
.std-breadcrumb .std-breadcrumb-sep {
  color: var(--zc-text-placeholder);
  font-size: 12px;
}

/* 返回按钮 */
.std-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--zc-text-secondary);
  background: var(--zc-bg-surface);
  border: 1px solid var(--zc-border-light);
  border-radius: var(--zc-radius-sm);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.std-back-btn:hover {
  color: var(--zc-brand-blue);
  border-color: var(--zc-brand-blue-border);
  background: var(--zc-brand-blue-soft);
}
.std-back-btn .el-icon {
  font-size: 14px;
}

/* ========== 2. 页面标题（仅标题，左侧蓝色竖条） ========== */

.std-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 12px 0;
  margin-bottom: 0;
}
.std-page-header .std-page-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--zc-text-primary);
  margin: 0;
  line-height: 1.4;
  padding-left: 10px;
  border-left: 4px solid var(--zc-brand-blue);
}
.std-page-header .std-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 兼容旧结构：标题 + 面包屑 + 返回的顶部区域 */
.std-page-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4px;
}
.std-page-top-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ========== 3. 状态标签页 ========== */

.std-status-tabs {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--zc-border-lighter);
  padding-bottom: 0;
  margin-bottom: 12px;
}
.std-status-tab {
  cursor: pointer;
  font-size: 14px;
  color: var(--zc-text-secondary);
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  white-space: nowrap;
  position: relative;
  top: 1px;
}
.std-status-tab:hover {
  color: var(--zc-brand-blue);
}
.std-status-tab.active {
  color: var(--zc-brand-blue);
  font-weight: 600;
  border-bottom-color: var(--zc-brand-blue);
}
.std-status-tab .tab-num {
  font-size: 13px;
  color: var(--zc-text-tertiary);
  font-weight: 500;
  margin-left: 4px;
}
.std-status-tab.active .tab-num {
  color: var(--zc-brand-blue);
}

/* Tab + 分页行（兼容旧结构） */
.std-tab-page-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 8px;
}
.std-tab-page-row .std-status-tabs {
  border-bottom: none;
  margin-bottom: 0;
}
.std-page-info {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--zc-text-tertiary);
  white-space: nowrap;
}

/* ========== 4. 筛选面板 ========== */

.std-filter-panel {
  background: var(--zc-bg-subtle);
  border: 1px solid var(--zc-border-lighter);
  border-radius: var(--zc-radius-sm);
  padding: 12px 16px;
  margin-bottom: 10px;
}
.std-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.std-filter-row .el-input,
.std-filter-row .el-select {
  width: 180px;
}
.std-filter-slide-enter-active,
.std-filter-slide-leave-active {
  transition: all 0.2s ease;
  max-height: 200px;
  overflow: hidden;
}
.std-filter-slide-enter-from,
.std-filter-slide-leave-to {
  opacity: 0;
  max-height: 0;
  padding: 0 16px;
  margin-bottom: 0;
}

/* ========== 5. 操作按钮行 + 顶部分页 ========== */

.std-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.std-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.std-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.std-search-box {
  width: 240px;
}

/* 顶部分页（放在工具栏右侧，表格上方） */
.std-top-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--zc-text-tertiary);
  white-space: nowrap;
}
.std-top-pagination .el-select {
  width: 90px;
}

/* ========== 6. 数据表格 ========== */

.std-table {
  width: 100%;
}
/* 表头强制单行 */
.std-table .el-table__header th .cell,
.el-table .el-table__header th .cell {
  white-space: nowrap !important;
}
/* 表头样式 */
.std-table .el-table__header th {
  background: var(--zc-bg-subtle) !important;
  color: var(--zc-text-secondary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
/* 表格行紧凑 */
.std-table .el-table__body td {
  font-size: 13px !important;
  color: var(--zc-text-regular) !important;
  padding: 8px 0 !important;
}
/* 斑马纹 */
.std-table .el-table__body tr.el-table__row--striped td {
  background: var(--zc-bg-solid) !important;
}
/* 行悬停 */
.std-table .el-table__body tr:hover > td {
  background: var(--zc-brand-blue-soft) !important;
}
/* 选中行 */
.std-table .el-table__body tr.current-row > td {
  background: var(--zc-brand-blue-light) !important;
}

/* 操作列 */
.std-action-cell {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.std-action-cell .el-button + .el-button {
  margin-left: 2px;
}
.std-action-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.std-action-setting-icon {
  cursor: pointer;
  font-size: 14px;
  color: var(--zc-text-tertiary);
  margin-left: 4px;
  transition: color 0.15s;
}
.std-action-setting-icon:hover {
  color: var(--zc-brand-blue);
}

/* ========== 7. 底部分页 ========== */

.std-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 4px;
}
.std-pagination .el-pagination {
  margin-top: 0;
}
/* 分页选中页码 — 圆形主色 */
.el-pagination .el-pager li.is-active {
  background: var(--zc-brand-blue) !important;
  color: #fff !important;
  border-radius: var(--zc-radius-sm);
}

/* ========== 8. 页面卡片容器 ========== */

.std-page-card {
  background: var(--zc-bg-surface);
  border: 1px solid var(--zc-border-light);
  border-radius: var(--zc-radius-lg);
  box-shadow: var(--zc-shadow-subtle);
  padding: 20px;
}

/* ========== 9. 全局覆写：禁止 Element Plus 默认蓝色 ========== */

/* 强制所有 el-button--primary 使用终成品牌蓝 */
.el-button--primary {
  --el-button-bg-color: var(--zc-brand-blue);
  --el-button-border-color: var(--zc-brand-blue);
  --el-button-hover-bg-color: var(--zc-brand-blue-hover);
  --el-button-hover-border-color: var(--zc-brand-blue-hover);
  --el-button-active-bg-color: var(--zc-brand-blue-active);
  --el-button-active-border-color: var(--zc-brand-blue-active);
}

/* el-tabs 选中项使用品牌蓝 */
.el-tabs__item.is-active {
  color: var(--zc-brand-blue) !important;
}
.el-tabs__active-line {
  background-color: var(--zc-brand-blue) !important;
}
.el-tabs__item:hover {
  color: var(--zc-brand-blue) !important;
}

/* el-link 主色 */
.el-link--primary {
  --el-link-text-color: var(--zc-brand-blue);
  --el-link-hover-text-color: var(--zc-brand-blue-hover);
}

/* el-switch 选中 */
.el-switch.is-checked .el-switch__core {
  background-color: var(--zc-brand-blue) !important;
  border-color: var(--zc-brand-blue) !important;
}

/* el-radio 选中 */
.el-radio__input.is-checked .el-radio__inner {
  background-color: var(--zc-brand-blue);
  border-color: var(--zc-brand-blue);
}
.el-radio__input.is-checked + .el-radio__label {
  color: var(--zc-brand-blue);
}

/* el-checkbox 选中 */
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: var(--zc-brand-blue);
  border-color: var(--zc-brand-blue);
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: var(--zc-brand-blue);
}

/* el-step 选中 */
.el-step__head.is-process {
  color: var(--zc-brand-blue);
  border-color: var(--zc-brand-blue);
}
.el-step__head.is-finish {
  color: var(--zc-brand-blue);
  border-color: var(--zc-brand-blue);
}
.el-step__title.is-process {
  color: var(--zc-brand-blue);
}

/* el-badge 主色 */
.el-badge__content--primary {
  background-color: var(--zc-brand-blue);
}
/* =========================================================================
   终成云 ERP · 移动工作台 H5/PWA 设计系统
   复用终成蓝青品牌 Token，扩展移动端专属变量与组件
   原则：大字号、大触控区、安全区适配、克制留白、企业级可信感
   ========================================================================= */

:root {
  /* 移动端品牌色（对齐 Miora UI 规范 v4.0，主色 #0066FF） */
  --m-brand: #0066FF;
  --m-brand-hover: #0052CC;
  --m-brand-active: #003D99;
  --m-brand-light: #E6F0FF;
  --m-brand-soft: #F0F6FF;
  --m-brand-border: #99C2FF;
  --m-cyan: #1890FF;
  --m-cyan-2: #0050B3;
  --m-cyan-soft: #E6F7FF;

  --m-text-1: #262626;
  --m-text-2: #595959;
  --m-text-3: #8C8C8C;
  --m-text-ph: #BFBFBF;

  --m-bg: #F5F5F5;
  --m-surface: #FFFFFF;
  --m-soft: #FAFAFA;
  --m-subtle: #F0F0F0;

  --m-border: #D9D9D9;
  --m-border-light: #F0F0F0;

  /* 状态色只用于标签/文字提示，不再大面积铺底 */
  --m-success: #52C41A;
  --m-warning: #FAAD14;
  --m-danger: #F5222D;
  --m-info: #1890FF;

  /* 安全区 */
  --m-safe-top: env(safe-area-inset-top, 0px);
  --m-safe-bottom: env(safe-area-inset-bottom, 0px);
  --m-tab-height: 56px;

  /* 阴影：移动端改为低阴影 + 边界线，接近 PC 端后台系统质感 */
  --m-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --m-shadow-card: 0 4px 14px rgba(0, 102, 255, 0.06);
  --m-shadow-fab: 0 8px 18px rgba(0, 102, 255, 0.24);
}

/* ===================== 基础重置（仅移动端容器内生效） ===================== */
.m-app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--m-bg);
  color: var(--m-text-1);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

.m-app * {
  box-sizing: border-box;
}

.m-app button {
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

/* ===================== 顶部导航栏 ===================== */
.m-navbar {
  flex-shrink: 0;
  height: calc(48px + var(--m-safe-top));
  padding-top: var(--m-safe-top);
  display: flex;
  align-items: center;
  padding-left: 12px;
  padding-right: 12px;
  background: var(--m-brand);
  color: #fff;
  position: relative;
  z-index: 20;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset;
}

.m-navbar__title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.m-navbar__btn {
  min-width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  border-radius: 18px;
  transition: background 0.15s;
}

.m-navbar__btn:active {
  background: rgba(255, 255, 255, 0.18);
}

.m-navbar__btn svg {
  width: 22px;
  height: 22px;
}

/* ===================== 内容滚动区 ===================== */
.m-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--m-tab-height) + var(--m-safe-bottom) + 12px);
}

.m-content--no-tab {
  padding-bottom: calc(var(--m-safe-bottom) + 12px);
}

/* ===================== 底部 Tab 导航 ===================== */
.m-tabbar {
  flex-shrink: 0;
  height: calc(var(--m-tab-height) + var(--m-safe-bottom));
  padding-bottom: var(--m-safe-bottom);
  display: flex;
  background: var(--m-surface);
  border-top: 1px solid var(--m-border-light);
  box-shadow: 0 -2px 12px rgba(31, 35, 41, 0.05);
  z-index: 20;
}

.m-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: none;
  color: var(--m-text-3);
  transition: color 0.15s;
  position: relative;
}

.m-tabbar__item--active {
  color: var(--m-brand);
}

.m-tabbar__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-tabbar__icon svg {
  width: 23px;
  height: 23px;
}

.m-tabbar__label {
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
}

.m-tabbar__badge {
  position: absolute;
  top: 4px;
  left: 50%;
  margin-left: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--m-danger);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 600;
}

/* ===================== 通用区块 ===================== */
.m-section {
  padding: 0 12px;
  margin-top: 12px;
}

.m-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 2px;
}

.m-section__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--m-text-1);
  display: flex;
  align-items: center;
  gap: 6px;
}

.m-section__title::before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--m-brand);
}

.m-section__more {
  font-size: 12px;
  color: var(--m-text-3);
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* ===================== 卡片 ===================== */
.m-card {
  background: var(--m-surface);
  border-radius: 10px;
  border: 1px solid var(--m-border-light);
  box-shadow: var(--m-shadow);
  overflow: hidden;
}

.m-card__body {
  padding: 14px;
}

/* ===================== 列表项 ===================== */
.m-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-border-light);
  transition: background 0.12s;
  min-height: 56px;
}

.m-list-item:last-child {
  border-bottom: none;
}

.m-list-item:active {
  background: var(--m-subtle);
}

.m-list-item__avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--m-brand);
  background: var(--m-brand-light);
  border: 1px solid var(--m-brand-border);
}

.m-list-item__main {
  flex: 1;
  min-width: 0;
}

.m-list-item__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--m-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-list-item__desc {
  font-size: 12px;
  color: var(--m-text-3);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-list-item__extra {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--m-text-3);
  text-align: right;
}

.m-list-group {
  background: var(--m-surface);
  border-radius: 10px;
  border: 1px solid var(--m-border-light);
  box-shadow: var(--m-shadow);
  overflow: hidden;
}

/* ===================== 状态标签 ===================== */
.m-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
}

.m-tag--success { background: #F0F7F3; color: var(--m-success); border-color: #D8EBDD; }
.m-tag--warning { background: #FBF7EF; color: var(--m-warning); border-color: #EFE1C8; }
.m-tag--danger  { background: #FBF1F0; color: var(--m-danger); border-color: #EBD3D1; }
.m-tag--info    { background: var(--m-brand-light); color: var(--m-brand); border-color: var(--m-brand-border); }
.m-tag--default { background: var(--m-soft); color: var(--m-text-2); border-color: var(--m-border-light); }

/* ===================== 按钮 ===================== */
.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  transition: opacity 0.12s, transform 0.06s;
}

.m-btn:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.m-btn--primary {
  background: var(--m-brand);
  color: #fff;
}

.m-btn--ghost {
  background: var(--m-brand-light);
  color: var(--m-brand);
}

.m-btn--plain {
  background: var(--m-subtle);
  color: var(--m-text-2);
}

.m-btn--danger {
  background: var(--m-danger);
  color: #fff;
}

.m-btn--block {
  width: 100%;
}

.m-btn--sm {
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 15px;
}

/* ===================== 指标卡片 ===================== */
.m-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 12px;
  margin-top: 12px;
}

.m-stat {
  background: var(--m-surface);
  border-radius: 10px;
  padding: 12px 6px;
  text-align: center;
  border: 1px solid var(--m-border-light);
  box-shadow: var(--m-shadow);
}

.m-stat__num {
  font-size: 20px;
  font-weight: 700;
  color: var(--m-brand);
  line-height: 1.2;
  font-family: "DIN Alternate", "PingFang SC", sans-serif;
}

.m-stat__num--cyan,
.m-stat__num--warn,
.m-stat__num--danger { color: var(--m-brand); }

.m-stat__label {
  font-size: 11px;
  color: var(--m-text-3);
  margin-top: 4px;
}

/* ===================== 快捷入口宫格 ===================== */
.m-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 8px 4px;
}

.m-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  background: transparent;
  border: none;
  border-radius: 10px;
  transition: background 0.12s;
}

.m-grid__item:active {
  background: var(--m-subtle);
}

.m-grid__icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--m-brand);
  background: var(--m-brand-light) !important;
  border: 1px solid var(--m-brand-border);
}

.m-grid__icon svg {
  width: 21px;
  height: 21px;
}

.m-grid__label {
  font-size: 12px;
  color: var(--m-text-2);
  text-align: center;
  line-height: 1.2;
}

/* ===================== 浮动按钮 ===================== */
.m-fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--m-tab-height) + var(--m-safe-bottom) + 16px);
  width: 52px;
  height: 52px;
  border-radius: 26px;
  background: var(--m-brand);
  color: #fff;
  border: none;
  box-shadow: var(--m-shadow-fab);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  transition: transform 0.12s;
}

.m-fab:active {
  transform: scale(0.92);
}

.m-fab svg {
  width: 26px;
  height: 26px;
}

/* ===================== 空状态 ===================== */
.m-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--m-text-3);
}

.m-empty__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 12px;
  opacity: 0.5;
}

.m-empty__text {
  font-size: 13px;
}

/* ===================== 表单 ===================== */
.m-field {
  display: flex;
  align-items: center;
  background: var(--m-surface);
  padding: 14px;
  border-bottom: 1px solid var(--m-border-light);
  min-height: 54px;
}

.m-field__label {
  flex-shrink: 0;
  width: 80px;
  font-size: 14px;
  color: var(--m-text-2);
}

.m-field__value {
  flex: 1;
  font-size: 14px;
  color: var(--m-text-1);
  border: none;
  outline: none;
  background: transparent;
}

.m-field__value::placeholder {
  color: var(--m-text-ph);
}

.m-textarea {
  width: 100%;
  border: none;
  outline: none;
  background: var(--m-subtle);
  border-radius: 10px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  min-height: 96px;
  font-family: inherit;
}

/* ===================== 顶部用户横幅 ===================== */
.m-banner {
  background: var(--m-brand);
  padding: calc(12px + var(--m-safe-top)) 16px 18px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.m-banner::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
}

.m-banner__row {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
  margin-top: 10px;
}

.m-banner__avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
}

.m-banner__name {
  font-size: 17px;
  font-weight: 600;
}

.m-banner__sub {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 2px;
}

/* ===================== 搜索栏 ===================== */
.m-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px;
  padding: 0 14px;
  height: 38px;
  background: var(--m-surface);
  border-radius: 19px;
  box-shadow: var(--m-shadow);
}

.m-search svg {
  width: 18px;
  height: 18px;
  color: var(--m-text-3);
  flex-shrink: 0;
}

.m-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--m-text-1);
}

.m-search input::placeholder {
  color: var(--m-text-ph);
}

/* ===================== 过滤标签条 ===================== */
.m-tabs {
  display: flex;
  gap: 6px;
  padding: 0 12px 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.m-tabs::-webkit-scrollbar {
  display: none;
}

.m-tab {
  flex-shrink: 0;
  height: 30px;
  padding: 0 14px;
  border-radius: 15px;
  border: none;
  background: var(--m-surface);
  color: var(--m-text-2);
  font-size: 13px;
  box-shadow: var(--m-shadow);
  transition: all 0.15s;
}

.m-tab--active {
  background: var(--m-brand);
  color: #fff;
}

/* ===================== 进度时间线 ===================== */
.m-timeline {
  padding: 4px 0;
}

.m-timeline__item {
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
  position: relative;
}

.m-timeline__item:last-child {
  padding-bottom: 0;
}

.m-timeline__dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 4px;
  background: var(--m-brand-border);
  position: relative;
  z-index: 1;
}

.m-timeline__dot--active {
  background: var(--m-brand);
  box-shadow: 0 0 0 4px var(--m-brand-light);
}

.m-timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  bottom: 0;
  width: 2px;
  background: var(--m-border-light);
}

.m-timeline__time {
  font-size: 11px;
  color: var(--m-text-3);
}

.m-timeline__text {
  font-size: 13px;
  color: var(--m-text-1);
  margin-top: 2px;
}

/* ===================== 切换开关行 ===================== */
.m-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  background: var(--m-surface);
  border-bottom: 1px solid var(--m-border-light);
}

.m-switch {
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: var(--m-border);
  border: none;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.m-switch--on {
  background: var(--m-brand);
}

.m-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.m-switch--on::after {
  transform: translateX(20px);
}

/* ===================== 底部操作栏 ===================== */
.m-action-bar {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  padding: 10px 12px calc(10px + var(--m-safe-bottom));
  background: var(--m-surface);
  border-top: 1px solid var(--m-border-light);
}

.m-action-bar .m-btn {
  flex: 1;
}

/* ===================== 通用工具类 ===================== */
.m-text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-flex { display: flex; }
.m-flex-center { display: flex; align-items: center; justify-content: center; }
.m-flex-between { display: flex; align-items: center; justify-content: space-between; }
.m-gap-4 { gap: 4px; }
.m-gap-6 { gap: 6px; }
.m-gap-8 { gap: 8px; }
.m-mt-8 { margin-top: 8px; }
.m-mt-12 { margin-top: 12px; }
.m-mb-8 { margin-bottom: 8px; }

.m-divider {
  height: 1px;
  background: var(--m-border-light);
  margin: 8px 0;
}

/* ===================== 启动动画 ===================== */
.m-fade-enter-active,
.m-fade-leave-active {
  transition: opacity 0.2s ease;
}

.m-fade-enter-from,
.m-fade-leave-to {
  opacity: 0;
}