/* ============================================
   表单管理平台 - 统一设计系统
   ============================================ */
:root {
  /* ====== 品牌色 ====== */
  --primary: #3370FF;
  --primary-dark: #2860E0;
  --primary-darker: #1A50D0;
  --primary-light: #EBF1FF;
  --primary-lighter: #F5F8FF;
  --primary-grad: linear-gradient(135deg, #3370FF 0%, #2860E0 100%);
  --primary-grad-hover: linear-gradient(135deg, #2860E0 0%, #1A50D0 100%);

  /* ====== 语义色 ====== */
  --success: #2e7d32;
  --success-light: #e8f5e9;
  --success-dark: #1b5e20;
  --danger: #c62828;
  --danger-light: #ffebee;
  --danger-dark: #b71c1c;
  --warning: #ef6c00;
  --warning-light: #fff3e0;
  --warning-dark: #e65100;
  --info: #1565c0;
  --info-light: #e3f2fd;
  --info-dark: #0d47a1;

  /* ====== 文字（主体系） ====== */
  --text: #1a1a2e;
  --text-secondary: #555;
  --text-hint: #999;
  --text-disabled: #bbb;
  /* 文字 — 语义别名（新组件优先用这组） */
  --c-text-primary: #1f2329;
  --c-text-dark: #333;
  --c-text-white: #fff;
  --c-text-black: #000;
  --c-text-muted: #767676;
  --c-text-danger: #c00;
  --c-text-danger-bright: #ef4444;
  --c-text-danger-vivid: #e53935;
  --c-text-link: #1a73e8;
  --c-text-accent: #4a90d9;

  /* ====== 背景 ====== */
  --bg: #f4f6fa;
  --bg-card: #fff;
  --bg-panel: #f8f9fc;
  --bg-hover: #f5f7fa;
  --bg-active: #edf0f5;
  --bg-mask: rgba(0,0,0,0.4);
  --bg-mask-light: rgba(0,0,0,0.2);
  /* 背景 — 细粒度别名 */
  --c-bg-white: #fff;
  --c-bg-gray-50: #fafbfc;
  --c-bg-gray-100: #f7f8fa;
  --c-bg-gray-150: #eef1f8;
  --c-bg-gray-200: #f5f6f7;
  --c-bg-gray-250: #f5f5f5;
  --c-bg-gray-300: #f0f0f0;
  --c-bg-gray-350: #f0f2f5;
  --c-bg-blue-50: #f0f2ff;
  --c-bg-blue-100: #e8f0fe;
  --c-bg-blue-200: #d4e4fd;
  --c-bg-blue-hover: #f0f5ff;
  --c-bg-surface: #f8f9fb;

  /* ====== 边框 ====== */
  --border: #e0e0e0;
  --border-light: #f0f0f0;
  /* 边框 — 细粒度别名 */
  --c-border-page: #e8e8e8;
  --c-border-table: #e8e9ec;
  --c-border-table-head: #dee0e3;
  --c-border-input: #dcdfe6;
  --c-border-btn: #d9d9d9;
  --c-border-strong: #d0d0d0;
  --c-border-form: #767676;
  --c-border-form-light: #d0d0d0;
  --c-border-focus: #4a90d9;

  /* ====== 交互色 ====== */
  --c-action-blue: #4facfe;
  --c-action-red: #ff4d4f;
  --c-accent-purple: #5e35b1;
  --c-accent-teal: #00695c;

  /* ====== 阴影（3级够用） ====== */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.03);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -1px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.15);
  /* 彩色阴影（按钮hover） */
  --shadow-primary: 0 4px 12px rgba(51,112,255,0.3);
  --shadow-danger: 0 4px 12px rgba(198,40,40,0.3);

  /* ====== 圆角 ====== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* ====== 字体 ====== */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;

  /* ====== 字号阶梯 ====== */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;

  /* ====== 间距阶梯 ====== */
  --sp-0: 0px;
  --sp-px: 1px;
  --sp-0_5: 2px;
  --sp-1: 4px;
  --sp-1_5: 6px;
  --sp-2: 8px;
  --sp-2_5: 10px;
  --sp-3: 12px;
  --sp-3_5: 14px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-9: 36px;
  --sp-10: 40px;
  --sp-11: 44px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;

  /* ====== 过渡 ====== */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: color 0.15s var(--ease), background-color 0.15s var(--ease);
  --transition: color 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);

  /* ====== Z-Index层级 ====== */
  --z-dropdown: 200;
  --z-sticky: 100;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 9999;
  --z-tooltip: 10000;

  /* ====== 表格密度 ====== */
  --tbl-th-pad-y: var(--sp-3);
  --tbl-th-pad-x: var(--sp-4);
  --tbl-td-pad-y: var(--sp-3);
  --tbl-td-pad-x: var(--sp-4);
  --tbl-font-size: var(--text-base);

  /* ====== 弹窗宽度梯度 ====== */
  --modal-sm: 380px;
  --modal-md: 480px;
  --modal-lg: 680px;
  --modal-xl: 900px;
  --modal-2xl: 1100px;
  --modal-pad-x: var(--sp-8);
  --modal-pad-y: var(--sp-8);
  --modal-pad-header: var(--sp-3) var(--sp-6);

  /* ====== 骨架屏 ====== */
  --skeleton-bg: #e8eaed;
  --skeleton-shine: #f5f6f8;
  --skeleton-speed: 1.5s;
}

/* 表格密度切换 */
.tbl-compact { --tbl-th-pad-y: var(--sp-1_5); --tbl-th-pad-x: var(--sp-2); --tbl-td-pad-y: var(--sp-1_5); --tbl-td-pad-x: var(--sp-2); --tbl-font-size: var(--text-sm); }
.tbl-comfortable { --tbl-th-pad-y: var(--sp-4); --tbl-th-pad-x: var(--sp-5); --tbl-td-pad-y: var(--sp-4); --tbl-td-pad-x: var(--sp-5); --tbl-font-size: var(--text-base); }

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.6; }
.page { display: none; min-height: 100vh; }
.page.active { display: block; }

/* ========== 登录（左右分栏） ========== */
#loginPage { display: none; min-height: 100vh; background: var(--bg); }
#loginPage.active { display: flex; }
.login-container {
  display: flex;
  width: 100%;
  min-height: 100vh;
}

/* 左侧品牌区 */
.login-brand {
  flex: 0 0 42%;
  background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, #1A1A2E 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10);
}
.login-brand-content {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 420px;
}
.login-brand-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.login-logo-icon {
  width: 48px;
  height: 48px;
}
.login-logo-icon svg {
  width: 100%;
  height: 100%;
}
.login-brand-logo h1 {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -1px;
  background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
}
.login-brand-tagline {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--sp-8);
}
.login-brand-features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.login-feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.login-feature-icon {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(255,255,255,0.9);
}
.login-feature-icon svg {
  width: 20px;
  height: 20px;
}
.login-feature-item h4 {
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: 2px;
  color: #fff;
}
.login-feature-item p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  margin: 0;
  line-height: 1.4;
}

/* 装饰圆 */
.login-brand-decor {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(51,112,255,0.15) 0%, transparent 70%);
}
.login-decor-1 { width: 400px; height: 400px; top: -100px; left: -100px; }
.login-decor-2 { width: 300px; height: 300px; bottom: -80px; right: -60px; background: radial-gradient(circle, rgba(102,126,234,0.12) 0%, transparent 70%); }
.login-decor-3 { width: 200px; height: 200px; top: 50%; left: 60%; background: radial-gradient(circle, rgba(56,207,201,0.08) 0%, transparent 70%); }

/* 右侧登录区 */
.login-form-side {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8);
  background: var(--bg);
}
.login-box {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--sp-10) var(--sp-8);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
}
.login-box-header {
  text-align: center;
  margin-bottom: var(--sp-6);
}
.login-box-header h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-2);
}
.login-box-header .subtitle {
  font-size: var(--text-base);
  color: var(--text-hint);
  margin: 0;
}

/* 登录Tab */
.login-tabs-v2 {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--bg-panel);
  border-radius: var(--radius);
  margin-bottom: var(--sp-5);
}
.login-tab-v2 {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
}
.login-tab-v2.active {
  background: var(--bg-card);
  color: var(--primary);
  box-shadow: var(--shadow-xs);
  font-weight: 600;
}
.login-tab-v2:hover:not(.active) {
  color: var(--text);
}

/* 输入框带图标 */
.login-input-group {
  position: relative;
  margin-bottom: var(--sp-3);
}
.login-input-icon {
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-hint);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.login-input-group input {
  width: 100%;
  padding: 13px 16px 13px 42px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 15px;
  outline: none;
  transition: var(--transition);
  background: var(--bg-card);
  color: var(--text);
}
.login-input-group input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(51,112,255,0.1);
}
.login-input-group input::placeholder {
  color: var(--text-disabled);
}

/* 登录按钮 */
#loginBtn, #registerBtn {
  width: 100%;
  padding: 14px;
  background: var(--primary-grad);
  color: var(--c-text-white);
  border: none;
  border-radius: var(--radius);
  font-size: var(--text-lg);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  margin-top: var(--sp-2);
}
#loginBtn:hover, #registerBtn:hover {
  background: var(--primary-grad-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-primary);
}
#loginBtn:active, #registerBtn:active {
  transform: translateY(0);
}

.login-switch {
  margin-top: var(--sp-4);
  font-size: var(--text-sm);
  color: var(--text-hint);
  text-align: center;
}
.login-switch a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.login-switch a:hover {
  text-decoration: underline;
}

/* 登录页响应式 */
@media (max-width: 900px) {
  .login-brand { display: none; }
  .login-form-side { padding: var(--sp-4); }
}
@media (max-width: 480px) {
  .login-box { padding: var(--sp-6) var(--sp-5); }
}

/* ========== 顶栏 ========== */
.top-bar { background: var(--bg-card); padding: var(--sp-3_5) var(--sp-7); display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--border-light); gap: var(--sp-3); flex-wrap: nowrap; }
.top-bar h2 { font-size: var(--text-lg); font-weight: 700; color: var(--text); white-space: nowrap; }
.top-bar-center { flex: 1; max-width: 400px; margin: 0 var(--sp-5); position: relative; min-width: 120px; }
.top-right { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }

/* 顶栏溢出菜单 */
.top-overflow-wrap { position: relative; flex-shrink: 0; }
.top-overflow-btn { background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius); width: 36px; height: 36px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; transition: var(--transition); }
.top-overflow-btn:hover { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }
.top-overflow-menu { display: none; position: absolute; right: 0; top: calc(100% + 4px); background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 160px; padding: var(--sp-1) 0; z-index: 200; }
.top-overflow-menu.show { display: block; }
.top-overflow-menu .btn-icon, .top-overflow-menu .btn-icon-text { width: 100%; justify-content: flex-start; border: none; border-radius: 0; transform: none; box-shadow: none; padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); font-size: var(--text-sm); }
.top-overflow-menu .btn-icon:hover, .top-overflow-menu .btn-icon-text:hover { background: var(--primary-light); color: var(--primary); transform: none; box-shadow: none; }

/* ========== 按钮 ========== */
.btn-icon { background: var(--bg-card); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 7px 10px; font-size: 15px; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); line-height: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; }
.btn-icon:hover { border-color: var(--primary); background: var(--primary-light); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(51,112,255,0.15); }
.btn-icon:active { transform: translateY(0); box-shadow: none; }
.btn-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: var(--c-text-white); border: none; border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-5); font-size: var(--text-base); font-weight: 500; cursor: pointer; transition: var(--transition); letter-spacing: 0.5px; box-shadow: var(--shadow); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(51,112,255,0.3); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(51,112,255,0.3); }
.btn-secondary { background: var(--c-bg-white); color: var(--c-text-primary); border: 1px solid var(--c-border-table-head); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-5); font-size: var(--text-base); cursor: pointer; transition: var(--transition); }
.btn-secondary:hover { background: #f5f5f5; border-color: #667eea; color: #667eea; }
.btn-secondary:active { transform: translateY(0); box-shadow: none; background: var(--c-bg-gray-350); }
.btn-danger { background: linear-gradient(135deg, #f56c6c 0%, #e64a19 100%); color: var(--c-text-white); border: none; border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-5); font-size: var(--text-base); font-weight: 500; cursor: pointer; transition: var(--transition); box-shadow: var(--shadow); }
.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,108,108,0.3); }
.btn-danger:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(245,108,108,0.3); }
.btn-danger:disabled, .btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: var(--c-text-white); border: none; border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-5); font-size: var(--text-base); font-weight: 500; cursor: pointer; transition: var(--transition); box-shadow: var(--shadow); }
.btn-success:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16,185,129,0.4); }
.btn-success:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(16,185,129,0.3); }
.btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); border-radius: 8px; padding: var(--sp-2) var(--sp-5); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.btn-outline:hover { background: var(--primary-light); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(51,112,255,0.15); }
.btn-outline:active { transform: translateY(0); box-shadow: none; }
.btn-sm-inline { padding: var(--sp-2) var(--sp-3_5); font-size: 13px; white-space: nowrap; }

/* ========== 顶栏按钮系统 ========== */
/* 圆形图标按钮 - 基础（覆盖 btn-icon 的方形默认） */
.top-bar .btn-icon.btn-circle {
  width: 36px; height: 36px; min-width: 36px; min-height: 36px;
  padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; border: none; text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.top-bar .btn-icon.btn-circle:hover {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  filter: brightness(1.1);
}
.top-bar .btn-icon.btn-circle:active { transform: translateY(0) scale(0.96); }

/* 渐变颜色修饰类 */
.btn-icon-purple { background: linear-gradient(135deg, #667eea, #764ba2); color: var(--c-text-white) !important; font-weight: 700; font-size: 14px; }
.btn-icon-teal   { background: linear-gradient(135deg, #36cfc9, #13c2c2); color: var(--c-text-white) !important; }
.btn-icon-amber  { background: linear-gradient(135deg, #faad14, #d48806); color: var(--c-text-white) !important; }
.btn-icon-blue   { background: linear-gradient(135deg, #4facfe, #00f2fe); color: var(--c-text-white) !important; }
.btn-icon-slate  { background: var(--bg-panel); color: var(--text-secondary); border: 1px solid var(--border) !important; }
.btn-icon-slate:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary) !important; }

/* 纯文字图标按钮（无背景无边框） */
.btn-icon-text {
  background: none; border: none; color: var(--text-secondary);
  font-size: 16px; min-width: auto; min-height: auto;
  padding: var(--sp-1_5) var(--sp-2); border-radius: var(--radius-sm);
}
.btn-icon-text:hover {
  background: var(--primary-light); color: var(--primary);
  transform: translateY(-1px); box-shadow: none;
}

/* 顶栏按钮分组分隔线 */
.top-bar-divider {
  width: 1px; height: 24px; background: var(--border-light);
  margin: 0 4px; flex-shrink: 0;
}

/* 通知徽章 - 改进 */
.notification-badge {
  position: absolute; top: -2px; right: -2px;
  background: #ef4444; color: #fff !important;
  font-size: 10px !important; font-weight: 600;
  min-width: 16px; height: 16px; line-height: 16px;
  border-radius: 8px; padding: 0 4px;
  text-align: center; display: none;
  border: 2px solid var(--c-text-white);
  box-shadow: 0 1px 4px rgba(239,68,68,0.4);
  animation: badgePulse 2s infinite;
}
.notification-badge[style*="inline-block"],
.notification-badge.active { display: inline-block; }
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ========== 搜索 ========== */
.search-bar { width: 100%; padding: 9px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-lg); font-size: var(--text-base); outline: none; transition: var(--transition); background: var(--bg-panel); }
.search-bar:focus { border-color: var(--primary); background: var(--c-bg-white); box-shadow: 0 0 0 3px rgba(51,112,255,0.1); }
.search-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--c-bg-white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto; z-index: 200; margin-top: var(--sp-1_5); }
.search-dropdown.active { display: block; }
.search-item { padding: var(--sp-3) var(--sp-4); cursor: pointer; border-bottom: 1px solid var(--border-light); transition: var(--transition); }
.search-item:hover { background: var(--primary-light); }
.search-item h4 { font-size: var(--text-base); margin-bottom: 2px; }
.search-item p { font-size: var(--text-sm); color: var(--text-hint); }
.search-item.record-entry { background: var(--warning-light); font-weight: 600; color: var(--warning); }
.search-empty { padding: var(--sp-5); text-align: center; color: var(--text-hint); font-size: var(--text-sm); }
.search-bar-sm { padding: var(--sp-2) var(--sp-3); border: 1.5px solid var(--border); border-radius: var(--radius); font-size: var(--text-sm); outline: none; width: 200px; transition: var(--transition); }
.search-bar-sm:focus { border-color: var(--primary); }

/* ========== 主布局 ========== */
.main-layout { display: flex; height: calc(100vh - 57px); }

/* ========== 侧栏 ========== */
.sidebar-area { width: 280px; background: var(--bg-card); border-right: 1px solid var(--border-light); display: flex; flex-direction: column; flex-shrink: 0; overflow: hidden; transition: width 0.2s var(--ease); }
.sidebar-area.collapsed { width: 80px; }
.sidebar-toggle { padding: 10px 16px; font-size: var(--text-sm); color: var(--text-hint); cursor: pointer; background: var(--bg-panel); border-bottom: 1px solid var(--border-light); user-select: none; transition: var(--transition); display: flex; align-items: center; justify-content: space-between; }
.sidebar-toggle:hover { background: var(--primary-light); color: var(--primary); }
.sidebar-toggle .toggle-text { overflow: hidden; white-space: nowrap; }
.sidebar-area.collapsed .sidebar-toggle .toggle-text { display: none; }
.sidebar-grid { flex: 1; overflow-y: auto; }
/* icon-only 模式：卡片变 icon 块 */
.sidebar-area.collapsed .sidebar-grid { padding: var(--sp-2); }
.sidebar-area.collapsed .sidebar-area .activity-card,
.sidebar-area.collapsed .sidebar-area .grid-card { width: 56px; height: 56px; padding: var(--sp-2); margin: var(--sp-1) auto; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.sidebar-area.collapsed .sidebar-area .activity-card > *,
.sidebar-area.collapsed .sidebar-area .grid-card > * { font-size: inherit; }

/* 折叠态 tooltip */
.sidebar-area.collapsed .activity-card,
.sidebar-area.collapsed .grid-card { position: relative; }
.sidebar-area.collapsed .activity-card::after,
.sidebar-area.collapsed .grid-card::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--c-text-primary);
  color: var(--c-text-white);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
}
.sidebar-area.collapsed .activity-card:hover::after,
.sidebar-area.collapsed .grid-card:hover::after { opacity: 1; }

/* 侧栏搜索框 */
.sidebar-search { padding: var(--sp-2); border-bottom: 1px solid var(--border-light); }
.sidebar-search input { width: 100%; padding: var(--sp-1_5) var(--sp-2); border: 1px solid var(--c-border-input); border-radius: var(--radius-sm); font-size: var(--text-sm); outline: none; transition: border-color 0.2s; }
.sidebar-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(51,112,255,0.08); }
.sidebar-area.collapsed .sidebar-search { display: none; }

/* 树形项 */
.tree-item { border-bottom: 1px solid var(--border-light); }
.tree-header { display: flex; align-items: center; padding: var(--sp-3) var(--sp-4); cursor: pointer; gap: var(--sp-2_5); transition: var(--transition); }
.tree-header:hover { background: var(--primary-light); }
.tree-header.active { background: var(--info-light); }
.tree-arrow { font-size: 10px; color: var(--text-hint); width: 16px; text-align: center; transition: transform .2s; }
.tree-arrow.open { transform: rotate(90deg); }
.tree-icon { font-size: var(--text-lg); }
.tree-name { font-size: var(--text-sm); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-body { display: none; padding: 4px 12px 10px 36px; font-size: var(--text-sm); color: var(--text-hint); }
.tree-body.open { display: block; }
.tree-body .tree-detail { padding: 4px 0; }
.tree-body .tree-action { display: inline-block; font-size: var(--text-xs); color: var(--primary); cursor: pointer; margin-top: var(--sp-1); }
.tree-body .tree-action:hover { text-decoration: underline; }

/* ========== 内容区 ========== */
.featured-area { flex: 1; display: flex; align-items: stretch; justify-content: stretch; padding: 0; overflow: auto; }
.featured-card { background: var(--bg-card); border-radius: 0; padding: 0; width: 100%; height: 100%; box-shadow: none; text-align: center; cursor: pointer; transition: var(--transition); border: none; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow: auto; }
.featured-card:hover { background: var(--bg-card); }
.featured-card.has-activity { cursor: default; }
/* 表单画布固定 1024px，居中显示，两侧灰底 */
.featured-card.has-activity { background: var(--c-bg-gray-150); }
.featured-card [data-form-container] { width: 1024px; max-width: 100%; margin: 0 auto; background: var(--bg-card); position: relative; box-sizing: border-box; }

/* 标签页 - 统一样式 */
.featured-tabs, .modal-tabs, .perm-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-light); padding: 0 var(--sp-6); background: var(--bg-card); flex-shrink: 0; position: sticky; top: 0; z-index: 10; }
.modal-tabs { padding: 0; margin: var(--sp-3) 0 var(--sp-4); position: static; }
.perm-tabs { padding: 0; margin: var(--sp-3) 0 var(--sp-4); position: static; }
.featured-tab, .modal-tab, .perm-tab { padding: 10px 20px; font-size: var(--text-base); font-weight: 500; color: var(--text-hint); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: var(--transition-fast); }
.featured-tab:hover, .modal-tab:hover, .perm-tab:hover { color: var(--text); }
.featured-tab.active, .modal-tab.active, .perm-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.featured-tab-panel, .modal-tab-panel, .perm-tab-panel { display: none; flex: 1; overflow: auto; }
.featured-tab-panel.active, .modal-tab-panel.active, .perm-tab-panel.active { display: block; }
.featured-tab-panel#featuredTabForm { padding: 0; }
.featured-tab-panel#featuredTabData { padding: 24px; }
.featured-card h2 { font-size: 32px; margin-bottom: var(--sp-3); }
.featured-card .featured-summary { font-size: var(--text-lg); color: var(--text-secondary); line-height: 1.8; margin-bottom: var(--sp-6); max-width: 500px; }
.featured-card .featured-badge { display: inline-block; background: var(--primary-grad); color: #fff; padding: var(--sp-2) 24px; border-radius: 20px; font-size: var(--text-base); font-weight: 600; }
.featured-card .set-featured-btn { margin-top: var(--sp-5); padding: 10px 20px; background: var(--bg-panel); border: 1.5px solid var(--border); border-radius: var(--radius); font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; transition: var(--transition); }
.featured-card .set-featured-btn:hover { background: var(--border-light); border-color: #ccc; }

/* 侧栏卡片 */
.sidebar-card { padding: var(--sp-3) var(--sp-4); cursor: pointer; transition: var(--transition); border-radius: var(--radius-sm); border-left: 3px solid transparent; }
.sidebar-card:hover { background: var(--primary-light); border-left-color: var(--primary); }
.sidebar-card h4 { font-size: var(--text-base); margin-bottom: 2px; }
.sidebar-card p { font-size: var(--text-sm); color: var(--text-hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-card .set-featured-sm { margin-top: var(--sp-1); font-size: var(--text-xs); color: var(--primary); cursor: pointer; background: none; border: none; padding: 0; }
.sidebar-card.active { background: var(--primary-light); border-left-color: var(--primary); }

.sidebar-btn { padding: 6px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--border-light); transition: var(--transition); user-select: none; position: relative; }
.sidebar-btn:hover { background: var(--primary-light); }
.sidebar-btn:hover .sidebar-actions { display: block !important; }
.sidebar-btn.active { background: var(--info-light); font-weight: 600; color: var(--primary); border-left: 3px solid var(--primary); }
.sidebar-actions { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: none; }
.sidebar-actions .btn-xs { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; cursor: pointer; font-size: 12px; }
.sidebar-actions .btn-xs:hover { background: var(--primary-light); border-color: var(--primary); }

/* ========== 表单网格 ========== */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); padding: var(--sp-6); max-width: 1200px; margin: 0 auto; }
.grid .activity-card, .grid .grid-card { background: var(--bg-card); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); box-shadow: var(--shadow-sm); cursor: pointer; transition: var(--transition); user-select: none; border: 1px solid var(--border-light); }
.grid .activity-card:hover, .grid .grid-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary); }
.grid .activity-card h3, .grid .grid-card h3 { font-size: var(--text-base); margin-bottom: 2px; font-weight: 700; }
.grid .activity-card p, .grid .grid-card p { font-size: var(--text-sm); color: var(--text-hint); line-height: 1.4; }
.activity-card, .grid-card { background: var(--bg-card); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-sm); cursor: pointer; transition: var(--transition); user-select: none; border: 1px solid var(--border-light); }
.activity-card:hover, .grid-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--primary); }
.activity-card h3, .grid-card h3 { font-size: var(--text-base); margin-bottom: 2px; font-weight: 700; }
.activity-card p, .grid-card p { font-size: var(--text-sm); color: var(--text-hint); line-height: 1.5; }
.activity-card.disabled { opacity: .55; }

/* 卡片新布局 */
.card-header-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.card-type-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.card-title-area {
  flex: 1;
  min-width: 0;
}
.card-title-area h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.card-summary {
  color: var(--text-hint);
  font-size: var(--text-sm);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}
.card-badge {
  display: inline-block;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
  line-height: 1.6;
}
.badge-published { background: var(--success-light); color: var(--success); }
.badge-featured { background: #fef3c7; color: #d97706; }
.badge-disabled { background: var(--danger-light); color: var(--danger); }
.card-more-btn {
  background: none;
  border: none;
  padding: var(--sp-1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-hint);
  transition: var(--transition);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-more-btn:hover {
  background: var(--bg-panel);
  color: var(--text);
}
.card-meta-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-light);
  font-size: var(--text-xs);
}
.card-type-label {
  font-weight: 600;
}
.card-meta-sep {
  color: var(--text-disabled);
}
.card-meta-text {
  color: var(--text-hint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-menu-wrap {
  position: fixed;
  z-index: 1000;
  min-width: 160px;
}
.admin-grid .activity-card, .admin-grid .grid-card { cursor: default; }
.admin-grid .activity-card:hover, .admin-grid .grid-card:hover { transform: none; box-shadow: var(--shadow); border-color: transparent; }
.admin-grid .card-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: 14px; border-top: 1px solid var(--border-light); }
.card-actions .btn-sm { flex: 1; padding: var(--sp-2) 0; border: none; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: var(--transition); }
.card-actions .btn-sm:hover { transform: translateY(-1px); filter: brightness(0.95); }
.btn-edit { background: var(--info-light); color: var(--info); }
.btn-builder { background: #ede7f6; color: var(--c-accent-purple); }
.btn-view-data { background: #e0f2f1; color: var(--c-accent-teal); }
.btn-toggle-on { background: var(--success-light); color: var(--success); }
.btn-toggle-off { background: var(--danger-light); color: var(--danger); }
.btn-delete { background: var(--danger-light); color: var(--danger); }
.btn-download { background: var(--success-light); color: var(--success); }

.activity-card.dragging { opacity: .4; transform: scale(.95); }
.activity-card.drag-over { border: 2px dashed var(--primary); background: var(--primary-light); }

.activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); padding: var(--sp-6); width: 100%; }

/* ========== 弹窗 ========== */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; justify-content: center; align-items: flex-start; overflow-y: auto; padding: var(--sp-10) var(--sp-5); backdrop-filter: blur(2px); }
.modal.active { display: flex; animation: modalBackdropIn 0.2s ease-out; }
@keyframes modalBackdropIn { from { opacity: 0; } to { opacity: 1; } }
.modal-box { background: var(--bg-card); border-radius: var(--radius-xl); padding: var(--modal-pad-y) var(--modal-pad-x); width: var(--modal-md); max-width: 92vw; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); animation: modalIn .25s var(--ease-bounce); }
/* 新式弹窗（内部自带 header/body/footer 结构） */
.modal-box.has-structure { padding: 0; display: flex; flex-direction: column; }
.modal-box.has-structure .modal-body { flex: 1; overflow-y: auto; padding: var(--sp-5) var(--modal-pad-x); }
.modal-box.has-structure .modal-footer { padding: var(--sp-4) var(--modal-pad-x); border-top: 1px solid var(--border-light); }
.modal-box.small { width: var(--modal-sm); }
.modal-box.large { width: var(--modal-xl); }
.modal-box.xlarge { width: min(1200px, 94vw); max-width: var(--modal-2xl); }
.modal-box.xl { width: var(--modal-2xl); }
.data-modal-box { width: 90vw; max-width: var(--modal-2xl); max-height: 90vh; overflow-y: auto; padding: var(--modal-pad-y) var(--modal-pad-x); }
@keyframes modalIn { from { transform: translateY(20px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

/* Modal 头部 */
.modal-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--modal-pad-x);
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}
.modal-header-icon {
  width: 36px;
  height: 36px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-header-text {
  flex: 1;
  min-width: 0;
}
.modal-header h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.modal-header p {
  font-size: var(--text-sm);
  color: var(--text-hint);
  margin: 2px 0 0 0;
}
.modal-close-btn {
  background: none;
  border: none;
  padding: var(--sp-1);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-hint);
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-close-btn:hover {
  background: var(--bg-panel);
  color: var(--text);
}

/* Modal 内容 */
.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-5) var(--modal-pad-x);
}

/* Modal 底部 */
.modal-footer {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--modal-pad-x);
  border-top: 1px solid var(--border-light);
  justify-content: flex-end;
  flex-shrink: 0;
  background: var(--bg-panel);
}

/* 兼容旧结构（h3直接作为标题的情况） */
.modal-box > h3:first-child { font-size: 20px; margin-bottom: var(--sp-2); font-weight: 700; padding: var(--sp-5) var(--modal-pad-x) 0; }
.modal-box > p:nth-child(2) { color: var(--text-secondary); font-size: var(--text-base); margin-bottom: var(--sp-4); padding: 0 var(--modal-pad-x); }
.modal-box label:not(.checkbox-item) { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-1_5); margin-top: var(--sp-3); }
.modal-box input:not([type="checkbox"]):not([type="radio"]), .modal-box textarea { width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: var(--radius); font-size: var(--text-base); outline: none; font-family: inherit; transition: var(--transition); }
.modal-box input:focus, .modal-box textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(51,112,255,0.1); }
.modal-actions { display: flex; gap: var(--sp-2_5); margin-top: var(--sp-5); justify-content: flex-end; padding: 0 var(--modal-pad-x) var(--sp-5); }

/* 表单弹窗 */
.activity-modal { z-index: 500; }
.activity-modal-box { background: var(--bg-card); border-radius: var(--radius-xl); width: var(--modal-lg); max-width: 92vw; max-height: 85vh; overflow-y: auto; display: flex; flex-direction: column; box-shadow: var(--shadow-xl); animation: modalIn .25s ease; transition: var(--transition); }
.activity-modal-box.fullscreen { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; }
.activity-modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--border-light); flex-shrink: 0; }
.activity-modal-header h3 { font-size: 17px; font-weight: 700; }
.activity-modal-actions { display: flex; gap: var(--sp-2); }
.activity-modal-body { flex: 1; overflow-y: auto; padding: var(--sp-6); }

/* ========== 管理后台布局 ========== */
#adminPage.active { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.admin-layout { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.admin-folder-panel {
  width: 240px; min-width: 240px; background: var(--bg-card);
  border-right: 1px solid var(--c-border-page); overflow-y: auto;
  display: flex; flex-direction: column;
}
.admin-folder-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-2_5) var(--sp-3); border-bottom: 1px solid var(--border-light);
}
.admin-folder-header b { font-size: 13px; color: var(--c-text-dark); }
.admin-folder-add {
  background: none; border: 1px solid var(--c-border-btn); border-radius: 4px;
  cursor: pointer; font-size: 14px; width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); transition: all 0.15s;
}
.admin-folder-add:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.admin-main-area { flex: 1; overflow: auto; display: flex; flex-direction: column; position: relative; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); padding: var(--sp-4); }

/* ========== 通用 ========== */
.perm-gate { display: none !important; }
.error { color: var(--danger); font-size: var(--text-sm); margin-top: var(--sp-2); min-height: 20px; }
.empty-tip { text-align: center; color: var(--text-hint); padding: 80px 20px; font-size: var(--text-lg); }
.role-badge { display: none; background: var(--primary-grad); color: var(--c-text-white); padding: 3px 10px; border-radius: 12px; font-size: var(--text-xs); font-weight: 600; }
.perm-tag-sm { display: inline-block; background: var(--bg-panel); color: var(--text-secondary); padding: 1px 6px; border-radius: 3px; font-size: 10px; margin: 1px; }
.checkbox-group { max-height: 200px; overflow-y: auto; border: 1.5px solid var(--border); border-radius: var(--radius); padding: 6px; margin-top: var(--sp-1); display: flex; flex-wrap: wrap; gap: 2px; }
.checkbox-item { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 4px 6px; font-size: var(--text-sm); cursor: pointer; }
.checkbox-item:last-child { border-bottom: none; }
.btn-remove-perm { margin-left: auto; background: none; border: none; color: var(--danger); cursor: pointer; font-size: var(--text-base); }
.perm-add-row { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.perm-add-row input { padding: var(--sp-2) var(--sp-2_5); border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); outline: none; transition: var(--transition); }
.perm-add-row input:focus { border-color: var(--primary); }
.sub-account-item { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-light); }
.folder-tree-item { display: flex; align-items: center; gap: var(--sp-1_5); padding: 4px 6px; cursor: pointer; border-radius: var(--radius-sm); }
.folder-tree-item:hover { background: var(--bg-panel); }
.folder-tree-item .folder-toggle { cursor: pointer; user-select: none; width: 16px; text-align: center; font-size: 12px; color: var(--text-secondary); }
.folder-tree-item .folder-check { margin-right: 4px; }
.folder-tree-item.folder-readonly { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
.folder-tree-children { padding-left: var(--sp-5); }

/* ========== 数据表格 ========== */
.content-area { padding: var(--sp-6); max-width: 1200px; margin: 0 auto; }
.table-wrap { overflow-x: auto; max-height: 60vh; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.data-table { width: 100%; border-collapse: collapse; background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.data-table th { background: var(--c-bg-gray-200); padding: var(--tbl-th-pad-y) var(--tbl-th-pad-x); text-align: left; font-size: 13px; color: var(--c-text-primary); font-weight: 600; border-bottom: 1px solid var(--c-border-table-head); white-space: nowrap; position: sticky; top: 0; z-index: 1; letter-spacing: 0.3px; }
.data-table td { padding: var(--tbl-td-pad-y) var(--tbl-td-pad-x); font-size: 14px; color: var(--c-text-primary); border-bottom: 1px solid #f0f1f4; vertical-align: middle; word-break: break-word; line-height: 1.5; }
.data-table tbody tr:nth-child(even) td { background: var(--c-bg-gray-100); }
.data-table tbody tr:hover td { background: var(--c-bg-blue-50); }
.data-table .col-time { font-size: var(--text-sm); color: var(--text-hint); white-space: nowrap; }
.pagination { margin-top: var(--sp-4); text-align: center; }

/* ========== 低代码搭建器 ========== */
.builder-modal { width: 98vw; max-width: 1600px; height: 94vh; display: flex; flex-direction: column; }
.builder-basic-info { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.builder-basic-info > div { flex: 1; }
.builder-basic-info label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-1_5); }
.builder-basic-info input, .builder-basic-info select { width: 100%; padding: var(--sp-2_5) var(--sp-3); border: 1.5px solid var(--border); border-radius: var(--radius); font-size: var(--text-base); outline: none; transition: var(--transition); }
.builder-basic-info input:focus, .builder-basic-info select:focus { border-color: var(--primary); }
.act-type-select { background: var(--primary-light); border-color: var(--primary); }

.builder-container { display: flex; flex: 1; gap: var(--sp-4); margin: 16px 0; min-height: 400px; }
.builder-panel { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.builder-panel h4 { padding: 14px 18px; margin: 0; background: var(--bg-panel); border-bottom: 1px solid var(--border-light); font-size: var(--text-sm); color: var(--text-secondary); font-weight: 600; }
.builder-panel h4 small { font-weight: normal; color: var(--text-hint); margin-left: var(--sp-2); }

.builder-components { width: 220px; flex-shrink: 0; }
.builder-canvas { flex: 1; }
.builder-properties { width: 300px; flex-shrink: 0; }

.component-list { padding: 8px; overflow-y: auto; flex: 1; }
.component-list-divider { padding: 8px 8px 4px; font-size: 11px; color: var(--text-hint); border-top: none; margin: 4px 0 2px; letter-spacing: 0.5px; font-weight: 600; }
.component-item { padding: 8px 10px; margin-bottom: 2px; background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 8px; transition: all 0.15s; user-select: none; border-left: none !important; }
.component-item:hover { background: var(--primary-light); border-color: transparent; transform: none; box-shadow: none; }
.component-icon { font-size: 16px; width: 20px; text-align: center; }

.canvas-area { flex: 1; padding: 0; overflow: hidden; min-height: 0; position: relative; background: var(--c-bg-gray-150); border: 1.5px dashed var(--border); border-radius: var(--radius); }
.canvas-area.dash-mode { background: var(--bg); background-image: none; border: none; padding: 0; overflow-x: hidden; }
.canvas-area.dash-mode::-webkit-scrollbar { width: 8px; }
.canvas-area.dash-mode::-webkit-scrollbar-track { background: transparent; }
.canvas-area.dash-mode::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
.canvas-area.dash-mode::-webkit-scrollbar-thumb:hover { background: #aaa; }
.canvas-area.drag-over { background: var(--primary-light); border: 1.5px dashed var(--primary); border-radius: var(--radius); }
.drag-ghost { position: fixed; pointer-events: none; z-index: 9999; background: var(--primary); color: var(--c-text-white); padding: var(--sp-2) var(--sp-4); border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600; box-shadow: 0 4px 12px rgba(51,112,255,0.4); opacity: 0.9; }
.drag-overlap { outline: 2px dashed #ff4d4f; outline-offset: 2px; }
.component-item.dragging { opacity: 0.4; }
.canvas-empty { text-align: center; color: var(--text-hint); padding: 80px 20px; font-size: var(--text-base); }


/* 画布内组件卡片 */
.canvas-component {
  background: var(--c-bg-white);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius);
  margin-bottom: var(--sp-2_5);
  padding: 14px 18px;
  cursor: pointer;
  min-height: 60px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.canvas-component:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}
.canvas-component.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(51,112,255,0.15);
}
.canvas-component-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 24px;
}
.canvas-component-type {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-light);
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.canvas-component-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.canvas-component-preview {
  font-size: var(--text-xs);
  color: var(--text-hint);
  margin-top: var(--sp-1_5);
  line-height: 1.5;
}
.canvas-component-remove {
  background: none;
  border: none;
  color: var(--text-hint);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
}
.canvas-component-remove:hover {
  background: #fee2e2;
  color: var(--c-text-danger-bright);
}

/* 图表组件画布预览 */
.chart-preview-placeholder {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--bg-panel);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  margin-top: var(--sp-1_5);
}
.chart-preview-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.chart-preview-info {
  flex: 1;
  min-width: 0;
}
.chart-preview-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}
.chart-preview-detail {
  font-size: var(--text-xs);
  color: var(--text-hint);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chart-preview-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  flex-shrink: 0;
}
.chart-preview-badge.kpi { background: #dbeafe; color: #1d4ed8; }
.chart-preview-badge.stat { background: #dcfce7; color: #15803d; }
.chart-preview-badge.chart { background: #f3e8ff; color: #7c3aed; }

.properties-area { flex: 1; padding: var(--sp-5); overflow-y: auto; }
.properties-empty { text-align: center; color: var(--text-hint); padding: 40px 20px; font-size: var(--text-base); }
.property-field { margin-bottom: 18px; }
.property-field label { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-1_5); }
.property-field input, .property-field textarea, .property-field select { width: 100%; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); outline: none; transition: var(--transition); background: var(--bg-card); }
.property-field textarea { resize: vertical; min-height: 60px; }
.property-field input:focus, .property-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(51,112,255,0.1); }
.property-field input[type="checkbox"], .property-field input[type="radio"] { width: auto; margin-right: 6px; vertical-align: middle; }
.property-field label:has(input[type="checkbox"]), .property-field label:has(input[type="radio"]) { display: flex; align-items: center; font-weight: normal; cursor: pointer; color: var(--text-primary); }

.builder-permissions { margin-top: var(--sp-4); border-top: 1px solid var(--border-light); padding-top: 16px; }

/* ========== 权限管理 ========== */
.group-item, .perm-group-item { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-light); }
.group-item-left { flex: 1; }
.group-item-name { font-weight: 600; font-size: var(--text-base); }
.group-item-members { font-size: var(--text-sm); color: var(--text-hint); margin-top: 2px; }
.perm-matrix-container { max-height: 350px; overflow-y: auto; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.perm-matrix-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.perm-matrix-table th { background: var(--c-bg-gray-200); padding: var(--tbl-th-pad-y) var(--tbl-th-pad-x); text-align: left; font-size: 13px; color: var(--c-text-primary); font-weight: 600; border-bottom: 1px solid var(--c-border-table-head); position: sticky; top: 0; z-index: 1; letter-spacing: 0.3px; }
.perm-matrix-table td { padding: var(--tbl-td-pad-y) var(--tbl-td-pad-x); border-bottom: 1px solid #f0f1f4; font-size: 14px; color: var(--c-text-primary); line-height: 1.5; vertical-align: middle; }
.perm-matrix-table tr:hover td { background: var(--c-bg-blue-50); }
.perm-matrix-table .activity-name { font-weight: 600; color: var(--primary); background: var(--primary-light); }
.perm-matrix-table .comp-key { color: var(--text-hint); font-size: var(--text-xs); }
/* 审批节点字段权限矩阵（紧凑版，属性面板内） */
.af-perm-table { font-size: 13px; }
.af-perm-table th { padding: 6px 8px; font-size: 12px; }
.af-perm-table td { padding: 5px 8px; font-size: 13px; }
.af-perm-table input[type="checkbox"] { width: auto; margin: 0; vertical-align: middle; }
.perm-matrix-table td:nth-child(3), .perm-matrix-table td:nth-child(4) { text-align: center; }
.perm-matrix-table th:nth-child(3), .perm-matrix-table th:nth-child(4) { text-align: center; }
.perm-matrix-table td:nth-child(5) { min-width: 160px; }
.perm-data-manage-row td { background: var(--warning-light) !important; font-weight: 600; }

/* 固定筛选样式 */
.fixed-filter-cell { vertical-align: top; min-width: 200px; }
.fixed-filters { display: flex; flex-direction: column; gap: 6px; }
.fixed-filter-item { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.filter-select { padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 12px; background: #fff; cursor: pointer; }
.filter-value { padding: 4px 8px; border: 1px solid #d9d9d9; border-radius: 4px; font-size: 12px; }
.add-fixed-filter-btn { padding: 4px 12px; font-size: 12px; background: #f0f0f0; border: 1px dashed #999; border-radius: 4px; cursor: pointer; color: #666; }
.add-fixed-filter-btn:hover { background: #e0e0e0; border-color: #666; color: #333; }
.remove-filter-btn { padding: 2px 6px; font-size: 14px; background: #ff4d4f; color: #fff; border: none; border-radius: 4px; cursor: pointer; line-height: 1; }
.remove-filter-btn:hover { background: #ff7875; }

/* ========== 表单权限管理（三栏） ========== */
.admin-detail-header { display:flex; align-items:center; gap:12px; padding:8px 0; }
.admin-detail-header .btn-secondary { font-size:13px; padding:4px 12px; border-radius:6px }
#adminDetailTitle { font-weight:600; font-size:15px }
#adminDetailArea { padding:0 16px; overflow:auto; flex:1 }
/* admin 后台表单渲染对齐前台：固定 1024px 居中 + 灰底 */
#adminDetailArea { background: var(--c-bg-gray-150); }
#adminDetailArea .featured-tab-panel { background: var(--c-bg-gray-150); }
#adminDetailArea [data-form-container] { width: 1024px; max-width: 100%; margin: 0 auto; background: var(--bg-card); position: relative; box-sizing: border-box; }
#adminDetailArea .featured-tabs { margin-bottom:0 }
#adminDetailArea .featured-tab-panel { min-height:300px }
.form-perm-group-modal { width: min(96vw, 1320px); max-height: 85vh; }
.form-perm-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); gap:12px }
.form-perm-header h3 { margin:0 }
.form-perm-layout { display:grid; grid-template-columns: 180px 220px 240px 1fr; gap:0; height:65vh; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden }
.form-perm-col { display:flex; flex-direction:column; overflow:hidden; min-width:0; border-right:1px solid var(--border-light) }
.form-perm-col:last-child { border-right:none }
.form-perm-col-header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:var(--bg-panel); border-bottom:1px solid var(--border-light); font-size:var(--text-sm); font-weight:600; color:var(--text-secondary); gap:8px; flex-wrap:wrap; flex-shrink:0 }

/* 表单列表（文件夹样式） */
.fp-form-list { flex:1; overflow-y:auto; padding:var(--sp-2); min-height:0; }
.fp-form-item { display:flex; align-items:center; gap:6px; padding:7px 10px; border-radius:var(--radius-sm); cursor:pointer; font-size:var(--text-sm); color:var(--text); transition:background .15s }
.fp-form-item:hover { background:var(--primary-light) }
.fp-form-item.active { background:var(--primary); color:var(--c-text-white) }
.fp-form-item .fp-form-icon { font-size:16px; flex-shrink:0; opacity:.7 }
.fp-form-item.active .fp-form-icon { opacity:1 }
.fp-folder-arrow { font-size:12px; color:var(--text-hint); width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; border-radius:3px; transition:background .15s }
.fp-folder-arrow:hover { background:rgba(0,0,0,0.06); }
.fp-folder-item.active .fp-folder-arrow { color:rgba(255,255,255,0.7); }
.fp-folder-item.active .fp-folder-arrow:hover { background:rgba(255,255,255,0.15); }
.fp-folder-item { font-weight:500; background:#f8f9fb; }
.fp-folder-item:hover { background:#eef1f6; }
.fp-folder-item.active { background:#4f46e5; color:#fff; }
.fp-folder-badge { font-size:10px; background:#e0e3e8; color:#666; padding:1px 6px; border-radius:10px; margin-left:auto; }
.fp-folder-item.active .fp-folder-badge { background:rgba(255,255,255,0.2); color:#fff; }
.fp-form-child { font-size:12px; opacity:0.85; }
.fp-form-child .fp-form-icon { font-size:13px; }
.fp-folder-header { font-size:11px; color:#999; border-top:1px dashed #e0e0e0; margin-top:4px; padding-top:6px; }
.fp-folder-info { padding:var(--sp-3); }
.fp-form-item .fp-form-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0 }

/* 权限组列表 */
.fp-group-list { flex:1; overflow-y:auto; padding:var(--sp-2); min-height:0; }
.fp-group-item { position:relative; display:flex; align-items:center; justify-content:space-between; padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-sm); cursor:pointer; font-size:var(--text-sm); gap:6px }
.fp-group-item:hover { background:var(--primary-light) }
.fp-group-item.active { background:var(--primary); color:var(--c-text-white) }
.fp-group-item .fp-group-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0 }
.fp-group-item .fp-group-dot { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; color:var(--text-hint); flex-shrink:0 }
.fp-group-item .fp-group-dot:hover { background:var(--bg-panel) }
.fp-group-item.active .fp-group-dot { color:rgba(255,255,255,0.7) }
.fp-group-item.active .fp-group-dot:hover { background:rgba(255,255,255,0.15) }

/* 权限组三点菜单 */
.fp-group-menu { position:absolute; right:36px; top:calc(100% + 4px); background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:4px 0; box-shadow:var(--shadow-lg); z-index:20; min-width:100px; display:none }
.fp-group-menu.show { display:block }
.fp-group-menu-item { display:block; width:100%; padding:6px 12px; font-size:var(--text-sm); background:none; border:none; cursor:pointer; text-align:left; color:var(--text) }
.fp-group-menu-item:hover { background:var(--primary-light) }
.fp-group-menu-item.danger { color:var(--danger) }
.fp-group-menu-item.danger:hover { background:var(--danger-light) }

/* 组成员列表 */
.fp-member-tabs { display:flex; gap:2px; background:#f0f1f4; padding:2px; border-radius:6px }
.fp-mtab { border:none; background:transparent; padding:4px 10px; font-size:12px; font-weight:500; color:var(--text-secondary); cursor:pointer; border-radius:4px; transition:all .15s }
.fp-mtab:hover { color:var(--text); background:rgba(255,255,255,0.5); }
.fp-mtab.active { background:#fff; color:var(--primary); box-shadow:0 1px 3px rgba(0,0,0,0.08); }
.fp-member-tree { flex:1; overflow-y:auto; padding:var(--sp-2); font-size:var(--text-sm); min-height:0; }
.fp-tree-item { display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:var(--radius-sm); cursor:pointer }
.fp-tree-item:hover { background:var(--primary-light) }
.fp-tree-item.in-group { background:var(--success-light) }
.fp-tree-toggle { width:18px; height:18px; display:flex; align-items:center; justify-content:center; color:var(--text-hint); cursor:pointer; flex-shrink:0 }
.fp-tree-check { width:16px; height:16px; cursor:pointer; flex-shrink:0 }
.fp-tree-label { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0 }
.fp-tree-badge { font-size:var(--text-xs); color:var(--text-hint); flex-shrink:0 }
.fp-tree-dept-tag { font-size:10px; color:var(--text-hint); background:#f0f1f4; padding:1px 6px; border-radius:8px; flex-shrink:0; max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fp-tree-children { padding-left:24px; display:none }
.fp-tree-children.open { display:block }

/* 右栏权限配置 */
.form-perm-config-col { overflow:hidden }
.form-perm-config-col .section-label { padding-top:var(--sp-2) }
.fp-config-empty { display:flex; align-items:center; justify-content:center; flex:1; color:var(--text-hint); font-size:var(--text-sm) }
#fpConfigPanel { flex:1; padding:var(--sp-3); overflow-y:auto; min-height:0 }

/* 权限分区 */
.fp-perm-section { margin-bottom:var(--sp-3); }
.fp-perm-section-title { font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:var(--sp-2); padding-bottom:6px; border-bottom:1px solid var(--border-light); }
.fp-perm-layer { margin-bottom:var(--sp-2); }
.fp-perm-layer-label { font-size:11px; color:var(--text-hint); font-weight:500; margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
.fp-share-group { display:flex; align-items:center; gap:4px; grid-column:span 1; }
.fp-share-ext { padding-left:8px; border-left:2px solid var(--border-light); }

/* 固定筛选 */
.fp-fixed-filter-cell { min-width:160px; }
.fp-fixed-filters { display:flex; flex-direction:column; gap:4px; }
.fp-fixed-filter-item { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.fp-fixed-filter-item .filter-select { padding:2px 4px; font-size:11px; border:1px solid var(--border); border-radius:4px; background:#fff; min-width:60px; }
.fp-fixed-filter-item .filter-value { padding:2px 4px; font-size:11px; border:1px solid var(--border); border-radius:4px; }
.fp-rm-filter-btn { width:18px; height:18px; padding:0; font-size:10px; line-height:1; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.fp-add-filter-btn { font-size:11px; padding:2px 8px; }


/* 操作权限表格 */
.fp-op-table { width:100%; border-collapse:collapse; }
.fp-op-table td { padding:6px 8px; vertical-align:middle; }
.fp-op-table td:nth-child(odd) { width:30%; }
.fp-op-name { font-size:12px; color:#444; }

/* 系统字段行 */
.fp-sys-row { background:#f8f9fb; }
.fp-sys-row td { border-bottom:1px dashed #e8eaed !important; }
.fp-sys-badge { display:inline-block; font-size:10px; background:#e8f0fe; color:#1a73e8; padding:1px 5px; border-radius:3px; margin-right:4px; }

/* 通用 */
.radio-item { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--text-sm); cursor: pointer; }
.section-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-2); }
.fp-basic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2) 16px; }
.fp-perm-group-label { grid-column: 1 / -1; font-size: var(--text-xs); font-weight: 600; color: var(--text-hint); padding-top: 6px; margin-top: 2px; border-top: 1px solid var(--border-light); }
.fp-perm-group-label:first-child { border-top: none; padding-top: 0; margin-top: 0; }

/* ========== 工作流编辑器 ========== */
.wf-editor-layout { display: flex; gap: var(--sp-4); height: calc(90vh - 180px); min-height: 400px; }
.wf-panel { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.wf-panel h4 { padding: var(--sp-3) var(--sp-4); margin: 0; background: var(--bg-panel); border-bottom: 1px solid var(--border-light); font-size: var(--text-sm); color: var(--text-secondary); font-weight: 600; }
.wf-steps-panel { width: 220px; flex-shrink: 0; }
.wf-config-panel { flex: 1; overflow-y: auto; }
.wf-trigger-panel { width: 260px; flex-shrink: 0; overflow-y: auto; }

.wf-step-list { flex: 1; overflow-y: auto; padding: var(--sp-2); }
.wf-step-item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2_5) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: var(--sp-1_5); cursor: pointer; font-size: var(--text-sm); transition: var(--transition); background: var(--bg-card); }
.wf-step-item:hover { border-color: var(--primary); background: var(--primary-light); }
.wf-step-item.active { border-color: var(--primary); background: var(--primary); color: var(--c-text-white); }
.wf-step-item .step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--bg-panel); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 600; flex-shrink: 0; }
.wf-step-item.active .step-num { background: rgba(255,255,255,0.3); }
.wf-step-item .step-type-icon { font-size: var(--text-base); flex-shrink: 0; }
.wf-step-item .step-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-step-item.hl-prev { background: var(--success-light); border-color: var(--success); }
.wf-step-item.hl-next { background: var(--warning-light); border-color: var(--warning); }
.wf-step-item .step-next-hint { font-size: var(--text-xs); color: var(--text-hint); margin-left: auto; flex-shrink: 0; }
.wf-step-item.active .step-next-hint { color: rgba(255,255,255,0.7); }
.wf-step-item.hl-prev .step-num { background: var(--success); color: var(--c-text-white); }
.wf-step-item.hl-next .step-num { background: var(--warning); color: var(--c-text-white); }

.wf-step-config { padding: var(--sp-4); flex: 1; overflow-y: auto; }
.wf-config-row { margin-bottom: var(--sp-3); }
.wf-config-row label { display: block; font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--sp-1); font-weight: 500; }
.wf-config-row input, .wf-config-row select, .wf-config-row textarea { width: 100%; padding: var(--sp-2) var(--sp-2_5); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); transition: var(--transition); }
.wf-config-row input:focus, .wf-config-row select:focus, .wf-config-row textarea:focus { border-color: var(--primary); outline: none; }
.wf-config-row textarea { font-family: 'Consolas', 'Monaco', monospace; resize: vertical; min-height: 100px; }

.wf-mapping-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.wf-mapping-table th { background: var(--c-bg-gray-200); padding: var(--tbl-th-pad-y) var(--tbl-th-pad-x); text-align: left; font-size: 13px; color: var(--c-text-primary); font-weight: 600; border-bottom: 1px solid var(--c-border-table-head); letter-spacing: 0.3px; }
.wf-mapping-table td { padding: var(--tbl-td-pad-y) var(--tbl-td-pad-x); border-bottom: 1px solid #f0f1f4; font-size: 14px; color: var(--c-text-primary); line-height: 1.5; }
.wf-mapping-table tr:hover td { background: var(--c-bg-blue-50); }
.wf-mapping-table input { width: 100%; padding: var(--sp-1_5) var(--sp-2); border: 1px solid var(--c-border-input); border-radius: 4px; font-size: var(--text-sm); transition: var(--transition); }
.wf-mapping-table input:focus { border-color: var(--primary); outline: none; }

.wf-filter-row { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-2); }
.wf-filter-row select, .wf-filter-row input { padding: var(--sp-1_5) var(--sp-2); border: 1px solid var(--border); border-radius: 4px; font-size: var(--text-sm); }
.wf-filter-row select { width: auto; flex: 0 0 auto; }

.wf-trigger-cond { display: flex; gap: var(--sp-1_5); align-items: center; margin-bottom: var(--sp-1_5); }
.wf-trigger-cond select, .wf-trigger-cond input { padding: var(--sp-1_5) var(--sp-2); border: 1px solid var(--border); border-radius: 4px; font-size: var(--text-sm); flex: 1; }
.wf-trigger-cond .btn-remove { background: none; border: none; color: var(--danger); cursor: pointer; font-size: var(--text-base); padding: 4px; }

.wf-var-row { display: flex; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-1_5); }
.wf-var-row input { flex: 1; padding: var(--sp-1_5) var(--sp-2); border: 1px solid var(--border); border-radius: 4px; font-size: var(--text-sm); }

.wf-cron-preset { padding: var(--sp-1) var(--sp-2_5) !important; font-size: var(--text-xs) !important; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; transition: var(--transition); }
.wf-cron-preset:hover { background: var(--primary); color: var(--c-text-white); border-color: var(--primary); }

.wf-item { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-light); }
.wf-item-left { flex: 1; }
.wf-item-name { font-weight: 600; font-size: var(--text-base); }
.wf-item-info { font-size: var(--text-sm); color: var(--text-hint); margin-top: 2px; }
.wf-group-item { transition: background 0.15s; border-radius: 4px; }
.wf-group-item.active { background: var(--bg-active, #e8f0fe); color: var(--text-primary, #333); font-weight: 500; }
.wf-group-item:hover { background: var(--bg-hover, #f0f0f0); }

.wf-branch-section { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: var(--sp-2) 0; }
.wf-branch-header { padding: var(--sp-2) var(--sp-3); background: var(--bg-panel); border-bottom: 1px solid var(--border); font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
.wf-branch-steps { padding: var(--sp-2) var(--sp-3); min-height: 40px; }
.wf-branch-add { padding: var(--sp-1_5) var(--sp-3); border-top: 1px solid var(--border); }

.wf-code-toolbar { display: flex; gap: var(--sp-1); padding: var(--sp-1_5) var(--sp-2); background: var(--bg-panel); border-bottom: 1px solid var(--border-light); flex-wrap: wrap; }
.wf-code-toolbar button { padding: var(--sp-1) var(--sp-2_5); font-size: var(--text-xs); background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-family: monospace; transition: var(--transition); }
.wf-code-toolbar button:hover { background: var(--primary); color: var(--c-text-white); border-color: var(--primary); }

.wf-log-item { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-light); font-size: var(--text-sm); }
.wf-log-item.success { border-left: 3px solid var(--success); }
.wf-log-item.error { border-left: 3px solid var(--danger); }
.wf-log-time { color: var(--text-hint); font-size: var(--text-xs); }

/* ========== 工作流画布编辑器 ========== */
.wf-canvas-layout { display: flex; gap: 0; flex: 1; min-height: 0; overflow: hidden; }
.wf-canvas-palette { width: 180px; flex-shrink: 0; border-right: 1px solid var(--border-light); overflow: hidden; display: flex; flex-direction: column; background: #fafbfc; }
.wf-canvas-palette h4 { padding: 10px 14px; margin: 0; background: linear-gradient(135deg, #f8f9fb 0%, #eef1f5 100%); border-bottom: 1px solid var(--border-light); font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--text-secondary); text-transform: uppercase; }
.wf-palette-list { flex: 1; overflow-y: auto; padding: 8px 10px; }
.wf-canvas-center { flex: 1; min-width: 0; }
.wf-canvas-props { width: 340px; flex-shrink: 0; border-left: 1px solid var(--border-light); overflow: hidden; display: flex; flex-direction: column; background: #fafbfc; }
.wf-canvas-props h4 { padding: 10px 14px; margin: 0; background: linear-gradient(135deg, #f8f9fb 0%, #eef1f5 100%); border-bottom: 1px solid var(--border-light); font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--text-secondary); text-transform: uppercase; }

/* 工作流编辑器弹窗 */
.wf-edit-modal { max-width: 1600px; width: 98vw; max-height: 94vh; height: 94vh; display: flex; flex-direction: column; border-radius: var(--radius-xl); overflow: hidden; padding: 0 !important; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.wf-edit-header { display: flex; align-items: center; gap: 12px; margin-bottom: 0; padding: 14px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); flex-shrink: 0; }
.wf-edit-header h3 { margin: 0; white-space: nowrap; font-size: 15px; color: #fff; font-weight: 600; }
.wf-edit-title-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.wf-edit-input { flex: 1; padding: 8px 14px; border: none; border-radius: 8px; font-size: 14px; background: rgba(255,255,255,0.9); color: #333; min-width: 120px; }
.wf-edit-input::placeholder { color: #aaa; }
.wf-edit-input:focus { outline: none; background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,0.4); }
.wf-edit-active-label { color: rgba(255,255,255,0.9); font-size: 13px; white-space: nowrap; cursor: pointer; }
.wf-edit-active-label input { margin-right: 4px; }
.wf-edit-notify-group { display: flex; align-items: center; gap: 6px; margin-left: 8px; flex-shrink: 0; background: rgba(255,255,255,0.12); border-radius: 8px; padding: 4px 10px; }
.wf-edit-notify-label { font-size: 12px; color: rgba(255,255,255,0.85); white-space: nowrap; }
.wf-edit-notify-select { padding: 3px 8px; border: 1px solid rgba(255,255,255,0.3); border-radius: 6px; font-size: 12px; background: rgba(255,255,255,0.9); color: #333; }
.wf-edit-canvas-wrap { border: none; border-radius: 0; }
.wf-edit-props-content { padding: 10px 12px; flex: 1; overflow-y: auto; }
.wf-edit-actions { margin-top: 0; padding: 12px 24px; border-top: 1px solid var(--border-light); flex-shrink: 0; background: #fafbfc; display: flex; align-items: center; gap: 10px; }
.wf-edit-actions #wfEditDelete { margin-right: auto; }
/* 错误横幅 */
.wf-edit-error-banner { display: none; margin: 0; padding: 10px 24px; background: #fff2f0; border-top: 1px solid #ffccc7; color: #cf1322; font-size: 13px; font-weight: 500; flex-shrink: 0; }
.wf-edit-error-banner.show { display: flex; align-items: center; gap: 8px; }
.wf-edit-error-banner::before { content: '⚠'; font-size: 16px; flex-shrink: 0; }
/* 属性面板删除按钮 */
.wf-prop-delete { width: 100%; padding: 8px; margin-top: 12px; border: 1px solid #ffccc7; border-radius: 6px; background: #fff2f0; color: #cf1322; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
.wf-prop-delete:hover { background: #cf1322; color: #fff; border-color: #cf1322; }
/* 名称输入框无效时红框 */
.wf-prop-name-invalid { border-color: #cf1322 !important; box-shadow: 0 0 0 2px rgba(207,19,34,0.12) !important; }
.wf-help-text { font-size: var(--text-xs); color: var(--text-hint); line-height: 1.6; }

/* 审批流/工作流画布通用 */
.af-canvas-wrap { flex: 1; position: relative; overflow: auto; background: #f5f7fa; background-image: radial-gradient(circle, #e0e4e8 1px, transparent 1px); background-size: 20px 20px; }
.af-canvas { position: relative; min-width: 100%; min-height: 100%; width: 3000px; height: 2000px; }
.af-connections { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.af-connections > path { fill: none; stroke: #999; stroke-width: 2; stroke-linecap: round; pointer-events: stroke; cursor: pointer; transition: stroke 0.15s, stroke-width 0.15s; }
.af-connections > path:hover { stroke: #667eea; stroke-width: 3; }
.af-connections > path.af-conn-selected { stroke: #667eea; stroke-width: 3; }

/* 画布节点 - 颜色变量化 */
.af-canvas-node { position: absolute; min-width: 160px; background: #fff; border-radius: 10px; border: 2px solid var(--border); cursor: move; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s; }
.af-canvas-node:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translateY(-1px); }
.af-canvas-node.selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(51,112,255,0.15), 0 4px 16px rgba(0,0,0,0.1); }
.af-canvas-node.af-type-trigger { border-color: #f59e0b; }
.af-canvas-node.af-type-query { border-color: #8b5cf6; }
.af-canvas-node.af-type-set_var { border-color: #06b6d4; }
.af-canvas-node.af-type-calc { border-color: #ec4899; }
.af-canvas-node.af-type-branch { border-color: #f97316; }
.af-canvas-node.af-type-loop { border-color: #14b8a6; }
.af-canvas-node.af-type-api { border-color: #3b82f6; }
.af-canvas-node.af-type-update { border-color: #6366f1; }
.af-canvas-node.af-type-insert { border-color: #22c55e; }
.af-canvas-node.af-type-ai { border-color: #10b981; }
.af-canvas-node.af-type-end { border-color: #ef4444; }
.af-canvas-node.af-type-start { border-color: var(--success); }
.af-canvas-node.af-type-approval { border-color: var(--primary); }
.af-canvas-node.af-type-cc { border-color: var(--warning); }
/* 数据工厂节点类型 */
.af-canvas-node.af-type-filter { border-color: #f093fb; }
.af-canvas-node.af-type-map    { border-color: #43e97b; }
.af-canvas-node.af-type-group  { border-color: #fa709a; }
.af-canvas-node.af-type-sort   { border-color: #fee140; }
.af-canvas-node.af-type-join   { border-color: #a18cd1; }
.af-canvas-node.af-type-union  { border-color: #fbc2eb; }
.af-canvas-node.af-type-limit  { border-color: #d4fc79; }
.af-canvas-node.af-type-output { border-color: #27ae60; }
.af-cn-header { padding: 8px 12px; border-radius: 8px 8px 0 0; font-size: 12px; font-weight: 600; color: #fff; display: flex; align-items: center; gap: 8px; letter-spacing: 0.3px; }
.af-cn-header-trigger { background: #f59e0b; }
.af-cn-header-query { background: #8b5cf6; }
.af-cn-header-set_var { background: #06b6d4; }
.af-cn-header-calc { background: #ec4899; }
.af-cn-header-branch { background: #f97316; }
.af-cn-header-loop { background: #14b8a6; }
.af-cn-header-api { background: #3b82f6; }
.af-cn-header-update { background: #6366f1; }
.af-cn-header-insert { background: #22c55e; }
.af-cn-header-ai { background: #10b981; }
.af-cn-header-end { background: #ef4444; }
.af-cn-header-start { background: var(--success); }
.af-cn-header-approval { background: var(--primary); }
.af-cn-header-cc { background: var(--warning); }
/* 数据工厂节点 header */
.af-cn-header-filter { background: #f093fb; }
.af-cn-header-map    { background: #43e97b; }
.af-cn-header-group  { background: #fa709a; }
.af-cn-header-sort   { background: #fee140; }
.af-cn-header-join   { background: #a18cd1; }
.af-cn-header-union  { background: #fbc2eb; }
.af-cn-header-limit  { background: #d4fc79; }
.af-cn-header-output { background: #27ae60; }
.af-cn-body { padding: 8px 12px; font-size: 11px; color: #94a3b8; min-height: 24px; line-height: 1.4; background: #0f172a; border-radius: 0 0 8px 8px; }
.af-cn-delete { position: absolute; top: -8px; right: -8px; background: #0f172a; border: 2px solid #ef4444; border-radius: 50%; width: 20px; height: 20px; font-size: 12px; color: #ef4444; cursor: pointer; display: none; line-height: 16px; text-align: center; transition: all 0.15s; z-index: 10; }
.af-cn-delete:hover { background: #ef4444; color: #fff; }
.af-canvas-node:hover .af-cn-delete { display: block; }

/* 工作流分支端口标签 */
.wf-port-label { position: absolute; font-size: var(--text-xs); color: var(--text-hint); white-space: nowrap; pointer-events: none; z-index: 4; }
.wf-port-label-then { right: 20px; top: 30%; }
.wf-port-label-else { right: 20px; top: 70%; }

/* 调色板项 — 彩色图标 + 左边框类型指示 */
.af-palette-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: grab; font-size: 13px; margin-bottom: 4px; border: 1px solid #eee; background: #fff; color: #333; transition: all .2s; user-select: none; border-left: 3px solid #ddd; }
.af-palette-item:hover { border-color: var(--primary); background: #f8f9ff; transform: translateX(2px); }
.af-palette-item:active { cursor: grabbing; }
.af-palette-item .component-icon { width: 26px; height: 26px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; font-weight: 700; flex-shrink: 0; }
/* 调色板类型边框颜色 */
.af-palette-item[data-wf-type="trigger"] { border-left-color: #f59e0b; }
.af-palette-item[data-wf-type="query"] { border-left-color: #8b5cf6; }
.af-palette-item[data-wf-type="set_var"] { border-left-color: #06b6d4; }
.af-palette-item[data-wf-type="calc"] { border-left-color: #ec4899; }
.af-palette-item[data-wf-type="api"] { border-left-color: #3b82f6; }
.af-palette-item[data-wf-type="update"] { border-left-color: #6366f1; }
.af-palette-item[data-wf-type="insert"] { border-left-color: #22c55e; }
.af-palette-item[data-wf-type="drive_exe"] { border-left-color: #1677ff; }
.af-palette-item[data-wf-type="ai"] { border-left-color: #10b981; }
.af-palette-item[data-wf-type="polling"] { border-left-color: #64748b; }
.af-palette-item[data-wf-type="notify"] { border-left-color: #f59e0b; }
.af-palette-item[data-wf-type="lock_form"] { border-left-color: #6366f1; }

/* 属性面板 */
.af-prop-empty { font-size: 13px; color: #999; text-align: center; padding: 50px 20px; }
.af-prop-group { margin-bottom: 8px; }
.af-prop-group label { display: block; font-size: 10px; color: #888; margin-bottom: 2px; font-weight: 600; letter-spacing: 0.3px; }
.af-prop-group input, .af-prop-group select, .af-prop-group textarea { width: 100%; padding: 5px 7px; border: 1px solid #e8e8e8; border-radius: 5px; font-size: 12px; box-sizing: border-box; transition: all 0.2s; background: #fff; color: #333; }
.af-prop-group input:focus, .af-prop-group select:focus, .af-prop-group textarea:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px rgba(102,126,234,0.15); }
.af-prop-group input::placeholder, .af-prop-group textarea::placeholder { color: #bbb; }
/* 属性面板内联双列 */
.wf-prop-row { display: flex; gap: 8px; }
.wf-prop-row > .af-prop-group { flex: 1; margin-bottom: 8px; }

.af-section-title { font-size: 11px; font-weight: 700; color: var(--primary); margin: 8px 0 4px; padding-top: 6px; border-top: 1px solid #eee; letter-spacing: 0.3px; }

/* ========== 通知徽章 ========== */
.notification-badge { position: absolute; top: -6px; right: -6px; background: var(--danger); color: var(--c-text-white); font-size: var(--text-xs); min-width: 16px; height: 16px; line-height: 16px; text-align: center; border-radius: 8px; padding: 0 4px; font-weight: 600; }

/* ========== Toast 通知 ========== */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none; }
.toast { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); font-size: var(--text-base); color: var(--c-text-white); box-shadow: var(--shadow-lg); animation: toastIn 0.3s var(--ease); pointer-events: auto; max-width: 360px; word-break: break-word; }
.toast.toast-success { background: var(--success); }
.toast.toast-error { background: var(--danger); }
.toast.toast-warning { background: var(--warning); }
.toast.toast-info { background: var(--info); }
.toast.toast-out { animation: toastOut 0.3s var(--ease) forwards; }
@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toastOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

/* ========== Loading Spinner ========== */
.spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.6s linear infinite; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ========== Badge 标签 ========== */
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: var(--text-xs); font-weight: 600; line-height: 1.4; }
.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-success { background: var(--success-light); color: var(--success); }
.badge-danger { background: var(--danger-light); color: var(--danger); }
.badge-warning { background: var(--warning-light); color: var(--warning); }
.badge-info { background: var(--info-light); color: var(--info); }

/* ========== 字段映射样式 ========== */
.wf-field-map-row { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-1); align-items: center; }
.wf-field-label { min-width: 100px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.wf-field-label-text { font-size: var(--text-xs); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-tag { font-size: 9px; padding: 1px 4px; border-radius: 3px; margin-top: 1px; }
.type-tag-subform { background: #e0f2fe; color: #0369a1; }
.type-tag-default { background: var(--bg-panel); color: var(--text-hint); }
.wf-field-select { flex: 1; padding: var(--sp-1); font-size: var(--text-xs); border: 1px solid var(--border); border-radius: 4px; }
.wf-field-input { flex: 1; padding: var(--sp-1); font-size: var(--text-xs); border: 1px solid var(--border); border-radius: 4px; }

/* ========== 内联样式提取 ========== */
.loading-state { text-align: center; padding: var(--sp-10); color: var(--text-hint); }
.error-state { color: var(--danger); text-align: center; padding: var(--sp-10); }
.success-state { text-align: center; padding: var(--sp-10); }
.success-state .title { color: var(--success); font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--sp-3); }
.success-state .msg { color: var(--text-hint); }
.hint-text { color: var(--text-hint); }
.inline-flex-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.inline-flex-row > div { flex: 1; }
.inline-flex-row .label-sm { font-size: var(--text-sm); color: var(--text-hint); margin-bottom: var(--sp-1); }
.inline-flex-row .checkbox-group { max-height: 150px; padding: 4px; }
.inline-flex-row-btns { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.btn-xs { padding: var(--sp-2) var(--sp-3); font-size: var(--text-sm); }
.btn-icon-link { text-decoration: none; font-size: var(--text-lg); }
.form-control { flex: 1; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-base); }
.form-control-sm { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.form-label-check { white-space: nowrap; font-size: var(--text-sm); }
.mt-section { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.mb-auto { margin-right: auto; }
.data-modal-scroll { max-height: 65vh; overflow-y: auto; margin-top: var(--sp-3); }

/* ========== 数据管理面板 ========== */
.dm-toolbar-btn { padding: 4px 12px; font-size: 12px; cursor: pointer; border: 1px solid var(--c-border-form); border-radius: 0; background: var(--c-bg-gray-300); color: var(--c-text-black); }
.dm-toolbar-btn:hover { background: var(--c-border-strong); }
.dm-toolbar-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dm-table { width: 100%; table-layout: auto; border-collapse: separate; border-spacing: 0; font-size: 14px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--c-bg-white); text-align: left; animation: fadeInUp 0.3s ease-out; }
/* 列少时铺满容器：内容多的列宽、少的列窄，剩余宽度按内容比例分配，右侧不再留白 */
.dm-table th, .dm-table td { min-width: 72px; }
.dm-table .dm-cb { min-width: 52px; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.dm-table thead { position: sticky; top: 0; z-index: 2; }
.dm-table thead th { background: var(--c-bg-gray-200); color: var(--c-text-primary); padding: var(--tbl-th-pad-y) var(--tbl-th-pad-x); text-align: left; font-weight: 600; font-size: 13px; border-bottom: 1px solid var(--c-border-table-head); border-right: 1px solid var(--c-border-table); white-space: nowrap; letter-spacing: 0.3px; user-select: none; position: relative; }
.dm-table thead th:last-child { border-right: none; }
.dm-table thead th:hover { background: #ecedf0; }
.dm-table thead th[data-sort-key] { cursor: pointer; }
.dm-table thead th[data-sort-key]:hover { background: #e6e8eb; }
.dm-table thead th .dm-resize-handle { position: absolute; right: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 5; user-select: none; transition: background 0.2s; }
.dm-table thead th .dm-resize-handle::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2px; height: 16px; background: #c9cdd4; border-radius: 1px; opacity: 0; transition: all 0.2s; }
.dm-table thead th .dm-resize-handle:hover { background: rgba(51,112,255,0.1); }
.dm-table thead th .dm-resize-handle:hover::before { opacity: 1; background: var(--primary); height: 24px; }
.dm-table.col-resizing { cursor: col-resize !important; user-select: none !important; }
.dm-table.col-resizing * { cursor: col-resize !important; }
.dm-table.col-resizing .dm-resize-handle { background: rgba(51,112,255,0.2); }
.dm-table.col-resizing .dm-resize-handle::before { opacity: 1; background: var(--primary-dark); height: 32px; }
.dm-table.col-resizing tbody td { transition: none !important; }
.dm-table tbody td { padding: var(--tbl-td-pad-y) var(--tbl-td-pad-x); border-bottom: 1px solid #f0f1f4; border-right: 1px solid #f0f1f4; font-size: 14px; color: var(--c-text-primary); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background 0.15s; line-height: 1.5; }
.dm-table tbody td:last-child { border-right: none; }
.dm-table tbody td.dm-cell { cursor: default; }
.dm-table tbody tr:hover td.dm-cell { color: var(--primary); }
.dm-table tbody tr { cursor: pointer; transition: var(--transition); }
.dm-table tbody tr:last-child td { border-bottom: none; }
.dm-table tbody tr:hover { transform: scale(1.005); }
.dm-table tbody tr:hover td { background: var(--c-bg-blue-50); }
.dm-table tbody tr:hover td[style*="sticky"] { background: var(--c-bg-blue-50); }
.dm-table tbody tr.dm-selected td { background: var(--c-bg-blue-100); }
.dm-table tbody tr.dm-selected td[style*="sticky"] { background: var(--c-bg-blue-200); }
.dm-table tbody tr.dm-selected:hover td { background: var(--c-bg-blue-200); }
.dm-table .dm-cb { width: 52px; text-align: center; padding-left: var(--sp-5); }
.dm-table .dm-cb input { margin: 0; cursor: pointer; width: 16px; height: 16px; accent-color: var(--primary); border-radius: 4px; transition: all 0.15s; }
.dm-table .dm-cb input:hover { transform: scale(1.1); }
.dm-filter-row { display: flex; gap: var(--sp-2); align-items: center; font-size: 13px; margin-bottom: var(--sp-1); background: var(--c-bg-gray-100); padding: var(--sp-1_5) var(--sp-3); border-radius: var(--radius-sm); border: 1px solid var(--c-border-table); transition: all 0.2s; animation: fadeIn 0.2s ease-out; }
.dm-filter-row:hover { background: var(--c-bg-blue-50); border-color: #d4deff; }
.dm-filter-row select, .dm-filter-row input { padding: var(--sp-1) var(--sp-2); font-size: 13px; border: 1px solid var(--c-border-input); border-radius: 6px; outline: none; transition: all 0.2s; background: var(--c-bg-white); }
.dm-filter-row select:focus, .dm-filter-row input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(51,112,255,0.1); }
.dm-filter-row .dm-filter-del { cursor: pointer; color: #f56c6c; font-size: 16px; border: none; background: none; padding: 2px 4px; border-radius: 4px; transition: all 0.15s; }
.dm-filter-row .dm-filter-del:hover { background: #fef0f0; color: #e64a19; }
.dm-col-item { display: flex; align-items: center; gap: var(--sp-1_5); padding: 4px 0; font-size: 12px; cursor: pointer; }
.dm-col-item input { margin: 0; }
.dm-toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: var(--c-text-primary); color: var(--c-text-white); padding: 10px 24px; border-radius: var(--radius-sm); font-size: 13px; z-index: 99999; pointer-events: none; animation: toastIn 0.3s var(--ease); box-shadow: var(--shadow-lg); }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(-20px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.dm-toast.toast-out { animation: toastOut 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes toastOut { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(-20px); } }
.process-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-4); }
.process-header h3 { margin: 0; }
.process-body { max-height: 50vh; overflow: auto; margin-bottom: var(--sp-4); }

/* ========== 弹窗动画 ========== */
.modal { animation: fadeIn 0.2s ease-out; }
.modal .modal-box { animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.approval-comment { width: 100%; padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); margin-bottom: var(--sp-3); }
.approval-btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

@keyframes fadeInOut { 0% { opacity:0; transform:translateX(-50%) translateY(-10px); } 15% { opacity:1; transform:translateX(-50%) translateY(0); } 85% { opacity:1; } 100% { opacity:0; } }

/* ========== 审批中心 ========== */
.proc-tab-badge { display: inline-block; background: var(--primary); color: #fff; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 10px; margin-left: 4px; min-width: 16px; text-align: center; }
.proc-filter-bar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; align-items: center; }
.proc-search { flex: 1; min-width: 180px; padding: 8px 12px 8px 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 10px center no-repeat; }
.proc-search:focus { outline: none; border-color: var(--primary); }
.proc-filter-select { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; background: #fff; cursor: pointer; }
.proc-filter-select:focus { outline: none; border-color: var(--primary); }

.proc-card { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius); margin-bottom: var(--sp-2); cursor: pointer; transition: var(--transition-fast); overflow: hidden; }
.proc-card:hover { border-color: var(--primary); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.proc-card-inner { display: flex; padding: 14px 16px; gap: 12px; }
.proc-card-bar { width: 4px; border-radius: 2px; flex-shrink: 0; }
.proc-card-bar.st-pending { background: #f57f17; }
.proc-card-bar.st-approved { background: #1e8e3e; }
.proc-card-bar.st-rejected { background: #d93025; }
.proc-card-bar.st-returned { background: #ff6f00; }
.proc-card-bar.st-withdrawn { background: #9e9e9e; }
.proc-card-bar.st-completed { background: #1e8e3e; }
.proc-card-body { flex: 1; min-width: 0; }
.proc-card-title { font-weight: 600; font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.proc-card-title .proc-node-name { color: var(--text-secondary); font-weight: 400; font-size: 13px; }
.proc-card-summary { font-size: 12px; color: var(--text-hint); margin-top: 4px; line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.proc-card-summary.expanded { -webkit-line-clamp: unset; display: block; }
.proc-card-expand { font-size: 11px; color: var(--primary); cursor: pointer; margin-top: 2px; display: inline-block; }
.proc-card-meta { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--text-hint); }
.proc-card-meta .proc-submitter { display: flex; align-items: center; gap: 4px; }
.proc-card-meta .proc-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; }
.proc-card-right { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.proc-status-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.proc-status-tag.st-pending { background: #fff3e0; color: #e65100; }
.proc-status-tag.st-approved, .proc-status-tag.st-completed { background: #e8f5e9; color: #1b5e20; }
.proc-status-tag.st-rejected { background: #fce4ec; color: #b71c1c; }
.proc-status-tag.st-returned { background: #fff3e0; color: #e65100; }
.proc-status-tag.st-withdrawn { background: #f5f5f5; color: #616161; }
.proc-card-time { font-size: 11px; color: #aaa; }
.proc-method-tag { font-size: 10px; padding: 1px 6px; border-radius: 8px; background: #e8f0fe; color: #1967d2; margin-left: 4px; }

.proc-empty { text-align: center; padding: 40px 20px; color: var(--text-hint); }
.proc-empty-icon { font-size: 40px; margin-bottom: 8px; opacity: 0.5; }
.proc-empty-text { font-size: 14px; }

/* 审批详情 */
.proc-detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-3); }
.proc-detail-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; }
.proc-detail-sub { font-size: 12px; color: var(--text-hint); margin-top: 4px; }
.proc-detail-status { font-size: 14px; font-weight: 600; padding: 4px 12px; border-radius: 12px; }

/* 审批详情：左右分栏 */
.proc-detail-split { display: flex; gap: 16px; align-items: stretch; }
.proc-detail-left { flex: 1.1; min-width: 0; border: 1px solid var(--border-light); border-radius: var(--radius); padding: 12px 14px; max-height: 60vh; overflow-y: auto; background: #fff; }
.proc-detail-right { flex: 1; min-width: 0; border: 1px solid var(--border-light); border-radius: var(--radius); padding: 12px 14px; max-height: 60vh; overflow-y: auto; background: #fff; }
.proc-detail-section-title { font-size: 13px; font-weight: 700; color: var(--text-hint); letter-spacing: .5px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-light); }
.proc-detail-right .proc-timeline { max-height: none; }

/* 审批流程图 */
.proc-flow-canvas { position: relative; width: 100%; min-height: 320px; overflow: auto; border: 1px solid var(--border-light); border-radius: var(--radius); background: #fafbfc; }
.proc-flow-svg { position: absolute; top: 0; left: 0; pointer-events: none; }
.proc-flow-node { position: absolute; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; font-weight: 600; border-radius: 10px; box-sizing: border-box; transition: box-shadow .2s; cursor: default; }
.proc-flow-node .proc-flow-node-label { padding: 2px 6px; }
.proc-flow-node.passed { background: #1e8e3e; color: #fff; box-shadow: 0 2px 8px rgba(30,142,62,.35); }
.proc-flow-node.current { background: #f9a825; color: #fff; box-shadow: 0 2px 8px rgba(249,168,37,.45); animation: procFlowPulse 1.6s ease-in-out infinite; }
.proc-flow-node.waiting { background: #e0e0e0; color: #888; }
@keyframes procFlowPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.proc-flow-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--text-hint); }
.proc-flow-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }

.proc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; background: #f8f9fa; border-radius: var(--radius); padding: 14px 16px; margin-bottom: var(--sp-3); }
.proc-field-item { font-size: 13px; }
.proc-field-label { color: var(--text-hint); font-size: 11px; margin-bottom: 2px; }
.proc-field-value { color: var(--text); word-break: break-all; }
.proc-form-collapse { font-size: 12px; color: var(--primary); cursor: pointer; margin-top: 6px; text-align: center; }
.proc-subform-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.proc-subform-table th { background: #e8eaed; padding: 6px 8px; text-align: left; font-weight: 600; }
.proc-subform-table td { padding: 6px 8px; border-bottom: 1px solid #f0f0f0; }

/* 审批进度条 */
.proc-progress { display: flex; align-items: center; gap: 0; margin-bottom: var(--sp-4); padding: 12px 0; overflow-x: auto; }
.proc-progress-node { display: flex; flex-direction: column; align-items: center; min-width: 80px; position: relative; }
.proc-progress-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; z-index: 1; }
.proc-progress-dot.done { background: #1e8e3e; color: #fff; }
.proc-progress-dot.current { background: var(--primary); color: #fff; box-shadow: 0 0 0 4px rgba(102,126,234,0.2); }
.proc-progress-dot.waiting { background: #e0e0e0; color: #999; }
.proc-progress-label { font-size: 11px; color: var(--text-hint); margin-top: 4px; text-align: center; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proc-progress-line { flex: 1; height: 2px; min-width: 20px; }
.proc-progress-line.done { background: #1e8e3e; }
.proc-progress-line.waiting { background: #e0e0e0; }

/* 审批时间线 */
.proc-timeline { border-left: 2px solid #e0e0e0; padding-left: 20px; margin-left: 8px; }
.proc-timeline-item { margin-bottom: 16px; position: relative; }
.proc-timeline-dot { position: absolute; left: -26px; top: 4px; width: 12px; height: 12px; border-radius: 50%; }
.proc-timeline-dot.act-approve { background: #1e8e3e; }
.proc-timeline-dot.act-reject { background: #d93025; }
.proc-timeline-dot.act-transfer { background: #ff6f00; }
.proc-timeline-dot.act-submit { background: #1967d2; }
.proc-timeline-dot.act-withdraw { background: #ff9800; }
.proc-timeline-dot.act-force_end { background: #9e9e9e; }
.proc-timeline-dot.act-adjust { background: #9c27b0; }
.proc-timeline-handler { font-size: 13px; font-weight: 600; }
.proc-timeline-action { font-weight: 400; color: var(--text-secondary); }
.proc-timeline-comment { font-size: 12px; color: #666; margin-top: 3px; padding: 4px 8px; background: #f8f9fa; border-radius: 4px; }
.proc-timeline-patch { font-size: 12px; color: #1967d2; margin-top: 4px; padding: 4px 8px; background: #e8f0fe; border-radius: 4px; }
.proc-timeline-time { font-size: 11px; color: #aaa; margin-top: 3px; }

/* 审批操作区 */
.proc-action-area { background: #f8f9fa; border-radius: var(--radius); padding: 14px 16px; margin-top: var(--sp-3); }
.proc-action-label { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.proc-action-required { color: #d93025; }
.proc-action-textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; resize: vertical; min-height: 60px; margin-bottom: 10px; }
.proc-action-textarea:focus { outline: none; border-color: var(--primary); }
.proc-action-textarea.required { border-color: #d93025; }
.proc-action-btns { display: flex; gap: 8px; flex-wrap: wrap; }

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

/* ≤1440: 大屏微调 */
@media (max-width: 1440px) {
  .builder-props { width: 280px; }
  .top-bar-center { max-width: 320px; }
}

/* ≤1200: 中屏，侧栏收窄 */
@media (max-width: 1200px) {
  .sidebar-area { width: 240px; }
  .builder-props { width: 260px; }
  .admin-folder-panel { width: 200px; }
}

/* ≤1024: 平板，侧栏折叠为 icon-only */
@media (max-width: 1024px) {
  .sidebar-area { width: 80px; }
  .sidebar-area .sidebar-grid { display: none; }
  .sidebar-area .sidebar-toggle .toggle-text { display: none; }
  .builder-props { width: 240px; }
  .admin-folder-panel { width: 64px; }
}

/* ≤768: 手机，单列布局 */
@media (max-width: 768px) {
  .main-layout { flex-direction: column; }
  .admin-layout { flex-direction: column; }
  .sidebar-area { width: 100%; border-right: none; border-bottom: 1px solid var(--border-light); }
  .builder-props { width: 100%; border-left: none; border-top: 1px solid var(--border-light); }
  .admin-folder-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--border-light); }
  .top-bar-center { display: none; }
  .top-bar { padding: var(--sp-2) var(--sp-3); }
  .grid { grid-template-columns: 1fr; padding: var(--sp-3); }
}

@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; padding: var(--sp-4); }
  .main-layout { flex-direction: column; height: auto; }
  .sidebar-area { width: 100%; border-left: none; border-top: 1px solid var(--border-light); }
  .sidebar-grid { grid-template-columns: 1fr; }
}

/* ========== 仪表盘 ========== */
/* ========== 仪表盘分页布局 ========== */
.dashboard-canvas {
  --dash-bg: #f4f6fa;
  --dash-bg-gradient: none;
  --card-bg: #ffffff;
  --card-radius: 12px;
  --card-shadow: 0 1px 4px rgba(0,0,0,0.06);
  --card-opacity: 1;
  --card-border: none;
  --card-border-color: #e8e8e8;
  --chart-title-color: #1a1a2e;
  --kpi-color: #3370FF;
  --kpi-label-color: #999;
  width: 1920px;
  background: var(--dash-bg);
  background-image: var(--dash-bg-gradient);
  box-sizing: border-box;
  overflow: visible;
  transform-origin: top left;
}
.dash-page {
  position: relative;
  width: 100%;
  min-height: 1080px;
  border-bottom: 2px dashed #e0e0e0;
  box-sizing: border-box;
  overflow: hidden;
}
.dash-page:last-child { border-bottom: none; }
.dash-page .chart-card {
  position: absolute;
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--sp-3);
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  border-color: var(--card-border-color);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
  overflow: hidden;
}
.dash-page .chart-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.dash-page .chart-card h4 {
  font-size: var(--text-base);
  margin: 0 0 8px;
  color: var(--chart-title-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
/* 图表容器撑满剩余空间（修复图表被裁切一半）— 排除 filter-card */
.dash-page .chart-card:not(.filter-card) > div {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}
.dash-page .chart-card.kpi-card {
  text-align: center;
  justify-content: center;
  align-items: center;
}
.dash-page .kpi-value {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--kpi-color);
}
.dash-page .kpi-label {
  font-size: var(--text-sm);
  color: var(--kpi-label-color);
  margin-top: var(--sp-1);
}
/* 页码导航 */
.dash-page-nav {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
  align-items: center;
}
.dash-page-nav .page-tab {
  padding: 6px 16px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: var(--bg-panel);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.15s;
}
.dash-page-nav .page-tab:hover { border-color: var(--primary); color: var(--primary); }
.dash-page-nav .page-tab.active { background: var(--primary); color: var(--c-text-white); border-color: var(--primary); }
.dash-page-nav .page-add {
  padding: var(--sp-1_5) var(--sp-3);
  border: 1px dashed var(--border-light);
  border-radius: 6px;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-hint);
  transition: all 0.15s;
}
.dash-page-nav .page-add:hover { border-color: var(--primary); color: var(--primary); }
.dash-page-nav .page-del {
  padding: var(--sp-1) var(--sp-2);
  border: none;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-disabled);
  margin-left: -2px;
}
.dash-page-nav .page-del:hover { color: var(--c-text-danger-bright); }
/* 编辑器内画布分页标签 */
.dash-page-label {
  position: absolute;
  top: 4px;
  left: 8px;
  font-size: 11px;
  color: var(--text-disabled);
  pointer-events: none;
  z-index: 1;
}

/* 保留旧的 dashboard-grid 用于兼容 */
.dashboard-grid {
  --dash-bg: #f4f6fa;
  --dash-bg-gradient: none;
  --card-bg: #ffffff;
  --card-radius: 16px;
  --card-shadow: 0 1px 4px rgba(0,0,0,0.06);
  --card-opacity: 1;
  --card-border: none;
  --card-border-color: #e8e8e8;
  --chart-title-color: #1a1a2e;
  --kpi-color: #3370FF;
  --kpi-label-color: #999;
  display: grid;
  grid-template-columns: repeat(var(--dash-cols, auto-fill), minmax(320px, 1fr));
  gap: var(--dash-gap, var(--sp-4));
  padding: var(--dash-gap, var(--sp-4));
  background: var(--dash-bg);
  background-image: var(--dash-bg-gradient);
  min-height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.dashboard-grid.has-title { padding-top: 8px; }
.dashboard-title {
  grid-column: 1/-1;
  font-size: 22px;
  font-weight: 700;
  color: var(--chart-title-color);
  padding: var(--sp-3) 0 4px;
}
.chart-card {
  background: var(--card-bg);
  border-radius: var(--card-radius);
  padding: var(--sp-3);
  box-shadow: var(--card-shadow);
  border: var(--card-border);
  border-color: var(--card-border-color);
  height: 320px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}
.chart-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-2px); }
.chart-card.kpi-card {
  height: 160px;
}
.chart-card h4 {
  font-size: var(--text-base);
  margin-bottom: var(--sp-2);
  color: var(--chart-title-color);
}
.kpi-card {
  text-align: center;
  padding: var(--sp-6);
}
.kpi-value {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--kpi-color);
}
.kpi-label {
  font-size: var(--text-sm);
  color: var(--kpi-label-color);
  margin-top: var(--sp-1);
}

/* 预设主题 */
.theme-deep-blue {
  --dash-bg: #0f172a;
  --dash-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #1a1a2e 100%);
  --card-bg: rgba(255,255,255,0.08);
  --card-shadow: 0 4px 24px rgba(0,0,0,0.3);
  --card-opacity: 1;
  --card-border: 1px solid rgba(255,255,255,0.1);
  --card-border-color: rgba(255,255,255,0.1);
  --chart-title-color: rgba(255,255,255,0.9);
  --kpi-color: #60a5fa;
  --kpi-label-color: rgba(255,255,255,0.5);
}
.theme-dark {
  --dash-bg: #111827;
  --dash-bg-gradient: linear-gradient(180deg, #111827 0%, #1f2937 100%);
  --card-bg: #1f2937;
  --card-shadow: 0 2px 12px rgba(0,0,0,0.4);
  --card-opacity: 1;
  --card-border: 1px solid #374151;
  --card-border-color: #374151;
  --chart-title-color: #e5e7eb;
  --kpi-color: #fbbf24;
  --kpi-label-color: #9ca3af;
}
.theme-warm {
  --dash-bg: #fff7ed;
  --dash-bg-gradient: linear-gradient(135deg, #fff7ed 0%, #fed7aa 50%, #ffedd5 100%);
  --card-bg: #ffffff;
  --card-shadow: 0 2px 12px rgba(234,88,12,0.08);
  --card-opacity: 1;
  --card-border: 1px solid rgba(234,88,12,0.1);
  --card-border-color: rgba(234,88,12,0.15);
  --chart-title-color: #9a3412;
  --kpi-color: #ea580c;
  --kpi-label-color: #c2410c;
}
.theme-aurora {
  --dash-bg: #ecfdf5;
  --dash-bg-gradient: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 30%, #cffafe 70%, #ede9fe 100%);
  --card-bg: rgba(255,255,255,0.7);
  --card-shadow: 0 2px 16px rgba(16,185,129,0.1);
  --card-opacity: 1;
  --card-border: 1px solid rgba(16,185,129,0.15);
  --card-border-color: rgba(16,185,129,0.15);
  --chart-title-color: #065f46;
  --kpi-color: #10b981;
  --kpi-label-color: #059669;
}


/* ============================================
   AI 咨询对话组件
   ============================================ */

/* 浮动按钮 */
#aiChatBtn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary-grad);
  color: var(--c-text-white);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(51,112,255,0.4);
  transition: all 0.3s;
  z-index: 9998;
  user-select: none;
}
#aiChatBtn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(51,112,255,0.55);
}
#aiChatBtn.active {
  transform: scale(0.92);
  opacity: 0.85;
}

/* 聊天面板 */
#aiChatPanel {
  position: fixed;
  bottom: 96px;
  right: 28px;
  width: 420px;
  height: 580px;
  max-height: calc(100vh - 130px);
  background: var(--c-bg-white);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#aiChatPanel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* 头部 */
.ai-chat-header {
  background: var(--primary-grad);
  color: var(--c-text-white);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.ai-chat-title {
  font-size: 15px;
  font-weight: 600;
}
.ai-chat-header-actions {
  display: flex;
  gap: var(--sp-1_5);
}
.ai-chat-header-actions button {
  background: rgba(255,255,255,0.2);
  border: none;
  color: var(--c-text-white);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.ai-chat-header-actions button:hover {
  background: rgba(255,255,255,0.35);
}

/* 消息区 */
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--c-bg-gray-150);
}

/* 消息气泡 */
.ai-msg {
  max-width: 88%;
  display: flex;
  flex-direction: column;
  animation: aiMsgEnter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes aiMsgEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.ai-msg-user {
  align-self: flex-end;
}
.ai-msg-bot {
  align-self: flex-start;
}
.ai-msg-content {
  padding: var(--sp-2_5) var(--sp-3_5);
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  word-break: break-word;
}
.ai-msg-user .ai-msg-content {
  background: var(--primary);
  color: var(--c-text-white);
  border-bottom-right-radius: 4px;
}
.ai-msg-bot .ai-msg-content {
  background: var(--c-bg-white);
  color: var(--text);
  border: 1px solid var(--border-light);
  border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-sm);
}

/* Skill 标签 */
.ai-msg-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  margin-top: var(--sp-1_5);
}
.ai-tool-tag {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.06));
  color: var(--primary);
  font-weight: 500;
  border: 1px solid rgba(102,126,234,0.15);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: aiToolTagIn 0.3s ease;
}
@keyframes aiToolTagIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* 快捷问题 */
.ai-chat-quick {
  padding: var(--sp-2) var(--sp-4) 12px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1_5);
  background: var(--c-bg-gray-150);
}
.ai-quick-btn {
  font-size: 12px;
  padding: 5px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--c-bg-white);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}
.ai-quick-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(102,126,234,0.12);
}
.ai-quick-btn:active {
  transform: translateY(0) scale(0.96);
  box-shadow: none;
}

/* 输入区 */
.ai-chat-input-area {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  background: var(--c-bg-white);
  flex-shrink: 0;
}
#aiChatInput {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--sp-2) var(--sp-3);
  font-size: 13.5px;
  line-height: 1.5;
  resize: none;
  outline: none;
  font-family: inherit;
  max-height: 100px;
  transition: border-color 0.2s;
}
#aiChatInput:focus {
  border-color: var(--primary);
}
#aiChatSend {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: var(--c-text-white);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
#aiChatSend:hover {
  background: var(--primary-dark);
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(102,126,234,0.3);
}
#aiChatSend:active {
  transform: scale(0.92);
}
#aiChatSend:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* 内容格式化 */
.ai-h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 10px 0 6px;
  color: var(--text);
}
.ai-h4 {
  font-size: 13px;
  font-weight: 600;
  margin: var(--sp-2) 0 4px;
  color: var(--text);
}
.ai-li {
  padding-left: 14px;
  position: relative;
  margin: 2px 0;
}
.ai-li::before {
  content: '•';
  position: absolute;
  left: 2px;
  color: var(--primary);
}
.ai-table {
  border-collapse: collapse;
  margin: var(--sp-2) 0;
  font-size: 12px;
  width: 100%;
}
.ai-table th, .ai-table td {
  border: 1px solid var(--border);
  padding: var(--sp-1) var(--sp-2);
  text-align: left;
}
.ai-table th {
  background: var(--bg-panel);
  font-weight: 600;
}
.ai-code {
  background: #1e1e2e;
  color: #cdd6f4;
  padding: var(--sp-2_5) var(--sp-3);
  border-radius: 8px;
  font-size: 12px;
  overflow-x: auto;
  margin: var(--sp-1_5) 0;
}
.ai-inline-code {
  background: var(--bg-panel);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--danger);
}

/* 加载动画 — AI 品牌化轨道脉冲 */
.ai-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px !important;
}
.ai-loading-orb {
  position: relative;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.ai-loading-orb::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--primary);
  border-right-color: var(--primary);
  animation: aiOrbitSpin 1s linear infinite;
}
.ai-loading-orb::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-bottom-color: #764ba2;
  border-left-color: #764ba2;
  animation: aiOrbitSpin 0.7s linear infinite reverse;
}
.ai-loading-orb-core {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  animation: aiCorePulse 1.4s ease-in-out infinite;
}
.ai-loading-text {
  font-size: 12px;
  color: var(--text-hint);
  animation: aiLoadTextFade 2s ease-in-out infinite;
}
@keyframes aiOrbitSpin {
  to { transform: rotate(360deg); }
}
@keyframes aiCorePulse {
  0%, 100% { transform: scale(0.8); opacity: 0.6; }
  50% { transform: scale(1.1); opacity: 1; }
}
@keyframes aiLoadTextFade {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* 兼容旧版 3-dot 结构 */
.ai-loading span { display: none; }

/* 流式回复光标 */
.ai-msg-content .ai-streaming-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--primary);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: aiCursorBlink 0.8s steps(2) infinite;
}
@keyframes aiCursorBlink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

/* 响应式 */
@media (max-width: 480px) {
  #aiChatPanel {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  #aiChatBtn {
    bottom: 16px;
    right: 16px;
  }
}

/* ========== 通用弹窗 ========== */
.script-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 2000; justify-content: center; align-items: center; }
.script-modal.active { display: flex; }
.script-modal-box { background: var(--bg-card); border-radius: var(--radius-xl); width: var(--modal-2xl); max-width: 98vw; height: 85vh; display: flex; flex-direction: column; box-shadow: var(--shadow-xl); animation: modalIn .25s ease; }
@keyframes modalIn { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.script-modal-header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3_5) var(--sp-5); border-bottom: 1px solid var(--border-light); }
.script-modal-header h3 { margin: 0; font-size: 17px; font-weight: 700; }
.script-modal-body { flex: 1; display: flex; overflow-y: auto; }
.script-modal-footer { padding: var(--sp-3_5) var(--sp-5); border-top: 1px solid var(--border-light); display: flex; justify-content: flex-end; gap: var(--sp-2_5); }

/* ============================================
   表单组件美化 — fm-* 命名空间
   搭建器预览 + 前台表单共用
   ============================================ */

/* 原生UI：组件容器 */
.fm-group {
  box-sizing: border-box;
  background: var(--c-bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
/* 前台运行时表单容器（_rebuildFormComponents 标记）：组件视觉与搭建器画布一致
   —— 透明化组件容器白底（内容自带样式），输入控件/按钮撑满组件高度，
      子表单高度贴合内容，避免容器高度大于内容时下方留出白块 */
.fm-runtime .fm-group {
  background: transparent;
  border: none;
  box-shadow: none;
}
.fm-runtime .fm-group > .fm-input,
.fm-runtime .fm-group > .fm-select,
.fm-runtime .fm-group > .fm-textarea {
  height: 100%;
  min-height: 36px;
  box-sizing: border-box;
}
.fm-runtime .fm-group > .fm-btn {
  min-height: 36px;
  box-sizing: border-box;
}
.fm-runtime .fm-group > .fm-subform-wrap {
  flex: none;
  align-self: flex-start;
  width: 100%;
}
.fm-runtime .fm-subform-wrap .sf-titlebar,
.fm-runtime .fm-subform-wrap .sf-table {
  width: 100%;
}
/* 搭建器画布：组件 wrapper 透明，fm-group 填满 wrapper */
.canvas-area .form-comp-wrapper {
  overflow: hidden;
  background: transparent !important;
}
.canvas-area .fm-group {
  height: 100% !important;
  box-sizing: border-box;
  pointer-events: none;
}
/* 子表单：fm-group 可交互（输入框可编辑） */
.canvas-area .subform-wrapper > .fm-group,
.canvas-area .input-editable > .fm-group {
  pointer-events: auto;
}
.canvas-area .fm-label {
  height: auto !important;
  min-height: 28px;
  flex-shrink: 0;
}
/* fm-group 的直接子 div（数字输入/条码/扫码枪的中间层）填满剩余高度 */
.canvas-area .fm-group > div:not(.fm-label):not(.fm-divider-wrap) {
  flex: 1 !important;
  min-height: 0;
}
/* 输入框填满父容器高度 */
.canvas-area .fm-input,
.canvas-area .fm-select {
  height: 100% !important;
  min-height: 36px;
}
.canvas-area .fm-textarea {
  height: 100% !important;
  min-height: 60px;
}
/* 按钮 */
.canvas-area .fm-btn {
  min-height: 36px;
}
/* 分割线 */
.canvas-area .fm-divider-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
}
.canvas-area .fm-divider-wrap hr {
  flex: 1;
  border-top-width: 2px;
  border-top-color: #ccc !important;
  margin: 0;
}
/* 仪表盘模式：组件背景透明，由卡片容器的rgba背景控制透明度 */
.dashboard-canvas .fm-group {
  background: transparent;
  border: none;
  box-shadow: none;
}
/* full 模式覆盖 */
.fm-group.fm-full {
  position: relative !important;
  width: 100% !important;
  margin-bottom: var(--sp-3_5);
}

/* 标签 */
.fm-label {
  display: block;
  font-weight: 500;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-panel);
  padding: var(--sp-1_5) var(--sp-2_5);
  margin-bottom: 0;
  line-height: 1.4;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  flex-shrink: 0;
}
.fm-req {
  color: var(--c-text-danger);
  margin-left: 1px;
}

/* 输入框 / 下拉框 / 文本域 — 和子表单统一 */
.fm-input,
.fm-select,
.fm-textarea {
  width: 100%;
  flex: 1;
  min-height: 0;
  height: 36px;
  padding: var(--sp-2) var(--sp-2_5);
  font-size: 13px;
  font-family: var(--font);
  color: var(--text);
  background: var(--c-bg-white);
  border: 1px solid var(--c-border-input);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fm-input:focus,
.fm-select:focus,
.fm-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(51,112,255,0.1);
}
.fm-input::placeholder,
.fm-textarea::placeholder {
  color: var(--text-hint);
}
.fm-textarea {
  min-height: 60px;
  resize: vertical;
  line-height: 1.5;
}

/* 下拉框 */
.fm-select {
  appearance: auto;
  -webkit-appearance: auto;
  cursor: default;
}
.fm-select[multiple] {
  padding: 2px 4px;
  min-height: 72px;
  overflow-y: auto;
}

/* 按钮 — 子表单添加行风格 */
.fm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2) var(--sp-5);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--bg-panel);
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.fm-btn:hover {
  background: var(--border-light);
}
.fm-btn-primary {
  background: var(--primary);
  color: var(--c-text-white);
}
.fm-btn-primary:hover {
  background: var(--primary-dark);
}
.fm-btn-cancel {
  background: var(--bg-panel);
  color: var(--text-secondary);
}
.fm-btn-cancel:hover {
  background: var(--border-light);
}
.fm-btn-scan {
  padding: 3px 8px;
  font-size: 13px;
  font-weight: 400;
  font-family: var(--font);
  background: var(--c-bg-gray-300);
  color: var(--c-text-black);
  border: 1px solid var(--c-border-form);
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.fm-btn-scan:hover {
  background: var(--c-border-strong);
}

/* 输入+按钮组合（条码/二维码） */
.fm-input-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.fm-input-row .fm-input {
  flex: 1;
}

/* 倒计时组件 */
.fm-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  min-height: 48px;
}
.fm-countdown-display {
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 28px;
  font-weight: 700;
  color: #3370FF;
  letter-spacing: 2px;
}
.fm-countdown-finished .fm-countdown-display {
  color: #ef4444;
}
.fm-countdown-finished {
  background: #fef2f2;
  border-color: #fca5a5;
}

/* 条码显示组件 */
.fm-barcode-display {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border: 1px dashed #d0d0d0;
  border-radius: 6px;
  padding: 8px;
}
.fm-barcode-display img,
.fm-barcode-display svg,
.fm-barcode-display canvas {
  max-width: 100%;
  height: auto;
}

/* 单选框/多选框 — Word 样式用 */
.fm-radio-group,
.fm-checkbox-group {
  display: flex;
  flex-wrap: wrap;
}
.fm-radio-item,
.fm-checkbox-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 2px 12px 2px 0;
  font-size: 14px;
  color: var(--c-text-black);
  cursor: pointer;
}
.fm-radio-item input[type="radio"],
.fm-checkbox-item input[type="checkbox"] {
  accent-color: var(--c-text-black);
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}

/* 上传组件 */
.fm-upload-zone {
  border: 1px solid var(--c-border-form);
  padding: var(--sp-2) var(--sp-3);
  text-align: center;
  cursor: pointer;
  background: var(--c-bg-white);
}
.fm-upload-zone:hover {
  background: var(--c-bg-gray-300);
}
.fm-upload-zone .fm-upload-icon {
  font-size: 18px;
  margin-bottom: 2px;
  display: block;
}
.fm-upload-zone .fm-upload-text {
  font-size: 13px;
  color: var(--c-text-black);
}
.fm-upload-zone .fm-upload-hint {
  font-size: 11px;
  color: var(--c-text-muted);
  margin-top: 2px;
}
.fm-upload-file-input {
  width: 100%;
  padding: 3px 4px;
  border: 1px solid var(--c-border-form);
  border-radius: 0;
  font-size: 13px;
  font-family: var(--font);
  box-sizing: border-box;
}
.fm-file-list {
  margin-top: 2px;
  font-size: 13px;
  color: var(--c-text-black);
}

/* 电子签名 */
.fm-sig-pad {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fm-sig-pad canvas {
  display: block;
  width: 100%;
  max-width: 100%;
}
.fm-sig-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.fm-btn-sm {
  padding: 4px 10px;
  background: #f5f5f5;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  color: #555;
}
.fm-btn-sm:hover {
  background: #e8e8e8;
}

/* 跨表取数 */
.fm-lookup-box {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 3px 4px;
  font-size: 13px;
  color: var(--c-text-black);
  background: var(--c-bg-white);
  border: 1px solid var(--c-border-form);
  border-radius: 0;
  box-sizing: border-box;
  min-height: 26px;
}
.fm-lookup-box .fm-lookup-placeholder {
  color: var(--c-text-muted);
  flex: 1;
}
.fm-lookup-box .fm-lookup-src {
  font-size: 11px;
  color: var(--c-text-muted);
  white-space: nowrap;
  margin-left: var(--sp-2);
}

/* 子表单 — 表格样式 */
.fm-subform-wrap {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-bg-white);
  flex: 1;
  border: 1px solid var(--c-border-light);
}
/* 搭建器预览表格 */
.sf-table-wrap {
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.sf-header-row .sf-th-cell {
  flex: 1;
  transition: background 0.15s;
  border-right: 1px solid var(--c-border-light);
}
.sf-header-row .sf-th-cell:last-child {
  border-right: none;
}
.sf-header-row .sf-th-cell:hover {
  background: #e8eaed;
}
.sf-header-row .sf-th-cell.selected {
  background: var(--c-bg-blue-100);
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.fm-subform-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 13px;
}
.fm-subform-table thead th {
  background: #e8eaed;
  padding: 6px 10px;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  color: #333;
  border: 1px solid #c0c0c0;
  position: relative;
  user-select: none;
}
.fm-subform-table thead th:last-child { border-right: 1px solid #c0c0c0; }
.fm-subform-table thead th .sf-resize-handle {
  position: absolute; right: -3px; top: 0; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 5; user-select: none;
}
.fm-subform-table thead th .sf-resize-handle:hover { background: rgba(74,144,217,0.2); }
.fm-subform-table.col-resizing { cursor: col-resize !important; user-select: none !important; }
.fm-subform-table.col-resizing * { cursor: col-resize !important; }
.fm-subform-table tbody td {
  padding: 4px 8px;
  border: 1px solid #c0c0c0;
  font-size: 12px;
}
.fm-subform-table tbody td:last-child { border-right: 1px solid #c0c0c0; }
.fm-subform-table tbody .fm-input,
.fm-subform-table tbody .fm-select {
  width: 100%;
  padding: 4px 6px;
  border: none;
  border-radius: 0;
  font-size: 12px;
  font-family: var(--font);
  box-sizing: border-box;
  outline: none;
  background: transparent;
}
.fm-subform-table tbody .fm-input:focus,
.fm-subform-table tbody .fm-select:focus {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  background: var(--c-bg-white);
}
.fm-subform-table .fm-sf-num {
  text-align: center;
  color: var(--c-text-muted);
  font-size: 12px;
  width: 36px;
}
.fm-subform-table .fm-sf-del {
  background: none;
  border: none;
  color: #f44;
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  width: 36px;
  text-align: center;
}
.fm-subform-table tfoot td {
  background: #f0f7ff;
  padding: 4px 8px;
  font-weight: 600;
  font-size: 12px;
  border: 1px solid #c0c0c0;
}
.fm-subform-add {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  font-size: 13px;
  color: var(--c-text-black);
  cursor: pointer;
  border-top: 1px solid var(--c-border-form);
  background: var(--c-bg-gray-300);
}
.fm-subform-add:hover {
  background: var(--c-border-strong);
}
.sf-group-header td {
  border-bottom: 1px solid #d0dff5 !important;
}
.sf-group-header:hover {
  background: #e4ecff !important;
}
/* 结构型子表单：层级行样式 */
.sf-level-toggle {
  color: #667eea;
  font-size: 10px;
}
.sf-level-toggle:hover {
  color: #4a6cf7;
}
.sf-level-summary {
  color: #667eea;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
}
.fm-subform-table tbody tr[data-level] {
  transition: background 0.15s;
}
.fm-subform-table tbody tr[data-level]:hover {
  background: #f8f9ff;
}

/* 搭建器子表头交互 */
.subform-wrapper .canvas-overlay {
  border-radius: 4px 4px 0 0;
}
.sf-col-cell {
  transition: background .15s, border-color .15s, box-shadow .15s;
  position: relative;
}
.sf-col-cell:hover {
  background: #f0f4ff !important;
}
.sf-col-cell.selected {
  background: #EBF1FF !important;
  box-shadow: inset 0 0 0 2px #667eea;
}
.sf-col-cell.dragging {
  opacity: 0.4;
}
.sf-col-remove {
  background: none;
  border: none;
  color: #d93025;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s;
}
.sf-col-cell:hover .sf-col-remove {
  opacity: 0.7;
}
.sf-col-remove:hover {
  opacity: 1 !important;
  color: #d93025 !important;
}
.sf-col-placeholder {
  border-left: 2px dashed #d0d0d0;
  transition: background .15s, border-color .15s;
}
.sf-col-placeholder.drag-hover {
  background: #EBF1FF !important;
  border-color: #667eea !important;
  color: #667eea !important;
}
/* 列宽拖拽把手 */
.sf-col-resize-handle {
  background: transparent;
  transition: background .15s;
}
.sf-col-resize-handle:hover {
  background: rgba(102,126,234,0.4);
}
.sf-col-cell:hover .sf-col-resize-handle {
  background: rgba(102,126,234,0.2);
}

/* 子表单列（组件卡片样式） */
.sf-col-cell.fm-group {
  flex: 1;
  border: 1px solid var(--c-border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-bg-white);
  min-height: 60px;
  transition: all 0.15s;
}
.sf-col-cell.fm-group:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  border-color: var(--c-border-form);
}
.sf-col-cell.fm-group.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(102,126,234,0.2);
}
.sf-col-cell .fm-label {
  background: #f5f6f7 !important;
  padding: 5px 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--c-border-light) !important;
  height: auto !important;
  min-height: 24px;
  color: var(--c-text-primary);
}
/* 输入区域 */
.sf-col-cell .sf-input-area {
  border: 1px dashed var(--c-border-light) !important;
  border-top: none !important;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  margin: 0 4px 4px 4px;
  transition: border-color 0.15s;
}
.sf-col-cell.fm-group:hover .sf-input-area {
  border-color: var(--c-border-form);
}
.sf-col-cell .fm-input {
  border: none !important;
  background: transparent !important;
  padding: 6px 8px !important;
  font-size: 12px !important;
  color: var(--c-text-muted) !important;
  outline: none !important;
  pointer-events: none;
}
/* 固定列（序号） */
.sf-col-cell.sf-fixed-col {
  background: var(--c-bg-panel);
}
.sf-col-cell.sf-fixed-col .fm-label {
  background: #e8eaed !important;
  font-size: 11px !important;
}
/* 拖拽把手 */
.sf-col-resize-handle:hover {
  background: rgba(102,126,234,0.3) !important;
}

/* 子表单标题栏 */
.sf-titlebar {
  border-bottom: 1px solid var(--c-border-light) !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: grab;
  user-select: none;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: var(--c-bg-panel) !important;
}

/* 搭建器表头行 */
.sf-header-row {
  border: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  min-height: 42px !important;
  pointer-events: auto;
  background: var(--c-bg-white) !important;
  transition: background .15s;
}

/* 列格子子元素 */
.sf-col-cell {
  border-right: 1px solid #d0d0d0;
  padding: 6px 8px;
  min-width: 40px;
  cursor: grab;
  background: #fff;
  user-select: none;
  overflow: hidden;
}
.sf-col-cell:last-child {
  border-right: none;
}
.sf-col-cell-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.sf-col-name-text {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-col-badge {
  display: inline-block;
  font-size: 9px;
  color: #fff;
  border-radius: 3px;
  padding: 1px 5px;
  line-height: 1.4;
}
/* 列宽拖拽把手位置 */
.sf-col-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 10;
}

/* 幽灵数据行（搭建器预览占位） */
.sf-ghost-row {
  border: 1px solid #e8e8e8;
  border-top: none;
  min-height: 32px;
  background: #fafbfc;
}
.sf-ghost-row:first-of-type {
  border-top: 1px solid #e8e8e8;
}
.sf-ghost-cell {
  padding: 6px 8px;
  border-right: 1px dashed #e0e0e0;
  min-width: 40px;
}
.sf-ghost-cell:last-child {
  border-right: none;
}
.sf-ghost-text {
  font-size: 11px;
  color: #bbb;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 文件链接 */
.fm-file-link-row {
  display: flex;
  align-items: center;
  gap: var(--sp-1_5);
}
.fm-file-link-row .fm-file-link-status {
  font-size: 13px;
  color: var(--c-text-muted);
}
.fm-file-link-badge {
  font-size: 11px;
  background: var(--c-bg-gray-300);
  color: var(--c-text-black);
  padding: 2px 6px;
  border: 1px solid var(--c-border-form);
  border-radius: 0;
  margin-left: auto;
}

/* 分割线 */
.fm-group:has(.fm-divider-wrap) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.fm-divider-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 2px 0;
}
.fm-divider-wrap hr {
  flex: 1;
  border: none;
  border-top: 1px solid var(--c-border-form);
  margin: 0;
}
.fm-divider-title {
  font-size: 13px;
  color: var(--c-text-muted);
  white-space: nowrap;
}

/* 图片 */
.fm-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border-form);
  border-radius: 0;
  color: var(--c-text-muted);
  font-size: 13px;
  min-height: 100px;
  background: var(--c-bg-white);
}

/* ===== Word 样式 ===== */
.fm-w-group {
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 44px;
  background: var(--c-bg-white);
  box-shadow: var(--shadow-sm);
}
.fm-w-group.fm-full {
  position: relative !important;
  width: 100% !important;
  margin-bottom: var(--sp-2_5);
}
.fm-w-label {
  flex-shrink: 0;
  width: 120px;
  padding: var(--sp-2_5) var(--sp-3_5);
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  border-right: 1px solid var(--border-light);
  background: var(--bg-panel);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  box-sizing: border-box;
}
.fm-w-input {
  flex: 1;
  padding: 0;
  display: flex;
  align-items: center;
  min-width: 0;
}
.fm-w-input .fm-input,
.fm-w-input .fm-select,
.fm-w-input .fm-textarea {
  border: none;
  border-radius: 0;
  background: var(--c-bg-white);
  height: 100%;
  min-height: 42px;
}
.fm-w-input .fm-input:focus,
.fm-w-input .fm-select:focus {
  box-shadow: none;
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
.fm-w-input .fm-input-row {
  width: 100%;
  padding: var(--sp-1) var(--sp-2_5);
  box-sizing: border-box;
}
.fm-w-input .fm-input-row .fm-input {
  border: none;
  background: transparent;
}
.fm-w-input .fm-btn-scan {
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 12px;
}
.fm-w-input .fm-radio-group,
.fm-w-input .fm-checkbox-group {
  padding: var(--sp-1_5) var(--sp-2_5);
}
.fm-w-input .fm-select {
  background-position: right 10px center;
}
.fm-w-btn-row {
  padding: 4px 0;
}
.fm-w-btn-row .fm-btn {
  border-radius: 0;
}
.fm-w-upload {
  flex: 1;
  padding: var(--sp-2) var(--sp-3);
}
.fm-w-upload .fm-label {
  margin-bottom: var(--sp-1);
  font-size: 12px;
}
.fm-w-divider {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0 12px;
}
.fm-w-divider hr {
  flex: 1;
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}
.fm-w-subform {
  flex: 1;
  padding: 2px;
}
.fm-w-subform .fm-subform-wrap {
  border: none;
}
.fm-w-subform .fm-subform-table thead th {
  background: var(--c-bg-gray-50);
  color: var(--c-text-primary);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.fm-w-subform .fm-subform-table tbody td {
  border-bottom: 1px solid var(--border-light);
}
.fm-w-subform .fm-subform-table tbody input {
  border: 1px solid var(--border);
  border-radius: 4px;
}
.fm-w-subform .fm-subform-table tbody input:focus {
  border-color: var(--primary);
  outline: none;
}
.fm-w-subform .fm-subform-table tfoot td {
  background: var(--c-bg-gray-50);
  color: var(--c-text-primary);
  font-weight: 600;
  border-top: 1px solid var(--border);
}
.fm-w-subform .fm-subform-add {
  background: var(--c-bg-gray-50);
  color: var(--c-text-primary);
  border-top: 1px solid var(--border);
  font-weight: 500;
}
.fm-w-subform .fm-subform-add:hover {
  background: var(--c-bg-gray-350);
}

/* 搭建器画布：组件内容禁止点击，由覆盖层处理 */
.builder-canvas-inner [data-form-container] > * {
  pointer-events: none;
}
/* 子表单 wrapper 可交互 */
.builder-canvas-inner [data-form-container] > .subform-wrapper {
  pointer-events: auto;
}
/* 组件 wrapper：圆角与 overlay 外圈一致，透明背景防止白框溢出 */
.form-comp-wrapper {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: transparent !important;
}
/* 手机模式：按钮组件不需要白底wrapper，直接显示按钮 */
.mobile-canvas .form-comp-wrapper > .fm-group > button {
  width: 100% !important;
  height: 100% !important;
}
.mobile-canvas .form-comp-wrapper > .fm-group {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 手机模式：组件字体继承wrapper */
.mobile-scaled .fm-label { font-size: inherit !important; }
.mobile-scaled .fm-input,
.mobile-scaled .fm-select,
.mobile-scaled .fm-textarea,
.mobile-scaled .fm-btn { font-size: inherit !important; }
.mobile-scaled .fm-group > div:not(.fm-label):not(.fm-input) { font-size: inherit !important; }

/* 交互覆盖层 */
.canvas-overlay {
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  transition: border-color 0.15s;
  pointer-events: auto;
  cursor: move;
}
.canvas-overlay:hover {
  border-color: rgba(99,102,241,0.35);
}
.canvas-overlay.selected {
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102,126,234,0.2);
}
/* 手机模式：选中时只显示淡蓝色外圈 */
.mobile-canvas .canvas-overlay.selected {
  box-shadow: 0 0 0 2px rgba(99,102,241,0.4);
  border-radius: 4px;
}
.mobile-canvas .canvas-overlay.selected .canvas-overlay-header {
  opacity: 0;
}
.mobile-canvas .canvas-overlay:hover .canvas-overlay-header {
  opacity: 0;
}

.canvas-overlay-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 3px 8px;
  background: var(--primary);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: 10px;
  color: var(--c-text-white);
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: auto;
  white-space: nowrap;
  gap: var(--sp-1_5);
  z-index: 1;
}
/* 隐藏覆盖层头部蓝条（全局，所有画布模式） */
.canvas-overlay-header {
  display: none !important;
}
/* 手机模式：子表单允许横向滚动 */
.mobile-canvas .subform-wrapper {
  overflow-x: auto !important;
  overflow-y: visible !important;
}
.mobile-canvas .subform-wrapper > .fm-group {
  min-width: max-content !important;
}
.canvas-overlay.selected .canvas-overlay-header,
.canvas-overlay:hover .canvas-overlay-header {
  opacity: 1;
}

.canvas-overlay-type {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 9px;
  background: rgba(255,255,255,0.2);
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.canvas-overlay-label {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.canvas-overlay-vis {
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1;
  margin: 0 2px;
  opacity: 0.85;
  cursor: default;
}
.canvas-overlay-vis-editable {
  cursor: pointer;
  transition: transform 0.15s ease;
}
.canvas-overlay-vis-editable:hover {
  opacity: 1;
  transform: scale(1.2);
}
.canvas-overlay-size {
  font-size: 9px;
  opacity: 0.7;
  flex-shrink: 0;
}
.canvas-overlay-remove {
  background: none;
  border: none;
  color: var(--c-text-white);
  cursor: pointer;
  font-size: 13px;
  padding: 0 3px;
  opacity: 0.7;
  flex-shrink: 0;
  line-height: 1;
}
.canvas-overlay-remove:hover {
  opacity: 1;
}

.canvas-overlay-resize {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 12px;
  height: 12px;
  background: var(--primary);
  border: 2px solid var(--c-text-white);
  border-radius: 3px;
  cursor: se-resize;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: auto;
}
.canvas-overlay.selected .canvas-overlay-resize,
.canvas-overlay:hover .canvas-overlay-resize {
  opacity: 1;
}

/* 侧栏组件着色 — 去掉彩色左边框，保持简洁 */
.component-item:hover {
  transform: none;
  box-shadow: none;
}

/* ========== 测试模式面板 ========== */
.dept-node {
  padding: var(--sp-1_5) var(--sp-2_5);
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
  transition: background 0.15s;
  user-select: none;
}
.dept-node:hover {
  background: var(--c-bg-blue-50);
}
.member-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2_5);
  padding: var(--sp-2) var(--sp-2_5);
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
  margin: 2px 0;
}
.member-item:hover {
  background: var(--c-bg-blue-50);
}
.member-item.active {
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
}
.member-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-grad);
  color: var(--c-text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.member-info {
  flex: 1;
  min-width: 0;
}
.member-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-role {
  font-size: 11px;
  color: var(--text-hint);
}
.temp-identity-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 13px;
  transition: background 0.15s;
  margin: 2px 0;
}
.temp-identity-item:hover {
  background: var(--c-bg-blue-50);
}
.temp-identity-item.active {
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
}
.dept-children {
  padding-left: 12px;
}

/* ===== 文件夹树 ===== */
.folder-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 5px 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--c-text-dark);
  border-radius: 4px;
  margin: 1px 4px;
  user-select: none;
  transition: background 0.12s;
}
.folder-item:hover { background: var(--c-bg-gray-250); }
.folder-item.selected { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.folder-item.drag-over { background: var(--info-light); outline: 2px dashed var(--c-action-blue); }
.folder-toggle { width: 16px; text-align: center; font-size: 14px; color: var(--text-hint); flex-shrink: 0; cursor: pointer; }
.folder-toggle.invisible { visibility: hidden; }
.folder-icon { font-size: 14px; flex-shrink: 0; }
.folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.folder-menu-btn {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-hint);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.12s;
}
.folder-item:hover .folder-menu-btn { opacity: 1; }
.folder-menu-btn:hover { background: var(--c-border-strong); color: var(--c-text-dark); }

/* 文件夹⋮下拉菜单 */
.folder-dropdown-menu {
  background: var(--c-bg-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  min-width: 160px;
  padding: 4px 0;
  overflow: hidden;
}
.folder-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3_5);
  cursor: pointer;
  font-size: 13px;
  color: var(--c-text-dark);
  transition: background 0.1s;
}
.folder-menu-item:hover { background: var(--c-bg-gray-250); }
.folder-menu-item.danger { color: var(--c-text-danger-vivid); }
.folder-menu-item.danger:hover { background: var(--danger-light); }
.fmi-icon { font-size: 13px; width: 16px; text-align: center; flex-shrink: 0; }
.fmi-label { white-space: nowrap; }

/* 侧边栏表单项 */
.folder-act-item {
  display: flex;
  align-items: center;
  gap: var(--sp-1_5);
  padding: 5px 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.12s;
  user-select: none;
}
.folder-act-item:hover { background: var(--primary-light); }
.folder-act-item.dragging { opacity: 0.4; }
.folder-act-icon { font-size: 13px; flex-shrink: 0; }
.folder-act-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-act-more {
  opacity: 0;
  cursor: pointer;
  color: var(--text-hint);
  font-size: 16px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.15s;
  flex-shrink: 0;
  line-height: 1;
}
.folder-act-item:hover .folder-act-more { opacity: 1; }
.folder-act-more:hover { background: var(--c-bg-gray-250); color: var(--text); }
.folder-act-status {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}
.folder-act-status.published { background: var(--success-light); color: var(--success); }
.folder-act-status.draft { background: var(--c-bg-gray-250); color: var(--text-hint); }

/* 测试模式版本徽章 */
.folder-act-version {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.folder-act-version:hover {
  background: var(--primary);
  color: #fff;
}

/* 测试模式表单列表选中状态 */
.folder-act-item.selected {
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 500;
}

/* 管理网格中的文件夹卡片 */
.folder-card {
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 100%);
  border: 1px solid #c2d7f0;
  border-radius: 10px;
  padding: var(--sp-4);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.12s;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-height: 100px;
}
.folder-card:hover { box-shadow: 0 4px 16px rgba(79,172,254,0.2); transform: translateY(-1px); }
.folder-card.dragging { opacity: 0.4; }
.folder-card.drag-over { outline: 2px dashed #4facfe; background: #e3f2fd; }
.fc-icon { font-size: 28px; }
.fc-name { font-size: 14px; font-weight: 600; color: #1a73e8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-actions { display: flex; gap: var(--sp-1_5); margin-top: auto; }

/* 侧边栏文件夹分组 */
.sidebar-folder {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1_5) var(--sp-2);
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  margin: 1px 4px;
  transition: background 0.12s;
}
.sidebar-folder:hover { background: var(--c-bg-gray-300); }
.sidebar-folder.drag-over { background: var(--info-light); outline: 2px dashed var(--c-action-blue); }
.sf-toggle { width: 16px; text-align: center; font-size: 14px; color: var(--text-hint); flex-shrink: 0; cursor: pointer; }
.sf-icon { font-size: 14px; flex-shrink: 0; }
.sf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* === 常用项 Favorites === */
.favorites-container {
  border: 1px solid #e0d5c0;
  border-radius: 8px;
  background: linear-gradient(180deg, #fffdf7 0%, #faf6ee 100%);
  margin: 4px 4px 8px 4px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.favorites-container .favorites-root {
  border: none; border-radius: 0; margin: 0;
  background: linear-gradient(135deg, #fef9ee, #fdf3d7);
  border-bottom: 1px solid #ece4d0;
  padding: 7px 10px;
  font-size: 13px;
}
.favorites-container .favorites-root:hover {
  background: linear-gradient(135deg, #fdf3d7, #f7e8b8);
}
.favorites-container .favorites-root .sf-icon { font-size: 15px; }
.favorites-container .fav-body { padding: 2px 0; }

.sidebar-folder.favorites-root {
  font-weight: 700;
  color: #d97706;
}
.sidebar-folder.favorites-root:hover {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
}
.sidebar-folder.favorites-root .sf-icon { font-size: 16px; }

/* 常用项子文件夹 */
.sidebar-folder.fav-subfolder {
  font-weight: 600;
  color: #6366f1;
  padding: var(--sp-1) var(--sp-2_5);
  font-size: 12.5px;
  margin: 0;
  border-radius: 0;
}
.sidebar-folder.fav-subfolder:hover { background: #eef2ff; }

/* 引用的文件夹（ ️标记） */
.sidebar-folder.ref-folder {
  font-weight: 500;
  color: #0ea5e9;
  font-style: italic;
  padding: var(--sp-1) var(--sp-2_5);
  font-size: 12.5px;
  margin: 0;
  border-radius: 0;
}
.sidebar-folder.ref-folder:hover { background: #e0f2fe; }

/* 引用的表单项 */
.fav-ref-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 0;
  margin: 0;
  transition: background 0.15s, box-shadow 0.15s;
  border-left: 3px solid transparent;
}
.fav-ref-item:hover { background: var(--c-bg-gray-300); }
.favorites-container .fav-body .fav-subfolder:hover,
.favorites-container .fav-body .ref-folder:hover {
  background: #f0edea;
  border-left-color: #d4a853;
}
.favorites-container .fav-body .fav-ref-item {
  transition: background 0.15s, border-left-color 0.15s;
}
.favorites-container .fav-body .fav-ref-item:hover {
  background: #f5f0e8;
  border-left-color: #e8b84a;
}
.favorites-container .fav-body .fav-ref-item.active {
  background: #fef3c7;
  border-left-color: #d97706;
  font-weight: 600;
  color: #92400e;
}
.favorites-container .fav-body .fav-subfolder,
.favorites-container .fav-body .ref-folder {
  transition: background 0.15s, border-left-color 0.15s;
  border-left: 3px solid transparent;
}

/* 常用项空态 */
.favorites-empty {
  padding: var(--sp-3) 10px;
  text-align: center;
  color: var(--text-disabled);
  font-size: 12px;
  font-style: italic;
}

/* 常用项右键菜单 */
.fav-context-menu {
  position: fixed;
  z-index: 9999;
  background: var(--c-bg-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 4px 0;
  min-width: 160px;
}
.fav-context-menu .fav-menu-item {
  padding: var(--sp-2) var(--sp-4);
  font-size: 13px;
  color: var(--c-text-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  transition: background 0.1s;
}
.fav-context-menu .fav-menu-item:hover { background: var(--c-bg-gray-250); }
.fav-context-menu .fav-menu-item.danger { color: var(--danger); }
.fav-context-menu .fav-menu-item.danger:hover { background: var(--danger-light); }
.fav-context-menu .fav-menu-sep { height: 1px; background: var(--border-light); margin: 4px 0; }

/* 常用项拖拽放置区高亮 */
.fav-drop-target.drag-over {
  background: var(--info-light);
  outline: 2px dashed var(--c-action-blue);
  border-radius: 4px;
}

/* 图表全屏 */
.chart-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  background: var(--c-bg-white) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  overflow: auto !important;
}
.chart-fullscreen .chart-export-toolbar { display: flex !important; }
.chart-fullscreen .chart-fullscreen-btn,
.chart-fullscreen .dashboard-fullscreen-btn { background: rgba(0,0,0,0.7) !important; }
.chart-fullscreen.dashboard-canvas { width: 1920px !important; transform: none !important; height: auto !important; margin: 0 auto !important; }
.chart-fullscreen .chart-card { min-height: 350px !important; }

/* ========== Admin Tabs ========== */
.admin-tabs { display: flex; gap: var(--sp-1); }
.admin-tabs .tab-btn { background: none; border: none; padding: var(--sp-2) var(--sp-4); font-size: var(--text-base); font-weight: 600; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-sm); transition: all 0.2s; }
.admin-tabs .tab-btn:hover { color: var(--primary); background: var(--primary-light); }
.admin-tabs .tab-btn.active { color: var(--primary); background: var(--primary-light); }

/* ========== Settings Page ========== */
.settings-container { max-width: 800px; margin: 0 auto; padding: 32px; }
.settings-section { background: var(--bg-card); border-radius: var(--radius-lg); padding: 28px; margin-bottom: var(--sp-6); box-shadow: var(--shadow-sm); border: 1px solid var(--border-light); }
.settings-section h3 { font-size: var(--text-lg); font-weight: 700; color: var(--text); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-light); }
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.setting-row label:first-child { font-size: var(--text-base); color: var(--text); font-weight: 500; min-width: 140px; }
.setting-input { flex: 1; max-width: 400px; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-base); font-family: var(--font-mono); transition: border-color 0.2s; }
.setting-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(51,112,255,0.1); }
.hint { font-size: var(--text-sm); color: var(--text-hint); margin: 0 0 12px; line-height: 1.5; }
.setting-actions { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; }
.save-msg { font-size: var(--text-sm); color: var(--success); transition: opacity 0.3s; }

/* ========== 系统设置 - 左 tab 布局 ========== */
.sys-settings-modal {
  width: 1100px; max-width: 96vw; height: 85vh;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
.sys-settings-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--border-light); flex-shrink: 0;
}
.sys-settings-header h3 { margin: 0; font-size: 18px; font-weight: 700; }
.sys-settings-header .btn-icon {
  background: none; border: none; font-size: 18px; cursor: pointer;
  color: var(--text-hint); padding: 4px 8px; border-radius: 4px;
}
.sys-settings-header .btn-icon:hover { background: var(--bg-panel); color: var(--text); }
.sys-settings-body {
  flex: 1; display: flex; overflow: hidden; min-height: 0;
}
.sys-settings-nav {
  width: 180px; flex-shrink: 0;
  border-right: 1px solid var(--border-light);
  background: var(--bg-panel);
  padding: 8px 0;
  overflow-y: auto;
}
.sys-settings-nav-item {
  padding: 12px 16px; font-size: 14px; cursor: pointer;
  transition: all .15s; border-left: 3px solid transparent;
  user-select: none; color: var(--text-secondary);
}
.sys-settings-nav-item:hover { background: var(--bg-card); color: var(--text); }
.sys-settings-nav-item.active {
  background: var(--bg-card); border-left-color: var(--primary);
  font-weight: 600; color: var(--primary);
}
.sys-settings-content {
  flex: 1; overflow-y: auto; padding: 24px 32px;
  background: var(--bg-card);
}
.sys-settings-panel { display: none; }
.sys-settings-panel h4 {
  margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--text);
}
.sys-hint {
  font-size: 13px; color: var(--text-hint); margin: 0 0 16px; line-height: 1.5;
}
.sys-settings-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 12px;
}
.sys-field { display: flex; flex-direction: column; gap: 6px; }
.sys-field label {
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
}
.sys-field input, .sys-field select {
  padding: 8px 12px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13px; outline: none;
  transition: border-color 0.2s; background: var(--bg-card); color: var(--text);
  font-family: var(--font-mono);
}
.sys-field input:focus, .sys-field select:focus {
  border-color: var(--primary); box-shadow: 0 0 0 2px rgba(102,126,234,0.1);
}
.sys-field .switch { align-self: flex-start; }
.sys-brand-theme-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  padding: 8px 0 4px;
}
.sys-brand-color-radio {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13px; color: var(--text);
}
.sys-brand-color-radio input { display: none; }
.sys-brand-color-dot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border);
  transition: box-shadow 0.15s, transform 0.15s;
}
.sys-brand-color-radio input:checked + .sys-brand-color-dot {
  border-color: var(--text); box-shadow: 0 0 0 2px var(--text);
  transform: scale(1.08);
}
.sys-brand-preview-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 8px; color: #fff;
  font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.sys-brand-preview-logo {
  width: 28px; height: 28px; border-radius: 6px; object-fit: cover;
  background: rgba(255,255,255,0.2);
}
.sys-brand-preview-name { font-weight: 600; }
.sys-brand-preview-spacer { flex: 1; }
.sys-brand-preview-user { opacity: 0.85; font-size: 13px; }
.sys-callback-box {
  margin-top: 16px; padding: 14px; background: var(--bg-panel);
  border-radius: 8px; border: 1px solid var(--border-light);
}
.sys-callback-title { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.sys-callback-url-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.sys-callback-input {
  flex: 1; background: var(--bg-card); font-family: var(--font-mono);
  font-size: 12px; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 4px;
}
.sys-callback-copy { white-space: nowrap; font-size: 12px; padding: 4px 10px; }
.sys-sync-actions { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sys-sync-full { background: #fff3e0 !important; border-color: #ff9800 !important; color: #e65100 !important; }
.sys-sync-status { margin-left: 8px; font-size: 13px; }
.sys-sync-result { font-size: 12px; color: var(--text-hint); margin-top: 4px; }
.sys-sync-members { margin-top: 8px; max-height: 200px; overflow-y: auto; }
.sys-api-generate { display: flex; gap: 8px; margin-bottom: 12px; }
.sys-api-generate input {
  flex: 1; padding: 8px 12px; border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13px; outline: none;
}
.sys-lang-msg {
  margin-top: 12px; font-size: 13px; color: var(--success); min-height: 18px;
}
.sys-settings-footer {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 24px; border-top: 1px solid var(--border-light);
  background: var(--bg-card); flex-shrink: 0;
}
.sys-settings-footer .save-msg { margin-left: auto; }

/* Toggle switch */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--border); border-radius: 24px; transition: 0.3s; }
.switch .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.switch input:checked + .slider { background: var(--primary); }
.switch input:checked + .slider:before { transform: translateX(20px); }

/* API Key result */
.new-key-result { background: var(--warning-light); border: 1px solid var(--warning); border-radius: var(--radius); padding: var(--sp-4); margin-top: var(--sp-3); }
.new-key-result p { margin: 0 0 8px; font-size: var(--text-sm); color: var(--warning); }
.key-display { display: flex; align-items: center; gap: var(--sp-2); background: var(--bg); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); }
.key-display code { font-family: var(--font-mono); font-size: var(--text-sm); word-break: break-all; flex: 1; color: var(--text); }

/* ========== 权限树样式 ========== */
.perm-node { position: relative; }

/* 分组标题行 */
.perm-group-header {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  margin: 2px 0;
  border-radius: 6px;
  background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);
  border-left: 3px solid #3370ff;
}
.perm-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.perm-group-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #3370ff;
  flex-shrink: 0;
}
.perm-group-icon { font-size: 14px; flex-shrink: 0; }
.perm-group-name { font-size: 13px; font-weight: 600; color: #1f2329; }

/* 分组子节点容器 */
.perm-group-children {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px dashed #d0d5dd;
}

/* 分支节点（有子节点但不是分组） */
.perm-branch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  margin: 1px 0;
  border-radius: 5px;
  background: #f8f9fb;
  gap: 8px;
}
.perm-branch-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.perm-branch-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #3370ff;
  flex-shrink: 0;
}
.perm-branch-name { font-size: 13px; font-weight: 500; color: #333; }
.perm-branch-children {
  margin-left: 8px;
  padding-left: 10px;
  border-left: 1px dashed #e0e3e8;
}

/* 叶子节点 */
.perm-leaf-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  margin: 1px 0;
  border-radius: 5px;
  gap: 8px;
  transition: background 0.15s;
}
.perm-leaf-row:hover { background: #f5f7fa; }
.perm-leaf-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}
.perm-leaf-label input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: #3370ff;
  flex-shrink: 0;
}
.perm-leaf-name { font-size: 13px; color: #4e5969; }

/* 范围配置按钮 */
.perm-scope-btn {
  flex-shrink: 0;
  padding: 2px 10px;
  font-size: 11px;
  border: 1px solid #dcdfe6;
  border-radius: 12px;
  background: #fff;
  color: #8f959e;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.perm-scope-btn:hover { border-color: #3370ff; color: #3370ff; background: #f0f4ff; }
.perm-scope-btn.configured {
  border-color: #3370ff;
  color: #3370ff;
  background: #f0f4ff;
  font-weight: 500;
}

/* 深度 0 分组特殊样式 */
.perm-depth-0 > .perm-group-header {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-left-color: #4f46e5;
  margin-top: 6px;
}
.perm-depth-0 > .perm-group-header .perm-group-name {
  font-size: 14px;
  font-weight: 700;
  color: #1e1b4b;
}

/* 权限树容器 */
.perm-tree-container {
  max-height: 55vh;
  overflow: auto;
  border: 1px solid #e5e7eb;
  padding: 10px 8px;
  border-radius: 8px;
  font-size: 13px;
  background: #fcfcfd;
  white-space: nowrap;
}
.perm-tree-container::-webkit-scrollbar { width: 6px; }
.perm-tree-container::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 3px; }
.perm-tree-container::-webkit-scrollbar-track { background: transparent; }
.perm-group-header, .perm-branch-row, .perm-leaf-row {
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.perm-group-name, .perm-branch-name, .perm-leaf-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.perm-scope-btn {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 11px;
  padding: 2px 6px;
}

/* ============================================
   UI 增强系统 — 骨架屏 / 空状态 / 增强Toast / 图标
   (2026-08-05 新增)
   ============================================ */

/* ========== 骨架屏 Skeleton ========== */
.skeleton {
  background: var(--skeleton-bg);
  border-radius: var(--radius-xs);
  position: relative;
  overflow: hidden;
}
.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, var(--skeleton-shine) 50%, transparent 100%);
  animation: skeleton-shine var(--skeleton-speed) infinite;
}
@keyframes skeleton-shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.skeleton-text { height: 14px; margin-bottom: var(--sp-2); }
.skeleton-text-sm { height: 12px; margin-bottom: var(--sp-1_5); }
.skeleton-text-lg { height: 20px; margin-bottom: var(--sp-3); width: 60%; }
.skeleton-title { height: 20px; margin-bottom: var(--sp-3); width: 40%; }
.skeleton-card { height: 120px; border-radius: var(--radius); }
.skeleton-chart { height: 250px; border-radius: var(--radius); }
.skeleton-avatar { width: 40px; height: 40px; border-radius: var(--radius-full); flex-shrink: 0; }
.skeleton-button { height: 36px; width: 100px; border-radius: var(--radius-sm); }
.skeleton-input { height: 36px; border-radius: var(--radius-sm); }
.skeleton-img { height: 160px; border-radius: var(--radius); }

/* 骨架屏布局容器 */
.skeleton-list { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-4); padding: var(--sp-4); }
.skeleton-card-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--border-light); border-radius: var(--radius); }
.skeleton-card-body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); }

/* ========== 空状态 Empty State ========== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
  min-height: 240px;
}
.empty-state-icon {
  width: 120px;
  height: 120px;
  margin-bottom: var(--sp-5);
  opacity: 0.8;
}
.empty-state-icon svg {
  width: 100%;
  height: 100%;
}
.empty-state-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-2);
}
.empty-state-desc {
  font-size: var(--text-base);
  color: var(--text-hint);
  max-width: 360px;
  line-height: 1.6;
  margin-bottom: var(--sp-5);
}
.empty-state-action {
  /* 放按钮 */
}

/* ========== 增强Toast ========== */
.toast { position: relative; overflow: hidden; }
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255,255,255,0.4);
  border-radius: 0 0 0 var(--radius);
  animation: toast-progress-shrink linear forwards;
}
@keyframes toast-progress-shrink {
  from { width: 100%; }
  to { width: 0%; }
}
.toast-close {
  position: absolute;
  top: 50%;
  right: var(--sp-2);
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  padding: var(--sp-1);
  font-size: var(--text-sm);
  line-height: 1;
  border-radius: var(--radius-xs);
  transition: var(--transition-fast);
}
.toast-close:hover {
  color: #fff;
  background: rgba(255,255,255,0.15);
}
.toast-has-close { padding-right: var(--sp-8); }

/* ========== 图标系统 ========== */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: middle;
}
.icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-xs { width: 14px; height: 14px; font-size: 14px; }
.icon-sm { width: 16px; height: 16px; font-size: 16px; }
.icon-md { width: 20px; height: 20px; font-size: 20px; }
.icon-lg { width: 24px; height: 24px; font-size: 24px; }
.icon-xl { width: 32px; height: 32px; font-size: 32px; }
.icon-2xl { width: 48px; height: 48px; font-size: 48px; }

/* ========== 上下文菜单 ========== */
.ctx-menu {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 160px;
  padding: var(--sp-1) 0;
  z-index: var(--z-modal);
  animation: ctxMenuIn 0.12s var(--ease-out);
}
@keyframes ctxMenuIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  color: var(--text);
  cursor: pointer;
  transition: var(--transition-fast);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.ctx-menu-item:hover {
  background: var(--primary-lighter);
  color: var(--primary);
}
.ctx-menu-item.danger {
  color: var(--danger);
}
.ctx-menu-item.danger:hover {
  background: var(--danger-light);
}
.ctx-menu-divider {
  height: 1px;
  background: var(--border-light);
  margin: var(--sp-1) 0;
}
.ctx-menu-item .icon {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

/* ========== 审批时间线 ========== */
.approval-timeline {
  position: relative;
  padding: var(--sp-2) 0;
}
.timeline-item {
  display: flex;
  gap: var(--sp-3);
  padding-bottom: var(--sp-5);
  position: relative;
  animation: timelineFadeIn 0.3s var(--ease-out) both;
}
@keyframes timelineFadeIn {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.timeline-item-last {
  padding-bottom: 0;
}
.timeline-line {
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: var(--border-light);
}
.timeline-item-last .timeline-line {
  display: none;
}
.timeline-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  border: 2px solid var(--bg-card);
  box-shadow: 0 0 0 2px var(--border-light);
}
.timeline-content {
  flex: 1;
  min-width: 0;
  background: var(--bg-panel);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-light);
}
.timeline-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.timeline-user {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--text);
}
.timeline-action {
  font-weight: 600;
  font-size: var(--text-sm);
}
.timeline-node {
  font-size: var(--text-xs);
  color: var(--text-hint);
  background: var(--bg-card);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
}
.timeline-comment {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--sp-1);
  padding: var(--sp-2);
  background: var(--bg-card);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
}
.timeline-time {
  font-size: var(--text-xs);
  color: var(--text-hint);
  margin-top: var(--sp-1);
}
.timeline-empty {
  text-align: center;
  padding: var(--sp-8);
  color: var(--text-hint);
}
.timeline-empty p {
  margin-top: var(--sp-2);
  font-size: var(--text-sm);
}


/* === 权限面板重设计 === */
.form-perm-config-col { overflow:hidden; background:#fafbfc; }
.fp-config-empty { display:flex; align-items:center; justify-content:center; flex:1; color:var(--text-hint); font-size:var(--text-sm) }
#fpConfigPanel { flex:1; padding:16px; overflow-y:auto; min-height:0; }

.fp-perm-section { margin-bottom:20px; background:#fff; border-radius:10px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.fp-section-header { display:flex; align-items:center; gap:8px; margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid #f0f1f4; }
.fp-section-icon { width:4px; height:16px; background:var(--primary); border-radius:2px; }
.fp-section-title { font-size:14px; font-weight:600; color:#1a1a1a; flex:1; }
.fp-matrix-actions { display:flex; gap:4px; }

.fp-op-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.fp-op-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; border:2px solid #e8eaed; border-radius:10px; cursor:pointer; transition:all 0.15s; background:#fff; user-select:none; }
.fp-op-card:hover { border-color:#c5c9d0; background:#f8f9fb; }
.fp-op-card input { position:absolute; opacity:0; pointer-events:none; }
.fp-op-card input:checked + .fp-op-icon { transform:scale(1.15); }
.fp-op-card input:checked ~ .fp-op-label { color:var(--primary); font-weight:600; }
.fp-op-card:has(input:checked) { border-color:var(--primary); background:#f0f4ff; }
.fp-op-icon { font-size:22px; line-height:1; transition:transform 0.15s; }
.fp-op-label { font-size:12px; color:#555; transition:all 0.15s; }
.fp-op-card-share { grid-column:span 2; }
.fp-op-card-share-ext { margin-top:-2px; }
.fp-op-card-share-ext .fp-op-label { font-size:11px; color:#888; }

.fp-matrix-wrap { border:1px solid #e8eaed; border-radius:8px; overflow-x:auto; background:#fff; }
.fp-matrix-table { width:100%; border-collapse:collapse; font-size:13px; }
.fp-matrix-table thead { background:#f8f9fb; position:sticky; top:0; z-index:2; }
.fp-matrix-table th { padding:10px 12px; text-align:left; font-weight:600; color:#666; font-size:12px; border-bottom:1px solid #e8eaed; white-space:nowrap; }
.fp-matrix-table th:nth-child(3), .fp-matrix-table th:nth-child(4) { text-align:center; width:60px; }
.fp-matrix-table th:nth-child(5) { width:180px; }
.fp-matrix-table td { padding:8px 12px; border-bottom:1px solid #f0f1f4; vertical-align:middle; }
.fp-matrix-table td:nth-child(3), .fp-matrix-table td:nth-child(4) { text-align:center; }
.fp-matrix-table tbody tr:hover { background:#f8f9fb; }
.fp-matrix-table tbody tr:last-child td { border-bottom:none; }

.fp-toggle { position:relative; display:inline-block; width:36px; height:20px; }
.fp-toggle input { opacity:0; width:0; height:0; }
.fp-toggle-slider { position:absolute; cursor:pointer; inset:0; background:#ddd; border-radius:20px; transition:0.2s; }
.fp-toggle-slider::before { content:''; position:absolute; height:16px; width:16px; left:2px; bottom:2px; background:#fff; border-radius:50%; transition:0.2s; box-shadow:0 1px 3px rgba(0,0,0,0.15); }
.fp-toggle input:checked + .fp-toggle-slider { background:var(--primary); }
.fp-toggle input:checked + .fp-toggle-slider::before { transform:translateX(16px); }

.fp-filter-cell { min-width:180px; }
.fp-filter-tags { display:flex; flex-wrap:wrap; gap:4px; align-items:center; min-height:28px; }
.fp-filter-tag { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; background:#e8f0fe; color:#1a73e8; border-radius:4px; font-size:11px; white-space:nowrap; }
.fp-filter-tag .rm { cursor:pointer; opacity:0.6; font-size:10px; }
.fp-filter-tag .rm:hover { opacity:1; }

/* 固定筛选（行形式） */
.fp-filter-cell { min-width:200px; padding:4px 0; }
.fp-filter-rows { display:flex; flex-direction:column; gap:4px; }
.fp-filter-row { display:flex; align-items:center; gap:4px; }
.fp-filter-select { padding:4px 6px; border:1px solid #ddd; border-radius:4px; font-size:11px; background:#fff; min-width:100px; }
.fp-filter-select:focus { outline:none; border-color:var(--primary); }
.fp-filter-input { padding:4px 6px; border:1px solid #ddd; border-radius:4px; font-size:11px; width:60px; }
.fp-filter-input:focus { outline:none; border-color:var(--primary); }
.fp-filter-rm { width:20px; height:20px; border:none; background:#f44336; color:#fff; border-radius:50%; cursor:pointer; font-size:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fp-filter-rm:hover { background:#d32f2f; }
.fp-filter-add { padding:4px 10px; border:1px dashed #ccc; border-radius:4px; background:transparent; cursor:pointer; color:#666; font-size:12px; white-space:nowrap; }
.fp-filter-add:hover { border-color:var(--primary); color:var(--primary); background:#f0f4ff; }
/* ============================================
   容器组件样式
   ============================================ */
.fm-container-box {
  border: 2px solid #e8e8e8;
  border-radius: 8px;
  background: #fafafa;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 60px;
}

.fm-container-box:hover {
  border-color: #3370FF;
  background: #f5f8ff;
  box-shadow: 0 2px 8px rgba(51,112,255,0.1);
}

.fm-container-box.selected {
  border-color: #3370FF;
  background: #ebf1ff;
  box-shadow: 0 0 0 2px rgba(51,112,255,0.2);
}

.fm-container-header {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #e8e8e8;
  background: #fff;
  border-radius: 6px 6px 0 0;
}

.fm-container-icon {
  font-size: 16px;
  margin-right: 8px;
}

.fm-container-title {
  font-weight: 600;
  font-size: 14px;
  color: #1f1f1f;
  flex: 1;
}

.fm-container-count {
  font-size: 12px;
  color: #666;
  background: #f0f0f0;
  padding: 2px 8px;
  border-radius: 10px;
}

.fm-container-preview {
  padding: 10px 14px;
  font-size: 12px;
  color: #666;
}

/* Tab 预览样式 */
.fm-tabs-preview {
  display: flex;
  gap: 4px;
  padding: 8px 0;
  border-bottom: 1px solid #e8e8e8;
}

.fm-tab-preview-item {
  padding: 6px 12px;
  border-radius: 4px;
  background: #f5f5f5;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.fm-tab-preview-item.active {
  background: #3370FF;
  color: #fff;
}

/* 浮窗中的子组件列表项 */
.container-child-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
  background: #fff;
  cursor: grab;
  transition: all 0.15s;
  gap: 10px;
}

.container-child-item:hover {
  border-color: #3370FF;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.container-child-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.container-child-icon {
  font-size: 16px;
  width: 24px;
  text-align: center;
}

.container-child-info {
  flex: 1;
  min-width: 0;
}

.container-child-label {
  font-weight: 500;
  font-size: 13px;
  color: #1f1f1f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.container-child-type {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
}

.container-child-actions {
  display: flex;
  gap: 4px;
}

.container-child-actions button {
  padding: 4px 8px;
  font-size: 11px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s;
}

.container-child-actions button:hover {
  background: #f5f5f5;
  border-color: #d9d9d9;
}

.container-child-actions .btn-danger:hover {
  background: #ff4d4f;
  color: #fff;
  border-color: #ff4d4f;
}

/* 浮窗底部按钮 */
.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-sm:hover {
  border-color: #3370FF;
  color: #3370FF;
  background: #f5f8ff;
}

/* 浮窗中的 Tab 栏 */
.container-modal-tab {
  padding: 6px 12px;
  border-radius: 4px;
  background: #f5f5f5;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  margin-right: 4px;
}

.container-modal-tab:hover {
  background: #e8e8e8;
}

.container-modal-tab.active {
  background: #3370FF;
  color: #fff;
}

/* ====== 网盘浏览器弹窗（openNetdiskBrowser 使用） ====== */
.aio-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  justify-content: center;
  align-items: flex-start;
  padding-top: 40px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}
.aio-modal[style*="display: flex"],
.aio-modal[style*="display:flex"] {
  /* 内联 display:flex 覆盖默认的 display:none */
}

.aio-modal-content {
  position: relative;
  background: #fff;
  border-radius: 12px;
  width: 90vw;
  max-width: 900px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  animation: aioModalSlideIn 0.25s ease-out;
}
@keyframes aioModalSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.aio-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafbfc;
}
.aio-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2329;
}
.aio-modal-header .aio-modal-close {
  background: none;
  border: none;
  font-size: 22px;
  color: #8f959e;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 4px;
}
.aio-modal-header .aio-modal-close:hover {
  background: #f0f1f4;
  color: #1f2329;
}

.aio-modal-body {
  flex: 1;
  overflow: auto;
  padding: 0;
}

.aio-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid #f0f0f0;
  background: #fafbfc;
}

/* 脚本编辑器 - 组件引用卡片 */
.script-comp-item {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  margin: 4px 0;
  border: 1px solid;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.script-comp-item:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}
.script-comp-item:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.script-comp-item b {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.script-comp-item .comp-key {
  font-size: 11px;
  font-family: 'Consolas', 'Monaco', monospace;
  margin-top: 2px;
  line-height: 1.3;
}