#flow-diagram-container { width: 100%; max-width: 1400px; }
canvas#flow-canvas { display: block; width: 100%; border-radius: 12px; }
.fd-ctrl { background:#fff; border:0.5px solid #ddd; border-radius:12px; padding:.875rem 1rem; margin-bottom:1rem; width:100%; max-width:1400px; }
.fd-ctrl-hdr { display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; font-size:13px; font-weight:500; color:#111; }
.fd-ctrl-hdr svg { transition:transform .2s; flex-shrink:0; }
.fd-ctrl-hdr.open svg { transform:rotate(180deg); }
.fd-ctrl-bd { display:none; margin-top:.875rem; }
.fd-ctrl-bd.open { display:block; }
.fd-tabs { display:flex; gap:4px; margin-bottom:.875rem; flex-wrap:wrap; }
.fd-tab { font-size:11px; font-weight:500; padding:4px 12px; border:0.5px solid #ccc; border-radius:20px; background:#f5f5f5; color:#555; cursor:pointer; white-space:nowrap; }
.fd-tab.active { background:#111; color:#fff; border-color:#111; }
.fd-panel { display:none; }
.fd-panel.active { display:block; }
.fd-stitle { font-size:11px; font-weight:500; color:#666; text-transform:uppercase; letter-spacing:.06em; margin:1rem 0 .4rem; }
.fd-stitle:first-child { margin-top:0; }
.fd-stitle-note { font-weight:400; opacity:.6; text-transform:none; letter-spacing:0; }
.fd-row2 { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:5px; }
.fd-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-bottom:6px; }
@media (max-width:500px) { .fd-row2,.fd-row3 { grid-template-columns:1fr 1fr; } }
@media (max-width:360px) { .fd-row2,.fd-row3 { grid-template-columns:1fr; } }
.fd-field { display:flex; flex-direction:column; gap:3px; }
.fd-field label { font-size:10px; color:#888; }
.fd-field input, .fd-field select { font-size:12px; padding:4px 7px; border:0.5px solid #ccc; border-radius:5px; background:#fff; color:#111; width:100%; }
.fd-url-input { width:100%; font-size:12px; padding:4px 7px; border:0.5px solid #ccc; border-radius:5px; background:#fff; color:#111; }
.fd-bp-note { font-size:11px; color:#666; line-height:1.6; background:#f9f9f9; border:0.5px solid #eee; border-radius:7px; padding:.6rem .75rem; margin-bottom:.875rem; }
.fd-bp-note strong { color:#333; }
.fd-thresh-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:11px; color:#555; margin-bottom:.75rem; background:#f9f9f9; border:0.5px solid #eee; border-radius:7px; padding:.5rem .75rem; }
.fd-thresh-row label { font-weight:500; white-space:nowrap; }
.fd-thresh-row input[type=number] { width:68px; font-size:12px; padding:3px 6px; border:0.5px solid #ccc; border-radius:5px; background:#fff; color:#111; -moz-appearance:textfield; }
.fd-thresh-row input[type=number]::-webkit-inner-spin-button { opacity:1; }
.fd-thresh-sep { color:#bbb; }
.fd-sz-wrap { overflow-x:auto; margin-bottom:.75rem; }
.fd-bp-table { width:100%; border-collapse:collapse; font-size:12px; min-width:360px; }
.fd-bp-table th { font-size:10px; font-weight:500; color:#888; text-align:left; padding:5px 8px 5px 0; border-bottom:0.5px solid #eee; white-space:nowrap; }
.fd-bp-table th:first-child { width:96px; }
.fd-bp-table td { padding:4px 8px 4px 0; vertical-align:middle; }
.fd-bp-table td:first-child { font-size:11px; color:#444; white-space:nowrap; font-weight:500; }
.fd-bp-table td:first-child span { display:block; font-size:10px; color:#aaa; font-weight:400; margin-top:1px; }
.fd-bp-table input[type=number] { width:100%; font-size:12px; padding:3px 6px; border:0.5px solid #ccc; border-radius:5px; background:#fff; color:#111; -moz-appearance:textfield; }
.fd-bp-table input[type=number]::-webkit-inner-spin-button { opacity:1; }
.fd-bp-table tr.fd-bp-active td:first-child { color:#6c3de8; }
.fd-bp-table tr.fd-bp-active td:first-child::after { content:' ●'; font-size:9px; }
.fd-crow { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:6px; margin-bottom:4px; }
.fd-citem { display:flex; align-items:center; gap:6px; font-size:11px; color:#555; }
.fd-citem input[type=color] { width:26px; height:26px; border:0.5px solid #ddd; border-radius:5px; padding:2px; cursor:pointer; background:none; flex-shrink:0; }
.fd-outline-row { display:flex; align-items:center; gap:8px; font-size:11px; color:#555; margin-bottom:5px; padding:6px 8px; background:#f9f9f9; border:0.5px solid #eee; border-radius:7px; }
.fd-outline-row label { display:flex; align-items:center; gap:5px; font-weight:500; cursor:pointer; white-space:nowrap; }
.fd-outline-row input[type=color] { width:26px; height:26px; border:0.5px solid #ddd; border-radius:5px; padding:2px; cursor:pointer; background:none; flex-shrink:0; }
.fd-outline-row span { color:#aaa; font-size:10px; }
.fd-mcard { background:#f9f9f9; border:0.5px solid #ddd; border-radius:9px; padding:.7rem; margin-bottom:.5rem; }
.fd-mcard-hd { display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; font-size:11px; font-weight:500; color:#888; }
.fd-mcard-hd button { background:none; border:none; cursor:pointer; font-size:15px; color:#888; line-height:1; padding:0 2px; }
.fd-mcard-hd button:hover { color:#111; }
.fd-mcard input[type=text] { width:100%; font-size:12px; padding:4px 7px; border:0.5px solid #ccc; border-radius:5px; background:#fff; color:#111; margin-bottom:5px; }
.fd-children-label { font-size:10px; color:#888; margin-bottom:4px; }
.fd-child-row { display:flex; align-items:center; gap:5px; margin-bottom:4px; }
.fd-child-row input[type=text] { flex:1; margin-bottom:0; font-size:12px; padding:4px 7px; border:0.5px solid #ccc; border-radius:5px; background:#fff; color:#111; }
.fd-child-row button { background:none; border:none; cursor:pointer; font-size:14px; color:#888; line-height:1; padding:0 2px; flex-shrink:0; }
.fd-add-child { font-size:10px; padding:3px 8px; border:0.5px solid #ccc; border-radius:5px; background:#f0f0f0; color:#555; cursor:pointer; width:100%; }
.fd-add-child:hover { background:#fff; }
.fd-addrow { display:flex; gap:6px; margin-top:2px; }
.fd-addrow button { flex:1; font-size:11px; padding:5px 6px; border:0.5px solid #ccc; border-radius:6px; background:#f5f5f5; color:#111; cursor:pointer; }
.fd-addrow button:hover { background:#fff; }
.fd-no-mid-note { font-size:11px; color:#888; margin-top:4px; font-style:italic; display:none; }
.fd-apply-btn { width:100%; margin-top:.875rem; padding:8px; font-size:12px; font-weight:500; border:0.5px solid #999; border-radius:7px; background:#f0f0f0; color:#111; cursor:pointer; }
.fd-apply-btn:hover { background:#fff; }
.fd-save-row { display:flex; gap:6px; margin-top:6px; }
.fd-save-btn { flex:1; padding:8px; font-size:12px; font-weight:500; border:0.5px solid #999; border-radius:7px; cursor:pointer; }
.fd-save-btn.primary { background:#111; color:#fff; border-color:#111; }
.fd-save-btn.primary:hover { background:#333; }
.fd-save-btn.secondary { background:#f0f0f0; color:#111; }
.fd-save-btn.secondary:hover { background:#fff; }
#fd-saveas-overlay { display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.45); align-items:center; justify-content:center; }
#fd-saveas-overlay.open { display:flex; }
#fd-saveas-modal { background:#fff; border-radius:12px; padding:1.5rem; width:min(420px,90vw); }
#fd-saveas-modal h2 { font-size:15px; font-weight:500; color:#111; margin-bottom:.75rem; }
#fd-saveas-modal p  { font-size:12px; color:#666; margin-bottom:.875rem; line-height:1.5; }
#fd-saveas-input { width:100%; font-size:13px; padding:7px 10px; border:0.5px solid #ccc; border-radius:7px; background:#f9f9f9; color:#111; margin-bottom:.875rem; }
#fd-saveas-input:focus { outline:none; border-color:#6c3de8; }
.fd-modal-btns { display:flex; gap:8px; justify-content:flex-end; }
.fd-modal-btns button { font-size:12px; font-weight:500; padding:7px 16px; border-radius:7px; cursor:pointer; }
.fd-modal-cancel { background:#f0f0f0; color:#111; border:0.5px solid #ccc; }
.fd-modal-cancel:hover { background:#fff; }
.fd-modal-confirm { background:#111; color:#fff; border:0.5px solid #111; }
.fd-modal-confirm:hover { background:#333; }
#fd-live-width { font-size:10px; color:#888; text-align:right; margin-bottom:.25rem; font-variant-numeric:tabular-nums; }
.fd-align-group { display:flex; gap:3px; }
.fd-align-btn { flex:1; padding:4px 0; font-size:13px; line-height:1; border:0.5px solid #ccc; border-radius:5px; background:#fff; color:#888; cursor:pointer; }
.fd-align-btn:hover { background:#f5f5f5; color:#333; }
.fd-align-btn.active { background:#111; color:#fff; border-color:#111; }
.fd-flow-btn { flex:1; font-size:10px; padding:3px 5px; white-space:nowrap; border:0.5px solid #ccc; border-radius:5px; background:#fff; color:#666; cursor:pointer; line-height:1.3; }
.fd-flow-btn:hover { background:#f5f5f5; }
.fd-flow-active { background:#6c3de8 !important; color:#fff !important; border-color:#6c3de8 !important; }