*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#f4f4f6;--card:#fff;--line:#e6e8ec;--text:#2f3743;--muted:#7a8592;--soft:#98a0aa;--shadow:0 2px 6px rgba(0,0,0,.03),0 10px 25px rgba(0,0,0,.04);--blue:#68b5d4;--red:#d86d6d;--neutral:#bfc7d1}
body{background:#f4f4f6;font-family:'Inter',sans-serif;color:var(--text);padding:16px}.card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.editor-shell{max-width:1680px;margin:auto}.topbar{height:74px;padding:12px 16px;margin-bottom:14px;display:grid;grid-template-columns:320px 1fr 250px;align-items:center;gap:14px}.brand-block{display:flex;align-items:center;gap:12px}.app-dot{width:14px;height:14px;border-radius:50%;background:#5caed1;box-shadow:0 0 0 6px rgba(92,174,209,.12)}.eyebrow,.small-label{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--soft);text-transform:uppercase}.brand-title{font-size:15px;font-weight:800}.topbar-center,.topbar-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.topbar-actions{justify-content:flex-end}.toolbar-chip,.shape-choice,.line-choice,.rail-btn{border:1px solid #dde4eb;background:#f7f9fc;color:#465364;border-radius:14px;padding:10px 14px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.toolbar-chip.active,.shape-choice.active,.line-choice.active,.rail-btn.active{background:#e8f6fc;border-color:#c7e7f4;color:#2c7aa0}.status-pill,.meta-pill{display:inline-flex;border-radius:999px;font-weight:700}.status-pill{padding:8px 12px;font-size:12px;background:#f7f8fb;border:1px solid var(--line);color:#4a5565}.status-pill.live{background:#e8f6fc;color:#2c7aa0;border-color:#d3ebf5}.editor-layout{display:grid;grid-template-columns:64px minmax(0,1fr) 300px;gap:14px;align-items:start}.left-rail{padding:10px;display:flex;flex-direction:column;gap:10px;position:sticky;top:16px}.rail-btn{padding:12px 0}.canvas-stage{padding:12px;min-height:calc(100vh - 120px);display:flex;flex-direction:column}.canvas-top-strip{padding:6px 8px 14px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.canvas-top-strip h1{font-size:24px;line-height:1.2;margin-top:6px}.canvas-meta{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.meta-pill{padding:8px 12px;font-size:12px;background:#f7f8fb;border:1px solid #e8edf2;color:#617083}.canvas-wrap{position:relative;flex:1;min-height:760px;border-radius:18px;background:#fbfbfd;border:1px solid #edf0f4;overflow:hidden}.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(15,23,42,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.04) 1px,transparent 1px);background-size:24px 24px}.connector-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1}.link{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.link.red{stroke:#d86d6d}.link.active{stroke:#68b5d4}.link.neutral{stroke:#bfc7d1}.link.dashed{stroke-dasharray:8 8}.floating-card{position:absolute;z-index:2}.diagram-card{background:#fff;border:1px solid #e6e8ec;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}.owner-card{left:42px;top:300px;width:210px;padding:26px}.owner-card h2{font-size:34px;margin:8px 0}.owner-card h3{font-size:18px;margin-bottom:12px}.owner-card p{color:#7a8592;line-height:1.6;font-size:14px}.dns-card{width:265px}.danger{left:515px;top:88px}.success{left:515px;top:478px}.card-header{padding:14px 16px;display:flex;justify-content:space-between;gap:12px;align-items:center;font-weight:800}.danger .card-header{background:#f8e6e6}.success .card-header{background:#e7f5fb}.teal-node .card-header{background:#e6f8f6}.purple-node .card-header{background:#f1ebfe}.orange-node .card-header{background:#fff1e4}.green-node .card-header{background:#e9f8ef}.badge{padding:6px 12px;border-radius:30px;font-size:11px;font-weight:800;color:#fff;white-space:nowrap}.badge-red{background:#d66c6c}.badge-blue{background:#5caed1}.card-body{padding:18px}.note{font-size:13px;color:#7b8593;margin-bottom:18px}.item{display:flex;gap:14px;margin-bottom:18px}.item:last-child{margin-bottom:0}.icon{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800;flex-shrink:0}.fail{background:#d86d6d}.ok{background:#46b37b}.title{font-size:15px;font-weight:800;margin-bottom:6px}.desc{font-size:13px;color:#7a8592;line-height:1.5}.page-card{width:250px}.danger-page{right:44px;top:88px;background:linear-gradient(135deg,#fff4f4,#fce9e9)}.success-page{right:44px;top:478px;background:linear-gradient(135deg,#fff7eb,#fff2d9)}.browser{background:#fafafa;border-bottom:1px solid #ececec;padding:10px 14px;display:flex;align-items:center;gap:8px}.browser span{width:10px;height:10px;border-radius:50%;background:#d4d4d4}.url{margin-left:8px;color:#9aa3ae;font-size:12px}.page-content{padding:32px 22px;text-align:center}.big-icon{width:58px;height:58px;margin:auto auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:800}.fail-circle{background:#d86d6d}.badge-orange{background:#d39b47}.page-content h3{font-size:24px;margin-bottom:10px}.page-content p{font-size:14px;line-height:1.7;color:#7a8592}.canvas-hud{position:absolute;z-index:3;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid #e6ebf0;box-shadow:var(--shadow)}.zoom-hud{left:24px;bottom:24px;padding:8px;border-radius:14px;display:flex;align-items:center;gap:8px}.zoom-hud button{width:32px;height:32px;border:none;border-radius:10px;background:#f4f7fb;font:inherit;font-weight:800}.zoom-hud span{font-size:13px;font-weight:800;color:#5a6778;padding:0 4px}.pan-hint{right:24px;bottom:24px;padding:10px 14px;border-radius:14px;font-size:12px;font-weight:800;color:#68788a}.right-panel{padding:18px;position:sticky;top:16px;max-height:calc(100vh - 106px);overflow:auto}.right-panel h2{font-size:24px;margin:8px 0}.muted{font-size:13px;line-height:1.65;color:#7a8592}.control-group.compact{margin-top:16px;padding-top:16px;border-top:1px solid #eef1f5}.group-title{font-size:13px;font-weight:800;margin-bottom:12px;color:#465364}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.swatch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.swatch{width:100%;height:42px;border:none;border-radius:14px;background:var(--swatch);cursor:pointer;position:relative}.swatch.active::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:16px}.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:14px}.tiny{font-size:12px}.switch{position:relative;width:56px;height:32px;display:inline-block}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;inset:0;background:#d4dbe3;border-radius:999px}.slider::before{content:'';position:absolute;width:24px;height:24px;left:4px;top:4px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.16)}.switch input:checked + .slider{background:#5caed1}.switch input:checked + .slider::before{transform:translateX(24px)}.rounded-rectangle{border-radius:16px}.rectangle{border-radius:4px}.capsule{border-radius:999px}.circle{border-radius:50%;width:245px;height:245px}.ellipse{border-radius:50%;width:285px;height:205px}.diamond{width:235px;height:235px;transform:rotate(45deg);padding:0}.diamond .card-header,.diamond .card-body{transform:rotate(-45deg)}.teal-node{border-color:#bce9e3}.purple-node{border-color:#d8c9fb}.orange-node{border-color:#f7d3aa}.green-node{border-color:#bdecc9}.teal-node .fail{background:#5cc8be}.purple-node .fail{background:#a78bfa}.orange-node .fail{background:#d39b47}.green-node .fail{background:#46b37b}@media(max-width:1280px){.topbar{grid-template-columns:1fr;height:auto}.topbar-center,.topbar-actions{justify-content:flex-start}.editor-layout{grid-template-columns:1fr}.left-rail{flex-direction:row;position:static;overflow:auto}.right-panel{position:static;max-height:none}}@media(max-width:900px){body{padding:10px}.canvas-stage{min-height:auto}.canvas-top-strip{flex-direction:column}.canvas-wrap{min-height:auto;padding:20px;display:grid;gap:18px}.connector-layer,.grid-bg{display:none}.floating-card{position:static;width:100%}.diamond{transform:none}.diamond .card-header,.diamond .card-body{transform:none}}

/* 260624.1848 add/edit + responsive polish */
.selected-box{border:1px dashed #cbd5e1;background:#f8fafc;border-radius:14px;padding:12px 14px;font-size:13px;font-weight:700;color:#536173;line-height:1.5}.form-stack{display:grid;gap:12px}.form-stack label{display:grid;gap:7px;font-size:12px;font-weight:800;color:#536173}.form-stack input,.form-stack textarea{width:100%;border:1px solid #dde4eb;border-radius:12px;background:#fff;padding:10px 12px;font:inherit;font-size:13px;color:#2f3743;outline:none}.form-stack input:focus,.form-stack textarea:focus{border-color:#8bc8df;box-shadow:0 0 0 4px rgba(92,174,209,.12)}.primary-btn{border:none;border-radius:14px;background:#5caed1;color:#fff;font:inherit;font-size:13px;font-weight:800;padding:12px 14px;cursor:pointer;box-shadow:0 8px 18px rgba(92,174,209,.22)}.primary-btn:hover{filter:brightness(.97)}.diagram-card.is-selected{outline:3px solid rgba(92,174,209,.28);outline-offset:4px}.dynamic-node{left:515px;top:300px}.dynamic-node:nth-of-type(6n){left:820px;top:330px}.node-layer-empty{position:absolute;left:24px;top:24px;background:#fff;border:1px dashed #cbd5e1;border-radius:16px;padding:16px;color:#64748b;font-size:13px}.topbar{position:sticky;top:8px;z-index:20}.right-panel{scrollbar-width:thin}.right-panel::-webkit-scrollbar{width:8px}.right-panel::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}@media(max-width:1100px){body{padding:10px}.topbar{position:static;grid-template-columns:1fr;height:auto}.brand-block{align-items:flex-start}.topbar-center{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.topbar-actions{justify-content:flex-start}.editor-layout{grid-template-columns:1fr}.left-rail{position:static;display:flex;flex-direction:row;overflow-x:auto}.rail-btn{min-width:48px}.canvas-stage{min-height:auto}.canvas-wrap{min-height:720px}.right-panel{position:static;max-height:none}.choice-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.swatch-grid{grid-template-columns:repeat(6,1fr)}}@media(max-width:760px){.canvas-wrap{min-height:auto;padding:18px;display:grid;gap:16px}.connector-layer,.grid-bg,.canvas-hud{display:none}#nodeLayer{display:grid;gap:16px}.floating-card{position:static;width:100%!important;transform:none!important}.owner-card,.dns-card,.page-card{width:100%;left:auto;right:auto;top:auto}.circle,.ellipse,.diamond{width:100%;height:auto}.diamond .card-header,.diamond .card-body{transform:none}.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.swatch-grid{grid-template-columns:repeat(3,1fr)}.canvas-top-strip{flex-direction:column}.canvas-top-strip h1{font-size:20px}.topbar-center{width:100%}.toolbar-chip{white-space:nowrap}.right-panel h2{font-size:20px}}

/* 260624.1908 fixed editor canvas responsive behavior
   Editor canvas must keep the same layout on all viewport sizes.
   Small screens scroll/pan the canvas instead of reflowing nodes. */
.canvas-stage{overflow:auto;overscroll-behavior:contain}.canvas-wrap{width:1280px;min-width:1280px;height:760px;min-height:760px}.canvas-stage::-webkit-scrollbar{height:10px;width:10px}.canvas-stage::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}.canvas-stage::-webkit-scrollbar-track{background:#f1f5f9;border-radius:999px}@media(max-width:1100px){.canvas-stage{overflow:auto;min-height:auto}.canvas-wrap{width:1280px!important;min-width:1280px!important;height:760px!important;min-height:760px!important;padding:0!important;display:block!important}.connector-layer,.grid-bg,.canvas-hud{display:block!important}.floating-card{position:absolute!important;transform:none}.owner-card{left:42px!important;top:300px!important;width:210px!important}.dns-card{width:265px!important}.danger{left:515px!important;top:88px!important}.success{left:515px!important;top:478px!important}.page-card{width:250px!important}.danger-page{right:44px!important;top:88px!important}.success-page{right:44px!important;top:478px!important}.dynamic-node{left:515px!important;top:300px!important}.circle{width:245px!important;height:245px!important}.ellipse{width:285px!important;height:205px!important}.diamond{width:235px!important;height:235px!important;transform:rotate(45deg)!important}.diamond .card-header,.diamond .card-body{transform:rotate(-45deg)!important}}@media(max-width:760px){.canvas-stage{overflow:auto;-webkit-overflow-scrolling:touch}.canvas-wrap{width:1280px!important;min-width:1280px!important;height:760px!important;min-height:760px!important;padding:0!important;display:block!important}#nodeLayer{display:block!important}.connector-layer,.grid-bg,.canvas-hud{display:block!important}.floating-card{position:absolute!important}.canvas-top-strip h1{font-size:20px}.canvas-top-strip{min-width:1280px}.pan-hint{right:24px!important;bottom:24px!important}.zoom-hud{left:24px!important;bottom:24px!important}}

/* 260624.2205 complete canvas tools */
.secondary-btn,.danger-btn{border:1px solid #dde4eb;border-radius:14px;background:#f7f9fc;color:#465364;font:inherit;font-size:13px;font-weight:800;padding:12px 14px;cursor:pointer}.secondary-btn:hover{background:#edf6fb;border-color:#c7e7f4;color:#2c7aa0}.danger-btn{background:#fff1f2;border-color:#fecdd3;color:#be123c}.danger-btn:hover{background:#ffe4e6}.danger-btn.ghost{background:#fff;border-style:dashed}.mini-help{font-size:12px;line-height:1.55;color:#7a8592;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px}.diagram-card{touch-action:none;user-select:none}.diagram-card.is-dragging{cursor:grabbing;opacity:.92;box-shadow:0 18px 40px rgba(15,23,42,.16);z-index:8}.diagram-card:not(.is-dragging){cursor:grab}.link{cursor:pointer;pointer-events:stroke}.link.is-selected-connector{stroke:#f59e0b!important;stroke-width:4;filter:drop-shadow(0 2px 5px rgba(245,158,11,.22))}.toolbar-chip#connectModeBtn.active{background:#fff7ed;border-color:#fed7aa;color:#c2410c}.selected-box#storageBox{background:#f7fee7;border-color:#d9f99d;color:#3f6212}@media(max-width:760px){.secondary-btn,.danger-btn,.primary-btn{min-height:44px}.mini-help{font-size:11px}}

/* 260624.2228 edge arrows + undo/redo */
.secondary-btn:disabled,.danger-btn:disabled,.primary-btn:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.2)}.link{transition:stroke-width .15s ease,filter .15s ease}.connector-layer{overflow:visible}

/* 260624.2258 backend save/load + zoom + pan + multi-select + connector labels */
#nodeLayer,.grid-bg,.connector-layer{transform-origin:0 0}.canvas-wrap.is-pan-mode{cursor:grab}.canvas-wrap.is-panning{cursor:grabbing}.toolbar-chip#panModeBtn.active{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}.diagram-card.is-multi-selected{outline-color:rgba(168,85,247,.34)}.connector-label{font:800 12px Inter,sans-serif;fill:#4b5563;paint-order:stroke;stroke:#fff;stroke-width:5;stroke-linejoin:round;pointer-events:all;cursor:pointer}.zoom-hud button#zoomResetBtn{width:auto;padding:0 9px;font-size:11px}.selected-box#storageBox{word-break:break-word}.canvas-stage{scroll-behavior:smooth}

/* 260624.2305 stable canvas interaction patch
   Keep zoomed render layers as fixed 1280x760 absolute layers so node hit-testing,
   absolute positioning, connector geometry, drag, and select remain stable. */
.canvas-wrap{position:relative;overflow:hidden}.grid-bg{left:0!important;top:0!important;right:auto!important;bottom:auto!important;width:1280px!important;height:760px!important;z-index:0;pointer-events:none}#nodeLayer{position:absolute!important;left:0!important;top:0!important;width:1280px!important;height:760px!important;z-index:2;transform-origin:0 0;pointer-events:none}.floating-card{pointer-events:auto}.connector-layer{position:absolute!important;left:0!important;top:0!important;width:1280px!important;height:760px!important;z-index:1;transform-origin:0 0;overflow:visible}.canvas-hud{pointer-events:auto}.link,.connector-label{pointer-events:all}.diagram-card{will-change:left,top}.canvas-wrap.is-pan-mode #nodeLayer,.canvas-wrap.is-pan-mode .floating-card{pointer-events:none}.canvas-wrap.is-pan-mode .connector-layer{pointer-events:none}

/* 260624.2318 fixed zoom + new/clear canvas */
.canvas-wrap{width:1280px!important;min-width:1280px!important;height:760px!important;min-height:760px!important}.zoom-hud{gap:6px}.node-layer-empty{z-index:4}

/* 260624.2335 dynamic edit fields */
.node-edit-section {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #eef1f5;
}
.node-edit-section.active {
  display: block;
}
.node-edit-section label { display: grid; gap: 7px; font-size: 12px; font-weight: 800; color: #536173; margin-bottom: 12px; }
.node-edit-section input, .node-edit-section textarea { width: 100%; border: 1px solid #dde4eb; border-radius: 12px; background: #fff; padding: 10px 12px; font: inherit; font-size: 13px; color: #2f3743; outline: none; }
.node-edit-section input:focus, .node-edit-section textarea:focus { border-color: #8bc8df; box-shadow: 0 0 0 4px rgba(92,174,209,.12); }
.items-editor { margin-top: 12px; padding-left: 10px; border-left: 2px solid #e6ebf0; }
.item-row { display: flex; gap: 10px; margin-bottom: 10px; }
.item-row .item-controls { display: flex; gap: 6px; margin-left: auto; }
.item-row input, .item-row textarea { flex-grow: 1; }
.item-row .remove-item-btn { background: #f7f9fc; border: none; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 14px; color: #d86d6d; }
.add-item-btn { margin-top: 10px; font-size: 13px; font-weight: 800; color: #5caed1; cursor: pointer; }
.dynamic-edit-fields{display:grid;gap:12px}.edit-subgroup{display:grid;gap:10px;border:1px solid #eef1f5;border-radius:14px;padding:10px;background:#fbfcfe}.edit-subgroup .mini-help{background:#fff}
.form-stack select{width:100%;border:1px solid #dde4eb;border-radius:12px;background:#fff;padding:10px 12px;font:inherit;font-size:13px;color:#2f3743;outline:none}.form-stack select:focus{border-color:#8bc8df;box-shadow:0 0 0 4px rgba(92,174,209,.12)}