:root {
  --flow-ink: #203028;
  --flow-muted: #6d7a73;
  --flow-line: #dfe8e1;
  --flow-panel: #ffffff;
  --flow-soft: #f4f7f4;
  --flow-mint: #dff1d5;
  --flow-green: #287d72;
  --flow-lime: #c8e88d;
  --flow-orange: #d98248;
  --flow-red: #ba5961;
  --flow-shadow: 0 16px 36px rgba(43, 68, 55, .09);
}

* { box-sizing: border-box; }

body.flowchart-simulator-page {
  min-width: 320px;
  color: var(--flow-ink);
  background: #f7faf7;
  overflow-x: hidden;
}

.flow-container {
  width: min(1440px, calc(100% - 40px));
  margin: 0 auto;
}

.flow-hero {
  padding: 54px 0 38px;
  background: radial-gradient(circle at 84% 12%, rgba(200, 232, 141, .34), transparent 27%), linear-gradient(135deg, #f7faf7 0%, #eff7ed 100%);
}

.flow-hero h1 {
  max-width: 850px;
  margin: 0;
  color: var(--flow-ink);
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.12;
  letter-spacing: -.055em;
}

.flow-lead {
  max-width: 800px;
  margin: 20px 0 0;
  color: #53645a;
  font-size: 16px;
  line-height: 1.9;
}

.flow-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 22px;
  color: var(--flow-green);
  font-size: 12px;
  font-weight: 700;
}

.flow-trust-row span::before { content: '✓'; margin-right: 6px; color: #73a74d; }

.flow-pc-note {
  display: inline-block;
  margin: 16px 0 0;
  padding: 7px 10px;
  border: 1px solid #cbdcc8;
  border-radius: 6px;
  color: #527057;
  background: rgba(255, 255, 255, .62);
  font-size: 11px;
  line-height: 1.5;
}

.flow-app-shell {
  margin-top: 28px;
  margin-bottom: 72px;
  overflow: hidden;
  border: 1px solid var(--flow-line);
  border-radius: 18px;
  background: var(--flow-panel);
  box-shadow: var(--flow-shadow);
}

.flow-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--flow-line);
  background: #fbfdfb;
}

.toolbar-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.toolbar-run-actions { flex: 0 0 auto; flex-wrap: nowrap; margin-left: auto; white-space: nowrap; }

.tool-button, .small-tool-button, .zoom-button, .add-variable-button, .dialog-close, .clear-selection-button {
  border: 1px solid #cbd8ce;
  border-radius: 7px;
  color: #365045;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s, transform .18s;
}

.tool-button { min-height: 34px; padding: 0 11px; }
.small-tool-button, .clear-selection-button { min-height: 29px; padding: 0 9px; font-size: 11px; }
.tool-button:hover, .small-tool-button:hover, .zoom-button:hover, .add-variable-button:hover, .clear-selection-button:hover { border-color: var(--flow-green); color: var(--flow-green); background: #f1f8f1; }
.small-tool-button.is-active { border-color: var(--flow-green); color: #fff; background: var(--flow-green); }
.tool-button:focus-visible, .small-tool-button:focus-visible, .zoom-button:focus-visible, .add-variable-button:focus-visible, .clear-selection-button:focus-visible, .palette-item:focus-visible, .inspector-section-summary:focus-visible, .dialog-close:focus-visible { outline: 3px solid rgba(40, 125, 114, .22); outline-offset: 2px; }
.tool-button:disabled { opacity: .45; cursor: not-allowed; }
.icon-button { display: inline-flex; align-items: center; gap: 4px; }
.primary-tool-button { border-color: var(--flow-green); color: #fff; background: var(--flow-green); }
.primary-tool-button:hover { color: #fff; background: #1f665e; }
.toolbar-run-actions > #step-button { min-width: 88px; }
.toolbar-run-actions > #run-button { min-width: 78px; }
.toolbar-run-actions > #reset-runtime-button { min-width: 98px; }
.toolbar-run-actions > #stop-button { min-width: 72px; }
.execution-end-button { border-color: #d8a6a0; color: #934f4c; background: #fff8f6; }
.execution-end-button:hover { border-color: #b86e70; color: #fff; background: #b86e70; }
.speed-control { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; color: var(--flow-muted); font-size: 11px; font-weight: 700; }
.speed-control select { min-height: 30px; border: 1px solid #cbd8ce; border-radius: 6px; color: var(--flow-ink); background: #fff; font: inherit; font-size: 11px; }
.toolbar-status { flex: 0 0 145px; width: 145px; margin-left: 8px; overflow: hidden; color: var(--flow-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.flow-workspace {
  display: grid;
  grid-template-columns: 218px minmax(480px, 1fr) 338px;
  min-height: 760px;
}

.flow-side-panel { min-width: 0; background: #fbfdfb; }
.palette-panel { border-right: 1px solid var(--flow-line); }
.inspector-panel { border-left: 1px solid var(--flow-line); }
.panel-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 15px 11px; }
.panel-title-row h2, .canvas-panel-header h2 { margin: 0; color: var(--flow-ink); font-size: 15px; letter-spacing: -.025em; }
.panel-collapse-button { display: none; border: 0; color: var(--flow-green); background: transparent; font-size: 22px; line-height: 1; cursor: pointer; }
.panel-help { margin: 0; padding: 0 15px 14px; color: var(--flow-muted); font-size: 11px; line-height: 1.6; }
.palette-list { display: grid; gap: 7px; padding: 0 12px; }
.palette-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 8px 9px; border: 1px solid #dce8dd; border-radius: 9px; color: var(--flow-ink); background: #fff; text-align: left; cursor: grab; transition: border-color .18s, transform .18s, box-shadow .18s; }
.palette-item:hover { border-color: #91bba0; box-shadow: 0 5px 12px rgba(43, 68, 55, .08); transform: translateY(-1px); }
.palette-item.is-dragging { opacity: .55; cursor: grabbing; }
.palette-item strong, .palette-item small { display: block; }
.palette-item strong { font-size: 12px; }
.palette-item small { margin-top: 2px; color: var(--flow-muted); font-size: 10px; }
.palette-shape { display: block; flex: 0 0 38px; width: 38px; height: 26px; border: 2px solid #76a884; background: #f5fbf1; }
.palette-terminal .palette-shape { border-radius: 999px; }
.palette-process .palette-shape { border-radius: 3px; }
.palette-decision .palette-shape { position: relative; flex: 0 0 36px; width: 36px; height: 36px; margin: 0 1px; border: 0; background: #76a884; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transform: none; }
.palette-decision .palette-shape::after { position: absolute; inset: 3px; content: ''; background: #f5fbf1; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.palette-display .palette-shape { position: relative; border: 0; background: #76a884; clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%); }
.palette-display .palette-shape::after { position: absolute; inset: 2px; content: ''; background: #f5fbf1; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.palette-loop-start .palette-shape, .palette-loop-end .palette-shape { position: relative; border: 0; border-radius: 0; background: #76a884; }
.palette-loop-start .palette-shape { clip-path: polygon(0 22%, 14% 0, 86% 0, 100% 22%, 100% 100%, 0 100%); }
.palette-loop-end .palette-shape { clip-path: polygon(0 0, 100% 0, 100% 78%, 86% 100%, 14% 100%, 0 78%); }
.palette-loop-start .palette-shape::after, .palette-loop-end .palette-shape::after { position: absolute; inset: 2px; content: ''; background: #f5fbf1; }
.palette-loop-start .palette-shape::after { clip-path: polygon(0 22%, 14% 0, 86% 0, 100% 22%, 100% 100%, 0 100%); }
.palette-loop-end .palette-shape::after { clip-path: polygon(0 0, 100% 0, 100% 78%, 86% 100%, 14% 100%, 0 78%); }
.palette-loop-details { margin: 2px 0 0; }
.palette-loop-details summary { padding: 6px 10px; color: var(--flow-muted); font-size: 11px; font-weight: 900; cursor: pointer; }
.palette-loop-details .palette-item { margin-bottom: 7px; }
.palette-tip { margin: 20px 12px 12px; padding: 12px; border: 1px solid #dce8dd; border-radius: 10px; background: #f0f7ee; }
.palette-tip strong { font-size: 11px; }
.palette-tip p { margin: 6px 0 0; color: #65766a; font-size: 10px; line-height: 1.65; }

.flow-canvas-panel { min-width: 0; background: #fff; }
.canvas-panel-header { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 17px 17px 12px; }
.canvas-panel-header .eyebrow { margin: 0 0 4px; }
.canvas-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 5px; }
.zoom-controls { display: inline-flex; align-items: center; gap: 2px; margin-left: 3px; padding: 2px; border: 1px solid #d8e3da; border-radius: 7px; background: #f6faf5; }
.zoom-button { width: 25px; min-height: 25px; padding: 0; border: 0; background: transparent; }
.zoom-controls span { min-width: 41px; color: var(--flow-muted); font-size: 10px; font-weight: 700; text-align: center; }
.canvas-help-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; padding: 0 17px 10px; color: var(--flow-muted); font-size: 11px; }
.canvas-help-row #connection-status.is-pending { color: var(--flow-orange); font-weight: 700; }
.canvas-scroll { position: relative; height: 650px; overflow: auto; border-top: 1px solid var(--flow-line); border-bottom: 1px solid var(--flow-line); background-color: #f9fcf8; outline: none; }
.canvas-scroll.is-drop-target { box-shadow: inset 0 0 0 3px rgba(40, 125, 114, .42); background-color: #f0f8ef; }
.canvas-scroll:focus-visible { box-shadow: inset 0 0 0 3px rgba(40, 125, 114, .18); }
.canvas-stage { position: relative; width: 1400px; height: 900px; background-image: linear-gradient(to right, rgba(128, 167, 139, .13) 1px, transparent 1px), linear-gradient(to bottom, rgba(128, 167, 139, .13) 1px, transparent 1px); background-size: 24px 24px; }
.edge-layer { position: absolute; inset: 0; z-index: 1; overflow: visible; pointer-events: auto; }
.edge-line { fill: none; stroke: #7d9d87; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.edge-group.loop-pair-purple .edge-line { stroke: #8d7bb4; }
.edge-group.loop-pair-blue .edge-line { stroke: #4b86b5; }
.edge-group.loop-pair-orange .edge-line { stroke: #c5834c; }
.edge-group.loop-pair-teal .edge-line { stroke: #3d8c83; }
.edge-group.loop-pair-pink .edge-line { stroke: #bd7087; }
.edge-hit { fill: none; stroke: transparent; stroke-width: 14; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: pointer; }
.edge-group.is-selected .edge-line { stroke: var(--flow-orange); stroke-width: 3; }
.edge-label { fill: #4e7761; font-family: "Noto Sans JP", sans-serif; font-size: 11px; font-weight: 900; pointer-events: none; }
.edge-group.is-selected .edge-label { fill: var(--flow-orange); }
.node-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.element-menu { position: absolute; z-index: 12; display: grid; min-width: 144px; padding: 6px; border: 1px solid #cbd8ce; border-radius: 9px; background: rgba(255, 255, 255, .98); box-shadow: 0 10px 24px rgba(35, 63, 45, .18); }
.element-menu[hidden] { display: none; }
.element-menu-title { margin: 2px 5px 5px; color: var(--flow-muted); font-size: 10px; font-weight: 900; overflow-wrap: anywhere; }
.element-menu button { min-height: 29px; padding: 5px 8px; border: 0; border-radius: 5px; color: #365045; background: transparent; font: inherit; font-size: 11px; font-weight: 700; text-align: left; cursor: pointer; }
.element-menu button:hover, .element-menu button:focus-visible { color: var(--flow-green); background: #eef7ed; outline: none; }
.element-menu button[data-menu-action="delete"] { color: #a75f61; }
.element-menu button[data-menu-action="delete"]:hover, .element-menu button[data-menu-action="delete"]:focus-visible { color: #fff; background: #b86e70; }
.flow-node { position: absolute; min-width: 100px; user-select: none; cursor: grab; pointer-events: auto; }
.flow-node.is-dragging { cursor: grabbing; opacity: .82; }
.node-card { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 100%; padding: 13px 17px; border: 2px solid #73a884; border-radius: 8px; color: #244132; background: #f4fbf1; box-shadow: 0 5px 10px rgba(50, 89, 59, .09); text-align: center; }
.node-text { max-width: 100%; overflow-wrap: anywhere; font-size: 12px; font-weight: 900; line-height: 1.35; }
.node-kind { position: absolute; right: 7px; bottom: 4px; color: #79a083; font-size: 8px; font-weight: 700; letter-spacing: .04em; }
.node-execution-badge { position: absolute; top: -27px; left: 50%; padding: 5px 10px; border-radius: 999px; color: #fff; background: var(--flow-orange); font-size: 11px; font-weight: 900; white-space: nowrap; transform: translateX(-50%); box-shadow: 0 3px 8px rgba(217, 130, 72, .28); }
.node-terminal .node-card { border-radius: 999px; background: #eff8e8; }
.node-process .node-card { background: #eef7fb; border-color: #6e9daf; }
.node-decision .node-card { position: absolute; inset: 2px; width: auto; height: auto; min-height: 0; padding: 8px 12px 10px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border: 0; border-radius: 0; background: #fff5df; box-shadow: none; z-index: 1; }
.node-decision::before { position: absolute; inset: 0; content: ''; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: #c69a58; z-index: 0; }
.node-decision .node-text { max-width: 78%; font-size: 11px; line-height: 1.18; }
.node-decision .node-kind { display: none; }
.node-display::before { position: absolute; inset: 0; content: ''; clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%); background: #9a80bd; z-index: 0; }
.node-display .node-card { position: absolute; inset: 2px; width: auto; height: auto; min-height: 0; padding: 10px 14px; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); border: 0; border-radius: 0; background: #f4effc; z-index: 1; }
.flow-node.node-loopStart, .flow-node.node-loopEnd { --loop-color: #8d7bb4; --loop-soft: #f4f1fd; --loop-ink: #8873ae; }
.flow-node.loop-pair-blue { --loop-color: #4b86b5; --loop-soft: #edf7fc; --loop-ink: #286182; }
.flow-node.loop-pair-orange { --loop-color: #c5834c; --loop-soft: #fff5e9; --loop-ink: #8f5e35; }
.flow-node.loop-pair-teal { --loop-color: #3d8c83; --loop-soft: #eaf8f5; --loop-ink: #286b64; }
.flow-node.loop-pair-pink { --loop-color: #bd7087; --loop-soft: #fff0f4; --loop-ink: #8e5366; }
.flow-node.loop-pair-unassigned { --loop-color: #9aa69d; --loop-soft: #f3f6f3; --loop-ink: #66736b; }
.node-loopStart::before, .node-loopEnd::before { position: absolute; inset: 0; content: ''; background: var(--loop-color); z-index: 0; }
.node-loopStart::before, .node-loopStart .node-card { clip-path: polygon(0 22%, 14% 0, 86% 0, 100% 22%, 100% 100%, 0 100%); }
.node-loopEnd::before, .node-loopEnd .node-card { clip-path: polygon(0 0, 100% 0, 100% 78%, 86% 100%, 14% 100%, 0 78%); }
.node-loopStart .node-card, .node-loopEnd .node-card { position: absolute; inset: 2px; width: auto; height: auto; min-height: 0; border: 0; border-radius: 0; background: var(--loop-soft); box-shadow: none; z-index: 1; }
.node-loopStart .node-kind, .node-loopEnd .node-kind { color: var(--loop-ink); }
.node-loopStart .node-port, .node-loopEnd .node-port { background: var(--loop-color); box-shadow: 0 0 0 1px var(--loop-color); }
.node-loopStart .port-label, .node-loopEnd .port-label { color: var(--loop-ink); }
.loop-pair-badge { position: absolute; z-index: 2; top: 4px; left: 4px; padding: 2px 5px; border-radius: 4px; color: #fff; background: var(--loop-color); font-size: 8px; font-weight: 900; line-height: 1.2; white-space: nowrap; }
.flow-node.is-selected .node-card { box-shadow: 0 0 0 3px rgba(40, 125, 114, .27), 0 7px 14px rgba(50, 89, 59, .12); }
.flow-node.is-executing .node-card { box-shadow: 0 0 0 4px rgba(217, 130, 72, .55), 0 0 20px rgba(217, 130, 72, .25); }
.flow-node.has-error .node-card { border-color: var(--flow-red); box-shadow: 0 0 0 3px rgba(186, 89, 97, .25); }
.node-port { position: absolute; z-index: 5; display: grid; place-items: center; width: 8px; height: 8px; padding: 0; border: 1px solid #fff; border-radius: 50%; background: #73a884; box-shadow: 0 0 0 1px #60966e; cursor: crosshair; }
.node-port:hover, .node-port.is-pending { background: var(--flow-orange); box-shadow: 0 0 0 2px rgba(217, 130, 72, .25); transform: scale(1.15); }
.node-port-input { top: auto; bottom: 100%; left: calc(50% - 4px); }
.node-port-output { top: 100%; bottom: auto; left: calc(50% - 4px); }
.node-port-output.branch-yes { left: calc(30% - 4px); }
.node-port-output.branch-no { left: calc(70% - 4px); }
.port-label { position: absolute; top: 10px; color: #6f8e78; font-size: 9px; font-weight: 900; white-space: nowrap; pointer-events: none; }
.branch-yes .port-label, .branch-no .port-label { top: 10px; right: auto; left: 50%; transform: translateX(-50%); }

.canvas-shortcuts { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 9px 17px 11px; color: #88958d; font-size: 10px; }
.canvas-shortcuts span::before { content: '·'; margin-right: 4px; color: var(--flow-green); }

.inspector-sections { border-top: 1px solid var(--flow-line); }
.inspector-section { border-bottom: 1px solid var(--flow-line); background: #fff; }
.inspector-section-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 8px; min-height: 46px; padding: 0 15px; color: var(--flow-ink); background: #fff; cursor: pointer; list-style: none; }
.inspector-section-summary::-webkit-details-marker { display: none; }
.inspector-section-summary:hover { background: #f7fbf6; }
.inspector-section[open] > .inspector-section-summary { box-shadow: inset 3px 0 0 var(--flow-green); color: var(--flow-green); background: #f5faf4; }
.inspector-section-title { min-width: 0; font-size: 12px; font-weight: 900; }
.inspector-section-state { justify-self: end; padding: 3px 6px; border: 1px solid #e0e8e0; border-radius: 999px; color: #8b968f; background: #f6f8f6; font-size: 9px; font-weight: 800; white-space: nowrap; }
.inspector-section-state::before { content: '折りたたみ中'; }
.inspector-section[open] .inspector-section-state { border-color: #c6dfc5; color: var(--flow-green); background: #eaf6e8; }
.inspector-section[open] .inspector-section-state::before { content: '表示中'; }
.inspector-section-chevron { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid #cbd9cd; border-radius: 50%; color: var(--flow-muted); font-size: 14px; line-height: 1; transform: rotate(-90deg); transition: transform .18s ease, color .18s ease, border-color .18s ease; }
.inspector-section[open] .inspector-section-chevron { border-color: #8fba96; color: var(--flow-green); transform: rotate(0deg); }
.inspector-section-body { padding: 15px; border-top: 1px solid #edf2ed; }
.inspector-heading { display: flex; align-items: start; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.inspector-heading h3 { margin: 0; font-size: 14px; }
.inspector-heading p { margin: 4px 0 0; color: var(--flow-muted); font-size: 10px; line-height: 1.5; }
.add-variable-button { min-height: 28px; padding: 0 8px; border-color: #b7d2bd; color: var(--flow-green); font-size: 10px; }
.variables-table-wrap { overflow-x: auto; }
.variables-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.variables-table th { padding: 0 3px 6px; color: #8a958d; font-size: 9px; font-weight: 700; text-align: left; }
.variables-table td { padding: 5px 3px; border-top: 1px solid #e8eee8; vertical-align: middle; }
.variables-table input, .variables-table select, .settings-form input, .settings-form select, .settings-form textarea { width: 100%; min-width: 0; border: 1px solid #d3dfd5; border-radius: 5px; color: var(--flow-ink); background: #fff; font: inherit; font-size: 11px; }
.variables-table input, .variables-table select { min-height: 28px; padding: 4px 5px; }
.variables-table td:nth-child(1) { min-width: 90px; }
.variables-table td:nth-child(2) { min-width: 80px; }
.variables-table td:nth-child(2) select { min-width: 80px; }
.variables-table td:nth-child(3) { min-width: 78px; }
.variables-table td:nth-child(4) { width: 28px; }
.variables-table .value-field { min-width: 70px; }
.delete-variable-button { width: 24px; min-height: 27px; padding: 0; border: 0; border-radius: 5px; color: #aa6d6d; background: #fff2f0; font-size: 14px; cursor: pointer; }
.delete-variable-button:hover { color: #fff; background: #bb6d6d; }
.variable-changed input, .variable-changed select { border-color: var(--flow-orange); background: #fff9ef; }
.variable-change-note { margin-top: 3px; color: var(--flow-orange); font-size: 9px; line-height: 1.3; white-space: nowrap; }
.empty-state { padding: 22px 8px; color: #8c9890; font-size: 11px; line-height: 1.7; text-align: center; }
.output-list, .execution-history { display: grid; gap: 7px; margin: 0; padding: 0 0 0 22px; }
.output-list li { padding: 8px 9px; border: 1px solid #e0eae0; border-radius: 6px; color: #30483a; background: #f8fcf7; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.execution-history li { padding-left: 2px; color: #455b4b; font-size: 11px; }
.history-button { width: 100%; padding: 8px; border: 1px solid #e0eae0; border-radius: 6px; color: inherit; background: #f8fcf7; text-align: left; cursor: pointer; }
.history-button:hover { border-color: #9bbfa4; background: #eff8ed; }
.history-title, .history-detail { display: block; }
.history-title { color: var(--flow-ink); font-weight: 900; }
.history-detail { margin-top: 3px; color: var(--flow-muted); font-size: 10px; white-space: pre-line; overflow-wrap: anywhere; }
.settings-form { display: grid; gap: 12px; }
.settings-form label { display: grid; gap: 5px; color: #65736a; font-size: 10px; font-weight: 700; }
.settings-form input, .settings-form select { min-height: 32px; padding: 6px 8px; }
.settings-form textarea { min-height: 92px; padding: 7px 8px; resize: vertical; line-height: 1.5; }
.settings-help { margin: -4px 0 0; color: #8a958d; font-size: 10px; line-height: 1.6; }
.settings-node-type { padding: 7px 8px; border-radius: 5px; color: var(--flow-green); background: #f0f7ee; font-size: 10px; font-weight: 900; }

.validation-area { padding: 13px 17px; border-top: 1px solid #eed7d7; border-bottom: 1px solid #eed7d7; color: #81474a; background: #fff7f6; font-size: 11px; }
.validation-area strong { display: block; margin-bottom: 5px; }
.validation-area ul { margin: 0; padding-left: 18px; line-height: 1.6; }
.validation-area button { margin-top: 8px; border: 0; color: #81474a; background: transparent; font: inherit; font-size: 10px; text-decoration: underline; cursor: pointer; }
.execution-mode-note { padding: 10px 17px; border-top: 1px solid #c8dfcb; border-bottom: 1px solid #c8dfcb; color: #2f6b4d; background: #eff9ed; font-size: 11px; font-weight: 700; line-height: 1.5; }
.execution-current { display: grid; grid-template-columns: auto minmax(180px, 1fr) auto; align-items: center; gap: 6px 14px; margin: 0 17px 8px; padding: 10px 14px; border: 2px solid #e2a568; border-radius: 10px; color: #70492a; background: linear-gradient(105deg, #fff8e9, #fffdf6); box-shadow: 0 5px 14px rgba(180, 124, 58, .12); }
.execution-current[hidden] { display: none; }
.execution-current-label { align-self: start; padding: 5px 8px; border-radius: 5px; color: #fff; background: var(--flow-orange); font-size: 11px; font-weight: 900; line-height: 1.3; white-space: nowrap; }
.execution-current-main { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.execution-current-main strong { min-width: 0; overflow-wrap: anywhere; color: #4a3925; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.2; }
.execution-current-step { flex: 0 0 auto; color: #9a7145; font-size: 11px; font-weight: 900; white-space: nowrap; }
.execution-current p { grid-column: 1 / -1; margin: 0; color: #755f43; font-size: 12px; font-weight: 700; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }
.flow-app-shell.is-execution-mode .palette-item { opacity: .52; cursor: not-allowed; }
.flow-app-shell.is-execution-mode .flow-node { cursor: default; pointer-events: none; }
.flow-app-shell.is-execution-mode .edge-hit { pointer-events: none; }
.flow-app-shell.is-execution-mode .variables-table input:disabled, .flow-app-shell.is-execution-mode .variables-table select:disabled { color: var(--flow-ink); opacity: 1; background: #f5f8f5; }
.flow-app-shell.is-execution-mode .delete-variable-button:disabled { opacity: .45; cursor: not-allowed; }
.flow-project-bar { display: flex; align-items: center; gap: 9px; padding: 12px 17px; border-top: 1px solid var(--flow-line); background: #fbfdfb; }
.flow-project-bar label { color: var(--flow-muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.flow-project-bar input { width: min(360px, 45%); min-height: 31px; padding: 5px 8px; border: 1px solid #d3dfd5; border-radius: 5px; color: var(--flow-ink); background: #fff; font: inherit; font-size: 12px; }
.project-local-note { margin-left: auto; color: #8a958d; font-size: 10px; }

.flow-info-section { margin-bottom: 80px; padding: 30px; border: 1px solid var(--flow-line); border-radius: 16px; background: #fff; }
.flow-info-grid { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 50px; }
.flow-info-section h2 { max-width: 380px; margin: 0; color: var(--flow-ink); font-size: clamp(23px, 3vw, 34px); line-height: 1.3; letter-spacing: -.04em; }
.flow-info-copy { color: #5a6a60; font-size: 13px; line-height: 1.8; }
.flow-info-copy p { margin: 0 0 15px; }
.flow-info-purpose { margin: 18px 0; padding: 13px 15px; border: 1px solid #dce8dd; border-radius: 8px; color: #46594d; background: #f7fbf5; }
.flow-info-purpose p { margin: 0 0 10px; }
.flow-info-purpose p:last-child { margin-bottom: 0; }
.flow-info-purpose strong { color: var(--flow-ink); font-weight: 900; }
.flow-info-copy ol { margin: 0 0 17px; padding-left: 23px; }
.flow-info-copy li { padding: 3px 0; }
.flow-note { padding: 12px 14px; border-left: 3px solid var(--flow-lime); background: #f6faf3; font-size: 11px; }
.flow-note code { padding: 1px 4px; border-radius: 3px; background: #e8f0e5; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.flow-guide-section { margin-bottom: 80px; padding: 30px; border: 1px solid var(--flow-line); border-radius: 16px; background: #fff; }
.flow-guide-heading { max-width: 760px; margin-bottom: 25px; }
.flow-guide-heading h2 { margin: 0; color: var(--flow-ink); font-size: clamp(23px, 3vw, 34px); line-height: 1.3; letter-spacing: -.04em; }
.flow-guide-heading > p:last-child { margin: 12px 0 0; color: #46594d; font-size: 15px; line-height: 1.9; }
.flow-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.flow-guide-card { padding: 20px; border: 1px solid #dce8dd; border-radius: 10px; background: #fbfdfb; }
.flow-guide-card-intro { grid-column: 1 / -1; }
.flow-guide-card-shapes { grid-column: 1; }
.flow-guide-card-howto { order: 6; }
.flow-guide-card-arithmetic { order: 5; }
.flow-guide-card-troubleshooting { grid-column: 2; order: 7; }
.flow-guide-card h3 { margin: 0 0 12px; color: var(--flow-ink); font-size: 18px; line-height: 1.5; }
.flow-guide-subheading { margin: 18px 0 8px; color: var(--flow-ink); font-size: 16px; line-height: 1.5; }
.flow-guide-card p { margin: 0 0 13px; color: #46594d; font-size: 14px; line-height: 1.9; }
.flow-guide-card p:last-child { margin-bottom: 0; }
.flow-guide-definition-list { display: grid; gap: 12px; margin: 0; }
.flow-guide-definition-list div { padding-left: 10px; border-left: 3px solid #c8e88d; }
.flow-guide-definition-list dt { display: flex; align-items: center; gap: 9px; color: var(--flow-ink); font-size: 14px; line-height: 1.6; font-weight: 900; }
.flow-guide-definition-list dd { margin: 4px 0 0; color: #46594d; font-size: 13px; line-height: 1.85; }
.flow-guide-definition-list dd strong { color: var(--flow-ink); font-weight: 900; }
.flow-guide-shape-instructions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.flow-guide-shape-instruction { padding: 12px; border: 1px solid #dce8dd; border-radius: 8px; background: #fff; }
.flow-guide-shape-instruction h5 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; color: var(--flow-ink); font-size: 14px; line-height: 1.6; }
.flow-guide-shape-instruction p { margin: 0 0 7px; color: #46594d; font-size: 13px; line-height: 1.8; }
.flow-guide-shape-instruction p:last-child { margin-bottom: 0; }
.flow-guide-shape-instruction strong { color: var(--flow-ink); font-weight: 900; }
.guide-shape { position: relative; display: inline-block; flex: 0 0 34px; width: 34px; height: 20px; border: 2px solid #76a884; background: #f5fbf1; }
.guide-shape-terminal { border-radius: 999px; }
.guide-shape-process { border-radius: 3px; }
.guide-shape-decision { width: 24px; flex-basis: 24px; height: 24px; margin: 0 5px; border: 0; background: #76a884; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.guide-shape-decision::after { position: absolute; inset: 3px; content: ''; background: #f5fbf1; clip-path: inherit; }
.guide-shape-display { border: 0; background: #76a884; clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%); }
.guide-shape-display::after { position: absolute; inset: 2px; content: ''; background: #f5fbf1; clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); }
.guide-shape-loop-start, .guide-shape-loop-end { border: 0; background: #76a884; }
.guide-shape-loop-start { clip-path: polygon(0 22%, 14% 0, 86% 0, 100% 22%, 100% 100%, 0 100%); }
.guide-shape-loop-end { clip-path: polygon(0 0, 100% 0, 100% 78%, 86% 100%, 14% 100%, 0 78%); }
.guide-shape-loop-start::after, .guide-shape-loop-end::after { position: absolute; inset: 2px; content: ''; background: #f5fbf1; }
.guide-shape-loop-start::after { clip-path: polygon(0 22%, 14% 0, 86% 0, 100% 22%, 100% 100%, 0 100%); }
.guide-shape-loop-end::after { clip-path: polygon(0 0, 100% 0, 100% 78%, 86% 100%, 14% 100%, 0 78%); }
.flow-guide-list { margin: 0; padding-left: 24px; color: #46594d; font-size: 14px; line-height: 1.9; }
.flow-guide-list li { padding: 2px 0; }
.flow-guide-connection-diagrams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.flow-guide-connection-figure { margin: 0; padding: 12px; border: 1px solid #dce8dd; border-radius: 8px; background: #fff; }
.flow-guide-connection-figure figcaption { margin-bottom: 8px; color: var(--flow-ink); font-size: 14px; font-weight: 900; }
.guide-connection-canvas { position: relative; height: 120px; overflow: hidden; }
.guide-connection-canvas svg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; fill: none; stroke: #76a884; stroke-width: 2; stroke-linecap: round; }
.guide-diagram-node { position: absolute; z-index: 1; display: flex; align-items: center; justify-content: center; width: 76px; height: 30px; border: 2px solid #76a884; border-radius: 4px; color: var(--flow-ink); background: #f5fbf1; font-size: 12px; font-weight: 900; }
.guide-diagram-port { position: absolute; top: 50%; width: 10px; height: 10px; border: 2px solid #76a884; border-radius: 50%; background: #fff; transform: translateY(-50%); }
.guide-diagram-port-out { right: -7px; }
.guide-diagram-port-in { left: -7px; }
.guide-diagram-source-one { left: 18px; top: 45px; }
.guide-diagram-target-one { left: 185px; top: 45px; }
.guide-diagram-source-merge-top { left: 18px; top: 12px; }
.guide-diagram-source-merge-bottom { left: 18px; top: 78px; }
.guide-diagram-target-merge { left: 185px; top: 45px; }
.flow-guide-connection-figure p { margin: 8px 0 0; font-size: 13px; line-height: 1.75; }
.flow-guide-output-example { margin-top: 14px !important; padding: 10px 12px; border: 1px solid #dce8dd; border-radius: 7px; color: #355948 !important; background: #f1f8ef; }
.flow-guide-actions { display: grid; gap: 9px; margin-bottom: 17px; }
.flow-guide-actions p { display: flex; align-items: center; gap: 8px; margin: 0; }
.guide-button-sample { display: inline-block; flex: 0 0 auto; padding: 5px 9px; border: 1px solid #cbd8ce; border-radius: 5px; color: #456050; background: #fff; font-size: 12px; font-weight: 900; line-height: 1.4; white-space: nowrap; }
.guide-button-primary { border-color: var(--flow-green); color: #fff; background: var(--flow-green); }
.guide-button-end { border-color: #d8a6a0; color: #934f4c; background: #fff8f6; }
.guide-button-select { background: #f6faf5; }
.flow-guide-table-wrap { overflow-x: auto; margin-bottom: 12px; }
.flow-guide-table { width: 100%; border-collapse: collapse; color: #46594d; font-size: 13px; line-height: 1.65; }
.flow-guide-table th, .flow-guide-table td { padding: 7px 8px; border-bottom: 1px solid #e4ece5; text-align: left; vertical-align: top; }
.flow-guide-table thead th { color: var(--flow-ink); background: #f1f8ef; font-size: 12px; white-space: nowrap; }
.flow-guide-table tbody th { color: var(--flow-ink); font-weight: 700; white-space: nowrap; }
.flow-guide-table code, .flow-guide-card code { padding: 1px 4px; border-radius: 3px; color: #355948; background: #e8f0e5; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.guide-error-sample { display: inline-block; margin-right: 5px; padding: 4px 8px; border: 1px solid #d9a36e; border-radius: 5px; color: #8a4b1c; background: #fff4e7; font-size: 12px; font-weight: 900; }
.flow-guide-error-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.flow-guide-error-grid h4 { margin: 0 0 7px; color: var(--flow-ink); font-size: 15px; line-height: 1.6; }
.flow-guide-error-list { margin: 0; padding-left: 21px; color: #46594d; font-size: 13px; line-height: 1.8; }
.flow-guide-error-list li { padding: 2px 0; }

.project-dialog { width: min(650px, calc(100% - 28px)); max-height: min(720px, calc(100vh - 40px)); padding: 0; border: 1px solid var(--flow-line); border-radius: 14px; color: var(--flow-ink); background: #fff; box-shadow: 0 25px 70px rgba(30, 53, 39, .25); }
.project-dialog::backdrop { background: rgba(30, 53, 39, .34); backdrop-filter: blur(3px); }
.dialog-heading { display: flex; align-items: start; justify-content: space-between; padding: 20px 22px 15px; border-bottom: 1px solid var(--flow-line); }
.dialog-heading h2 { margin: 0; font-size: 20px; }
.dialog-close { width: 30px; min-height: 30px; border: 0; color: var(--flow-muted); background: #f3f7f2; font-size: 20px; line-height: 1; }
.project-list { display: grid; gap: 9px; max-height: 500px; overflow: auto; padding: 16px 22px 22px; }
.project-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid #dce8dd; border-radius: 9px; background: #fbfdfb; }
.project-item.is-current { border-color: #a5cba9; background: #f1f8ef; }
.project-item-title { margin: 0; font-size: 13px; font-weight: 900; overflow-wrap: anywhere; }
.project-item-meta { margin: 4px 0 0; color: var(--flow-muted); font-size: 10px; }
.project-item-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 5px; }
.project-item-actions button { min-height: 27px; padding: 0 7px; border: 1px solid #cbd8ce; border-radius: 5px; color: #456050; background: #fff; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.project-item-actions button:hover { border-color: var(--flow-green); color: var(--flow-green); }
.project-item-actions .danger { color: #a75f61; }

@media (max-width: 1160px) {
  .flow-workspace { grid-template-columns: 190px minmax(420px, 1fr) 300px; }
  .toolbar-status { display: none; }
  .canvas-panel-header { align-items: start; flex-direction: column; gap: 10px; }
  .canvas-actions { justify-content: start; }
}

@media (max-width: 880px) {
  .flow-workspace { grid-template-columns: 190px minmax(0, 1fr); }
  .inspector-panel { grid-column: 1 / -1; border-top: 1px solid var(--flow-line); border-left: 0; }
  .inspector-panel .panel-title-row { padding-bottom: 8px; }
  .inspector-panel .panel-collapse-button, .palette-panel .panel-collapse-button { display: block; }
  .inspector-panel.is-collapsed .inspector-sections { display: none; }
  .palette-panel.is-collapsed .panel-help, .palette-panel.is-collapsed .palette-list, .palette-panel.is-collapsed .palette-tip { display: none; }
  .palette-panel.is-collapsed { min-height: 52px; }
}

@media (max-width: 680px) {
  .flow-container { width: min(100% - 24px, 600px); }
  .flow-hero { padding: 34px 0 26px; }
  .flow-hero h1 { font-size: 34px; }
  .flow-lead { font-size: 13px; }
  .flow-app-shell { margin-top: 18px; border-radius: 12px; }
  .flow-toolbar { align-items: stretch; }
  .toolbar-project-actions, .toolbar-edit-actions, .toolbar-run-actions { width: 100%; }
  .toolbar-run-actions { margin-left: 0; overflow-x: auto; }
  .tool-button { flex: 1 1 auto; padding: 0 7px; }
  .toolbar-run-actions .tool-button { flex: 0 0 auto; }
  .toolbar-run-actions .speed-control { margin-left: auto; }
  .execution-current { grid-template-columns: auto minmax(0, 1fr); }
  .execution-current p { grid-column: 1 / -1; }
  .flow-workspace { display: block; min-height: 0; }
  .palette-panel, .inspector-panel { border-right: 0; border-left: 0; }
  .palette-panel { border-bottom: 1px solid var(--flow-line); }
  .palette-panel .panel-collapse-button { display: block; }
  .palette-panel.is-collapsed .panel-help, .palette-panel.is-collapsed .palette-list, .palette-panel.is-collapsed .palette-tip { display: none; }
  .palette-panel.is-collapsed { min-height: 52px; }
  .canvas-scroll { height: 560px; }
  .canvas-panel-header { padding-left: 13px; padding-right: 13px; }
  .canvas-help-row { padding-left: 13px; padding-right: 13px; }
  .canvas-shortcuts { padding-left: 13px; padding-right: 13px; }
  .flow-project-bar { align-items: start; flex-wrap: wrap; padding: 11px 13px; }
  .flow-project-bar input { width: calc(100% - 96px); }
  .project-local-note { width: 100%; margin-left: 0; }
  .flow-info-section { margin-bottom: 45px; padding: 22px 18px; }
  .flow-info-grid { display: block; }
  .flow-info-copy { margin-top: 22px; }
  .flow-guide-section { margin-bottom: 45px; padding: 22px 18px; }
  .flow-guide-grid { display: flex; flex-direction: column; gap: 12px; }
  .flow-guide-card + .flow-guide-card { margin-top: 0; }
  .flow-guide-shape-instructions { grid-template-columns: 1fr; }
  .flow-guide-connection-diagrams { grid-template-columns: 1fr; }
  .flow-guide-error-grid { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 420px) {
  .icon-button span { display: none; }
  .canvas-actions { gap: 4px; }
  .small-tool-button { padding: 0 6px; }
  .inspector-section-body { padding: 12px; }
  .inspector-section-summary { padding-left: 12px; padding-right: 12px; }
  .inspector-section-body { padding: 12px; }
}