:root{--diagram-accent:#1769e0}
.architecture-intro{padding-bottom:2.8rem}.architecture-workspace{padding:0 0 5.5rem}.architecture-toolbar{display:grid;grid-template-columns:minmax(250px,.9fr) minmax(360px,1.25fr) auto;gap:1rem;align-items:end;margin:-1.15rem 0 1rem;padding:1rem;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);position:relative;z-index:2}.architecture-toolbar label{display:block;margin-bottom:.38rem;color:var(--navy);font-size:.73rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.project-search,.project-select{min-width:0;max-width:100%}.project-search input,.project-select select{display:block;width:100%;max-width:100%;min-width:0;min-height:48px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink);font:inherit;padding:.65rem .78rem;outline:none;text-overflow:ellipsis}.project-search input:focus,.project-select select:focus{border-color:var(--diagram-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--diagram-accent) 16%,transparent)}.project-search span{display:block;min-height:1.25rem;margin-top:.3rem;color:var(--muted);font-size:.76rem}.flow-actions{display:flex;gap:.55rem;padding-bottom:1.55rem}.flow-actions .button{white-space:nowrap}.architecture-v2{padding:0;overflow:hidden}.diagram-header{display:flex;justify-content:space-between;gap:2rem;align-items:flex-start;padding:1.5rem;border-bottom:1px solid var(--line);background:linear-gradient(120deg,#fff,color-mix(in srgb,var(--diagram-accent) 8%,#fff))}.diagram-header h2{margin:.15rem 0 .55rem;font-size:clamp(1.45rem,2.6vw,2.15rem);line-height:1.18}.diagram-header p{max-width:760px;margin:0;color:var(--muted)}.diagram-status{display:flex;align-items:center;gap:.55rem;white-space:nowrap;color:var(--muted);font-size:.8rem;font-weight:850}.accent-dot{width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 5px color-mix(in srgb,var(--diagram-accent) 14%,transparent)}.diagram-stage{width:100%;overflow:auto;background:#f6faff;background-image:radial-gradient(rgba(74,126,181,.32) 1px,transparent 1px);background-size:20px 20px}.diagram-stage svg{display:block;width:100%;min-width:820px;min-height:470px;aspect-ratio:1080/560}.diagram-edge path{fill:none;stroke:#9eb5cb;stroke-width:2.25;opacity:.66;transition:stroke .2s,stroke-width .2s,opacity .2s}.diagram-edge text{fill:#667f99;font:700 11px/1 system-ui;paint-order:stroke;stroke:#f6faff;stroke-width:4px;stroke-linejoin:round;text-anchor:middle}.diagram-edge.is-active path{stroke:var(--diagram-accent);stroke-width:4;opacity:1;stroke-dasharray:9 8;animation:edge-flow 1.05s linear infinite}.diagram-edge.is-active text{fill:var(--diagram-accent);font-weight:900}.diagram-node rect{fill:#fff;stroke:#bfd0e2;stroke-width:1.5;filter:drop-shadow(0 7px 9px rgba(18,59,102,.1));transition:stroke .2s,filter .2s}.diagram-node circle{fill:#64748b}.diagram-node text{fill:#102b4e;font:800 13px/1.25 system-ui;pointer-events:none}.diagram-node.node-ui circle{fill:#1769e0}.diagram-node.node-service circle{fill:#087ab8}.diagram-node.node-worker circle{fill:#da6b18}.diagram-node.node-queue circle{fill:#7454d6}.diagram-node.node-data circle{fill:#46627f}.diagram-node.node-external circle{fill:#c44275}.diagram-node.is-active rect{stroke:var(--diagram-accent);stroke-width:3;filter:drop-shadow(0 7px 12px color-mix(in srgb,var(--diagram-accent) 24%,transparent))}.flow-caption{display:grid;grid-template-columns:auto 1fr;gap:1rem}.step-num{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--blue);color:#fff;font-weight:900}.flow-caption h3{margin:0}.architecture-caption{margin:0;padding:1rem 1.4rem;border-radius:0;background:color-mix(in srgb,var(--diagram-accent) 8%,#fff);border-top:1px solid color-mix(in srgb,var(--diagram-accent) 22%,var(--line))}.architecture-caption .step-num{background:var(--diagram-accent)}.architecture-caption p{margin:.3rem 0 0;color:var(--muted)}.diagram-legend{display:flex;flex-wrap:wrap;gap:1rem;padding:.9rem 1.4rem;border-top:1px solid var(--line);background:#fff;color:var(--muted);font-size:.74rem;font-weight:800}.diagram-legend span{display:flex;align-items:center;gap:.4rem}.diagram-legend i{width:9px;height:9px;border-radius:50%}.legend-ui{background:#1769e0}.legend-service{background:#087ab8}.legend-worker{background:#da6b18}.legend-queue{background:#7454d6}.legend-data{background:#46627f}.legend-external{background:#c44275}.architecture-note{margin:1rem .2rem 0;color:var(--muted);font-size:.84rem}@keyframes edge-flow{to{stroke-dashoffset:-34}}
@media(max-width:1100px){.architecture-toolbar{grid-template-columns:minmax(220px,.85fr) minmax(0,1.15fr)}.flow-actions{grid-column:1/-1;justify-content:flex-end;padding-bottom:0}.diagram-stage svg{min-width:780px}}
@media(max-width:700px){.architecture-workspace{padding-bottom:4rem}.architecture-toolbar{grid-template-columns:minmax(0,1fr);margin-top:-.8rem;padding:.85rem}.flow-actions{grid-column:auto;display:grid;grid-template-columns:1fr 1fr}.flow-actions .button{width:100%;padding:.65rem .45rem}.diagram-header{display:block;padding:1.15rem}.diagram-status{margin-top:1rem}.diagram-stage svg{min-width:700px;min-height:390px}.diagram-legend{gap:.65rem}.architecture-caption{grid-template-columns:auto 1fr}.project-search input,.project-select select{font-size:16px}}
@media(max-width:390px){.flow-actions{grid-template-columns:1fr}.diagram-stage svg{min-width:650px}}
@media(prefers-reduced-motion:reduce){.diagram-edge.is-active path{animation:none}}
.architecture-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.project-search,.project-select{width:100%;overflow:hidden}.flow-actions{grid-column:1/-1;justify-content:flex-end;padding-bottom:0}
@media(max-width:700px){.architecture-toolbar{grid-template-columns:minmax(0,1fr)}.flow-actions{grid-column:auto;display:grid;grid-template-columns:1fr 1fr}}
@media(max-width:390px){.flow-actions{grid-template-columns:1fr}}