:root {
  --bg: #0f1117;
  --panel: #161b22;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --aligned: #3fb950;
  --conditional: #d29922;
  --miss: #f85149;
  --ambiguous: #ff7b72;
  --unused: #484f58;
  --hit-bg: rgba(210, 153, 34, 0.18);
  --sel-bg: rgba(56, 139, 253, 0.15);
  --font: "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Code", "Consolas", monospace;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); height: 100vh; display: flex; flex-direction: column; }
.diag-banner { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--border); font-size: 12px; flex-shrink: 0; }
.diag-banner.diag-ok { background: rgba(63,185,80,0.12); border-bottom-color: var(--aligned); color: var(--aligned); }
.diag-banner.diag-warn { background: rgba(210,153,34,0.12); border-bottom-color: var(--conditional); color: var(--conditional); }
.diag-banner.diag-error { background: rgba(248,81,73,0.18); border-bottom-color: var(--miss); color: #ffaba8; }
.diag-banner.diag-ok #diag-status,
.diag-banner.diag-error #diag-status { font-weight: 600; font-size: 13px; }
#diag-status { flex: 1; word-break: break-all; }
#btn-diag-copy { background: #21262d; border: 1px solid var(--border); color: var(--text); padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 11px; flex-shrink: 0; }
.topbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--panel); }
.brand { display: flex; flex-direction: column; gap: 2px; min-width: 200px; }
.muted { color: var(--muted); font-size: 12px; }
.summary { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-size: 12px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); }
.chip.aligned { border-color: var(--aligned); color: var(--aligned); }
.chip.conditional { border-color: var(--conditional); color: var(--conditional); }
.chip.miss { border-color: var(--miss); color: var(--miss); }
.chip.ambiguous { border-color: var(--ambiguous); color: var(--ambiguous); }
.chip.unused { border-color: var(--unused); color: var(--unused); }
.chip.pass { border-color: var(--aligned); color: var(--aligned); }
.chip.fail_miss { border-color: var(--miss, #f85149); color: var(--miss, #f85149); }
.chip.fail_ambiguous { border-color: var(--warn, #e6a23c); color: var(--warn, #e6a23c); }
.chip.no_fixture { border-color: var(--warn, #e6a23c); color: var(--warn, #e6a23c); }
.chip.pending_capture { border-color: var(--muted, #8b949e); color: var(--muted, #8b949e); }
.chip.untested { border-color: var(--muted, #8b949e); color: var(--muted, #8b949e); }
.badge.pass { background: rgba(63,185,80,0.2); color: var(--aligned); }
.badge.no-fixture { background: rgba(230,162,60,0.15); color: var(--warn, #e6a23c); }
.badge.pending-capture { background: rgba(139,148,158,0.18); color: var(--muted, #8b949e); }
.badge.unverified { background: rgba(139,148,158,0.15); color: var(--muted, #8b949e); }
.sel-verdict-contributes { color: var(--aligned); border: 1px solid rgba(63,185,80,0.4); }
.sel-verdict-inert { color: var(--muted, #8b949e); border: 1px solid rgba(139,148,158,0.35); }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-left: auto; font-size: 13px; }
.filters label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.filters button, .btn-row button { background: #21262d; border: 1px solid var(--border); color: var(--text); padding: 5px 10px; border-radius: 6px; cursor: pointer; }
#search, #platform-select, #btn-add-platform, #edit-element-key, #edit-selector, #ob-module, #ob-tree, #ob-screen-key, #ob-label, #ob-tree-body {
  background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 6px;
}
#search { min-width: 160px; }
#edit-selector, #ob-tree-body { width: 100%; font-family: var(--mono); font-size: 11px; }
.tree-tabs { display: flex; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--border); background: var(--panel); flex-wrap: wrap; }
.tree-tabs button { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.tree-tabs button.active { border-color: #58a6ff; color: #58a6ff; }
.layout { flex: 1; display: grid; grid-template-columns: 240px 1fr 360px; min-height: 0; }
.layout-v3 { grid-template-columns: 1fr 2fr 2fr; }
.hidden { display: none !important; }
.elements-panel { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.middle-view-tabs {
  display: flex;
  gap: 4px;
  align-items: center;
}
.middle-tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.middle-tab:hover { color: var(--text); border-color: #58a6ff; }
.middle-tab.active {
  border-color: #58a6ff;
  color: #58a6ff;
  background: rgba(56, 139, 253, 0.12);
}
.middle-tab.feature-tab-undrafted {
  border-color: #d29922;
  color: #e3b341;
  font-weight: 600;
}
.middle-tab.feature-tab-undrafted.active {
  background: rgba(210, 153, 34, 0.15);
}
.middle-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 0 0 8px;
}
.middle-view-hint { margin: 8px 12px 4px; }
.feature-summary-bar { margin: 0 12px 8px; font-size: 12px; }
.tree-view-inline {
  max-height: 28vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  margin: 0 12px 8px;
  padding: 6px;
}
#structure-detail.capture-structure-list {
  max-height: none;
  overflow: visible;
  margin: 0 12px;
  padding-bottom: 16px;
}
#view-feature .semantic-editor {
  margin: 0 12px 12px;
  overflow: auto;
}
.cs-path { margin: 0 0 8px; font-size: 12px; }
.selector-panel { min-width: 0; }
.topbar-actions { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-left: auto; }
.topbar-group { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.topbar-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border);
  opacity: 0.9;
  flex-shrink: 0;
}
.topbar-actions #search { min-width: 140px; max-width: 200px; }
.topbar-actions .env-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin: 0; }
.topbar-actions #platform-select { max-width: 140px; }
.dirty-publish-badge {
  font-size: 11px;
  font-weight: 600;
  color: #8a5a00;
  background: #fff3cd;
  border: 1px solid #ffe08a;
  border-radius: 999px;
  padding: 2px 8px;
}
.dirty-publish-badge.hidden { display: none; }
#btn-publish-accept.needs-publish {
  outline: 2px solid #e6a800;
  outline-offset: 1px;
}
.panel-menu-wrap { position: relative; }
.panel-head-actions { display: flex; gap: 6px; align-items: center; }
.btn-menu { background: transparent; border: 1px solid var(--border); color: var(--text); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
.btn-action { background: #21262d; border: 1px solid var(--border); color: var(--text); padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.btn-action:disabled { color: var(--muted); cursor: not-allowed; opacity: 0.7; }
.btn-primary { background: #21262d; border: 1px solid var(--border); color: var(--text); padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.btn-primary.btn-accent { background: rgba(56,139,253,0.2); border-color: #58a6ff; color: #58a6ff; }
.btn-primary:disabled,
.btn-primary.btn-accent:disabled {
  color: var(--muted);
  border-color: var(--border);
  background: #21262d;
  cursor: not-allowed;
  opacity: 0.55;
}
.btn-danger { background: rgba(248,81,73,0.15); border: 1px solid var(--miss); color: #ffaba8; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.btn-muted-action { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.btn-tab-add { background: transparent; border: 1px dashed var(--border); color: var(--muted); padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 11px; flex-shrink: 0; }
.btn-tab-add:hover { border-color: #58a6ff; color: #58a6ff; }
.btn-link-inline { background: none; border: none; color: #58a6ff; cursor: pointer; font-size: 11px; padding: 0 4px; }
.elements-head { flex-wrap: wrap; gap: 6px; }
.elements-toolbar { padding: 6px 10px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.summary-inline { gap: 4px; }
.summary-inline .chip { font-size: 10px; padding: 2px 6px; cursor: pointer; }

.batch-test-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 10px 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(210,153,34,0.1);
  font-size: 12px;
  flex-shrink: 0;
}
.batch-test-strip.is-ok { background: rgba(63,185,80,0.1); border-color: rgba(63,185,80,0.35); }
.batch-test-strip.is-err { background: rgba(248,81,73,0.14); border-color: rgba(248,81,73,0.4); }
.batch-test-strip-summary { flex: 1; min-width: 0; line-height: 1.35; word-break: break-word; }
.batch-test-filter-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.batch-test-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: min(420px, 55vh);
  overflow: auto;
}
.batch-test-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 4px 10px;
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 12px;
}
.batch-test-row:hover { background: rgba(255,255,255,0.04); }
.batch-test-row .bt-status {
  font-weight: 600;
  align-self: start;
}
.batch-test-row.is-pass .bt-status { color: var(--aligned, #3fb950); }
.batch-test-row.is-fail .bt-status { color: var(--miss, #ff7b72); }
.batch-test-row.is-error .bt-status { color: #ffaba8; }
.batch-test-row.is-skip .bt-status { color: var(--conditional, #d29922); }
.batch-test-row .bt-main { min-width: 0; }
.batch-test-row .bt-alias { font-weight: 600; }
.batch-test-row .bt-msg {
  color: var(--muted, #8b949e);
  margin-top: 2px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11px;
  max-height: 4.5em;
  overflow: hidden;
}
.batch-test-row.expanded .bt-msg { max-height: none; }
.audit-filters-inline { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; font-size: 11px; align-items: center; }
.audit-filters-inline label { display: flex; align-items: center; gap: 3px; cursor: pointer; white-space: nowrap; }
.btn-link { background: none; border: none; color: #58a6ff; cursor: pointer; font-size: 12px; padding: 0; }
.dropdown-menu { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 140px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
.dropdown-menu button { display: block; width: 100%; text-align: left; background: transparent; border: none; color: var(--text); padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.dropdown-menu button:hover { background: rgba(255,255,255,0.06); }
.panel-search { margin: 6px 10px; width: calc(100% - 20px); background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 6px 8px; border-radius: 6px; font-size: 12px; }
.pages-panel { border-right: 1px solid var(--border); }
.elements-panel { border-right: 1px solid var(--border); }
.sample-strip { display: flex; gap: 8px; overflow-x: auto; padding: 8px 10px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02); }
.sample-strip-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 6px 10px; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}
.sample-strip-toolbar.hidden { display: none; }
.sample-filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sample-filter-label { font-size: 11px; color: var(--muted, #8b949e); white-space: nowrap; }
.sample-filter-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sample-filter-chip {
  border: 1px solid var(--border); background: transparent; color: inherit;
  border-radius: 999px; padding: 2px 8px; font-size: 11px; cursor: pointer;
}
.sample-filter-chip.active {
  border-color: #58a6ff; color: #58a6ff; background: rgba(88,166,255,0.12);
}
.sample-filter-count { font-size: 11px; margin-left: auto; }
.sample-strip-empty { padding: 16px 10px; font-size: 12px; }
.sample-fork-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 6px 6px; }
.sample-fork-chip {
  font-size: 10px; line-height: 1.2; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted, #8b949e);
  background: rgba(255,255,255,0.04); max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.sample-fork-chip[data-axis="system_profile"] { color: #7ee787; border-color: rgba(126,231,135,0.35); }
.sample-fork-chip[data-axis="app_version"] { color: #79c0ff; border-color: rgba(121,192,255,0.35); }
.content-state-bar {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  flex-shrink: 0;
  padding: 6px 12px; border-bottom: 1px solid var(--border);
  background: rgba(88, 166, 255, 0.04);
}
.content-state-bar.hidden { display: none; }
.content-state-bar .cs-bar-label { font-size: 10px; color: var(--muted); margin-right: 4px; }
.content-state-bar .cs-btn {
  font-size: 11px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text);
}
.content-state-bar .cs-btn.active {
  border-color: var(--accent, #58a6ff); background: var(--sel-bg); color: var(--accent, #58a6ff);
}
.sample-card { flex: 0 0 132px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--bg); padding: 0; font: inherit; color: inherit; text-align: left; display: flex; flex-direction: column; }
.sample-card.active { border-color: #58a6ff; box-shadow: 0 0 0 1px rgba(88,166,255,0.35); }
.sample-card-preview { display: block; width: 100%; border: 0; padding: 0; margin: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: zoom-in; }
.sample-card img, .sample-card-empty { display: block; width: 100%; height: 176px; object-fit: cover; object-position: top center; background: #111; pointer-events: none; }
.sample-card-empty { display: flex; align-items: center; justify-content: center; font-size: 11px; }
.sample-caption { padding: 5px 6px; font-size: 10px; line-height: 1.25; color: var(--muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }
.sample-caption-text { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sample-specimen-badge {
  flex: 0 0 auto;
  font-size: 9px;
  line-height: 1.2;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--border);
}
.sample-specimen-yes { color: #3fb950; border-color: rgba(63,185,80,0.45); background: rgba(63,185,80,0.12); }
.sample-specimen-no { color: #d29922; border-color: rgba(210,153,34,0.45); background: rgba(210,153,34,0.12); }
.sample-card-nonspecimen { border-style: dashed; }
.sample-card-actions { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 0 6px 6px; border-top: 1px solid var(--border); background: rgba(255,255,255,0.02); }
.sample-card-actions .btn-link-inline { font-size: 11px; padding: 4px 0; }
.sample-strip.empty { display: none; }
.screenshot-lightbox-sample-actions { display: flex; gap: 10px; align-items: center; margin-left: auto; margin-right: 8px; }
.screenshot-lightbox-sample-actions.hidden { display: none; }
.screenshot-lightbox-delete { color: #f85149; }

.screenshot-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.screenshot-lightbox.hidden { display: none; }
.screenshot-lightbox-backdrop {
  position: absolute; inset: 0; border: 0; padding: 0; margin: 0;
  background: rgba(0, 0, 0, 0.72); cursor: pointer;
}
.screenshot-lightbox-panel {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.55); overflow: hidden;
}
.screenshot-lightbox-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 12px;
  flex-wrap: wrap; flex-shrink: 0;
}
.screenshot-lightbox-main {
  display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.screenshot-lightbox-view {
  flex: 1 1 auto; min-width: 0; overflow: auto; padding: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background: #0d1117;
}
.screenshot-lightbox-controls {
  flex: 0 0 280px; width: 280px; max-width: 38%;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); font-size: 11px;
}
.screenshot-lightbox-controls[hidden] { display: none; }
.shot-ctrl-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 10px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.shot-ctrl-head strong { font-size: 12px; }
.shot-ctrl-bulk { display: inline-flex; gap: 8px; }
.shot-ctrl-groups {
  flex: 1 1 auto; overflow: auto; padding: 6px 8px 10px;
}
.shot-ctrl-group {
  margin-bottom: 6px; border: 1px solid var(--border); border-radius: 6px;
  background: rgba(255,255,255,0.02);
}
.shot-ctrl-group > summary {
  list-style: none; cursor: pointer; padding: 6px 8px;
  display: flex; align-items: center; gap: 6px; user-select: none;
}
.shot-ctrl-group > summary::-webkit-details-marker { display: none; }
.shot-ctrl-layer {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-weight: 600;
}
.shot-ctrl-layer input { margin: 0; }
.shot-ctrl-layer .shot-kind-badge {
  font-size: 10px; font-weight: 500; color: var(--muted);
}
.shot-ctrl-po-list { list-style: none; margin: 0; padding: 0 6px 6px 22px; }
.shot-ctrl-po-list li { margin: 2px 0; }
.shot-ctrl-po {
  display: flex; align-items: flex-start; gap: 5px; cursor: pointer; line-height: 1.35;
}
.shot-ctrl-po input { margin: 2px 0 0; flex-shrink: 0; }
.shot-ctrl-po.is-disabled { opacity: 0.45; cursor: not-allowed; }
.shot-ctrl-po.is-disabled input { pointer-events: none; }
.shot-ctrl-po-alias { font-family: var(--mono, monospace); font-size: 10px; word-break: break-all; }
.shot-ctrl-po-meta { color: var(--muted); font-size: 10px; }
.shot-ctrl-skipped {
  margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--border);
  color: var(--muted); font-size: 10px;
}
.shot-ctrl-skipped summary { cursor: pointer; padding: 4px 2px; }
.shot-ctrl-skipped ul { list-style: none; margin: 4px 0 0; padding: 0 0 0 8px; }
.shot-ctrl-skipped li { margin: 3px 0; word-break: break-all; }
.screenshot-lightbox-hint { margin: 0 0 8px; font-size: 11px; max-width: 100%; }
.screenshot-lightbox-hint.hidden { display: none; }
.screenshot-overlay-wrap {
  position: relative; display: inline-block; max-width: 100%;
  line-height: 0;
  overflow: visible;
}
.screenshot-lightbox-view img {
  display: block; max-width: 100%; height: auto;
  max-height: calc(100vh - 148px); object-fit: contain;
  border-radius: 4px;
}
.screenshot-overlay {
  position: absolute; inset: 0; pointer-events: none;
  overflow: visible;
}
.screenshot-overlay-box {
  position: absolute; box-sizing: border-box;
  pointer-events: none; border: 0;
  overflow: visible;
}
.screenshot-overlay-box.kind-page {
  z-index: 1;
  background: rgba(88, 166, 255, 0.18);
}
.screenshot-overlay-box.kind-list {
  z-index: 2;
  background: rgba(63, 185, 80, 0.16);
}
.screenshot-overlay-box.kind-row_shell {
  z-index: 3;
  background: rgba(210, 153, 34, 0.18);
}
.screenshot-overlay-box.kind-row_field {
  z-index: 4;
  background: rgba(163, 113, 247, 0.22);
}
.screenshot-overlay-chip {
  position: absolute; left: 0; top: 0;
  max-width: min(100%, 220px);
  padding: 1px 6px;
  font-size: 11px; line-height: 1.3;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
  border-radius: 2px 0 6px 0;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}
.screenshot-overlay-box.kind-page .screenshot-overlay-chip { background: rgba(88, 166, 255, 0.92); }
.screenshot-overlay-box.kind-list .screenshot-overlay-chip { background: rgba(63, 185, 80, 0.92); }
.screenshot-overlay-box.kind-row_shell .screenshot-overlay-chip { background: rgba(210, 153, 34, 0.92); }
.screenshot-overlay-box.kind-row_field .screenshot-overlay-chip { background: rgba(163, 113, 247, 0.92); }
.screenshot-overlay-box.is-tiny .screenshot-overlay-chip {
  max-width: 220px;
  top: -15px;
  border-radius: 2px;
}
.screenshot-overlay-box.overlay-off,
.screenshot-overlay-box.layer-off { display: none; }
.screenshot-overlay-box.kind-shell {
  border: 2px solid rgba(136, 192, 208, 0.85);
  background: rgba(136, 192, 208, 0.12);
}
.screenshot-overlay-box.kind-tab_bar {
  border: 2px solid rgba(235, 203, 139, 0.9);
  background: rgba(235, 203, 139, 0.14);
}
.screenshot-overlay-box.kind-tab_item {
  border: 2px solid rgba(180, 142, 173, 0.9);
  background: rgba(180, 142, 173, 0.14);
}
.screenshot-overlay-box.kind-content {
  border: 2px solid rgba(129, 161, 193, 0.9);
  background: rgba(129, 161, 193, 0.12);
}
.screenshot-overlay-box.kind-shell .screenshot-overlay-chip { background: rgba(136, 192, 208, 0.92); }
.screenshot-overlay-box.kind-tab_bar .screenshot-overlay-chip { background: rgba(235, 203, 139, 0.92); color: #1a1a1a; }
.screenshot-overlay-box.kind-tab_item .screenshot-overlay-chip { background: rgba(180, 142, 173, 0.92); }
.screenshot-overlay-box.kind-content .screenshot-overlay-chip { background: rgba(129, 161, 193, 0.92); }

/*
 * Tab/壳 结构工作台：只允许 #view-tab-workbench 一层纵向滚动。
 * 禁止子块 sticky / max-height / overflow:auto，否则会出现嵌套滑动且截图被夹没。
 */
#view-tab-workbench.middle-view {
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
}
.structure-workbench-head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
}
.structure-workbench-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.structure-workbench-head-text { min-width: 0; flex: 1; }
.structure-workbench-head h3 { margin: 0 0 4px; font-size: 14px; }
.structure-workbench-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 0 0 auto;
}
.structure-workbench-meta-oneline,
#structure-workbench-meta {
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.structure-check-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 12px;
  min-height: 20px;
}
.structure-check-strip-summary.ok { color: var(--aligned, #3fb950); }
.structure-check-strip-summary.warn { color: var(--conditional, #d29922); }
.host-workbench-main {
  padding: 10px 12px 16px;
  border-bottom: 1px solid var(--border);
}
.host-workbench-status { margin-bottom: 12px; }
.host-wb-status-cards { margin-bottom: 4px; }
.host-wb-status-hint { font-size: 11px; margin: 6px 0 0; }
.host-workbench-children {
  padding: 0;
}
.structure-recognize-dialog,
.structure-check-dialog {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel, #161b22);
  color: inherit;
  max-height: 90vh;
  overflow: hidden;
  flex-direction: column;
}
.structure-recognize-dialog[open],
.structure-check-dialog[open] {
  display: flex;
}
.structure-recognize-dialog::backdrop,
.structure-check-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
.structure-recognize-dialog-head,
.structure-check-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.structure-recognize-dialog-head h3,
.structure-check-dialog-head h3 {
  margin: 0;
  font-size: 14px;
}
.structure-recognize-dialog-hint {
  margin: 0;
  padding: 8px 14px 0;
  font-size: 12px;
}
.structure-recognize-dialog .region-propose-panel,
.structure-check-dialog .page-structure-check {
  margin: 0;
  padding: 12px 14px 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: auto;
  flex: 1 1 auto;
  max-height: calc(90vh - 64px);
}
#structure-bind-fold,
#structure-tree-fold {
  margin: 0 12px 8px;
}
.tab-workbench-root {
  padding: 10px 12px 16px;
  border-bottom: 1px solid var(--border);
  overflow: visible;
  max-height: none;
  position: static;
}
.tab-workbench-head { margin-bottom: 8px; }
.tab-workbench-head h3 { margin: 0 0 2px; font-size: 14px; }
.tab-workbench-meta {
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab-workbench-bind-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  margin: 8px 0;
  overflow-x: auto;
}
.tab-wb-bind-label { flex: 0 0 auto; font-size: 11px; }
.tab-wb-meta-inline {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 8px;
}
.tab-workbench-bind-row label { font-size: 11px; margin-right: 4px; }
.tab-workbench-bind-btn {
  font-size: 12px; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--panel); cursor: pointer; white-space: nowrap; flex: 0 0 auto;
}
.tab-workbench-bind-btn.active { border-color: var(--accent); background: rgba(88, 166, 255, 0.12); }
.tab-workbench-main {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(160px, 220px);
  gap: 12px;
  align-items: start;
  margin: 8px 0 12px;
}
@media (max-width: 720px) {
  .tab-workbench-main { grid-template-columns: 1fr; }
}
.tab-workbench-shot-block { margin: 0; min-width: 0; }
.tab-workbench-shot-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #0d1117;
}
.tab-workbench-shot-wrap img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
  min-height: 120px;
  object-fit: contain;
  background: #0d1117;
}
.tab-workbench-shot-overlay {
  position: absolute; inset: 0; pointer-events: none;
}
.tab-workbench-shot-hint {
  font-size: 11px;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab-workbench-status-host { min-width: 0; }
.tab-workbench-status-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tab-wb-status {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 8px;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.tab-wb-status.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(88, 166, 255, 0.35); }
.tab-wb-status-name { font-size: 12px; font-weight: 600; }
.tab-wb-status-badge { font-size: 10px; justify-self: end; }
.tab-wb-status-xp {
  grid-column: 1 / -1;
  font-size: 10px;
  font-family: var(--mono, monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab-wb-status-ok { border-color: rgba(63, 185, 80, 0.55); }
.tab-wb-status-ok .tab-wb-status-badge { color: #3fb950; }
.tab-wb-status-written .tab-wb-status-badge { color: var(--accent, #58a6ff); }
.tab-wb-status-miss { border-color: rgba(248, 81, 73, 0.45); }
.tab-wb-status-miss .tab-wb-status-badge { color: #f85149; }
.tab-wb-status-empty { opacity: 0.75; }
.tab-wb-status-empty .tab-wb-status-badge { color: var(--muted); }

.region-tab-bar-pick { margin: 8px 0 10px; padding: 8px 10px; border: 1px solid var(--border-muted, #30363d); border-radius: 6px; background: rgba(88, 166, 255, 0.04); }
.region-tab-bar-pick.hidden { display: none; }
.region-tab-bar-pick-hint { font-size: 12px; margin: 0 0 8px; }
.region-tab-bar-pick-skip { font-size: 11px; margin-top: 6px; padding: 0; }
.region-tab-bar-pick-shot-wrap {
  position: relative;
  max-width: 420px;
  border: 1px solid var(--border-muted, #30363d);
  border-radius: 4px;
  overflow: hidden;
  cursor: crosshair;
  background: #0d1117;
}
.region-tab-bar-pick-shot-wrap img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.region-tab-bar-pick-overlay { position: absolute; inset: 0; pointer-events: none; }
.region-pick-box {
  position: absolute;
  border: 2px solid rgba(88, 166, 255, 0.95);
  background: rgba(88, 166, 255, 0.22);
  box-sizing: border-box;
  pointer-events: none;
}
.region-pick-point {
  position: absolute;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-radius: 50%;
  border: 2px solid rgba(88, 166, 255, 0.98);
  background: rgba(88, 166, 255, 0.55);
  box-sizing: border-box;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.region-tab-bar-pick-meta { font-size: 11px; margin: 6px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.region-propose-trees {
  margin: 8px 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--border-muted, #30363d);
  border-radius: 6px;
  background: rgba(63, 185, 80, 0.04);
}
.region-propose-trees-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.region-propose-trees .region-propose-tree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
}
.region-propose-trees .region-propose-tree-select {
  flex: 1;
  min-width: 0;
}
.region-propose-tree-row {
  display: grid;
  grid-template-columns: minmax(88px, 140px) 1fr;
  gap: 6px 10px;
  align-items: center;
  margin: 4px 0;
}
.region-propose-tree-row label {
  font-size: 12px;
  color: var(--text-secondary, #8b949e);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.region-propose-tree-row select {
  width: 100%;
  font-size: 12px;
  max-width: 100%;
}
.tab-workbench-layers { display: flex; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 8px; font-size: 11px; }
#view-tab-workbench .region-propose-panel,
#view-tab-workbench .page-structure-panel,
#view-tab-workbench .middle-view-hint,
#view-tab-workbench .capture-structure-summary {
  overflow: visible;
}
#view-tab-workbench .middle-view-hint {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  padding: 0 12px;
}
.tab-workbench-section { margin: 12px 0; }
.tab-workbench-section h4 { margin: 0 0 6px; font-size: 12px; }
.tab-workbench-region-details,
.tab-workbench-bind-details {
  margin: 8px 0;
  font-size: 11px;
}
.tab-workbench-region-details summary,
.tab-workbench-bind-details summary {
  cursor: pointer;
  user-select: none;
}
.tab-workbench-table { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
.tab-workbench-table th, .tab-workbench-table td {
  border-bottom: 1px solid var(--border); padding: 4px 6px; vertical-align: top; text-align: left;
}
.tab-workbench-table th:nth-child(1) { width: 72px; }
.tab-workbench-table th:nth-child(2) { width: 100px; }
.tab-workbench-table th:nth-child(3) { width: 48px; }
.tab-workbench-table tr.is-active { background: rgba(88, 166, 255, 0.1); }
.tab-workbench-table tr.is-miss { opacity: 0.55; }
.tab-workbench-table tr[data-role] { cursor: pointer; }
.tab-workbench-xpath {
  font-family: var(--mono, monospace);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: normal;
}
.selector-panel { border-right: none; }
.po-table-wrap { flex: 1; overflow: auto; min-height: 0; }
.po-table { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
.po-table th:nth-child(1), .po-table td:nth-child(1) { width: 56px; }
.po-table th:nth-child(2), .po-table td:nth-child(2) { width: 120px; min-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-table th:nth-child(3), .po-table td:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.po-table th:nth-child(4), .po-table td:nth-child(4) { width: 72px; font-size: 10px; }
.po-table th:nth-child(5), .po-table td:nth-child(5) { width: 110px; min-width: 100px; overflow: hidden; }
.po-table th:nth-child(6), .po-table td:nth-child(6) { width: 64px; }
.po-table th:nth-child(7), .po-table td:nth-child(7) { width: 56px; }
.strategy-cell { line-height: 1.3; }
.expectation-section { border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; margin: 0 12px 6px; flex: 0 0 auto; }
.expectation-section .section-head { margin-bottom: 4px; font-size: 11px; }
.expectation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; align-items: center; }
.expectation-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 0; }
.expectation-row-full { grid-column: 1 / -1; }
.expect-list-scope { display: none !important; }
.expect-list-scope.hidden { display: none !important; }

/* 右栏分章：运行时 / Studio / 调试 */
.po-chapter {
  margin: 0 0 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border);
}
.po-chapter:last-of-type { border-bottom: none; }
.po-chapter-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 4px 12px 6px;
  font-size: 12px;
}
.po-chapter-head strong {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.po-chapter[data-chapter="runtime"] .po-chapter-head strong { color: var(--accent, #6cb6ff); }
.po-chapter[data-chapter="studio"] .po-chapter-head strong { color: var(--ok, #8bc34a); }
.po-chapter[data-chapter="debug"] .po-chapter-head strong { color: var(--muted); }
.po-chapter .selector-section { padding-left: 12px; padding-right: 12px; }
.po-chapter .po-meta-strip { margin-top: 4px; }
.po-chapter .po-advanced { margin-top: 4px; }

.po-meta-strip {
  margin: 0 12px 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.po-meta-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  min-height: 24px;
}
.po-meta-row.hidden { display: none; }
.po-meta-label { font-size: 10px; color: var(--muted); }
.po-meta-value {
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* 去向：与 Selectors 同级卡片，不贴边 */
.po-destinations-card {
  margin: 8px 12px 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.po-destinations-card .section-head {
  margin-bottom: 8px;
}
.po-destinations-summary {
  font-size: 11px;
  margin: 0 0 6px;
  line-height: 1.35;
}
.po-destinations-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  max-height: 160px;
  overflow: auto;
}
.po-destinations-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.15);
}
.po-destinations-list li.po-dest-empty {
  border-style: dashed;
  color: var(--muted);
  font-size: 11px;
  justify-content: center;
}
.po-dest-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.po-dest-line-title {
  font-size: 12px;
  color: var(--text);
  word-break: break-word;
}
.po-dest-line-meta {
  font-size: 10px;
  color: var(--muted);
  word-break: break-all;
}
.po-dest-form {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.po-dest-form.hidden { display: none; }
.po-dest-form-row .expect-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
  width: 100%;
}
.po-dest-form-row select,
.po-dest-form-row input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg, #0d1117);
  color: var(--text);
}
.po-destinations-status {
  margin: 6px 0 0;
  min-height: 0;
}
.po-destinations-status:empty { display: none; }

.po-advanced {
  margin: 0 12px 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}
.po-advanced > summary {
  cursor: pointer;
  list-style: none;
  font-size: 11px;
  color: var(--muted);
  user-select: none;
}
.po-advanced > summary::-webkit-details-marker { display: none; }
.po-advanced > summary::before {
  content: "▸ ";
  color: var(--muted);
}
.po-advanced[open] > summary::before { content: "▾ "; }
.po-advanced[open] > summary { margin-bottom: 8px; color: var(--text); }
.po-advanced .expectation-grid { margin-top: 4px; }

.fingerprint-checkboxes { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.fp-check { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.fp-block-head { display: flex; align-items: center; gap: 8px; width: 100%; }
.fp-summary { font-size: 12px; line-height: 1.5; word-break: break-word; }
.fingerprint-editor { width: 100%; margin-top: 0; padding: 0; border: none; border-radius: 0; }
.scan-defaults-editor { display: flex; flex-direction: column; gap: 8px; }
.scan-defaults-editor .expect-label { display: flex; flex-direction: column; gap: 4px; color: var(--text, #ddd); }
.scan-defaults-editor .expect-label input,
.scan-defaults-editor .expect-label select { font-size: 12px; padding: 4px 6px; }
.fp-edit-rows { list-style: none; margin: 0 0 8px; padding: 0; }
.fp-edit-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--border, #3333); }
.fp-edit-row .fp-alias { font-size: 12px; min-width: 100px; }
.fp-edit-row select { font-size: 11px; padding: 2px 4px; max-width: 140px; }
.fp-editor-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fp-editor-bar select { max-width: 180px; font-size: 11px; }
.row-hit-rows { list-style: none; margin: 0; padding: 0; /* 滚动交给 .vis-popover-body，避免脚被裁 */ }
.row-hit-advanced { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border, #3333); }
.row-hit-advanced.hidden { display: none; }
.row-hit-opt {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 12px;
  line-height: 1.4;
}
.row-hit-opt:last-child { margin-bottom: 0; }
.row-hit-opt input { margin-top: 2px; flex-shrink: 0; }
.rh-row { padding: 8px 0; border-bottom: 1px solid var(--border, #3333); }
.rh-row-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  width: 100%;
  cursor: pointer;
}
.rh-row-label > input[type="checkbox"] {
  margin-top: 3px;
  flex: 0 0 auto;
}
.rh-row-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.rh-row-title {
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}
.rh-row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}
.rh-row-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.rh-row-desc {
  font-size: 11px;
  color: var(--muted, #888);
  line-height: 1.35;
  word-break: break-word;
}
.rh-row-invisible { opacity: 0.45; }
.rh-row-invisible .rh-row-label { cursor: not-allowed; color: var(--muted, #888); }
.rh-row-invisible .rh-row-title { font-weight: 500; text-decoration: line-through; text-decoration-color: #8886; }
.rh-row-partial .rh-row-title { font-weight: 600; }
.rh-invis-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: #8883;
  color: var(--muted, #888);
  white-space: nowrap;
}
.rh-exp-full {
  background: #3fb95033;
  color: #3fb950;
}
.rh-exp-partial {
  background: #d2992233;
  color: #d29922;
}
.rh-exp-none {
  background: #8883;
  color: var(--muted, #888);
}
.rh-nofp-badge {
  background: #a67c5233;
  color: #a67c52;
}
.rh-noshell-badge {
  background: #6e768133;
  color: #8b949e;
}
.rh-claimed-badge {
  background: #d2992233;
  color: #d29922;
}
.rh-test-pass {
  background: #3fb95033;
  color: #3fb950;
}
.rh-test-miss {
  background: #f8514933;
  color: #f85149;
}
.rh-test-leak {
  background: #db6d2833;
  color: #db6d28;
}
.rh-row-test-fail {
  background: #f851490f;
}
.rh-row-test-fail .rh-row-title {
  color: #f85149;
}
.expect-label { font-size: 10px; color: var(--muted); }
.expect-label select { margin-left: 4px; font-size: 11px; padding: 2px 4px; }
.expect-label.full-width { display: block; width: 100%; }
.expect-label.full-width textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  box-sizing: border-box;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  padding: 6px 8px;
  font-family: var(--mono);
  font-size: 11px;
  resize: vertical;
}
.expect-src { font-size: 10px; margin-left: 4px; }
.add-wizard-section { border: 1px solid var(--border); border-radius: 6px; padding: 8px; margin: 0 12px 8px; flex: 0 0 auto; background: rgba(56, 139, 253, 0.06); }
.wizard-grid { display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.wizard-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wizard-manual select, .wizard-manual textarea { width: 100%; margin-top: 4px; font-family: var(--mono); font-size: 11px; }
.wizard-ai { display: flex; flex-direction: column; gap: 6px; }
.wiz-ai-log {
  display: block;
  max-height: 180px;
  overflow: auto;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}
.wiz-ai-log[hidden] { display: none; }
.wiz-ai-confirm { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--border); }
.wiz-ai-confirm.hidden { display: none; }
.wiz-ai-result-label { display: block; font-size: 11px; color: var(--muted); }
.wiz-ai-result-label select,
.wiz-ai-result-label textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
}
.wizard-actions { display: flex; gap: 8px; margin-top: 6px; }
.scope-badge { font-size: 10px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); white-space: nowrap; }
.scope-badge.scoped { border-color: #388bfd; color: #58a6ff; }
.scope-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; padding: 0 2px; }
.scope-tabs-single { opacity: 0.9; }
.scope-tab { font-size: 10px; padding: 3px 8px; border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 4px; cursor: pointer; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-tab.active { background: var(--sel-bg); border-color: #388bfd; color: #58a6ff; }
.scope-tab-hint { font-size: 10px; margin: 0 0 6px; padding: 0 2px; }
.version-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; }
.version-tab { font-size: 10px; padding: 2px 8px; border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 4px; cursor: pointer; }
.version-tab.active { background: var(--sel-bg); border-color: var(--accent); }
.expectation-actions { margin-top: 4px; }
.expect-hint { font-size: 10px; margin: 2px 0 0; }
.registered-test-results { padding: 0 12px 8px; flex-shrink: 0; }
.registered-test-results:empty { display: none; }
.po-edit-readonly { background: var(--bg); border: 1px solid var(--border); color: var(--muted); padding: 6px 10px; border-radius: 6px; font-family: var(--mono); font-size: 12px; }
#po-edit-label, #po-edit-dialog input:not([readonly]) {
  display: block; width: 100%; margin-top: 4px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 6px 10px; border-radius: 6px; font-size: 13px;
}
#po-edit-dialog label { display: block; margin: 10px 0; font-size: 12px; color: var(--muted); }
.vis-cell { cursor: pointer; white-space: nowrap; overflow: hidden; display: flex; align-items: center; gap: 2px; max-width: 100%; }
.vis-cell .btn-vis { flex: 0 0 auto; margin-left: 0; padding: 0 4px; font-size: 10px; background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--muted); cursor: pointer; }
.vis-badge { flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--conditional); border: none; background: transparent; padding: 0; cursor: pointer; font-family: inherit; text-align: left; }
.vis-badge.vis-badge-warn { color: var(--warn, #e6a23c); text-decoration: underline; text-underline-offset: 2px; }
.tree-mgmt-version-row { padding: 0 0 10px; font-size: 12px; }
.tree-mgmt-version-row select { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 4px 8px; border-radius: 6px; margin-left: 6px; }
.capture-structure-summary { margin: 8px 0 12px; }

.pages-panel-actions { display: flex; align-items: center; gap: 6px; }
.pages-panel-actions .btn-action { font-size: 12px; padding: 4px 10px; }

.cs-struct-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}
.cs-struct-edit .btn-action { font-size: 12px; padding: 2px 8px; }
.capture-structure-list { display: flex; flex-direction: column; gap: 10px; max-height: 68vh; overflow: auto; padding-right: 4px; }
.tab-cal-panel {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(88, 166, 255, 0.35);
  border-radius: 8px;
  background: rgba(88, 166, 255, 0.06);
}
.tab-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}
.tab-cal-gaps {
  max-height: 120px;
  overflow: auto;
  font-size: 12px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tab-cal-gap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  background: transparent;
  color: inherit;
  font: inherit;
}
.tab-cal-gap:hover { border-color: var(--border); background: rgba(255,255,255,0.03); }
.tab-cal-gap.active { border-color: rgba(88,166,255,0.5); background: rgba(88,166,255,0.12); }
.tab-cal-gap .gap-path { font-weight: 600; }
.tab-cal-gap .gap-issue { color: var(--muted); font-size: 11px; }
.tab-cal-pick { font-size: 12px; margin-bottom: 8px; }
.tab-cal-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.region-propose-panel {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(88, 166, 255, 0.35);
  border-radius: 8px;
  background: rgba(88, 166, 255, 0.06);
}
.region-propose-panel.is-running {
  border-color: rgba(210, 153, 34, 0.65);
  background: rgba(210, 153, 34, 0.08);
  animation: region-propose-pulse 1.6s ease-in-out infinite;
}
@keyframes region-propose-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210, 153, 34, 0); }
  50% { box-shadow: 0 0 0 2px rgba(210, 153, 34, 0.25); }
}
.region-propose-status {
  font-size: 12px;
  line-height: 1.45;
  margin: 0 0 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--conditional);
}
.region-propose-status.ok { color: var(--aligned); }
.region-propose-status.err { color: var(--miss); }
.region-propose-status.warn { color: var(--conditional); }
.region-propose-process {
  margin: 8px 0;
  padding: 6px 8px;
  border: 1px solid rgba(210, 153, 34, 0.35);
  border-radius: 6px;
  background: rgba(210, 153, 34, 0.06);
}
.region-propose-progress-log {
  max-height: 180px;
  margin-top: 6px;
  font-size: 11px;
}
.region-propose-result {
  margin-top: 8px;
  border: 1px solid rgba(63, 185, 80, 0.35);
  border-radius: 6px;
  padding: 4px 8px;
  background: rgba(63, 185, 80, 0.06);
}
.region-propose-result > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 12px;
  padding: 4px 0;
}
.region-propose-result .tab-cal-proposal {
  max-height: min(42vh, 420px);
}
#page-structure-saved.page-structure-fold {
  margin-top: 10px;
  opacity: 0.92;
}
#page-structure-saved > summary {
  cursor: pointer;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.region-propose-tree-select:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}
.region-mark-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
}
.page-structure-panel .tab-cal-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.page-structure-summary-badge {
  font-size: 11px;
  font-weight: 600;
}
.page-structure-summary-badge.ok { color: var(--aligned); }
.page-structure-summary-badge.warn { color: var(--conditional); }
.page-structure-summary-badge.miss { color: var(--miss); }
.page-structure-saved {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.page-structure-saved-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.page-structure-saved-title { font-weight: 600; }
.page-structure-saved-body { font-size: 11px; line-height: 1.5; }
.page-structure-saved-body.empty { color: var(--muted); font-style: italic; }
.page-structure-anchor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.page-structure-anchor-table th,
.page-structure-anchor-table td {
  text-align: left;
  padding: 4px 6px 4px 0;
  vertical-align: top;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.page-structure-anchor-table th {
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.page-structure-anchor-table .ps-xpath {
  font-family: var(--mono, monospace);
  word-break: break-all;
  color: var(--text);
  max-width: 420px;
}
.page-structure-proposal { margin-top: 8px; }
.page-structure-proposal-head { font-size: 11px; margin-bottom: 4px; }
.cs-region-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
}
.cs-region-badge.ok {
  color: var(--aligned);
  background: rgba(63, 185, 80, 0.12);
}
.cs-region-badge.warn {
  color: var(--conditional);
  background: rgba(210, 153, 34, 0.12);
}
.cs-region-badge.miss {
  color: var(--miss);
  background: rgba(248, 81, 73, 0.1);
}
.page-structure-section {
  margin-bottom: 10px;
}
.page-structure-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 12px;
}
.page-structure-section-title { font-weight: 600; }
.page-structure-empty {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  padding: 2px 0 6px;
}
.page-structure-legend {
  font-size: 10px;
  margin-top: 6px;
}
.page-structure-anchor-table .ps-jump-row {
  cursor: pointer;
}
.page-structure-anchor-table .ps-jump-row:hover {
  background: rgba(88, 166, 255, 0.08);
}
.ps-bind-ok { color: var(--aligned); }
.ps-bind-miss { color: var(--miss); }
.cs-bind.ps-bind-flash {
  outline: 2px solid rgba(88, 166, 255, 0.55);
  border-radius: 8px;
}
.tree-node.ps-highlight {
  border-left-width: 3px;
  border-left-style: solid;
}
.tree-node.ps-role-tab_bar { border-left-color: #d29922; background: rgba(210, 153, 34, 0.1); }
.tree-node.ps-role-content { border-left-color: #3fb950; background: rgba(63, 185, 80, 0.1); }
.tree-node.ps-role-shell { border-left-color: #a371f7; background: rgba(163, 113, 247, 0.1); }
.tree-node.ps-role-tab_item { border-left-color: #58a6ff; background: rgba(88, 166, 255, 0.12); }
.tree-node .ps-tree-tag {
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 3px;
  font-size: 10px;
  color: var(--conditional);
  background: rgba(210, 153, 34, 0.18);
}
.tree-node.ps-type-tab .ps-tree-tag {
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.18);
}
.page-structure-check {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.page-structure-check-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
}
.page-structure-check-head .btn-link {
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent, #3b82f6);
  cursor: pointer;
  font-size: 11px;
}
.page-structure-check-head .btn-link:hover { text-decoration: underline; }
.ps-check-actions { margin: 4px 0 0 20px; display: flex; gap: 6px; flex-wrap: wrap; }
.ps-check-actions .btn-action { font-size: 11px; padding: 2px 8px; }
.page-structure-check-summary.ok { color: var(--aligned); }
.page-structure-check-summary.warn { color: var(--conditional); }
.page-structure-check-body { font-size: 11px; line-height: 1.45; }
.ps-check-step {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ps-check-step:last-child { border-bottom: none; }
.ps-check-step-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ps-check-status { font-weight: 700; min-width: 14px; }
.ps-check-step.ok .ps-check-status { color: var(--aligned); }
.ps-check-step.warn .ps-check-status { color: var(--conditional); }
.ps-check-step.miss .ps-check-status { color: var(--miss); }
.ps-check-msgs {
  margin: 4px 0 0 20px;
  padding: 0;
  list-style: disc;
}
.ps-check-hint { margin: 2px 0 0 20px; font-size: 10px; }
.tab-cal-proposal {
  margin: 0;
  max-height: 140px;
  overflow: auto;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
  background: rgba(0,0,0,0.25);
  border-radius: 6px;
  padding: 8px;
}
.tree-view .tree-node { cursor: pointer; }
.tree-view .tree-node.tab-pick { outline: 1px solid rgba(88,166,255,0.7); background: rgba(88,166,255,0.15); }
.cs-node { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: rgba(255,255,255,0.02); }
.cs-node-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; margin-bottom: 8px; }
.cs-kind { font-size: 11px; color: #58a6ff; border: 1px solid rgba(88,166,255,0.4); border-radius: 4px; padding: 1px 6px; }
.cs-owner { font-size: 11px; color: var(--muted); }
.cs-multi-parents {
  font-size: 11px;
  color: #9a6700;
  border: 1px solid rgba(154, 103, 0, 0.45);
  border-radius: 4px;
  padding: 1px 6px;
  background: rgba(154, 103, 0, 0.08);
  max-width: 100%;
}
.cs-states { font-size: 11px; color: var(--muted); }
.mod-parents {
  margin-top: 2px;
  font-size: 11px;
  color: #9a6700;
  line-height: 1.35;
}
.pf-merge-panel {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(88, 166, 255, 0.35);
  border-radius: 8px;
  background: rgba(88, 166, 255, 0.06);
}
.pf-merge-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.pf-merge-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 12px;
  margin: 4px 0;
  cursor: pointer;
}
.pf-merge-row input { margin-top: 2px; }
.pf-merge-keep { opacity: 0.85; cursor: default; }
.pf-merge-hint {
  margin: 8px 0 10px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(154, 103, 0, 0.35);
  background: rgba(154, 103, 0, 0.08);
  font-size: 12px;
  line-height: 1.45;
}
.pf-merge-panel .btn-action { margin-top: 8px; }
.pf-similar-panel {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(210, 153, 34, 0.35);
  border-radius: 8px;
  background: rgba(210, 153, 34, 0.06);
}
.pf-similar-panel .semantic-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.pf-similar-row {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  margin: 4px 0;
}
.pf-similar-row .pf-similar-name {
  flex: 1;
  min-width: 0;
  word-break: break-all;
}
.pf-similar-pick-list {
  max-height: 220px;
  overflow: auto;
  margin: 6px 0 10px;
  padding: 6px 8px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 6px;
  background: rgba(0,0,0,0.15);
}
.pf-similar-add-details {
  margin-top: 10px;
  font-size: 12px;
}
.pf-similar-add-details > summary {
  cursor: pointer;
  color: var(--muted, #8b949e);
  margin-bottom: 6px;
}
.pf-catalog-identity-panel .pf-feature-block,
.pf-formal-result-panel .pf-report {
  margin-top: 6px;
}
.pf-pending-draft-panel {
  border-color: rgba(210, 153, 34, 0.45);
}
.pf-similar-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 2px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.35;
}
.pf-similar-check input {
  margin-top: 2px;
  flex-shrink: 0;
}
.pf-similar-check-label {
  flex: 1;
  min-width: 0;
  word-break: break-all;
  white-space: normal;
}
.pf-similar-selected-head {
  font-size: 11px;
  font-weight: 600;
  margin: 8px 0 4px;
  color: var(--muted, #8b949e);
}
.pf-similar-optional {
  padding-top: 6px;
  padding-bottom: 6px;
}
.pf-similar-optional-summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #8b949e);
  list-style: none;
}
.pf-similar-optional-summary::-webkit-details-marker { display: none; }
.pf-write-identity-menu {
  position: relative;
  display: inline-block;
}
.pf-write-identity-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.pf-write-identity-menu > summary::-webkit-details-marker { display: none; }
.pf-write-identity-menu > summary::after {
  content: " ▾";
  font-size: 11px;
  opacity: 0.85;
}
.pf-write-identity-opts {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border, rgba(255,255,255,0.14));
  border-radius: 8px;
  background: var(--bg, #1e1e1e);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.pf-write-identity-opts .btn-action {
  width: 100%;
  justify-content: flex-start;
}
.cs-structure-warn { font-size: 11px; color: var(--conditional); border: 1px solid rgba(210,153,34,0.4); border-radius: 4px; padding: 1px 6px; }
.cs-nav-pending { font-size: 11px; color: var(--conditional); }
.cs-nav-bound { font-size: 11px; color: var(--aligned); }
.cs-bind { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(140px, 0.8fr) auto; gap: 8px; align-items: end; margin: 8px 0 10px; }
.cs-bind-title { align-self: center; font-size: 11px; font-weight: 600; color: var(--text); }
.cs-bind label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); min-width: 0; }
.cs-bind select { width: 100%; min-width: 0; }
.pm-hosts-wrap { margin: 8px 0 4px; }
.pm-hosts-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.pm-hosts-list { display: flex; flex-direction: column; gap: 6px; }
.pm-cs-wrap { margin: 10px 0 4px; }
.pm-cs-list { display: flex; flex-direction: column; gap: 6px; }
.pm-cs-row, .np-version-row, .pm-host-row {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.pm-cs-row input, .np-version-row { font-size: 12px; }
.np-versions-wrap { margin: 12px 0 4px; border-top: 1px solid var(--border, #333); padding-top: 10px; }
.np-versions-list { display: flex; flex-direction: column; gap: 6px; max-height: 180px; overflow: auto; }
.pm-host-row { display: flex; gap: 8px; align-items: center; }
.pm-host-row select { flex: 1; min-width: 0; }
.cs-modules { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; font-size: 11px; }
.cs-module { border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; color: var(--text); }
.cs-states-list { display: flex; flex-direction: column; gap: 8px; }
.cs-state-row { border-top: 1px solid var(--border); padding-top: 8px; }
.cs-state-title { font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.cs-state-children { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; font-size: 11px; }
.cs-state-child { border: 1px solid rgba(88,166,255,0.25); border-radius: 4px; padding: 2px 6px; }
.cs-state-empty { color: var(--muted); font-size: 12px; border-top: 1px solid var(--border); padding-top: 8px; }
.cs-samples { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-sample { width: 92px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--bg); }
.cs-sample img, .cs-sample-noimg { display: block; width: 100%; height: 118px; object-fit: cover; object-position: top center; background: #111; }
.cs-sample-noimg { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 11px; }
.cs-sample-caption { padding: 4px 5px; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-sample-actions { display: flex; flex-direction: column; gap: 2px; padding: 0 4px 6px; }
.cs-sample-actions .btn-link-inline { font-size: 10px; text-align: left; }
.cs-content-states { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: rgba(56,139,253,0.06); }
.cs-cs-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; font-size: 12px; }
.cs-cs-list { margin: 0; padding-left: 18px; font-size: 12px; }
.cs-cs-list li { margin: 2px 0; }
.cs-promote-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.cs-promote-check input { width: auto; }
.pf-cs-panel { margin: 10px 0 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(63,185,80,0.06); }
.pf-cs-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.pf-cs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pf-cs-chip { background: #21262d; border: 1px solid var(--border); color: var(--text); padding: 4px 10px; border-radius: 999px; cursor: pointer; font-size: 12px; }
.pf-cs-chip.active { border-color: var(--aligned); color: var(--aligned); background: rgba(63,185,80,0.12); }
.btn-pf-cs { border-color: var(--aligned) !important; }
.cs-tree-open { display: block; width: 100%; text-align: center; padding: 4px 0; border-top: 1px solid var(--border); }
.unmatched-tabs { display: flex; gap: 8px; margin: 10px 0 12px; }
.unmatched-tab { border: 1px solid var(--border); background: #21262d; color: var(--text); border-radius: 6px; padding: 7px 12px; cursor: pointer; }
.unmatched-tab.active { border-color: rgba(88,166,255,0.7); background: rgba(56,139,253,0.16); }
.unmatched-list { display: flex; flex-direction: column; gap: 10px; max-height: 68vh; overflow: auto; padding-right: 4px; }
.unmatched-row { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, 0.8fr); gap: 12px; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: rgba(255,255,255,0.02); }
.unmatched-node-row { align-items: start; grid-template-columns: minmax(360px, 1.4fr) minmax(220px, 0.6fr); }
.unmatched-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.unmatched-po { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unmatched-actions { display: flex; gap: 8px; align-items: center; min-width: 0; }
.unmatched-node-row .unmatched-actions { flex-direction: column; align-items: stretch; }
.unmatched-actions select { flex: 1; min-width: 0; }
.unmatched-suggestions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.unmatched-screenshots { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 4px; }
.unmatched-screenshots.compact .unmatched-shot { flex-basis: 88px; }
.unmatched-screenshots.compact .unmatched-shot img { height: 112px; }
.unmatched-shot { flex: 0 0 104px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--bg); }
.unmatched-shot img { display: block; width: 100%; height: 140px; object-fit: cover; object-position: top center; background: #111; }
.unmatched-shot-caption { padding: 4px 5px; font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unmatched-no-screenshot { border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; color: var(--muted); font-size: 12px; margin-top: 6px; }
.unmatched-suggestion { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: rgba(0,0,0,0.14); }
.unmatched-suggestion.primary { border-color: rgba(88,166,255,0.45); background: rgba(56,139,253,0.08); }
.unmatched-suggestion-title { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 12px; }
.unmatched-suggestion-evidence { margin: 5px 0 6px; font-size: 11px; line-height: 1.45; color: var(--text); }
.unmatched-no-suggestion { border: 1px dashed var(--border); border-radius: 8px; padding: 8px 10px; color: var(--muted); font-size: 12px; }
.unmatched-hint { min-height: 18px; margin: 8px 0; }
.unmatched-hint.is-error { color: #ffaba8; }
.unmatched-hint.is-ok { color: var(--aligned); }

@media (max-width: 900px) {
  .cs-bind { grid-template-columns: 1fr; }
  .cs-node { margin-left: 0 !important; }
  .unmatched-row { grid-template-columns: 1fr; }
}
.add-tree-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.add-tree-grid .full-width { grid-column: 1 / -1; }
.add-tree-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.add-tree-grid input, .add-tree-grid select, .add-tree-grid textarea { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 6px 8px; border-radius: 6px; font-size: 12px; }
.variant-group-title { font-size: 10px; font-weight: 600; color: var(--muted); padding: 8px 10px 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.tree-test-row.na { opacity: 0.55; }
/* 插件窄窗：整层限高，head/foot 钉住，仅 body 滚动 → 保存按钮始终可点 */
.vis-popover {
  position: fixed;
  z-index: 100;
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  box-sizing: border-box;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  padding: 0;
  overflow: hidden;
}
.vis-popover.hidden { display: none; }
.vis-popover-head {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.vis-popover-sub { font-size: 11px; font-weight: 400; margin-top: 2px; max-height: 4.5em; overflow: auto; }
.vis-popover-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 12px;
  overflow: auto;
  font-size: 12px;
  -webkit-overflow-scrolling: touch;
}
.vis-popover-foot {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  background: var(--panel);
}
.vis-scope-modes { display: flex; gap: 14px; margin-bottom: 10px; flex-wrap: wrap; }
.vis-scope-modes label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-size: 12px; }
.vis-sample-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vis-sample-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 10px; padding: 0 6px 6px 0; border-bottom: 1px solid var(--border); }
.vis-sample-table td { padding: 7px 6px 7px 0; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }
.vis-sample-table tr:last-child td { border-bottom: none; }
.vis-sample-table .col-hit { width: 40px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.vis-sample-table .col-hit.hit-ok { color: var(--aligned); }
.vis-sample-table .col-hit.hit-miss { color: var(--miss); }
.vis-sample-table label.vis-sample-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.vis-sample-table .vis-sample-name { display: flex; flex-direction: column; gap: 2px; }
.vis-sample-table .vis-scroll-note { font-size: 10px; color: var(--muted); }
.vis-sample-table input[type=checkbox]:disabled { opacity: 0.45; }
.vis-pool-box { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,0.02); line-height: 1.45; }
.vis-pool-details { margin-top: 10px; }
.vis-pool-details summary { cursor: pointer; font-size: 11px; }
.vis-pool-hits { margin-top: 8px; padding-left: 0; list-style: none; font-size: 11px; color: var(--muted); }
.vis-pool-hits li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.warn-inline { color: var(--warn, #e6a23c); font-size: 11px; margin: 0 0 8px; }
.vis-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.vis-row:last-child { border-bottom: none; }
.vis-expect-na { color: var(--muted); }
.vis-expect-ok { color: var(--aligned); }
.vis-expect-bad { color: var(--miss); }
.proof-leak-hint { font-size: 11px; color: var(--warn, #e6a23c); margin: 4px 0 0; }
.proof-leak-hint.hidden { display: none; }
.selector-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px 4px;
  flex-shrink: 0;
  min-width: 0;
}
.selector-head-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.selector-head h3 {
  margin: 0;
  font-size: 14px;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
}
.selector-head .btn-link { flex-shrink: 0; white-space: nowrap; }
.tab-role-hint {
  font-size: 11px;
  color: var(--muted, #888);
  margin: 0;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: normal;
}
.tab-role-hint.warn { color: var(--warn, #e6a23c); }
.tab-role-hint.hidden { display: none; }
.badge-warn { font-size: 10px; color: #b36b00; background: #fff3cd; padding: 0 4px; border-radius: 3px; }
.verify-cell .badge,
.attention-cell .badge { min-width: 1.2em; display: inline-block; text-align: center; }
.attention-cell { font-size: 10px; }
.attention-cell .badge + .badge { margin-left: 4px; }
.script-refs-popover {
  position: fixed; z-index: 1200; min-width: 280px; max-width: 420px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.script-refs-popover.hidden { display: none; }
.script-refs-popover-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 12px;
}
.script-refs-popover-body { padding: 8px 12px; max-height: 280px; overflow-y: auto; font-size: 12px; }
.script-refs-body { font-size: 12px; max-height: 180px; overflow-y: auto; }
.script-refs-list { list-style: none; margin: 0; padding: 0; }
.script-ref-item { padding: 6px 4px; border-bottom: 1px solid var(--border, #2d333b); cursor: pointer; }
.script-ref-item:hover { background: var(--hover, rgba(255,255,255,0.04)); }
.script-ref-name { display: block; font-weight: 500; }
.script-ref-path { display: block; font-size: 11px; word-break: break-all; }
.setup-hint { display: block; font-size: 11px; margin-top: 4px; }
.po-table th { text-align: left; padding: 8px 10px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); }
.po-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; cursor: pointer; }
.po-table tr:hover td { background: rgba(255,255,255,0.03); }
.po-table tr.active td { background: var(--sel-bg); }
.po-table .ctx-row td { cursor: default; background: rgba(255,255,255,0.04); color: var(--muted); font-weight: 700; font-size: 10px; letter-spacing: 0; }
.po-table .ctx-row:hover td { background: rgba(255,255,255,0.04); }
.selector-hint { font-size: 11px; margin: 0 12px 6px; }
.selector-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; padding-top: 8px; }
.selector-toolbar-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 12px 4px; flex-shrink: 0; }
.selector-toolbar-row.hidden { display: none; }
.tree-hint { font-family: var(--mono); font-size: 11px; }
.selector-list { list-style: none; margin: 0; padding: 0; overflow: auto; min-height: 0; flex: 1; }
.selector-item { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; background: var(--bg); }
.selector-item:hover { border-color: #484f58; }
.selector-item.active { border-color: #58a6ff; background: var(--sel-bg); }
.selector-item-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.selector-item-name { font-weight: 600; font-size: 13px; }
.selector-type-tag { font-weight: 500; font-size: 10px; color: var(--muted); margin-left: 4px; padding: 1px 5px; border: 1px solid var(--border); border-radius: 4px; }
.selector-fallbacks { font-size: 10px; margin-top: 2px; }
.selector-meta-banner { font-size: 11px; padding: 8px 10px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,0.02); line-height: 1.45; }
.selector-meta-banner .smb-policy { display: block; margin-bottom: 2px; }
.selector-meta-banner .smb-detail { display: block; }
.selector-version-block { margin: 8px 0; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; }
.selector-version-title { font-size: 10px; color: var(--muted); margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.selector-version-row { margin-bottom: 8px; }
.selector-version-row:last-child { margin-bottom: 0; }
.sv-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.sv-ver { font-size: 11px; font-weight: 600; }
.selector-chain-list { list-style: none; margin: 0; padding: 0; }
.sel-chain-row { border: 1px solid rgba(255,255,255,0.06); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; background: rgba(0,0,0,0.15); }
.sel-chain-row.verdict-dead { border-color: rgba(248,81,73,0.35); }
.sel-chain-row.verdict-duplicate { border-color: rgba(210,153,34,0.35); }
.sel-chain-row.verdict-same_node { border-color: rgba(210,153,34,0.35); }
.sel-chain-row.verdict-useful { border-color: rgba(63,185,80,0.2); }
.sch-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sch-order { font-weight: 700; font-size: 12px; color: #58a6ff; min-width: 1.5em; }
.sel-verdict { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.sel-verdict-duplicate { color: var(--conditional); border: 1px solid rgba(210,153,34,0.4); }
.sel-verdict-same_node { color: var(--conditional); border: 1px solid rgba(210,153,34,0.4); }
.sel-verdict-inert { color: var(--danger, #f85149); border: 1px solid rgba(248,81,73,0.35); }
.sel-verdict-contributes { color: var(--ok, #3fb950); border: 1px solid rgba(63,185,80,0.3); }
.selector-hint-banner.warn {
  margin: 6px 0 4px; padding: 6px 8px; border-radius: 6px; font-size: 11px; line-height: 1.4;
  color: var(--conditional); background: rgba(210,153,34,0.12); border: 1px solid rgba(210,153,34,0.3);
}
.sel-efficiency { font-size: 10px; margin: 3px 0 2px; }
.sch-note { font-size: 10px; margin-bottom: 4px; line-height: 1.35; }
.selector-part-expr { font-family: var(--mono); font-size: 11px; line-height: 1.45; word-break: break-all; white-space: pre-wrap; color: var(--text); margin-top: 4px; }
.selector-part-expr.is-empty { color: var(--muted); font-style: italic; font-family: var(--font); }
.selector-chain-editable .sel-value-input {
  width: 100%; box-sizing: border-box; margin-top: 6px; padding: 6px 8px;
  font-family: var(--mono); font-size: 11px; line-height: 1.45; resize: vertical;
  background: rgba(0,0,0,0.25); border: 1px solid var(--border); border-radius: 4px; color: var(--text);
}
.selector-chain-editable .sel-type-select {
  font-size: 11px; padding: 2px 4px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text);
}
.sel-row-actions { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; align-items: center; }
.sel-row-actions .btn-link-inline { white-space: nowrap; }
.btn-icon {
  min-width: 22px; height: 22px; padding: 0 4px; font-size: 12px; line-height: 1;
  border: 1px solid var(--border); border-radius: 4px; background: rgba(255,255,255,0.04);
  color: var(--text); cursor: pointer;
}
.btn-icon:hover:not(:disabled) { background: rgba(255,255,255,0.1); border-color: #58a6ff; }
.btn-icon:disabled { opacity: 0.35; cursor: not-allowed; }
.selector-draft-hint { font-size: 10px; margin-bottom: 6px; padding: 4px 8px; border-radius: 4px; }
.selector-draft-hint.warn { color: var(--conditional); background: rgba(210,153,34,0.12); border: 1px solid rgba(210,153,34,0.25); }
.selector-draft-empty { padding: 12px; text-align: center; border: 1px dashed var(--border); border-radius: 6px; margin-bottom: 6px; }
.part-state-rows { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.part-state-row { font-size: 10px; display: flex; gap: 4px; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.03); }
.part-state-row.ok { color: var(--aligned); }
.part-state-row.warn { color: var(--conditional); }
.part-state-row.err { color: #ffaba8; }
.engine-merge-footer { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 10px; }
.engine-merge-footer.compact { border-top: none; padding-top: 4px; margin-top: 4px; }
.merge-toggle { font-size: 11px; padding: 0; border: none; background: none; cursor: pointer; color: var(--muted); }
.merge-toggle:hover { color: #58a6ff; }
.engine-merge-head { font-weight: 600; margin-bottom: 4px; }
.engine-merge-head.ok { color: var(--aligned); }
.engine-merge-head.warn { color: var(--conditional); }
.warn-inline { color: var(--conditional); }
.selector-section { padding: 0 12px 8px; display: flex; flex-direction: column; min-height: 0; }
.selector-test-report {
  padding-top: 4px;
  border-top: 1px solid var(--border);
  margin-top: 2px;
  flex-shrink: 0;
  max-height: 42vh;
  overflow: auto;
}
.selector-test-report .str-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
}
.selector-test-report .str-summary.ok .str-status { color: var(--aligned); }
.selector-test-report .str-summary.warn .str-status { color: var(--conditional); }
.selector-test-report .str-summary.err .str-status { color: #ffaba8; }
.selector-test-report .str-summary-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.selector-test-report .str-status { font-weight: 600; }
.selector-test-report .str-advice-preview {
  color: var(--text);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selector-test-report .str-detail {
  padding: 0 0 8px;
  border-top: 1px dashed var(--border);
}
.selector-test-report .str-block { margin-top: 2px; }
.selector-test-report .str-advice-list {
  margin: 4px 0 0;
  padding-left: 16px;
  font-size: 11px;
  color: var(--text);
}
.selector-test-report .str-advice-list li { margin: 2px 0; }
.selector-test-report .str-row-sum {
  font-size: 11px;
  white-space: pre-wrap;
  margin: 6px 0 4px;
}
.selector-test-report .str-empty { font-size: 11px; padding: 6px 0; }
.selector-section-primary {
  flex: 1 1 0;
  overflow: hidden;
  padding: 8px 12px 6px;
  margin: 0 0 4px;
  background: rgba(56, 139, 253, 0.04);
  border-bottom: 1px solid var(--border);
}
.selector-section-primary .section-head-actions .btn-primary { font-weight: 600; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 6px; flex-shrink: 0; }
.section-head-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-section { border-top: 1px solid var(--border); padding-top: 8px; flex: 0 0 auto; }
.ai-draft-body { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; min-height: 48px; font-size: 12px; margin-bottom: 6px; }
.ai-draft-xpath { font-family: var(--mono); font-size: 11px; line-height: 1.45; word-break: break-all; white-space: pre-wrap; }
.ai-draft-meta { margin-top: 8px; font-size: 11px; color: var(--muted); }
.ai-draft-meta.ok { color: var(--aligned); }
.ai-draft-meta.warn { color: var(--conditional); }
.ai-draft-meta.err { color: #ffaba8; }
.ai-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.session-hint { font-size: 11px; margin: 0 12px 10px; line-height: 1.4; }
.session-hint.ok { color: var(--aligned); }
.session-hint.warn { color: var(--conditional); }
.session-hint.err { color: var(--miss); font-weight: 600; }
.tree-test-title { font-size: 11px; color: var(--muted); margin: 10px 0 4px; }
.tree-test-results { list-style: none; margin: 0; padding: 0; }
.tree-test-row { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.tree-test-row:last-child { border-bottom: none; }
.tree-test-row.ok .tt-name { color: var(--aligned); }
.tree-test-row.warn .tt-name { color: var(--conditional); }
.tree-test-row.err .tt-name { color: #ffaba8; }
.tt-name { flex-shrink: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-detail { color: var(--muted); text-align: right; word-break: break-all; }
.selector-item-registry .selector-item-xpath { color: var(--muted); }

.semantic-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}

.semantic-toolbar input[type="search"] {
  flex: 1;
}

.semantic-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.4fr);
  gap: 12px;
  min-height: 560px;
}

.semantic-workspace {
  align-items: stretch;
}

.semantic-page-list-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  min-height: 520px;
}

.semantic-page-list {
  list-style: none;
  margin: 0;
  padding: 6px;
}

.semantic-page-item {
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 4px;
}

.semantic-page-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

.semantic-page-item.active {
  background: var(--sel-bg);
  border-color: var(--border);
}

.semantic-page-item-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 2px;
}

.semantic-table-wrap,
.pf-sample-table-wrap {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 220px;
}

.semantic-table td {
  vertical-align: top;
}

.semantic-status {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid var(--border);
}

.semantic-matched { color: #0f7a32; background: #e9f8ee; }
.semantic-mismatch, .semantic-error { color: #9f1d1d; background: #fdecec; }
.semantic-unmapped { color: #7a5a00; background: #fff7d6; }
.semantic-ambiguous { color: #6b4f00; background: #fff3c4; }

.semantic-detail,
.semantic-editor {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  overflow: auto;
  min-height: 520px;
}

.semantic-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.semantic-kv {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.semantic-kv div {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px;
}

.semantic-kv strong {
  display: block;
  font-size: 12px;
  color: var(--muted);
}

.pf-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 10px 0 14px;
}

.pf-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.pf-form input,
.pf-form textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--bg, #fff);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
}

.pf-form textarea {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.4;
}

.pf-form .pf-full {
  grid-column: 1 / -1;
}

.pf-candidate-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 12px;
}

.pf-chip {
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--mono, ui-monospace, monospace);
}

.pf-chip:hover {
  background: var(--sel-bg);
}

.pf-editor-log {
  margin-top: 8px;
  white-space: pre-wrap;
  font-size: 12px;
  min-height: 1.2em;
}

.dialog-page-feature {
  width: min(1280px, 96vw);
}

.pf-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}

.pf-step {
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--muted);
}

.pf-step.active {
  color: var(--text);
  background: var(--sel-bg);
  border-color: var(--text);
  font-weight: 600;
}

.pf-step.done {
  color: #0f7a32;
}

.pf-aside-title {
  font-size: 12px;
  color: var(--muted);
  padding: 8px 10px 4px;
}

.pf-step-panel h4 {
  margin: 0 0 8px;
}

.pf-step-panel h5 {
  margin: 14px 0 6px;
  font-size: 13px;
}

.pf-rule-list,
.pf-neg-list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
}

.pf-extra-pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
  max-height: 360px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
}

.pf-extra-item {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 6px;
}

.pf-extra-item:hover {
  background: rgba(0, 0, 0, 0.03);
}

.pf-chip-strong {
  border-color: #0f7a32;
  color: #0f7a32;
}

.pf-chip-unique {
  background: #e9f8ee;
}

.pf-row-bad {
  background: #fdecec;
}

.pf-cli-hint {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 8px 0 12px;
  background: rgba(0, 0, 0, 0.02);
}

.btn-pf-primary {
  font-weight: 600;
}

.pf-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 0 12px;
}

.pf-panel.pf-ok {
  border-color: var(--aligned, #2f9e5e);
  background: rgba(47, 158, 94, 0.08);
}

.pf-panel.pf-fail {
  border-color: var(--miss, #c44);
  background: rgba(204, 68, 68, 0.08);
}

.pf-kv {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin: 8px 0;
  font-size: 13px;
}

.pf-hint-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pf-hint-grid ul {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12px;
}

.pf-field {
  display: block;
  margin: 8px 0;
  font-size: 12px;
}

.pf-field textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
}

.pf-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.pf-report {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  white-space: pre-wrap;
  max-height: 220px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.pf-report.is-ok {
  color: var(--aligned, #7dcea0);
  border-color: rgba(125, 206, 160, 0.35);
}
.pf-report.is-fail {
  color: #ffaba8;
  border-color: rgba(255, 171, 168, 0.35);
}
.pf-formal-result-panel .pf-fail-list {
  margin: 8px 0 0;
  padding-left: 1.4em;
  font-size: 12px;
  line-height: 1.45;
  color: #ffaba8;
  max-height: 280px;
  overflow: auto;
}
.pf-formal-result-panel .pf-fail-list li {
  margin: 0 0 6px;
  word-break: break-word;
}
#pf-action-msg {
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 160px;
  overflow: auto;
}

.pf-draft-panel {
  border-color: rgba(120, 180, 255, 0.35);
}
.pf-draft-panel .page-verify-report-head strong {
  color: #9ec5ff;
}
.pf-draft-inline {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(120, 180, 255, 0.28);
  background: rgba(80, 120, 180, 0.08);
}
.pf-draft-inline .pf-feature-block {
  margin-top: 6px;
}

.pf-auto-log {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 11px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 480px;
  min-height: 120px;
  overflow: auto;
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #c8d0d8;
}

.pf-auto-log-wrap {
  margin-top: 10px;
}

.pf-auto-log-wrap summary {
  cursor: pointer;
  user-select: none;
  margin-bottom: 4px;
}

.pf-feature-block {
  margin-top: 10px;
}

.pf-feature-block ul {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 12px;
  font-family: var(--mono, ui-monospace, monospace);
}

.pf-probe-group {
  margin: 8px 0 0 6px;
  padding-left: 10px;
  border-left: 2px solid var(--border, #3a3a3a);
}
.selector-item-btns { display: none; }
.selector-item-xpath { font-family: var(--mono); font-size: 11px; color: var(--text); margin-top: 8px; line-height: 1.4; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.selector-item-xpath.is-empty { color: var(--muted); font-style: italic; font-family: var(--font); }
.selector-states-title { font-size: 10px; margin-top: 8px; margin-bottom: 2px; }
.selector-state-rows { list-style: none; margin: 0; padding: 0; }
.selector-state-row { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.selector-state-row:last-child { border-bottom: none; }
.selector-state-row.ok .ss-name { color: var(--aligned); }
.selector-state-row.warn .ss-name { color: var(--conditional); }
.selector-state-row.err .ss-name { color: #ffaba8; }
.selector-state-row.na .ss-name { color: var(--muted); }
.ss-name { flex-shrink: 0; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-detail { color: var(--muted); text-align: right; word-break: break-all; }
.selector-item-status { font-size: 11px; margin-top: 6px; }
.selector-item-status.ok { color: var(--aligned); }
.selector-item-status.warn { color: var(--conditional); }
.selector-item-status.err { color: #ffaba8; }
.test-result { background: var(--bg); border: 1px solid var(--border); padding: 8px 10px; border-radius: 6px; font-size: 12px; min-height: 2em; margin: 0 12px 8px; flex-shrink: 0; }
.test-result.ok { border-color: var(--aligned); color: var(--aligned); }
.test-result.warn { border-color: var(--conditional); color: var(--conditional); }
.test-result.err { border-color: var(--miss); color: #ffaba8; }
.tree-hint { font-size: 11px; margin-left: auto; flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.selector-advanced { font-size: 12px; color: var(--muted); margin: 0 12px 10px; flex-shrink: 0; }
.selector-advanced summary { cursor: pointer; user-select: none; }
.selector-tabs button.active { border-color: #58a6ff; color: #58a6ff; background: var(--sel-bg); }
.field-label { font-size: 11px; color: var(--muted); flex: 1; min-height: 0; display: flex; flex-direction: column; }
.field-label textarea, .field-label input { display: block; width: 100%; margin-top: 4px; }
#edit-selector { display: none; }
.detail-meta { margin: 0; font-size: 11px; display: grid; grid-template-columns: 72px 1fr; gap: 4px 8px; }
.detail-meta dt { color: var(--muted); }
.detail-hits { font-size: 11px; color: var(--muted); }
.diag-banner.collapsed { padding: 4px 14px; }
.diag-banner.collapsed #diag-status,
.diag-banner.collapsed #btn-diag-copy { display: none; }
.btn-diag-toggle { background: transparent; border: none; color: inherit; cursor: pointer; padding: 0 4px; font-size: 12px; }
.dialog-wide { width: min(920px, 95vw); max-height: 90vh; }

#po-add-dialog.po-add-dialog {
  width: min(720px, 96vw);
  max-height: 92vh;
  overflow: auto;
  box-sizing: border-box;
}
#po-add-dialog .po-add-field {
  display: block;
  margin: 10px 0;
  font-size: 12px;
  color: var(--muted);
}
#po-add-dialog .po-add-field input,
#po-add-dialog .po-add-field textarea,
#po-add-dialog .po-add-field select,
#po-edit-dialog .po-add-field input,
#po-edit-dialog .po-add-field textarea,
#po-edit-dialog .po-add-field select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
}
#po-add-dialog .po-add-placement,
#po-edit-dialog .po-add-placement {
  margin: 10px 0 4px;
  padding: 10px 12px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
#po-add-dialog .po-add-placement legend,
#po-edit-dialog .po-add-placement legend {
  padding: 0 6px;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}
#po-add-dialog .po-add-placement-hint,
#po-edit-dialog .po-add-placement-hint {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.4;
}
#po-add-dialog #po-add-context-preview,
#po-edit-dialog #po-edit-context-preview {
  margin: 4px 0 8px;
  font-size: 12px;
}
#po-add-dialog #po-add-context-preview code,
#po-add-dialog .po-add-placement-hint code,
#po-edit-dialog #po-edit-context-preview code,
#po-edit-dialog .po-add-placement-hint code {
  font-family: var(--mono);
  font-size: 11px;
}
#po-edit-dialog.po-edit-dialog {
  width: min(720px, 96vw);
  max-height: 92vh;
  overflow: auto;
  box-sizing: border-box;
}
#po-edit-dialog .po-add-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 8px 0;
}
#po-edit-dialog .po-add-grid .po-add-field { margin: 0; }
#po-edit-dialog .po-edit-readonly {
  opacity: 0.75;
}
#po-add-dialog .po-add-feed {
  margin: 10px 0 4px;
  padding: 10px 12px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
}
#po-add-dialog .po-add-feed.hidden { display: none; }
#po-add-dialog .po-add-feed legend {
  padding: 0 6px;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
}
#po-add-dialog .po-add-feed-hint {
  margin: 4px 0 8px;
  font-size: 11px;
  line-height: 1.4;
}
#po-add-dialog .po-add-feed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 200px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}
#po-add-dialog .po-add-feed-list li {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
#po-add-dialog .po-add-feed-list li:last-child { border-bottom: none; }
#po-add-dialog .po-add-feed-list label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  cursor: pointer;
}
#po-add-dialog .po-add-feed-list label.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#po-add-dialog .po-add-feed-list .rh-invis-badge {
  flex-shrink: 0;
}
#po-add-dialog .po-add-feed-actions {
  margin: 0 0 6px;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: center;
}
.dialog-shot-pick {
  width: min(720px, 96vw);
  max-height: 96vh;
  padding: 12px 14px 14px;
  /* 禁止无条件 display:flex，否则关着的 <dialog> 也会一直画在页面上 */
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
.dialog-shot-pick[open] {
  display: flex;
}
.po-add-row-pick-dialog .po-add-row-pick-head h3 {
  margin: 0 0 4px;
  font-size: 15px;
}
.po-add-row-pick-dialog .po-add-row-pick-head p {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}
.po-add-row-pick-dialog .po-add-row-pick-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text);
}
.po-add-row-pick-dialog .po-add-row-pick-legend .leg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.po-add-row-pick-dialog .po-add-row-pick-legend .leg-cb {
  font-size: 16px;
  line-height: 1;
  font-style: normal;
  font-weight: 700;
}
.po-add-row-pick-dialog .po-add-row-pick-legend .leg-cb.on {
  font-weight: 700;
}
.po-add-row-pick-dialog .po-add-row-pick-legend .leg-dash {
  font-style: normal;
  letter-spacing: -1px;
  color: rgba(230, 162, 60, 0.95);
}
.po-add-row-pick-dialog .po-add-row-box {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid rgba(200, 200, 210, 0.9);
  background: rgba(255, 255, 255, 0.06);
  pointer-events: auto;
  cursor: pointer;
  border-radius: 3px;
}
.po-add-row-pick-dialog .po-add-row-box.exp-partial {
  border-style: dashed;
  border-color: rgba(230, 162, 60, 0.95);
  background: rgba(230, 162, 60, 0.1);
}
.po-add-row-pick-dialog .po-add-row-box.is-selected {
  border-color: rgba(255, 255, 255, 0.95);
  border-width: 3px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.po-add-row-pick-dialog .po-add-row-box.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: rgba(140, 140, 150, 0.7);
  background: rgba(120, 120, 130, 0.1);
}
.po-add-row-pick-dialog .po-add-row-box-chip {
  position: absolute;
  left: 2px;
  top: 2px;
  max-width: calc(100% - 4px);
  padding: 2px 6px 2px 4px;
  font-size: 11px;
  line-height: 1.3;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  pointer-events: none;
}
.po-add-row-pick-dialog .po-add-row-check {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
}
.po-add-row-pick-dialog .po-add-row-check.is-on {
  color: #fff;
}
.po-add-row-pick-dialog .po-add-row-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.po-add-row-pick-dialog .po-add-row-box.is-selected .po-add-row-box-chip {
  background: rgba(0, 0, 0, 0.88);
  font-weight: 600;
}
.po-add-row-pick-dialog .po-add-row-pick-toolbar {
  flex-shrink: 0;
  margin: 0;
}
.po-add-row-pick-dialog .po-add-row-shot-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #1a1a1e;
}
.po-add-row-pick-dialog .po-add-row-canvas {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background:
    linear-gradient(45deg, #2a2a30 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(-45deg, #2a2a30 25%, transparent 25%) 0 0 / 16px 16px,
    #222;
}
.po-add-row-pick-dialog .po-add-row-shot {
  position: absolute;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}
.po-add-row-pick-dialog .po-add-row-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.po-add-row-pick-dialog .po-add-row-shot-empty {
  margin: 24px;
  text-align: center;
  font-size: 12px;
}
.po-add-row-pick-dialog .po-add-row-pick-foot {
  flex-shrink: 0;
  margin: 4px 0 0;
}
#po-add-dialog .po-add-feed-rows-summary {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
}
#po-add-dialog .po-add-page-label {
  font-size: 12px;
  min-width: 4.5em;
  text-align: center;
}
#po-add-dialog .po-add-selector-mono,
#po-add-dialog #po-add-intent {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  resize: vertical;
  min-height: 4.5em;
}
#po-add-dialog .po-add-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  margin: 8px 0;
}
#po-add-dialog .po-add-grid .po-add-field { margin: 0; }
#po-add-dialog .po-add-engine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}
#po-add-dialog .po-add-engine label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
  cursor: pointer;
}
#po-add-dialog .po-add-engine input[type="radio"] {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
}
#po-add-dialog .po-add-engine label:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}
#po-add-dialog .po-add-log {
  display: block;
  width: 100%;
  box-sizing: border-box;
  max-height: 160px;
  overflow: auto;
  margin: 8px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
#po-add-dialog .po-add-preview h4 {
  margin: 14px 0 6px;
  font-size: 13px;
}
@media (max-width: 560px) {
  #po-add-dialog .po-add-grid { grid-template-columns: 1fr; }
}

.setup-field-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.setup-field-inline input[type="checkbox"] {
  width: auto;
  margin: 0;
}
#btn-open-ai-hint-task {
  margin-top: 4px;
}
.tree-mgmt-layout { display: grid; grid-template-columns: 200px 1fr; gap: 12px; min-height: 320px; max-height: 50vh; }
.variant-list { list-style: none; margin: 0; padding: 0; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.variant-list li { padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; font-size: 12px; }
.variant-list li:hover { background: rgba(255,255,255,0.04); }
.variant-list li.active { background: var(--sel-bg); border-left: 2px solid #58a6ff; }
.tree-mgmt-view { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.capture-tree-view { min-height: 180px; max-height: 32vh; margin: 8px 0 12px; }
.tree-mgmt-toolbar { padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 11px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tree-view-dialog { max-height: 40vh; }
.inline-check { font-size: 11px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
.add-tree-form { margin-top: 12px; font-size: 12px; }
.add-tree-form label { display: block; margin: 8px 0; }
.add-tree-form input, .add-tree-form textarea { width: 100%; }
.audit-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; font-size: 13px; }
.audit-filters label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
#tree-add-slug, #tree-add-body, #module-search,
.cs-add-tree input, .cs-add-tree textarea, .cs-add-tree select { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 6px 8px; border-radius: 6px; font-family: var(--mono); font-size: 11px; }
.panel { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; background: var(--panel); }
.po-panel { border-right: none; border-left: 1px solid var(--border); }
.panel h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; color: var(--muted); }
.panel-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.modules-panel h2 { padding: 10px 12px; margin: 0; border-bottom: 1px solid var(--border); }
#module-tree, #po-list { list-style: none; margin: 0; padding: 6px; overflow: auto; flex: 1; }
.left-page-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--border);
}
.left-audit-filters {
  padding-top: 4px;
}
.left-filter-chip {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
}
.left-filter-chip:hover { border-color: rgba(88,166,255,0.45); color: var(--text); }
.left-filter-chip.active {
  border-color: rgba(88,166,255,0.7);
  background: rgba(56,139,253,0.16);
  color: #c9e2ff;
}
.left-audit-chip.active {
  border-color: rgba(248,81,73,0.65);
  background: rgba(248,81,73,0.12);
  color: #ffc1bc;
}
.left-fail-chip.active {
  border-color: rgba(248,81,73,0.65);
  background: rgba(248,81,73,0.12);
  color: #ffc1bc;
}
.attention-cell.attention-match .badge {
  box-shadow: 0 0 0 1px rgba(248,81,73,0.55);
}
#page-attention-summary {
  font-size: 11px;
  padding: 2px 0;
}
.tree-mod { display: flex; gap: 4px; align-items: flex-start; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.tree-mod.active { background: var(--sel-bg); }
.tree-mod.unmapped .mod-id,
.tree-mod.gap-structure .mod-id { color: var(--conditional); }
.tree-mod .mod-id-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.tree-mod .mod-badges { display: inline-flex; gap: 4px; flex-shrink: 0; }
.mod-badge {
  font-size: 10px;
  line-height: 1.2;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.mod-badge.structure {
  color: #d4a72c;
  border-color: rgba(210,153,34,0.45);
  background: rgba(210,153,34,0.12);
}
.mod-badge.feature {
  color: #db6d28;
  border-color: rgba(219,109,40,0.45);
  background: rgba(219,109,40,0.12);
}
.mod-badge.structure-fail,
.mod-badge.feature-fail {
  color: #f85149;
  border-color: rgba(248,81,73,0.55);
  background: rgba(248,81,73,0.12);
}
.tree-mod.gap-structure-fail .mod-id,
.tree-mod.gap-feature-fail .mod-id { color: #f85149; }

.page-structure-fold {
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.02);
}
.page-structure-fold > summary {
  cursor: pointer;
  font-size: 12px;
  user-select: none;
}
.page-structure-fold[open] > summary { margin-bottom: 8px; }
.page-structure-check {
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(56,139,253,0.06);
}
.page-verify-report-panel {
  margin: 8px 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
}
.page-verify-report-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.page-verify-report-body {
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  max-height: 220px;
  overflow: auto;
}
.page-verify-report-body.is-ok { color: #3fb950; }
.page-verify-report-body.is-fail { color: #ff7b72; }
.page-verify-report-body ul { margin: 6px 0 0; padding-left: 18px; }

.pf-auto-dialog {
  width: min(720px, 94vw);
  max-height: 88vh;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg, #1e1e1e);
  color: var(--text);
}
.pf-auto-dialog::backdrop { background: rgba(0,0,0,0.55); }
.pf-auto-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pf-auto-dialog-head h3 { margin: 0; font-size: 16px; }
.pf-auto-dialog-phase {
  margin: 10px 0 4px;
  font-weight: 600;
  font-size: 14px;
}
.pf-auto-dialog-phase.pf-status-fail {
  color: var(--danger, #e06c75);
}
.pf-auto-dialog-phase.pf-status-go {
  color: var(--accent, #6cb6ff);
}
.pf-auto-dialog-next {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text);
}
.pf-auto-dialog-next.pf-auto-next-live {
  font-weight: 600;
  color: var(--accent, #6cb6ff);
}
#pf-auto-dialog-alive.pf-auto-alive-ok {
  color: var(--ok, #7dcea0);
  font-size: 12px;
}
.pf-auto-dialog-log {
  max-height: 160px;
  overflow: auto;
  font-size: 11px;
  white-space: pre-wrap;
  margin: 8px 0 0;
}
.pf-auto-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 14px;
}

.tree-mod .toggle { width: 14px; color: var(--muted); flex-shrink: 0; cursor: pointer; }
.tree-mod .toggle.spacer { visibility: hidden; }
.tree-mod .mod-body { flex: 1; min-width: 0; }
.tree-mod-section { cursor: default; padding-top: 10px; }
.tree-mod-section .mod-body { pointer-events: none; }
.tree-mod-orphan .mod-id { color: var(--conditional); }
#module-list li, #po-list li { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1.35; }
#module-list li:hover, #po-list li:hover { background: rgba(255,255,255,0.04); }
#po-list li.active { background: var(--sel-bg); }
.po-group-hdr { font-size: 11px; text-transform: uppercase; color: var(--muted); cursor: default; padding: 10px 10px 4px !important; }
.po-group-hdr:hover { background: transparent !important; }
.badge.structural { background: rgba(139,148,158,0.2); color: #8b949e; }
.badge.ambiguous { background: rgba(255,123,114,0.2); color: var(--ambiguous); }
.badge.aligned { background: rgba(63,185,80,0.2); color: var(--aligned); }
.badge.miss { background: rgba(248,81,73,0.2); color: var(--miss); }
.badge.unused { background: rgba(72,79,88,0.3); color: var(--unused); }
.badge.verified { background: rgba(110,118,129,0.25); color: var(--text, #e6edf3); }
.badge.unverified { background: rgba(72,79,88,0.35); color: var(--unused, #8b949e); }
.badge.stale { background: rgba(210,153,34,0.22); color: var(--conditional, #d29922); }
.engine-merge-footer.stale { color: var(--conditional, #d29922); font-size: 12px; padding: 4px 0; }
.context-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 12px; border-bottom: 1px solid var(--border); }
.module-binding-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.025);
}
.binding-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.binding-node {
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.binding-current {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.binding-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.binding-actions select {
  max-width: 260px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12px;
}
.ctx-btn { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 3px 8px; border-radius: 6px; cursor: pointer; font-size: 11px; }
.ctx-btn.active { border-color: #58a6ff; color: #58a6ff; }
.tree-tabs button.warn { border-color: var(--ambiguous); color: var(--ambiguous); }
.warn-box { background: rgba(248,81,73,0.15); border: 1px solid var(--miss); padding: 6px 8px; border-radius: 6px; margin-bottom: 8px; font-size: 11px; }
.refs { word-break: break-all; font-size: 11px; }
#variant-dimension { width: 100%; margin-top: 4px; }
.mod-id { font-weight: 600; word-break: break-all; }
.mod-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.selector-tabs button { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 11px; }
.badge { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 4px; margin-right: 4px; }
.badge.aligned { background: rgba(63,185,80,0.2); color: var(--aligned); }
.badge.conditional { background: rgba(210,153,34,0.2); color: var(--conditional); }
.badge.miss { background: rgba(248,81,73,0.2); color: var(--miss); }
.badge.unused { background: rgba(72,79,88,0.3); color: var(--unused); }
.tree-view { overflow: auto; flex: 1; padding: 8px 0; font-family: var(--mono); font-size: 12px; line-height: 1.45; }
.tree-node { padding: 1px 8px 1px 0; white-space: nowrap; cursor: pointer; border-left: 2px solid transparent; }
.tree-node.hit { background: var(--hit-bg); border-left-color: var(--conditional); }
.tree-node.selected { background: var(--sel-bg); }
.tree-node .L { color: var(--muted); min-width: 42px; display: inline-block; }
.tree-node .txt { color: #79c0ff; }
.po-detail { border-top: 1px solid var(--border); padding: 10px 12px; overflow: auto; font-size: 12px; flex: 1; }
.po-detail.hidden { display: none; }
.po-detail h3 { margin: 0 0 8px; font-size: 14px; }
.po-detail dl { margin: 0 0 8px; display: grid; grid-template-columns: 90px 1fr; gap: 4px 8px; }
.po-detail dt { color: var(--muted); }
.po-detail label { display: block; margin: 8px 0; font-size: 11px; color: var(--muted); }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
#test-result, #detail-selector, #publish-diff, #onboard-log { background: var(--bg); border: 1px solid var(--border); padding: 8px; border-radius: 6px; font-size: 11px; white-space: pre-wrap; }
#test-result.test-result { white-space: normal; }
.empty { padding: 24px; color: var(--muted); text-align: center; font-size: 13px; }
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border); padding: 16px; max-width: 90vw; }
dialog label { display: block; margin: 8px 0; }
.hidden { display: none !important; }
.setup-screen { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; }
.setup-card { width: min(560px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.setup-card h1 { margin: 0 0 8px; font-size: 20px; }
.setup-section { margin: 16px 0 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.setup-section:first-of-type { border-top: none; padding-top: 0; }
.setup-section-title { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.setup-login-status { margin: 8px 0; padding: 8px 10px; border-radius: 6px; background: rgba(63,185,80,0.12); border: 1px solid rgba(63,185,80,0.35); color: var(--text); font-size: 12px; }
.setup-advanced { margin: 12px 0; font-size: 12px; color: var(--muted); }
.setup-advanced summary { cursor: pointer; user-select: none; margin-bottom: 8px; }
.setup-checks { list-style: none; margin: 12px 0; padding: 0; }
.setup-checks li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.setup-checks li.ok strong { color: var(--aligned); }
.setup-checks li.bad strong { color: var(--miss); }
.setup-field { display: block; margin: 10px 0; font-size: 12px; color: var(--muted); }
.setup-field input, .setup-field select, .setup-field textarea { display: block; width: 100%; margin-top: 4px; }
.setup-card-wide { max-width: 720px; width: 100%; }
.setup-tabs { display: flex; gap: 8px; margin: 12px 0 4px; }
.setup-tab {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.setup-tab.active { color: var(--text); border-color: var(--accent, #3b82f6); background: rgba(59,130,246,0.08); }
.ai-prof-list { list-style: none; padding: 0; margin: 0; overflow: auto; flex: 1; }
.ai-prof-list li { padding: 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.ai-prof-list li.active { background: rgba(76, 139, 245, 0.08); }
.ai-prof-json { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; width: 100%; }
.ai-process-main.hidden,
.ai-prompt-library.hidden {
  display: none !important;
}
.ai-process-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.ai-prompt-library {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.ai-library-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 10px;
  flex: 1;
  min-height: 0;
  padding: 0 8px 8px;
}
.ai-library-list-panel {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ai-library-detail-panel,
.ai-library-editor-panel {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.ai-library-detail-panel.hidden {
  display: none !important;
}
.ai-library-list-panel.is-dimmed {
  opacity: 0.55;
  pointer-events: none;
}
.ai-prompt-library[data-mode="edit"] .ai-library-list-panel {
  pointer-events: auto;
  opacity: 0.72;
}
.ai-library-filter {
  margin: 0 10px 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font-size: 12px;
}
.ai-library-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.ai-library-detail-titles {
  min-width: 0;
  flex: 1;
}
.ai-library-detail-titles h2 {
  margin: 0;
  font-size: 15px;
  word-break: break-word;
}
.ai-library-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}
.ai-library-empty {
  padding: 32px 16px;
  font-size: 13px;
  line-height: 1.5;
}
.ai-library-view-body {
  flex: 1;
  min-height: 280px;
  margin: 0 12px 8px;
  padding: 12px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
}
.ai-library-view-body.hidden,
.ai-library-empty.hidden {
  display: none !important;
}
.ai-library-list-panel .ai-asset-list {
  max-height: none;
  flex: 1;
}
.ai-library-textarea {
  flex: 1;
  min-height: 280px;
  width: 100%;
}
.ai-editor-head-simple {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
}
.ai-advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 12px;
  margin-bottom: 8px;
}
.ai-block-head-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ai-prof-pick-hint {
  margin: 0 0 6px;
  padding: 0 2px;
  font-size: 11px;
}
.ai-wb-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}
.ai-wb-toolbar-meta { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.ai-wb-layout { flex: 1; min-height: 0; }
.ai-wb-layout.wb-layout-2 {
  display: grid;
  grid-template-columns: minmax(200px, 0.85fr) minmax(0, 2.2fr);
  gap: 12px;
  min-height: 0;
}
.ai-kind-panel,
.ai-prof-panel,
.ai-editor-panel { min-height: 0; overflow: auto; }
.ai-prof-panel[hidden],
.ai-prof-panel.wb-hidden { display: none !important; }
.ai-prof-editor-empty {
  padding: 24px 16px;
  font-size: 13px;
  line-height: 1.5;
}
.ai-editor-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ai-kind-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  flex: 1;
}
.ai-kind-group-head {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.ai-kind-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.ai-kind-item:hover { background: rgba(255, 255, 255, 0.03); }
.ai-kind-item.active {
  background: rgba(76, 139, 245, 0.1);
  box-shadow: inset 3px 0 0 var(--accent, #4c8bf5);
}
.ai-kind-title { font-weight: 600; font-size: 13px; }
.ai-kind-blurb { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.ai-kind-summary { font-size: 10px; margin-top: 4px; word-break: break-all; }
.ai-kind-empty {
  padding: 16px 12px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.ai-prof-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.ai-prof-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
}
.ai-prof-badge.is-local { border-style: dashed; opacity: 0.9; }
.ai-story {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.ai-story-step {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  padding: 0 10px 8px;
}
.ai-story-step > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  font-weight: 600;
  font-size: 13px;
}
.ai-story-step > summary::-webkit-details-marker { display: none; }
.ai-story-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  background: rgba(76, 139, 245, 0.2);
  flex-shrink: 0;
}
.ai-server-limit-note {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
  margin: 0 0 10px;
  padding: 8px 10px;
  border-left: 3px solid var(--warn, #d29922);
  background: rgba(210, 153, 34, 0.08);
}
.ai-accept-phase { margin-bottom: 12px; }
.ai-accept-phase h3 { font-size: 12px; margin: 0 0 6px; }
.ai-record-lifecycle-strip {
  font-size: 12px;
  padding: 8px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  line-height: 1.4;
}
.ai-prof-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ai-filter-opt { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.ai-prof-status { margin: 6px 12px; font-size: 11px; }
.ai-prof-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  appearance: none;
  border: none;
  background: transparent;
  color: inherit;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12px;
}
.ai-prof-pick:hover { background: rgba(255, 255, 255, 0.03); }
.ai-prof-pick-id { font-weight: 600; word-break: break-all; }
.ai-prof-pick-meta { font-size: 11px; margin-top: 2px; }
.ai-prof-editor {
  padding: 0 12px 16px;
  overflow: auto;
  flex: 1;
  min-height: 0;
}
.ai-prof-editor.hidden { display: none !important; }
.ai-editor-empty { padding: 24px 16px; }
.ai-editor-empty.hidden { display: none !important; }
.ai-editor-head {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 8px 12px;
  margin-bottom: 12px;
}
.ai-editor-block {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: rgba(0, 0, 0, 0.12);
}
.ai-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.ai-block-head h3 { margin: 0; font-size: 13px; }
.ai-editor-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 8px 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.ai-ed-panel { margin-top: 4px; }
.ai-ed-panel.hidden { display: none !important; }

.ai-main-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.ai-main-tab { min-width: 72px; }
.ai-main-panel.hidden { display: none !important; }

.ai-record-layout {
  display: grid;
  grid-template-columns: minmax(200px, 280px) 1fr;
  gap: 12px;
  min-height: 280px;
  align-items: start;
}
@media (max-width: 900px) {
  .ai-record-layout { grid-template-columns: 1fr; }
}
.ai-record-list-col,
.ai-record-detail-col {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.12);
  min-height: 200px;
}
.ai-record-task-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 420px;
  overflow: auto;
}
.ai-record-task-item {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  margin-bottom: 4px;
}
.ai-record-task-item:hover {
  background: rgba(255, 255, 255, 0.04);
}
.ai-record-task-item.active {
  border-color: rgba(76, 139, 245, 0.55);
  background: rgba(76, 139, 245, 0.1);
}
.ai-record-task-title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}
.ai-record-task-sub {
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.35;
  word-break: break-word;
}
.ai-record-task-meta,
.ai-record-empty { font-size: 11px; margin-top: 2px; white-space: pre-wrap; }
.ai-record-platform {
  max-width: 11rem;
  font-size: 12px;
  margin-left: auto;
}
.ai-record-task-id-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
  flex-wrap: wrap;
}
.ai-record-task-id-row.hidden { display: none !important; }
.ai-record-task-id-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  word-break: break-all;
  user-select: all;
}
.ai-record-formal { margin-top: 12px; }
.ai-record-formal h4 { margin: 0 0 6px; font-size: 12px; }

.ai-live-process {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.1);
}
.ai-live-process.hidden { display: none !important; }
.ai-live-process > summary {
  cursor: pointer;
  font-size: 12px;
  user-select: none;
}
.ai-task-timeline { margin-top: 8px; }
.ai-task-timeline-live { max-height: 220px; overflow: auto; }
.ai-tl-round { margin-bottom: 10px; }
.ai-tl-round-head {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--muted, #9aa);
}
.ai-tl-list { list-style: none; margin: 0; padding: 0; }
.ai-tl-item {
  border-left: 2px solid var(--border);
  padding: 4px 0 8px 10px;
  margin-left: 4px;
}
.ai-tl-item-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.ai-tl-pill {
  display: inline-block;
  font-size: 10px;
  line-height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.ai-tl-tone-info { border-color: rgba(76, 139, 245, 0.6); color: #7eb6ff; }
.ai-tl-tone-ok { border-color: rgba(63, 185, 80, 0.6); color: #7ee787; }
.ai-tl-tone-warn { border-color: rgba(230, 162, 60, 0.6); color: #e6a23c; }
.ai-tl-tone-err { border-color: rgba(245, 108, 108, 0.6); color: #f56c6c; }
.ai-tl-tone-muted { opacity: 0.85; }
.ai-tl-type { font-size: 11px; }
.ai-tl-seq { font-size: 10px; }
.ai-tl-summary { margin: 4px 0 0; font-size: 11px; white-space: pre-wrap; }
.ai-tl-payload { margin-top: 4px; font-size: 11px; }
.ai-tl-payload pre {
  margin: 4px 0 0;
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-tl-empty { margin: 8px 0; }

.ai-ph-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 8px;
  margin: 4px 0 6px;
}
.ai-ph-toolbar-label {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 24px;
}
.ai-ph-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1 1 200px;
  min-width: 0;
}
.ai-ph-chip {
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  line-height: 20px;
  cursor: pointer;
}
.ai-ph-chip:hover {
  border-color: rgba(76, 139, 245, 0.7);
  background: rgba(76, 139, 245, 0.12);
}
.ai-ph-chip.is-recommended {
  border-color: rgba(76, 139, 245, 0.55);
  background: rgba(76, 139, 245, 0.1);
}
.ai-ph-chip.is-used {
  opacity: 0.72;
}
.ai-ph-more-btn {
  flex: 0 0 auto;
  font-size: 11px !important;
  padding: 2px 8px !important;
}
.ai-ph-status.is-warn {
  color: #e6a23c;
}
.ai-ph-status.is-err {
  color: #f56c6c;
}
.ai-asset-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  max-height: 160px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.ai-asset-item { border-bottom: 1px solid var(--border); }
.ai-asset-item:last-child { border-bottom: none; }
.ai-asset-item.active { background: rgba(76, 139, 245, 0.1); }
.ai-asset-pick {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
}
.ai-asset-pick:hover { background: rgba(255, 255, 255, 0.03); }
.ai-asset-pick-id { font-weight: 600; word-break: break-all; }
.ai-asset-pick-meta { font-size: 11px; }
.ai-prompt-refs { display: flex; flex-direction: column; gap: 8px; }
.ai-ref-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
}
.ai-ref-role { font-size: 12px; min-width: 110px; }
.ai-ref-asset { font-size: 12px; min-width: 160px; flex: 1; }
.ai-ref-rev { font-size: 12px; width: 120px; }
.ai-recipe-toggles { display: flex; flex-direction: column; gap: 8px; }
.ai-recipe-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.ai-recipe-lab { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; }
.ai-recipe-extra { display: flex; gap: 8px; padding-left: 24px; }
.ai-recipe-extra select,
.ai-recipe-extra input { font-size: 12px; max-width: 220px; }
.ai-resolve-preview {
  max-height: 320px;
  overflow: auto;
  font-size: 11px;
  white-space: pre-wrap;
  margin: 0;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.ai-advanced { margin: 8px 0 12px; font-size: 12px; }
.ai-advanced summary { cursor: pointer; color: var(--muted); }
.ai-editor-actions { flex-wrap: wrap; }
@media (max-width: 1100px) {
  .ai-editor-head { grid-template-columns: 1fr 1fr; }
  .wb-layout-2.ai-wb-layout { grid-template-columns: 0.85fr 2.2fr; }
  .wb-layout-3.ai-wb-layout { grid-template-columns: 0.9fr 1fr 1.6fr; }
}
.setup-log-error { color: #f87171; }
.setup-log { margin-top: 12px; min-height: 80px; max-height: 280px; overflow: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 10px; font-family: var(--mono); font-size: 11px; white-space: pre-wrap; word-break: break-word; }
.setup-log.is-error { border-color: var(--miss); background: rgba(248,81,73,0.1); color: #ffaba8; }
.setup-log.is-info { border-color: var(--border); color: var(--text); }
#app-shell { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.device-capture-confirm {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(210,153,34,0.08);
}
.device-capture-confirm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 6px 0;
  font-size: 12px;
}
.cs-sample-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 8px 0; }
.cs-sample-table th, .cs-sample-table td { border-bottom: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: middle; }
.cs-sample-table img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.cs-cs-list { list-style: none; margin: 0; padding: 0; }
.cs-cs-item { padding: 6px 0; border-bottom: 1px solid var(--border); }

/* 命中节点原始信息对比表（PO 详情折叠区） */
.po-hit-node-info-body { margin-top: 4px; }
.hit-node-table-wrap { overflow-x: auto; max-width: 100%; }
.hit-node-table { border-collapse: collapse; font-size: 11px; white-space: nowrap; }
.hit-node-table th,
.hit-node-table td { border: 1px solid var(--border); padding: 4px 6px; text-align: left; vertical-align: top; }
.hit-node-table th { background: var(--bg-elevated, #f5f5f5); font-weight: 600; position: sticky; top: 0; }
.hit-node-table .hit-label { font-weight: 600; white-space: normal; min-width: 64px; max-width: 140px; }
.hit-node-table .hit-bool { text-align: center; font-family: var(--mono, monospace); }
.hit-node-table .hit-bool-true { color: #c0392b; font-weight: 700; background: #fdf2f0; }
.hit-node-table .hit-bool-false { color: var(--muted, #999); }
.hit-node-table .hit-row-error td { color: var(--muted, #999); font-style: italic; }

/* —— Shell：工作台 / 测产环境标签 —— */
.wb-nav {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  flex-shrink: 0;
}
.wb-nav-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.wb-nav-btn:hover { color: var(--text); background: rgba(127, 127, 127, 0.12); }
.wb-nav-btn.active {
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--border);
}
.env-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.env-label select {
  font-size: 12px;
  min-width: 72px;
}
html[data-po-env="prod"] .env-label select {
  border-color: #c0392b;
  color: #c0392b;
  font-weight: 600;
}
.shell-banner {
  margin: 0;
  padding: 8px 14px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(210, 153, 34, 0.12);
  color: var(--text);
  flex-shrink: 0;
}
.shell-banner.hidden { display: none !important; }
.wb-root {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.wb-root.wb-hidden,
.wb-hidden { display: none !important; }
.wb-page-only-hidden { display: none !important; }
.wb-subtabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px 0;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}
.wb-subtab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 12px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.wb-subtab:hover { color: var(--text); }
.wb-subtab.active {
  color: var(--text);
  border-bottom-color: var(--accent, #4c8bf5);
}
.wb-layout-3,
.wb-layout-2 {
  flex: 1;
  display: grid;
  min-height: 0;
  gap: 0;
}
.wb-layout-3 { grid-template-columns: 1fr 1fr 2fr; }
.wb-layout-2 { grid-template-columns: 1fr 2fr; }
.wb-stub-panel {
  min-height: 0;
  overflow: auto;
  border-right: 1px solid var(--border);
}
.wb-layout-3 > .wb-stub-panel:last-child,
.wb-layout-2 > .wb-stub-panel:last-child {
  border-right: none;
}
.wb-stub-muted {
  margin: 0 12px 8px;
  font-size: 11px;
  color: var(--muted);
}
.wb-stub-list {
  list-style: none;
  margin: 0;
  padding: 0 12px 12px;
  font-size: 12px;
}
.wb-stub-list li { padding: 6px 0; border-bottom: 1px solid var(--border); }
.wb-stub-hero {
  padding: 24px 20px;
  max-width: 420px;
}
.wb-stub-hero strong { display: block; font-size: 16px; margin-bottom: 8px; }
.wb-stub-hero p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.wb-stub-hero code { font-size: 11px; }

/* —— Ops workbench —— */
.ops-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}
.ops-filter-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}
.ops-filter-label input {
  width: 110px;
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 8px;
  border-radius: 6px;
}
.ops-filter-label select {
  max-width: 120px;
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 6px;
  border-radius: 6px;
}
.ops-status { font-size: 11px; margin-left: 4px; }
.ops-status-error { color: var(--miss, #f85149); }
.ops-tab-count {
  font-weight: 500;
  opacity: 0.75;
  font-size: 11px;
}
.ops-main { flex: 1; min-height: 0; }
.ops-case-list { max-height: none; overflow: auto; }
.ops-group-head {
  cursor: pointer;
  list-style: none;
  padding: 8px 10px 6px;
  margin: 4px 0 0;
  border-top: 1px solid var(--border);
  background: rgba(127, 127, 127, 0.06);
  font-size: 12px;
  user-select: none;
}
.ops-group-head:first-child { border-top: none; margin-top: 0; }
.ops-group-head:hover { background: rgba(127, 127, 127, 0.12); }
.ops-group-head.collapsed { opacity: 0.9; }
.ops-group-chevron {
  display: inline-block;
  width: 1em;
  color: var(--muted);
  font-size: 11px;
}
.ops-group-stats { font-weight: 400; font-size: 11px; }
.ops-platform-hint {
  list-style: none;
  padding: 6px 10px 4px;
  font-size: 11px;
}
.ops-group-lvl-1 { font-size: 13px; background: rgba(127, 127, 127, 0.1); }
.ops-group-lvl-2 { padding-left: 18px; }
.ops-group-lvl-3 { padding-left: 28px; font-weight: 500; }
.ops-case-item.ops-case-under-po { padding-left: 36px; }
.ops-progress-caption {
  font-size: 12px;
  margin: 4px 0 10px;
  color: var(--text);
}
.ops-story-block {
  margin: 10px 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.04);
}
.ops-story-block h4 {
  margin: 0 0 6px;
  font-size: 13px;
}
.ops-story-src { margin: 0 0 6px; font-size: 11px; }
.ops-story-empty { margin: 0; color: var(--muted); }
.ops-sel-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
}
.ops-sel-list li { margin: 4px 0; word-break: break-all; }
.ops-sel-type {
  color: var(--muted);
  margin-right: 4px;
}
.ops-evidence h4 {
  margin: 0 0 6px;
  font-size: 13px;
}
.ops-case-item {
  cursor: pointer;
  padding: 8px 4px !important;
}
.ops-case-item:hover { background: rgba(127, 127, 127, 0.1); }
.ops-case-item.active {
  background: rgba(56, 139, 253, 0.12);
  border-left: 2px solid #58a6ff;
  padding-left: 6px !important;
}
.ops-case-line { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ops-case-meta { font-size: 11px; margin-top: 2px; }
.ops-tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.ops-detail { padding: 8px 12px 8px; overflow: auto; font-size: 12px; flex: 1; min-height: 0; }
.ops-detail-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.ops-detail-panel .panel-head { flex-wrap: wrap; }
.ops-diagnosis {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(127, 127, 127, 0.06);
}
.ops-diagnosis.ops-diag-blocked {
  border-color: rgba(248, 81, 73, 0.45);
  background: rgba(248, 81, 73, 0.08);
}
.ops-diagnosis.ops-diag-ok {
  border-color: rgba(60, 157, 95, 0.45);
  background: rgba(60, 157, 95, 0.08);
}
.ops-diagnosis.ops-diag-pending {
  border-color: rgba(210, 153, 34, 0.5);
  background: rgba(210, 153, 34, 0.1);
}
.ops-diagnosis h3 { margin: 0 0 4px; font-size: 14px; }
.ops-diagnosis .ops-diag-body { margin: 0 0 4px; color: var(--muted); }
.ops-diagnosis .ops-diag-next { margin: 0; font-weight: 600; }
.ops-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 12px;
  list-style: none;
  padding: 0;
}
.ops-progress li {
  flex: 1 1 70px;
  min-width: 64px;
  text-align: center;
  font-size: 10px;
  padding: 6px 4px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.ops-progress li.ops-step-done {
  border-color: rgba(60, 157, 95, 0.5);
  color: inherit;
  background: rgba(60, 157, 95, 0.1);
}
.ops-progress li.ops-step-current {
  border-color: #58a6ff;
  color: inherit;
  font-weight: 600;
  background: rgba(56, 139, 253, 0.12);
}
.ops-progress li.ops-step-blocked {
  border-color: rgba(248, 81, 73, 0.55);
  color: var(--miss, #f85149);
  font-weight: 600;
  background: rgba(248, 81, 73, 0.1);
}
.ops-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 12px;
  align-items: flex-start;
}
.ops-evidence-shot-wrap { flex: 0 0 auto; max-width: 220px; }
.ops-evidence-shot {
  display: block;
  max-width: 220px;
  max-height: 360px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #111;
}
.ops-evidence-meta { flex: 1 1 160px; font-size: 12px; }
.ops-evidence-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  margin-bottom: 6px;
  background: rgba(127, 127, 127, 0.2);
}
.ops-evidence-badge.ops-ev-accident { background: rgba(56, 139, 253, 0.25); }
.ops-evidence-badge.ops-ev-fallback { background: rgba(210, 153, 34, 0.25); }
.ops-detail-actions {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.ops-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.ops-action-label {
  font-size: 11px;
  color: var(--muted);
  min-width: 56px;
}
.ops-close-hint { font-size: 11px; margin: 4px 0 0; }
.ops-slot-hint {
  margin: 10px 0 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
}
.ops-slot-hint strong { font-size: 12px; }
.ops-slot-hint > .muted { margin: 4px 0 8px; font-size: 11px; }
.ops-dl-inline {
  margin-bottom: 0;
  grid-template-columns: 88px 1fr;
}
.ops-dl {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 4px 10px;
  margin: 0 0 12px;
}
.ops-dl dt { color: var(--muted); }
.ops-dl dd { margin: 0; word-break: break-all; }
.ops-pre {
  max-height: 240px;
  overflow: auto;
  font-size: 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
}
.ops-warn { color: #d29922; font-size: 12px; }
.ops-error { color: var(--miss, #f85149); }
.ops-meta-details { margin-top: 8px; }
.ops-meta-details summary { cursor: pointer; color: var(--muted); font-size: 11px; }

/* Script workbench (filled shell) */
.wb-script-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.wb-script-editor-panel { overflow: hidden; }
.flow-record-canvas-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
#script-panel-flow-record > .panel {
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.flow-record-canvas-panel > .panel-head,
.flow-record-canvas-panel > .flow-record-params-bar,
.flow-record-canvas-panel > .flow-record-layer-crumb,
.flow-record-canvas-panel > .flow-record-dest-audit-bar {
  flex: 0 0 auto;
}
.flow-record-status-chip {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
.flow-record-canvas {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 12px 12px;
  overflow: hidden;
}
.flow-record-diagram {
  flex: 1 1 auto;
  min-height: 0;
  margin-bottom: 0;
  padding: 10px 12px;
  border: 1px solid var(--border, #3a3a3a);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
  overflow: auto;
  box-sizing: border-box;
}
.flow-record-ir-dialog .flow-record-ir-textarea {
  min-height: 360px;
  width: 100%;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}
.flow-input-dialog-body .flow-input-field {
  display: block;
  margin: 8px 0;
}
.flow-input-dialog-body .flow-input-field input[type="text"],
.flow-input-dialog-body .flow-input-field select {
  display: block;
  width: 100%;
  margin-top: 4px;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg, #1e1e1e);
  color: var(--text);
}
.flow-input-mode-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 4px;
  flex-wrap: wrap;
}
.flow-input-mode-tabs button {
  flex: 1 1 auto;
}
.flow-input-mode-tabs button.is-active {
  outline: 1px solid var(--accent, #58a6ff);
}
.flow-record-actions-dialog {
  max-height: 50vh;
  overflow: auto;
}
.flow-record-ir-details {
  margin: 10px 0 8px;
  font-size: 12px;
}
.flow-record-specimen {
  padding: 8px 12px 16px;
  overflow: auto;
  flex: 1;
}
.flow-record-specimen-placeholder {
  margin: 12px auto;
  min-height: 160px;
  width: min(100%, 360px);
  border: 1px dashed var(--border, #555);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #888);
  font-size: 12px;
  background: rgba(0, 0, 0, 0.15);
}
.flow-record-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.flow-record-face-chip {
  font-size: 12px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-record-shot-stage {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 220px;
  padding: 8px;
  border: 1px solid var(--border, #3a3a3a);
  border-radius: 8px;
  background: #12151c;
  overflow: auto;
}
.flow-record-specimen-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 2px;
  flex-wrap: wrap;
}
.flow-record-specimen-switch.wb-hidden { display: none !important; }
.flow-record-specimen-switch #flow-record-specimen-index {
  font-size: 12px;
  min-width: 3.5em;
  text-align: center;
}
.flow-record-shot-wrap {
  margin: 0 auto;
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  vertical-align: top;
}
.flow-record-shot {
  display: block;
  max-width: min(100%, 420px);
  max-height: 56vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  background: #000;
}
.flow-record-shot-overlay {
  pointer-events: none;
}
.flow-record-shot-overlay .screenshot-overlay-box,
.flow-record-shot-overlay .flow-record-hit {
  pointer-events: auto !important;
  cursor: pointer;
  outline: 1px solid rgba(255, 255, 255, 0.35);
}
.flow-record-shot-overlay .screenshot-overlay-box:hover,
.flow-record-shot-overlay .flow-record-hit:hover {
  outline: 2px solid #6b9eff;
  z-index: 20;
}
.flow-record-shot-overlay .screenshot-overlay-box.is-active,
.flow-record-shot-overlay .flow-record-hit.is-active {
  outline: 2px solid #f0c14b;
  box-shadow: inset 0 0 0 999px rgba(240, 193, 75, 0.18);
  z-index: 21;
}
.flow-record-shot-overlay .screenshot-overlay-box.is-playing-hit,
.flow-record-shot-overlay .flow-record-hit.is-playing-hit {
  outline: 3px solid #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35), inset 0 0 0 999px rgba(245, 158, 11, 0.22);
  z-index: 22;
}
.flow-blk.is-playing,
.flow-scan-head.is-playing {
  outline: 2px solid #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}
.flow-blk.is-dest-audit-error,
.flow-shell-col.is-dest-audit-error,
[data-flow-node].is-dest-audit-error {
  outline: 2px solid #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.28);
}
.flow-record-dest-audit-bar {
  margin: 6px 0 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.45);
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.flow-dest-audit-pre {
  white-space: pre-wrap;
  font-size: 12px;
  margin: 6px 0;
  max-height: 120px;
  overflow: auto;
}
.flow-dest-audit-item {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.flow-blk-play {
  margin-left: 4px;
  font-size: 11px;
  padding: 0 6px;
  line-height: 1.4;
  cursor: pointer;
}
.flow-record-po-details {
  margin-top: 10px;
  font-size: 12px;
}
.flow-record-po-details summary {
  cursor: pointer;
  color: var(--muted, #999);
  margin-bottom: 6px;
}
.flow-record-canvas-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.flow-record-po-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 240px;
  overflow: auto;
}
.flow-record-po-item {
  margin: 0;
  border-bottom: 1px solid var(--border, #333);
}
.flow-record-po-item.selected {
  background: rgba(64, 128, 255, 0.12);
}
.flow-record-po-btn {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 6px 4px;
  cursor: pointer;
  font-size: 12px;
}
.flow-record-po-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}
.flow-record-po-id {
  font-family: ui-monospace, monospace;
  opacity: 0.85;
}
.flow-record-node-list {
  margin-bottom: 12px;
}
.flow-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin: 0;
}
.flow-stack > * {
  margin: 0;
}
.flow-stack-loose {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 2px;
  width: 100%;
  box-sizing: border-box;
}
.flow-page-band {
  --flow-page-hue: 210;
  margin: 0;
  padding: 10px 12px;
  border-radius: 0;
  border: none;
  background: hsla(var(--flow-page-hue), 42%, 22%, 0.72);
  width: 100%;
  box-sizing: border-box;
}
.flow-page-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.flow-page-card {
  --flow-page-hue: 210;
  border: 1px solid hsla(var(--flow-page-hue), 40%, 45%, 0.55);
  border-radius: 8px;
  background: hsla(var(--flow-page-hue), 42%, 18%, 0.88);
  overflow: hidden;
}
.flow-page-card.is-active-page,
.flow-page-card.is-write-layer-band {
  box-shadow: 0 0 0 2px hsla(var(--flow-page-hue), 70%, 55%, 0.65);
}
/* 回源卡：青绿区分去路页；↩ 表示 auto_return */
.flow-page-card--return {
  --flow-page-hue: 174;
}
.flow-page-card-head--return {
  letter-spacing: 0.01em;
}
.flow-return-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15em;
  font-weight: 700;
  color: hsla(174, 85%, 72%, 0.95);
  margin-right: 2px;
}
.flow-return-label {
  color: hsla(174, 70%, 78%, 0.98);
  font-weight: 700;
}
.flow-return-hint {
  margin: 8px 12px 10px;
  font-size: 12px;
  opacity: 0.85;
}
.flow-page-card-head {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: hsla(var(--flow-page-hue), 45%, 28%, 0.95);
  color: inherit;
  font: inherit;
  font-weight: 600;
  padding: 8px 12px;
  cursor: pointer;
}
/* 卡片顶栏：标题左、配置+删除右 */
.flow-card-chrome {
  display: flex;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}
.flow-card-chrome > .flow-page-card-head,
.flow-card-chrome > .flow-shell-col-title,
.flow-card-chrome > .flow-if-card-head {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.flow-card-chrome-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
}
.flow-card-chrome-actions > .flow-card-opts,
.flow-card-chrome-actions > .flow-card-del {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  margin: 0;
  border-radius: 0;
  border: none;
  border-left: 1px solid hsla(0, 0%, 100%, 0.18);
  background: hsla(0, 0%, 0%, 0.15);
  opacity: 0.85;
  cursor: pointer;
  color: inherit;
  font-size: 12px;
  padding: 0 8px;
}
.flow-card-chrome-actions > .flow-card-opts:hover {
  opacity: 1;
  background: hsla(210, 60%, 35%, 0.35);
}
.flow-card-chrome-actions > .flow-card-del:hover {
  opacity: 1;
  background: hsla(0, 70%, 35%, 0.35);
  color: #e06c75;
  border-left-color: hsla(0, 70%, 50%, 0.4);
}
.flow-card-chrome > .flow-card-del {
  flex: 0 0 auto;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  margin: 0;
  border-radius: 0;
  border: none;
  border-left: 1px solid hsla(0, 0%, 100%, 0.18);
  background: hsla(0, 0%, 0%, 0.15);
  opacity: 0.85;
}
.flow-card-chrome > .flow-card-del:hover {
  opacity: 1;
  background: hsla(0, 70%, 35%, 0.35);
  color: #e06c75;
  border-left-color: hsla(0, 70%, 50%, 0.4);
}
.flow-page-card-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
}
/* 横排等分：行壳 / 落地 / if 臂 */
.flow-equal-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}
.flow-equal-row > .flow-shell-col,
.flow-equal-row > .flow-land-col,
.flow-equal-row > .flow-chain-branch,
.flow-equal-row > .flow-if-arm-card,
.flow-equal-row > .flow-if-arm-pane,
.flow-equal-row > .flow-card-dash {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
}
.flow-equal-row > .flow-chain-branch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.flow-equal-row > .flow-chain-branch > .flow-page-card,
.flow-equal-row > .flow-chain-branch > .flow-land-col {
  width: 100%;
  box-sizing: border-box;
}
.flow-shell-col-body > .flow-shell-dests {
  margin-top: 8px;
}
.flow-shell-dests > .flow-card-dash {
  flex: 1 1 0;
  min-width: 0;
}
.flow-card-dash-title {
  font-size: 13px;
  word-break: break-all;
}
.flow-card-solid {
  border-style: solid;
}
.flow-card-dash {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border: 1px dashed hsla(0, 0%, 100%, 0.45);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 8px 10px;
  box-sizing: border-box;
  min-height: 3.5rem;
}
.flow-card-dash-head {
  font-weight: 600;
}
.flow-card-dash-hint {
  font-size: 12px;
}
.flow-shell-col.flow-card-dash {
  border-color: hsla(145, 50%, 50%, 0.65);
}
.flow-land-col.flow-card-dash {
  border-color: hsla(25, 70%, 50%, 0.7);
}
.flow-card-dash.is-pending-active {
  border-style: solid;
  border-color: hsla(25, 85%, 55%, 0.95);
  background: hsla(25, 70%, 40%, 0.18);
}
.flow-if-arm-card.flow-card-dash {
  border-color: hsla(260, 40%, 60%, 0.55);
}
/* 扫：页内嵌套实线卡 */
.flow-scan-card {
  margin: 4px 0;
  --flow-page-hue: 200;
}
.flow-scan-card > .flow-page-card-head {
  cursor: pointer;
}
.flow-scan-block {
  /* legacy：旧裸标题布局废弃 */
  display: contents;
}
.flow-scan-frame {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.flow-scan-handlers {
  /* 由 .flow-equal-row 承担 */
  margin-top: 0;
}
.flow-shell-col {
  border: 1px solid hsla(145, 40%, 45%, 0.55);
  border-radius: 6px;
  padding: 0;
  background: hsla(145, 30%, 20%, 0.18);
  overflow: hidden;
  box-sizing: border-box;
}
.flow-shell-col.flow-card-solid {
  border-style: solid;
  background: hsla(145, 30%, 20%, 0.18);
}
/* 须写在 .flow-shell-col 之后，否则 solid 边框会盖掉虚线 */
.flow-shell-col.flow-card-dash {
  border: 1px dashed hsla(145, 50%, 50%, 0.65);
  background: transparent;
}
.flow-shell-col.flow-card-dash > .flow-shell-col-title,
.flow-shell-col.flow-card-dash .flow-shell-dash-title {
  background: transparent;
  border-bottom: 1px dashed hsla(145, 40%, 45%, 0.4);
}
.flow-shell-col.is-write-layer {
  box-shadow: 0 0 0 2px hsla(145, 60%, 45%, 0.55);
}
.flow-shell-tail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
  padding: 6px 8px 8px;
  border-top: 1px dashed hsla(145, 30%, 45%, 0.35);
  box-sizing: border-box;
}
.flow-shell-tail-btn {
  flex: 0 0 auto;
  margin: 0;
  padding: 3px 8px;
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  border-radius: 4px;
  border: 1px solid hsla(145, 40%, 45%, 0.55);
  background: hsla(145, 35%, 22%, 0.85);
  color: inherit;
  cursor: pointer;
}
.flow-shell-tail-btn:hover {
  border-color: hsla(145, 55%, 55%, 0.85);
  background: hsla(145, 40%, 28%, 0.95);
}
/* 禁止把尾钮做成等分行第 3/4 张壳卡 */
.flow-shell-col-body > .flow-shell-tail-actions {
  width: 100%;
}
.flow-shell-tail-actions.flow-land-col,
.flow-shell-tail-btn.flow-land-col,
.flow-shell-tail-actions.flow-shell-col {
  display: flex;
  flex: none;
  width: auto;
  border: 0;
  padding: 6px 8px 8px;
  background: transparent;
  box-shadow: none;
}
.flow-shell-col-title {
  display: block;
  width: 100%;
  text-align: left;
  background: hsla(145, 35%, 22%, 0.95);
  border: 0;
  border-bottom: 1px solid hsla(145, 40%, 40%, 0.35);
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 10px;
}
.flow-shell-col-body {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* 旧跳转按钮区：画布不再用 */
.flow-shell-path,
.flow-shell-path-btn,
.flow-shell-placeholder,
.flow-dest-placeholder,
.flow-dest-placeholders {
  display: none !important;
}
.flow-land-cols {
  margin: 6px 0 0;
}
.flow-land-col.flow-page-card {
  --flow-page-hue: 25;
  padding: 0;
  min-width: 0;
}
.flow-land-col .flow-page-card-body {
  padding: 8px 10px 10px;
}
.flow-land-col-title {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 10px;
}
.flow-if-card {
  border: 1px solid hsla(260, 40%, 45%, 0.55);
  border-radius: 8px;
  background: hsla(260, 28%, 14%, 0.55);
  overflow: hidden;
  box-sizing: border-box;
  margin: 4px 0;
}
.flow-if-card.is-write-layer {
  box-shadow: 0 0 0 2px hsla(260, 55%, 55%, 0.55);
}
.flow-if-card-head {
  display: block;
  width: 100%;
  text-align: left;
  background: hsla(260, 32%, 22%, 0.95);
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 8px 10px;
}
.flow-if-cond {
  padding: 6px 10px 8px;
  border-bottom: 1px solid hsla(260, 30%, 40%, 0.25);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.flow-if-cond-summary {
  font-weight: 600;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
}
.flow-if-cond-edit-btn {
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid hsla(260, 40%, 55%, 0.55);
  background: hsla(260, 35%, 28%, 0.9);
  color: inherit;
}
.flow-if-cond-edit-btn:hover {
  border-color: hsla(260, 50%, 65%, 0.8);
}
.flow-if-test-dialog .flow-if-test-panel {
  margin: 10px 0;
}
.flow-if-test-dialog .flow-if-test-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.flow-if-test-gates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 6px 0 10px;
}
.flow-if-test-gates label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--muted, #9aa);
}
.flow-if-dests {
  padding: 8px 10px 10px;
}
.flow-if-arms {
  margin: 0;
  gap: 0;
}
.flow-if-arms.has-both-arms > .flow-if-arm-pane + .flow-if-arm-pane {
  border-left: 1px dashed hsla(260, 40%, 55%, 0.45);
  padding-left: 8px;
  margin-left: 8px;
}
.flow-if-arm-pane {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0;
}
.flow-if-arm-pane.is-write-layer {
  box-shadow: inset 0 0 0 1px hsla(260, 55%, 55%, 0.55);
  border-radius: 4px;
  padding: 4px 6px;
}
.flow-if-arm-pane.flow-if-arm-dash {
  cursor: pointer;
  min-height: 52px;
  justify-content: center;
  align-items: flex-start;
  border: 1px dashed hsla(260, 40%, 55%, 0.55);
  border-radius: 6px;
  padding: 8px 10px;
  background: transparent;
}
.flow-if-arm-pane.flow-if-arm-dash.is-write-layer {
  border-color: hsla(260, 55%, 60%, 0.85);
  box-shadow: none;
}
.flow-if-arm-label {
  display: block;
  width: auto;
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: hsla(0, 0%, 100%, 0.7);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 2px;
}
.flow-if-arm-dash-hint {
  font-size: 12px;
}
.flow-if-arm-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
}
/* legacy arm-card kept for any stale markup */
.flow-if-arm-card.flow-card-solid {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  box-sizing: border-box;
}
.flow-if-arm-card.is-write-layer {
  box-shadow: none;
}
.flow-if-arm-head {
  display: block;
  width: auto;
  text-align: left;
  background: transparent;
  border: 0;
  color: hsla(0, 0%, 100%, 0.7);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 0 2px;
}
.flow-step-tree {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flow-blk-play {
  display: none !important;
}
.flow-page-band + .flow-page-band {
  box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.08);
}
/* 页卡头可见：主链/落地同属「页」 */
.flow-page-band-label {
  display: block;
}
.flow-page-card .flow-page-band-label,
.flow-page-card-head {
  display: block;
}
.flow-scope-label {
  font-weight: 600;
}
.flow-scope-hint {
  font-size: 12px;
  margin: 0 0 6px;
  opacity: 0.9;
}
.flow-land-col.flow-page-card {
  --flow-page-hue: 25;
  min-width: 0;
  padding: 0;
}
.flow-land-col .flow-page-card-body {
  padding: 8px 10px 10px;
}
.flow-page-band-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
/* 骑缝已废弃：保留类名以免旧 HTML 崩，视觉等同普通段 */
.flow-straddle,
.flow-straddle-v {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}
.flow-straddle-v-bg {
  display: none;
}
.flow-straddle-v-card {
  padding: 0;
  width: 100%;
}
.flow-blk-straddle-card {
  width: 100%;
  max-width: 100%;
  box-shadow: none;
  border: none;
  background: transparent;
}
/* 扫行左轨：深度用边线级数，无套卡 */
.flow-rail {
  border-left: 2px solid hsla(0, 0%, 100%, 0.32);
  margin-left: 4px;
  padding-left: 10px;
  box-sizing: border-box;
}
.flow-rail-d2 {
  border-left-width: 3px;
  border-left-style: double;
  margin-left: 8px;
}
.flow-rail-d3 {
  border-left-width: 4px;
  border-left-style: double;
  margin-left: 12px;
  opacity: 0.98;
}
.flow-scan-head {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2px 0 !important;
  cursor: pointer;
}
.flow-scan-head .flow-blk-title {
  opacity: 0.95;
  font-weight: 600;
}
.flow-scan-head.is-write-layer,
.flow-branch-col.is-write-layer,
.flow-page-layer-tag.is-write-layer {
  outline: 2px solid rgba(88, 166, 255, 0.85);
  outline-offset: 2px;
  border-radius: 4px;
}
.flow-page-band.is-write-layer-band {
  box-shadow: inset 0 0 0 1px rgba(88, 166, 255, 0.45);
}
.flow-layer-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.12);
  border-radius: 4px;
  vertical-align: middle;
}
.flow-page-layer-tag {
  display: inline-block;
  margin: 4px 8px 0;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: inherit;
  background: hsla(var(--flow-page-hue, 210), 40%, 40%, 0.25);
  border: 1px solid hsla(var(--flow-page-hue, 210), 40%, 55%, 0.45);
  border-radius: 4px;
  cursor: pointer;
}
.flow-branch-col-title[data-flow-layer="scan_row"] {
  cursor: pointer;
}
.flow-record-layer-crumb {
  margin: 0 12px 6px;
  padding: 4px 0;
  font-size: 12px;
  line-height: 1.4;
  word-break: break-all;
}
.flow-record-params-bar {
  margin: 0 12px 8px;
  padding: 8px 10px;
  border: 1px solid rgba(127, 127, 127, 0.35);
  border-radius: 8px;
  background: rgba(127, 127, 127, 0.06);
}
.flow-params-bar-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.flow-params-bar-label {
  font-size: 12px;
  font-weight: 600;
}
.flow-params-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.flow-params-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(100, 160, 220, 0.55);
  background: rgba(100, 160, 220, 0.12);
  color: inherit;
  border-radius: 999px;
  padding: 3px 8px 3px 10px;
  font-size: 12px;
  cursor: pointer;
}
.flow-params-chip:hover {
  background: rgba(100, 160, 220, 0.22);
}
.flow-params-chip-name {
  font-family: ui-monospace, Consolas, monospace;
}
.flow-params-chip-meta {
  opacity: 0.75;
  font-size: 11px;
}
.flow-params-chip-del {
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
}
.flow-params-chip-del:hover {
  opacity: 1;
  background: rgba(220, 80, 80, 0.25);
}
.flow-params-empty {
  font-size: 12px;
}
.script-ed-script-params-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.script-ed-script-params-fields .wb-field {
  margin: 0;
}
.script-ed-param-req {
  color: #c44;
  margin-left: 2px;
}
.flow-branch-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.flow-branch-chip {
  cursor: pointer;
  border: 1px solid rgba(255, 159, 107, 0.65);
  background: rgba(255, 159, 107, 0.12);
  color: inherit;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
}
.flow-branch-chip:hover {
  background: rgba(255, 159, 107, 0.28);
}
.flow-if-nest {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  margin-left: 16px;
}
.flow-enter-nest {
  margin-top: 10px;
}
.flow-branch-dialog-page {
  margin: 0 0 8px;
  font-size: 12px;
}
.flow-branch-dialog-body {
  max-height: 55vh;
  overflow: auto;
  padding: 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border, #444);
  margin-bottom: 12px;
}
.flow-conn {
  display: flex;
  justify-content: center;
  height: 10px;
  margin: 0;
  flex-shrink: 0;
}
.flow-conn-line {
  width: 2px;
  height: 100%;
  background: hsla(0, 0%, 100%, 0.22);
}
.flow-if-insert-gap {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 28px;
  height: 22px;
  margin: 4px auto;
  padding: 0;
  border: 1px dashed var(--accent, #58a6ff);
  border-radius: 999px;
  background: rgba(88, 166, 255, 0.12);
  color: var(--accent, #58a6ff);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.flow-if-insert-gap:hover {
  background: rgba(88, 166, 255, 0.28);
}
#btn-flow-record-wrap-if.is-active {
  border-color: #ffb347;
  box-shadow: 0 0 0 1px rgba(255, 179, 71, 0.35);
  color: #ffb347;
}
.flow-step-tree.is-if-wrap-pick .flow-blk-title {
  cursor: default;
}
.flow-if-wrap-gap.is-wrap-start-cand {
  border-color: #ffb347;
  color: #ffb347;
  background: rgba(255, 179, 71, 0.12);
}
.flow-if-wrap-gap.is-wrap-start-gap {
  border-style: solid;
  border-color: #3fb950;
  color: #3fb950;
  background: rgba(63, 185, 80, 0.18);
  box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.25);
}
.flow-if-wrap-gap.is-wrap-end-cand {
  border-color: #ffb347;
  color: #ffb347;
  background: rgba(255, 179, 71, 0.14);
}
.flow-if-wrap-gap.is-wrap-end-cand:hover,
.flow-if-wrap-gap.is-wrap-start-gap:hover {
  background: rgba(63, 185, 80, 0.28);
  border-color: #3fb950;
  color: #3fb950;
}
.flow-step-tree.is-if-wrap-pick .flow-page-card-body,
.flow-step-tree.is-if-wrap-pick .flow-shell-col-body,
.flow-step-tree.is-if-wrap-pick .flow-if-arm-body {
  outline: 1px dashed rgba(255, 179, 71, 0.25);
  outline-offset: 2px;
  border-radius: 6px;
}
.flow-blk.is-if-wrap-range,
.flow-page-card.is-if-wrap-range {
  outline: 2px solid rgba(63, 185, 80, 0.85);
  background: rgba(63, 185, 80, 0.1);
}
.flow-page-band-body > .flow-blk,
.flow-page-band-body > .flow-conn {
  margin: 0;
}
.flow-blk {
  border-radius: 4px;
  padding: 4px 6px;
  border: none;
  background: transparent;
  color: inherit;
  box-shadow: none;
}
.flow-blk-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.flow-blk-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  flex: 1;
  text-align: left;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
}
.flow-blk-head-actions {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
  align-items: flex-start;
}
.flow-blk-opts,
.flow-blk-del {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 1px 6px;
  line-height: 1.4;
  cursor: pointer;
  border: 1px solid var(--border, #666);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  opacity: 0.75;
}
.flow-blk-opts:hover,
.flow-blk-del:hover {
  opacity: 1;
}
.flow-blk-del:hover {
  border-color: #e06c75;
  color: #e06c75;
}
.flow-blk-sub {
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.7;
}
.flow-blk-action {
  /* no kind color bar */
}
.flow-blk-input {
  /* no kind color bar */
}
.flow-blk-nav {
  /* no kind color bar / tint */
}
.flow-blk.is-current-face {
  outline: 1px solid hsla(0, 0%, 100%, 0.35);
  outline-offset: 1px;
}
.flow-blk-frag {
  /* no kind color bar */
}
.flow-blk-if {
  /* no kind tint */
}
.flow-blk-switch {
  /* no kind tint */
}
.flow-blk-loop {
  border: none;
  padding-bottom: 0;
  background: transparent;
}
}
.flow-blk.is-canvas-focus {
  outline: 2px solid rgba(88, 166, 255, 0.85);
  outline-offset: 1px;
}
.flow-canvas-gap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 14px;
  margin: 0;
  cursor: pointer;
  border-radius: 4px;
}
.flow-canvas-gap:hover,
.flow-canvas-gap.is-canvas-focus {
  background: rgba(88, 166, 255, 0.12);
}
.flow-canvas-gap-label {
  display: none;
  font-size: 11px;
  opacity: 0.75;
}
.flow-canvas-gap:hover .flow-canvas-gap-label,
.flow-canvas-gap.is-canvas-focus .flow-canvas-gap-label {
  display: inline;
}
.flow-continue-slot {
  margin-top: 6px;
  margin-bottom: 4px;
  padding: 8px 10px;
  font-size: 12px;
  opacity: 0.75;
  border: 1px dashed rgba(88, 166, 255, 0.35);
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  color: inherit;
}
.flow-continue-slot[data-flow-continue]::before {
  content: "▾ 在此继续";
}
.flow-empty-slot {
  margin-top: 6px;
  padding: 6px 8px;
  font-size: 12px;
  opacity: 0.7;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}
.flow-empty-slot:hover,
.flow-empty-slot.is-canvas-focus {
  border-color: rgba(88, 166, 255, 0.55);
  opacity: 1;
}
.flow-continue-slot:hover,
.flow-continue-slot.is-canvas-focus {
  border-style: solid;
  border-color: rgba(88, 166, 255, 0.75);
  background: rgba(88, 166, 255, 0.1);
  opacity: 1;
}
.flow-scan-cols {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  align-items: flex-start;
}
.flow-scan-col {
  flex: 1 1 140px;
  min-width: 120px;
  max-width: 100%;
  border: 1px solid var(--border, #555);
  border-radius: 6px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}
.flow-scan-col.is-active-handler {
  border-color: rgba(88, 166, 255, 0.85);
  background: rgba(88, 166, 255, 0.08);
}
.flow-scan-col-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  cursor: pointer;
}
.flow-add-branch-btn {
  display: inline-block;
  width: auto;
  margin: 0;
  font-size: 11px;
  padding: 2px 8px;
  line-height: 1.4;
  cursor: pointer;
  border: 1px dashed rgba(255, 159, 107, 0.65);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  opacity: 0.9;
  flex: 0 0 auto;
  white-space: nowrap;
}
.flow-add-branch-btn:hover {
  background: rgba(255, 159, 107, 0.15);
  opacity: 1;
}
/* v3：扫框用实线 .flow-scan-frame（见上文）；旧 head/body 类保留兼容 */
.flow-scan-frame.is-canvas-focus {
  outline: 1px solid hsla(200, 70%, 55%, 0.55);
}
.flow-scan-frame-body > .flow-nest.flow-loop-body {
  margin-left: 0;
  width: 100%;
}
.flow-branch-cols {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  margin-top: 6px;
}
.flow-branch-col {
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 100%;
  border: 1px solid hsla(0, 0%, 100%, 0.22);
  border-radius: 6px;
  padding: 6px 8px;
  background: transparent;
  box-sizing: border-box;
}
.flow-branch-col.is-active-col {
  border-color: rgba(88, 166, 255, 0.85);
  background: rgba(88, 166, 255, 0.06);
}
.flow-branch-col-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  cursor: pointer;
  opacity: 0.9;
}
.flow-blk-loop {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.flow-nest.flow-loop-body,
.flow-enter-nest,
.flow-nest {
  background: transparent;
  border: none;
}
.flow-if-nest {
  display: none; /* replaced by flow-branch-cols */
}
.flow-scan-cols {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0;
  align-items: stretch;
}
.flow-scan-col {
  flex: 1 1 160px;
  min-width: 140px;
  background: transparent;
}
.flow-blk-unwrap {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 1px 6px;
  line-height: 1.4;
  cursor: pointer;
  border: 1px solid var(--border, #666);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  opacity: 0.8;
}
.flow-blk-unwrap:hover {
  border-color: rgba(255, 159, 107, 0.9);
  color: #ff9f6b;
}
.flow-if-arm {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  margin-top: 6px;
}
.flow-if-arm-label {
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  opacity: 0.8;
  margin-bottom: 4px;
  cursor: pointer;
}
.flow-if-arm.is-canvas-focus > .flow-if-arm-label {
  opacity: 1;
  text-decoration: underline;
}
.flow-case-expand {
  margin-top: 8px;
}
.flow-branch-chip.is-active-case {
  background: rgba(255, 159, 107, 0.35);
  border-color: rgba(255, 159, 107, 0.95);
}
.flow-branch-chip-add {
  border-style: solid;
  opacity: 0.85;
}
.flow-scan-handler {
  border: 1px solid rgba(210, 153, 34, 0.55);
  border-radius: 6px;
  padding: 6px 8px;
  margin: 6px 0;
}
.flow-scan-handler.is-active-handler {
  border-color: rgba(88, 166, 255, 0.9);
  background: rgba(88, 166, 255, 0.08);
}
.flow-scan-handler-title {
  font-size: 12px;
  color: #d29922;
  margin-bottom: 4px;
}
/* 嵌套：固定缩进，不再套页带 / 虚线框 */
.flow-loop-body,
.flow-enter-nest,
.flow-nest {
  margin-top: 6px;
  margin-left: 16px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: calc(100% - 16px);
  box-sizing: border-box;
}
.flow-loop-body.is-empty {
  display: none;
}
.flow-blk-loop.is-empty-loop {
  padding-bottom: 8px;
}
.flow-record-ir-details {
  margin: 10px 0 8px;
  font-size: 12px;
}
.flow-record-ir-details summary {
  cursor: pointer;
  color: var(--muted, #999);
  margin-bottom: 6px;
}
.flow-record-ir-details .wb-textarea {
  min-height: 120px;
}
.flow-record-nodes {
  margin: 0;
  padding-left: 1.2em;
  font-size: 12px;
  line-height: 1.45;
}
.flow-record-dest-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.flow-record-dest-list li {
  margin: 4px 0;
}
.flow-record-legend {
  margin: 12px 0 0;
  padding-left: 1.2em;
  font-size: 12px;
  line-height: 1.5;
}
.flow-record-canvas-panel .panel-head {
  flex-wrap: wrap;
  gap: 6px;
}
.wb-field-input {
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 8px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg, #1e1e1e);
  color: var(--text);
  font-size: 12px;
}
.wb-item-list {
  list-style: none;
  margin: 0;
  padding: 0 8px 12px;
  overflow: auto;
  flex: 1;
  min-height: 0;
  font-size: 12px;
}
.wb-item-list li {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.wb-item-list li:hover { background: rgba(127, 127, 127, 0.1); }
.wb-item-list li.active {
  background: rgba(88, 166, 255, 0.15);
  border-left: 3px solid #58a6ff;
  padding-left: 3px;
}
.wb-item-list li .wb-item-title { display: block; font-weight: 600; }
.wb-item-list li .wb-item-meta { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.wb-item-list li strong { display: block; }
.wb-item-list li .wb-item-meta {
  display: block;
  font-size: 11px;
  margin-top: 2px;
  color: var(--muted);
}
/* 空态文案；勿用在角标上（.wb-badge.muted 曾被误写成 display:block 整行按钮感） */
.wb-item-list li.muted,
.wb-item-list > li.muted {
  display: block;
  font-size: 11px;
  margin-top: 2px;
  cursor: default;
}
.wb-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 10px;
  line-height: 1.4;
  vertical-align: middle;
  pointer-events: none; /* 角标非按钮；点击仍由整行 li 选中 */
  user-select: none;
}
.wb-badge.ok { border-color: #3fb950; color: #3fb950; }
.wb-badge.warn { border-color: #d29922; color: #e3b341; }
.wb-badge.draft { border-color: #6e7681; color: #8b949e; }
.wb-badge.muted { border-color: #6e7681; color: #8b949e; }
.wb-disabled { opacity: 0.45; pointer-events: none; }
.wb-cascade-report.warn { border-color: #d29922; color: #e3b341; }
.wb-coverage-bar {
  margin: 0 8px 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.45;
  background: rgba(127, 127, 127, 0.06);
}
.wb-coverage-bar.warn {
  border-color: #d29922;
  color: #e3b341;
}
.wb-coverage-bar.ok { border-color: #3fb950; }
.wb-chip-row { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 8px; }
.wb-chip {
  font-size: 11px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.wb-chip.active { border-color: #58a6ff; color: #58a6ff; }
.wb-badges { font-size: 11px; }
.wb-editor-body { padding: 0 10px 16px; }
.wb-ed-section { margin-bottom: 14px; }
.wb-ed-section h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 600;
}
.wb-hint { font-size: 11px; color: var(--muted); margin: 0 0 8px; line-height: 1.4; }
.wb-check-row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 8px; }
.wb-field { display: block; font-size: 11px; color: var(--muted); flex: 1; min-width: 0; }
.wb-field-row { display: flex; gap: 8px; }
.wb-constraints { margin-top: 4px; }
.script-fork-axis { margin-bottom: 12px; }
.script-fork-axis .wb-field-label {
  display: block;
  font-size: 12px;
  color: var(--text, #e6edf3);
  margin-bottom: 6px;
  font-weight: 600;
}
.script-fork-axis .wb-chip-row { padding: 0 0 8px; }
#script-ed-fork-match { min-height: 72px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.wb-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 220px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg, #1e1e1e);
  color: var(--text);
  resize: vertical;
}
.wb-textarea[readonly] {
  min-height: 140px;
  opacity: 0.85;
  cursor: default;
}
.script-pin-rev:disabled {
  opacity: 0.8;
}
.wb-ed-actions, .wb-ed-actions-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.wb-ed-actions { position: sticky; bottom: 0; padding: 8px 0; background: var(--panel, transparent); }
.script-action-msg {
  flex: 1 1 100%;
  margin: 4px 0 0;
  font-size: 12px;
  white-space: pre-wrap;
}
.script-action-msg.ok-inline { color: var(--ok, #3c9d5f); }
.script-action-msg.warn-inline { color: var(--warn, #e6a23c); }
.script-publish-hint { flex: 1 1 100%; margin: 0; font-size: 11px; }
.wb-pipeline-banner {
  margin: 0 12px 8px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 4px;
  border: 1px solid var(--border, #333);
  background: rgba(127, 127, 127, 0.08);
}
.wb-pipeline-banner.wb-pipeline-warn {
  border-color: #b8860b;
  background: rgba(184, 134, 11, 0.12);
  color: inherit;
}
.wb-empty-error { color: var(--danger, #c44); }
.script-pins-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0;
  max-height: 180px;
  overflow: auto;
}
.script-pin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.script-pin-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  min-width: 140px;
  flex: 1;
  word-break: break-all;
}
.script-pin-rev { max-width: 100px; }
.script-pins-advanced { margin-top: 8px; font-size: 12px; }
.script-pins-advanced summary { cursor: pointer; color: var(--muted); }
.ok-inline { color: var(--ok, #3c9d5f); }
.wb-cascade-report {
  margin: 0;
  padding: 8px;
  max-height: 160px;
  overflow: auto;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 4px;
  white-space: pre-wrap;
}
.wb-badge-pill {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  margin-left: 4px;
  vertical-align: middle;
}
.wb-badge-pill.fallback { border-color: #3fb950; color: #3fb950; }
.wb-badge-pill.missing { border-color: #d29922; color: #e3b341; }

/* —— Sync workbench（组合单元） —— */
.sync-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  flex-shrink: 0;
}
.sync-toolbar-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 12px;
}
.sync-domain-tabs {
  display: flex;
  gap: 4px;
  margin-left: 4px;
}
.sync-domain-tab {
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.sync-domain-tab.active {
  color: var(--fg, inherit);
  border-color: #4c8bf5;
  background: rgba(76, 139, 245, 0.12);
}
.sync-domain-tab:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.sync-first-push-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 8px 12px;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(210, 153, 34, 0.1);
}
.sync-prod-status.sync-prod-warn { color: #d29922; }
.sync-prod-status.sync-prod-ok { color: #3fb950; }
.sync-status { font-size: 11px; margin-left: 4px; }
.sync-status-error { color: var(--miss, #f85149); }
.sync-main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 12px;
}
.sync-tab-group-pick {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  padding: 4px 12px 8px;
}
.sync-tab-group-pick select {
  width: 100%;
  font-size: 12px;
}
.sync-unit-list {
  overflow: auto;
  padding: 8px 10px 14px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sync-module-group-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 6px;
  word-break: break-all;
}
.sync-unit-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 8px;
  cursor: pointer;
  background: transparent;
}
.sync-unit-card:hover { background: rgba(127, 127, 127, 0.06); }
.sync-unit-card.active {
  border-color: #4c8bf5;
  background: rgba(76, 139, 245, 0.1);
}
.sync-unit-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  cursor: pointer;
  font-size: 12px;
}
.sync-unit-kind {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.sync-unit-title { font-weight: 600; flex: 1; min-width: 80px; }
.sync-unit-sub { font-size: 11px; margin: 4px 0 0 22px; word-break: break-all; }
.sync-unit-lines {
  margin: 6px 0 0 22px;
  padding-left: 14px;
  font-size: 11px;
  color: var(--muted);
}
.sync-unit-lines li { margin: 2px 0; }
.sync-raw-rows {
  margin: 0;
  padding-left: 16px;
  font-size: 11px;
}
.sync-tag {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.sync-tag-test_only { border-color: #3fb950; color: #3fb950; }
.sync-tag-prod_only { border-color: #d29922; color: #e3b341; }
.sync-tag-conflict { border-color: #f85149; color: #f85149; }
.sync-tag-same { color: var(--muted); }
.sync-detail { padding: 8px 12px 16px; overflow: auto; font-size: 12px; }
.sync-dl {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 4px 8px;
  margin: 0 0 12px;
}
.sync-dl dt { color: var(--muted); }
.sync-dl dd { margin: 0; word-break: break-all; }
.sync-choice-row {
  display: flex;
  gap: 12px;
  margin: 8px 0 12px;
  font-size: 12px;
}
.sync-choice-hint { margin: 0 0 12px; font-size: 12px; }
.sync-footer {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--panel);
  padding: 10px 12px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: flex-start;
}
.sync-pack-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 12px;
}
.sync-row-json { margin-top: 8px; font-size: 12px; }
.sync-row-json pre {
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 11px;
  max-height: 200px;
  overflow: auto;
}