.diagram-wrapper{margin:2rem 0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--theme);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,6%);transition:all .3s ease}.diagram-wrapper:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,5%)}.diagram-controls{display:flex;justify-content:center;gap:.5rem;padding:1rem;background:var(--code-bg);border-bottom:1px solid var(--border);flex-wrap:wrap}.diagram-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--primary);color:var(--primary-text,white);border:none;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.diagram-btn:hover{background:var(--primary-hover,#3b82f6);transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.2)}.mermaid{text-align:center;margin:2rem auto;padding:2rem;background:var(--entry,#ffffff);border:1px solid var(--border,#e1e5e9);border-radius:12px;max-width:100%;overflow:visible;box-shadow:0 2px 4px rgba(0,0,0,.1);position:relative}.mermaid:not([data-processed]){min-height:200px;display:flex;align-items:center;justify-content:center;background:linear-gradient(90deg,var(--code-bg,#f8f9fa) 25%,rgba(255,255,255,.8) 50%,var(--code-bg,#f8f9fa) 75%);background-size:200% 100%;animation:shimmer 2s infinite}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.mermaid svg{width:100% !important;height:auto !important;max-width:100% !important;display:block !important;margin:0 auto !important;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif !important}.mermaid style,.mermaid svg style{display:none !important}.mermaid .node rect,.mermaid .node circle,.mermaid .node ellipse,.mermaid .node polygon{fill:#e3f2fd !important;stroke:#1976d2 !important;stroke-width:2px !important}.mermaid .nodeLabel,.mermaid .node text,.mermaid text{fill:#1a1a1a !important;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif !important;font-size:14px !important;font-weight:500 !important;text-anchor:middle !important;dominant-baseline:middle !important}.mermaid .edgePath path{stroke:#424242 !important;stroke-width:2px !important;fill:none !important}.mermaid .arrowheadPath{fill:#424242 !important;stroke:#424242 !important}.mermaid .node:nth-child(1) rect,.mermaid .node:nth-child(1) circle,.mermaid .node:nth-child(1) ellipse{fill:#e3f2fd !important;stroke:#1976d2 !important}.mermaid .node:nth-child(2) rect,.mermaid .node:nth-child(2) circle,.mermaid .node:nth-child(2) ellipse{fill:#e8f5e8 !important;stroke:#2e7d32 !important}.mermaid .node:nth-child(3) rect,.mermaid .node:nth-child(3) circle,.mermaid .node:nth-child(3) ellipse{fill:#fff3e0 !important;stroke:#f57c00 !important}.mermaid .node:nth-child(4) rect,.mermaid .node:nth-child(4) circle,.mermaid .node:nth-child(4) ellipse{fill:#fce4ec !important;stroke:#c2185b !important}.mermaid .node:nth-child(5) rect,.mermaid .node:nth-child(5) circle,.mermaid .node:nth-child(5) ellipse{fill:#f3e5f5 !important;stroke:#7b1fa2 !important}[data-theme=dark] .diagram-wrapper,.dark .diagram-wrapper{border-color:var(--border);background:var(--theme)}[data-theme=dark] .diagram-controls,.dark .diagram-controls{background:var(--code-bg);border-color:var(--border)}[data-theme=dark] .mermaid,.dark .mermaid{background:var(--entry,#1a1a1a);border-color:var(--border,#404040)}[data-theme=dark] .mermaid:not([data-processed]),.dark .mermaid:not([data-processed]){background:linear-gradient(90deg,var(--code-bg,#161b22) 25%,rgba(255,255,255,.1) 50%,var(--code-bg,#161b22) 75%)}[data-theme=dark] .mermaid .node rect,[data-theme=dark] .mermaid .node circle,[data-theme=dark] .mermaid .node ellipse,[data-theme=dark] .mermaid .node polygon,.dark .mermaid .node rect,.dark .mermaid .node circle,.dark .mermaid .node ellipse,.dark .mermaid .node polygon{fill:#263238 !important;stroke:#00bcd4 !important}[data-theme=dark] .mermaid .nodeLabel,[data-theme=dark] .mermaid .node text,[data-theme=dark] .mermaid text,.dark .mermaid .nodeLabel,.dark .mermaid .node text,.dark .mermaid text{fill:#fff !important}[data-theme=dark] .mermaid .edgePath path,[data-theme=dark] .mermaid .arrowheadPath,.dark .mermaid .edgePath path,.dark .mermaid .arrowheadPath{stroke:#fff !important;fill:#fff !important}@media(max-width:768px){.diagram-wrapper{margin:1rem -1rem;border-radius:0;border-left:none;border-right:none}.diagram-controls{padding:.8rem;gap:.3rem}.diagram-btn{padding:.4rem .8rem;font-size:.8rem}.mermaid{margin:2rem -1rem;padding:1rem;border-radius:0;border-left:none;border-right:none}.mermaid .nodeLabel,.mermaid .node text,.mermaid text{font-size:12px !important}.mermaid .edgePath path{stroke-width:2px !important}}@media(max-width:480px){.diagram-controls{flex-direction:column;align-items:stretch}.diagram-btn{justify-content:center;width:100%}.mermaid .nodeLabel,.mermaid .node text,.mermaid text{font-size:11px !important}}@media print{.diagram-controls{display:none}.diagram-wrapper,.mermaid{box-shadow:none;border:1px solid #000;break-inside:avoid;page-break-inside:avoid}.mermaid .node rect,.mermaid .node circle,.mermaid .node ellipse,.mermaid .node polygon{fill:#fff !important;stroke:#000 !important;stroke-width:2px !important}.mermaid .nodeLabel,.mermaid .node text,.mermaid text{fill:#000 !important}.mermaid .edgePath path,.mermaid .arrowheadPath{stroke:#000 !important;fill:#000 !important}}.diagram-container-inner{position:relative;background:var(--theme);min-height:400px}.diagram-svg{width:100%;height:500px;display:block;cursor:grab;background:0 0}.diagram-svg:active{cursor:grabbing}.diagram-info{position:absolute;top:1rem;right:1rem;background:var(--theme);border:1px solid var(--border);border-radius:8px;padding:1rem;max-width:280px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);z-index:10;animation:fadeIn .3s ease}@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.zoom-indicator{position:absolute;bottom:1rem;left:1rem;background:rgba(0,0,0,.8);color:#fff;padding:.5rem .8rem;border-radius:6px;font-family:var(--font-mono,monospace);font-size:.8rem;font-weight:500;z-index:10;pointer-events:none;user-select:none}.mermaid .node:hover rect,.mermaid .node:hover circle,.mermaid .node:hover ellipse,.mermaid .node:hover polygon{filter:brightness(1) !important;transition:filter .2s ease !important}.diagram-wrapper,.mermaid{animation:slideUp .5s ease-out}@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.diagram-wrapper,.mermaid,.node,.link,.diagram-btn{animation:none !important;transition:none !important}.mermaid:not([data-processed]){animation:none}}