:root {
  --ink: #202329;
  --muted: #6d747d;
  --line: #d9d7d1;
  --canvas: #ebe9e4;
  --paper: #fffefa;
  --soft-paper: #f7f5ef;
  --accent: #bb2332;
  --accent-quiet: #fff0ec;
  color-scheme: light;
}

* { box-sizing: border-box; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

html, body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overscroll-behavior-x: none;
}

body {
  color: var(--ink);
  background: var(--canvas);
  font-family: Inter, "Noto Sans Arabic", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
}

button, input, textarea, select { font: inherit; }
button { color: inherit; }

.editor-shell { min-height: 100vh; background: var(--canvas); }

.editor-topbar {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 8px 22px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.editor-brand { display: flex; align-items: baseline; gap: 7px; font-weight: 800; letter-spacing: .08em; font-size: 15px; white-space: nowrap; }
.editor-brand small { color: var(--muted); font-size: 9px; letter-spacing: .16em; }
.brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px #f9e6e6; }

.editor-document-name { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.editor-document-name input { width: min(440px, 100%); border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; font-weight: 700; text-align: center; }
.editor-document-name input:focus { box-shadow: inset 0 -2px 0 var(--accent); }
.editor-document-name span { color: var(--muted); font-size: 11px; }
.editor-top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }

.primary-button, .quiet-button, .tool-button, .text-button, .wide-button, .danger-button, .icon-button {
  border: 0;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}
.primary-button { min-height: 36px; padding: 0 13px; border-radius: 8px; background: var(--ink); color: #fff; font-weight: 700; font-size: 12px; }
.primary-button:hover { background: #3c424c; }
.quiet-button, .text-button { background: transparent; color: var(--muted); font-size: 12px; }
.quiet-button:hover, .text-button:hover { color: var(--ink); }
.text-button { padding: 6px 4px; }
.editor-top-actions .text-button { padding-inline: 9px; }

.editor-toolbar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
  padding: 7px 20px;
  border-bottom: 1px solid var(--line);
  background: #fcfbf8;
}
.toolbar-node-tools, .toolbar-flow-actions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.node-search { display: flex; align-items: center; gap: 5px; min-height: 30px; padding: 2px 5px; border: 1px solid #dedad2; border-radius: 8px; background: #fff; }
.node-search input { width: 150px; min-height: 26px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 11px; }
.node-search span { max-width: 150px; overflow: hidden; color: #66717b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.patch-message { max-width: 190px; color: #6d5c32; font-size: 10px; line-height: 1.25; }
.tool-button { min-height: 32px; display: inline-flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #4d5560; font-size: 12px; }
.tool-button:hover:not(:disabled) { border-color: #ccc7bc; background: #fff; color: var(--ink); }
.tool-button:disabled { cursor: not-allowed; opacity: .42; }
.tool-button.is-active, .wide-button.is-active { border-color: #c63b48; background: var(--accent-quiet); color: #9d1423; }
.zoom-button { width: 32px; justify-content: center; padding: 0; font-size: 16px; }
.zoom-value { min-width: 48px; justify-content: center; padding: 0 6px; }
.toolbar-divider { width: 1px; height: 22px; margin-inline: 3px; background: var(--line); }
.tool-glyph { display: inline-block; width: 15px; height: 12px; border: 1.5px solid currentColor; }
.tool-glyph-start, .tool-glyph-end { border-radius: 999px; }
.tool-glyph-process { border-radius: 3px; }
.tool-glyph-decision { width: 12px; height: 12px; transform: rotate(45deg); border-radius: 1px; margin-inline: 2px; }
.tool-glyph-document { border-radius: 4px 4px 7px 7px; }

.editor-workspace { position: relative; min-height: calc(100vh - 112px); padding: 20px; }
.canvas-stage { width: 100%; min-height: calc(100vh - 152px); padding: 18px 18px 12px; border: 1px solid #d6d3cd; border-radius: 14px; background: #dddcd7; }
.canvas-caption { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; color: #626a73; font-size: 12px; }
.pending-conflict-banner { display: inline-flex; min-width: 0; align-items: center; gap: 8px; padding: 5px 9px; border: 1px solid #e5bd54; border-radius: 999px; color: #684900; background: #fff3c9; }
.pending-conflict-banner span { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canvas-scroll { min-height: min(70vh, 780px); overflow: auto; border: 1px solid #c7c4bd; border-radius: 10px; background: #e7e5df; overscroll-behavior: contain; }
.flow-canvas { display: block; min-width: 1120px; min-height: 670px; user-select: none; touch-action: none; }
.canvas-paper { fill: var(--paper); }
.flow-frame { cursor: pointer; outline: 0; }
.flow-frame .frame-fill { fill: transparent; stroke: #333; stroke-width: 2.4; }
.flow-frame-title-band .frame-fill { fill: rgb(255 255 255 / .84); }
.flow-frame-section .frame-fill { fill: rgb(255 255 255 / .08); }
.flow-frame-guide .frame-fill { stroke: #8b8f94; stroke-dasharray: 12 8; }
.flow-frame.is-selected .frame-fill { stroke: #b91424; stroke-width: 5; }
.flow-frame.is-pending .frame-fill { stroke: #c88900; stroke-dasharray: 10 6; }
.frame-label { fill: #303030; font-size: 24px; font-weight: 700; }
.frame-label.is-vertical { writing-mode: vertical-rl; text-orientation: mixed; }
.lane-fill { fill: #fbfaf6; stroke: #dedad2; stroke-width: 1; }
.lane-label-fill { fill: #f1eee7; stroke: #dedad2; stroke-width: 1; }
.lane-label { fill: #565c63; font-size: 22px; font-weight: 700; }
.lane-separator { stroke: #dedad2; stroke-width: 1; }
.historical-lane { fill: #fff; stroke: #333; stroke-width: 2.4; }
.historical-lane-label-fill { fill: #fff; stroke: #333; stroke-width: 2.4; }
.historical-lane-label { fill: #303030; font-size: 19px; font-weight: 500; text-anchor: middle; }
.flow-lane { cursor: pointer; outline: 0; }
.flow-lane.is-selected .lane-fill, .flow-lane.is-selected .lane-label-fill { stroke: #b91424; stroke-width: 4; }
.flow-lane.is-pending .lane-fill, .flow-lane.is-pending .lane-label-fill { stroke: #c88900; stroke-width: 3; stroke-dasharray: 10 6; }
.source-overlay { opacity: .38; pointer-events: none; }
.connector { fill: none; stroke: #555f6b; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; cursor: pointer; pointer-events: stroke; }
.connector:hover, .connector.is-selected { stroke: #b91424; stroke-width: 3.5; }
.connector.is-pending { stroke: #c88900; stroke-width: 3.5; stroke-dasharray: 9 6; }
.connector-waypoint { fill: #fffefa; stroke: #b91424; stroke-width: 3; cursor: move; pointer-events: all; }
.flow-node { cursor: grab; outline: 0; }
.flow-node:active { cursor: grabbing; }
.flow-node.is-selected { filter: drop-shadow(0 4px 5px rgb(78 40 39 / .16)); }
.node-label { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #1f252b; font-size: 17px; font-weight: 650; line-height: 1.25; text-align: center; overflow: hidden; word-break: break-word; }
.node-label.is-start { align-items: flex-start; justify-content: flex-start; text-align: start; white-space: pre-wrap; }
.node-label.is-vertical { writing-mode: vertical-rl; align-items: center; justify-content: center; }
.node-main-label { display: block; max-height: 42px; overflow: hidden; }
.node-label.is-text-block .node-main-label { max-height: none; overflow: visible; white-space: pre-wrap; }
.node-flags { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 13px; }
.node-flag { display: inline-flex; align-items: center; min-height: 13px; padding: 1px 4px; border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
.node-flag.is-confirmation { color: #765300; background: #fff2bf; }
.node-flag.is-locked { color: #4a5561; background: #edf0f2; font-size: 11px; }
.connector-label { fill: #865100; font-size: 15px; font-weight: 750; text-anchor: middle; paint-order: stroke; stroke: #fffefa; stroke-width: 5px; stroke-linejoin: round; }
.empty-canvas { fill: #92979c; font-size: 22px; text-anchor: middle; }
.local-save-note { margin: 9px 2px 0; color: #737a82; font-size: 11px; }
.server-version-control { display: inline-flex; align-items: center; gap: 7px; padding: 3px 5px 3px 9px; border: 1px solid #d7d3cb; border-radius: 8px; background: #fffefa; }
.server-version-control label { display: inline-flex; align-items: center; gap: 6px; color: #626a73; font-size: 11px; font-weight: 700; }
.server-version-control select, .server-version-control input { max-width: 92px; padding: 5px 7px; border: 1px solid #d2cec4; border-radius: 6px; background: #fff; color: #30363d; }
.server-version-message { max-width: 260px; overflow: hidden; color: #636b74; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.fragment-card, .properties-card {
  position: absolute;
  z-index: 3;
  width: 294px;
  padding: 18px;
  border: 1px solid #d7d3cb;
  border-radius: 12px;
  background: #fffefa;
  box-shadow: 0 12px 28px rgb(31 35 41 / .12);
}
.fragment-card { top: 38px; left: 38px; }
.properties-card { top: 38px; right: 38px; display: none; }
.properties-card.is-open { display: block; }
.open-fragment-tab { position: absolute; z-index: 3; top: 38px; left: 38px; min-height: 34px; padding: 0 12px; border: 1px solid #d7d3cb; border-radius: 8px; background: #fffefa; color: #49525c; box-shadow: 0 8px 20px rgb(31 35 41 / .1); cursor: pointer; font-size: 12px; font-weight: 700; }
.fragment-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fragment-heading .eyebrow { padding-top: 6px; }
.eyebrow { margin: 0 0 5px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.fragment-card h1, .properties-heading h2 { margin: 0; font-size: 17px; line-height: 1.35; }
.fragment-help, .fragment-hint, .empty-properties { color: var(--muted); font-size: 12px; line-height: 1.55; }
.fragment-help { margin: 8px 0 11px; }
.fragment-hint { margin: 8px 0 14px; }
.fragment-card textarea { width: 100%; min-height: 194px; resize: vertical; padding: 10px; border: 1px solid #d2cec4; border-radius: 8px; outline: none; background: #fff; color: var(--ink); font-size: 13px; line-height: 1.55; }
.fragment-card textarea:focus, .properties-fields textarea:focus, .properties-fields select:focus { border-color: #bd4b57; box-shadow: 0 0 0 3px rgb(187 35 50 / .11); }
.fragment-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fragment-actions .primary-button { margin-left: auto; }
.emphasized-quiet { color: #37424d; font-weight: 750; }
.draft-change-log { margin-top: 15px; padding-top: 12px; border-top: 1px solid #ece8df; }
.draft-change-log .eyebrow { margin-bottom: 5px; }
.draft-change-log p:last-child { margin: 0; color: #626a73; font-size: 11px; line-height: 1.45; }
.properties-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.icon-button { width: 28px; height: 28px; border-radius: 7px; background: #f1efe9; color: var(--muted); font-size: 19px; line-height: 1; }
.properties-fields { display: grid; gap: 13px; margin-top: 16px; }
.properties-fields label { display: grid; gap: 6px; color: #535a62; font-size: 12px; font-weight: 700; }
.properties-fields label.inline-field { display: flex; align-items: center; gap: 8px; }
.properties-fields label.inline-field input { width: auto; }
.properties-fields textarea, .properties-fields select, .properties-fields input { width: 100%; padding: 9px; border: 1px solid #d2cec4; border-radius: 8px; outline: none; background: #fff; color: var(--ink); }
.properties-fields textarea { min-height: 84px; resize: vertical; }
.waypoint-actions { display: grid; gap: 7px; color: #535a62; font-size: 12px; font-weight: 700; }
.wide-button, .danger-button { min-height: 35px; border: 1px solid #d4d0c8; border-radius: 8px; background: #fff; color: #3f4852; font-size: 12px; font-weight: 700; }
.wide-button:hover { background: #f7f4ee; }
.danger-button { color: #a51f2c; border-color: #e6bfc4; background: #fff6f5; }
.source-card { padding: 10px; border: 1px solid #e1ddd3; border-radius: 8px; background: #fbfaf6; }
.source-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #535a62; font-size: 12px; font-weight: 800; }
.source-card p { margin: 8px 0 0; color: #555e67; font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
.source-card .source-note { color: #8b6508; }
.evidence-chip { display: inline-flex; align-items: center; min-height: 19px; padding: 1px 6px; border-radius: 999px; color: #52606c; background: #e8edef; font-size: 10px; white-space: nowrap; }
.evidence-chip.is-confirmation { color: #765300; background: #fff2bf; }

[dir="rtl"] .editor-topbar { grid-template-columns: auto minmax(180px, 1fr) auto; }
[dir="rtl"] .editor-brand, [dir="rtl"] .editor-toolbar, [dir="rtl"] .editor-top-actions, [dir="rtl"] .fragment-actions { direction: rtl; }
[dir="rtl"] .editor-document-name input { text-align: center; }
[dir="rtl"] .fragment-card { left: auto; right: 38px; }
[dir="rtl"] .properties-card { right: auto; left: 38px; }
[dir="rtl"] .open-fragment-tab { left: auto; right: 38px; }

@media (max-width: 1060px) {
  .fragment-card { width: 260px; left: 32px; }
  .properties-card { width: 250px; right: 32px; }
  [dir="rtl"] .fragment-card { left: auto; right: 32px; }
  [dir="rtl"] .properties-card { right: auto; left: 32px; }
  .open-fragment-tab { left: 32px; }
  [dir="rtl"] .open-fragment-tab { left: auto; right: 32px; }
}

@media (max-width: 760px) {
  .editor-topbar { grid-template-columns: 1fr auto; gap: 10px; padding: 8px 12px; }
  .editor-document-name { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .editor-document-name input { text-align: start; }
  .editor-toolbar { align-items: flex-start; flex-direction: column; padding: 9px 12px; }
  .editor-workspace { padding: 10px; }
  .canvas-stage { padding: 10px; min-height: 66vh; }
  .canvas-scroll { min-height: 540px; }
  .fragment-card, .properties-card, [dir="rtl"] .fragment-card, [dir="rtl"] .properties-card { position: relative; inset: auto; width: 100%; margin-bottom: 10px; box-shadow: none; }
  .open-fragment-tab, [dir="rtl"] .open-fragment-tab { position: relative; inset: auto; align-self: flex-start; margin-bottom: 10px; }
  .properties-card { display: block; }
  .properties-card:not(.is-open) { display: none; }
  .editor-workspace { display: flex; flex-direction: column; }
  .fragment-card { order: -1; }
  .properties-card { order: 2; }
  .canvas-caption { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* ── 保真流程编辑器 ─────────────────────────────────────────────
   刻意避开旧版三处被否掉的做法：没有红色大头部、没有灰色网格底、
   属性面板浮在画布之上而不是固定双栏长期挤压画布。            */
.fx-root { position: fixed; inset: 0; display: flex; flex-direction: column; background: #f6f6f4; color: #1f2328; }
.fx-load-shield { position: absolute; inset: 0; z-index: 10000; display: grid; place-content: center; justify-items: center; gap: 9px; padding: 24px; background: rgba(246,246,244,.9); backdrop-filter: blur(2px); color: #2b3137; text-align: center; cursor: wait; }
.fx-load-shield span:last-child { max-width: 420px; color: #68717a; font-size: 13px; line-height: 1.55; }
.fx-load-spinner { width: 28px; height: 28px; border: 3px solid #d9dde1; border-top-color: #d71920; border-radius: 50%; animation: fx-load-spin .8s linear infinite; }
@keyframes fx-load-spin { to { transform: rotate(360deg); } }

.fx-bar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 14px; background: #ffffff; border-bottom: 1px solid #dcdcd6;
  font-size: 13px; line-height: 1.4; flex: none;
}
.fx-title { font-weight: 600; font-size: 14px; margin-right: 4px; }
.fx-sep { width: 1px; height: 18px; background: #e2e2dc; margin: 0 4px; }
.fx-grow { flex: 1; }
.fx-zoom { min-width: 44px; text-align: center; color: #5a6169; font-variant-numeric: tabular-nums; }
.fx-status { color: #5a6169; margin-right: 8px; }
.fx-migration-block { width: min(640px, calc(100% - 40px)); margin: auto; padding: 34px; border: 1px solid #ead9b8; border-radius: 16px; background: #fffdf8; box-shadow: 0 12px 36px rgba(31,35,40,.09); text-align: start; }
.fx-migration-block h2 { margin: 0 0 10px; font-size: 23px; color: #2b3137; }
.fx-migration-block p { margin: 8px 0; line-height: 1.65; color: #4f5963; }
.fx-migration-mark { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 16px; border-radius: 50%; background: #f4b942; color: #4a3500; font-weight: 800; font-size: 21px; }
.fx-migration-reason { padding: 12px 14px; border-radius: 9px; background: #f7f4ec; color: #5e4c25 !important; }
.fx-migration-actions { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: #68717a; font-size: 13px; flex-wrap: wrap; }

.fx-btn {
  appearance: none; border: 1px solid #d5d5cd; background: #fff; color: #1f2328;
  border-radius: 6px; padding: 5px 10px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.fx-btn:hover:not(:disabled) { background: #f2f2ee; border-color: #bfbfb6; }
.fx-btn:disabled { opacity: .45; cursor: default; }
.fx-btn.fx-disabled { opacity: .45; cursor: default; pointer-events: none; }

/* ⚠️ 这里不能用 justify-content:center。
   画布比视口宽时，flex 的居中会把左边一截推到滚动范围之外——**永远滚不到**。
   实测：画布 788px、视口 424px，滚到最左时画布左边缘仍在 -182px，
   而且 scrollWidth 只报 634（比画布还窄）。大图的左侧就这么没了。
   改用子元素 margin:auto：空间富余时照样居中，溢出时左边缘可达。 */
.fx-stage { flex: 1; overflow: auto; padding: 28px; display: flex; justify-content: flex-start; align-items: flex-start; overscroll-behavior: contain; }
.fx-canvas-wrap { position: relative; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.14); flex: none; margin: auto; }
.fx-canvas { position: relative; z-index: 1; }
.fx-canvas svg { display: block; }
.fx-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fx-select { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.fx-panel {
  position: absolute; right: 18px; top: calc(var(--fx-bar-height, 48px) + 14px); width: 236px;
  max-height: calc(100% - var(--fx-bar-height, 48px) - 28px); overflow: auto;
  background: #fff; border: 1px solid #dcdcd6; border-radius: 8px; padding: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.10); font-size: 13px; z-index: 5;
}
.fx-panel-head { font-weight: 600; margin-bottom: 8px; word-break: break-all; }
.fx-panel label { display: block; margin-bottom: 8px; color: #5a6169; }
.fx-panel input, .fx-panel textarea, .fx-panel select {
  width: 100%; box-sizing: border-box; margin-top: 3px; padding: 5px 7px;
  border: 1px solid #d5d5cd; border-radius: 5px; font: inherit; color: #1f2328; background: #fff;
}
.fx-panel textarea { resize: vertical; }
.fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fx-hint { color: #5a6169; margin: 0; line-height: 1.6; }

[dir="rtl"] .fx-panel { right: auto; left: 18px; }
.fx-insert { padding-right: 4px; }
.fx-btn.fx-on { background: #1a73e8; border-color: #1a73e8; color: #fff; }
.fx-btn.fx-mini { padding: 3px 7px; font-size: 12px; }
.fx-canvas-wrap.fx-aiming { cursor: crosshair; }
/* 放置模式下要的是「点哪落哪」，屏蔽图形命中；
   连线模式必须保留命中，否则点不到要连的图形。 */
.fx-canvas-wrap.fx-placing .fx-canvas { pointer-events: none; }
.fx-wp rect { pointer-events: auto; cursor: move; }
.fx-attach { margin-bottom: 10px; color: #5a6169; }
.fx-attach-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.fx-align { border-bottom: 1px solid #eceae4; padding-bottom: 10px; margin-bottom: 10px; }

/* 画布上双击就地改字：贴在图形原位上，所见即所得 */
.fx-inline-edit {
  position: absolute;
  z-index: 20;
  margin: 0;
  padding: 2px 4px;
  border: 2px solid #1a73e8;
  border-radius: 2px;
  background: #ffffff;
  color: #323232;
  font-family: "Noto Sans SC", "PingFang SC", sans-serif;
  line-height: 1.25;
  text-align: center;
  resize: none;
  overflow: hidden;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.18);
}
.fx-inline-edit:focus { outline: none; }

.fx-ctxbar {
  position: absolute;
  z-index: 21;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #fff;
  border: 1px solid #d5d5cd;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.14);
  pointer-events: auto;
  white-space: nowrap;
  max-width: min(720px, calc(100vw - 24px));
  flex-wrap: wrap;
}
.fx-ctxbar .fx-btn { padding: 5px 10px; }
.fx-lane-count { width: 42px; padding: 5px 4px; border: 1px solid #c8c8c0; border-radius: 4px;
  font-size: 13px; text-align: center; }
.fx-lane-count:focus { outline: 2px solid rgba(26, 115, 232, .25); border-color: #1a73e8; }

/* 属性面板：文字样式与层序 */
.fx-style { display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid rgba(0,0,0,.08); }
.fx-style-head { font-size: 12px; color: #666; }
.fx-style-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fx-check { display: flex; flex-direction: row; align-items: center; gap: 4px;
  font-size: 12px; cursor: pointer; }
.fx-check input { margin: 0; }

/* 查找替换条 */
.fx-find { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid rgba(0,0,0,.08); background: #fafafa; }
.fx-find input { padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px;
  font-size: 13px; min-width: 140px; }
.fx-find-count { font-size: 12px; color: #666; min-width: 96px; }
.fx-btn.fx-on { background: #1a73e8; color: #fff; border-color: #1a73e8; }

/* 合规检查抽屉 */
.fx-review { width: 300px; flex: 0 0 300px; overflow: auto; padding: 12px 14px;
  border-left: 1px solid rgba(0,0,0,.08); background: #fcfcfc; font-size: 13px; }
.fx-review-list { list-style: none; margin: 6px 0 14px; padding: 0; }
.fx-rv { display: flex; gap: 6px; align-items: flex-start; padding: 6px 6px;
  border-radius: 4px; cursor: pointer; line-height: 1.45; }
.fx-rv:hover { background: rgba(26,115,232,.08); }
.fx-rv-dot { flex: 0 0 auto; }
.fx-rv-error { color: #a00; }
.fx-rv-warn { color: #8a6d00; }
.fx-rv-sop { font-style: normal; color: #888; font-size: 11px; margin-left: 4px; }
.fx-review-human .fx-rv { cursor: default; color: #666; }
.fx-review-human .fx-rv:hover { background: none; }

/* 从碎片资料生成 */
.fx-gen { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08); background: #fafafa; }
.fx-gen-col { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; }
.fx-gen-lab { font-size: 12px; color: #444; }
.fx-gen textarea { width: 100%; padding: 6px 8px; border: 1px solid #ccc; border-radius: 4px;
  font-size: 12px; line-height: 1.5; font-family: inherit; resize: vertical; }
.fx-gen-row { display: flex; gap: 8px; align-items: center; }
.fx-gen-hint { font-size: 11px; color: #888; }
.fx-gen-msg { flex: 1 1 100%; margin: 0; padding: 8px 10px; background: #fff;
  border: 1px solid #e0e0e0; border-radius: 4px; font-size: 12px; line-height: 1.6;
  white-space: pre-wrap; color: #444; max-height: 160px; overflow: auto; }

/* 缩略图导航：浮在右下角，点一下跳过去 */
.fx-map { position: absolute; right: 16px; bottom: 16px; z-index: 30;
  width: 190px; max-height: 240px; padding: 4px; background: #fff;
  border: 1px solid rgba(0,0,0,.16); border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.fx-map svg { display: block; width: 100%; height: auto; max-height: 232px; cursor: pointer; }

/* 代次版本指示 */
.fx-rev { margin-left: 10px; font-size: 12px; color: #6B747C;
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 语言切换 */
.fx-btn.fx-lang[aria-pressed="true"] { background: #eef3f8; }
/* 阿语外壳整体 RTL；画布区已显式 dir=ltr，不受影响 */
[dir="rtl"] .fx-toolbar, [dir="rtl"] header { direction: rtl; }

/* AI 发送按钮：主操作，突出一点 */
.fx-btn.fx-send { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.fx-btn.fx-send:disabled { opacity: .55; }

/* 「请先登录」下面那颗按钮：光提示没用，得给他一条能走的路 */
.fx-login { margin-top: 6px; }

/* ——— 参考资料库 ——— */
.lib { max-width: 1100px; margin: 0 auto; padding: 24px 20px 64px; }
.lib-head h1 { margin: 0 0 4px; font-size: 22px; }
.lib-sub { margin: 0 0 18px; color: #555; font-size: 13px; }
.lib-tools { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.lib-search, .lib-select { padding: 6px 10px; border: 1px solid #d0d0d0; border-radius: 6px; font: inherit; }
.lib-search { min-width: 220px; }
.lib-count { color: #777; font-size: 12px; }
.lib-note { background: #fff8e6; border: 1px solid #f0d9a0; border-radius: 6px; padding: 8px 12px; font-size: 13px; color: #6b4e00; }
.lib-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lib-table th, .lib-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid #ececec; vertical-align: top; }
.lib-table th { color: #666; font-weight: 600; font-size: 12px; }
.lib-zh { display: block; }
.lib-en { display: block; color: #888; font-size: 11px; }
.lib-dim { color: #aaa; }
.lib-pending { color: #b35b00; }
.lib-empty, .lib-foot { color: #777; font-size: 12px; margin-top: 16px; }
.lib-gate { max-width: 480px; margin: 80px auto; text-align: center; }
.lib-login { display: inline-block; margin-top: 12px; padding: 8px 18px; border: 1px solid #333; border-radius: 6px; text-decoration: none; color: #111; }
.lib-multi { margin-inline-start: 8px; padding: 1px 6px; border-radius: 999px; background: #eef3ff; color: #2b5bd7; font-size: 11px; }

/* ——— 新建流程：左对话、右流程图 ——— */
.st { display: flex; flex-direction: column; height: 100vh; background: #f5f6f8; }
.st-bar { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 7px 14px; background: #fff; border-bottom: 1px solid #e3e6ea; }
.st-brand { color: #9b111e; font-size: 14px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.st-title { font-weight: 650; margin-inline-start: 4px; white-space: nowrap; }
.st-nav { display: flex; align-items: center; gap: 4px; }
.st-nav a { padding: 5px 8px; border-radius: 6px; color: #59616c; font-size: 12.5px; text-decoration: none; white-space: nowrap; }
.st-nav a:hover { background: #f2f4f7; color: #20262e; }
.st-resumed { padding: 3px 8px; border-radius: 999px; background: #eef4ff; color: #315d9d; font-size: 11.5px; white-space: nowrap; }
.st-body { display: grid; grid-template-columns: minmax(360px, 38%) minmax(0, 62%); flex: 1; min-height: 0; }
.st-chat { display: flex; flex-direction: column; min-height: 0; background: #fff; border-inline-end: 1px solid #e3e3e3; }
.st-log { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.st-empty { color: #5f6873; font-size: 13px; line-height: 1.65; padding: clamp(22px, 6vh, 56px) 12px 20px; }
.st-empty-kicker { color: #9b111e; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; }
.st-empty h2 { margin: 8px 0 8px; color: #20262e; font-size: 23px; line-height: 1.3; }
.st-empty p { margin: 0; }
.st-steps { display: grid; gap: 9px; margin: 24px 0 18px; padding: 0; list-style: none; }
.st-steps li { display: flex; align-items: center; gap: 10px; color: #303741; }
.st-steps b { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: #f5e9ea; color: #9b111e; font-size: 12px; }
.st-empty-safe { color: #7a828c; font-size: 12px; }
.st-msg { max-width: 92%; border-radius: 10px; padding: 8px 12px; font-size: 13px; line-height: 1.55; }
.st-msg pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; }
.st-user { align-self: flex-end; background: #1a73e8; color: #fff; }
.st-assistant { align-self: flex-start; background: #f1f3f4; color: #1c1c1c; }
.st-understanding { border-inline-start: 3px solid #1a73e8; }
.st-error { background: #fdecea; color: #8a1c11; }
.st-busy { opacity: .7; font-style: italic; }
.st-warn { margin: 0 14px 8px; padding: 6px 10px; font-size: 12px; background: #fff8e6; border: 1px solid #f0d9a0; border-radius: 6px; color: #6b4e00; }
.st-questions { margin: 0 14px 8px; padding: 8px 12px; font-size: 13px; background: #eef3ff; border-radius: 8px; }
.st-questions ul { margin: 6px 0 0; padding-inline-start: 18px; }
.st-confirm { margin: 0 14px 8px; align-self: stretch; font-size: 14px; padding: 10px; }
.st-ai-preview { margin: 0 14px 10px; padding: 12px; border: 1px solid #b9c8e8; border-radius: 9px; background: #f7f9ff; color: #202a3d; font-size: 13px; line-height: 1.45; }
.st-ai-preview ol { margin: 8px 0; padding-inline-start: 22px; max-height: 190px; overflow: auto; }
.st-ai-preview li + li { margin-top: 5px; }
.st-ai-preview p { margin: 8px 0; color: #6e3f11; }
.st-ai-preview-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.st-input { display: flex; align-items: flex-end; gap: 10px; padding: 12px 14px 14px; border-top: 1px solid #eceff2; background: #fff; }
.st-input-main { position: relative; display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 6px; }
.st-input-main label { color: #4a525d; font-size: 12px; font-weight: 650; }
.st-input textarea { width: 100%; min-height: 94px; box-sizing: border-box; resize: vertical; padding: 10px 11px 25px; border: 1px solid #cbd1d8; border-radius: 9px; font: inherit; font-size: 13px; line-height: 1.55; }
.st-input textarea:focus { border-color: #3977cf; outline: 2px solid rgba(57,119,207,.13); }
.st-key-hint { position: absolute; right: 9px; bottom: 6px; color: #98a0aa; font-size: 10.5px; pointer-events: none; }
.st-input .fx-send { min-width: 112px; min-height: 42px; padding-inline: 14px; background: #9b111e; border-color: #9b111e; color: #fff; font-weight: 650; }
.st-input .fx-send:hover:not(:disabled) { background: #7f0e18; border-color: #7f0e18; }
.st-canvas { display: flex; flex-direction: column; min-height: 0; }
.st-canvas-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #e3e3e3; font-size: 13px; }
.st-doc-title { font-weight: 600; }
.st-review { color: #2e7d32; font-size: 12px; }
.st-review-bad { color: #b00020; }
.st-svg { flex: 1; overflow: auto; padding: 16px; }
.st-svg svg { max-width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.st-editor { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.fx-root.fx-embedded { position: relative; inset: auto; width: 100%; height: 100%; min-height: 0; }
.fx-root.fx-embedded .fx-narrow-gate { display: none; }
.fx-advanced-tools { display: contents; }
.fx-root.fx-embedded .fx-bar { padding: 7px 10px; gap: 5px; flex-wrap: wrap; }
.fx-root.fx-embedded .fx-title { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-root.fx-embedded .fx-advanced-tools { display: flex; flex: 0 0 100%; align-items: center; gap: 5px; overflow-x: auto; padding-top: 7px; border-top: 1px solid #eceff2; }
.fx-root.fx-embedded .fx-stage { padding: 20px; }
.st-canvas-empty { flex: 1; display: grid; place-items: center; padding: 28px; color: #737c87; font-size: 14px; background: radial-gradient(circle at center, #fff 0, #f7f8fa 68%); }
.st-canvas-empty-card { max-width: 360px; text-align: center; }
.st-canvas-empty-card > span { display: grid; width: 42px; height: 42px; margin: 0 auto 14px; place-items: center; border-radius: 50%; background: #f5e9ea; color: #9b111e; font-size: 23px; }
.st-canvas-empty-card h2 { margin: 0 0 8px; color: #303741; font-size: 19px; }
.st-canvas-empty-card p { margin: 0; line-height: 1.65; }
@media (max-width: 980px) { .st-nav { display: none; } .st-body { grid-template-columns: minmax(320px, 42%) minmax(0, 58%); } }
@media (max-width: 820px) { .st-body { grid-template-columns: 1fr; grid-template-rows: minmax(360px, 1fr) minmax(360px, 1fr); } .st-chat { border-inline-end: 0; border-bottom: 1px solid #e3e3e3; } .st-resumed { display: none; } }
.fx-primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }

/* ——— 发布库 & 分享页 ——— */
.pub-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.pub { max-width: 1200px; margin: 0 auto; padding: 24px 20px 48px; }
.pub-head { margin-bottom: 14px; }
.pub-title { margin: 0; font-size: 22px; }
.pub-title-ar { margin: 2px 0 0; color: #444; font-size: 15px; }
.pub-meta { margin: 6px 0 0; color: #888; font-size: 12px; }
.pub-svg svg { max-width: 100%; height: auto; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.pub-gate { max-width: 480px; margin: 80px auto; text-align: center; color: #555; }
.st-published { margin: 0; padding: 8px 12px; background: #e8f5e9; color: #1b5e20; font-size: 13px; border-bottom: 1px solid #c8e6c9; }
.st-published a { color: inherit; margin-inline-start: 4px; }
.st-modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: grid; place-items: center; z-index: 50; }
.st-modal-box { background: #fff; border-radius: 12px; padding: 18px 20px; width: min(480px, 92vw); display: flex; flex-direction: column; gap: 10px; }
.st-modal-box h3 { margin: 0; }
.st-modal-box label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.st-modal-box input { padding: 7px 10px; border: 1px solid #d0d0d0; border-radius: 6px; font: inherit; }
.st-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.st-save { min-width: 0; overflow: hidden; color: #6f7781; font-size: 12px; margin-inline-start: auto; text-overflow: ellipsis; white-space: nowrap; }

/* 右键菜单 */
.fx-ctx { position: absolute; z-index: 20; min-width: 140px; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.14); padding: 4px; display: flex; flex-direction: column; }
.fx-ctx button { text-align: start; padding: 6px 12px; border: 0; background: transparent; font: inherit; font-size: 13px; border-radius: 5px; cursor: pointer; }
.fx-ctx button:hover:not(:disabled) { background: #f1f3f4; }
.fx-ctx button:disabled { color: #aaa; cursor: default; }
.fx-ctx hr { border: 0; border-top: 1px solid #eee; margin: 3px 0; }
.fx-ctx-danger { color: #b00020; }
.fx-btn.fx-danger { color: #a51f2c; border-color: #e6bfc4; background: #fff6f5; }
.fx-stage.fx-panning, .fx-stage.fx-panning * { cursor: grab !important; }

/* 左侧图形面板 */
.fx-palette { position: absolute; left: 14px; top: calc(var(--fx-bar-height, 48px) + 14px); width: 92px;
  max-height: calc(100% - var(--fx-bar-height, 48px) - 28px); overflow: auto; z-index: 5;
  background: #fff; border: 1px solid #dcdcd6; border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.10); }
.fx-pal-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 6px; cursor: grab; font-size: 11px; color: #444; user-select: none; }
.fx-pal-item:hover { background: #f2f2ee; }
.fx-pal-item.fx-on { background: #e8f0fe; outline: 1px solid #1a73e8; }
.fx-pal-thumb { width: 64px; pointer-events: none; }
[dir="rtl"] .fx-palette { left: auto; right: 14px; }
[dir="rtl"] .fx-panel { right: auto; left: 18px; }

/* 发布库批量导出：勾选列窄、操作条和表格之间留一口气 */
.pub-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.pub-bulk-note { margin: 0; }
.pub-pick { width: 28px; text-align: center; }
.pub-pick input { width: 15px; height: 15px; cursor: pointer; }

/* 分享页缩放开关：默认适应宽度看全貌，勾上按原始尺寸显示、容器可横滚看清字。
   纯 CSS（:checked ~ 兄弟选择器），分享页不引 JS。 */
.pub-zoom-input { position: absolute; opacity: 0; pointer-events: none; }
.pub-zoom-label { display: inline-block; margin: 0 0 8px; cursor: pointer; user-select: none; }
.pub-zoom-input:focus-visible + .pub-zoom-label { outline: 2px solid #1a73e8; outline-offset: 2px; }
.pub-zoom-off { display: none; }
.pub-zoom-input:checked + .pub-zoom-label .pub-zoom-on { display: none; }
.pub-zoom-input:checked + .pub-zoom-label .pub-zoom-off { display: inline; }
.pub-zoom .pub-svg { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pub-zoom-input:checked ~ .pub-svg svg { max-width: none; }

/* 窄屏（手机）：按钮条横向滚动，别把「参考资料库」压成竖排单字。
   `min-width: 0` 是必要的——flex 子项默认 min-width:auto，宁可挤爆文字也不肯溢出。 */
@media (max-width: 700px) {
  .fx-bar, .st-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .fx-bar > *, .st-bar > * { flex: 0 0 auto; white-space: nowrap; }
  .fx-grow { flex: 0 0 8px; }
}

/* 手机上画布编辑器没法用（拖拽把手、右键菜单、八向缩放在 375px 屏上都是笑话）。
   与其让人对着一团糊的工具栏发愣，不如直说并给出去处；「仍然继续」留着，不堵死。 */
.fx-narrow-gate { display: none; }
/* 判据是「触屏 + 屏幕窄」，不是光看宽度：桌面浏览器缩小窗口的人有鼠标，画布照样能用，
   不该被门帘拦住（实测 660px 桌面窗口会误弹）。pointer:coarse ＝ 手指点，没有精确指点设备。 */
@media (max-width: 700px) and (pointer: coarse) {
  .fx-narrow-gate {
    display: block; position: fixed; inset: 0; z-index: 100; background: #f6f6f2;
    padding: 32px 22px; overflow-y: auto;
  }
  .fx-narrow-gate h2 { margin: 8px 0 10px; font-size: 19px; }
  .fx-narrow-gate p { margin: 0 0 18px; color: #4a5057; font-size: 14px; line-height: 1.7; }
  .fx-narrow-gate .fx-btn { display: block; width: 100%; margin-bottom: 10px; padding: 12px; font-size: 15px; text-align: center; text-decoration: none; }
  .fx-narrow-gate .fx-primary { background: #1a73e8; color: #fff; border-color: #1a73e8; }
  .fx-narrow-gate-dismiss { display: inline-block; margin-top: 6px; color: #7a8087; font-size: 13px; }
  .fx-narrow-input:checked ~ .fx-narrow-gate { display: none; }
}

/* 分享页语言开关：两份 SVG 都在页面里，CSS 决定显示哪份（不引 JS，切换零延迟）。
   ⚠️ 顺序要紧：.pub-lang-input 必须排在 .pub-zoom-input 前面，
   两个 `:checked ~` 才能各自命中后面的兄弟。 */
.pub-lang-input { position: absolute; opacity: 0; pointer-events: none; }
.pub-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pub-controls .fx-btn { cursor: pointer; user-select: none; }
.pub-lang-off { display: none; }
.pub-lang-input:checked ~ .pub-controls .pub-lang-on { display: none; }
.pub-lang-input:checked ~ .pub-controls .pub-lang-off { display: inline; }
.pub-svg-ar { display: none; }
.pub-lang-input:checked ~ .pub-svg-zh { display: none; }
.pub-lang-input:checked ~ .pub-svg-ar { display: block; }
.pub-zoom-input:checked ~ .pub-svg svg { max-width: none; }

/* 阿语视图下属性面板文字栏的语言标记：不加这个，「现在改的是阿语」这件事是隐形的 */
.fx-lang-tag {
  margin-inline-start: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #a4400f;
  background: #fdeee5;
  vertical-align: 1px;
}

/* 泳道底色色板（ctxbar 里）：小方块，选中描边加深；「无色」那格画 × */
.fx-swatch {
  width: 18px; height: 18px; padding: 0;
  border: 1px solid #cbd5e1; border-radius: 4px;
  cursor: pointer; font-size: 11px; line-height: 16px; color: #94a3b8;
}
.fx-swatch.fx-on { border: 2px solid #2563eb; }

/* 历史版本条（迭代某流程时显示在画布上方）：一排小按钮，现行定稿带 ✓ */
.st-gens { display: flex; align-items: center; gap: 6px; padding: 6px 10px; flex-wrap: wrap; }
.st-gens-label { font-size: 12px; color: #64748b; }

/* 唯一产品标准：页面中的图由真实 render/generate 引擎生成，不是设计稿截图。 */
.ps-page { min-height: 100vh; padding: 28px; background: #f4f5f7; color: #1f2933; }
.ps-head { max-width: 1440px; margin: 0 auto 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.ps-head h1 { margin: 2px 0 8px; font-size: 28px; }
.ps-head p { margin: 0; color: #64748b; line-height: 1.6; }
.ps-kicker { color: #1a73e8 !important; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.ps-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.ps-rules { max-width: 1440px; margin: 0 auto 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ps-rules article { display: flex; flex-direction: column; gap: 5px; padding: 13px 15px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; }
.ps-rules strong { font-size: 13px; color: #334155; }
.ps-rules span { color: #64748b; font-size: 12px; line-height: 1.5; }
.ps-sample { max-width: 1440px; margin: 0 auto; background: #fff; border: 1px solid #dce1e7; border-radius: 10px; overflow: hidden; }
.ps-sample-title { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e5e7eb; }
.ps-sample-title h2 { margin: 0; font-size: 15px; }
.ps-sample-title span { color: #64748b; font-size: 12px; }
.ps-svg { overflow: auto; padding: 18px; background: #fafafa; }
.ps-svg svg { display: block; max-width: none; height: auto; margin: 0 auto; background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .1); }
@media (max-width: 900px) {
  .ps-page { padding: 16px; }
  .ps-head { flex-direction: column; }
  .ps-rules { grid-template-columns: 1fr; }
}


/* 悬停/点按说明浮层（分享页 2026-08-25）——替代红圈编号+备注栏 */
.pub-note-pop {
  position: absolute;
  z-index: 60;
  max-width: min(340px, 86vw);
  background: #fff;
  border: 1px solid #990000;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  padding: 10px 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #323232;
  white-space: pre-wrap;
}
.pub-svg [data-note] { cursor: help; }

.fx-note-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  border: 1px solid var(--fx-border, #d5d3cd);
  border-radius: 6px;
  padding: 6px 8px;
  resize: vertical;
}
.flow-note-pop {
  position: fixed;
  z-index: 1200;
  width: min(320px, calc(100vw - 16px));
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #1f2937;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  pointer-events: none;
}

/* ── 业务画像（2026-09-01） ── */
.bp-page { max-width: 880px; }
.bp-hint { color: #4b5563; line-height: 1.7; margin: 0 0 12px; }
.bp-text { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.6; padding: 12px 14px; border: 1px solid #cbd2d9; border-radius: 8px; resize: vertical; background: #fff; }
.bp-text:focus { outline: 2px solid #2563eb33; border-color: #2563eb; }
.bp-bar { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.bp-count, .bp-when { color: #6b7280; font-size: 13px; }
.bp-bar .fx-btn { margin-left: auto; }
.bp-error { color: #b91c1c; margin-top: 8px; }

/* ── 参考资料的重画版 ── */
.lib-open { display: inline-block; margin: 2px 6px 2px 0; padding: 2px 10px; border: 1px solid #2563eb; border-radius: 999px; color: #2563eb; text-decoration: none; font-size: 13px; white-space: nowrap; }
.lib-open:hover { background: #2563eb; color: #fff; }
.ref-warn { margin: 10px 0 12px; padding: 10px 14px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; color: #7c2d12; line-height: 1.6; }
.ref-use { display: inline-flex; align-items: center; gap: 10px; }
.ref-use-error { color: #b91c1c; font-size: 13px; }
.ref-doc .pub-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }