/* ============================================================
   ZeroCode 全局样式：简约商务 + 科技感（用户习惯第5条）
   表单/表格紧凑间距（用户习惯第13条）
   ============================================================ */
:root {
  --zc-primary: #2f6bff;
  --zc-primary-dark: #1e4fd8;
  --zc-primary-light: #eaf0ff;
  /* 工作区比卡片深一档，卡片与输入框靠边框区分，避免"到处灰白、看不到边界" */
  --zc-bg: #eef2f8;
  --zc-card: #ffffff;
  --zc-input-bg: #ffffff;
  --zc-surface-2: #f6f8fc;
  --zc-hover: #f0f4fa;
  --zc-line-soft: #e9eef6;
  --zc-text: #1f2733;
  --zc-text-sub: #647084;
  --zc-border: #d7dfec;
  --zc-radius: 10px;
  --zc-shadow: 0 1px 3px rgba(31, 45, 82, .07), 0 8px 22px rgba(31, 45, 82, .06);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--zc-bg);
  color: var(--zc-text);
  font-size: 14px;
}
a { color: var(--zc-primary); text-decoration: none; }

/* ---------- 登录 / 注册 ---------- */
.zc-auth {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0b1e4b 0%, #173a8f 45%, #2f6bff 100%);
  position: relative; overflow: hidden;
}
.zc-auth::before, .zc-auth::after {
  content: ""; position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .06);
}
.zc-auth::before { width: 480px; height: 480px; top: -160px; right: -120px; }
.zc-auth::after { width: 320px; height: 320px; bottom: -100px; left: -80px; }
.zc-auth-card {
  width: 400px; padding: 40px 44px 32px; background: #fff;
  border-radius: 16px; box-shadow: 0 18px 50px rgba(4, 18, 56, .35);
  position: relative; z-index: 1;
}
.zc-auth-brand { text-align: center; margin-bottom: 26px; }
.zc-auth-brand .zc-logo-big {
  font-size: 26px; font-weight: 700;
  background: linear-gradient(90deg, #1e4fd8, #2f6bff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.zc-auth-brand .zc-logo-sub { color: var(--zc-text-sub); font-size: 13px; margin-top: 6px; }
.zc-auth-card h2 { margin: 0 0 20px; font-size: 20px; text-align: center; }
.zc-auth-card .el-input, .zc-auth-card .el-button { margin-bottom: 14px; }
.zc-auth-tip { text-align: center; color: var(--zc-text-sub); font-size: 13px; margin-top: 6px; }

/* ---------- 应用外壳 ---------- */
.zc-shell { min-height: 100vh; display: flex; flex-direction: column; }
.zc-header {
  height: 56px; background: var(--zc-card); border-bottom: 1px solid var(--zc-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; position: sticky; top: 0; z-index: 100;
}
.zc-logo { font-size: 18px; font-weight: 700; color: var(--zc-primary-dark); }
.zc-logo span { font-size: 12px; color: var(--zc-text-sub); font-weight: 400; margin-left: 8px; }
.zc-header-right { display: flex; align-items: center; gap: 14px; }
.zc-tenant {
  font-size: 12px; color: var(--zc-primary-dark); background: var(--zc-primary-light);
  padding: 3px 10px; border-radius: 20px;
}
.zc-user { cursor: pointer; color: var(--zc-text); font-size: 14px; }
.zc-body { flex: 1; display: flex; }
.zc-nav {
  width: 180px; background: var(--zc-card); border-right: 1px solid var(--zc-border);
  padding: 14px 10px; display: flex; flex-direction: column; gap: 4px;
}
.zc-nav a {
  padding: 9px 14px; border-radius: 8px; color: var(--zc-text);
  font-size: 14px; display: flex; align-items: center; gap: 8px;
}
.zc-nav a:hover { background: var(--zc-bg); }
.zc-nav a.active { background: var(--zc-primary-light); color: var(--zc-primary-dark); font-weight: 600; }
.zc-main { flex: 1; padding: 18px 22px; overflow-x: auto; }

/* ---------- 页面通用 ---------- */
.zc-page-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;
}
.zc-page-head h2 { margin: 0; font-size: 18px; }
.zc-page-head .zc-sub { color: var(--zc-text-sub); font-size: 12px; margin-left: 10px; }
.zc-card {
  background: var(--zc-card); border-radius: var(--zc-radius);
  box-shadow: var(--zc-shadow); padding: 18px 20px;
}
.zc-placeholder {
  border: 1.5px dashed var(--zc-border); border-radius: var(--zc-radius);
  padding: 48px 20px; text-align: center; color: var(--zc-text-sub);
  background: repeating-linear-gradient(45deg, #fbfcfe, #fbfcfe 12px, #f7f9fd 12px, #f7f9fd 24px);
}
.zc-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.zc-toolbar .el-input { width: 220px; }

/* ---------- 租户设置 ---------- */
.zc-settings-info {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 16px;
}
.zc-tenant-title { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.zc-settings-meta { display: flex; gap: 18px; color: var(--zc-text-sub); font-size: 12px; margin-top: 8px; }
.zc-settings-info .zc-card { margin-bottom: 0; }

/* 紧凑表单（用户习惯第13条：行距收紧） */
.zc-compact .el-form-item { margin-bottom: 14px; }
.zc-compact .el-form-item__error { padding-top: 2px; }
.zc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

/* ---------- 工作台（M12 改版：浅灰底 + 白色分区卡片 + 应用磁贴） ---------- */
.zc-ws {
  margin: -18px -22px; padding: 20px 24px 28px; background: #f5f6f8;
  min-height: 100vh; box-sizing: border-box;
}
.zc-ws-card {
  background: var(--zc-card); border-radius: var(--zc-radius); box-shadow: var(--zc-shadow);
  padding: 18px 20px 22px; margin-bottom: 18px;
}
.zc-ws-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 16px; }
.zc-ws-title { font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.zc-ws-count { font-size: 12px; font-weight: 400; color: var(--zc-text-sub); }
.zc-ws-tools { display: flex; align-items: center; gap: 10px; }

/* 应用磁贴：图标在上、名称在下（简道云风格） */
.zc-app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.zc-app-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 18px 10px 14px; cursor: pointer; text-align: center;
  border: 1px solid transparent; border-radius: 10px; background: var(--zc-card);
  transition: background .15s, box-shadow .15s, transform .15s; position: relative;
}
.zc-app-card:hover { background: #f2f7ff; box-shadow: 0 6px 18px rgba(31,45,82,.10); border-color: var(--zc-primary-light); }
.zc-app-card .name { font-size: 13px; font-weight: 500; color: var(--zc-text); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-app-card-actions { position: absolute; top: 4px; right: 4px; opacity: 0; transition: opacity .15s; }
.zc-app-card:hover .zc-app-card-actions { opacity: 1; }
.zc-app-grid-sm { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.zc-app-grid-sm .zc-app-card { padding: 12px 8px 10px; gap: 6px; }

/* 应用图标（preset 线稿 / custom 图片 / emoji 旧数据回退） */
.zc-appicon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  line-height: 1; overflow: hidden; color: #fff; box-sizing: border-box;
}
.zc-appicon--custom { background: #fff; }
.zc-appicon--custom img { width: 100%; height: 100%; object-fit: cover; }

/* 图标选择器（系统图标：色板 + 18 款线稿；自定义图标：上传本地图片） */
.zc-iconpick-tabs { margin-top: 12px; }
.zc-iconpick-tabs .el-tabs__item { height: 34px; line-height: 34px; font-size: 13px; }
.zc-iconpick-colors { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.zc-iconpick-color {
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; box-shadow: 0 0 0 1px var(--zc-border) inset;
}
.zc-iconpick-color:hover { transform: scale(1.08); }
.zc-iconpick-color.active { border-color: #fff; box-shadow: 0 0 0 2px var(--zc-primary); }
.zc-iconpick-glyphs { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; padding-top: 4px; }
.zc-iconpick-glyph {
  display: flex; align-items: center; justify-content: center; padding: 4px;
  border: 1px solid transparent; border-radius: 10px; cursor: pointer;
}
.zc-iconpick-glyph:hover { background: #f2f7ff; }
.zc-iconpick-glyph.active { border-color: var(--zc-primary); background: var(--zc-primary-light); }
.zc-iconpick-upload { display: flex; align-items: center; gap: 16px; padding: 6px 0; }
.zc-iconpick-preview {
  width: 64px; height: 64px; border-radius: 12px; object-fit: cover;
  border: 1px solid var(--zc-border); background: #fff; flex: none;
}
.zc-iconpick-preview--empty {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--zc-text-sub); background: #fafbfc;
}
.zc-iconpick-btn {
  display: inline-flex; align-items: center; padding: 0 14px; height: 30px; cursor: pointer;
  border-radius: 6px; border: 1px solid var(--zc-border); background: #fff;
  font-size: 13px; color: var(--zc-text);
}
.zc-iconpick-btn:hover { border-color: var(--zc-primary); color: var(--zc-primary); }

/* 应用详情 */
.zc-detail-crumb { display: flex; align-items: center; gap: 14px; }
.zc-detail-app { font-size: 16px; font-weight: 600; }
.zc-detail-desc { color: var(--zc-text); font-size: 13px; margin-bottom: 10px; }

/* 图标选择器 */
.zc-icon-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.zc-icon-opt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; font-size: 18px; border-radius: 8px;
  border: 1px solid var(--zc-border); cursor: pointer; background: #fff;
}
.zc-icon-opt:hover { border-color: var(--zc-primary); }
.zc-icon-opt.active { border-color: var(--zc-primary); background: var(--zc-primary-light); }

/* 表格状态标签 */
.zc-tag-draft { color: #8a94a6; }
.zc-tag-pending { color: #e6a23c; }
.zc-tag-approved { color: #2f9e44; }
.zc-tag-rejected { color: #e05252; }

/* 滚动条美化 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #ccd4e0; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 表单设计器（M3） ---------- */
.zc-designer-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.zc-designer-body { display: flex; gap: 14px; align-items: flex-start; }

.zc-palette {
  width: 168px; flex-shrink: 0; background: var(--zc-card); border-radius: var(--zc-radius);
  box-shadow: var(--zc-shadow); padding: 12px; position: sticky; top: 18px;
}
.zc-palette-title, .zc-canvas-title, .zc-props-title {
  font-size: 12px; color: var(--zc-text-sub); margin-bottom: 10px;
}
.zc-palette-item {
  padding: 7px 10px; border: 1px solid var(--zc-border); border-radius: 8px;
  margin-bottom: 7px; cursor: grab; font-size: 13px;
  display: flex; gap: 8px; align-items: center; user-select: none;
}
.zc-palette-item:hover {
  border-color: var(--zc-primary); color: var(--zc-primary-dark); background: var(--zc-primary-light);
}
.zc-palette-item:active { cursor: grabbing; }
.zc-palette-item .ic { font-size: 15px; }

.zc-canvas {
  flex: 1; min-width: 0; background: var(--zc-card); border-radius: var(--zc-radius);
  box-shadow: var(--zc-shadow); padding: 16px 20px; min-height: 520px;
}
.zc-canvas-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 18px; }
.zc-canvas-grid > .is-w3 { grid-column: span 3; }
.zc-canvas-grid > .is-w4 { grid-column: span 4; }
.zc-canvas-grid > .is-w6 { grid-column: span 6; }
.zc-canvas-grid > .is-w8 { grid-column: span 8; }
.zc-canvas-grid > .is-w9 { grid-column: span 9; }
.zc-canvas-grid > .is-w12 { grid-column: span 12; }
.zc-canvas-field.is-full { grid-column: span 12; }
.zc-canvas-field {
  position: relative; border: 1px dashed transparent; border-radius: 8px;
  padding: 6px 10px 2px; cursor: pointer;
}
.zc-canvas-field:hover { border-color: var(--zc-border); background: #fafbfe; }
.zc-canvas-field.active { border-color: var(--zc-primary); background: var(--zc-primary-light); }
.zc-canvas-field-ops {
  position: absolute; top: 4px; right: 8px; opacity: 0; transition: opacity .15s;
  background: rgba(255, 255, 255, .9); border-radius: 6px; z-index: 2;
}
.zc-canvas-field:hover .zc-canvas-field-ops,
.zc-canvas-field.active .zc-canvas-field-ops { opacity: 1; }
/* 预览控件 disabled 时不派发 click，蒙层负责捕获点击选中字段 */
.zc-canvas-field-mask { position: absolute; inset: 0; border-radius: 8px; z-index: 1; }
/* M49：子表单渲染宿主（包裹 field-render）。z-index:2 压在蒙层之上，
   让子表单横向滚动条能收到原生 mousedown；非子表单不抬升，行为不变。 */
.zc-fr-host { position: relative; }
.zc-fr-host-sf { z-index: 2; }

.zc-props {
  width: 300px; flex-shrink: 0; background: var(--zc-card); border-radius: var(--zc-radius);
  box-shadow: var(--zc-shadow); padding: 14px 16px; position: sticky; top: 18px;
  max-height: calc(100vh - 110px); overflow-y: auto;
}
.zc-props-empty { color: var(--zc-text-sub); text-align: center; padding-top: 80px; }
.zc-opt-row { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.zc-link-hint { color: var(--zc-text-sub); font-size: 13px; line-height: 40px; }

/* 数据录入等场景共用的两列紧凑栅格（M9 起为 12 列，支持 1/4~整行六档宽度） */
.zc-form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 18px; }
.zc-form-grid > .is-w3 { grid-column: span 3; }
.zc-form-grid > .is-w4 { grid-column: span 4; }
.zc-form-grid > .is-w6 { grid-column: span 6; }
.zc-form-grid > .is-w8 { grid-column: span 8; }
.zc-form-grid > .is-w9 { grid-column: span 9; }
.zc-form-grid > .is-w12 { grid-column: span 12; }
.zc-form-grid .is-full { grid-column: span 12; }

/* ---------- 仪表盘（M6） ---------- */
.zc-stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 16px; }
.zc-stat-card {
  background: var(--zc-card); border-radius: var(--zc-radius); box-shadow: var(--zc-shadow);
  padding: 16px 20px; border-left: 3px solid var(--zc-primary);
}
.zc-stat-label { color: var(--zc-text-sub); font-size: 12px; }
.zc-stat-value { font-size: 28px; font-weight: 700; margin-top: 6px; color: var(--zc-text); }
.zc-stat-today { color: var(--zc-primary-dark); }
.zc-chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.zc-chart-card { padding: 14px 16px 8px; }
.zc-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.zc-chart-title { font-weight: 600; font-size: 14px; }
.zc-chart { height: 260px; }

/* ---------- 权限设置（M6） ---------- */
.zc-perm-list { display: flex; flex-direction: column; gap: 6px; }
.zc-perm-item { line-height: 26px; }

/* ---------- 流水号（M8/M9） ---------- */
.zc-serial-preview {
  display: inline-block; font-family: Consolas, Monaco, monospace; font-size: 13px;
  color: var(--zc-primary-dark); background: var(--zc-primary-light);
  border-radius: 6px; padding: 4px 10px; letter-spacing: .5px;
}
.zc-serial-rules { border: 1px solid var(--zc-border); border-radius: 8px; padding: 6px 10px; }
.zc-serial-rules-empty { color: var(--zc-text-sub); font-size: 12px; padding: 10px 0; text-align: center; }
.zc-serial-rule { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.zc-serial-rule + .zc-serial-rule { border-top: 1px dashed var(--zc-border); }
.zc-serial-rule-drag { cursor: grab; color: #b6c0d0; padding: 0 2px; user-select: none; font-size: 13px; }
.zc-serial-rule-drag:active { cursor: grabbing; }
.zc-serial-rule-type { width: 62px; font-size: 12px; color: var(--zc-text-sub); flex-shrink: 0; }
.zc-serial-rule-val { flex: 1; display: flex; gap: 6px; align-items: center; min-width: 0; }
.zc-serial-reset { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- 扫码输入（M11） ---------- */
.zc-scan-err { padding: 12px; border-radius: 6px; background: #fdf6ec; color: #b88230; font-size: 13px; line-height: 1.6; }

/* ---------- 分割线字段（M10）：8 种预设风格，标题/线条独立配色 ----------
   颜色经 CSS 变量注入：--dv-t = 标题颜色，--dv-l = 线条颜色 */
.zc-dv-item > .el-form-item__label { display: none; }   /* 分割线自身即标题，隐藏外层 label */
.zc-dv { display: flex; align-items: center; gap: 8px; width: 100%; padding: 3px 0; }
.zc-dv-title {
  font-weight: 600; font-size: 14px; line-height: 22px;
  color: var(--dv-t, #409eff); white-space: nowrap;
}
.zc-dv-line { position: relative; flex: 1; align-self: center; min-width: 20px; }

/* 1. bar 色条标题：标题在上，下方粗横条（左实右淡） */
.zc-dv--bar { flex-direction: column; align-items: stretch; gap: 5px; }
.zc-dv--bar .zc-dv-line { height: 6px; flex: none; align-self: stretch; border-radius: 2px; overflow: hidden; }
.zc-dv--bar .zc-dv-line::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 28%;
  background: var(--dv-l, #409eff);
}
.zc-dv--bar .zc-dv-line::after {
  content: ''; position: absolute; left: 28%; right: 0; top: 0; bottom: 0;
  background: var(--dv-l, #409eff); opacity: .16;
}

/* 2. left 左竖条：左侧竖色条 + 标题 + 细基线 */
.zc-dv--left .zc-dv-title { position: relative; padding-left: 13px; }
.zc-dv--left .zc-dv-title::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 16px; border-radius: 2px; background: var(--dv-l, #409eff);
}
.zc-dv--left .zc-dv-line { height: 1px; background: var(--dv-l, #409eff); opacity: .25; }

/* 3. gradient 渐变粗线：标题在上，由实到淡的渐变横线 */
.zc-dv--gradient { flex-direction: column; align-items: stretch; gap: 5px; }
.zc-dv--gradient .zc-dv-line {
  height: 8px; flex: none; align-self: stretch; border-radius: 2px;
  background: linear-gradient(90deg, var(--dv-l, #409eff) 0%, var(--dv-l, #409eff) 32%, transparent 100%);
}

/* 4. corner 折角：标题带左侧竖边 + 底部横边（L 形） */
.zc-dv--corner .zc-dv-title {
  border-left: 4px solid var(--dv-l, #409eff); border-bottom: 3px solid var(--dv-l, #409eff);
  padding: 2px 16px 4px 9px;
}
.zc-dv--corner .zc-dv-line { height: 1px; background: var(--dv-l, #409eff); opacity: .3; }

/* 5. arrow 箭头：▸ 标题 + 带箭头的细线 */
.zc-dv--arrow .zc-dv-title::before { content: '▸ '; color: var(--dv-l, #409eff); }
.zc-dv--arrow .zc-dv-line { height: 2px; background: var(--dv-l, #409eff); opacity: .4; }
.zc-dv--arrow .zc-dv-line::after {
  content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%) rotate(45deg);
  width: 7px; height: 7px; border-top: 2px solid var(--dv-l, #409eff); border-right: 2px solid var(--dv-l, #409eff);
  opacity: .75;
}

/* 6. chevron 书名号：« 标题 » 居中 */
.zc-dv--chevron { justify-content: center; }
.zc-dv--chevron .zc-dv-title::before { content: '\00AB\00A0\00A0'; color: var(--dv-l, #409eff); }
.zc-dv--chevron .zc-dv-title::after { content: '\00A0\00A0\00BB'; color: var(--dv-l, #409eff); }
.zc-dv--chevron .zc-dv-line { display: none; }

/* 7. bracket 下划框：标题置于带底边的框内 */
.zc-dv--bracket .zc-dv-title {
  border: 1px solid var(--dv-l, #409eff); border-bottom: 3px solid var(--dv-l, #409eff);
  border-radius: 3px 3px 0 0; padding: 3px 16px;
}
.zc-dv--bracket .zc-dv-line { height: 1px; background: var(--dv-l, #409eff); opacity: .3; }

/* 8. minimal 极简线：标题 + 1px 细线 */
.zc-dv--minimal .zc-dv-line { height: 1px; background: var(--dv-l, #409eff); opacity: .5; }

/* 设计器里的风格选择卡片（迷你预览） */
.zc-dv-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.zc-dv-preset {
  border: 1px solid var(--zc-border); border-radius: 6px; padding: 9px 10px 6px;
  cursor: pointer; background: var(--zc-card); transition: border-color .15s, box-shadow .15s;
}
.zc-dv-preset:hover { border-color: var(--zc-primary); }
.zc-dv-preset.active { border-color: var(--zc-primary); box-shadow: 0 0 0 1px var(--zc-primary) inset; }
.zc-dv-preset .zc-dv { pointer-events: none; padding: 1px 0; }
.zc-dv-preset .zc-dv-title { font-size: 12px; line-height: 18px; }
.zc-dv-preset-name { display: block; margin-top: 7px; font-size: 11px; color: var(--zc-text-sub); text-align: center; }
.zc-dv-colors { display: flex; gap: 18px; align-items: center; }

/* ---------- 数据管理（M4） ---------- */
.zc-data-head { display: flex; align-items: center; gap: 12px; }
.zc-pager { display: flex; justify-content: flex-end; margin-top: 14px; }
.zc-link-row { display: flex; gap: 8px; align-items: center; width: 100%; }

/* ---------- 工作流（M5） ---------- */
.zc-wf-list { display: flex; flex-direction: column; gap: 10px; }
.zc-wf-item {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border: 1px solid var(--zc-border); border-radius: 10px;
}
.zc-wf-item:hover { border-color: var(--zc-primary-light); }
.zc-wf-item-main { flex: 1; min-width: 0; }
.zc-wf-item-title { font-weight: 600; }
.zc-wf-item-meta { color: var(--zc-text-sub); font-size: 12px; margin-top: 4px; }
.zc-wf-item-ops { display: flex; gap: 8px; align-items: flex-start; flex-shrink: 0; }
.zc-wf-timeline { margin-top: 10px; padding-left: 2px; }
.zc-wf-tip {
  color: var(--zc-text-sub); font-size: 12px; line-height: 1.6;
  background: var(--zc-primary-light); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px;
}

/* ---------- SaaS 总后台（M13） ---------- */
.zc-pf { margin: -18px -22px; padding: 20px 24px 28px; background: #f5f6f8; min-height: 100vh; box-sizing: border-box; }
.zc-pf-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 16px; }
.zc-pf-head h2 { margin: 0; font-size: 19px; }
.zc-pf-sub { margin: 6px 0 0; color: var(--zc-text-sub); font-size: 13px; }
.zc-pf-tabs .el-tabs__item { font-size: 14px; }
.zc-pf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; margin-bottom: 16px; }
.zc-pf-kpi { background: var(--zc-card); border-radius: var(--zc-radius); box-shadow: var(--zc-shadow); padding: 16px 18px; }
.zc-pf-kpi-val { font-size: 24px; font-weight: 700; line-height: 1.2; }
.zc-pf-kpi-label { color: var(--zc-text-sub); font-size: 12px; margin-top: 6px; }
.zc-pf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.zc-pf-card { background: var(--zc-card); border-radius: var(--zc-radius); box-shadow: var(--zc-shadow); padding: 16px 18px; }
.zc-pf-card-title { font-weight: 600; margin-bottom: 12px; font-size: 15px; }
.zc-pf-pie { height: 260px; width: 100%; }
.zc-pf-alerts { display: flex; flex-direction: column; gap: 10px; max-height: 260px; overflow: auto; }
.zc-pf-alert { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--zc-border); border-radius: 10px; padding: 10px 12px; }
.zc-pf-alert-name { font-weight: 600; }
.zc-pf-alert-plan { color: var(--zc-text-sub); font-size: 12px; }
.zc-pf-alert-tags { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.zc-pf-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.zc-pf-bar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.zc-pf-bar-tip { color: var(--zc-text-sub); font-size: 12px; }
.zc-pf-sec { font-weight: 600; margin: 16px 0 10px; font-size: 14px; }
.zc-pf-muted { color: var(--zc-text-sub); }
.zc-pf-danger { color: var(--zc-danger, #f56c6c); font-weight: 600; }
.zc-pf-ok { color: #67c23a; font-size: 12px; }
.zc-pf-table .el-table__row td { vertical-align: middle; }
.zc-pf-tname { font-weight: 600; }
.zc-pf-tmeta { color: var(--zc-text-sub); font-size: 12px; margin-top: 2px; }
.zc-pf-usage { font-size: 12px; color: var(--zc-text-sub); line-height: 1.7; }

/* 套餐卡片 */
.zc-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.zc-plan-card {
  background: var(--zc-card); border-radius: var(--zc-radius); box-shadow: var(--zc-shadow);
  padding: 18px; border: 1px solid transparent; display: flex; flex-direction: column;
}
.zc-plan-card:hover { border-color: var(--zc-primary-light); }
.zc-plan-card.is-off { opacity: .6; }
.zc-plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.zc-plan-name { font-size: 16px; font-weight: 700; }
.zc-plan-price { color: #f97316; font-weight: 600; }
.zc-plan-code { color: var(--zc-text-sub); font-size: 12px; margin: 6px 0 10px; }
.zc-plan-desc { color: var(--zc-text-sub); font-size: 13px; min-height: 34px; line-height: 1.6; }
.zc-plan-sec { font-size: 12px; font-weight: 600; color: var(--zc-text-sub); margin: 10px 0 6px; }
.zc-plan-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.zc-plan-ops { display: flex; gap: 14px; margin-top: 14px; border-top: 1px dashed var(--zc-border); padding-top: 10px; }

/* 选套餐 / 配额设置 */
.zc-plan-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.zc-plan-pick-item { border: 1px solid var(--zc-border); border-radius: 10px; padding: 12px; cursor: pointer; transition: .15s; }
.zc-plan-pick-item:hover { border-color: var(--zc-primary-light); }
.zc-plan-pick-item.active { border-color: var(--zc-primary); background: var(--zc-primary-light); box-shadow: 0 0 0 2px rgba(64,158,255,.15); }
.zc-plan-pick-name { font-weight: 600; }
.zc-plan-pick-price { color: #f97316; font-size: 13px; margin: 4px 0; }
.zc-plan-pick-rec { color: var(--zc-text-sub); font-size: 12px; }
.zc-pf-featgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.zc-pf-featrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--zc-border); border-radius: 10px; padding: 8px 12px; }
.zc-pf-featname { font-size: 13px; }
.zc-pf-feat { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--zc-border); border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; font-size: 13px; }
@media (max-width: 1100px) { .zc-pf-cols { grid-template-columns: 1fr; } }

/* ============================================================
   M14-a 应用内工作区（左侧导航区 + 主内容区）
   ============================================================ */
.zc-app-ws { display: flex; align-items: stretch; min-height: calc(100vh - 52px); background: var(--zc-bg); }
.zc-app-main { flex: 1; min-width: 0; }

.zc-side {
  position: relative; flex: none; background: var(--zc-card); border-right: 1px solid var(--zc-border);
  display: flex; flex-direction: column; gap: 12px; padding: 14px 10px 10px;
}
.zc-side-app { display: flex; align-items: center; gap: 10px; padding: 2px 6px 8px; }
.zc-side-app-main { min-width: 0; }
.zc-side-app-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zc-side-back { font-size: 12px; color: var(--zc-text-sub); text-decoration: none; }
.zc-side-back:hover { color: var(--zc-primary); }
.zc-side-group { display: flex; flex-direction: column; gap: 2px; }
.zc-side-label {
  font-size: 12px; color: #98a2b3; padding: 6px 10px 4px;
  display: flex; align-items: center; justify-content: space-between;
}
.zc-side-add { cursor: pointer; color: var(--zc-primary); font-size: 15px; font-weight: 700; line-height: 1; }
.zc-side-item {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 8px;
  font-size: 13px; color: #3f4a5a; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zc-side-item:hover { background: var(--zc-hover); }
.zc-side-item.active { background: var(--zc-primary-light); color: var(--zc-primary); font-weight: 600; }
.zc-side-ico { font-size: 11px; opacity: .6; }
.zc-side-forms { flex: 1; overflow-y: auto; min-height: 60px; }
.zc-side-empty { font-size: 12px; color: #98a2b3; padding: 6px 10px; }
.zc-side-design { color: var(--zc-text-sub); font-size: 12px; margin-top: 4px; }
.zc-side-foot { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid #eef1f6; padding-top: 8px; }
.zc-side-admin { font-size: 13px; padding: 7px 10px; border-radius: 8px; color: #3f4a5a; text-decoration: none; }
.zc-side-admin:hover { background: var(--zc-hover); }
.zc-side-drag { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 5; }
.zc-side-drag:hover { background: var(--zc-primary-light); }
body.zc-resizing { cursor: col-resize; user-select: none; }

.zc-form-title { font-weight: 600; font-size: 15px; }
.zc-sum-cell { color: var(--zc-primary); font-weight: 600; cursor: pointer; }

/* 导入预览 */
.zc-import-info { font-size: 12px; color: var(--zc-text-sub); margin: 10px 0; line-height: 1.9; }
.zc-import-info b { color: var(--zc-text); }
.zc-import-tag {
  display: inline-block; padding: 0 6px; margin: 0 4px 4px 0; border-radius: 4px;
  background: #eef7ee; color: #2f9e44; font-size: 12px;
}
.zc-import-tag.bad { background: #fdeeee; color: #d14343; }
.zc-import-warn { color: #d14343; }

/* ============================================================
   M14 管理后台：智能助手列表
   ============================================================ */
.zc-admin-tabs .el-tabs__header { margin-bottom: 12px; }
.zc-admin-title { font-weight: 600; font-size: 15px; }
.zc-auto-list { display: flex; flex-direction: column; gap: 10px; }
.zc-auto-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--zc-border); border-radius: 10px; padding: 12px 14px; background: #fff;
}
.zc-auto-card:hover { border-color: var(--zc-primary-light); box-shadow: var(--zc-shadow); }
.zc-auto-card-title { font-weight: 600; font-size: 14px; }
.zc-auto-card-title .zc-sub { font-weight: 400; margin-left: 6px; }
.zc-auto-card-meta { font-size: 12px; color: var(--zc-text-sub); margin-top: 4px; }
.zc-auto-card-ops { display: flex; align-items: center; gap: 2px; flex: none; }
.zc-soon { color: var(--zc-text-sub); line-height: 2; }

/* ============================================================
   M14 智能助手编排器
   ============================================================ */
.zc-auto-body {
  display: flex; align-items: stretch; background: #fff; border-radius: var(--zc-radius);
  box-shadow: var(--zc-shadow); overflow: hidden; min-height: 600px;
}
.zc-flow {
  flex: 1; min-width: 0; padding: 22px; background: #fafbfd;
  display: flex; flex-direction: column; align-items: center; overflow: auto; max-height: 74vh;
}
.zc-flow-trigger, .zc-flow-node {
  width: 340px; background: #fff; border: 1px solid #e4e9f2; border-radius: 10px;
  padding: 10px 12px; cursor: pointer; position: relative;
}
.zc-flow-trigger { cursor: default; border-style: dashed; display: flex; gap: 10px; align-items: center; }
.zc-flow-node:hover { border-color: #c9d6ee; }
.zc-flow-node.active { border-color: var(--zc-primary); box-shadow: 0 0 0 3px var(--zc-primary-light); }
.zc-flow-node-icon {
  width: 26px; height: 26px; border-radius: 8px; background: var(--zc-primary-light);
  color: var(--zc-primary); display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.zc-flow-node-head { display: flex; align-items: center; gap: 8px; }
.zc-auto-node-head { display: flex; align-items: center; gap: 8px; }
.zc-auto-node-type {
  font-size: 11px; color: var(--zc-primary); background: var(--zc-primary-light);
  border-radius: 4px; padding: 1px 6px; flex: none;
}
.zc-auto-node-name { font-weight: 600; font-size: 13px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-auto-node-tools { display: flex; align-items: center; opacity: 0; transition: opacity .15s; }
.zc-flow-node:hover .zc-auto-node-tools { opacity: 1; }
.zc-flow-node-name { font-weight: 600; font-size: 13px; }
.zc-flow-node-sub { font-size: 12px; color: var(--zc-text-sub); margin-top: 3px; }
.zc-flow-line { width: 1px; height: 20px; background: #dfe5ef; }
.zc-flow-add { border-style: dashed; margin: 6px 0 10px; }
.zc-branch-box { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.zc-branch-col {
  min-width: 142px; background: #f6f8fc; border: 1px dashed #dbe3ef; border-radius: 8px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
}
.zc-branch-head { font-size: 12px; font-weight: 600; color: #3f4a5a; }
.zc-branch-head.is-else { color: #98a2b3; }
.zc-branch-cond { font-size: 11px; color: #98a2b3; }
.zc-branch-node {
  font-size: 12px; background: #fff; border: 1px solid #e6ecf5; border-radius: 6px;
  padding: 4px 6px; cursor: pointer;
}
.zc-branch-node.active { border-color: var(--zc-primary); color: var(--zc-primary); }

.zc-flow-config {
  width: 372px; flex: none; border-left: 1px solid #eef1f6; padding: 16px;
  overflow-y: auto; max-height: 74vh;
}
.zc-cfg-title { font-weight: 600; font-size: 15px; margin-bottom: 10px; }
.zc-cfg-hint { font-size: 12px; color: var(--zc-text-sub); margin: 2px 0 6px; display: flex; align-items: center; gap: 6px; }
.zc-auto-empty { color: var(--zc-text-sub); font-size: 13px; text-align: center; padding: 60px 10px; line-height: 2; }
.zc-map { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.zc-map-row { display: flex; align-items: center; gap: 8px; }
.zc-map-label { width: 96px; flex: none; font-size: 12px; color: #3f4a5a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-val { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.zc-cond { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.zc-cond-row { display: flex; align-items: center; gap: 4px; }
.zc-branch-cfg { border: 1px solid var(--zc-border); border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.zc-branch-cfg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }

.zc-palette { padding: 2px; }
.zc-palette-group + .zc-palette-group { margin-top: 10px; }
.zc-palette-title { font-size: 12px; color: #98a2b3; margin-bottom: 6px; }
.zc-palette-items { display: flex; flex-wrap: wrap; gap: 6px; }
.zc-palette-item {
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--zc-border);
  border-radius: 8px; padding: 5px 9px; font-size: 12px; cursor: pointer; background: #fff;
}
.zc-palette-item:hover { border-color: var(--zc-primary); color: var(--zc-primary); }
.zc-palette-item.disabled { color: #b9c0cc; background: #f7f8fa; cursor: not-allowed; }
.zc-palette-item.disabled:hover { border-color: var(--zc-border); color: #b9c0cc; }

/* 执行日志 / 测试结果 */
.zc-log-item { border-bottom: 1px dashed var(--zc-border); padding: 10px 0; }
.zc-log-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.zc-trace { margin-top: 6px; padding-left: 4px; }
.zc-trace-row { font-size: 12px; color: var(--zc-text-sub); line-height: 1.9; display: flex; align-items: center; gap: 6px; }
.zc-trace-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--zc-primary); flex: none; }

/* ============================================================
   M15 子表单字段（录入/设计器预览）
   ============================================================ */
.zc-subform { width: 100%; }
.zc-subform.demo { pointer-events: none; }
.zc-sf-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.zc-sf-th, .zc-sf-td {
  border: 1px solid var(--zc-border); padding: 3px 6px; font-size: 12px; text-align: left;
}
.zc-sf-th { background: #f7f8fa; color: #3f4a5a; font-weight: 600; }
.zc-sf-td .el-input-number, .zc-sf-td .el-date-editor, .zc-sf-td .el-select { width: 100%; }
.zc-sf-op { width: 64px; text-align: center; }
.zc-sf-empty { text-align: center; color: var(--zc-text-sub); padding: 10px 0; font-size: 12px; }
.zc-subcols { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.zc-subcol { display: flex; align-items: center; gap: 6px; }
.zc-sf-colkey { font-size: 12px; color: #98a2b3; flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   M15 打印模板：字段面板 / 设计器网格 / 排序设置 / 预览
   ============================================================ */
.zc-pt-page { max-width: 1400px; }
.zc-pt-body { display: flex; gap: 12px; align-items: flex-start; }
.zc-pt-fields {
  width: 200px; flex: none; background: #fff; border: 1px solid var(--zc-border);
  border-radius: 10px; padding: 10px; max-height: 72vh; overflow-y: auto;
}
.zc-pt-fields-title { font-size: 12px; color: #98a2b3; margin: 8px 0 4px; font-weight: 600; }
.zc-pt-fields-title:first-child { margin-top: 0; }
.zc-pt-field {
  font-size: 12px; border: 1px solid var(--zc-border); border-radius: 6px;
  padding: 4px 8px; margin-bottom: 4px; cursor: pointer; background: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zc-pt-field:hover { border-color: var(--zc-primary); color: var(--zc-primary); }
.zc-pt-field-sub { margin-left: 14px; background: #fafbfc; }
.zc-pt-subform-name { font-size: 12px; color: #3f4a5a; font-weight: 600; margin: 4px 0; }
.zc-pt-main {
  flex: 1; min-width: 0; background: #fff; border: 1px solid var(--zc-border);
  border-radius: 10px; padding: 10px;
}
.zc-pt-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 8px;
             border-bottom: 1px solid var(--zc-border); }
.zc-pt-btn {
  border: 1px solid var(--zc-border); background: #fff; border-radius: 5px; cursor: pointer;
  font-size: 12px; padding: 4px 8px; line-height: 1.2; color: #3f4a5a;
}
.zc-pt-btn:hover { border-color: var(--zc-primary); color: var(--zc-primary); }
.zc-pt-btn.on { background: var(--zc-primary); border-color: var(--zc-primary); color: #fff; }
.zc-pt-bar-lab { font-size: 12px; color: #98a2b3; margin-right: 4px; }
.zc-pt-formula { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.zc-pt-formula-pos {
  flex: none; min-width: 44px; text-align: center; font-size: 12px; color: #3f4a5a;
  border: 1px solid var(--zc-border); border-radius: 5px; padding: 4px 2px; background: #f7f8fa;
}
.zc-pt-formula-input { flex: 1; }
.zc-pt-grid-wrap { overflow: auto; max-height: 66vh; }
.zc-pt-grid { border-collapse: collapse; table-layout: fixed; background: #fff; }
.zc-pt-grid td {
  border: 1px solid #c9d1dc; height: 26px; padding: 2px 6px; font-size: 12px;
  overflow: hidden; white-space: nowrap; cursor: cell; user-select: none;
}
.zc-pt-grid td.sel { outline: 2px solid var(--zc-primary); outline-offset: -2px; }
.zc-ph { color: var(--zc-primary); background: #eef4ff; border-radius: 3px; padding: 0 2px; }
.zc-sort-title { font-size: 13px; font-weight: 600; color: #3f4a5a; margin: 14px 0 8px; }
.zc-sort-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.zc-print-frame { width: 100%; height: 62vh; border: 1px solid var(--zc-border); border-radius: 6px; background: #fff; }
.zc-pick-list { display: flex; flex-direction: column; gap: 8px; }
.zc-pick-item {
  border: 1px solid var(--zc-border); border-radius: 8px; padding: 10px 12px;
  font-size: 13px; cursor: pointer;
}
.zc-pick-item:hover { border-color: var(--zc-primary); color: var(--zc-primary); }

/* ============================================================
   M16 表单设计器 UI 重构
   - 顶栏：左导航 + 居中表单名（可直接改名）+ 右保存
   - 字段面板：左移贴边、固定宽度、两列等宽分组排列
   ============================================================ */
.zc-fd-page { margin-left: -8px; }
.zc-fd-top {
  display: grid; grid-template-columns: minmax(300px, 1fr) auto minmax(110px, 1fr);
  align-items: center; gap: 12px; background: var(--zc-card);
  border-radius: 10px; box-shadow: var(--zc-shadow); padding: 8px 14px; margin-bottom: 12px;
}
.zc-fd-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.zc-fd-back { font-size: 12px; color: var(--zc-text-sub); text-decoration: none; white-space: nowrap; }
.zc-fd-back:hover { color: var(--zc-primary); }
.zc-fd-tabs { display: flex; align-items: center; gap: 2px; }
.zc-fd-tabs a {
  font-size: 13px; color: #5b6675; padding: 5px 9px; border-radius: 6px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.zc-fd-tabs a:hover { background: var(--zc-bg); color: var(--zc-primary); }
.zc-fd-tabs a.on { background: var(--zc-primary-light); color: var(--zc-primary-dark); font-weight: 600; cursor: default; }
.zc-fd-title { text-align: center; min-width: 240px; }
.zc-fd-name .el-input__wrapper { box-shadow: none !important; background: transparent; padding: 0 4px; }
.zc-fd-name .el-input__inner { text-align: center; font-size: 16px; font-weight: 600; height: 24px; }
.zc-fd-name .el-input__wrapper:hover { background: #f5f7fb; }
.zc-fd-sub { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 2px; }
.zc-fd-desc { width: auto; max-width: 260px; }
.zc-fd-desc .el-input__wrapper { box-shadow: none !important; background: transparent; padding: 0 2px; }
.zc-fd-desc .el-input__inner { text-align: center; font-size: 12px; height: 20px; color: var(--zc-text-sub); }
.zc-fd-desc .el-input__wrapper:hover { background: #f5f7fb; }
.zc-fd-dot, .zc-fd-count { font-size: 12px; color: var(--zc-text-sub); white-space: nowrap; }
.zc-fd-right { display: flex; justify-content: flex-end; }

/* 字段面板：固定宽度 + 两列等宽（贴左边，不再交叉错位） */
.zc-palette.zc-fp { width: 212px; padding: 10px 10px 12px; }
.zc-fp .zc-palette-title { margin-bottom: 6px; font-size: 12px; color: #98a2b3; }
.zc-fp-group + .zc-fp-group { margin-top: 12px; }
.zc-fp-items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.zc-fp .zc-palette-item {
  display: flex; align-items: center; gap: 5px; margin: 0; height: 32px;
  padding: 0 8px; font-size: 12.5px; border-radius: 7px; background: var(--zc-input-bg);
  overflow: hidden; white-space: nowrap;
}
.zc-fp .zc-palette-item .ic { font-size: 13px; width: 15px; text-align: center; flex: none; }
.zc-fp .zc-palette-item .lb { overflow: hidden; text-overflow: ellipsis; }
.zc-fp-tip { font-size: 11px; color: #a6b0bf; margin-top: 12px; line-height: 1.6; }

/* ============================================================
   M17 表单属性面板（设计器右侧第二个 Tab）
   ============================================================ */
.zc-props-tabs {
  display: flex; gap: 2px; border-bottom: 1px solid var(--zc-border);
  margin: -2px -2px 12px; padding: 0 2px;
}
.zc-props-tabs a {
  flex: 1; text-align: center; font-size: 13px; padding: 8px 0; color: #5b6675;
  cursor: pointer; border-bottom: 2px solid transparent; text-decoration: none;
}
.zc-props-tabs a:hover { color: var(--zc-primary); }
.zc-props-tabs a.on { color: var(--zc-primary); border-bottom-color: var(--zc-primary); font-weight: 600; }
.zc-fprops { display: flex; flex-direction: column; gap: 12px; }
.zc-fset { border-bottom: 1px dashed var(--zc-border); padding-bottom: 12px; }
.zc-fset:last-child { border-bottom: none; padding-bottom: 0; }
.zc-fset-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: #3f4a5a; margin-bottom: 8px;
}
.zc-fset-hint { font-size: 11.5px; color: #98a2b3; line-height: 1.7; margin: 2px 0 6px; }
.zc-fset-empty { font-size: 12px; color: #b0b8c4; padding: 4px 0 6px; }
.zc-fset-unit { font-size: 12px; color: #98a2b3; }
.zc-frow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; color: #3f4a5a; }
.zc-frow > span:first-child { flex: 1; }
.zc-fid { display: flex; align-items: center; gap: 8px; }
.zc-fid-val {
  flex: 1; font-family: Consolas, Menlo, monospace; font-size: 12px; background: #f5f7fb;
  border: 1px solid var(--zc-border); border-radius: 6px; padding: 5px 8px; color: #3f4a5a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zc-fitem { border: 1px solid var(--zc-border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #fcfdff; }
.zc-fitem-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-bottom: 4px; }
.zc-fitem-b { font-size: 12px; color: #5b6675; line-height: 1.6; }
.zc-fitem-m { font-size: 11.5px; color: #98a2b3; margin-top: 2px; line-height: 1.6; }
.zc-fitem-ops { display: flex; justify-content: flex-end; margin-top: 2px; }
.zc-ftag { font-size: 10.5px; border-radius: 4px; padding: 0 5px; line-height: 16px; background: #eef2f8; color: #5b6675; }
.zc-ftag.block { background: #fdecec; color: #d64545; }
.zc-ftag.warn { background: #fff6e6; color: #c07c15; }
.zc-ftag.live { background: #eaf3ff; color: #2f6bff; }
.zc-ftag.act-hide { background: #fdecec; color: #d64545; }
.zc-ftag.act-show { background: #e9f8ef; color: #1f9d55; }
.zc-ftag.act-require { background: #fff6e6; color: #c07c15; }
.zc-ftag.act-disable { background: #eef2f8; color: #5b6675; }
.zc-conds { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.zc-cond-logic { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.zc-cond-row { display: flex; align-items: center; gap: 6px; }
.zc-inv-row { gap: 6px; }
.zc-share-link {
  font-size: 12px; word-break: break-all; background: #f5f7fb; border: 1px solid var(--zc-border);
  border-radius: 6px; padding: 6px 8px; color: #3f4a5a; margin-top: 4px;
}
.zc-share-ops { display: flex; gap: 6px; margin: 6px 0 10px; flex-wrap: wrap; }

/* 录入侧：左右标题布局 / 自动输入框宽度 / 实时校验提示 */
.zc-lay-left .el-form-item__label { line-height: 32px; padding-right: 10px; }
.zc-align-right .el-form-item__label { justify-content: flex-end; }
.zc-lay-auto .zc-form-grid .el-input,
.zc-lay-auto .zc-form-grid .el-select,
.zc-lay-auto .zc-form-grid .el-input-number { width: 150px; }
.zc-live-warn {
  margin-top: 6px; font-size: 12px; color: #d64545; background: #fdecec;
  border: 1px solid #f7cdcd; border-radius: 6px; padding: 6px 10px;
}

/* ============================================================
   M17 表单外链填写页（#/f/{token}）
   ============================================================ */
.zc-share-page {
  min-height: 100vh; padding: 36px 16px 60px;
  background: linear-gradient(180deg, #f5f7fb 0%, #eef2f8 100%);
  display: flex; align-items: flex-start; justify-content: center;
}
.zc-share-card {
  width: 100%; max-width: 760px; background: #fff; border-radius: 14px;
  box-shadow: 0 8px 32px rgba(20, 40, 80, .08); padding: 24px 30px 28px;
}
.zc-share-card.ok { text-align: center; padding: 40px 30px; }
.zc-share-logo { font-size: 12px; color: #98a2b3; letter-spacing: .5px; }
.zc-share-title { font-size: 20px; text-align: center; margin: 6px 0 4px; color: #1f2a37; }
.zc-share-note { font-size: 13px; color: #5b6675; text-align: center; margin: 0 0 18px; line-height: 1.8; }
.zc-share-tip { font-size: 13px; color: #5b6675; line-height: 1.9; }
.zc-share-card.ok h2 { font-size: 19px; margin: 4px 0 8px; color: #1f2a37; }
.zc-share-ok {
  width: 52px; height: 52px; border-radius: 50%; background: #e9f8ef; color: #1f9d55;
  font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 6px auto 14px;
}
.zc-share-foot { margin-top: 18px; text-align: center; font-size: 11.5px; color: #b0b8c4; }
@media (max-width: 640px) {
  .zc-share-page { padding: 16px 10px 40px; }
  .zc-share-card { padding: 18px 16px 22px; border-radius: 12px; }
  .zc-share-title { font-size: 18px; }
}

/* ============================================================
   M17-b 表单属性面板视觉升级
   参考主流后台「设置面板」规范：分组标题 + 标签/副文本分级、
   控件统一右对齐、组间一条浅线、添加动作用整行虚线按钮。
   ============================================================ */
.zc-props {
  width: 340px; padding: 0 0 16px; border: 1px solid var(--zc-border);
  box-shadow: 0 1px 2px rgba(31, 45, 82, .04), 0 10px 28px rgba(31, 45, 82, .06);
}
.zc-props > .el-form,
.zc-props > .zc-fprops { padding: 12px 14px 0; }
.zc-props > .zc-props-empty { padding: 64px 16px; }

/* 顶部分段式 Tab（替代下划线 Tab） */
.zc-props-tabs {
  display: flex; gap: 4px; padding: 8px 10px; margin: 0; border-bottom: 1px solid var(--zc-border);
  background: #fbfcff; border-radius: 10px 10px 0 0;
}
.zc-props-tabs a {
  flex: 1; height: 30px; display: flex; align-items: center; justify-content: center;
  border-radius: 7px; font-size: 13px; color: #5b6675; border-bottom: none; padding: 0;
}
.zc-props-tabs a:hover { background: #eef2f9; color: var(--zc-primary); }
.zc-props-tabs a.on {
  background: #fff; color: #1f2733; font-weight: 600;
  box-shadow: 0 1px 3px rgba(31, 45, 82, .12);
}

/* 分组 */
.zc-fprops { gap: 0; }
.zc-fset { border-bottom: 1px solid #f0f3f8; padding: 14px 0 16px; }
.zc-fset:first-child { padding-top: 2px; }
.zc-fset:last-child { border-bottom: none; padding-bottom: 4px; }
.zc-fset-title {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0; padding: 2px 0; cursor: pointer; user-select: none;
}
.zc-fset-title:hover .fp-h { color: var(--zc-primary); }
.fp-h { font-size: 13.5px; font-weight: 600; color: #1f2733; letter-spacing: .2px; }
.fp-h-right { display: flex; align-items: center; gap: 8px; }
.fp-h-badge { font-size: 11.5px; color: #8a94a6; background: #f2f5fa; border-radius: 20px; padding: 1px 8px; white-space: nowrap; }
.fp-h-badge.on { color: #1f9d55; background: #e9f8ef; }
.fp-caret { font-size: 11px; color: #a9b3c2; transition: transform .18s ease; }
.fp-caret.open { transform: rotate(180deg); }
.zc-fset-body { padding-top: 10px; }
.zc-fset-hint { font-size: 12px; line-height: 1.7; color: #8a94a6; margin: 0 0 10px; }
.zc-fset-body > .zc-fset-hint:first-child { margin-top: -2px; }
.zc-fset .zc-fset-body .zc-fset-hint:last-child { margin-bottom: 0; }

/* 行：标签 + 副文本在左，控件右对齐 */
.fp-row {
  display: flex; align-items: center; gap: 12px; min-height: 34px;
  padding: 6px 8px; margin: 0 -8px; border-radius: 8px;
}
.fp-row:hover { background: #f7f9fd; }
.fp-row-main { flex: 1; min-width: 0; }
.fp-row-label { font-size: 13px; color: #3f4a5a; line-height: 20px; }
.fp-row-tip { font-size: 11.5px; color: #98a2b3; line-height: 16px; margin-top: 1px; }
.fp-row .el-switch { flex: none; }

/* 字段块 */
.fp-field { margin-bottom: 10px; }
.fp-field:last-child { margin-bottom: 0; }
.fp-field-label { font-size: 12px; color: #8a94a6; margin-bottom: 5px; }
.fp-field-ctl { display: flex; align-items: center; gap: 8px; }
.fp-unit { font-size: 12px; color: #98a2b3; }
.fp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fp-tip { font-size: 12px; color: #98a2b3; }

/* 按钮 */
.fp-add {
  width: 100%; height: 34px; margin-top: 8px; border: 1px dashed var(--zc-border); background: var(--zc-surface-2);
  color: #5b6675; border-radius: 8px; font-size: 12.5px; cursor: pointer; transition: all .15s;
}
.fp-add:hover { border-color: var(--zc-primary); color: var(--zc-primary); background: #f4f8ff; }
.fp-btn {
  height: 30px; padding: 0 12px; border: 1px solid var(--zc-border); background: #fff;
  border-radius: 7px; font-size: 12.5px; color: #3f4a5a; cursor: pointer; white-space: nowrap;
}
.fp-btn:hover { border-color: var(--zc-primary); color: var(--zc-primary); }
.fp-iconbtn {
  border: none; background: transparent; color: #8a94a6; font-size: 12px;
  padding: 2px 5px; cursor: pointer; border-radius: 5px;
}
.fp-iconbtn:hover { color: var(--zc-primary); background: #f0f5ff; }
.fp-iconbtn.danger:hover { color: #d64545; background: #fdecec; }
.fp-ghost {
  height: 30px; padding: 0 10px; border: 1px solid var(--zc-border); background: #fff;
  border-radius: 7px; font-size: 12.5px; color: #3f4a5a; cursor: pointer;
}
.fp-ghost:hover { border-color: var(--zc-primary); color: var(--zc-primary); }
.fp-ghost.danger:hover { border-color: #f0b4b4; color: #d64545; }

/* 表单 ID */
.fp-idbox { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; }
.zc-fid-val {
  flex: 1; font-size: 12.5px; padding: 6px 10px; border-radius: 8px;
  background: var(--zc-surface-2); border: 1px solid var(--zc-border); color: #3f4a5a;
}

/* 规则卡片：左侧 3px 语义色条 + hover 显示操作 */
.fp-rule {
  position: relative; padding: 10px 10px 9px 13px; margin-bottom: 8px; border-radius: 9px;
  border: 1px solid var(--zc-border); background: var(--zc-card); cursor: pointer; overflow: hidden;
  transition: box-shadow .15s, border-color .15s;
}
.fp-rule::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #cdd6e4; }
.fp-rule.is-block::before, .fp-rule.is-hide::before { background: #f0a5a5; }
.fp-rule.is-warn::before, .fp-rule.is-require::before { background: #f2ce8a; }
.fp-rule.is-show::before { background: #9fd9b6; }
.fp-rule.is-disable::before { background: #c3ccdb; }
.fp-rule:hover { border-color: #cfdcf6; box-shadow: 0 2px 10px rgba(47, 107, 255, .08); }
.zc-fitem-h { gap: 6px; margin-bottom: 5px; }
.fp-rule-name { font-size: 13px; font-weight: 600; color: #1f2733; }
.fp-rule-ops { margin-left: auto; display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.fp-rule:hover .fp-rule-ops { opacity: 1; }
.fp-cond { font-size: 12px; color: #5b6675; line-height: 1.65; background: var(--zc-surface-2); border-radius: 6px; padding: 4px 7px; }
.fp-msg { font-size: 11.5px; color: #98a2b3; margin-top: 5px; line-height: 1.6; }

/* 空态 */
.fp-empty {
  display: flex; align-items: center; gap: 8px; border: 1px dashed #e2e8f2; border-radius: 9px;
  padding: 12px; color: #98a2b3; font-size: 12px; background: var(--zc-surface-2);
}
.fp-empty-ic {
  width: 18px; height: 18px; border-radius: 50%; background: #eef2f9; color: #8a94a6;
  display: flex; align-items: center; justify-content: center; font-size: 11px; flex: none;
}

/* 不可见赋值行 */
.fp-invrow {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 6px;
  border: 1px solid var(--zc-line-soft); border-radius: 8px; background: var(--zc-surface-2);
}

/* 外链 */
.fp-linkbox {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; padding: 8px 8px 8px 10px;
  background: var(--zc-surface-2); border: 1px solid var(--zc-border); border-radius: 9px;
}
.fp-linkbox-url {
  flex: 1; font-size: 12px; word-break: break-all; color: #3f4a5a;
  font-family: Consolas, Menlo, monospace; line-height: 1.5;
}
.fp-linkops { display: flex; gap: 6px; margin-bottom: 10px; }
.zc-ftag { font-size: 10.5px; line-height: 17px; padding: 0 6px; border-radius: 5px; font-weight: 500; }

/* M17-b 细节修正：分组标题可点提示、不可见赋值两行布局、折叠箭头 */
.zc-fset-title { padding: 4px 6px; margin: 0 -6px 0; border-radius: 7px; transition: background .15s; }
.zc-fset-title:hover { background: #f7f9fd; }
.fp-caret { font-size: 12px; color: #b3bccb; }
.fp-invrow { flex-direction: column; align-items: stretch; gap: 6px; }
.fp-invrow-top { display: flex; align-items: center; gap: 6px; }
.fp-invrow-top .fp-iconbtn { flex: none; }

/* M17-b：字段属性 Tab 与表单属性保持同一套排版密度 */
.zc-props .el-form-item { margin-bottom: 12px; }
.zc-props .el-form-item__label {
  font-size: 12px; color: #8a94a6; line-height: 18px;
  padding-bottom: 4px !important; margin-bottom: 0;
}
.zc-props .el-input__wrapper,
.zc-props .el-textarea__inner,
.zc-props .el-select__wrapper { border-radius: 7px; }
.zc-props .el-radio-button__inner { border-radius: 6px; }

/* M17-b：规则弹窗（条件组做成一块浅色面板） */
.fp-dlg-hint {
  font-size: 12px; color: #8a94a6; line-height: 1.7; background: #f7f9fd;
  border: 1px solid #eef1f7; border-radius: 8px; padding: 7px 10px; margin: -2px 0 14px;
}
.zc-conds {
  width: 100%; gap: 8px; padding: 10px 12px; border: 1px solid var(--zc-line-soft);
  border-radius: 9px; background: var(--zc-surface-2);
}
.zc-cond-row { gap: 8px; }
.zc-cond-row .fp-iconbtn { flex: none; }
.zc-cond-logic { padding-bottom: 2px; }

/* M17-b：条件行在窄弹窗里不再挤压（el-input 默认 width:100% 会导致溢出） */
.zc-cond-row .el-input,
.zc-cond-row .el-select { min-width: 0; }
.zc-cond-row .el-select { flex: none; }

/* M17-b：辅助文字提高对比度（11.5px 太小、#98a2b3 太浅，长时间看不舒服） */
.fp-row-tip, .zc-fset-hint, .fp-field-label { color: #7b8698; }
.zc-fset-hint { font-size: 12px; }
.fp-msg { color: #8a94a6; }

/* ============================================================
   M17-b 全局细节对齐（去掉默认 Element 的"毛坯感"）
   仅调整圆角/表头/弹窗，不改布局与交互
   ============================================================ */
.el-button { border-radius: 7px; }
.el-button.is-round { border-radius: 999px; }
.el-table th.el-table__cell { background: var(--zc-surface-2); color: #4a5566; font-weight: 600; }
.el-table td.el-table__cell { color: #3f4a5a; }
.el-dialog { border-radius: 12px; }
.el-card { border-radius: 12px; }
.el-input__wrapper, .el-textarea__inner, .el-select__wrapper { border-radius: 7px; }

/* ============================================================
   M17-c 全站视觉自检修复
   ============================================================ */

/* 1) 全局图标（内联 SVG，跟随文字颜色与字号） */
.zc-nav-ico, .zc-side-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.zc-nav-ico svg { width: 16px; height: 16px; }
.zc-side-ico svg { width: 14px; height: 14px; }
.zc-nav-ico, .zc-side-ico { color: #8a94a6; }
.zc-nav a.active .zc-nav-ico { color: var(--zc-primary); }
.zc-side-item.active .zc-side-ico { color: var(--zc-primary); }

/* 2) 空状态：去掉斜纹，改成干净的虚线占位 + 三级文字 */
.zc-placeholder {
  border: 1px dashed var(--zc-border); border-radius: 12px; background: var(--zc-surface-2);
  padding: 44px 20px; text-align: center; color: #7b8698;
}
.zc-placeholder p { margin: 0; font-size: 13px; line-height: 1.9; color: #7b8698; }
.zc-placeholder p:first-child { font-size: 14px; font-weight: 600; color: #4a5566; margin-bottom: 6px; }
.zc-placeholder p + p { font-size: 12px; color: #8a94a6; }

/* 3) 应用内左侧栏：吸顶 + 独立滚动，底部入口不再被切 */
.zc-side {
  position: sticky; top: 18px; height: calc(100vh - 36px);
  overflow: hidden; padding: 14px 10px 12px;
}
.zc-side-forms { overflow-y: auto; min-height: 0; }
.zc-side-foot { margin-top: auto; }
.zc-side-item, .zc-side-admin { display: flex; align-items: center; gap: 8px; }

/* 4) 顶栏导航项更紧凑（图标 + 文字基线与 14px 对齐） */
.zc-nav a { height: 38px; padding: 0 12px; gap: 10px; font-size: 13.5px; }
.zc-nav { padding: 12px 10px; gap: 2px; }

/* 5) 表格操作列：单行不换行，按钮内边距收紧 */
.zc-ops-cell .cell { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.zc-ops-cell .el-button { margin-left: 0 !important; padding: 0 6px; font-size: 12.5px; }

/* 6) 仪表盘：图表卡等高、卡片内纵向排布 */
.zc-chart-grid { align-items: stretch; }
.zc-chart-card { display: flex; flex-direction: column; }
.zc-chart { flex: 1; min-height: 260px; }

/* 7) 总后台 KPI：固定 4 列（8 项正好两行），数字统一深色 */
.zc-pf-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zc-pf-kpi-val { color: #1f2733 !important; font-size: 22px; }
.zc-pf-kpi { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 1100px) { .zc-pf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 8) 外链填写页：窄屏单列，标签与输入不挤压 */
@media (max-width: 640px) {
  .zc-share-card .zc-form-grid > [class^="is-w"] { grid-column: span 12; }
  .zc-share-card .zc-form-grid { gap: 0; }
}

/* 9) 数据页工具栏：搜索框与按钮同高，窄屏可换行 */
.zc-toolbar { row-gap: 8px; }

/* M17-c 修正：应用内布局高度按内容自适应，避免整页多滚 40px、侧栏底部被切 */
.zc-app-ws { min-height: calc(100vh - 36px); }
.zc-side {
  position: sticky; top: 18px; align-self: flex-start;
  height: auto; max-height: calc(100vh - 36px);
}

.zc-side { height: calc(100vh - 36px); max-height: calc(100vh - 36px); }

/* 表头与内容对齐：操作列表头居中，内容左对齐不换行 */
.el-table__header .zc-ops-cell .cell { display: block; text-align: center; white-space: nowrap; }

/* 卡片内的空状态收窄，避免一大片空框 */
.zc-card > .zc-placeholder { max-width: 640px; margin-left: auto; margin-right: auto; }

/* 主内容区与侧栏之间留出间距；空状态不再限宽（避免卡片两侧留白条） */
.zc-app-main { padding: 0 0 0 18px; }
.zc-card > .zc-placeholder { max-width: none; }

/* 侧栏不能 overflow:hidden，否则右侧 3px 拖拽手柄会被裁掉（E2E 会点不到） */
.zc-side { overflow: visible; }

/* ============================================================
   M17-d 交互与配色：规则段拖拽手感 + 界面外观设置
   ============================================================ */
/* 规则段列表：卡片式，边界清楚；拖动时高亮浮起 */
.zc-serial-rules {
  border: 1px solid var(--zc-border); border-radius: 10px; padding: 8px;
  background: var(--zc-surface-2); display: flex; flex-direction: column; gap: 6px;
}
.zc-serial-rule {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border: 1px solid var(--zc-border); border-radius: 8px; background: var(--zc-input-bg);
  transition: box-shadow .12s, border-color .12s, transform .12s;
}
.zc-serial-rule + .zc-serial-rule { border-top: 1px solid var(--zc-border); }
.zc-serial-rule.dragging {
  border-color: var(--zc-primary); box-shadow: 0 6px 18px rgba(47, 107, 255, .22);
  transform: scale(1.01); cursor: grabbing;
}
.zc-serial-rule-drag {
  cursor: grab; color: #93a0b4; padding: 2px 5px; font-size: 13px; letter-spacing: -2px;
  border-radius: 5px; touch-action: none; user-select: none; flex: none;
}
.zc-serial-rule-drag:hover { background: var(--zc-primary-light); color: var(--zc-primary); }
body.zc-rule-sorting { cursor: grabbing; user-select: none; }
.zc-serial-rule-ops { display: flex; gap: 3px; flex: none; }
.zc-rule-move {
  width: 22px; height: 22px; line-height: 1; border: 1px solid var(--zc-border);
  background: var(--zc-input-bg); border-radius: 5px; color: #5b6675; font-size: 11px; cursor: pointer;
}
.zc-rule-move:hover:not(:disabled) { border-color: var(--zc-primary); color: var(--zc-primary); }
.zc-rule-move:disabled { opacity: .35; cursor: not-allowed; }

/* 界面外观设置卡 */
.zc-theme-presets { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.zc-theme-preset {
  width: 104px; border: 1px solid var(--zc-border); border-radius: 10px; padding: 8px;
  cursor: pointer; background: var(--zc-input-bg); transition: border-color .15s, box-shadow .15s;
}
.zc-theme-preset:hover { border-color: var(--zc-primary); }
.zc-theme-preset.active { border-color: var(--zc-primary); box-shadow: 0 0 0 2px var(--zc-primary-light); }
.zc-theme-swatch {
  position: relative; display: block; height: 54px; border: 1px solid; border-radius: 7px; overflow: hidden;
}
.zc-theme-swatch-card {
  position: absolute; left: 8px; right: 8px; top: 8px; height: 22px;
  border: 1px solid; border-radius: 4px;
}
.zc-theme-swatch-bar { position: absolute; left: 8px; right: 26px; bottom: 8px; height: 6px; border-radius: 3px; }
.zc-theme-name { display: block; text-align: center; font-size: 12px; color: var(--zc-text); margin-top: 6px; }
.zc-theme-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 18px;
  padding: 12px 14px; border: 1px solid var(--zc-border); border-radius: 10px; background: var(--zc-surface-2);
}
.zc-theme-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.zc-theme-label { font-size: 12.5px; color: var(--zc-text-sub); }
.zc-theme-tip { font-size: 12px; color: var(--zc-text-sub); margin-top: 10px; line-height: 1.7; }

/* 外观设置：色块 + 色值并排，避免看起来像"复选框" */
.zc-theme-ctl { display: flex; align-items: center; gap: 8px; }
.zc-theme-hex {
  font-size: 11.5px; color: var(--zc-text-sub); font-family: Consolas, Menlo, monospace;
  background: var(--zc-input-bg); border: 1px solid var(--zc-border); border-radius: 5px;
  padding: 1px 6px; letter-spacing: .2px;
}
.zc-theme-field { min-width: 0; }
.zc-theme-label { white-space: nowrap; }

/* 规则段：两行结构（第一行：手柄/类型/操作，第二行：具体取值），窄面板不再溢出 */
.zc-serial-rule { flex-direction: column; align-items: stretch; gap: 6px; padding: 8px 9px; }
.zc-serial-rule-head { display: flex; align-items: center; gap: 6px; }
.zc-serial-rule-head .zc-serial-rule-type { flex: 1; width: auto; }
.zc-serial-rule-ops { display: flex; gap: 3px; flex: none; margin-left: auto; }
.zc-serial-rule-val { display: flex; gap: 6px; align-items: center; width: 100%; min-width: 0; }
.zc-serial-rule-val .el-input,
.zc-serial-rule-val .el-select,
.zc-serial-rule-val .el-input-number { min-width: 0; }
.zc-serial-rule-val .el-select { flex: 1; }
.zc-serial-rule-val .el-select .el-select__wrapper { width: 100%; }
.zc-rule-del {
  height: 22px; padding: 0 7px; border: 1px solid var(--zc-border); background: var(--zc-input-bg);
  border-radius: 5px; font-size: 11.5px; color: #8a94a6; cursor: pointer;
}
.zc-rule-del:hover { border-color: #f0b4b4; color: #d64545; background: #fdecec; }
/* 属性面板不要出现横向滚动条 */
.zc-props { overflow-x: hidden; }
.zc-props .el-form-item { min-width: 0; }

/* 流水号规则块：内容改为上下排列，"添加"按钮独占一行（原来会被挤到规则框右侧） */
.zc-serial-item .el-form-item__content { display: block; }
.zc-serial-item .el-dropdown { display: block; margin-top: 8px; }
.zc-serial-item .el-dropdown .el-button { width: 100%; }

/* ============================================================
   M18 选项配色（下拉 / 单选 / 多选）
   设计器：每项一行（拖动手柄 / 选中标记预览 / 名称 / 色点 / 删除）
   ============================================================ */
.zc-opt-item .el-form-item__label { width: 100%; margin-bottom: 6px; }
.zc-opt-head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.zc-opt-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 400; color: var(--zc-text-sub);
}
.zc-opt-toggle .el-switch { height: 18px; }

.zc-opt-list { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.zc-opt-row {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px;
  border: 1px solid var(--zc-border); border-radius: 8px; background: var(--zc-input-bg);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.zc-opt-row:hover { border-color: #c6d3e8; }
.zc-opt-row.dragging {
  border-color: var(--zc-primary); box-shadow: 0 6px 16px rgba(47, 107, 255, .2);
  transform: scale(1.01); position: relative; z-index: 2;
}
.zc-opt-grip {
  flex: none; cursor: grab; color: #a9b3c2; font-size: 13px; line-height: 1;
  padding: 2px 1px; letter-spacing: -1.5px; touch-action: none; user-select: none;
}
.zc-opt-grip:hover { color: var(--zc-primary); }
body.zc-opt-sorting { cursor: grabbing; user-select: none; }
.zc-opt-mark { flex: none; width: 13px; height: 13px; border: 2px solid var(--zc-border); border-radius: 50%; }
.zc-opt-mark.mk-checkbox { border-radius: 4px; }
.zc-opt-mark.mk-select { width: 16px; height: 8px; border-radius: 3px; }
.zc-opt-row .el-input { flex: 1; min-width: 0; }
.zc-opt-color { flex: none; display: inline-flex; }
/* 取色入口做成小圆点（贴近截图观感） */
.zc-opt-color .el-color-picker__trigger { width: 18px; height: 18px; padding: 0; border: none; background: transparent; }
.zc-opt-color .el-color-picker__color { border: none; border-radius: 50%; }
.zc-opt-color .el-color-picker__color-inner { border-radius: 50%; }
.zc-opt-color .el-color-picker__icon,
.zc-opt-color .el-color-picker__empty { display: none; }
.zc-opt-del {
  flex: none; border: none; background: transparent; color: #a9b3c2; font-size: 12px;
  line-height: 1; padding: 3px 4px; border-radius: 5px; cursor: pointer;
}
.zc-opt-del:hover { color: #d64545; background: #fdecec; }
.zc-opt-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12.5px; }
.zc-opt-actions a { color: var(--zc-primary); cursor: pointer; text-decoration: none; }
.zc-opt-actions a:hover { text-decoration: underline; }
.zc-opt-actions a.danger { color: #d64545; }
.zc-opt-sep { color: #d7dfec; }
.zc-batch-tip { font-size: 12px; color: var(--zc-text-sub); line-height: 1.7; margin-bottom: 8px; }

/* 录入端：下拉选项前色点、列表里的彩色标签 */
.zc-opt-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle; flex: none;
}
.zc-opt-group { display: flex; flex-wrap: wrap; row-gap: 4px; }
.zc-opt-group .el-radio, .zc-opt-group .el-checkbox { margin-right: 18px; }
.zc-opt-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.zc-opt-pill {
  --pill: var(--zc-primary);
  display: inline-flex; align-items: center; max-width: 100%;
  height: 20px; padding: 0 8px; border-radius: 10px; font-size: 12px; line-height: 1;
  color: var(--pill); background: #f4f6fb; background: color-mix(in srgb, var(--pill) 12%, #fff);
  border: 1px solid #e6ebf4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 拖动手柄用 2×3 点阵（比字符更清晰、跨字体一致） */
.zc-opt-grip {
  width: 9px; height: 15px; padding: 0; flex: none;
  background-image: radial-gradient(currentColor 1.3px, transparent 1.4px);
  background-size: 4.5px 5px; background-position: 0 1px;
  color: #b3bccb;
}
.zc-opt-grip:hover { color: var(--zc-primary); }

/* 单选/多选：每个选项用自己的颜色（未选中描边、选中填色 + 文字同色） */
.zc-opt-group .el-radio__inner { border-color: var(--opt-c, var(--el-border-color)); }
.zc-opt-group .el-radio.is-checked .el-radio__inner {
  background: var(--opt-c, var(--el-color-primary));
  border-color: var(--opt-c, var(--el-color-primary));
}
.zc-opt-group .el-radio.is-checked .el-radio__label { color: var(--opt-c, var(--el-color-primary)); font-weight: 600; }
.zc-opt-group .el-checkbox__inner { border-color: var(--opt-c, var(--el-border-color)); }
.zc-opt-group .el-checkbox.is-checked .el-checkbox__inner {
  background: var(--opt-c, var(--el-color-primary));
  border-color: var(--opt-c, var(--el-color-primary));
}
.zc-opt-group .el-checkbox.is-checked .el-checkbox__label { color: var(--opt-c, var(--el-color-primary)); font-weight: 600; }

/* 列表彩色标签：文字加深一档，浅色（橙/黄绿）也读得清 */
.zc-opt-pill { color: color-mix(in srgb, var(--pill) 78%, #1f2733); }

/* M18 色点与调色板弹层（自定义，替代 el-color-picker，保证显示与数据一致） */
.zc-opt-swatch {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(15, 30, 60, .12);
  cursor: pointer; padding: 0; flex: none; transition: transform .12s, box-shadow .12s;
}
.zc-opt-swatch:hover { transform: scale(1.12); box-shadow: 0 0 0 3px rgba(47, 107, 255, .12); }
.zc-swatch-popper { padding: 10px !important; border-radius: 10px; }
.zc-swatch-panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.zc-swatch-cell {
  width: 100%; height: 26px; border-radius: 6px; border: 1px solid rgba(15, 30, 60, .1);
  cursor: pointer; padding: 0; position: relative;
}
.zc-swatch-cell:hover { transform: scale(1.06); }
.zc-swatch-cell.on::after {
  content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.zc-swatch-custom { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.zc-swatch-custom .el-input { flex: 1; }
.zc-swatch-ok {
  height: 24px; padding: 0 9px; border: 1px solid var(--zc-border); background: var(--zc-input-bg);
  border-radius: 6px; font-size: 12px; color: var(--zc-text); cursor: pointer; flex: none;
}
.zc-swatch-ok:hover { border-color: var(--zc-primary); color: var(--zc-primary); }

/* M18 自定义调色浮层（绝对定位在色点左侧，完全数据驱动） */
.zc-opt-color { position: relative; }
.zc-swatch-pop {
  position: absolute; right: 24px; top: -10px; z-index: 30; width: 190px;
  background: var(--zc-card); border: 1px solid var(--zc-border); border-radius: 10px;
  box-shadow: 0 8px 26px rgba(20, 40, 80, .16); padding: 10px;
}
.zc-swatch-pop::after {
  content: ""; position: absolute; right: -5px; top: 16px; width: 9px; height: 9px;
  background: var(--zc-card); border-right: 1px solid var(--zc-border);
  border-top: 1px solid var(--zc-border); transform: rotate(45deg);
}

/* 设计器画布里的预览是 disabled 状态，Element 会用灰色覆盖边框 —— 这里保色，方便所见即所得 */
.zc-opt-group .el-radio.is-disabled .el-radio__inner { border-color: var(--opt-c, var(--el-disabled-border-color)); }
.zc-opt-group .el-checkbox.is-disabled .el-checkbox__inner { border-color: var(--opt-c, var(--el-disabled-border-color)); }
.zc-opt-group .el-radio.is-checked.is-disabled .el-radio__inner,
.zc-opt-group .el-checkbox.is-checked.is-disabled .el-checkbox__inner {
  background: var(--opt-c, var(--el-color-primary));
  border-color: var(--opt-c, var(--el-color-primary));
}
.zc-opt-group .el-radio.is-checked.is-disabled .el-radio__label,
.zc-opt-group .el-checkbox.is-checked.is-disabled .el-checkbox__label { color: var(--opt-c, var(--el-color-primary)); }

/* ============================================================
   M20 多表聚合（管理后台列表 + 聚合设计器）
   ============================================================ */
.zc-agg-list { display: flex; flex-direction: column; gap: 10px; }
.zc-agg-card {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--zc-border); border-radius: 10px; padding: 12px 14px; background: #fff;
}
.zc-agg-card:hover { border-color: var(--zc-primary-light); box-shadow: var(--zc-shadow); }
.zc-agg-card-title { font-weight: 600; font-size: 14px; }
.zc-agg-card-title .zc-sub { font-weight: 400; margin-left: 6px; }
.zc-agg-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--zc-text-sub); flex-wrap: wrap; }
.zc-agg-card-ops { display: flex; align-items: center; gap: 2px; flex: none; }
.zc-agg-alert { margin-bottom: 10px; }
.zc-agg-name { width: 260px; }
.zc-agg-block { margin-bottom: 12px; }
.zc-agg-block-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--zc-line-soft);
}
.zc-agg-block-title { font-weight: 600; font-size: 14px; }
.zc-agg-block-head .zc-sub { margin-left: 0; flex: 1; }
.zc-agg-empty {
  padding: 12px 14px; border: 1px dashed var(--zc-border); border-radius: 8px;
  color: var(--zc-text-sub); font-size: 12px; text-align: center; background: var(--zc-surface-2);
}
.zc-agg-src, .zc-agg-join, .zc-agg-filter, .zc-agg-dim, .zc-agg-measure {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; margin-bottom: 8px; border: 1px solid var(--zc-line-soft);
  border-radius: 8px; background: var(--zc-surface-2);
}
.zc-agg-alias {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 26px; height: 24px; padding: 0 6px; border-radius: 6px;
  background: var(--zc-primary-light); color: var(--zc-primary); font-weight: 600; font-size: 12px;
}
.zc-agg-fval { display: flex; align-items: center; min-height: 24px; }
.zc-agg-stats {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px;
  font-size: 12px; color: var(--zc-text-sub);
}
.zc-agg-stats b { color: var(--zc-text); font-size: 13px; }
.zc-agg-warn {
  margin-bottom: 10px; padding: 8px 12px; border-radius: 8px; font-size: 12px;
  background: #fff7e6; border: 1px solid #ffe2a8; color: #8a5a00; line-height: 1.9;
}
.zc-agg-table { width: 100%; }

/* ============================================================
   M20 分割线「隐形」：占住位置但不显示任何内容（区别于「可见」取消勾选→整块移除）
   ============================================================ */
.zc-dv-stealth {
  width: 100%; height: 22px; border-radius: 6px;   /* 只留间距，实现"隐形但分割" */
}
.zc-dv.is-stealth {
  position: relative; opacity: .45; padding: 4px 6px; border-radius: 6px;
  border: 1px dashed var(--zc-border); background: repeating-linear-gradient(
    135deg, transparent, transparent 6px, rgba(120, 140, 180, .08) 6px, rgba(120, 140, 180, .08) 12px);
}
.zc-dv.is-stealth::after {
  content: "隐形"; position: absolute; right: 6px; top: -9px; z-index: 1;
  padding: 0 5px; border-radius: 4px; font-size: 10px; line-height: 16px;
  background: var(--zc-text-sub); color: #fff;
}
.zc-canvas-field.is-hidden-field > fieldset,
.zc-canvas-field { position: relative; }
.zc-canvas-field .zc-field-badge {
  position: absolute; right: 6px; top: -8px; z-index: 3; padding: 0 5px; border-radius: 4px;
  font-size: 10px; line-height: 16px; background: var(--zc-text-sub); color: #fff;
  pointer-events: none; letter-spacing: .3px;
}
.zc-canvas-field.is-hidden-field > div { opacity: .5; }
.zc-canvas-field.is-hidden-field {
  outline: 1px dashed var(--zc-border); outline-offset: 2px; border-radius: 6px;
}

/* M20 分割线属性：可见 / 隐形 两个开关 */
.zc-dv-flags { display: flex; align-items: center; gap: 18px; width: 100%; }
.zc-dv-flag { display: flex; align-items: center; gap: 6px; }
.zc-dv-flag-t { font-size: 12px; color: var(--zc-text); }

/* ============================================================
   M20 外壳：进入应用内部时隐藏全局左栏，主区占满宽度
   ============================================================ */
/* 隐藏全局左栏后主区沿用原有内边距，避免应用内页面内容贴边 */
.zc-main.is-full { overflow-x: hidden; }
.zc-header .zc-logo { cursor: pointer; text-decoration: none; }
.zc-header .zc-logo:hover { opacity: .85; }
.zc-user { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.zc-user-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%; font-size: 11px; font-weight: 600;
  background: var(--zc-primary); color: #fff; letter-spacing: .5px;
}

/* ============================================================
   M20 个人设置页
   ============================================================ */
.zc-profile { max-width: 860px; }
.zc-profile-hero {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.zc-profile-avatar {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 56px; height: 56px; border-radius: 50%; font-size: 18px; font-weight: 600;
  background: var(--zc-primary); color: #fff; letter-spacing: 1px;
}
.zc-profile-id { flex: 1; min-width: 220px; }
.zc-profile-name { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.zc-profile-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; font-size: 12.5px; }
.zc-profile-ops { display: flex; gap: 6px; }
.zc-profile-pwd { max-width: 420px; }
.zc-pwd-strength { font-size: 12px; margin: -6px 0 10px; color: var(--zc-text-sub); }
.zc-pwd-strength .is-lv1 { color: #e06c6c; }
.zc-pwd-strength .is-lv2 { color: #d9902a; }
.zc-pwd-strength .is-lv3 { color: #2f9e63; }
.zc-profile-links { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.zc-profile-links a { color: var(--zc-primary); cursor: pointer; font-size: 13px; }
.zc-profile-links a:hover { text-decoration: underline; }

/* ============================================================
   M20 设计器画布拖拽：落点指示 + 拖动态（原来只有"松手才见结果"）
   ============================================================ */
.zc-canvas-field.is-dragging { opacity: .42; }
.zc-canvas-field.is-drop-before::before,
.zc-canvas-field.is-drop-after::after {
  content: ''; position: absolute; top: -6px; bottom: -6px; width: 3px; z-index: 5;
  border-radius: 3px; background: var(--zc-primary);
  box-shadow: 0 0 0 3px rgba(64, 158, 255, .16);
}
.zc-canvas-field.is-drop-before::before { left: -7px; }
.zc-canvas-field.is-drop-after::after { right: -7px; }

/* ============================================================
   M21 字段引用体检（表单属性面板·字段标识与引用健康）
   ============================================================ */
.fp-h-badge.is-ok { color: #1f9d55; background: #e9f8ef; }
.fp-h-badge.is-bad { color: #d4380d; background: #fdece7; }
.zc-health-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 9px 11px; margin-bottom: 8px; border: 1px solid var(--zc-line-soft);
  border-radius: 8px; background: var(--zc-surface-2); font-size: 12.5px;
}
.zc-health-ok { color: #1f9d55; font-weight: 600; }
.zc-health-bad { color: #d4380d; font-weight: 600; }
.zc-health-warn { color: #c07a12; font-weight: 600; }
.zc-health-list { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.zc-health-li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.zc-health-li code {
  padding: 1px 5px; border-radius: 4px; font-size: 11.5px;
  background: var(--zc-surface); border: 1px solid var(--zc-line-soft); color: var(--zc-text);
}
.zc-health-where { color: var(--zc-text-sub); min-width: 170px; }
.zc-health-tip { font-size: 12px; line-height: 1.85; color: var(--zc-text-sub); }

/* ============================================================
   M19 取值方式（自定义 / 数据联动 / 公式编辑）+ 公式编辑器 + 数字格式
   ============================================================ */
/* 分段控件：一眼看出当前是哪种取值方式 */
.zc-seg {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--zc-surface-2); border: 1px solid var(--zc-line-soft); border-radius: 8px;
}
.zc-seg-btn {
  padding: 5px 14px; border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--zc-text-sub);
  font-size: 13px; font-family: inherit; transition: all .15s;
}
.zc-seg-btn:hover { color: var(--zc-text); }
.zc-seg-btn.on {
  background: var(--zc-card); color: var(--zc-primary); font-weight: 600;
  box-shadow: 0 1px 3px rgba(31, 45, 82, .1);
}
.zc-vm-item .el-form-item__label { padding-bottom: 6px; }

.zc-tip-warn {
  margin-top: 4px; padding: 7px 10px; border-radius: 7px; font-size: 12px; line-height: 1.7;
  background: #fff8e6; border: 1px solid #ffe0a3; color: #a35b06;
}

/* ---------- 公式（属性面板内联 + 编辑器弹窗） ---------- */
.zc-fx-box { width: 100%; }
.zc-fx-ops { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.zc-fx-result {
  margin-top: 8px; padding: 7px 10px; border-radius: 7px; font-size: 12.5px; line-height: 1.6;
  background: var(--zc-surface-2); border: 1px solid var(--zc-line-soft); color: var(--zc-text-sub);
  word-break: break-all;
}
.zc-fx-result.is-ok { background: #eef8f2; border-color: #bfe6cf; color: #1c7a48; }
.zc-fx-result.is-err { background: #fdf0ee; border-color: #f5c6bd; color: #c0392b; }

.zc-fx-edit { display: flex; gap: 14px; align-items: flex-start; }
.zc-fx-col { min-width: 0; }
.zc-fx-col:first-child { width: 210px; flex: none; }
.zc-fx-col.is-main { flex: 1; }
.zc-fx-t {
  font-size: 12px; font-weight: 600; color: var(--zc-text-sub);
  margin: 2px 0 7px; letter-spacing: .3px;
}
.zc-fx-col.is-main .zc-fx-t { margin-top: 12px; }
.zc-fx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.zc-fx-chip {
  padding: 4px 9px; border: 1px solid var(--zc-border); border-radius: 6px; cursor: pointer;
  background: var(--zc-card); color: var(--zc-text); font-size: 12.5px; font-family: inherit;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zc-fx-chip:hover { border-color: var(--zc-primary); color: var(--zc-primary); background: var(--zc-primary-light); }
.zc-fx-ops .zc-fx-op {
  min-width: 34px; padding: 4px 10px; border: 1px solid var(--zc-border); border-radius: 6px;
  background: var(--zc-card); color: var(--zc-text); cursor: pointer; line-height: 1.35;
  /* 等宽字体 + 大一号：逗号这种窄符号才不会看起来像个空按钮 */
  font-family: ui-monospace, Consolas, monospace; font-size: 15px; font-weight: 600;
}
.zc-fx-ops .zc-fx-op:hover { border-color: var(--zc-primary); color: var(--zc-primary); }
.zc-fx-funcs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.zc-fx-fn {
  padding: 5px 8px; border: 1px solid var(--zc-line-soft); border-radius: 6px; cursor: pointer;
  background: var(--zc-surface-2); color: var(--zc-text);
  font-size: 11.5px; font-family: ui-monospace, Consolas, monospace; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zc-fx-fn:hover { border-color: var(--zc-primary); background: var(--zc-primary-light); color: var(--zc-primary); }

.zc-fx-item .el-textarea__inner,
.zc-fx-col.is-main .el-textarea__inner {
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.7;
}

/* ---------- 数字格式（小数位 / 千分符） ---------- */
.zc-numfmt { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.zc-numfmt-row { display: flex; align-items: center; gap: 8px; }
.zc-numfmt-t { font-size: 12.5px; color: var(--zc-text); }

/* ---------- 录入端：自动取值的字段（公式 / 联动） ---------- */
.zc-auto-val .el-input__wrapper { background: var(--zc-surface-2); }
.zc-auto-tag {
  font-size: 11px; font-weight: 600; color: var(--zc-primary);
  padding: 1px 6px; border-radius: 4px; background: var(--zc-primary-light);
}
.zc-num-sep .el-input__inner { text-align: left; font-variant-numeric: tabular-nums; }

/* ============================================================
   M22 应用收藏（FR-28，借鉴简道云：应用卡片与应用内都能直接收藏）
   ============================================================ */
.zc-fav-star {
  position: absolute; top: 5px; left: 5px; width: 22px; height: 22px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  color: #c3cbd9; font-size: 14px; line-height: 22px; text-align: center;
  opacity: 0; transition: opacity .15s, color .15s;
}
.zc-app-card:hover .zc-fav-star { opacity: 1; }
.zc-fav-star:hover { background: rgba(47, 107, 255, .1); color: var(--zc-primary); }
/* 已收藏：金色常显，鼠标移上去变回灰色表示"点了会取消" */
.zc-fav-star.is-on { opacity: 1; color: #f0a020; }
.zc-fav-star.is-on:hover { color: #c3cbd9; background: rgba(31, 39, 51, .06); }
.zc-toolbar .el-button.is-fav { color: #b7791f; border-color: #f3dda8; background: #fffaf0; }

/* 取值方式分段控件：三等分，选中的那格不再显得挤 */
.zc-seg { display: flex; width: 100%; }
.zc-seg-btn { flex: 1; min-width: 0; text-align: center; padding: 5px 6px; }

/* 数字格式：标签左对齐、开关对齐，右边自然收尾 */
.zc-numfmt-row { display: flex; align-items: center; gap: 8px; }
.zc-numfmt-t { min-width: 68px; font-size: 12.5px; color: var(--zc-text); }
.zc-numfmt-n { width: 72px; }

/* 公式/联动的角标与输入内容留点距离，不然看着像挤在一起 */
.zc-auto-val .el-input__prefix { margin-right: 8px; }
.zc-auto-val .el-input__prefix-inner { pointer-events: none; }

/* ============================================================
   M23 运营总控台：租户清单区 + 只读下钻三页（租户工作台 / 应用内 / 数据报表）
   ============================================================ */
.zc-op-sec-t {
  margin: 18px 0 10px; font-size: 14px; font-weight: 600; color: var(--zc-text);
  padding-left: 9px; border-left: 3px solid var(--zc-primary);
}

/* ---------- 三页通用外壳：面包屑 + 标题行 ---------- */
.zc-op { padding: 20px 24px 28px; }
.zc-op-crumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin-bottom: 12px; }
.zc-op-crumb-a { color: var(--zc-primary); text-decoration: none; }
.zc-op-crumb-a:hover { text-decoration: underline; }
.zc-op-crumb-sep { color: var(--zc-text-sub); }
.zc-op-crumb-cur { color: var(--zc-text-sub); }

.zc-op-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.zc-op-head h2 { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.zc-op-head-r { display: flex; gap: 8px; flex-wrap: wrap; }
.zc-op-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--zc-text-sub); }
.zc-op-meta b { color: var(--zc-text); font-weight: 600; }

/* 只读提示条：一眼看出这里动不了手 */
.zc-op-ro {
  display: flex; align-items: center; gap: 8px; margin: 14px 0 16px;
  padding: 8px 12px; border-radius: 8px; font-size: 12.5px; line-height: 1.6;
  background: #fff8e6; border: 1px solid #ffe0a3; color: #a35b06;
}
.zc-op-ro-tag {
  flex: none; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700;
  background: #f0a020; color: #fff; letter-spacing: .5px;
}

/* 租户工作台顶部的三个小统计 */
.zc-op-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.zc-op-stat {
  min-width: 96px; padding: 10px 14px; border-radius: 10px;
  background: var(--zc-card); border: 1px solid var(--zc-line-soft);
}
.zc-op-stat-v { font-size: 19px; font-weight: 600; color: var(--zc-text); }
.zc-op-stat-l { font-size: 12px; color: var(--zc-text-sub); margin-top: 2px; }
.zc-op-card-meta { font-size: 11.5px; color: var(--zc-text-sub); margin-top: -4px; }

/* ---------- 应用内：左表单清单 + 右数据 ---------- */
.zc-op-app {
  display: flex; gap: 14px; align-items: stretch;
  min-height: 460px; margin-top: 4px;
}
.zc-op-forms {
  width: 218px; flex: none; padding: 12px 10px; border-radius: 10px;
  background: var(--zc-card); border: 1px solid var(--zc-line-soft);
}
.zc-op-forms-t { font-size: 12px; font-weight: 600; color: var(--zc-text-sub); padding: 0 6px 8px; }
.zc-op-forms-empty { font-size: 12.5px; color: var(--zc-text-sub); padding: 6px; }
.zc-op-form {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 13px;
}
.zc-op-form:hover { background: var(--zc-surface-2); }
.zc-op-form.on { background: var(--zc-primary-light); color: var(--zc-primary); font-weight: 600; }
.zc-op-form-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-op-form-c { flex: none; font-size: 11.5px; color: var(--zc-text-sub); font-weight: 400; }
.zc-op-form.on .zc-op-form-c { color: var(--zc-primary); }

.zc-op-data {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  padding: 12px 14px 10px; border-radius: 10px;
  background: var(--zc-card); border: 1px solid var(--zc-line-soft);
}
.zc-op-data .zc-toolbar { padding: 0; margin-bottom: 10px; border: 0; background: transparent; }
.zc-op-tip { font-size: 12.5px; color: var(--zc-text-sub); margin-left: 4px; }
.zc-op-data .el-table { flex: 1; min-height: 0; }
.zc-op-pager { display: flex; justify-content: flex-end; padding-top: 10px; }

/* 只读表格里的选项色标签 */
.zc-op-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.zc-op-tag {
  padding: 1px 8px; border-radius: 10px; font-size: 12px;
  background: var(--zc-surface-2); color: var(--zc-text);
}
.zc-op-table .el-table__row { cursor: pointer; }

/* 记录详情抽屉 */
.zc-op-detail-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--zc-line-soft); }
.zc-op-detail-k { width: 96px; flex: none; font-size: 12.5px; color: var(--zc-text-sub); }
.zc-op-detail-v { flex: 1; min-width: 0; font-size: 13px; word-break: break-all; }

/* ---------- 数据报表 ---------- */
.zc-op-kpis { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 16px; }
.zc-op-kpi {
  flex: 1 1 128px; min-width: 128px; padding: 12px 14px; border-radius: 10px;
  background: var(--zc-card); border: 1px solid var(--zc-line-soft);
}
.zc-op-kpi-v { font-size: 20px; font-weight: 600; }
.zc-op-kpi-l { font-size: 12px; color: var(--zc-text-sub); margin-top: 2px; }

.zc-op-charts { display: flex; gap: 14px; flex-wrap: wrap; }
.zc-op-charts > .zc-op-card { flex: 1 1 380px; }
.zc-op-card {
  padding: 14px 16px 12px; border-radius: 10px; margin-bottom: 14px;
  background: var(--zc-card); border: 1px solid var(--zc-line-soft);
}
.zc-op-card-t { font-size: 13.5px; font-weight: 600; margin-bottom: 8px; }
.zc-op-chart { height: 232px; width: 100%; }
.zc-op-cols { display: flex; gap: 14px; flex-wrap: wrap; }
.zc-op-cols > .zc-op-card { flex: 1 1 320px; }

.zc-op-quota-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.zc-op-quota-n { width: 78px; flex: none; font-size: 12.5px; color: var(--zc-text); }
.zc-op-quota-v { width: 108px; flex: none; text-align: right; font-size: 12px; color: var(--zc-text-sub); }

.zc-op-ai-row { display: flex; align-items: baseline; gap: 8px; padding: 7px 0; font-size: 13px; }
.zc-op-ai-row > span:first-child { width: 118px; flex: none; color: var(--zc-text-sub); font-size: 12.5px; }
.zc-op-ai-row b { font-size: 15px; }
.zc-op-ai-sub { font-size: 11.5px; color: var(--zc-text-sub); }
.zc-op-ai-row .is-ok { color: #1c7a48; }
.zc-op-ai-row .is-bad { color: #c0392b; }

/* ============================================================
   M24 审批节点字段权限（FR-32）
   设计器：节点卡片 + 字段权限面板；待办：查看并处理抽屉
   ============================================================ */

/* ---------- 设计器：节点列表 ---------- */
.zc-wf-nodes { display: flex; flex-direction: column; gap: 10px; }
.zc-wf-node {
  border: 1px solid var(--zc-line-soft); border-radius: 10px;
  background: var(--zc-surface-2); padding: 10px 12px 6px;
}
.zc-wf-node-h { display: flex; align-items: center; gap: 8px; }
.zc-wf-node-no {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--zc-primary); color: #fff;
  font-size: 11.5px; font-weight: 600; line-height: 20px; text-align: center;
}
.zc-wf-node-h .el-input { flex: 1; }
.zc-wf-node .el-form-item { margin-bottom: 10px; }
.zc-wf-node .el-form-item__label { padding-bottom: 2px; font-size: 12.5px; color: var(--zc-text-sub); }
.zc-wf-perm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- 设计器：字段权限面板 ---------- */
.zc-wf-perm-list {
  max-height: 52vh; overflow: auto; padding-right: 4px;
  border-top: 1px solid var(--zc-line-soft); margin-top: 4px;
}
.zc-wf-perm-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 2px; border-bottom: 1px dashed var(--zc-line-soft);
}
.zc-wf-perm-l {
  width: 168px; flex: none; font-size: 13px; color: var(--zc-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zc-wf-perm-t {
  width: 62px; flex: none; font-size: 11.5px; color: var(--zc-text-sub);
  padding: 1px 6px; border-radius: 4px; background: var(--zc-surface-2); text-align: center;
}
.zc-wf-perm-row .el-radio-group { margin-left: auto; }

/* ---------- M58 表单权限设定 ---------- */
.zc-fp-perm-title {
  font-size: 13px; font-weight: 600; color: var(--zc-text); margin: 6px 0 2px;
}
.zc-fp-perm-list {
  max-height: 34vh; overflow: auto; padding-right: 4px;
  border-top: 1px solid var(--zc-line-soft);
}
.zc-fp-perm-row {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 2px; border-bottom: 1px dashed var(--zc-line-soft);
}
.zc-fp-perm-label {
  flex: 1; min-width: 0; font-size: 13px; color: var(--zc-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zc-fp-perm-form {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px;
}
.zc-fp-perm-form .el-form-item { margin-bottom: 12px; }

/* ---------- M60 关联字段候选配置 ---------- */
.zc-link-row { display: flex; gap: 8px; width: 100%; }
.zc-link-conds { width: 100%; }
.zc-link-cond { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.zc-link-cond-field { flex: 1 1 88px; min-width: 78px; }
.zc-link-cond-op { flex: 0 0 76px; }
.zc-link-cond-val { flex: 1 1 90px; min-width: 78px; }
.zc-link-cond-del { flex: 0 0 auto; margin-left: auto; }
.zc-link-add { font-size: 12.5px; color: var(--zc-primary); cursor: pointer; }

/* ---------- 待办：节点标记与改动痕迹 ---------- */
.zc-wf-node-tag {
  margin-left: 8px; padding: 1px 7px; border-radius: 4px;
  font-size: 11.5px; font-weight: 500; vertical-align: 1px;
  background: var(--zc-primary-light); color: var(--zc-primary);
}
.zc-wf-changes { margin-top: 3px; font-size: 11.5px; color: var(--zc-text-sub); }

/* ---------- 待办：查看并处理抽屉 ---------- */
.zc-rv { padding-bottom: 8px; }
.zc-rv-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.zc-rv-node { font-size: 13.5px; font-weight: 600; color: var(--zc-text); }

.zc-rv-tip {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 9px 12px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.7;
  background: var(--zc-primary-light); border: 1px solid #cfe0ff; color: #2458b8;
}
.zc-rv-tip.is-ro { background: var(--zc-surface-2); border-color: var(--zc-line-soft); color: var(--zc-text-sub); }
.zc-rv-edit-tag {
  padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 700;
  background: var(--zc-primary); color: #fff;
}

.zc-rv-form .el-form-item__label { font-size: 12.5px; color: var(--zc-text-sub); padding-bottom: 3px; }
.zc-rv-field { position: relative; }
/* 可填字段左边一道细线，扫一眼就知道哪几个能动手 */
.zc-rv-field-tag {
  position: absolute; right: 0; top: 0; z-index: 2;
  padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700;
  background: var(--zc-primary); color: #fff; line-height: 17px;
}
.zc-rv-field:has(.zc-rv-field-tag) > .zc-field-render .el-form-item__label { color: var(--zc-primary); }
.zc-rv-field:has(.zc-rv-field-tag) { padding-left: 0; }

.zc-rv-cmt { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--zc-line-soft); }
.zc-rv-cmt-t { font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.el-drawer__footer .el-button + .el-button { margin-left: 8px; }

/* ============================================================
   M24 审批抽屉：只读 / 可填 一眼分清
   非技术用户最怕"看着能改、点了没反应"，所以把两类的视觉差拉开。
   ============================================================ */
.zc-rv-field.is-edit {
  border-left: 3px solid var(--zc-primary);
  margin-left: -13px; padding-left: 10px;
}
/* 只读字段：虚线浅边 + 淡底，和真正的输入框明显不同 */
.zc-rv-field.is-ro .el-input__wrapper,
.zc-rv-field.is-ro .el-textarea__inner,
.zc-rv-field.is-ro .el-select__wrapper,
.zc-rv-field.is-ro .el-input-number .el-input__wrapper {
  background: var(--zc-surface-2);
  box-shadow: none !important;
  border: 1px dashed var(--zc-line-soft);
  color: var(--zc-text-sub);
}
.zc-rv-field.is-ro .el-form-item__label { color: var(--zc-text-sub); }
/* 只读字段不显示必填星号：这一步本来就不该他去填 */
.zc-rv-field.is-ro .el-form-item.is-required .el-form-item__label::before { display: none; }
/* 选项类字段：色点与文字一起压淡（自定义选项色是内联样式，只能用透明度压） */
.zc-rv-field.is-ro .el-radio,
.zc-rv-field.is-ro .el-checkbox { opacity: .5; }
.zc-rv-field.is-ro .el-radio.is-disabled .el-radio__label,
.zc-rv-field.is-ro .el-checkbox.is-disabled .el-checkbox__label { color: var(--zc-text-sub) !important; }
/* 可填字段的「可填」角标挪到输入框右上角，避免与长字段名撞在一起 */
.zc-rv-field .zc-rv-field-tag {
  position: absolute; right: 0; top: 1px; z-index: 3;
  padding: 0 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700;
  background: var(--zc-primary); color: #fff; line-height: 17px;
}
.zc-rv-field.is-edit .el-form-item__label { padding-right: 52px; }

/* ============================================================
   M25 登录页「记住密码」
   ============================================================ */
.zc-auth-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: -4px 0 14px; flex-wrap: wrap;
}
.zc-auth-hint { font-size: 11.5px; color: var(--zc-text-sub); }

/* ============================================================
   M25 表单分组（文件夹）+ 应用详情页的仪表盘磁贴
   ============================================================ */
.zc-fg-sec { margin-top: 6px; }
.zc-fg-sec + .zc-fg-sec { margin-top: 12px; }
.zc-fg-head {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 7px 8px; border-radius: 7px; user-select: none;
  background: var(--zc-surface-2); border: 1px solid var(--zc-line-soft);
}
.zc-fg-head:hover { border-color: var(--zc-primary); }
.zc-fg-caret { font-size: 11px; color: var(--zc-text-sub); transition: transform .15s; }
.zc-fg-caret.is-off { transform: rotate(-90deg); }
.zc-fg-name { font-size: 13px; font-weight: 600; color: var(--zc-text); }
.zc-fg-count {
  padding: 0 6px; border-radius: 9px; font-size: 11px;
  background: var(--zc-card); color: var(--zc-text-sub); border: 1px solid var(--zc-line-soft);
}
.zc-fg-ops { margin-left: auto; display: flex; gap: 2px; }
.zc-fg-body { padding: 8px 0 2px 10px; }
.zc-fg-empty { padding: 10px 4px; font-size: 12.5px; color: var(--zc-text-sub); }

/* 侧栏里的分组小标题 */
.zc-side-sub {
  display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none;
  padding: 5px 10px 5px 8px; margin-top: 4px;
  font-size: 11.5px; color: var(--zc-text-sub); border-radius: 6px;
}
.zc-side-sub:hover { background: var(--zc-surface-2); color: var(--zc-text); }
.zc-side-sub-n { margin-left: auto; font-size: 10.5px; color: var(--zc-text-sub); }
.zc-side-forms .zc-side-item { padding-left: 20px; }

/* 应用详情页的仪表盘磁贴 */
.zc-dash-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.zc-dash-tile {
  flex: 0 0 calc(33.333% - 7px); min-width: 240px;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--zc-card); border: 1px solid var(--zc-line-soft);
  transition: border-color .15s, box-shadow .15s;
}
.zc-dash-tile:hover { border-color: var(--zc-primary); box-shadow: 0 3px 12px rgba(31, 45, 82, .07); }
.zc-dash-tile-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.zc-dash-tile-ico {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--zc-primary-light); color: var(--zc-primary);
}
.zc-dash-tile-ico svg { width: 19px; height: 19px; }
.zc-dash-tile-info { min-width: 0; }
.zc-dash-tile-name {
  font-size: 13.5px; font-weight: 600; color: var(--zc-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zc-dash-tile-meta { font-size: 11.5px; color: var(--zc-text-sub); margin-top: 1px; }
.zc-dash-tile-ops { flex: none; display: flex; gap: 0; }
@media (max-width: 1200px) { .zc-dash-tile { flex: 0 0 calc(50% - 5px); } }
@media (max-width: 760px) { .zc-dash-tile { flex: 1 1 100%; } }

/* ============================================================
   M25 仪表盘：查看页（卡片网格）+ 设计页（左中右三栏）
   ============================================================ */
.zc-dash-title { font-size: 15px; font-weight: 600; color: var(--zc-text); }

.zc-dash-view {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; align-items: start;
}
.zc-dash-card {
  padding: 14px 16px 12px; border-radius: 12px; min-width: 0;
  background: var(--zc-card); border: 1px solid var(--zc-line-soft);
}
.zc-dash-card.is-span1 { grid-column: span 1; }
.zc-dash-card.is-span2 { grid-column: span 2; }
.zc-dash-card-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.zc-dash-card-t { font-size: 13px; font-weight: 600; color: var(--zc-text); }
.zc-dash-card-src { font-size: 11px; color: var(--zc-text-sub); flex: none; }

.zc-dash-stat { display: flex; align-items: baseline; gap: 8px; padding: 6px 0 10px; }
.zc-dash-stat-v {
  font-size: 30px; font-weight: 700; color: var(--zc-primary);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.zc-dash-stat-m { font-size: 12px; color: var(--zc-text-sub); }
.zc-dash-chart { width: 100%; height: 236px; }
.zc-dash-empty {
  padding: 26px 6px; text-align: center;
  font-size: 12.5px; color: var(--zc-text-sub);
}
.zc-dash-more { margin-top: 6px; font-size: 11.5px; color: var(--zc-text-sub); text-align: right; }

@media (max-width: 1200px) {
  .zc-dash-view { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zc-dash-card.is-span2 { grid-column: span 2; }
}
@media (max-width: 760px) {
  .zc-dash-view { grid-template-columns: 1fr; }
  .zc-dash-card.is-span1, .zc-dash-card.is-span2 { grid-column: span 1; }
}

/* ---------- 设计页 ---------- */
.zc-dd {
  display: grid; gap: 14px;
  grid-template-columns: 232px minmax(0, 1fr) 300px;
  align-items: start;
}
.zc-dd-palette, .zc-dd-canvas, .zc-dd-props {
  padding: 14px; border-radius: 12px;
  background: var(--zc-card); border: 1px solid var(--zc-line-soft);
}
.zc-dd-t {
  font-size: 12px; font-weight: 600; color: var(--zc-text-sub);
  letter-spacing: .3px; margin-bottom: 10px;
}
.zc-dd-add {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; margin-bottom: 8px; cursor: pointer; text-align: left;
  background: var(--zc-surface-2); border: 1px solid var(--zc-line-soft);
  border-radius: 9px; font-family: inherit; color: var(--zc-text);
}
.zc-dd-add:hover { border-color: var(--zc-primary); background: var(--zc-primary-light); }
.zc-dd-add-ico {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--zc-card); border: 1px solid var(--zc-line-soft);
  font-size: 13px; color: var(--zc-primary);
}
.zc-dd-add b { display: block; font-size: 13px; font-weight: 600; }
.zc-dd-add small { display: block; font-size: 11px; color: var(--zc-text-sub); margin-top: 1px; line-height: 1.5; }
.zc-dd-add-plus { margin-left: auto; color: var(--zc-text-sub); font-size: 14px; }
.zc-dd-hint { margin-top: 10px; font-size: 11.5px; line-height: 1.7; color: var(--zc-text-sub); }

.zc-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px; border-radius: 9px; cursor: pointer;
  background: var(--zc-card); border: 1px solid var(--zc-line-soft);
}
.zc-dd-item:hover { border-color: var(--zc-primary); }
.zc-dd-item.on { border-color: var(--zc-primary); background: var(--zc-primary-light); }
.zc-dd-item-main { flex: 1; min-width: 0; }
.zc-dd-item-t { font-size: 13px; font-weight: 600; color: var(--zc-text); }
.zc-dd-item-meta {
  font-size: 11.5px; color: var(--zc-text-sub); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zc-dd-item-ops { flex: none; display: flex; gap: 0; }
.zc-dd-preview { margin-top: 6px; padding-top: 12px; border-top: 1px dashed var(--zc-line-soft); }
@media (max-width: 1180px) {
  .zc-dd { grid-template-columns: 200px minmax(0, 1fr); }
  .zc-dd-props { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .zc-dd { grid-template-columns: 1fr; }
}

/* ============================================================
   M25 设计器：字段总数 / 套餐额度 / 子表单投放条
   ============================================================ */
.zc-fc {
  float: right; font-size: 11.5px; font-weight: 500; color: var(--zc-text-sub);
  padding: 1px 9px; border-radius: 10px; background: var(--zc-surface-2);
  border: 1px solid var(--zc-line-soft);
}
.zc-fc.is-full { color: #c0392b; border-color: #f5c6bd; background: #fdf0ee; }

/* 拖字段到子表单上时出现的投放条：只在拖动过程中渲染，平时不占位置 */
.zc-sf-drop {
  position: absolute; left: 10px; right: 10px; bottom: 8px; z-index: 6;
  padding: 8px 10px; pointer-events: auto;
  border: 1.5px dashed var(--zc-primary); border-radius: 8px;
  background: var(--zc-primary-light); color: var(--zc-primary);
  font-size: 12px; text-align: center; line-height: 1.5;
}
.zc-sf-drop.is-over { background: var(--zc-primary); color: #fff; border-style: solid; }

/* 顶部页签行里的字段计数：接近/达到上限时变色提醒 */
.zc-fd-count.is-full { color: #c0392b; font-weight: 600; }

/* 子表单投放区改成覆盖整块：拖到子表单任意位置都算"放进这一列" */
.zc-sf-drop {
  left: 2px; right: 2px; top: 2px; bottom: 2px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 12px; font-size: 12.5px;
}

/* 同一行的卡片等高：数字卡撑满行高、内容垂直居中，避免"小卡在上、右边大图留白" */
.zc-dash-view { align-items: stretch; }
.zc-dash-card { display: flex; flex-direction: column; }
.zc-dash-card > .zc-dash-stat { flex: 1; align-items: center; padding: 4px 0 6px; }
.zc-dash-card > .zc-dash-chart { flex: 1; min-height: 236px; }
.zc-dash-card > .el-table { flex: 1; }

/* 设计页三栏给个最小高度，内容少时也不至于空得发慌 */
.zc-dd-canvas, .zc-dd-props { min-height: 420px; }
.zc-auth-row .zc-auth-hint { margin-left: 6px; }

/* 设计页三栏给个最小高度，内容少时也不至于空得发慌 */
.zc-dd-canvas, .zc-dd-props { min-height: 420px; }
.zc-auth-row .zc-auth-hint { margin-left: 6px; }

/* ==========================================================================
   M26 表单设计器：按简道云的版式重做（顶栏 / 左字段面板 / 中画布 / 右属性）
   结构、间距、字号、控件形态对齐简道云；强调色跟随租户主题，不写死品牌绿。
   ========================================================================== */

/* ---------- 整体：白底三栏，不再是一张灰底大卡片 ---------- */
.zc-fd-page { background: var(--zc-card); padding: 0; }
.zc-fd-page .zc-fd-top {
  height: 46px; padding: 0 14px; margin: 0;
  display: flex; align-items: center; gap: 12px;
  background: var(--zc-card); border-bottom: 1px solid var(--zc-line-soft);
  border-radius: 0;
}

/* 左：返回箭头 + 表单名（就地改名，平时像纯文字） */
.zc-fd-crumb { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 0 auto; }
.zc-fd-back {
  width: 24px; height: 24px; flex: none; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--zc-text-sub); text-decoration: none;
}
.zc-fd-back svg { width: 16px; height: 16px; }
.zc-fd-back:hover { background: var(--zc-surface-2); color: var(--zc-text); }
.zc-fd-name { width: 168px; }
.zc-fd-name .el-input__wrapper {
  background: transparent; box-shadow: none; padding: 0 6px;
}
.zc-fd-name .el-input__wrapper:hover { box-shadow: 0 0 0 1px var(--zc-line-soft) inset; }
.zc-fd-name .el-input__inner {
  font-size: 14px; font-weight: 600; color: var(--zc-text); height: 28px;
}

/* 中：页签居中，当前项主色 + 下划线 */
.zc-fd-tabs {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  flex: 1; margin: 0; height: 100%; padding: 0;
  border: 0; background: transparent;
}
.zc-fd-tabs a {
  position: relative; height: 100%; display: inline-flex; align-items: center;
  font-size: 13.5px; color: var(--zc-text-sub); text-decoration: none; cursor: pointer;
  padding: 0 2px;
}
.zc-fd-tabs a:hover { color: var(--zc-text); }
.zc-fd-tabs a.on { color: var(--zc-primary); font-weight: 600; }
.zc-fd-tabs a.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--zc-primary); border-radius: 2px 2px 0 0;
}
.zc-fd-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* ---------- 三栏 ---------- */
.zc-designer-body {
  display: flex; align-items: stretch; gap: 0;
  height: calc(100vh - 46px - 46px); min-height: 520px;
  background: var(--zc-card);
}

/* ---------- 左：字段面板 ---------- */
.zc-fp {
  flex: 0 0 186px; width: 186px; padding: 10px 10px 12px;
  background: var(--zc-card); border-right: 1px solid var(--zc-line-soft);
  overflow-y: auto; display: flex; flex-direction: column; gap: 2px;
}
.zc-fp-guide {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--zc-text-sub); padding: 2px 4px 8px;
}
.zc-fp-guide-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--zc-primary); opacity: .7;
}
.zc-fp-group { margin-bottom: 6px; }
.zc-fp .zc-palette-title {
  font-size: 11.5px; font-weight: 500; color: var(--zc-text-sub);
  margin: 8px 4px 6px; padding: 0; letter-spacing: .2px;
}
.zc-fp-items { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 4px; }
/* 面板项：无边框、hover 才浮起来 */
.zc-fp .zc-palette-item {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 6px; border: 0; border-radius: 5px; background: transparent;
  font-size: 12px; color: var(--zc-text); cursor: grab; line-height: 1.3;
  min-width: 0;
}
.zc-fp .zc-palette-item .ic {
  flex: none; width: 15px; height: 15px; display: inline-flex;
  align-items: center; justify-content: center; color: var(--zc-text-sub);
}
.zc-fp .zc-palette-item .ic svg { width: 15px; height: 15px; }
.zc-fp .zc-palette-item .lb {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zc-fp .zc-palette-item:hover {
  background: var(--zc-surface-2); color: var(--zc-primary);
}
.zc-fp .zc-palette-item:hover .ic { color: var(--zc-primary); }

/* 底部：字段回收站 + 用量 */
.zc-fp-recycle {
  margin: 6px 0 0; padding: 8px 6px; border-top: 1px solid var(--zc-line-soft);
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--zc-text-sub); cursor: pointer; border-radius: 5px;
}
.zc-fp-recycle .ic, .zc-fp-recycle .ic svg { width: 15px; height: 15px; }
.zc-fp-recycle:hover { background: var(--zc-surface-2); color: var(--zc-text); }
.zc-fp-recycle-n {
  margin-left: auto; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--zc-primary); color: #fff; font-size: 10.5px; line-height: 16px; text-align: center;
}
.zc-fp-tip {
  margin-top: auto; padding: 10px 6px 0; border-top: 1px solid var(--zc-line-soft);
  font-size: 11.5px; color: var(--zc-text-sub);
}
.zc-fp-tip-full { color: #c0392b; margin-left: 4px; }

/* ---------- 中：画布（白纸一张，不再套灰底卡片） ---------- */
.zc-canvas {
  flex: 1; min-width: 0; padding: 0; margin: 0;
  background: var(--zc-card); overflow-y: auto; border: 0; border-radius: 0;
}
.zc-canvas-doc { max-width: 880px; margin: 0 auto; padding: 22px 30px 80px; }
.zc-canvas-doc-h {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.zc-form-title {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--zc-primary);
  line-height: 1.4; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zc-canvas-doc .zc-fc {
  font-size: 11.5px; color: var(--zc-text-sub);
  background: transparent; border: 0; padding: 0;
}
.zc-canvas-doc .zc-fc.is-full { color: #c0392b; }

/* 字段网格：12 列栅格（字段宽度靠 .is-wN 的 grid-column 生效），三列起步 */
.zc-canvas-doc .zc-canvas-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px 18px;
}
.zc-canvas-doc .zc-canvas-field {
  border: 1px dashed transparent; border-radius: 6px;
  padding: 2px 6px 4px; margin: 0;
}
.zc-canvas-doc .zc-canvas-field:hover {
  border-color: var(--zc-primary); background: transparent;
}
.zc-canvas-doc .zc-canvas-field.active {
  border-color: var(--zc-primary); background: rgba(47, 107, 255, .035);
}
/* 画布里的输入框是"白底细边框"，不是禁用态的灰底 */
.zc-canvas .el-input__wrapper,
.zc-canvas .el-textarea__inner,
.zc-canvas .el-select__wrapper {
  background: var(--zc-card);
  box-shadow: 0 0 0 1px var(--zc-line-soft) inset;
  border-radius: 4px; min-height: 32px;
}
.zc-canvas .el-form-item__label {
  font-size: 12.5px; color: var(--zc-text); padding: 0 0 4px; line-height: 1.5;
}
.zc-canvas .el-form-item { margin-bottom: 0; }
/* 必填星号贴着标签右侧、红色 */
.zc-canvas .el-form-item.is-required .el-form-item__label::before {
  order: 2; margin: 0 0 0 3px; color: #f24e4e;
}
.zc-canvas .el-form-item__label { display: inline-flex; align-items: center; }
.zc-canvas-empty {
  padding: 70px 16px; text-align: center; color: var(--zc-text-sub); font-size: 13px;
}
.zc-canvas-empty-ic { width: 56px; height: 56px; margin: 0 auto 10px; color: var(--zc-line-soft); }
.zc-canvas-empty-ic svg, .zc-canvas-empty-ic { }
.zc-canvas-empty p { margin: 4px 0; }
.zc-canvas-empty .zc-sub { font-size: 12px; color: var(--zc-text-sub); }

/* 分组标题（divider 的 section 风格）：主色小标题 + 横线贯穿 */
.zc-dv--section {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0 6px; margin: 0;
}
.zc-dv--section .zc-dv-title {
  flex: none; font-size: 13px; font-weight: 600;
  color: var(--zc-primary); letter-spacing: .2px;
}
.zc-dv--section .zc-dv-line {
  flex: 1; height: 1px; border: 0;
  background: linear-gradient(to right, var(--zc-primary) 0%, var(--zc-line-soft) 90%);
  opacity: .6;
}
.zc-canvas .zc-dv-item { margin-bottom: 0; }
.zc-canvas .zc-dv-item .el-form-item__content { margin: 0 !important; }

/* ---------- 右：属性面板（紧凑，标签小字在上） ---------- */
.zc-props {
  flex: 0 0 216px; width: 216px; padding: 0;
  background: var(--zc-card); border-left: 1px solid var(--zc-line-soft);
  overflow: hidden; display: flex; flex-direction: column;
}
.zc-props .zc-props-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--zc-line-soft);
  margin: 0; padding: 0 10px; height: 40px; align-items: stretch;
}
.zc-props .zc-props-tabs a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  position: relative; font-size: 12.5px; color: var(--zc-text-sub); cursor: pointer;
}
.zc-props .zc-props-tabs a.on { color: var(--zc-text); font-weight: 600; }
.zc-props .zc-props-tabs a.on::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--zc-primary); border-radius: 2px 2px 0 0;
}
/* 属性区：滚动容器 + 紧凑间距 */
.zc-props > .el-form, .zc-props > .zc-fprops {
  flex: 1; overflow-y: auto; padding: 12px 14px 40px;
}
.zc-props > .zc-props-tabs { flex: none; }
.zc-props > .zc-props-empty { flex: 1; overflow-y: auto; }
.zc-props .el-form-item { margin-bottom: 12px; }
.zc-props .el-form-item__label {
  font-size: 12px; color: var(--zc-text-sub); padding: 0 0 3px; line-height: 1.5;
}
.zc-props .el-input__inner, .zc-props .el-textarea__inner { font-size: 12.5px; }
.zc-props .el-input__wrapper, .zc-props .el-select__wrapper { min-height: 28px; }
.zc-props .el-radio-button__inner { padding: 5px 9px; font-size: 12px; }
.zc-props-empty { padding: 40px 16px; text-align: center; color: var(--zc-text-sub); font-size: 12.5px; }

/* 预览弹窗 */
.zc-pv-tip {
  margin-bottom: 14px; padding: 8px 12px; border-radius: 8px;
  background: var(--zc-primary-light); color: var(--zc-primary);
  font-size: 12.5px; border: 1px solid #cfe0ff;
}
.zc-pv-field { padding: 2px 0 6px; }
.zc-pv-doc .zc-canvas-grid { display: flex; flex-wrap: wrap; gap: 12px 18px; }

/* 回收站条目 */
.zc-rec-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 4px; border-bottom: 1px dashed var(--zc-line-soft);
}
.zc-rec-ic, .zc-rec-ic svg { width: 15px; height: 15px; color: var(--zc-text-sub); }
.zc-rec-name { flex: 1; font-size: 13px; color: var(--zc-text); }
.zc-rec-type { font-size: 11.5px; color: var(--zc-text-sub); }

/* 页签行里的字段计数（保留旧类名，供既有断言使用） */
.zc-fd-count.is-full { color: #c0392b; font-weight: 600; }

/* ---------- M26 修正 ---------- */
/* 面板项再收紧一点：186px 两列要装下「单行文本」这四个字 */
.zc-fp .zc-palette-item {
  padding: 5px 4px; gap: 4px; font-size: 11.5px;
}
.zc-fp .zc-palette-item .ic, .zc-fp .zc-palette-item .ic svg { width: 14px; height: 14px; }
.zc-fp-items { gap: 1px 2px; }
.zc-fp .zc-palette-title { margin: 8px 4px 4px; }

/* 画布里的控件是"预览"，不是"禁用"：强制白底细边框，别用 Element 的禁用灰 */
.zc-canvas .el-input.is-disabled .el-input__wrapper,
.zc-canvas .el-select .el-select__wrapper.is-disabled,
.zc-canvas .el-textarea.is-disabled .el-textarea__inner,
.zc-canvas .el-input-number.is-disabled .el-input__wrapper {
  background-color: var(--zc-card) !important;
  box-shadow: 0 0 0 1px var(--zc-line-soft) inset !important;
  cursor: default;
}
.zc-canvas .el-input.is-disabled .el-input__inner,
.zc-canvas .el-textarea.is-disabled .el-textarea__inner {
  color: var(--zc-text-sub) !important;
  -webkit-text-fill-color: var(--zc-text-sub);
}
.zc-canvas .el-select__placeholder.is-transparent { color: var(--zc-placeholder, #b6bfcd); }
.zc-canvas .el-radio.is-disabled .el-radio__label,
.zc-canvas .el-checkbox.is-disabled .el-checkbox__label { color: var(--zc-text-sub) !important; }

/* 设计器占满可视高度（全局 header 46 + 设计器顶栏 46） */
.zc-fd-page .zc-designer-body { height: calc(100vh - 84px); }

/* ---------- M26 二次微调：对齐简道云的细节 ---------- */
/* 必填星号回到标签左边（简道云是 * 门店名称） */
.zc-canvas .el-form-item.is-required .el-form-item__label::before {
  order: -1; margin: 0 3px 0 0; color: #f24e4e;
}
/* 单选/多选竖排：1/3 列宽里横排会折行，看着乱 */
.zc-canvas .el-radio-group,
.zc-canvas .el-checkbox-group {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.zc-canvas .el-radio, .zc-canvas .el-checkbox { margin-right: 0; height: 22px; }
/* 行距再松一点（简道云字段之间留白更大） */
.zc-canvas-doc .zc-canvas-grid { gap: 16px 20px; }
/* 分区标题的横线用实色细线，贯穿到右边界 */
.zc-dv--section .zc-dv-line {
  background: var(--zc-line-soft); opacity: 1;
  border-top: 1px solid var(--zc-line-soft); height: 0;
}
.zc-dv--section { padding: 14px 0 4px; gap: 12px; }
.zc-dv--section .zc-dv-title { font-size: 12.5px; }

/* ---------- M26 二次微调：对齐简道云的细节 ---------- */
/* 必填星号回到标签左边（简道云是 * 门店名称） */
.zc-canvas .el-form-item.is-required .el-form-item__label::before {
  order: -1; margin: 0 3px 0 0; color: #f24e4e;
}
/* 单选/多选竖排：1/3 列宽里横排会折行，看着乱 */
.zc-canvas .el-radio-group,
.zc-canvas .el-checkbox-group {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.zc-canvas .el-radio, .zc-canvas .el-checkbox { margin-right: 0; height: 22px; }
/* 行距再松一点（简道云字段之间留白更大） */
.zc-canvas-doc .zc-canvas-grid { gap: 16px 20px; }
/* 分区标题的横线用实色细线，贯穿到右边界 */
.zc-dv--section .zc-dv-line {
  background: var(--zc-line-soft); opacity: 1;
  border-top: 1px solid var(--zc-line-soft); height: 0;
}
.zc-dv--section { padding: 14px 0 4px; gap: 12px; }
.zc-dv--section .zc-dv-title { font-size: 12.5px; }

/* ---------- M26 三次微调：窄面板里的按钮组不再挤爆 ---------- */
/* 字段宽度 6 档 / 取值方式 3 档：统一三列排布，两行内解决 */
.zc-props .el-radio-group {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px; width: 100%;
}
.zc-props .el-radio-button { width: 100%; }
.zc-props .el-radio-button__inner {
  width: 100%; padding: 4px 0; font-size: 11px; line-height: 1.5;
  border: 1px solid var(--zc-line-soft); border-radius: 4px !important;
  box-shadow: none !important;
}
.zc-props .el-radio-button.is-active .el-radio-button__inner {
  background: var(--zc-primary); border-color: var(--zc-primary); color: #fff;
  box-shadow: none !important;
}
/* 选中字段的操作按钮浮到框外上方，不再压住字段名 */
.zc-canvas-doc .zc-canvas-field { padding-top: 5px; }
.zc-canvas-doc .zc-canvas-field-ops {
  top: -11px; right: 2px; padding: 1px 5px; border-radius: 6px;
  background: var(--zc-card); border: 1px solid var(--zc-line-soft);
  box-shadow: 0 2px 6px rgba(31, 45, 82, .08); z-index: 4;
}
.zc-canvas-doc .zc-canvas-field-ops .el-button { font-size: 11.5px; padding: 2px 4px; height: 20px; }

/* 取值方式三段按钮：同样三列，字号压到 11px 不换行 */
.zc-props .zc-seg {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px; width: 100%;
}
.zc-props .zc-seg-btn {
  width: 100%; padding: 4px 0; font-size: 11px; line-height: 1.5;
  border: 1px solid var(--zc-line-soft); border-radius: 4px; background: var(--zc-card);
}
.zc-props .zc-seg-btn.on {
  background: var(--zc-primary); border-color: var(--zc-primary); color: #fff;
}

/* 选中态用实线（简道云也是实线框） */
.zc-canvas-doc .zc-canvas-field.active {
  border-style: solid; border-color: var(--zc-primary);
  background: rgba(47, 107, 255, .028);
}
.zc-canvas-doc .zc-canvas-field:hover { border-style: solid; }

/* 属性面板在 flex 布局里固定，不要再 sticky（sticky 会干扰滚动定位） */
.zc-fd-page .zc-props { position: relative; top: auto; align-self: stretch; }

/* 属性面板不能裁剪：选项调色板是绝对定位弹层，overflow:hidden 会把它切掉 */
.zc-fd-page .zc-props { overflow: visible; z-index: 6; }
.zc-fd-page .zc-props > .el-form,
.zc-fd-page .zc-props > .zc-fprops { overflow-y: auto; }

/* 属性面板加宽一点、改成整体滚动：选项调色板是绝对定位弹层，需要面板内留得下它 */
.zc-fd-page .zc-props { flex: 0 0 248px; width: 248px; overflow-y: auto; overflow-x: hidden; z-index: 7; }
.zc-fd-page .zc-props > .el-form,
.zc-fd-page .zc-props > .zc-fprops { overflow: visible; padding: 12px 14px 28px; }
.zc-fd-page .zc-props > .zc-props-tabs { position: sticky; top: 0; background: var(--zc-card); z-index: 8; }
.zc-fd-page .zc-swatch-pop { right: 10px; width: 186px; z-index: 40; }

/* 收尾微调：操作按钮再抬高一点、顶栏按钮用 4px 圆角（简道云同款） */
.zc-canvas-doc .zc-canvas-field-ops { top: -14px; }
.zc-fd-right .el-button { border-radius: 4px; height: 28px; padding: 0 12px; font-size: 12.5px; }
.zc-fd-right .el-button--primary { box-shadow: none; }

/* ==========================================================================
   M27 去掉顶部横条（对齐简道云：顶栏就在页面里，不额外占一行）
   - 全局品牌与账号收进左栏：顶部品牌行、底部账号行
   - 应用内部（左栏隐藏）由应用侧栏底部 + 页面顶栏右侧的账号区承担
   ========================================================================== */

/* ---------- 左栏：品牌 ---------- */
.zc-nav { position: relative; }
.zc-nav .zc-nav-brand { cursor: pointer; user-select: none; }
.zc-nav .zc-nav-brand {
  display: flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 10px; margin: 0 0 8px;
  font-size: 15px; font-weight: 700; letter-spacing: .2px;
  color: var(--zc-primary-dark); text-decoration: none;
  border-bottom: 1px solid var(--zc-line-soft);
  border-radius: 0 0 6px 6px;
}
.zc-nav .zc-nav-brand:hover { background: transparent; }
.zc-nav-brand-ico { font-size: 15px; line-height: 1; }

/* ---------- 左栏：底部账号 ---------- */
.zc-nav-foot {
  margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--zc-line-soft);
}
.zc-nav-foot .el-dropdown { width: 100%; }
.zc-nav-foot .zc-user {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 6px 8px; border-radius: 8px; cursor: pointer;
}
.zc-nav-foot .zc-user:hover { background: var(--zc-surface-2); }
.zc-nav-user-main { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.zc-nav-user-name {
  font-size: 13px; color: var(--zc-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zc-nav-user-sub {
  font-size: 11px; color: var(--zc-text-sub);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zc-nav-user-more { flex: none; color: var(--zc-text-sub); font-size: 14px; letter-spacing: 1px; }

/* ---------- 页面顶栏里的账号区（通知 / 帮助 / 头像） ---------- */
.zc-uchip { display: flex; align-items: center; gap: 2px; }
.zc-uchip-btn {
  position: relative; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--zc-text-sub); text-decoration: none;
}
.zc-uchip-btn svg { width: 16px; height: 16px; }
.zc-uchip-btn:hover { background: var(--zc-surface-2); color: var(--zc-text); }
.zc-uchip-dot {
  position: absolute; top: 5px; right: 6px; width: 6px; height: 6px;
  border-radius: 50%; background: #f24e4e; border: 1px solid var(--zc-card);
}
.zc-uchip-user { cursor: pointer; padding: 2px; border-radius: 50%; }
.zc-uchip-user:hover { background: var(--zc-surface-2); }
.zc-uchip .zc-user-avatar { width: 26px; height: 26px; font-size: 11.5px; }

/* 顶栏里的分组竖线 */
.zc-fd-sep { width: 1px; height: 18px; background: var(--zc-line-soft); margin: 0 4px; }

/* ==========================================================================
   M27-b 顶栏对齐简道云截图：右侧只有铃铛/帮助/头像，保存与预览改为浮动
   ========================================================================== */
.zc-fd-page .zc-fd-top { height: 48px; padding: 0 12px 0 10px; gap: 10px; }

/* 表单名：平时是纯文字，不显示输入框边框；点进去才有编辑感 */
.zc-fd-name .el-input__wrapper,
.zc-fd-name .el-input__wrapper:hover,
.zc-fd-name .el-input__wrapper.is-focus {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 4px;
  padding: 0 6px;
}
.zc-fd-name .el-input__wrapper.is-focus { background: var(--zc-surface-2) !important; }
.zc-fd-name .el-input__inner {
  font-size: 15px; font-weight: 500; color: #1f2329; height: 30px;
}

/* 页签：纯文字 + 底部 2px 下划线，不要背景块和圆角 */
.zc-fd-tabs a,
.zc-fd-tabs a.on {
  background: transparent !important;
  border-radius: 0;
}

/* 浮动操作条 */
.zc-fd-float {
  position: fixed; right: 266px; bottom: 20px; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 10px;
  background: var(--zc-card);
  border: 1px solid var(--zc-line-soft);
  box-shadow: 0 6px 20px rgba(31, 45, 82, .12);
}
.zc-fd-float .el-button { border-radius: 4px; height: 28px; padding: 0 14px; font-size: 12.5px; }

/* 左栏：宽度与字号贴近原版（200px / 12px） */
.zc-fp { flex: 0 0 200px; width: 200px; }
.zc-fp .zc-palette-item { font-size: 12px; }
.zc-fp .zc-palette-item .ic, .zc-fp .zc-palette-item .ic svg { width: 15px; height: 15px; }

/* 画布：标签深灰 13px、必填星号红色在左 */
.zc-canvas .el-form-item__label { font-size: 13px; color: #1f2329; }
.zc-canvas .el-form-item.is-required .el-form-item__label::before {
  order: -1; margin: 0 4px 0 0; color: #f24e4e;
}
.zc-canvas-doc .zc-canvas-grid { gap: 18px 20px; }

/* 右栏窄 8px 给画布，贴近原版比例 */
.zc-fd-page .zc-props { flex: 0 0 240px; width: 240px; }

/* 顶栏表单名：彻底不留描边（含浏览器默认 focus 环） */
.zc-fd-name .el-input__wrapper { outline: none !important; border: 0 !important; }
.zc-fd-name .el-input__inner { border: 0 !important; outline: none !important; }

/* ---------- M27-c 画布顶部只留字段计数（不再重复表单名） ---------- */
.zc-canvas-doc-h { justify-content: flex-end; margin-bottom: 10px; }
.zc-canvas-doc { padding-top: 16px; }

/* 左栏底部：回收站与用量贴在一起，不留中缝 */
.zc-fp-recycle { margin: 6px 0 0; margin-top: auto; }
.zc-fp-tip { margin-top: 0; padding-top: 8px; border-top: 0; }

/* ---------- M27-d 左栏：字段搜索 + 面板不空着 ---------- */
.zc-fp-search { margin: 0 0 8px; }
.zc-fp-search .el-input__wrapper { min-height: 28px; border-radius: 5px; }
.zc-fp-search .el-input__inner { font-size: 12px; }
.zc-fp-guide { padding-bottom: 6px; }

/* 高级折叠区里的子块：去掉重复边框，做得更轻 */
.zc-fset-nest .zc-fset { border: 0; box-shadow: none; padding: 0; margin-bottom: 12px; }
.zc-fset-nest .zc-fset-title { padding: 0 0 6px; font-size: 12.5px; }

/* ---------- M27-e 左栏：回收站紧跟字段列表，底部空白视为"列表结束" ---------- */
.zc-fp-recycle { margin-top: 12px; }
.zc-fp-tip { margin-top: 2px; }

/* ==========================================================================
   M28 设计器三栏严格 1:3:1（按用户给的规格重排）
   - 左 : 中 : 右 = 1 : 3 : 1，随窗口自适应（各栏有最小宽度兜底）
   - 只有画布滚动；左栏列表与右栏属性各自滚动，回收站 / 保存区固定不动
   - 组件项：圆角长方形 + 浅灰外框；各区间距压紧，不留无效空白
   ========================================================================== */
.zc-fd-page .zc-designer-body {
  display: grid;
  grid-template-columns: minmax(176px, .8fr) minmax(0, 4.2fr) minmax(232px, 1fr);
  gap: 0; align-items: stretch;
  height: calc(100vh - 84px); min-height: 460px;
  overflow: hidden;
  background: var(--zc-card);
}
/* 三栏宽度一律交给栅格，清掉之前写死的 flex/width */
.zc-fd-page .zc-designer-body > .zc-fp,
.zc-fd-page .zc-designer-body > .zc-canvas,
.zc-fd-page .zc-designer-body > .zc-props {
  width: auto; flex: initial; max-width: none;
}

/* ---------- 左栏 ---------- */
.zc-fd-page .zc-fp {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  background: var(--zc-card); border-right: 1px solid var(--zc-line-soft);
}
.zc-fp-head { flex: none; padding: 8px 8px 7px; border-bottom: 1px solid var(--zc-line-soft); }
.zc-fp-head .zc-fp-search { margin: 0; }
.zc-fp-head .zc-fp-search .el-input__wrapper { min-height: 26px; }
.zc-fp-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 8px 10px; }
.zc-fp-foot {
  flex: none; padding: 6px 8px 7px;
  border-top: 1px solid var(--zc-line-soft); background: var(--zc-card);
}

/* 组件项：圆角长方形 + 灰白外框，两列紧凑 */
.zc-fp .zc-fp-items { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.zc-fp .zc-palette-item {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 6px; min-width: 0;
  border: 1px solid var(--zc-line-soft); border-radius: 6px;
  background: var(--zc-card);
  font-size: 12px; line-height: 1.35; color: var(--zc-text);
  cursor: grab;
}
.zc-fp .zc-palette-item:hover {
  border-color: var(--zc-primary); color: var(--zc-primary);
  background: var(--zc-primary-light);
}
.zc-fp .zc-palette-item .ic,
.zc-fp .zc-palette-item .ic svg { width: 14px; height: 14px; flex: none; }
.zc-fp .zc-palette-title { margin: 8px 2px 5px; font-size: 11.5px; }
.zc-fp .zc-fp-group { margin-bottom: 2px; }

/* 回收站与用量：紧凑两行，固定底部 */
.zc-fp .zc-fp-recycle {
  margin: 0; padding: 5px 6px; border: 1px solid var(--zc-line-soft); border-radius: 6px;
  font-size: 12px; gap: 5px;
}
.zc-fp .zc-fp-tip {
  margin: 5px 0 0; padding: 0 2px; border: 0;
  font-size: 11.5px; color: var(--zc-text-sub);
}

/* ---------- 中栏：只有它滚动 ---------- */
.zc-fd-page .zc-canvas {
  min-width: 0; padding: 0; overflow-y: auto; overflow-x: hidden;
  background: var(--zc-card); border: 0; border-radius: 0;
}
.zc-fd-page .zc-canvas-doc { max-width: 1060px; margin: 0 auto; padding: 12px 20px 48px; }
.zc-fd-page .zc-canvas-doc-h { margin: 0 0 6px; }
.zc-fd-page .zc-canvas-doc .zc-fc { font-size: 11.5px; }

/* ---------- 右栏：顶部按钮 + 标签固定，属性区滚动 ---------- */
.zc-fd-page .zc-props {
  display: flex; flex-direction: column;
  padding: 0; overflow: hidden;
  background: var(--zc-card); border-left: 1px solid var(--zc-line-soft);
}
.zc-props-head { flex: none; border-bottom: 1px solid var(--zc-line-soft); }
.zc-props-ops { display: flex; gap: 6px; padding: 8px 10px 6px; }
.zc-props-ops .el-button {
  flex: 1 1 0; margin: 0; height: 28px; padding: 0;
  border-radius: 4px; font-size: 12.5px;
}
.zc-fd-page .zc-props-tabs {
  display: flex; height: 32px; padding: 0 4px; margin: 0;
  align-items: stretch; border: 0; background: transparent;
}
.zc-fd-page .zc-props-tabs a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center;
  position: relative; font-size: 12.5px; color: var(--zc-text-sub); cursor: pointer;
}
.zc-fd-page .zc-props-tabs a.on { color: var(--zc-text); font-weight: 600; }
.zc-fd-page .zc-props-tabs a.on::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px;
  height: 2px; background: var(--zc-primary); border-radius: 2px 2px 0 0;
}
.zc-props-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 12px 28px; }
.zc-props-body > .zc-fprops,
.zc-props-body > .el-form { padding: 0; overflow: visible; }

/* 属性区里的分组与行再紧一档 */
.zc-props-body .zc-fset { margin-bottom: 2px; }
.zc-props-body .zc-fset-title { padding: 7px 0 5px; }
.zc-props-body .el-form-item { margin-bottom: 10px; }

/* 画布里的字段上下留白收紧（用户要求不允许大片空隙） */
.zc-canvas-doc .zc-canvas-grid { gap: 12px 16px; }
.zc-canvas-doc .zc-canvas-field { padding: 4px 6px 2px; }

/* ---------- M28-b 紧凑再收一档 + 画布底部落点 ---------- */
.zc-fp .zc-fp-items { gap: 4px; }
.zc-fp .zc-palette-item { padding: 4px 6px; }

.zc-canvas-end {
  margin: 14px 0 0; padding: 16px 12px; text-align: center;
  border: 1px dashed var(--zc-line-soft); border-radius: 8px;
  font-size: 12.5px; color: var(--zc-text-sub); background: var(--zc-surface-2);
}
.zc-canvas-end.is-over { border-color: var(--zc-primary); color: var(--zc-primary); background: var(--zc-primary-light); }
.zc-canvas-end-ic { margin-right: 4px; font-weight: 600; }

/* ---------- M29：子表单列多时横向滚动（最多 100 列） ---------- */
.zc-subform { overflow-x: auto; }
.zc-subform .zc-sf-table { table-layout: fixed; }
.zc-sf-th, .zc-sf-td { min-width: 0; }
/* M49：设计器里子表单的预览控件是 disabled 的。让这些控件 pointer-events:none，
   点击会"穿透"到上层宿主（.zc-fr-host-sf）按坐标命中（等价于原来蒙层的行为），
   保证各种控件（下拉/数字/文本）点选列都生效；原生滚动条不受影响、可拖动。 */
.zc-canvas .zc-fr-host-sf .zc-sf-td .el-input.is-disabled,
.zc-canvas .zc-fr-host-sf .zc-sf-td .el-input-number.is-disabled,
.zc-canvas .zc-fr-host-sf .zc-sf-td .el-select.is-disabled { pointer-events: none; }

/* ==========================================================================
   M29-3 多选字段：Shift 连选 / Ctrl 多选 + 批量改宽度/必填
   ========================================================================== */
/* 选中块：统一浅蓝底；锚点（右栏单字段属性的对象）框更深一点 */
.zc-canvas-doc .zc-canvas-field.active {
  border: 1px solid var(--zc-primary);
  background: rgba(47, 107, 255, .05);
}
.zc-canvas-doc .zc-canvas-field.is-anchor {
  border-color: var(--zc-primary-dark, var(--zc-primary));
  box-shadow: 0 0 0 1px var(--zc-primary) inset;
}

/* 右栏：多选时顶部只显示计数与"取消选择" */
.zc-fd-page .zc-props-tabs-multi {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; font-size: 12.5px; color: var(--zc-text);
}
.zc-props-tabs-multi .zc-sel-clear {
  font-size: 12px; color: var(--zc-primary); cursor: pointer;
}
.zc-props-tabs-multi .zc-sel-clear:hover { text-decoration: underline; }

.zc-batch { padding: 0 0 8px; }
.zc-batch-sec { padding: 11px 0; border-bottom: 1px dashed var(--zc-line-soft); }
.zc-batch-sec:last-child { border-bottom: 0; }
.zc-batch-t { font-size: 12px; color: var(--zc-text-sub); margin-bottom: 8px; }
.zc-batch-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.zc-batch-btn {
  padding: 6px 0; font-family: inherit; font-size: 12px; line-height: 1.4;
  color: var(--zc-text); background: var(--zc-card);
  border: 1px solid var(--zc-line-soft); border-radius: 5px; cursor: pointer;
}
.zc-batch-btn:hover {
  border-color: var(--zc-primary); color: var(--zc-primary); background: var(--zc-primary-light);
}
.zc-batch-tip { margin-top: 7px; font-size: 11.5px; line-height: 1.75; color: var(--zc-text-sub); }
.zc-batch-help .zc-batch-tip b { color: var(--zc-text); font-weight: 600; }

/* ==========================================================================
   M29-4 子表单子列：点列头选中，右栏给列属性
   ========================================================================== */
.zc-colprops-h {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid var(--zc-line-soft);
  font-size: 12.5px; color: var(--zc-text);
}
.zc-colprops-h a { font-size: 12px; color: var(--zc-primary); cursor: pointer; }
.zc-colprops-h a:hover { text-decoration: underline; }

/* 画布上被选中的列头 */
.zc-canvas .zc-sf-th.is-picked {
  background: var(--zc-primary-light) !important;
  color: var(--zc-primary) !important;
  box-shadow: inset 0 -2px 0 var(--zc-primary);
}

/* ==========================================================================
   M30 字段复制 / 50 色板 + 自定义色 / 选项默认选中
   ========================================================================== */

/* ---------- 字段右上角：复制 + 删除（图标按钮，参考简道云） ---------- */
.zc-fops {
  width: 22px; height: 22px; padding: 0; border: 0; background: transparent;
  border-radius: 5px; color: var(--zc-text-sub); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.zc-fops svg { width: 15px; height: 15px; }
.zc-fops:hover { background: var(--zc-primary-light); color: var(--zc-primary); }
.zc-fops.is-danger:hover { background: #fee2e2; color: #dc2626; }
.zc-canvas-doc .zc-canvas-field-ops { padding: 2px 3px; gap: 2px; }

/* ---------- 选项行：默认选中勾选框 ---------- */
.zc-opt-def {
  flex: none; width: 18px; height: 18px; padding: 0;
  border: 1px solid var(--zc-line-soft); border-radius: 4px;
  background: var(--zc-card); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1;
}
.zc-opt-def:hover { border-color: var(--zc-primary); }
.zc-opt-def.on { background: var(--zc-primary); border-color: var(--zc-primary); }

/* ---------- 色板：50 色 + 最近自定义 ---------- */
.zc-fd-page .zc-swatch-pop { width: 216px; padding: 10px 10px 9px; }
.zc-swatch-title {
  font-size: 11.5px; color: var(--zc-text-sub); margin: 2px 0 6px;
}
.zc-swatch-title + .zc-swatch-panel { margin-bottom: 10px; }
.zc-swatch-panel { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.zc-swatch-cell { width: 100%; height: 21px; border-radius: 5px; }
.zc-swatch-cell.on::after { font-size: 11px; }

/* 最近用过的自定义色 + 取色器入口 */
.zc-swatch-recent {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin-bottom: 8px;
}
.zc-swatch-add {
  position: relative; height: 21px; border-radius: 5px; cursor: pointer;
  border: 1px dashed var(--zc-line-soft); background: var(--zc-card);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--zc-text-sub);
}
.zc-swatch-add:hover { border-color: var(--zc-primary); color: var(--zc-primary); }
.zc-swatch-add input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: 0; padding: 0;
}
.zc-swatch-custom { margin-top: 0; }

/* ---------- M30 修正：色板弹层对齐选项行（原来相对色点定位，会压到画布上） ---------- */
.zc-opt-row { position: relative; }
.zc-opt-color { position: static; }
.zc-fd-page .zc-swatch-pop {
  right: 0; top: calc(100% + 6px); left: auto; width: 206px;
}
.zc-swatch-pop::after { display: none; }
.zc-swatch-panel { grid-template-columns: repeat(8, 1fr); }
.zc-swatch-title { margin: 0 0 6px; }

/* ==========================================================================
   M31 色板：10 列 × 5 行（50 色），色块改成圆形
   ========================================================================== */
.zc-fd-page .zc-swatch-pop { width: 240px; padding: 9px 10px 10px; }
.zc-swatch-panel,
.zc-swatch-recent {
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 3px;
}
.zc-swatch-cell {
  height: auto; aspect-ratio: 1 / 1; border-radius: 50%;
}
.zc-swatch-add {
  height: auto; aspect-ratio: 1 / 1; border-radius: 50%;
}
.zc-swatch-cell.on::after { font-size: 10px; }

/* 色板浮层：固定定位，按屏幕坐标算位置（面板内部会被横向裁切） */
.zc-fd-page .zc-swatch-pop {
  position: fixed; right: auto; left: 0; top: 0;
  width: 252px; z-index: 3000;
}

/* ==========================================================================
   M32 选项文字块：把选项色铺在文字背景上（前面的圆圈/方框填充不变）
   ========================================================================== */
.zc-opt-pill {
  display: inline-block;
  padding: 1px 9px; border-radius: 5px;
  line-height: 1.55; font-size: 12.5px;
  transition: font-weight .12s;
}
.zc-opt-pill.on { font-weight: 700; }

/* 横排时别把间距撑太开（Element 默认 30px） */
.zc-opt-group .el-radio,
.zc-opt-group .el-checkbox { margin-right: 14px; }
.zc-opt-group { row-gap: 6px; }

/* 设计器画布里是竖排，选项块左对齐 */
.zc-canvas .zc-opt-group .el-radio,
.zc-canvas .zc-opt-group .el-checkbox { margin-right: 0; }
.zc-canvas .zc-opt-pill { font-size: 12.5px; }

/* 选项行更紧凑：Element 默认 32px 行高，竖排时看着很散 */
.zc-opt-group .el-radio,
.zc-opt-group .el-checkbox {
  height: auto; margin-bottom: 3px; align-items: center;
}
.zc-opt-group .el-radio__label,
.zc-opt-group .el-checkbox__label { padding-left: 6px; }
.zc-opt-group .el-radio:last-child,
.zc-opt-group .el-checkbox:last-child { margin-bottom: 0; }
/* 文字块内部不要再额外留白 */
.zc-opt-pill { margin: 0; }

/* ==========================================================================
   M33 选项字段：纵向/横向分布 + 去掉左侧色条 + 浅色补淡蓝描边 + 预览全屏
   ========================================================================== */
/* 1) 文字块只留背景色，不再有左侧色条（浅色改成整圈淡蓝描边） */
.zc-opt-pill {
  --pill: var(--zc-primary);
  display: inline-block; max-width: 100%;
  padding: 1px 9px; border-radius: 5px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--pill) 12%, #fff);
  color: color-mix(in srgb, var(--pill) 78%, #1f2733);
  font-size: 12.5px; line-height: 1.55;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: font-weight .12s;
}
.zc-opt-pill.on { font-weight: 700; }
.zc-opt-pill.is-light { border-color: #a9c8f5; }
/* 列表/详情里的彩色标签：淡底 + 同色描边 */
.zc-opt-pill.is-tint {
  background: color-mix(in srgb, var(--pill) 14%, #fff);
  color: color-mix(in srgb, var(--pill) 74%, #1f2733);
  border-color: color-mix(in srgb, var(--pill) 32%, #fff);
}

/* 2) 分布方式：纵向一行一个 / 横向自动换行 */
.zc-opt-group { display: flex; flex-wrap: wrap; row-gap: 6px; }
.zc-opt-group.is-v { flex-direction: column; align-items: flex-start; row-gap: 3px; }
.zc-opt-group.is-h { flex-direction: row; }
.zc-opt-group.is-v .el-radio,
.zc-opt-group.is-v .el-checkbox { margin-right: 0; }
.zc-opt-group.is-h .el-radio,
.zc-opt-group.is-h .el-checkbox { margin-right: 14px; }

/* 3) 圆圈/方框描边：浅色选项用淡蓝环，否则白底上看不见边界 */
.zc-opt-group .el-radio__inner,
.zc-opt-group .el-checkbox__inner {
  border-color: var(--opt-ring, var(--opt-c, var(--el-border-color)));
}
.zc-opt-group .el-radio.is-checked .el-radio__inner,
.zc-opt-group .el-checkbox.is-checked .el-checkbox__inner {
  border-color: var(--opt-ring, var(--opt-c, var(--el-color-primary)));
}
.zc-opt-group .el-radio.is-disabled .el-radio__inner,
.zc-opt-group .el-checkbox.is-disabled .el-checkbox__inner {
  border-color: var(--opt-ring, var(--opt-c, var(--el-disabled-border-color)));
}
.zc-opt-group .el-radio.is-checked.is-disabled .el-radio__inner,
.zc-opt-group .el-checkbox.is-checked.is-disabled .el-checkbox__inner {
  border-color: var(--opt-ring, var(--opt-c, var(--el-color-primary)));
}

/* 4) 下拉字段「横向排列」：下拉面板里选项横向铺开 */
.zc-opt-popper.is-h .el-select-dropdown__list {
  display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 6px 10px;
}
.zc-opt-popper.is-h .el-select-dropdown__item {
  width: auto; height: auto; padding: 1px 2px; line-height: 1.6; border-radius: 7px;
}
.zc-opt-popper.is-h .el-select-dropdown__item.is-hovering { background: #f2f6ff; }

/* 5) 属性面板「分布方式」两段按钮（白底 + 选中项描边） */
.zc-layout-item .zc-seg--line {
  display: flex; width: 100%; gap: 0; padding: 0;
  background: #fff; border: 1px solid var(--zc-border); border-radius: 6px;
}
.zc-seg--line .zc-seg-btn {
  flex: 1; min-width: 0; padding: 7px 0; border-radius: 5px;
  color: var(--zc-text); font-size: 12.5px; background: transparent; box-shadow: none;
}
.zc-seg--line .zc-seg-btn.on {
  color: var(--zc-primary); font-weight: 600; background: #fff;
  box-shadow: inset 0 0 0 1px var(--zc-primary);
}

/* 6) 预览弹窗全屏 */
.zc-pv-head { display: flex; align-items: center; justify-content: space-between; padding-right: 26px; }
.zc-pv-title { font-size: 15px; font-weight: 600; color: var(--zc-text); }
.zc-pv-fs {
  width: 26px; height: 26px; padding: 5px; border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: var(--zc-text-sub); cursor: pointer; line-height: 0;
}
.zc-pv-fs svg { width: 14px; height: 14px; }
.zc-pv-fs:hover { color: var(--zc-primary); border-color: var(--zc-border); background: var(--zc-surface-2); }
.zc-pv-fs.on { color: var(--zc-primary); }
.zc-pv-dialog.is-full .el-dialog__body {
  max-width: 1100px; margin: 0 auto; padding: 6px 24px 12px;
  box-sizing: border-box; height: calc(100vh - 150px); overflow-y: auto;
}
.zc-pv-dialog.is-full .el-dialog__footer { text-align: center; }

/* 全屏时标题与内容左边界对齐（关闭按钮仍在窗口右上角） */
.zc-pv-dialog.is-full .el-dialog__header {
  max-width: 1100px; margin: 0 auto; width: 100%; box-sizing: border-box;
}

/* ==========================================================================
   M35 子表单：画布里显示输入框 / 列选中与悬停高亮 / 行号列
   ========================================================================== */
/* 1) 设计器画布里的子表单要像真实录入：白底输入框 + 占位显示列名（disabled 也不发灰） */
.zc-canvas .zc-subform .el-input.is-disabled .el-input__wrapper,
.zc-canvas .zc-subform .el-select.is-disabled .el-select__wrapper,
.zc-canvas .zc-subform .el-input-number.is-disabled .el-input__wrapper,
.zc-canvas .zc-subform .el-date-editor.is-disabled .el-input__wrapper {
  background: #fff; box-shadow: 0 0 0 1px var(--zc-border) inset;
}
.zc-canvas .zc-subform .el-input__inner,
.zc-canvas .zc-subform .el-select__placeholder {
  color: #b9c2d0; -webkit-text-fill-color: #b9c2d0;
}
.zc-canvas .zc-subform .el-input__inner::placeholder { color: #b9c2d0; }
.zc-canvas .zc-sf-table { border-collapse: separate; border-spacing: 0; }
.zc-sf-req { color: #e34d4d; margin-right: 2px; }

/* 行号列：窄、灰底、居中 */
.zc-sf-idx {
  width: 38px; text-align: center; color: #98a2b3; font-size: 12px;
  background: #fbfcfe; font-weight: 400;
}
.zc-sf-th.zc-sf-idx { background: #f2f4f8; }

/* 公式列（M44）：淡蓝底提示"这里能自动算"，但值可手填，文字用正常色 */
.zc-sf-td.is-calc .el-input__wrapper { background: #f5f8ff; }
.zc-sf-td.is-calc .el-input__inner { color: inherit; -webkit-text-fill-color: currentColor; }
/* 列头 ƒ：标明这是公式列（可手填，留空自动算） */
.zc-sf-fx {
  display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 4px;
  font-size: 10.5px; line-height: 15px; font-style: italic; font-weight: 600;
  color: var(--zc-primary); background: #eef4ff; vertical-align: 1px;
}

/* 2) 悬停：表格里 → 整列浅色提示；外框/标题 → 整组提示（等宽描边，不跳动） */
.zc-canvas .zc-sf-th.is-col-hover,
.zc-canvas .zc-sf-td.is-col-hover {
  background: #f2f7ff; box-shadow: inset 0 0 0 1px #b9d0f5;
}
.zc-canvas-doc .zc-canvas-field.is-group-hover {
  border-color: var(--zc-primary);
  box-shadow: 0 0 0 1px var(--zc-primary);
  background: rgba(47, 107, 255, .04);
}

/* 3) 选中列：列头 + 每一格连成一条实线蓝框；字段容器改成虚线，和「选中整组」区别开 */
.zc-canvas .zc-sf-th.is-picked {
  background: #eaf2ff; color: var(--zc-primary);
  box-shadow: inset 0 0 0 2px var(--zc-primary);
}
.zc-canvas .zc-sf-td.is-picked {
  background: #eef4ff;
  box-shadow: inset 2px 0 0 var(--zc-primary), inset -2px 0 0 var(--zc-primary);
}
.zc-canvas .zc-sf-td.is-picked.is-pick-end {
  box-shadow: inset 2px 0 0 var(--zc-primary), inset -2px 0 0 var(--zc-primary),
              inset 0 -2px 0 var(--zc-primary);
}
.zc-canvas-doc .zc-canvas-field.has-col-sel {
  border: 1px dashed #9db8ea;
  background: #fff;
  box-shadow: none;
}
.zc-canvas-doc .zc-canvas-field.has-col-sel.is-anchor { box-shadow: none; }

/* ==========================================================================
   M36 公式编辑器（FR-48）：顶部公式区 + 三栏（变量 / 函数 / 指引）
   浅灰商务风、紧凑排版；不放大面积留白，不加底部额外横条
   ========================================================================== */
.zc-fe-dialog .el-dialog__header { padding: 12px 16px 11px; margin: 0; border-bottom: 1px solid #eef1f6; }
.zc-fe-dialog .el-dialog__body { padding: 10px 16px 4px; }
.zc-fe-dialog .el-dialog__footer { padding: 8px 16px 12px; }
.zc-fe-head { display: flex; align-items: baseline; gap: 10px; padding-right: 62px; }
.zc-fe-h1 { font-size: 16px; font-weight: 600; color: #1f2937; }
.zc-fe-h2 { font-size: 12.5px; color: #98a2b3; }
.zc-fe-fs {
  position: absolute; right: 46px; top: 10px; width: 26px; height: 26px; padding: 5px;
  border: 1px solid transparent; border-radius: 6px; background: transparent;
  color: #8b98a8; cursor: pointer; line-height: 0;
}
.zc-fe-fs:hover { color: var(--zc-primary); border-color: #e3e8f0; background: #f5f7fa; }
.zc-fe-fs svg { width: 14px; height: 14px; }

.zc-fe-body { display: flex; flex-direction: column; height: 560px; min-height: 0; }
.zc-fe-dialog.is-full .zc-fe-body { height: calc(100vh - 150px); }
/* 上区（公式编辑）：高度由分割比例控制，卡片撑满 */
.zc-fe-upper { display: flex; flex-direction: column; flex: 0 0 auto; min-height: 0; }
.zc-fe-upper > .zc-fe-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* 分割条：hover/拖动变蓝，光标变上下箭头 */
.zc-fe-split { flex: none; height: 12px; position: relative; cursor: row-resize; }
.zc-fe-split::before {
  content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 2px;
  background: #e5e9f0; border-radius: 2px; transition: background .12s;
}
.zc-fe-split:hover::before, .zc-fe-split.dragging::before { background: var(--zc-primary); }
.zc-fe-split::after {
  content: ''; position: absolute; left: 50%; top: 3px; width: 34px; height: 6px;
  margin-left: -17px; border-radius: 3px; background: #e2e7ef; transition: background .12s;
}
.zc-fe-split:hover::after, .zc-fe-split.dragging::after { background: #b9c4d4; }
.zc-fe-body.is-max .zc-fe-split, .zc-fe-body.is-max .zc-fe-panes { display: none; }
.zc-fe-tools-sep { width: 1px; height: 14px; margin: 0 4px; background: #e3e8f0; }
.zc-fe-maxbtn { color: #8b98a8; }
.zc-fe-maxbtn svg { width: 14px; height: 14px; }

/* ---------- 公式卡片 ---------- */
.zc-fe-card { border: 1px solid #e5e9f0; border-radius: 8px; background: #fff; overflow: hidden; }
.zc-fe-card-h {
  display: flex; align-items: center; justify-content: space-between;
  height: 38px; padding: 0 10px 0 12px; background: #f7f8fa; border-bottom: 1px solid #eef1f6;
}
.zc-fe-out { font-size: 13.5px; font-weight: 600; color: #1f2937; }
.zc-fe-tools { display: flex; align-items: center; gap: 2px; }
.zc-fe-tools button {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 8px;
  border: 0; border-radius: 5px; background: transparent; color: #5b6675;
  font-size: 12.5px; font-family: inherit; cursor: pointer;
}
.zc-fe-tools button:hover { background: #eceff4; color: #1f2937; }
.zc-fe-tools button.is-on { color: var(--zc-primary); background: #edf3ff; }
.zc-fe-ico { display: inline-flex; }
.zc-fe-ico svg { width: 14px; height: 14px; display: block; }

.zc-fe-edit { position: relative; flex: 1 1 auto; min-height: 70px; }
.zc-fe-hl, .zc-fe-input {
  position: absolute; inset: 0; margin: 0; padding: 9px 12px;
  font-family: Consolas, "Courier New", "Microsoft YaHei", monospace;
  font-size: 13px; line-height: 22px; letter-spacing: 0;
  white-space: pre-wrap; word-break: break-all;
}
.zc-fe-hl { overflow: auto; color: #1f2937; pointer-events: none; }
.zc-fe-input {
  border: 0; outline: 0; resize: none; overflow: auto; background: transparent;
  color: transparent; caret-color: #1f2937;
}
.zc-fe-ph { color: #b8c0cc; }
.zc-fe-hl .tk-field { background: #e8f1ff; color: #2f6bff; border-radius: 3px; }
.zc-fe-hl .tk-fn { color: #8b5cf6; font-weight: 600; }
.zc-fe-hl .tk-str { color: #0f9b8e; }
.zc-fe-hl .tk-num { color: #d97706; }
.zc-fe-hl .tk-op { color: #6b7280; }

.zc-fe-note {
  padding: 6px 12px; font-size: 12px; color: #5b6675;
  background: #fbfcfe; border-top: 1px dashed #eef1f6;
}
.zc-fe-note b { margin-right: 6px; color: #98a2b3; font-weight: 500; }

.zc-fe-debug { padding: 8px 12px; border-top: 1px solid #eef1f6; background: #fbfcfe; }
.zc-fe-dbg-row { display: flex; align-items: center; gap: 8px; }
.zc-fe-badge { flex: none; font-size: 11.5px; line-height: 18px; padding: 0 8px; border-radius: 9px; }
.zc-fe-badge.is-ok { background: #e8f7ee; color: #1a7f47; }
.zc-fe-badge.is-err { background: #fdecec; color: #c0392b; }
.zc-fe-badge.is-empty { background: #eef1f6; color: #6b7280; }
.zc-fe-dbg-text { flex: 1; font-size: 12.5px; color: #3f4a5a; min-width: 0; }
.zc-fe-dbg-run {
  flex: none; height: 24px; padding: 0 9px; border: 1px solid #dfe5ee; border-radius: 5px;
  background: #fff; color: var(--zc-primary); font-size: 12px; cursor: pointer;
}
.zc-fe-dbg-run:hover { border-color: var(--zc-primary); }
.zc-fe-dbg-refs { margin-top: 7px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: #7a8595; }
.zc-fe-dbg-t { color: #98a2b3; }
.zc-fe-dbg-ref { background: #fff; border: 1px solid #e8edf5; border-radius: 4px; padding: 1px 6px; }

/* ---------- 三栏 ---------- */
/* 下区三栏：整体不滚，每栏各自滚（M40/B 端滚动规范） */
.zc-fe-panes {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid #e5e9f0; border-radius: 8px; background: #fff; overflow: hidden;
}
.zc-fe-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.zc-fe-pane + .zc-fe-pane { border-left: 1px solid #eef1f6; }
.zc-fe-search {
  display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px;
  border-bottom: 1px solid #eef1f6;
}
.zc-fe-sic { display: inline-flex; color: #9aa4b2; }
.zc-fe-sic svg { width: 15px; height: 15px; }
.zc-fe-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 12.5px; color: #1f2937; font-family: inherit;
}
.zc-fe-search input::placeholder { color: #aab3c0; }
.zc-fe-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  padding: 4px 0 6px;
  /* 滚到尽头不把滚动传给弹窗/上层（避免"滚这一栏却把整页带着滚"） */
  overscroll-behavior: contain;
  /* 始终预留滚动条位置，出现/消失时内容不会左右跳 */
  scrollbar-gutter: stable;
}
/* 简洁 B 端滚动条：8px、浅灰、始终占位可见。
   注意别再写 scrollbar-width/scrollbar-color —— Chrome 里标准属性会盖掉 ::-webkit-scrollbar，
   结果变成"自动隐藏的细条"，用户就找不到滚动条了（M40 踩过）。 */
.zc-fe-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.zc-fe-scroll::-webkit-scrollbar-track { background: #f6f8fb; border-radius: 4px; }
.zc-fe-scroll::-webkit-scrollbar-thumb {
  background: #cfd6e0; border-radius: 4px; border: 1px solid #f6f8fb;
}
.zc-fe-scroll::-webkit-scrollbar-thumb:hover { background: #b6bfcc; }
.zc-fe-gh { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; cursor: pointer; }
.zc-fe-gh:hover { background: #f7f9fc; }
.zc-fe-gic { display: inline-flex; color: #8b98a8; }
.zc-fe-gic svg { width: 14px; height: 14px; }
.zc-fe-gname { flex: 1; font-size: 12.5px; font-weight: 600; color: #3f4a5a; }
.zc-fe-gswitch { font-size: 12px; color: var(--zc-primary); }
.zc-fe-caret { font-size: 10px; color: #9aa4b2; transition: transform .15s; }
.zc-fe-caret:not(.open) { transform: rotate(-90deg); }
.zc-fe-fields { padding: 0 6px 2px; }
.zc-fe-field {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  height: 30px; padding: 0 6px; border: 0; border-radius: 5px; background: transparent;
  cursor: pointer; text-align: left; font-family: inherit;
}
.zc-fe-field:hover { background: #f2f6ff; }
.zc-fe-fname { font-size: 12.5px; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-fe-ftype { flex: none; margin-left: 8px; font-size: 11px; line-height: 18px; padding: 0 6px; border-radius: 3px; }
.zc-fe-ftype.t-text { background: #eef4ff; color: #2f6bff; }
.zc-fe-ftype.t-num { background: #fff3e6; color: #c26a12; }
.zc-fe-ftype.t-date { background: #f3edff; color: #7c4dff; }
.zc-fe-ftype.t-opt { background: #e8f8f4; color: #0f9b8e; }
.zc-fe-ftype.t-member { background: #e9f7ee; color: #1a7f47; }
.zc-fe-ftype.t-serial { background: #f0f2f6; color: #5b6675; }
.zc-fe-ftype.t-link { background: #e9f7ee; color: #1a7f47; }
.zc-fe-empty { padding: 10px 10px; font-size: 12px; color: #aab3c0; }

.zc-fe-fns { padding: 0 6px; }
.zc-fe-fn {
  display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 6px;
  border: 0; border-radius: 5px; background: transparent; text-align: left;
  cursor: pointer; font-family: inherit;
}
.zc-fe-fn:hover { background: #f2f6ff; }
.zc-fe-fn-name { font-size: 12.5px; color: #374151; font-family: Consolas, "Microsoft YaHei", monospace; }
.zc-fe-fn-desc { font-size: 11.5px; color: #98a2b3; line-height: 1.5; }

.zc-fe-guide { padding: 12px 14px; }
.zc-fe-guide-list { margin: 0; padding-left: 16px; font-size: 12.5px; color: #3f4a5a; line-height: 1.95; }
.zc-fe-guide-list li { margin-bottom: 4px; }
.zc-fe-code {
  display: inline-block; padding: 1px 5px; border-radius: 3px; background: #f4f7fc;
  font-family: Consolas, "Microsoft YaHei", monospace; font-size: 12px;
}
.zc-fe-code .tk-field { color: #2f6bff; }
.zc-fe-links { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.zc-fe-links a { font-size: 12.5px; color: var(--zc-primary); cursor: pointer; }
.zc-fe-links a:hover { text-decoration: underline; }

/* 小弹窗（替换变量 / 备注 / 帮助） */
.zc-fe-dlg-tip { font-size: 12.5px; color: #7a8595; line-height: 1.7; margin-bottom: 10px; }
.zc-fe-help p { font-size: 12.5px; color: #3f4a5a; line-height: 1.85; margin: 0 0 8px; }
.zc-fe-help code { background: #f4f7fc; border-radius: 3px; padding: 1px 5px; font-family: Consolas, monospace; }
.zc-fe-code-block {
  background: #f7f9fc; border: 1px solid #eef1f6; border-radius: 6px;
  padding: 8px 10px; font-family: Consolas, monospace; font-size: 12px; color: #1f2937;
  margin: 0 0 10px; white-space: pre-wrap;
}
.zc-fe-help-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px dashed #eef1f6; }
.zc-fe-help-sig { font-size: 11.5px; color: #8b98a8; font-family: Consolas, monospace; }
.zc-fe-help-desc { font-size: 12px; color: #5b6675; }

/* ==========================================================================
   M38 函数库：分组计数 + 「暂未开放」灰项
   ========================================================================== */
.zc-fe-gcount { flex: none; margin-left: 6px; font-size: 11px; color: #aab3c0; }
.zc-fe-fn.is-off { opacity: .6; cursor: not-allowed; }
.zc-fe-fn.is-off:hover { background: #f7f8fa; }
.zc-fe-fn.is-off .zc-fe-fn-name { color: #8b98a8; }
.zc-fe-off {
  margin-left: 6px; padding: 0 5px; border-radius: 8px;
  font-size: 10.5px; font-style: normal; line-height: 16px;
  background: #eef1f6; color: #8b98a8;
}


/* ==========================================================================
   M40 公式编辑器：编辑区最大化 / 输入联想下拉
   ========================================================================== */
.zc-fe-ac {
  position: absolute; z-index: 30; min-width: 232px; max-width: 320px; max-height: 208px;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 4px; background: #fff; border: 1px solid #e0e6ef; border-radius: 8px;
  box-shadow: 0 6px 18px rgba(31, 41, 55, .12);
}
.zc-fe-ac-item {
  display: flex; flex-direction: column; gap: 1px; width: 100%; padding: 5px 8px;
  border: 0; border-radius: 6px; background: transparent; cursor: pointer;
  text-align: left; font-family: inherit;
}
.zc-fe-ac-item.on { background: #eef4ff; }
.zc-fe-ac-name { font-size: 12.5px; color: #1f2937; font-family: Consolas, "Microsoft YaHei", monospace; }
.zc-fe-ac-desc { font-size: 11.5px; color: #98a2b3; line-height: 1.5; }
.zc-fe-ac-empty { padding: 8px 10px; font-size: 12px; color: #aab3c0; }
/* 常用函数组：右侧显示用过几次 */
.zc-fe-fn-used {
  flex: none; margin-left: 6px; padding: 0 5px; border-radius: 8px;
  font-size: 10.5px; line-height: 16px; background: #eef4ff; color: #2f6bff;
}

/* ==========================================================================
   M43 公式： # 行注释 / 括号匹配高亮 / 预览字段级错误
   ========================================================================== */
/* 1) 注释：浅灰、与正文区分（不参与运算，也不参与括号匹配） */
.zc-fe-hl .tk-cmt { color: #9aa4b2; }

/* 2) 括号配对：加粗 + 同色；嵌套层级按深度取色（6 色循环） */
.zc-fe-hl .tk-br { font-weight: 700; }
.zc-fe-hl .tk-br-0 { color: #2f6bff; }
.zc-fe-hl .tk-br-1 { color: #0f9b8e; }
.zc-fe-hl .tk-br-2 { color: #d97706; }
.zc-fe-hl .tk-br-3 { color: #8b5cf6; }
.zc-fe-hl .tk-br-4 { color: #e0479a; }
.zc-fe-hl .tk-br-5 { color: #1a7f47; }
/* 3) 缺一半：红底白字，持续显示直到补齐 */
.zc-fe-hl .tk-br-bad {
  background: #e34d4d; color: #fff; font-weight: 700;
  border-radius: 2px; box-shadow: 0 0 0 1px #e34d4d;
}
/* 4) 调试面板里的建议提示（不阻断保存） */
.zc-fe-dbg-hint {
  margin-top: 6px; padding-left: 2px;
  font-size: 12px; color: #c26a12; line-height: 1.6;
}

/* 5) 预览弹窗：公式字段的友好错误提示（只影响这一格，不挡填报） */
.zc-pv-err {
  margin-top: 2px; font-size: 11.5px; line-height: 1.6; color: #d14343;
  background: #fdecec; border-radius: 4px; padding: 2px 6px;
}

/* ==========================================================================
   M44-1 单选选中样式：蓝色实心大圆心（仅外圈留一圈细缝）
   - 未选中：保持空心圆圈（描边仍按选项色/浅色淡蓝环）
   - 选中：填充统一蓝色，实心圆放大到 10px，外圈只留 1px 白缝 + 1px 蓝边
   - 设计器画布是 disabled 态，Element 会给灰底，这里一并按住
   ========================================================================== */
.zc-opt-group .el-radio .el-radio__inner { background-color: #fff; }
.zc-opt-group .el-radio.is-checked .el-radio__inner,
.zc-opt-group .el-radio.is-checked.is-disabled .el-radio__inner {
  background-color: #fff;
  border-color: var(--zc-primary);
}
.zc-opt-group .el-radio.is-checked .el-radio__inner::after,
.zc-opt-group .el-radio.is-checked.is-disabled .el-radio__inner::after {
  width: 10px; height: 10px; border-radius: 50%;
  background-color: var(--zc-primary);
  transform: translate(-50%, -50%) scale(1);
}
/* 选中时文字块保持选项色，但圆圈一律蓝 —— 避免"蓝点 + 紫字"两套色打架 */
.zc-opt-group .el-radio.is-checked .el-radio__label { color: var(--opt-c, var(--zc-primary)); }
/* 选项本身是浅色时，未选中的圆圈仍是淡蓝环（M33 保底），选中态由上面统一接管 */
.zc-opt-group .el-radio:not(.is-checked) .el-radio__inner {
  border-color: var(--opt-ring, var(--opt-c, var(--el-border-color)));
}

/* ==========================================================================
   M44-2 设计器大屏自适应
   - 中间画布最大 1320px（白纸 1260px），不再随 2K/4K 无限拉伸
   - 三栏按 12 : 68 : 14 的比例取宽并各自设上限，整体居中
   - 左右栏仍按原比例约束（左窄右宽），三栏结构不变
   ========================================================================== */
.zc-fd-page .zc-designer-body {
  grid-template-columns:
    clamp(176px, 12vw, 248px)
    minmax(0, clamp(760px, 68vw, 1320px))
    clamp(232px, 14vw, 296px);
  justify-content: center;
}
.zc-fd-page .zc-canvas-doc { max-width: 1260px; }
@media (max-width: 1279px) {
  .zc-fd-page .zc-designer-body {
    grid-template-columns: minmax(176px, .8fr) minmax(0, 4.2fr) minmax(232px, 1fr);
    justify-content: stretch;
  }
}

/* ==========================================================================
   M44-3 公式字段「可手填」标记（原只读输入框改回真实控件）
   ========================================================================== */
.zc-fi-lab { display: inline-flex; align-items: center; gap: 5px; justify-content: inherit; }
.zc-auto-chip {
  font-size: 10.5px; line-height: 1; padding: 2px 5px; border-radius: 4px;
  background: #eef4ff; color: var(--zc-primary); font-weight: 400; letter-spacing: .2px;
  flex: none;
}
.zc-auto-chip.is-link { background: #eaf7ef; color: #1f8a4c; }
/* 手填过公式字段的提示（值由用户决定，不再自动覆盖） */
.zc-manual-tip { font-size: 11.5px; color: #b26a00; line-height: 1.6; margin-top: 2px; }

/* ==========================================================================
   M45 子表单字段交互 + 字段拖宽
   ========================================================================== */

/* ---------- 1) 画布里的子表单列头：可拖动排序 / 右侧可拖宽 ---------- */
.zc-canvas .zc-sf-th { position: relative; cursor: grab; user-select: none; }
.zc-canvas .zc-sf-th.is-col-dragging { opacity: .4; }
/* 插入位置提示：拖到目标列左/右时画一条蓝线 */
.zc-canvas .zc-sf-th.is-col-drop-before::before,
.zc-canvas .zc-sf-th.is-col-drop-after::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 3px;
  background: var(--zc-primary); border-radius: 2px; z-index: 3;
}
.zc-canvas .zc-sf-th.is-col-drop-before::before { left: -2px; }
.zc-canvas .zc-sf-th.is-col-drop-after::after { right: -2px; }
/* 隐藏列：设计器里淡淡地显示 + 「列已隐藏」标记（录入端不渲染） */
.zc-canvas .zc-sf-th.is-muted-col,
.zc-canvas .zc-sf-td.is-muted-col { opacity: .5; background: #fbfcfe; }
.zc-sf-mute {
  display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 3px;
  font-size: 10px; line-height: 15px; font-weight: 400;
  color: #b26a00; background: #fff4e5; vertical-align: 1px;
}

/* ---------- 2) 主表字段：右边缘拖宽（吸附 1/4·1/3·1/2·2/3·3/4·整行） ---------- */
.zc-w-resize {
  position: absolute; top: 0; right: -4px; bottom: 0; width: 12px;
  cursor: col-resize; z-index: 8; pointer-events: auto;
}
.zc-w-resize::after {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 3px; height: 30px; border-radius: 2px; background: var(--zc-primary);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);   /* 白描边：压在表格/滚动条上也看得清 */
  opacity: 0; transition: opacity .12s;
}
.zc-canvas-field:hover .zc-w-resize::after { opacity: .6; }
.zc-w-resize:hover::after { opacity: 1; }
/* M51：子表单字段的右边缘常驻一条淡把手（表格溢出时右边缘很像表格边框，容易找不到） */
.zc-canvas-field:has(.zc-subform) .zc-w-resize::after { opacity: .28; }
.zc-canvas-field:has(.zc-subform):hover .zc-w-resize::after { opacity: .75; }
body.zc-w-dragging { cursor: col-resize; user-select: none; }
body.zc-col-dragging { cursor: grabbing; user-select: none; }

/* ---------- 3) 右栏子列列表：拖动柄 + 两行布局 + 垃圾桶图标靠右 ---------- */
.zc-subcol {
  display: flex; align-items: flex-start; gap: 6px;
  padding: 6px 7px; border: 1px solid var(--zc-line-soft); border-radius: 8px; background: #fff;
}
.zc-subcol:hover { border-color: #cfd9e8; }
.zc-subcol.is-drag { opacity: .45; }
.zc-subcol.is-drop { border-color: var(--zc-primary); box-shadow: 0 0 0 1px var(--zc-primary); }
.zc-subcol-grip {
  flex: none; color: #94a3b8; cursor: grab; padding-top: 4px;
  font-size: 13px; line-height: 1; letter-spacing: -1px; user-select: none;
}
.zc-subcol-grip:hover { color: var(--zc-primary); }
.zc-subcol-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.zc-subcol-row1 { display: flex; align-items: center; gap: 5px; }
.zc-subcol-row1 .el-select { width: 92px; flex: none; }
.zc-subcol-row1 .el-input { flex: 1; min-width: 0; }
.zc-subcol-del {
  margin-left: auto; flex: none; width: 24px; height: 24px; padding: 4px;
  border: 1px solid transparent; border-radius: 5px; background: transparent;
  color: #8d99a8; cursor: pointer; line-height: 0;
}
.zc-subcol-del svg { width: 14px; height: 14px; }
.zc-subcol-del:hover { color: #d64545; background: #fdecec; border-color: #f6d5d5; }
.zc-subcol-tag {
  flex: none; font-size: 10px; line-height: 15px; padding: 0 4px; border-radius: 3px;
  color: #b26a00; background: #fff4e5;
}

/* ---------- 4) 子列属性：权限勾选一行 ---------- */
.zc-colperm { display: flex; align-items: center; gap: 16px; width: 100%; }
.zc-colwidth { display: flex; align-items: center; gap: 8px; width: 100%; }

/* ==========================================================================
   M46 应用内数据视图页（对标简道云，视觉再收一档）
   - 左窄栏：应用名 + 菜单搜索 + 数据视图/表单/功能三组 + 应用后台
   - 顶部全局操作栏 + 视图工具栏 + 轻量表格 + 分页
   - 局部变量覆盖：主色 #2563eb、成功绿 #10b981、背景 #f9fafb
   ========================================================================== */
.zc-app-ws {
  --zc-primary: #2563eb;
  --zc-primary-light: #eff5ff;
  --zc-border: #e5e7eb;
  --zc-line-soft: #eef1f5;
  font-family: "PingFang SC", "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", system-ui, sans-serif;
  background: #f9fafb;
}

/* ---------- 左栏 ---------- */
.zc-app-ws .zc-side {
  gap: 0; padding: 0; width: 214px;
  background: #fff; border-right: 1px solid #eef1f5;
  color: #4b5563; font-size: 13px;
}
.zc-app-ws .zc-side-app { display: flex; align-items: center; gap: 8px; padding: 13px 12px 9px; }
.zc-app-ws .zc-side-app-main { flex: 1; min-width: 0; }
.zc-app-ws .zc-side-app-name {
  font-size: 13.5px; font-weight: 600; color: #111827;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zc-app-ws .zc-side-back {
  flex: none; width: 20px; height: 20px; border-radius: 5px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #9ca3af; text-decoration: none; font-size: 13px;
}
.zc-app-ws .zc-side-back:hover { background: #f3f4f6; color: #2563eb; }

.zc-side-search {
  display: flex; align-items: center; gap: 6px;
  margin: 2px 10px 8px; padding: 0 8px; height: 30px;
  border-radius: 6px; background: #f6f7f9; border: 1px solid transparent;
}
.zc-side-search:focus-within {
  background: #fff; border-color: #dbe4f3; box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}
.zc-side-search-ic { display: inline-flex; color: #9ca3af; }
.zc-side-search-ic svg { width: 13px; height: 13px; }
.zc-side-search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-size: 12.5px; color: #374151;
}
.zc-side-search input::placeholder { color: #9ca3af; }
.zc-side-search-x { cursor: pointer; color: #9ca3af; font-size: 13px; line-height: 1; }

.zc-side-scroll { flex: 1; overflow-y: auto; padding: 2px 8px 10px; }
.zc-sg + .zc-sg { margin-top: 5px; }
.zc-sg-head {
  display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 6px;
  border-radius: 5px; cursor: pointer; color: #6b7280; font-size: 12px; user-select: none;
}
.zc-sg-head:hover { background: #f6f7f9; }
.zc-sg-caret { font-size: 10px; color: #b6bec9; transition: transform .15s; }
.zc-sg-caret.is-off { transform: rotate(-90deg); }
.zc-sg-name { flex: 1; font-weight: 600; letter-spacing: .2px; }
.zc-sg-ic { display: inline-flex; color: #f0b429; flex: none; }
.zc-sg-ic svg { width: 13px; height: 13px; }
.zc-sg-add {
  width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; color: #9ca3af;
}
.zc-sg-add svg { width: 12px; height: 12px; }
.zc-sg-add:hover { background: #eff5ff; color: #2563eb; }
.zc-sg-body { padding: 1px 0 2px; }

.zc-sf-head {
  display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px;
  border-radius: 5px; cursor: pointer; color: #6b7280; font-size: 12.5px;
}
.zc-sf-head:hover { background: #f6f7f9; }
.zc-sf-ic { display: inline-flex; color: #f0b429; flex: none; }
.zc-sf-ic svg { width: 14px; height: 14px; }
.zc-sf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-sf-n { font-size: 11px; color: #b6bec9; }
.zc-sf-caret { font-size: 9px; color: #c3cad4; transition: transform .15s; }
.zc-sf-head.is-off .zc-sf-caret { transform: rotate(-90deg); }

.zc-sn {
  position: relative; display: flex; align-items: center; gap: 7px;
  height: 31px; padding: 0 8px 0 16px; margin: 1px 0;
  border-radius: 5px; color: #4b5563; text-decoration: none; font-size: 12.8px;
}
.zc-sn:hover { background: #f6f7f9; color: #1f2937; }
.zc-sn.active { background: #eff5ff; color: #2563eb; font-weight: 600; }
.zc-sn.active::before {
  content: ""; position: absolute; left: 4px; top: 7px; bottom: 7px;
  width: 3px; border-radius: 2px; background: #2563eb;
}
.zc-sn-ic { display: inline-flex; color: #8b5cf6; flex: none; }
.zc-sn-ic svg { width: 14px; height: 14px; }
.zc-sn-ic:not(.is-view) { color: #9ca3af; }
.zc-sn-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.zc-app-ws .zc-side-foot { border-top: 1px solid #f0f2f5; padding: 8px; gap: 2px; }
.zc-side-admin {
  display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 8px;
  border-radius: 5px; color: #374151; text-decoration: none; font-size: 12.8px;
}
.zc-side-admin:hover { background: #f6f7f9; }
.zc-side-foot-row { display: flex; gap: 4px; margin-top: 2px; }
.zc-side-mini {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 26px; border-radius: 5px; color: #9ca3af; font-size: 11.5px; text-decoration: none;
}
.zc-side-mini:hover { background: #f6f7f9; color: #6b7280; }
.zc-side-ico { display: inline-flex; }
.zc-side-ico svg { width: 13px; height: 13px; }
.zc-side-empty { padding: 5px 12px; font-size: 11.5px; color: #b6bec9; }

/* ---------- 主区与顶部 ---------- */
.zc-app-main.zc-vw {
  padding: 0; display: flex; flex-direction: column;
  min-height: calc(100vh - 36px); background: #f9fafb;
}
.zc-vw-top {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  height: 54px; padding: 0 16px; flex: none;
  background: #fff; border-bottom: 1px solid #eef1f5;
}
.zc-vw-top-l { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.zc-vw-top-m {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
}
.zc-vw-top-r { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: flex-end; min-width: 0; }
.zc-vw-role { width: 96px; }
.zc-vw-role .el-select__wrapper { min-height: 30px; border-radius: 6px; box-shadow: 0 0 0 1px #e5e7eb inset; }

.zc-vw-btn {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px;
  border-radius: 6px; border: 1px solid #e5e7eb; background: #fff;
  color: #374151; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.zc-vw-btn:hover { border-color: #c7d2fe; color: #2563eb; background: #f8faff; }
.zc-vw-btn:disabled { color: #c1c7d0; border-color: #eef1f5; cursor: not-allowed; background: #fafbfc; }
.zc-vw-bic { display: inline-flex; }

/* M61：个人视图下拉与列排序 */
.zc-vw-viewdd { flex: 0 0 auto; }
.zc-vw-viewbtn { max-width: 160px; }
.zc-vw-viewname { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-vw-caret { font-size: 9px; color: #9aa3af; }
.zc-vw-vdef {
  margin-left: 6px; padding: 0 4px; border-radius: 3px;
  font-size: 10.5px; color: #2563eb; background: #eef2ff;
}
.zc-colcfg-mv { display: flex; gap: 2px; flex: 0 0 auto; }
.zc-colcfg-mv a {
  width: 16px; text-align: center; border-radius: 3px;
  color: #6b7280; font-size: 12px; line-height: 16px;
}
.zc-colcfg-mv a:hover { background: #eef2ff; color: #2563eb; }
.zc-colcfg-mv a.dis { color: #d1d5db; pointer-events: none; }
.zc-vw-bic svg { width: 13px; height: 13px; }
.zc-vw-add {
  display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 13px;
  border-radius: 6px; border: 1px solid #10b981; background: #10b981; color: #fff;
  font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.zc-vw-add:hover { background: #0ea371; border-color: #0ea371; }
.zc-vw-add svg { width: 13px; height: 13px; }
.zc-vw-num {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: #eff5ff; color: #2563eb; font-size: 10.5px;
  display: inline-flex; align-items: center; justify-content: center;
}

.zc-vw-search {
  display: flex; align-items: center; gap: 6px; width: 190px; height: 30px; padding: 0 8px;
  border-radius: 6px; background: #f6f7f9; border: 1px solid transparent;
}
.zc-vw-search:focus-within {
  background: #fff; border-color: #dbe4f3; box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}
.zc-vw-sic { display: inline-flex; color: #9ca3af; }
.zc-vw-sic svg { width: 13px; height: 13px; }
.zc-vw-search input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-size: 12.5px; color: #374151;
}
.zc-vw-search input::placeholder { color: #9ca3af; }
.zc-vw-sx { cursor: pointer; color: #9ca3af; font-size: 13px; line-height: 1; }
.zc-vw-sep { width: 1px; height: 16px; background: #eef1f5; margin: 0 4px; }
.zc-vw-fic { display: inline-flex; color: #9ca3af; }
.zc-vw-fic svg { width: 13px; height: 13px; }
.zc-vw-filter { width: 106px; }
.zc-vw-filter .el-select__wrapper { min-height: 30px; border-radius: 6px; box-shadow: none; background: #f6f7f9; }
.zc-vw-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border-radius: 6px;
  border: 1px solid transparent; background: transparent; color: #6b7280;
  cursor: pointer; text-decoration: none;
}
.zc-vw-ico svg { width: 15px; height: 15px; }
.zc-vw-ico:hover { background: #f3f4f6; color: #111827; }
.zc-vw-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: #2563eb; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer;
}

/* ---------- 视图工具栏 ---------- */
.zc-vw-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 16px; flex: none;
  background: #fff; border-bottom: 1px solid #eef1f5;
}
.zc-vw-bar-r { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.zc-vw-title { font-size: 13.5px; font-weight: 600; color: #111827; }
.zc-vw-count { font-size: 12px; color: #9ca3af; white-space: nowrap; }

/* ---------- 表格 ---------- */
.zc-vw-card {
  flex: 1; min-height: 0; margin: 12px 16px 16px;
  background: #fff; border: 1px solid #eef1f5; border-radius: 6px;
  display: flex; flex-direction: column; overflow: hidden;
}
.zc-vw-table { --el-table-border-color: transparent; --el-table-row-hover-bg-color: #f8fafc; }
.zc-vw-table .el-table__inner-wrapper::before { display: none; }
.zc-vw-table th.el-table__cell {
  background: #f9fafb; color: #6b7280; font-weight: 500; font-size: 12px;
  height: 40px; padding: 0; border-bottom: 1px solid #eef1f5 !important;
}
.zc-vw-table td.el-table__cell {
  height: 44px; padding: 0; border-bottom: 1px solid #f2f4f7 !important;
  color: #374151; font-size: 12.8px;
}
.zc-vw-table .el-table__body tr:last-child td.el-table__cell { border-bottom: 0 !important; }
.zc-vw-table .cell { padding: 0 12px; line-height: 1.5; }
.zc-vw-table .el-checkbox__inner { border-radius: 3px; border-color: #d1d5db; }
.zc-vw-ops .el-button { height: 24px; padding: 0 4px; font-size: 12px; }
.zc-vw-tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: 5px; font-size: 11.5px; font-weight: 500; color: #fff; letter-spacing: .2px;
}
.zc-vw-tag.is-ok { background: #10b981; }
.zc-vw-tag.is-run { background: #3b82f6; }
.zc-vw-tag.is-mute { background: #9ca3af; }
.zc-vw-tag.is-bad { background: #ef4444; }

/* ---------- 分页 ---------- */
.zc-vw-pager {
  display: flex; align-items: center; gap: 14px; margin-top: auto;
  padding: 9px 14px; border-top: 1px solid #f2f4f7; flex: none;
}
.zc-vw-total { font-size: 12px; color: #9ca3af; }
.zc-vw-pager .el-pagination { margin-left: auto; --el-pagination-button-bg-color: transparent; }
.zc-vw-pager .el-pagination.is-background .btn-prev,
.zc-vw-pager .el-pagination.is-background .btn-next,
.zc-vw-pager .el-pagination.is-background .el-pager li {
  background: #fff; border: 1px solid #eef1f5; border-radius: 5px; min-width: 28px; height: 28px;
  line-height: 26px; font-size: 12.5px; color: #4b5563;
}
.zc-vw-pager .el-pagination.is-background .el-pager li.is-active {
  background: #2563eb; border-color: #2563eb; color: #fff;
}

/* 窄屏：次要按钮收起来，保证表格可见 */
@media (max-width: 1180px) {
  .zc-vw-top-m { display: none; }
  .zc-vw-search { width: 150px; }
  .zc-vw-bar-r .zc-vw-title { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.zc-sf-head.is-plain .zc-sf-ic { color: #c3cad4; }
.zc-vw-sum { width: 92px; flex: none; }
.zc-vw-sum .el-select__wrapper { min-height: 30px; border-radius: 6px; box-shadow: none; background: #f6f7f9; }

/* 列配置弹层（M46 视图工具） */
.zc-colcfg { font-size: 12.5px; color: #374151; }
.zc-colcfg-h { font-size: 12px; color: #9ca3af; margin-bottom: 6px; }
.zc-colcfg-list { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.zc-colcfg-item { display: flex; align-items: center; gap: 8px; padding: 4px 4px; border-radius: 5px; cursor: pointer; }
.zc-colcfg-item:hover { background: #f6f7f9; }
.zc-colcfg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zc-colcfg-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid #f2f4f7; }
.zc-colcfg-hint { font-size: 11px; color: #b6bec9; }
.zc-colcfg-reset { font-size: 12px; color: #2563eb; cursor: pointer; }
.zc-colcfg-reset:hover { text-decoration: underline; }

/* 图标按钮激活态：列配置有隐藏列 / 已冻结首列 */
.zc-vw-ico.is-on { background: #eff5ff; color: #2563eb; }
/* 顶部右侧工具组：加大间距，避免拥挤；图标略放大更易点 */
.zc-vw-top-r { gap: 6px; }
.zc-vw-top-r .zc-vw-ico { width: 30px; height: 30px; }

/* ---------- M62-a 应用 API 密钥 ---------- */
.zc-key-pre {
  font-family: Consolas, "Courier New", monospace; font-size: 12px;
  color: #374151; background: #f6f8fa; padding: 1px 5px; border-radius: 4px;
}
.zc-key-scope {
  display: inline-block; margin-right: 4px; padding: 0 6px;
  border-radius: 4px; font-size: 11.5px; color: #2563eb; background: #eef2ff;
}
.zc-key-box {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 6px; background: #f6f8fa;
}
.zc-key-box code {
  flex: 1; min-width: 0; word-break: break-all;
  font-family: Consolas, "Courier New", monospace; font-size: 12.5px; color: #111827;
}