:root {
  --ink: var(--nexa-legacy-color-1);
  --muted: var(--nexa-legacy-color-2);
  --line: var(--nexa-legacy-color-3);
  --line-strong: var(--nexa-legacy-color-4);
  --paper: var(--nexa-legacy-color-5);
  --panel: var(--nexa-legacy-color-6);
  --primary: var(--nexa-legacy-color-7);
  --primary-dark: var(--nexa-legacy-color-8);
  --violet: var(--nexa-legacy-color-9);
  --cyan: var(--nexa-legacy-color-10);
  --orange: var(--nexa-legacy-color-11);
  --shadow: 0 12px 36px var(--nexa-legacy-color-133);
  --radius: 16px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-size: 16px;
}

button, input, textarea, select { font: inherit; }
button { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { height: 100%; min-height: 0; display: flex; flex-direction: column; }

.topbar {
  height: 68px;
  flex: 0 0 68px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--nexa-legacy-color-134);
  box-shadow: 0 2px 16px var(--nexa-legacy-color-135);
  z-index: 10;
}

.brand-block { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 34px; height: 34px; position: relative; }
.brand-mark span { position: absolute; width: 9px; height: 9px; border-radius: 3px; background: var(--primary); }
.brand-mark span:nth-child(1) { left: 2px; top: 12px; }
.brand-mark span:nth-child(2) { left: 13px; top: 2px; background: var(--violet); }
.brand-mark span:nth-child(3) { right: 1px; top: 14px; background: var(--cyan); }
.brand-mark span:nth-child(4) { left: 13px; bottom: 1px; background: var(--orange); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; left: 9px; right: 7px; top: 16px; height: 1px; background: var(--nexa-legacy-color-12); transform: rotate(-34deg); }
.brand-mark::after { transform: rotate(38deg); }
.brand-name { font-size: 14px; font-weight: 800; letter-spacing: .08em; }
.brand-name b { color: var(--primary); font-weight: 800; }
.brand-sub { margin-top: 1px; color: var(--muted); font-size: 12px; letter-spacing: .15em; }

.map-switcher { justify-self: center; display: flex; align-items: center; gap: 10px; }
.map-kicker { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.map-select {
  border: 1px solid var(--line);
  background: var(--nexa-legacy-color-13);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.map-select:hover { border-color: var(--line-strong); background: var(--nexa-surface); }
.map-select svg { width: 16px; height: 16px; }
.map-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--nexa-legacy-color-136); }
.top-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.save-state { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.save-state span { width: 7px; height: 7px; border-radius: 50%; background: var(--nexa-legacy-color-14); }
.avatar { width: 34px; height: 34px; border-radius: 10px; border: 0; background: var(--ink); color: var(--nexa-surface); font-size: 12px; font-weight: 800; cursor: pointer; }

.icon-button {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  background: var(--nexa-surface);
  cursor: pointer;
}
.icon-button:hover { color: var(--primary); border-color: var(--nexa-legacy-color-15); background: var(--nexa-legacy-color-16); }
.icon-button.compact { width: 32px; height: 32px; border-radius: 8px; }
.icon-button.compact svg { width: 17px; height: 17px; }

.workspace {
  flex: 1;
  min-height: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: minmax(250px, 20%) minmax(0, 1fr);
  gap: 10px;
  transition: grid-template-columns .28s ease;
}

.right-stack {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(390px, 1.75fr) minmax(220px, .75fr);
  gap: 10px;
  transition: grid-template-rows .28s ease;
}

.panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 3px 14px var(--nexa-legacy-color-137);
}

.panel-head {
  min-height: 66px;
  flex: 0 0 66px;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--nexa-surface) 0%, var(--nexa-legacy-color-17) 100%);
}

.panel-head h1, .panel-head h2 { margin: 2px 0 0; font-size: 18px; line-height: 1.15; letter-spacing: -.02em; }
.eyebrow { display: block; color: var(--nexa-legacy-color-18); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.panel-actions, .canvas-tools { display: flex; align-items: center; gap: 7px; }
.panel-body { min-height: 0; flex: 1; }

.collapsed-rail { display: none; border: 0; width: 100%; height: 100%; background: var(--nexa-surface); color: var(--muted); cursor: pointer; }
.collapsed-rail svg { width: 18px; height: 18px; }
.collapsed-rail span { writing-mode: vertical-rl; font-size: 13px; font-weight: 750; letter-spacing: .14em; }
.collapsed-rail.horizontal { align-items: center; justify-content: center; gap: 8px; }
.collapsed-rail.horizontal span { writing-mode: horizontal-tb; }

.workspace.list-collapsed { grid-template-columns: 52px minmax(0, 1fr); }
.workspace.list-collapsed #listPanel > :not(.collapsed-rail) { display: none; }
.workspace.list-collapsed #listPanel .collapsed-rail { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.workspace.detail-collapsed .right-stack { grid-template-rows: minmax(250px, 1fr) 52px; }
.workspace.detail-collapsed #detailPanel > :not(.collapsed-rail) { display: none; }
.workspace.detail-collapsed #detailPanel .collapsed-rail { display: flex; }

.workspace.focus-list { grid-template-columns: 1fr; }
.workspace.focus-list .right-stack { display: none; }
.workspace.focus-canvas, .workspace.focus-detail { grid-template-columns: 1fr; }
.workspace.focus-canvas #listPanel, .workspace.focus-detail #listPanel { display: none; }
.workspace.focus-canvas .right-stack, .workspace.focus-detail .right-stack { grid-template-rows: 1fr; }
.workspace.focus-canvas #detailPanel, .workspace.focus-detail #canvasPanel { display: none; }

.mode-tabs { margin: 14px 14px 0; padding: 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--nexa-legacy-color-19); border-radius: 11px; }
.mode-tab { min-height: 38px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 750; cursor: pointer; }
.mode-tab svg { width: 17px; height: 17px; }
.mode-tab.active { background: var(--nexa-surface); color: var(--ink); box-shadow: 0 2px 7px var(--nexa-legacy-color-138); }

.list-body { overflow: auto; }
.new-node-form { margin: 12px 14px 14px; padding: 13px; border: 1px solid var(--nexa-legacy-color-20); border-radius: 13px; background: linear-gradient(145deg, var(--nexa-legacy-color-21), var(--nexa-legacy-color-22)); }
.new-node-form label, .detail-form label, .relation-dialog label { display: block; }
.new-node-form label > span, .detail-form label > span, .relation-dialog label > span { display: block; margin-bottom: 6px; color: var(--nexa-legacy-color-23); font-size: 12px; font-weight: 750; }
input, textarea, select { width: 100%; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 9px; background: var(--nexa-surface); outline: none; }
input, select { height: 38px; padding: 0 10px; }
textarea { padding: 9px 10px; line-height: 1.45; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--nexa-legacy-color-24); box-shadow: 0 0 0 3px var(--nexa-legacy-color-136); }
.new-node-form textarea { margin-bottom: 9px; }
.form-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.type-label span { margin-bottom: 6px; }

.primary-button, .secondary-button, .text-button { border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 750; cursor: pointer; }
.primary-button { min-height: 38px; padding: 0 13px; border: 1px solid var(--primary); background: var(--primary); color: var(--nexa-surface); box-shadow: 0 5px 12px var(--nexa-legacy-color-139); }
.primary-button:hover { background: var(--primary-dark); }
.primary-button svg, .secondary-button svg, .text-button svg { width: 17px; height: 17px; }
.secondary-button { min-height: 34px; padding: 0 11px; border: 1px solid var(--line); background: var(--nexa-surface); }
.secondary-button:hover { border-color: var(--nexa-legacy-color-15); color: var(--primary); }
.text-button { min-height: 32px; padding: 0 6px; border: 0; color: var(--primary); background: transparent; }
.text-button:hover { color: var(--primary-dark); background: var(--nexa-legacy-color-25); }

.shape-palette { margin: 12px 14px 14px; }
.shape-palette > p { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.shape-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shape-grid button { min-height: 92px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--nexa-surface); display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; align-items: center; text-align: left; cursor: pointer; }
.shape-grid button:hover { border-color: var(--nexa-legacy-color-26); background: var(--nexa-legacy-color-27); transform: translateY(-1px); }
.shape-grid b { font-size: 13px; }
.shape-grid small { color: var(--muted); font-size: 11px; }
.shape { grid-row: 1 / span 2; width: 24px; height: 24px; border: 2px solid currentColor; color: var(--primary); background: var(--nexa-legacy-color-28); }
.function-shape { border-radius: 7px; }
.process-shape { color: var(--violet); background: var(--nexa-legacy-color-29); transform: rotate(45deg); border-radius: 5px; }
.decision-shape { color: var(--orange); background: var(--nexa-legacy-color-30); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.data-shape { color: var(--cyan); background: var(--nexa-legacy-color-31); border-radius: 50%; }

.list-meta { padding: 11px 16px 7px; display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; border-top: 1px solid var(--nexa-legacy-color-32); }
.list-meta b { color: var(--ink); }
.node-list { margin: 0; padding: 0 10px 16px; list-style: none; counter-reset: node; }
.node-list-item { counter-increment: node; margin-top: 6px; min-height: 58px; padding: 8px 8px 8px 10px; border: 1px solid transparent; border-radius: 11px; display: grid; grid-template-columns: 30px minmax(0, 1fr) 24px; align-items: center; gap: 7px; cursor: pointer; transition: .16s ease; }
.node-list-item:hover { background: var(--nexa-legacy-color-33); border-color: var(--nexa-legacy-color-34); }
.node-list-item.selected { background: var(--nexa-legacy-color-35); border-color: var(--nexa-legacy-color-36); box-shadow: inset 3px 0 var(--primary); }
.node-list-item.dragging { opacity: .35; }
.drag-handle { color: var(--nexa-legacy-color-37); cursor: grab; display: grid; place-items: center; }
.drag-handle::before { content: "⠿"; font-size: 21px; line-height: 1; }
.list-copy { min-width: 0; }
.list-copy b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
.list-copy span { display: block; margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 11px; }
.list-index { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: var(--nexa-legacy-color-38); background: var(--nexa-legacy-color-39); font-size: 10px; font-weight: 800; }
.node-list-item.selected .list-index { color: var(--nexa-surface); background: var(--primary); }

.title-line { display: flex; align-items: center; gap: 10px; }
.ai-state { display: inline-flex; align-items: center; gap: 6px; color: var(--nexa-legacy-color-40); font-size: 11px; font-weight: 700; }
.ai-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--nexa-legacy-color-14); box-shadow: 0 0 0 4px var(--nexa-legacy-color-140); }
.ai-state.thinking i { background: var(--violet); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.7); } }
.canvas-tools { flex-wrap: wrap; justify-content: flex-end; }
.ai-button { color: var(--primary); background: var(--nexa-legacy-color-22); border-color: var(--nexa-legacy-color-41); }
.canvas-body { display: flex; flex-direction: column; background: var(--nexa-legacy-color-42); }
.canvas-meta { min-height: 34px; padding: 6px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); background: var(--nexa-surface); }
.legend { display: flex; align-items: center; gap: 13px; color: var(--muted); font-size: 11px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-swatch { width: 7px; height: 7px; border-radius: 2px; background: var(--primary); }
.legend-swatch.process { background: var(--violet); }
.legend-swatch.decision { background: var(--orange); }
.legend-swatch.data { background: var(--cyan); }
.arrange-hint { color: var(--nexa-legacy-color-43); font-size: 11px; }

.graph-viewport {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: none;
  cursor: grab;
  user-select: none;
  background-color: var(--nexa-legacy-color-42);
  background-image: radial-gradient(var(--nexa-legacy-color-44) 1px, transparent 1px);
  background-size: 20px 20px;
}
.graph-viewport.is-panning { cursor: grabbing; }
.canvas-stage { position: relative; z-index: 1; min-width: 100%; min-height: 100%; }
.canvas-scene { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; isolation: isolate; }
.card-flow { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.connectors { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.connector-line { stroke: var(--nexa-legacy-color-45); stroke-width: 1.8; fill: none; marker-end: url(#arrowhead); }
.connector-glow { stroke: var(--nexa-legacy-color-141); stroke-width: 7; fill: none; }

.graph-card { position: absolute; z-index: 3; width: 248px; padding: 13px 13px 11px; border: 1px solid var(--nexa-legacy-color-46); border-top: 2px solid var(--node-color); border-radius: 11px; background: var(--nexa-legacy-color-142); box-shadow: 0 8px 24px var(--nexa-legacy-color-143); cursor: grab; touch-action: none; pointer-events: auto; transition: box-shadow .16s ease, border-color .16s ease; }
.graph-card:hover { box-shadow: 0 14px 32px var(--nexa-legacy-color-144); }
.graph-card.selected { border-color: var(--node-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--node-color) 13%, transparent), var(--shadow); }
.graph-card.dragging { opacity: .38; }
.graph-card.is-moving { z-index: 8; cursor: grabbing; box-shadow: 0 20px 46px var(--nexa-legacy-color-145); }
body.dragging-node, body.dragging-node * { cursor: grabbing !important; }
.graph-card[data-type="function"] { --node-color: var(--primary); }
.graph-card[data-type="process"] { --node-color: var(--violet); }
.graph-card[data-type="decision"] { --node-color: var(--orange); }
.graph-card[data-type="data"] { --node-color: var(--cyan); }
.graph-card::before, .graph-card::after { content: ""; position: absolute; top: calc(50% - 4px); width: 8px; height: 8px; border: 2px solid var(--nexa-surface); border-radius: 50%; background: var(--nexa-legacy-color-45); box-shadow: 0 0 0 1px var(--nexa-legacy-color-45); }
.graph-card::before { left: -6px; }
.graph-card::after { right: -6px; }
.card-topline { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-mini-actions { display: flex; align-items: center; gap: 5px; }
.card-edit-button { width: 25px; height: 25px; padding: 0; border: 1px solid var(--nexa-legacy-color-47); border-radius: 7px; display: grid; place-items: center; color: var(--nexa-legacy-color-48); background: var(--nexa-surface); cursor: pointer; }
.card-edit-button:hover { color: var(--primary); border-color: var(--nexa-legacy-color-49); background: var(--nexa-legacy-color-50); }
.card-edit-button svg { width: 13px; height: 13px; }
.card-type { color: var(--node-color); font-size: 10px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.card-number { color: var(--nexa-legacy-color-51); font-size: 10px; font-weight: 800; }
.graph-card h3 { margin: 10px 0 5px; font-size: 15px; line-height: 1.3; }
.graph-card > p { height: 34px; margin: 0 0 11px; display: -webkit-box; overflow: hidden; color: var(--muted); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.flow-toggle { width: 100%; min-height: 31px; padding: 0 7px 0 9px; border: 1px solid var(--nexa-legacy-color-47); border-radius: 8px; background: var(--nexa-legacy-color-52); display: flex; align-items: center; justify-content: space-between; color: var(--nexa-legacy-color-53); font-size: 11px; font-weight: 700; cursor: pointer; }
.flow-toggle:hover { background: var(--nexa-legacy-color-35); color: var(--primary); border-color: var(--nexa-legacy-color-54); }
.flow-toggle svg { width: 15px; height: 15px; transition: transform .18s ease; }
.graph-card.expanded .flow-toggle svg { transform: rotate(180deg); }
.card-subflow { margin: 9px 0 1px; padding: 9px; border-radius: 8px; background: var(--nexa-legacy-color-55); }
.card-subflow span { position: relative; display: block; padding-left: 14px; color: var(--nexa-legacy-color-56); font-size: 11px; line-height: 1.35; }
.card-subflow span + span { margin-top: 8px; }
.card-subflow span::before { content: ""; position: absolute; left: 1px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--node-color); }
.card-subflow span:not(:last-child)::after { content: ""; position: absolute; left: 3.5px; top: 11px; width: 1px; height: 12px; background: var(--nexa-legacy-color-57); }
.empty-state { position: absolute; z-index: 4; inset: 0; display: grid; place-content: center; text-align: center; color: var(--muted); pointer-events: none; }
.empty-state span { margin: auto; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--primary); background: var(--nexa-legacy-color-28); font-size: 24px; }
.empty-state b { margin-top: 12px; color: var(--ink); }
.empty-state p { margin: 4px 0 0; font-size: 13px; }

.zoom-controls { position: sticky; z-index: 12; left: 100%; bottom: 14px; width: max-content; height: 40px; margin-right: 14px; transform: translate(-14px, -14px); border: 1px solid var(--nexa-legacy-color-58); border-radius: 11px; display: flex; align-items: center; padding: 3px; color: var(--nexa-legacy-color-59); background: var(--nexa-legacy-color-146); box-shadow: 0 9px 24px var(--nexa-legacy-color-147); backdrop-filter: blur(10px); }
.zoom-controls button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; display: grid; place-items: center; color: inherit; background: transparent; cursor: pointer; }
.zoom-controls button:hover { color: var(--primary); background: var(--nexa-legacy-color-60); }
.zoom-controls button:disabled { opacity: .38; cursor: not-allowed; }
.zoom-controls button svg { width: 16px; height: 16px; }
.zoom-controls .zoom-value { width: 54px; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.zoom-divider { width: 1px; height: 21px; margin: 0 3px; background: var(--nexa-legacy-color-61); }

.selected-code { color: var(--primary); background: var(--nexa-legacy-color-28); border-radius: 7px; padding: 4px 7px; font-size: 10px; font-weight: 850; letter-spacing: .06em; }
.detail-body { padding: 13px 15px 15px; overflow: auto; display: grid; grid-template-columns: minmax(320px, .95fr) minmax(360px, 1.05fr); gap: 14px; background: var(--nexa-legacy-color-21); }
.node-inspector, .relation-inspector { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--nexa-surface); }
.inspector-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.inspector-heading > span { color: var(--nexa-legacy-color-62); font-size: 11px; }
.node-type-badge { padding: 5px 8px; border-radius: 7px; color: var(--primary); background: var(--nexa-legacy-color-28); font-size: 11px; font-weight: 800; }
.node-type-badge.process { color: var(--violet); background: var(--nexa-legacy-color-63); }
.node-type-badge.decision { color: var(--orange); background: var(--nexa-legacy-color-64); }
.node-type-badge.data { color: var(--cyan); background: var(--nexa-legacy-color-65); }
.detail-form { display: grid; grid-template-columns: minmax(130px, .62fr) 1.38fr; gap: 9px; }
.detail-form input, .detail-form textarea { font-size: 13px; }
.block-title { margin-bottom: 9px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.block-title > span, .relation-title > div > span { font-size: 12px; font-weight: 800; }
.block-title small, .relation-title > div > small { color: var(--nexa-legacy-color-66); font-size: 10px; }
.relation-title > div { display: flex; flex-direction: column; gap: 2px; }
.subflow-block { margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--nexa-legacy-color-67); }
.subflow { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding-bottom: 3px; }
.subflow-step { flex: 0 0 auto; min-height: 32px; padding: 0 9px; border: 1px solid var(--nexa-legacy-color-68); border-radius: 8px; display: inline-flex; align-items: center; color: var(--nexa-legacy-color-69); background: var(--nexa-legacy-color-70); font-size: 11px; font-weight: 700; }
.subflow-arrow { flex: 0 0 auto; color: var(--nexa-legacy-color-71); }
.subflow-arrow svg { width: 14px; height: 14px; }

.relation-stage { position: relative; min-height: 122px; padding: 8px 5px; display: grid; grid-template-columns: minmax(135px, .8fr) 50px minmax(150px, 1fr); align-items: center; gap: 3px; border-radius: 10px; background-color: var(--nexa-legacy-color-42); background-image: radial-gradient(var(--nexa-legacy-color-72) 1px, transparent 1px); background-size: 16px 16px; }
.relation-current, .relation-target { min-width: 0; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 10px; padding: 10px; background: var(--nexa-surface); box-shadow: 0 5px 15px var(--nexa-legacy-color-148); }
.relation-targets { min-width: 0; max-height: 110px; padding: 2px; overflow: auto; display: grid; gap: 6px; }
.relation-targets .relation-target { width: 100%; text-align: left; }
.relation-target { border-left-color: var(--violet); cursor: pointer; }
.relation-target:hover { border-color: var(--nexa-legacy-color-73); border-left-color: var(--violet); }
.relation-current small, .relation-target small { display: block; color: var(--nexa-legacy-color-74); font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.relation-current b, .relation-target b { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.relation-target span { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.relation-link { position: relative; color: var(--primary); display: grid; place-items: center; }
.relation-link::before { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 1px; background: var(--nexa-legacy-color-75); }
.relation-link span { position: relative; z-index: 1; padding: 2px 5px; border: 1px solid var(--nexa-legacy-color-76); border-radius: 6px; color: var(--nexa-legacy-color-2); background: var(--nexa-surface); font-size: 9px; font-weight: 800; }
.relation-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 12px; }

.relation-dialog { width: min(470px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); box-shadow: 0 22px 70px var(--nexa-legacy-color-149); }
.relation-dialog::backdrop { background: var(--nexa-legacy-color-150); backdrop-filter: blur(3px); }
.relation-dialog form { padding: 18px; }
.dialog-head { margin-bottom: 17px; display: flex; align-items: start; justify-content: space-between; }
.dialog-head h3 { margin: 3px 0 0; font-size: 20px; }
.relation-dialog label + label { margin-top: 12px; }
.field-hint { display: block; margin-top: 5px; color: var(--nexa-legacy-color-66); font-size: 11px; }
.dialog-actions { margin-top: 19px; display: flex; justify-content: flex-end; gap: 8px; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: 22px; transform: translate(-50%, 20px); padding: 10px 14px; border-radius: 10px; color: var(--nexa-surface); background: var(--nexa-legacy-color-77); box-shadow: 0 12px 30px var(--nexa-legacy-color-151); font-size: 13px; opacity: 0; pointer-events: none; transition: .22s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1120px) {
  .workspace { grid-template-columns: minmax(245px, 26%) minmax(0, 1fr); }
  .detail-body { grid-template-columns: 1fr; }
  .canvas-head { min-height: 76px; flex-basis: 76px; }
  .ai-button { padding: 0 8px; }
  .arrange-hint { display: none; }
}

@media (max-width: 820px) {
  body { overflow: auto; }
  .app-shell { min-height: 100vh; height: auto; }
  .topbar { position: sticky; top: 0; grid-template-columns: 1fr auto; height: 62px; padding: 0 12px; }
  .map-switcher { display: none; }
  .save-state { display: none; }
  .workspace, .workspace.list-collapsed, .workspace.focus-list, .workspace.focus-canvas, .workspace.focus-detail { min-height: calc(100vh - 62px); display: flex; flex-direction: column; padding: 8px; }
  .workspace.focus-list .right-stack, .workspace.focus-canvas #listPanel, .workspace.focus-detail #listPanel, .workspace.focus-canvas #detailPanel, .workspace.focus-detail #canvasPanel { display: flex; }
  .right-stack, .workspace.detail-collapsed .right-stack, .workspace.focus-canvas .right-stack, .workspace.focus-detail .right-stack { display: flex; flex-direction: column; gap: 8px; }
  .panel { min-height: 420px; }
  .list-panel { min-height: 520px; }
  .workspace.list-collapsed #listPanel, .workspace.detail-collapsed #detailPanel { min-height: 52px; max-height: 52px; }
  .collapsed-rail span { writing-mode: horizontal-tb; }
  .detail-form { grid-template-columns: 1fr; }
  .detail-body { max-height: none; }
  .canvas-tools [data-focus], .panel-actions [data-focus] { display: none; }
  .legend { gap: 8px; }
  .graph-viewport { min-height: 330px; }
}

@media (max-width: 520px) {
  .brand-sub { display: none; }
  .brand-name { font-size: 12px; }
  .top-actions .icon-button { display: none; }
  .panel-head { padding-inline: 12px; }
  .panel-head h1, .panel-head h2 { font-size: 16px; }
  .ai-state { display: none; }
  .ai-button { width: 34px; padding: 0; }
  .ai-button svg { margin: 0; }
  .ai-button { font-size: 0; }
  .canvas-meta { overflow-x: auto; }
  .canvas-meta .legend { min-width: 260px; }
  .form-row { grid-template-columns: 1fr; }
  .primary-button { width: 100%; }
  .shape-grid { grid-template-columns: 1fr; }
  .relation-stage { grid-template-columns: 1fr; gap: 8px; }
  .relation-link { min-height: 24px; }
  .relation-link::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
}

/* Memo V1: type controls geometry, relations control order, views control position. */
.canvas-body { position: relative; }
.canvas-tools { gap: 6px; }
.view-tabs { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--nexa-legacy-color-78); }
.view-tabs button { min-height: 30px; border: 0; border-radius: 6px; padding: 0 10px; background: transparent; color: var(--muted); font-size: 14px; cursor: pointer; }
.view-tabs button.active { color: var(--primary); background: var(--nexa-surface); box-shadow: 0 1px 4px var(--nexa-legacy-color-79); }
.flow-breadcrumb { display: flex; align-items: center; gap: 6px; overflow: auto; white-space: nowrap; min-width: 0; }
.flow-breadcrumb button { flex: 0 0 auto; max-width: 220px; overflow: hidden; text-overflow: ellipsis; border: 0; background: none; color: var(--nexa-legacy-color-80); cursor: pointer; font-size: 14px; padding: 6px; }
.flow-breadcrumb button[aria-current] { color: var(--primary); font-weight: 750; }
.crumb-divider { color: var(--nexa-legacy-color-81); }
.semantic-help { flex: 0 0 auto; font-size: 13px; }
.interaction-hint { margin: 0; padding: 6px 16px; color: var(--nexa-legacy-color-82); background: var(--nexa-legacy-color-42); font-size: 12px; }
.graph-viewport.is-connecting { cursor: crosshair; }
.add-relation-field { margin-bottom: 12px; }
.new-node-form label > span, .detail-form label > span, .relation-dialog label > span { font-size: 14px; }
.mode-tab, .primary-button, .secondary-button { font-size: 14px; }
.new-node-form { padding: 11px; margin-inline: 10px; }
.new-node-form .form-row { grid-template-columns: 1fr; }
.new-node-form .primary-button { width: 100%; }
.node-list-item { margin-left: calc(var(--depth, 0) * 9px); grid-template-columns: 16px minmax(0, 1fr) auto; padding-left: 5px; gap: 5px; }
.list-index { min-width: 30px; width: auto; padding: 3px 5px; font-size: 12px; }
.list-copy b { font-size: 14px; }
.list-copy span { font-size: 12px; }
.outline-notice { margin: 6px 12px; padding: 8px; border-radius: 8px; background: var(--nexa-legacy-color-83); color: var(--nexa-legacy-color-84); font-size: 12px; }
.shape-grid { grid-template-columns: 1fr; }
.shape-grid button { min-height: 58px; }
.shape-grid b { font-size: 14px; }
.shape-grid small { font-size: 12px; }
.function-shape { clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); border-radius: 0; background: var(--nexa-legacy-color-9); }
.process-shape { transform: none; clip-path: none; border-radius: 6px; color: var(--primary); background: var(--nexa-legacy-color-28); }
.group-shape { border-radius: 3px; border-style: double; color: var(--nexa-legacy-color-85); background: var(--nexa-legacy-color-86); }

.graph-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; filter: drop-shadow(0 5px 8px var(--nexa-legacy-color-87)); }
.graph-card:hover, .graph-card.selected, .graph-card.is-moving { box-shadow: none; }
.graph-card::before, .graph-card::after { content: none; }
.graph-card[data-type="process"] { --node-color: var(--nexa-legacy-color-7); }
.graph-card[data-type="function"] { --node-color: var(--nexa-legacy-color-9); }
.graph-card[data-type="group"] { --node-color: var(--nexa-legacy-color-88); }
.node-type-badge.process { color: var(--nexa-legacy-color-7); background: var(--nexa-legacy-color-28); }
.node-type-badge.function { color: var(--nexa-legacy-color-9); background: var(--nexa-legacy-color-63); }
.node-type-badge.group { color: var(--nexa-legacy-color-88); background: var(--nexa-legacy-color-86); }
.graph-card.selected { z-index: 5; }
.graph-card.is-moving { z-index: 8; filter: drop-shadow(0 12px 12px var(--nexa-legacy-color-89)); }
.graph-card:focus-visible { outline: none; }
.node-outline { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--nexa-surface); stroke: var(--node-color); stroke-width: 1.5; pointer-events: none; }
.graph-card.selected .node-outline, .graph-card:focus-visible .node-outline { stroke-width: 3.5; fill: var(--nexa-legacy-color-17); }
.graph-card[data-shape="container"] .node-outline { stroke-width: 3; }
.card-content { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 6px; width: calc(100% - 30px); height: 158px; }
.graph-card[data-shape="circle"] .card-content { width: 194px; height: 170px; }
.graph-card[data-shape="diamond"] .card-content { width: 180px; height: 164px; }
.graph-card[data-shape="hexagon"] .card-content { width: 238px; height: 170px; }
.graph-card[data-shape="container"] .card-content { width: 262px; height: 178px; }
.card-content h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; font-size: 15px; line-height: 1.35; min-height: 20px; }
.card-content p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; max-height: 36px; }
.card-content .flow-toggle { margin-top: auto; flex: 0 0 30px; font-size: 12px; }
.card-type { font-size: 12px; letter-spacing: 0; white-space: nowrap; }
.card-number { font-size: 12px; }
.card-edit-button { width: 27px; height: 27px; flex: 0 0 27px; }
.connection-handle { position: absolute; z-index: 10; width: 18px; height: 18px; border: 2px solid var(--node-color); background: var(--nexa-surface); border-radius: 50%; padding: 0; opacity: 0; pointer-events: none; cursor: crosshair; touch-action: none; box-shadow: 0 0 0 4px var(--nexa-legacy-color-90); }
.handle-top { top: 0; left: 50%; transform: translate(-50%, -50%); }
.handle-right { top: 50%; right: 0; transform: translate(50%, -50%); }
.handle-bottom { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.handle-left { top: 50%; left: 0; transform: translate(-50%, -50%); }
.graph-card.selected .connection-handle, .graph-card:hover .connection-handle, .graph-card:focus-within .connection-handle, .is-connecting .connection-handle { opacity: 1; pointer-events: auto; }
.connection-handle:hover, .connection-handle:focus-visible { background: var(--node-color); outline: 3px solid var(--nexa-legacy-color-91); }
.connectors { pointer-events: none; }
.graph-edge { outline: none; }
.edge-hit { stroke: transparent; stroke-width: 20; fill: none; pointer-events: stroke; cursor: pointer; }
.edge-line { stroke: var(--nexa-legacy-color-92); stroke-width: 2; fill: none; pointer-events: none; }
.graph-edge[data-edge-type="reference"] .edge-line { stroke-dasharray: 7 5; }
.graph-edge[data-edge-type="hierarchy"] .edge-line { stroke: var(--nexa-legacy-color-93); }
.graph-edge.selected .edge-line, .graph-edge:focus-visible .edge-line { stroke: var(--nexa-legacy-color-7); stroke-width: 3.5; }
.edge-label { pointer-events: all; cursor: pointer; }
.edge-label rect { fill: var(--nexa-surface); stroke: var(--nexa-legacy-color-3); stroke-width: 1; }
.edge-label text { fill: var(--nexa-legacy-color-94); stroke: none; font: 13px ui-sans-serif, system-ui, sans-serif; }
.graph-edge.selected .edge-label rect { stroke: var(--nexa-legacy-color-7); }
.connection-preview { fill: none; stroke: var(--nexa-legacy-color-7); stroke-width: 2.5; stroke-dasharray: 6 4; pointer-events: none; }
.edge-toolbar { position: absolute; z-index: 20; left: 14px; bottom: 14px; max-width: calc(100% - 220px); padding: 8px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--nexa-legacy-color-95); border-radius: 10px; box-shadow: 0 8px 25px var(--nexa-legacy-color-96); background: var(--nexa-surface); }
.edge-toolbar span { font-size: 13px; color: var(--nexa-legacy-color-97); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 40px; }
.edge-toolbar button { min-height: 32px; padding: 4px 9px; border: 0; border-radius: 6px; background: var(--nexa-legacy-color-98); color: var(--nexa-legacy-color-7); cursor: pointer; font-size: 14px; white-space: nowrap; }
.edge-toolbar #deleteEdgeButton { color: var(--nexa-legacy-color-99); background: var(--nexa-legacy-color-100); }
.form-error { min-height: 20px; color: var(--nexa-legacy-color-99); font-size: 14px; }
.internal-flow-link { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin: 16px 0; flex-wrap: wrap; font-size: 14px; }
.field-hint { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.subflow-step { cursor: pointer; font-size: 13px; }
.semantic-dialog { width: min(570px, calc(100vw - 32px)); max-height: calc(100vh - 40px); }
.semantic-dialog-body { padding: 20px; }
.semantic-dialog p { font-size: 14px; line-height: 1.65; color: var(--muted); }
.semantic-dialog table { border-collapse: collapse; width: 100%; margin: 14px 0; font-size: 14px; }
.semantic-dialog th, .semantic-dialog td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); }
.semantic-dialog th { background: var(--nexa-legacy-color-101); }
.relation-dialog { max-height: calc(100vh - 32px); }
.relation-target { cursor: default; }
.save-state { font-size: 12px; white-space: nowrap; }
@media (max-width: 1120px) {
  .canvas-head { align-items: start; flex-wrap: wrap; min-height: 112px; flex-basis: auto; }
  .canvas-tools { justify-content: flex-start; }
  .semantic-help { font-size: 12px; }
  .edge-toolbar { max-width: calc(100% - 28px); bottom: 68px; }
}
@media (max-width: 820px) {
  .new-node-form .form-row { grid-template-columns: minmax(0, 1fr) auto; }
  .node-list-item { min-height: 52px; }
  .canvas-panel { min-height: 620px; }
  .semantic-help { padding-inline: 4px; }
  .shape-grid { grid-template-columns: 1fr 1fr; }
}

/* Sprint 01: persistent world coordinates with a bounded camera viewport. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.workspace { --explorer-width:230px; --inspector-width:300px; grid-template-columns:var(--explorer-width) minmax(0,1fr) var(--inspector-width); transition:none; }
.right-stack { display:contents; }
.workspace.list-collapsed { --explorer-width:48px; grid-template-columns:var(--explorer-width) minmax(0,1fr) var(--inspector-width); }
.workspace.detail-collapsed { --inspector-width:48px; }
.workspace.detail-collapsed .right-stack { display:contents; }
.workspace.focus-list, .workspace.focus-canvas, .workspace.focus-detail { grid-template-columns:1fr; }
.workspace.focus-list .right-stack { display:none; }
.workspace.focus-canvas .right-stack, .workspace.focus-detail .right-stack { display:contents; }
.workspace.focus-detail #detailPanel, .workspace.focus-list #listPanel { display:flex; }
.workspace.focus-detail #detailPanel > .panel-head, .workspace.focus-detail #detailPanel > .panel-body, .workspace.focus-list #listPanel > .panel-head, .workspace.focus-list #listPanel > .panel-body { display:flex; }
.workspace.focus-detail #detailPanel > .collapsed-rail, .workspace.focus-list #listPanel > .collapsed-rail { display:none; }
.collapsed-rail.horizontal { flex-direction:column; }
.collapsed-rail.horizontal span { writing-mode:vertical-rl; }
.panel { border-radius:12px; }
.panel-head { padding:12px; gap:6px; }
.panel-head h1, .panel-head h2 { font-size:17px; }
.eyebrow { font-size:12px; letter-spacing:.06em; }
.canvas-head { flex-wrap:wrap; align-items:center; flex:0 0 auto; min-height:66px; }
.canvas-tools { justify-content:flex-start; }
.canvas-tools .ai-button { padding:0 10px; width:auto; font-size:14px; }
.canvas-tools .ai-button svg { display:none; }
.explorer-search { display:block; padding:12px; }
.explorer-search input { width:100%; min-width:0; padding:10px; border:1px solid var(--line); border-radius:8px; font-size:14px; }
.add-node-disclosure { margin:0 10px 12px; border:1px solid var(--line); border-radius:8px; }
.add-node-disclosure > summary { padding:10px; color:var(--primary); font-size:14px; cursor:pointer; }
.mode-tabs { margin:0 4px 8px; }
.mode-tab { font-size:13px; gap:4px; }
.mode-tab svg { display:none; }
.node-list-item { min-height:45px; border-radius:7px; margin-left:calc(var(--depth,0) * 12px); padding:7px 3px; }
.list-copy b { font-size:14px; font-weight:550; }
.list-copy .branch-mark { display:inline; font-size:14px; margin:0 4px 0 0; }
.shared-badge { display:inline-block; color:var(--nexa-legacy-color-102); font-size:12px; margin-top:3px; }
.list-meta { flex-wrap:wrap; gap:4px; padding:8px 12px; }
.list-index { background:transparent; padding:2px; min-width:24px; }
.graph-viewport { overflow:hidden; overflow:clip; min-height:0; isolation:isolate; }
.canvas-stage { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.canvas-scene { position:absolute; left:0; top:0; width:0; height:0; transform-origin:0 0; overflow:visible; pointer-events:none; }
.card-flow { position:absolute; left:0; top:0; width:0; height:0; overflow:visible; pointer-events:none; }
.graph-card { pointer-events:auto; touch-action:none; }
.connectors { position:absolute; overflow:visible; pointer-events:none; }
.space-pan, .space-pan .graph-card { cursor:grab; }
.is-panning, .is-panning .graph-card { cursor:grabbing; }
.zoom-controls { position:absolute; left:auto; right:12px; bottom:12px; margin:0; transform:none; height:40px; }
.zoom-controls .zoom-value { width:58px; font-size:13px; }
.zoom-controls .zoom-text { width:auto; padding:0 9px; font-size:13px; white-space:nowrap; }
.interaction-hint { font-size:12px; line-height:1.5; }
.detail-body { display:block; padding:12px; background:var(--nexa-surface); }
.node-inspector, .relation-inspector { padding:0; border:0; box-shadow:none; }
.detail-form { display:grid; grid-template-columns:1fr; gap:12px; }
.detail-form input, .detail-form textarea, .detail-form select, #detailMemo { font-size:14px; line-height:1.5; width:100%; }
#detailIdentity { overflow-wrap:anywhere; }
.node-type-badge, #detailStatus, .selected-code { font-size:12px; }
.inspector-section { margin-top:16px; border-top:1px solid var(--line); padding-top:8px; }
.inspector-section > summary { padding:8px 0; font-size:14px; font-weight:650; cursor:pointer; }
.inspector-section h4 { font-size:13px; color:var(--muted); margin:12px 0 6px; }
.inspector-section .subflow-block { border:0; padding:0; margin:8px 0; }
.block-title { flex-wrap:wrap; }
.subflow { display:flex; flex-direction:column; align-items:stretch; }
.subflow-step { white-space:normal; text-align:left; }
.relation-row { display:block; width:100%; border:1px solid var(--line); border-radius:7px; background:var(--nexa-legacy-color-103); padding:9px; text-align:left; cursor:pointer; font-size:13px; line-height:1.5; margin:6px 0; }
.relation-row small { display:block; color:var(--muted); font-size:12px; margin-top:4px; }
.relation-stage { display:block; padding:8px; }
.relation-link { margin:8px; }
.relation-targets { max-height:none; }
.relation-inspector .block-title { margin-top:8px; }
.selection-toolbar { position:absolute; left:12px; bottom:64px; z-index:15; display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:7px; border:1px solid var(--nexa-legacy-color-95); border-radius:9px; background:var(--nexa-surface); box-shadow:0 6px 20px var(--nexa-legacy-color-104); font-size:13px; }
.selection-toolbar button { padding:6px 9px; border:0; border-radius:5px; cursor:pointer; background:var(--nexa-legacy-color-28); font-size:13px; }
#deleteNodeButton { color:var(--nexa-legacy-color-105); background:var(--nexa-legacy-color-100); }
.edge-toolbar { bottom:64px; max-width:calc(100% - 24px); }
.graph-card[data-shape="data"] .card-content { width:228px; height:164px; }
.graph-card[data-type="general"] { --node-color:var(--nexa-legacy-color-106); }
.empty-state { inset:0; pointer-events:none; }
@media(max-width:1200px) { .workspace { --explorer-width:200px; --inspector-width:270px; } .topbar { grid-template-columns:1fr auto; } .map-switcher { display:none; } }
@media(max-width:820px) {
  body { overflow:hidden; } .app-shell { height:100dvh; min-height:0; } .topbar { flex-basis:56px; height:56px; }
  .workspace, .workspace.list-collapsed, .workspace.focus-list, .workspace.focus-canvas, .workspace.focus-detail { display:grid; min-height:0; grid-template-columns:1fr; grid-template-rows:minmax(260px,1fr) minmax(160px,.65fr); overflow:auto; }
  .right-stack { display:contents; }
  .workspace #listPanel { display:none; }
  .workspace #canvasPanel { display:flex; grid-row:1; min-height:260px; }
  .workspace #detailPanel { display:flex; grid-row:2; min-height:160px; max-height:none; }
  .workspace.detail-collapsed { grid-template-rows:1fr 48px; }
  .workspace #detailPanel .collapsed-rail span { writing-mode:horizontal-tb; }
  .workspace.focus-list { grid-template-rows:1fr; }
  .workspace.focus-list #listPanel { display:flex; min-height:0; }
  .workspace.focus-list .right-stack { display:none; }
  .workspace.focus-canvas { grid-template-rows:1fr; }
  .workspace.focus-canvas #detailPanel { display:none; }
  .workspace.focus-detail { grid-template-rows:1fr; }
  .workspace.focus-detail #canvasPanel { display:none; }
  .workspace.focus-detail #detailPanel { grid-row:1; }
  .panel-actions [data-focus], .canvas-tools [data-focus] { display:inline-grid; }
  .graph-viewport { min-height:0; }
  .canvas-head { padding:8px; min-height:54px; }
  .canvas-head .eyebrow { display:none; }
  .canvas-head h2 { font-size:15px; }
  .canvas-tools { gap:4px; } .canvas-tools .secondary-button { padding-inline:6px; font-size:13px; }
  .canvas-meta { padding:4px 8px; } .interaction-hint { display:none; }
  .mobile-explorer { display:inline-flex !important; }
}
.mobile-explorer { display:none; }

.wheel-mode { margin-left:auto; flex:0 0 auto; }
.wheel-mode select { border:1px solid var(--line); border-radius:6px; background:var(--nexa-surface); color:var(--nexa-legacy-color-107); padding:5px; font-size:13px; }
.canvas-meta { flex-wrap:wrap; }
@media(max-width:520px) { .semantic-help { display:none; } .zoom-controls { right:6px; bottom:6px; } .zoom-controls button { width:27px; } .zoom-controls .zoom-text { padding-inline:7px; } }

.graph-card[data-type="data"] .handle-left { left:12px; }
.graph-card[data-type="data"] .handle-right { right:12px; }
.workspace.focus-detail #detailPanel > .panel-body, .workspace.focus-list #listPanel > .panel-body { display:block; }

/* Sprint 01.1: compact supporting panels and shared-model views. */
.workspace { --explorer-width:190px; --inspector-width:250px; }
#listPanel, #detailPanel { position:relative; overflow:visible; }
#listPanel .panel-head, #detailPanel .panel-head { padding:12px 10px; min-height:65px; }
#listPanel h1, #detailPanel h2 { font-size:16px; }
#listPanel .eyebrow, #detailPanel .eyebrow { font-size:9px; letter-spacing:1.2px; }
.list-body { padding:10px 8px; overflow:auto; }
.explorer-search input { width:100%; font-size:12px; padding:8px; }
.quick-add-button { width:100%; margin:8px 0; padding:8px; border:1px dashed var(--nexa-legacy-color-108); background:var(--nexa-legacy-color-103); color:var(--nexa-legacy-color-109); border-radius:6px; text-align:left; cursor:pointer; font-size:12px; font-weight:600; }
.list-meta { flex-wrap:wrap; gap:4px; margin:6px 0; font-size:10px; }
.node-list { gap:2px; padding:4px 0 40px; }
.node-list-item { position:relative; display:flex; align-items:center; min-height:34px; height:34px; gap:4px; padding:4px 4px 4px calc(2px + var(--depth,0)*11px); border:1px solid transparent; border-radius:5px; touch-action:none; cursor:grab; user-select:none; }
.node-list-item .list-copy { min-width:0; flex:1; }
.node-list-item .list-copy b { font-size:11px; font-weight:550; line-height:1.4; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.node-list-item .list-index { position:static; order:0; font-size:10px; width:auto; height:auto; min-width:17px; padding:0; background:none; color:var(--nexa-legacy-color-110); flex:none; }
.node-expand,.expand-spacer { width:14px; height:22px; flex:0 0 14px; }
.node-expand { border:0; background:none; color:var(--nexa-legacy-color-111); font-size:15px; cursor:pointer; padding:0; }
.node-list-item .shared-badge { display:block; font-size:8px; padding:2px 3px; flex:none; margin:0; }
.node-list-item.selected { border-color:var(--nexa-legacy-color-112); background:var(--nexa-legacy-color-113); }
.node-list-item.selected .list-copy b { color:var(--nexa-legacy-color-114); }
.node-list-item.drop-before::before,.node-list-item.drop-after::before { content:""; position:absolute; z-index:6; height:3px; background:var(--nexa-legacy-color-115); left:0; right:0; }
.node-list-item.drop-before::before { top:-2px; }.node-list-item.drop-after::before { bottom:-2px; }
.node-list-item.drop-inside { background:var(--nexa-legacy-color-116); outline:2px solid var(--nexa-legacy-color-115); }
.node-list-item.drop-invalid { background:var(--nexa-legacy-color-117); outline:1px solid var(--nexa-legacy-color-118); }
.node-list-item[data-drop-label]::after { content:attr(data-drop-label); position:absolute; left:18px; top:100%; z-index:10; border-radius:4px; background:var(--nexa-legacy-color-119); color:var(--nexa-surface); padding:3px 6px; font-size:10px; white-space:normal; pointer-events:none; }
.panel-resize { position:absolute; top:0; bottom:0; width:8px; z-index:40; cursor:col-resize; touch-action:none; }
.resize-list { right:-5px; }.resize-detail { left:-5px; }
.panel-resize:hover,.panel-resize:focus-visible { background:var(--nexa-legacy-color-120); outline:1px solid var(--nexa-legacy-color-115); }
.workspace.list-collapsed .resize-list,.workspace.detail-collapsed .resize-detail,.workspace.focus-canvas .panel-resize { display:none; }
.detail-body { padding:10px; overflow:auto; }
.detail-form { gap:8px; }.detail-form label > span,.inspector-section label > span { font-size:11px; }
.detail-form input,.detail-form select,.detail-form textarea,#detailMemo { font-size:12px; padding:7px; }
.field-hint { font-size:10px; }.inspector-section { margin-top:12px; }.inspector-section > summary { font-size:12px; }
#detailIdentity { font-size:9px; }.inspector-heading { margin-bottom:10px; }
.quick-add-dialog { width:min(360px,calc(100vw - 32px)); }
.quick-add-dialog form { padding:24px; display:grid; gap:16px; }
.quick-add-dialog label { display:grid; gap:6px; font-size:12px; }
.quick-add-dialog input,.quick-add-dialog select { width:100%; padding:10px; border:1px solid var(--nexa-legacy-color-121); border-radius:6px; }
.graph-card[data-role="section"] { border:0; border-bottom:2px solid var(--nexa-legacy-color-122); border-radius:4px; background:var(--nexa-legacy-color-113); box-shadow:none; }
.graph-card[data-role="section"] .card-content { width:100%; height:100%; padding:10px 20px; display:flex; flex-direction:row; align-items:center; gap:16px; }
.graph-card[data-role="section"] .card-topline { order:2; margin:0; }
.graph-card[data-role="section"] .card-type { display:none; }
.graph-card[data-role="section"] h3 { flex:1; }
.graph-card[data-role="section"] .flow-toggle { order:3; flex-basis:auto; width:auto; }
.graph-card[data-role="section"] h3 { font-size:18px; line-height:1.3; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.graph-card[data-role="section"] p { display:none; }
.graph-card[data-role="section"] .flow-toggle { margin:0; padding:0; border:0; min-width:130px; font-size:11px; }
.graph-card[data-role="step"] { background:var(--nexa-surface); border:1.5px solid var(--nexa-legacy-color-123); border-radius:9px; }
.graph-card[data-role="step"] .card-content { width:100%; height:100%; padding:16px; }
.graph-card[data-role="step"] h3 { font-size:16px; margin:10px 0; }
.graph-card[data-role="step"] p { font-size:11px; max-height:30px; }
.graph-card[data-role="step"] .flow-toggle { margin-top:auto; }
.graph-card[data-role="section"].selected,.graph-card[data-role="step"].selected { border-color:var(--nexa-legacy-color-115); box-shadow:0 0 0 3px var(--nexa-legacy-color-124); }
.graph-card[data-role="section"] .handle-left,.graph-card[data-role="step"] .handle-left { left:0; }
.graph-card[data-role="section"] .handle-right,.graph-card[data-role="step"] .handle-right { right:0; }
.process-bridge { fill:none; stroke:var(--nexa-legacy-color-125); stroke-width:2; stroke-dasharray:5 4; pointer-events:none; }
.process-step-editor { margin-top:10px; padding:10px; border:1px solid var(--line); border-radius:7px; display:grid; gap:10px; }
.process-step-editor label { display:grid; gap:5px; font-size:12px; }
.process-step-editor input,.process-step-editor textarea { width:100%; font-size:12px; padding:7px; }
.subflow-step[aria-pressed="true"] { border-color:var(--nexa-legacy-color-7); background:var(--nexa-legacy-color-113); }
.graph-card[data-role="section"] .card-number { display:none; }
.relation-row[aria-pressed="true"] { border-color:var(--nexa-legacy-color-7); background:var(--nexa-legacy-color-113); }
.graph-card.relation-highlight { filter:drop-shadow(0 0 7px var(--nexa-legacy-color-126)); }
.graph-card.relation-highlight .node-outline { stroke:var(--nexa-legacy-color-7); stroke-width:4; }
.graph-card.relation-dimmed { opacity:.28; }
.graph-edge.relation-dimmed,.process-bridge.relation-dimmed { opacity:.16; }
.graph-edge.relation-highlight .edge-line { stroke:var(--nexa-legacy-color-7); stroke-width:4; }
.endpoint-layer { position:absolute; inset:0; z-index:20; pointer-events:none; }
.endpoint-handle { position:absolute; width:26px; height:26px; transform:translate(-50%,-50%); border:2px solid var(--nexa-legacy-color-7); border-radius:50%; background:var(--nexa-surface); color:var(--nexa-legacy-color-127); font-size:11px; padding:0; cursor:crosshair; pointer-events:auto; touch-action:none; box-shadow:0 0 0 3px var(--nexa-legacy-color-128); }
.endpoint-handle:focus-visible { outline:3px solid var(--nexa-legacy-color-129); }
.is-reconnecting { cursor:crosshair; }
.graph-card.reconnect-target { filter:drop-shadow(0 0 8px var(--nexa-legacy-color-130)); }
.graph-card.reconnect-invalid { filter:drop-shadow(0 0 8px var(--nexa-legacy-color-131)); }
.connection-preview.invalid { stroke:var(--nexa-legacy-color-131); }
#newConnectionButton:disabled { opacity:.45; cursor:default; }
.canvas-head { padding:10px 12px; }.canvas-head .eyebrow { font-size:9px; }.canvas-head h2 { font-size:18px; }
.canvas-tools { flex-wrap:wrap; gap:6px; }.canvas-tools .secondary-button { font-size:11px; padding:7px; }
.view-tabs button { font-size:11px; padding:7px 9px; }
.map-switcher { display:flex; }.map-select { max-width:280px; font-size:12px; }
@media(max-width:1100px) { .map-kicker { display:none; }.map-select { max-width:210px; }.topbar { grid-template-columns:auto 1fr auto; }.map-switcher { justify-content:center; } }
@media(max-width:820px) {
  .panel-resize { display:none; }.workspace { position:relative; }
  .workspace.mobile-list-open #listPanel { display:flex; position:absolute; left:0; top:0; bottom:0; width:210px; z-index:45; box-shadow:10px 0 40px var(--nexa-legacy-color-132); }
  .workspace.mobile-list-open.list-collapsed #listPanel { display:none; }
  .topbar { gap:10px; }.brand-sub,.map-kicker,.save-state { display:none; }.map-select { max-width:170px; font-size:10px; }
}

.map-kicker { white-space:nowrap; }
#detailCode,#detailName,#detailType { min-height:34px; height:34px; }
#detailScope { min-height:80px; }
.node-list-item { margin-bottom:0; }