/* ============================================================
   AtomUni 前端 · 页面级布局（app.css）
   仅放「页面特有」布局，组件样式一律在 design-system.css。
   依赖：design-system.css（token + 组件）
   ============================================================ */

/* ---------- 登录 / 入驻（居中单栏） ---------- */
.auth-wrap { min-height:100vh; display:grid; place-items:center; padding:var(--space-6) var(--space-4);
  background:
    radial-gradient(1200px 600px at 80% -10%, var(--primary-soft), transparent 60%),
    var(--bg-base); }
.auth-card { width:100%; max-width:420px; background:var(--bg-surface); border:1px solid var(--border-color);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:var(--space-8); }
.auth-card .brand { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-6); }
.auth-card .brand .logo { width:40px; height:40px; border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--primary),var(--accent)); display:grid; place-items:center; color:#fff; font-size:22px; }
.auth-tabs { display:flex; gap:var(--space-2); margin-bottom:var(--space-5);
  background:var(--bg-surface-2); padding:4px; border-radius:var(--radius-pill); }
.auth-tabs button { flex:1; border:none; background:transparent; cursor:pointer; padding:8px; border-radius:var(--radius-pill);
  font-weight:600; font-size:var(--text-sm); color:var(--text-secondary); }
.auth-tabs button.active { background:var(--bg-surface); color:var(--primary); box-shadow:var(--shadow-sm); }
.auth-demo { margin-top:var(--space-4); text-align:center; }
.auth-note { font-size:var(--text-xs); color:var(--text-muted); margin-top:var(--space-4); line-height:1.6; }
.password-field { position:relative; }
.password-field .input { padding-right:58px; }
.password-toggle { position:absolute; right:7px; top:50%; transform:translateY(-50%); padding:4px 6px; border:0; border-radius:var(--radius-sm); color:var(--primary); background:transparent; font:600 var(--text-xs) var(--font-sans); cursor:pointer; }
.password-toggle:hover { background:var(--primary-soft); }

/* ---------- 模板详情：变量 Schema 表 ---------- */
.schema { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.schema th { text-align:left; font-weight:600; color:var(--text-secondary); padding:var(--space-2) var(--space-3);
  border-bottom:2px solid var(--border-color); }
.schema td { padding:var(--space-2) var(--space-3); border-bottom:1px solid var(--border-color); vertical-align:middle; }
.schema tr:hover td { background:var(--bg-hover); }
.schema .vk { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); }

/* 版本时间线 */
.timeline { position:relative; padding-left:var(--space-6); }
.timeline::before { content:""; position:absolute; left:7px; top:4px; bottom:4px; width:2px; background:var(--border-color); }
.tl-item { position:relative; padding:var(--space-2) 0 var(--space-4); }
.tl-item::before { content:""; position:absolute; left:calc(-1 * var(--space-6) + 1px); top:6px; width:14px; height:14px;
  border-radius:50%; background:var(--bg-surface); border:3px solid var(--border-strong); }
.tl-item.current::before { border-color:var(--primary); background:var(--primary); }
.tl-item .tl-title { font-weight:700; font-size:var(--text-sm); }
.tl-item .tl-meta { font-size:var(--text-xs); color:var(--text-muted); }

/* ---------- 通用：提示条 / 标签 / 结果面板 / 进度 ---------- */
.demo-note { font-size:var(--text-xs); color:var(--text-secondary);
  background:var(--primary-soft); border:1px solid var(--border-color);
  border-left:3px solid var(--primary); padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-sm); margin-bottom:var(--space-4); line-height:1.6; }
.tag-list { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.result-panel { border:1px solid var(--border-color); border-radius:var(--radius);
  padding:var(--space-4); background:var(--bg-surface); }
.result-panel h3 { margin-top:0; }
.progress { height:8px; background:var(--bg-surface-2); border-radius:var(--radius-pill);
  overflow:hidden; margin-top:var(--space-2); }
.progress i { display:block; height:100%; background:var(--primary); transition:width var(--motion); }

/* ---------- 上传向导 / 编辑器：变量校验行 ---------- */
.var-row { display:grid; gap:var(--space-2); align-items:start;
  grid-template-columns: 1fr 116px 64px 76px 32px; }
.var-row .vk { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); margin-top:2px; word-break:break-all; }
.var-row .vlabel { width:100%; }
.var-row select { width:100%; }
.var-row .vhint { font-size:11px; color:var(--text-muted); margin-top:2px; }
/* computed 公式依赖高亮 */
.var-row.dep { background:var(--primary-soft); border-radius:var(--radius-sm); padding:2px 4px; }

/* ---------- 发起人富文本模板编辑器 ---------- */
.editor-toolbar { display:flex; flex-wrap:wrap; align-items:center; }
.rich-editor { min-height:440px; padding:22px 24px; border:1px solid var(--border-color); border-radius:var(--radius);
  background:#fff; color:#1a1a1a; font-family:ui-serif, "Songti SC", SimSun, serif; font-size:16px; line-height:1.9;
  outline:none; overflow:auto; }
.rich-editor:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent); }
.rich-editor h1 { margin:0 0 20px; font-size:24px; text-align:center; letter-spacing:2px; }
.rich-editor h2 { margin:22px 0 8px; font-size:19px; }
.rich-editor h3 { margin:18px 0 6px; font-size:17px; }
.rich-editor p { margin:8px 0; min-height:1.9em; }
.rich-editor table { width:100%; border-collapse:collapse; margin:12px 0; }
.rich-editor th, .rich-editor td { border:1px solid #aeb4bd; padding:7px 9px; min-width:72px; vertical-align:top; }
.rich-editor th { background:#f4f6f8; font-weight:700; }
.rich-editor .ed-pagebreak { margin:18px 0; padding:6px 10px; border-top:2px dashed var(--primary); border-bottom:2px dashed var(--primary);
  text-align:center; color:var(--primary); background:var(--primary-soft); font:12px var(--font-sans); user-select:none; }
.rich-editor .ed-condition { margin:14px 0; border:1px solid #d6b36a; border-radius:var(--radius-sm); background:#fffdf5; }
.rich-editor .ed-condition-label { padding:5px 9px; background:#fff3cf; color:#7a5500; font:600 12px var(--font-sans); user-select:none; }
.rich-editor .ed-condition-body { padding:4px 10px; }
.rich-editor .ed-loop { margin:14px 0; border:1px solid #8cb5d9; border-radius:var(--radius-sm); background:#f7fbff; }
.rich-editor .ed-loop .ed-condition-label { background:#e9f4ff; color:#1b5c92; }
.rich-editor .ed-loop-body { padding:4px 10px; }
.editor-palette { display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding-top:10px; }
.editor-palette [draggable="true"] { cursor:grab; }
@media (max-width:768px) { .rich-editor { min-height:340px; padding:16px; font-size:15px; } }

/* ---------- v2 增量：computed 只读框 / 公式检查 ---------- */
.computed-box { display:flex; flex-direction:column; gap:4px; }
.computed-box .formula { font-family:var(--font-mono); font-size:12px; color:var(--primary);
  background:var(--bg-surface-2); border:1px solid var(--border-color); border-radius:var(--radius-sm);
  padding:4px 8px; word-break:break-all; }
.computed-box input[readonly] { background:var(--bg-surface-2); color:var(--text-secondary); }
.vcheck { font-size:12px; margin-top:4px; }
.vcheck.ok { color:var(--success, #1a7f37); }
.vcheck.err { color:var(--danger, #c0392b); }

/* 合同模式聚合区 */
.mode-card { border:1px solid var(--border-color); border-left:3px solid var(--accent, #6d5dfc);
  border-radius:var(--radius); padding:var(--space-3) var(--space-4); margin:var(--space-2) 0 var(--space-4);
  background:var(--bg-surface-2); }
.mode-card .mode-title { font-weight:700; font-size:var(--text-sm); color:var(--accent, #6d5dfc); margin-bottom:var(--space-2); }

/* array 结构化子行编辑器 */
.arr-wrap { margin-top:4px; }
.arr-edit { width:100%; border-collapse:collapse; font-size:var(--text-sm); }
.arr-edit th { text-align:left; font-weight:600; color:var(--text-secondary); padding:4px 6px; border-bottom:1px solid var(--border-color); }
.arr-edit td { padding:4px 6px; border-bottom:1px solid var(--border-color); vertical-align:middle; }
.arr-edit .arr-cell { width:100%; }
.arr-edit .del { background:transparent; border:none; cursor:pointer; font-size:14px; }

/* 结构化校验错误（环路径 / 缺引用 / 公式语法） */
.err-box { border:1px solid var(--danger, #c0392b); background:rgba(192,57,43,.06);
  color:var(--danger, #c0392b); border-radius:var(--radius-sm); padding:var(--space-3);
  margin-bottom:var(--space-3); font-size:var(--text-sm); line-height:1.6; }
.err-box ul { margin:6px 0 0; padding-left:18px; }

/* ---------- 新建合同：表单网格 ---------- */
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4); }
.form-grid .field { margin-bottom:0; }
@media (max-width:768px){ .form-grid { grid-template-columns:1fr; } }
.preview-frame { width:100%; height:68vh; border:1px solid var(--border-color); border-radius:var(--radius); background:#fff; }
@media (max-width:1024px){ .preview-frame { height:46vh; } }

/* 生成结果：进度 + 校验 */
.gen-status { display:flex; align-items:center; gap:var(--space-2); }
.result-actions { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }

/* ---------- 合同库：筛选条 ---------- */
.filter-bar { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-4); }
.search-inline { display:flex; gap:var(--space-2); flex:1 1 320px; max-width:520px; }
.table-wrap { width:100%; overflow:auto; border-radius:var(--radius-sm); }
.table-wrap .table { min-width:720px; }
.table-wrap .table thead { position:sticky; top:0; z-index:1; background:var(--bg-surface); }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
.status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-3); }
.status-grid > div { padding:var(--space-3); border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--bg-surface-2); }
.status-grid small, .status-grid strong { display:block; }
.status-grid strong { margin-top:5px; font-size:var(--text-lg); }
.chip-btn { border:1px solid var(--border-color); background:var(--bg-surface); color:var(--text-secondary);
  border-radius:var(--radius-pill); padding:6px 14px; font-size:var(--text-sm); font-weight:600; cursor:pointer; }
.chip-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.chip-btn:hover { border-color:var(--primary); color:var(--primary); }
.chip-btn.active:hover { color:#fff; }

/* ---------- 概览快捷入口与首次使用引导 ---------- */
.quick-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-3); margin:var(--space-4) 0; }
.quick-action { display:flex; align-items:center; gap:var(--space-3); padding:var(--space-4); border:1px solid var(--border-color); border-radius:var(--radius); color:var(--text-primary); background:var(--bg-surface); box-shadow:var(--shadow-sm); }
.quick-action:hover { border-color:var(--primary); text-decoration:none; box-shadow:var(--shadow-md); }
.quick-action .qa-icon { width:38px; height:38px; display:grid; place-items:center; flex:none; border-radius:var(--radius-sm); color:var(--primary); background:var(--primary-soft); font-weight:800; }
.quick-action strong,.quick-action small { display:block; }
.quick-action small { margin-top:2px; color:var(--text-muted); font-size:var(--text-xs); }
.recent-contract { display:block; color:var(--text-primary); }
.recent-contract:hover { text-decoration:none; }
.onboarding { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-4); padding:var(--space-4); border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border-color)); border-radius:var(--radius); background:var(--primary-soft); }
.onboarding strong,.onboarding span { display:block; }
.onboarding span { margin-top:3px; color:var(--text-secondary); font-size:var(--text-sm); }

/* ---------- 业务资料编辑与合同发起完成度 ---------- */
.inline-form { margin-bottom:var(--space-4); padding:var(--space-4); border:1px solid var(--border-color); border-radius:var(--radius); background:var(--bg-surface-2); }
.inline-form-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); }
.inline-form-head strong { font-size:var(--text-sm); }
.run-progress { display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-4); padding:10px 14px; border:1px solid var(--border-color); border-radius:var(--radius); background:var(--bg-surface); }
.run-progress .progress { flex:1; margin:0; }
.run-progress strong { white-space:nowrap; font-size:var(--text-sm); }
.run-progress span { color:var(--text-muted); font-size:var(--text-xs); white-space:nowrap; }
.run-field.missing { padding:10px; margin:-10px; border:1px solid var(--danger); border-radius:var(--radius-sm); background:var(--danger-soft); }
.run-field.missing > label { color:var(--danger); }
.run-more { position:relative; }
.run-more summary { cursor:pointer; color:var(--text-secondary); font-size:var(--text-xs); font-weight:600; }
.run-more[open] { padding:8px; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--bg-surface-2); }
.empty-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:var(--space-2); }

@media (max-width:700px) {
  .quick-actions { grid-template-columns:1fr; }
  .onboarding { align-items:flex-start; flex-direction:column; }
  .search-inline { flex-basis:100%; max-width:none; }
  .search-inline .btn { padding-inline:12px; }
  .run-progress { align-items:flex-start; flex-wrap:wrap; }
  .run-progress .progress { order:3; flex-basis:100%; }
  .studio-actions #publishProgram,.page-head #generateRun { position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:20; width:calc(100% - 24px); box-shadow:var(--shadow-lg); }
  .table td,.table th { padding:10px 9px; }
}

/* ---------- 加载骨架 ---------- */
.skeleton { background:linear-gradient(90deg,var(--bg-surface-2) 25%,var(--bg-hover) 37%,var(--bg-surface-2) 63%);
  background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:var(--radius-sm); }
@keyframes sk { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
.sk-line { height:14px; margin:8px 0; }
.sk-card { height:96px; border-radius:var(--radius); }

/* ---------- 通用：居中提示 / 区块标题 ---------- */
.section-title { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-4); margin:var(--space-8) 0 var(--space-4); }
.section-title h2 { margin:0; }
.back-link { display:inline-flex; align-items:center; gap:6px; color:var(--text-secondary); font-weight:600; font-size:var(--text-sm); cursor:pointer; }
.back-link:hover { color:var(--primary); }

/* 详情栅格 */
.detail-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-6); align-items:start; }
@media (max-width:1024px){ .detail-grid { grid-template-columns:1fr; } }

/* ---------- 最终架构：合同编程工作台 ---------- */
.studio-head { align-items:center; }
.studio-actions { justify-content:flex-end; }
.save-state { display:inline-block; margin-top:5px; font-size:var(--text-xs); }
.save-state.ok { color:var(--success); }
.save-state.pending { color:var(--warning); }
.save-state.error { color:var(--danger); }
.program-meta { display:grid; grid-template-columns:minmax(240px,.7fr) minmax(320px,1.3fr); gap:var(--space-3); margin-bottom:var(--space-4); }
.program-meta #programName { font-weight:700; }
.studio-tabs { display:flex; gap:4px; width:max-content; max-width:100%; padding:4px; margin-bottom:var(--space-4); border:1px solid var(--border-color); border-radius:var(--radius); background:var(--bg-surface-2); overflow:auto; }
.studio-tabs button { padding:8px 14px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--text-secondary); font:600 var(--text-sm) var(--font-sans); cursor:pointer; white-space:nowrap; }
.studio-tabs button.active { color:var(--primary); background:var(--bg-surface); box-shadow:var(--shadow-sm); }
.studio-layout { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(360px,.8fr); gap:var(--space-4); align-items:start; }
.studio-author, .studio-preview { min-width:0; }
.studio-preview { display:flex; flex-direction:column; gap:var(--space-4); position:sticky; top:82px; max-height:calc(100vh - 96px); overflow:auto; padding-bottom:4px; }
.program-section { margin-bottom:var(--space-4); }
.studio-global-diagnostics { margin-bottom:var(--space-3); }

/* 合同画布：结构大纲 / A4 页面 / 内容属性 */
.contract-canvas-layout { --canvas-outline-width:320px; position:relative; display:grid; grid-template-columns:var(--canvas-outline-width) minmax(520px,1fr) 310px; gap:var(--space-4); align-items:start; }
.contract-canvas-layout.canvas-outline-collapsed { grid-template-columns:minmax(620px,1fr) 310px; }
.contract-canvas-layout.canvas-inspector-collapsed { grid-template-columns:var(--canvas-outline-width) minmax(620px,1fr); }
.contract-canvas-layout.canvas-outline-collapsed.canvas-inspector-collapsed { grid-template-columns:minmax(620px,1fr); }
.contract-canvas-layout.canvas-outline-collapsed .contract-outline-panel,
.contract-canvas-layout.canvas-inspector-collapsed .contract-inspector { display:none; }
.contract-outline-panel,.contract-inspector { position:sticky; top:82px; max-height:calc(100vh - 98px); overflow:auto; }
.contract-outline-panel { padding:var(--space-3); }
.contract-outline-panel .program-section-head { flex-wrap:wrap; margin-bottom:var(--space-3); }
.contract-outline-panel .program-section-head>div:first-child { min-width:0; flex:1 1 160px; }
.canvas-pane-resizer { position:absolute; z-index:5; top:14px; bottom:14px; left:calc(var(--canvas-outline-width) + 8px); width:14px; transform:translateX(-50%); cursor:col-resize; touch-action:none; }
.canvas-pane-resizer::before { position:absolute; top:0; bottom:0; left:6px; width:2px; border-radius:2px; background:transparent; content:""; transition:background .15s ease; }
.canvas-pane-resizer:hover::before,.canvas-resizing .canvas-pane-resizer::before { background:var(--primary); }
.canvas-pane-resizer:focus-visible { outline:0; }.canvas-pane-resizer:focus-visible::before { background:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.canvas-outline-collapsed .canvas-pane-resizer { display:none; }
.canvas-resizing,.canvas-resizing * { cursor:col-resize !important; user-select:none !important; }
.outline-search-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; align-items:center; margin-bottom:var(--space-3); }
.outline-search-row .input { min-width:0; padding:7px 9px; font-size:var(--text-xs); }
.outline-search-row span { color:var(--text-muted); font-size:10px; white-space:nowrap; }
.document-outline { display:flex; flex-direction:column; gap:6px; }
.doc-outline-row { position:relative; display:grid; grid-template-columns:24px minmax(0,1fr) 24px; align-items:center; border-radius:var(--radius-sm); }
.doc-outline-row.selected { box-shadow:inset 3px 0 0 var(--primary); background:color-mix(in srgb,var(--primary-soft) 55%,transparent); }
.outline-select { width:18px; height:18px; margin-left:3px; padding:0; border:1px solid var(--border-strong); border-radius:5px; color:#fff; background:var(--bg-surface); font-size:11px; font-weight:800; line-height:16px; cursor:pointer; }
.outline-select:hover { border-color:var(--primary); }
.outline-select.active { border-color:var(--primary); background:var(--primary); }
.doc-outline-item { width:100%; display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px; padding:9px; border:1px solid transparent; border-radius:var(--radius-sm); color:var(--text-primary); background:transparent; font:inherit; text-align:left; cursor:pointer; }
.doc-outline-item:hover { background:var(--bg-hover); }
.doc-outline-item.active { border-color:var(--primary); background:var(--primary-soft); }
.doc-outline-item>span:last-child { min-width:0; }
.doc-outline-item strong,.doc-outline-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-outline-item strong { font-size:var(--text-xs); }
.outline-number { margin-right:5px; color:var(--primary); font-weight:800; }
.outline-fold { width:22px; height:24px; padding:0; border:0; border-radius:4px; color:var(--text-muted); background:transparent; cursor:pointer; }
.outline-fold:hover { color:var(--primary); background:var(--bg-hover); }
.outline-condition-state { display:inline-block; margin-left:5px; padding:1px 5px; border-radius:var(--radius-pill); color:#16794a; background:#d8f6e5; font-size:9px; font-style:normal; vertical-align:1px; }
.outline-condition-state.off { color:#9a6700; background:#fff0c2; }
.doc-outline-item small { margin-top:2px; color:var(--text-muted); font-size:11px; }
.doc-block-type { align-self:start; padding:2px 6px; border-radius:var(--radius-pill); color:var(--primary); background:var(--primary-soft); font-size:10px; font-weight:700; }
.canvas-insert-tools { display:flex; flex-wrap:wrap; gap:5px; margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px solid var(--border-color); }
.canvas-snippet-library { margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px solid var(--border-color); }
.canvas-snippet-library summary { color:var(--text-secondary); font-size:var(--text-xs); font-weight:700; cursor:pointer; }
.canvas-snippet-library summary small { color:var(--text-muted); font-weight:400; }
.canvas-snippet-library>div { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.canvas-snippet-library .btn { min-width:calc(50% - 3px); justify-content:center; }
.contract-page-panel { min-width:0; overflow:hidden; border:1px solid var(--border-color); border-radius:var(--radius); background:var(--bg-surface); box-shadow:var(--shadow-sm); }
.contract-page-panel { container-type:inline-size; }
.contract-canvas-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); padding:10px 14px; border-bottom:1px solid var(--border-color); }
.contract-canvas-head>div:first-child { min-width:170px; flex:1 1 190px; }
.contract-canvas-head strong,.contract-canvas-head span { display:block; }
.contract-canvas-head span { margin-top:2px; color:var(--text-muted); font-size:11px; }
.canvas-view-actions { display:flex; flex:1 1 400px; justify-content:flex-end; flex-wrap:wrap; gap:5px; }
.canvas-workbench-bar { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:start; gap:6px 10px; min-height:46px; padding:8px 10px; border-bottom:1px solid var(--border-color); background:var(--bg-surface-2); }
.canvas-selection-bar { display:flex; grid-column:1 / -1; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:8px; min-width:0; padding-bottom:7px; border-bottom:1px solid var(--border-color); }
.canvas-selection-meta,.canvas-block-actions,.canvas-page-controls,.canvas-zoom-controls { display:flex; align-items:center; gap:5px; }
.canvas-selection-meta { min-width:0; flex:1 1 190px; flex-wrap:wrap; }
.canvas-selection-meta strong { max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-xs); }
.canvas-selection-meta>span:not(.doc-block-type):not(.canvas-expression-pill),.canvas-selection-meta small { color:var(--text-muted); font-size:10px; white-space:nowrap; }
.canvas-expression-pill { max-width:170px; padding:3px 7px; overflow:hidden; border:1px dotted var(--primary); border-radius:var(--radius-pill); color:var(--primary); background:var(--primary-soft); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.canvas-condition-pill { max-width:170px; padding:3px 7px; overflow:hidden; border-radius:var(--radius-pill); color:#16794a; background:#d8f6e5; font-size:10px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.canvas-condition-pill.off { color:#9a6700; background:#fff0c2; }
.canvas-block-actions { min-width:0; flex:1 1 360px; flex-wrap:wrap; }
.batch-format-actions { min-width:0; overflow:auto; padding-bottom:2px; }
.batch-format-actions .compact-select { width:auto; min-width:70px; padding:5px 24px 5px 7px; font-size:10px; }
.canvas-issue-summary { color:var(--success); }
.canvas-issue-summary.has-warnings { color:var(--warning); border-color:color-mix(in srgb,var(--warning) 55%,var(--border-color)); background:var(--warning-soft); }
.canvas-issue-summary.has-errors { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 55%,var(--border-color)); background:var(--danger-soft); }
.canvas-style-actions { display:flex; align-items:center; flex:none; padding:2px; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--bg-surface); }
.canvas-style-actions button { min-width:27px; height:25px; padding:0 6px; border:0; border-radius:4px; color:var(--text-muted); background:transparent; font:600 10px var(--font-sans); cursor:pointer; }
.canvas-style-actions button:hover { color:var(--primary); background:var(--bg-hover); }
.canvas-style-actions button.active { color:var(--primary); background:var(--primary-soft); }
.canvas-preflight-panel { border-bottom:1px solid var(--border-color); background:var(--bg-surface); box-shadow:0 8px 20px rgba(25,40,70,.08); }
.canvas-preflight-head { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:10px 14px; border-bottom:1px solid var(--border-color); }
.canvas-preflight-head>div,.canvas-preflight-head>div:last-child { display:flex; align-items:center; gap:7px; }
.canvas-preflight-head>div:first-child { align-items:flex-start; flex-direction:column; gap:1px; }
.canvas-preflight-head span { color:var(--text-muted); font-size:11px; }
.canvas-preflight-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:7px; max-height:220px; padding:10px 14px; overflow:auto; }
.preflight-issue { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:7px; align-items:start; padding:9px; border:1px solid var(--border-color); border-radius:var(--radius-sm); color:var(--text-primary); background:var(--bg-surface-2); text-align:left; cursor:pointer; }
.preflight-issue.error { border-color:color-mix(in srgb,var(--danger) 48%,var(--border-color)); background:var(--danger-soft); }
.preflight-issue.warning { border-color:color-mix(in srgb,var(--warning) 48%,var(--border-color)); background:var(--warning-soft); }
.preflight-issue b { color:var(--danger); font-size:10px; }.preflight-issue.warning b { color:var(--warning); }
.preflight-issue span { font-size:11px; line-height:1.45; }.preflight-issue small { color:var(--text-muted); font-size:9px; white-space:nowrap; }
.preflight-ok { grid-column:1/-1; padding:12px; border:1px solid color-mix(in srgb,var(--success) 35%,var(--border-color)); border-radius:var(--radius-sm); color:var(--success); background:var(--success-soft); text-align:center; font-size:12px; }
.canvas-page-controls { flex-wrap:wrap; min-width:0; padding-left:9px; border-left:1px solid var(--border-color); }
.canvas-page-controls .btn { min-width:29px; padding-inline:7px; }
.canvas-page-controls .btn.active { color:var(--primary); border-color:var(--primary); background:var(--primary-soft); }
.canvas-page-readout { min-width:48px; color:var(--text-secondary); font:600 11px var(--font-mono); text-align:center; white-space:nowrap; }
.canvas-zoom-controls { flex-wrap:wrap; min-width:0; padding-left:9px; border-left:1px solid var(--border-color); }
.canvas-zoom-controls .btn { min-width:30px; padding-inline:7px; }
.canvas-zoom-controls .btn.active { color:var(--primary); border-color:var(--primary); background:var(--primary-soft); }
.canvas-zoom-readout { min-width:42px; color:var(--text-secondary); font:600 11px var(--font-mono); text-align:center; }
.danger-text { color:var(--danger) !important; }
@container (max-width: 860px) {
  .canvas-workbench-bar { grid-template-columns:1fr; }
  .canvas-page-controls,.canvas-zoom-controls { width:100%; padding:6px 0 0; border-top:1px solid var(--border-color); border-left:0; }
}
.contract-page-stage { min-height:760px; padding:22px; overflow:auto; background:color-mix(in srgb,var(--bg-base) 78%,#aeb8c5); overscroll-behavior:contain; }
.contract-page-zoom-shell { position:relative; min-width:1px; min-height:1px; margin:0 auto; transition:width .16s ease,height .16s ease; }
.contract-canvas-frame { position:absolute; inset:0 auto auto 0; display:block; max-width:none; height:78vh; min-height:720px; margin:0; border:0; border-radius:2px; background:#fff; box-shadow:0 12px 34px rgba(20,30,50,.22); transform-origin:top left; transition:transform .16s ease; }
.contract-inspector { display:flex; flex-direction:column; gap:var(--space-3); }
.contract-inspector>.card { padding:var(--space-3); }
.document-block-editor { min-height:190px; font:12px/1.65 var(--font-mono); }
.document-block-actions { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.document-insert,.document-condition { margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px solid var(--border-color); }
.document-insert>strong,.document-condition>label { display:block; margin-bottom:7px; color:var(--text-secondary); font-size:var(--text-xs); }
.document-insert>div { display:flex; flex-wrap:wrap; gap:5px; max-height:130px; overflow:auto; }
.document-insert .ui-field-chip { cursor:pointer; }
.canvas-details>summary { cursor:pointer; color:var(--text-primary); font-size:var(--text-sm); font-weight:700; }
.canvas-details>summary small { display:block; margin:2px 0 0 20px; color:var(--text-muted); font-size:11px; font-weight:400; }
.canvas-details[open]>summary { margin-bottom:var(--space-3); }
.canvas-details .program-inputs { grid-template-columns:1fr; }
.canvas-details .sample-grid.cols-2,.canvas-details .sample-grid.cols-3 { grid-template-columns:1fr; }
.program-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-4); }
.program-section-head h3 { margin:0 0 3px; font-size:var(--text-lg); }
.program-section-head p { margin:0; font-size:var(--text-xs); color:var(--text-muted); }
.field-palette { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--space-4); padding:10px; border:1px dashed var(--border-strong); border-radius:var(--radius); background:var(--bg-surface-2); }
.field-palette-more { position:relative; }
.field-palette-more summary { cursor:pointer; padding:7px 9px; color:var(--text-secondary); font-size:var(--text-xs); font-weight:700; list-style:none; }
.field-palette-more summary::after { content:"⌄"; margin-left:5px; }
.field-palette-more[open] summary::after { content:"⌃"; }
.field-palette-more>div { position:absolute; z-index:12; top:calc(100% + 5px); left:0; display:flex; flex-wrap:wrap; gap:6px; width:260px; padding:9px; border:1px solid var(--border-strong); border-radius:var(--radius); background:var(--bg-surface); box-shadow:var(--shadow-lg); }
.program-fields { display:flex; flex-direction:column; gap:var(--space-3); }
.program-field { padding:var(--space-3); border:1px solid var(--border-color); border-radius:var(--radius); background:var(--bg-surface); }
.program-field:focus-within { border-color:var(--primary); }
.program-field-head { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-3); }
.program-field-head .grow { flex:1; }
.program-field-head code, .diagnostic code { color:var(--text-muted); font:11px var(--font-mono); }
.field-type-dot { padding:2px 8px; border-radius:var(--radius-pill); color:var(--primary); background:var(--primary-soft); font-size:11px; font-weight:700; }
.program-field-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:var(--space-2); }
.program-field-grid label, .program-field-options label { color:var(--text-secondary); font-size:11px; }
.program-field-grid .input, .program-field-grid .select, .program-field-options .input, .program-field-options .select { margin-top:3px; padding:7px 9px; }
.program-field-options { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--space-3); margin-top:var(--space-2); }
.program-field-options .check { display:flex; align-items:center; align-self:center; gap:4px; font-size:var(--text-xs); }
.program-field-options .wide { flex:1 1 100%; }
.program-field-options label:not(.wide):not(.check) { flex:1 1 140px; }
.program-field-options .textarea { margin-top:3px; min-height:88px; }
.mono { font-family:var(--font-mono) !important; }
.rule-columns { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); }
.rule-title { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--space-2); font-weight:700; font-size:var(--text-sm); }
.rule-row { display:grid; grid-template-columns:.7fr 1.6fr 32px; gap:6px; margin-bottom:6px; }
.constraint-row { display:grid; grid-template-columns:.55fr 1.1fr 1fr 32px; gap:6px; margin-bottom:6px; }
.rule-row .input, .constraint-row .input { padding:7px 8px; }
.program-inputs { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.program-inputs .field { margin:0; min-width:0; }
.program-inputs .field:has(.textarea) { grid-column:1 / -1; }
.program-inputs label { display:flex; justify-content:space-between; gap:8px; }
.program-inputs label small { color:var(--text-muted); font-weight:400; }
.program-inputs .textarea { min-height:92px; }
.diagnostics { display:flex; flex-direction:column; gap:6px; }
.diagnostic, .diagnostic-ok { display:grid; grid-template-columns:auto 1fr; gap:5px 9px; padding:9px 11px; border-radius:var(--radius-sm); font-size:var(--text-xs); }
.diagnostic code { grid-column:2; }
.diagnostic.error { color:var(--danger); background:var(--danger-soft); border:1px solid color-mix(in srgb,var(--danger) 35%,transparent); }
.diagnostic.warning { color:var(--warning); background:var(--warning-soft); border:1px solid color-mix(in srgb,var(--warning) 35%,transparent); }
.diagnostic-link { width:100%; text-align:left; font:inherit; cursor:pointer; }
.diagnostic-link:hover { filter:brightness(.97); transform:translateY(-1px); }
.diagnostic-link small { grid-column:2; opacity:.75; }
.diagnostic-ok { display:block; color:var(--success); background:var(--success-soft); border:1px solid color-mix(in srgb,var(--success) 35%,transparent); }
.studio-preview .preview-frame { height:58vh; min-height:460px; flex:none; }
.source-panel { padding:0; overflow:hidden; }
.source-help { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border-color); }
.source-help span { flex:1; color:var(--text-muted); font-size:var(--text-xs); }
.code-editor { display:block; width:100%; min-height:72vh; padding:20px; resize:vertical; border:0; outline:0; tab-size:2; color:var(--text-primary); background:var(--bg-surface-2); font:13px/1.65 var(--font-mono); }
.drag-handle { color:var(--text-muted); cursor:grab; user-select:none; }
.program-field[draggable="true"] { transition:border-color .15s,box-shadow .15s,opacity .15s; }
.program-field[draggable="true"]:active { cursor:grabbing; opacity:.72; }
.palette-hint { align-self:center; color:var(--text-muted); font-size:var(--text-xs); }
.ui-groups { display:flex; flex-direction:column; gap:var(--space-3); }
.ui-group-card { padding:var(--space-3); border:1px solid var(--border-color); border-radius:var(--radius); background:var(--bg-surface-2); }
.ui-group-head { display:grid; grid-template-columns:auto minmax(150px,1fr) 90px auto; gap:8px; align-items:center; }
.compact-select { min-width:84px; }
.ui-group-drop { display:flex; flex-wrap:wrap; gap:7px; min-height:48px; margin-top:10px; padding:9px; border:1px dashed var(--border-color); border-radius:var(--radius-sm); background:var(--bg-surface); }
.ui-group-drop:empty,.empty-drop { display:grid; place-items:center; min-height:64px; color:var(--text-muted); border:1px dashed var(--border-color); border-radius:var(--radius-sm); }
.drop-hint { align-self:center; color:var(--text-muted); font-size:var(--text-xs); }
.unassigned-fields { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-bottom:var(--space-3); }
.unassigned-fields>span:first-child { margin-right:4px; color:var(--text-secondary); font-size:var(--text-xs); font-weight:700; }
.ui-field-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border:1px solid var(--border-color); border-radius:var(--radius-pill); background:var(--bg-surface); font-size:var(--text-xs); cursor:grab; }
.ui-field-chip.available { color:var(--primary); border-style:dashed; }
.ui-field-chip button { padding:0; border:0; color:var(--text-muted); background:transparent; cursor:pointer; }
.print-presets,.layout-checks,.document-tools { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); }
.print-presets { margin-bottom:var(--space-3); }
.layout-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3); }
.layout-grid label { color:var(--text-secondary); font-size:var(--text-xs); }
.layout-grid .input,.layout-grid .select { margin-top:4px; }
.layout-grid .wide { grid-column:span 2; }
.layout-checks { margin-top:var(--space-3); }
.layout-checks .check { display:flex; align-items:center; gap:5px; font-size:var(--text-xs); }
.document-tools { margin-top:var(--space-3); padding-top:var(--space-3); border-top:1px solid var(--border-color); }
.document-tools>span { margin-right:auto; color:var(--text-secondary); font-size:var(--text-xs); font-weight:700; }
.sample-group { min-width:0; margin:0 0 var(--space-3); padding:var(--space-3); border:1px solid var(--border-color); border-radius:var(--radius); }
.program-inputs:has(.sample-group) { display:block; }
.sample-group legend { padding:0 6px; color:var(--text-secondary); font-size:var(--text-xs); font-weight:700; }
.sample-grid { display:grid; gap:var(--space-3); }
.sample-grid.cols-2 { grid-template-columns:1fr 1fr; }.sample-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.debug-section { padding:9px 0; border-top:1px solid var(--border-color); }
.debug-section:first-child { padding-top:0; border-top:0; }
.debug-section>strong { display:block; margin-bottom:5px; font-size:var(--text-xs); }
.debug-section>div { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:4px 0; font-size:var(--text-xs); }
.debug-section code { max-width:58%; overflow:hidden; text-overflow:ellipsis; }
.condition-state { padding:2px 7px; border-radius:var(--radius-pill); font-size:11px; }
.condition-state.on { color:var(--success); background:var(--success-soft); }.condition-state.off { color:var(--text-muted); background:var(--bg-surface-2); }
.diff-summary { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:var(--space-3); }
.diff-summary>span { padding:5px 9px; border-radius:var(--radius-pill); color:var(--text-secondary); background:var(--bg-surface-2); font-size:var(--text-xs); }
.diff-code { max-height:340px; padding:var(--space-3); overflow:auto; color:var(--text-primary); background:#101828; border-radius:var(--radius-sm); font:12px/1.6 var(--font-mono); white-space:pre-wrap; }
.studio-focus-mode .studio-head { margin-bottom:10px; }
.studio-focus-mode .studio-head .sub { display:none; }
.studio-focus-mode .program-meta { margin-bottom:8px; }
.studio-focus-mode .studio-tabs { margin-bottom:8px; }
.studio-focus-mode .contract-page-stage { min-height:calc(100vh - 210px); padding:16px; }
.studio-focus-mode .contract-canvas-frame { height:calc(100vh - 245px); min-height:720px; }
@media (max-width:1200px) {
  .studio-layout { grid-template-columns:1fr; }
  .studio-preview { position:static; max-height:none; overflow:visible; }
  .program-field-grid,.layout-grid { grid-template-columns:1fr 1fr; }
  .studio-preview .preview-frame { height:60vh; }
  .contract-canvas-layout { grid-template-columns:210px minmax(0,1fr); }
  .contract-canvas-layout.canvas-outline-collapsed,
  .contract-canvas-layout.canvas-inspector-collapsed,
  .contract-canvas-layout.canvas-outline-collapsed.canvas-inspector-collapsed { grid-template-columns:minmax(0,1fr); }
  .contract-inspector { grid-column:1 / -1; display:grid; grid-template-columns:1.2fr 1fr 1fr; position:static; max-height:none; overflow:visible; }
  .contract-canvas-layout.canvas-inspector-collapsed .contract-inspector { display:none; }
  .canvas-pane-resizer { display:none; }
  .canvas-workbench-bar { grid-template-columns:1fr; }
  .canvas-selection-bar { width:100%; }
  .canvas-page-controls { width:100%; padding:5px 0 0; border-top:1px solid var(--border-color); border-left:0; }
  .canvas-zoom-controls { width:100%; padding:5px 0 0; border-top:1px solid var(--border-color); border-left:0; }
}
@media (max-width:700px) {
  .program-meta, .program-field-grid, .rule-columns, .program-inputs, .layout-grid, .sample-grid.cols-2, .sample-grid.cols-3 { grid-template-columns:1fr; }
  .layout-grid .wide { grid-column:auto; }
  .ui-group-head { grid-template-columns:auto 1fr auto; }
  .ui-group-head .compact-select { grid-column:2; }
  .constraint-row, .rule-row { grid-template-columns:1fr 32px; }
  .constraint-row .input:nth-child(2), .constraint-row .input:nth-child(3), .rule-row .input:nth-child(2) { grid-column:1 / -1; }
  .constraint-row .icon-btn, .rule-row .icon-btn { grid-column:2; grid-row:1; }
  .program-inputs .field:has(.textarea) { grid-column:auto; }
  .source-help { align-items:flex-start; flex-direction:column; }
  .contract-canvas-layout { grid-template-columns:1fr; }
  .contract-outline-panel,.contract-inspector { position:static; max-height:none; overflow:visible; }
  .contract-inspector { grid-column:auto; display:flex; }
  .contract-page-panel { order:1; }
  .contract-outline-panel { order:2; }
  .contract-inspector { order:3; }
  .contract-page-stage { min-height:560px; padding:10px; }
  .contract-canvas-frame { height:62vh; min-height:540px; }
  .canvas-selection-bar { align-items:flex-start; flex-direction:column; }
  .canvas-selection-meta { width:100%; flex-wrap:wrap; }
  .canvas-block-actions { width:100%; overflow:auto; padding-bottom:2px; }
  .canvas-page-controls,.canvas-zoom-controls { overflow:auto; }
}

/* ---------- 合同程序：发起人填写与双文件交付 ---------- */
.run-toolbar { display:grid; grid-template-columns:1fr 1fr auto; gap:var(--space-4); align-items:end; margin-bottom:var(--space-4); }
.run-toolbar .field { margin:0; }
.run-context { display:grid; grid-template-columns:1.2fr 1.2fr 1fr 1fr 1fr; gap:var(--space-3); margin-bottom:var(--space-4); }
.run-context .field { margin:0; }
.run-version { display:flex; flex-direction:column; align-items:flex-end; gap:8px; color:var(--text-muted); font-size:var(--text-xs); }
.run-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(400px,.8fr); gap:var(--space-4); align-items:start; }
.run-group { margin-bottom:var(--space-4); }
.run-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.run-field { margin:0; min-width:0; }
.run-field.wide { grid-column:1 / -1; }
.run-field > label { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.run-field > label small { color:var(--text-muted); font-weight:400; }
.input-with-suffix { display:flex; align-items:stretch; }
.input-with-suffix .input:has(+ .input-suffix) { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.input-suffix { display:grid; place-items:center; min-width:46px; padding:0 10px; border:1px solid var(--border-color); border-left:0; border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--text-secondary); background:var(--bg-surface); font-size:var(--text-xs); }
.run-preview { display:flex; flex-direction:column; gap:var(--space-3); position:sticky; top:82px; }
.run-preview .preview-frame { height:72vh; min-height:560px; }
.run-object { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); padding:var(--space-3); border:1px solid var(--border-color); border-radius:var(--radius); background:var(--bg-surface-2); }
.run-object .field { margin:0; }
.run-list { padding:var(--space-2); border:1px solid var(--border-color); border-radius:var(--radius); }
.run-list-scroll { max-width:100%; overflow:auto; }
.run-list .table { min-width:520px; }
.run-list .table th, .run-list .table td { padding:6px; }
.run-list .input, .run-list .select { min-width:120px; padding:7px 8px; }
.computed-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.computed-summary span { display:flex; flex-direction:column; gap:2px; padding:9px 11px; border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--bg-surface); }
.computed-summary small { color:var(--text-muted); }
.computed-summary strong { font-size:var(--text-sm); }
.run-success { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); padding:var(--space-4); border:1px solid color-mix(in srgb,var(--success) 35%,transparent); border-radius:var(--radius); background:var(--success-soft); }
.run-success > div:first-child { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.run-success small { color:var(--text-secondary); }
@media (max-width:1100px) {
  .run-layout { grid-template-columns:1fr; }
  .run-context { grid-template-columns:1fr 1fr; }
  .run-preview { position:static; }
  .run-preview .preview-frame { height:60vh; }
}
@media (max-width:700px) {
  .run-toolbar, .run-context, .run-form-grid, .run-object { grid-template-columns:1fr; }
  .run-version { align-items:flex-start; }
  .run-field.wide { grid-column:auto; }
  .computed-summary { grid-template-columns:1fr 1fr; }
  .run-success { align-items:flex-start; flex-direction:column; }
}

/* ---------- 登录与后台安全 ---------- */
.auth-advanced { margin:0 0 var(--space-4); color:var(--text-muted); font-size:var(--text-sm); }
.auth-advanced summary { cursor:pointer; margin-bottom:var(--space-3); }
.audit-list { display:grid; gap:10px; max-height:340px; overflow:auto; }
.audit-item { padding:10px 0; border-bottom:1px solid var(--border-color); }
.audit-item:last-child { border-bottom:0; }