.guidance-mermaid-viewer-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0.75rem 0; }
.guidance-mermaid-viewer-tool { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2rem; padding: 0.35rem 0.6rem; border: 1px solid var(--border-mid); border-radius: 0.5rem; background: var(--bg-elevated); color: var(--text-secondary); font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.guidance-mermaid-viewer-tool:hover, .guidance-mermaid-viewer-tool:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.guidance-mermaid-viewer-tool:disabled { opacity: 0.45; cursor: not-allowed; }
.guidance-mermaid-viewer-zoom-label { min-width: 3.25rem; text-align: center; color: var(--text-muted); font-size: 0.72rem; font-weight: 800; }
.guidance-mermaid-viewer-root .mermaid-container { overflow: auto; }
.guidance-mermaid-viewer-root .mermaid-container svg { transform-origin: top center; transition: transform 0.16s ease; }
.guidance-mermaid-viewer-overlay { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(2, 6, 23, 0.82); backdrop-filter: blur(10px); }
.guidance-mermaid-viewer-overlay.active { display: flex; }
.guidance-mermaid-viewer-dialog { width: min(96vw, 1200px); height: min(92vh, 860px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 1rem; background: var(--bg-elevated); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55); }
.guidance-mermaid-viewer-dialog-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-mid); }
.guidance-mermaid-viewer-dialog-body { flex: 1; overflow: auto; padding: 1rem; background: var(--bg-surface); text-align: center; }
.guidance-mermaid-viewer-dialog-body svg { max-width: none; height: auto; transform-origin: top center; transition: transform 0.16s ease; }
@media (max-width: 520px) { .guidance-mermaid-viewer-tool span { display: none; } .guidance-mermaid-viewer-tool { min-width: 2.2rem; justify-content: center; padding-inline: 0.5rem; } .guidance-mermaid-viewer-dialog { width: 100%; height: 100%; border-radius: 0; } }