.mermaid-diagram { --mermaid-viewport-height: min(68vh, 640px); --mermaid-fit-height: min(58vh, 540px); position: relative; max-width: 900px; margin: 16px auto; overflow: hidden; border: 1px solid #dde5f2; border-radius: var(--radius, 14px); background: #fff; box-shadow: 0 13px 32px rgba(20, 40, 80, .1), inset 0 1px rgba(255, 255, 255, .6); }
.mermaid-diagram figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 10px; min-height: 35px; padding: 5px 7px 5px 11px; border-bottom: 1px solid #e4eaf5; background: #f6f8fd; }
.mermaid-diagram-label { display: inline-flex; align-items: center; gap: 7px; color: #48597a; font: 800 10px/1 var(--font-mono, monospace); letter-spacing: .1em; text-transform: uppercase; }
.mermaid-diagram-label i { width: 7px; height: 7px; border-radius: 50%; background: #3b6fd6; box-shadow: 0 0 10px rgba(59, 111, 214, .5); }
.mermaid-diagram .code-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
.mermaid-diagram .icon-button { border-color: #ccd8ee; background: #fff; color: #48597a; }
.mermaid-diagram .icon-button:hover { border-color: #3b6fd6; color: #1c3a72; }
.mermaid-zoom-label { min-width: 34px; color: #64748b; font: 700 10px/1 var(--font-mono, monospace); text-align: center; }
.mermaid-render { position: relative; display: block; min-height: 180px; max-height: var(--mermaid-viewport-height); padding: clamp(16px, 4vw, 32px); overflow: auto; background: #fff; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
.mermaid-render[data-mermaid-pending]::before { display: block; width: min(520px, 80%); height: 92px; margin: 12px auto; content: ''; border-radius: 12px; background: linear-gradient(90deg, #eef3fb 25%, #f8faff 45%, #eef3fb 65%); background-size: 220% 100%; animation: mermaid-skeleton 1.1s linear infinite; }
.mermaid-render[data-mermaid-pending] .mermaid-render-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.mermaid-canvas { position: relative; display: block; margin-inline: auto; transform-origin: top left; }
.mermaid-canvas svg { display: block; width: 100%; height: 100%; max-width: none; max-height: none; }
.mermaid-render.is-pannable { cursor: grab; }
.mermaid-render.is-dragging { cursor: grabbing; user-select: none; }
.mermaid-render-error { margin: 0; padding: 14px 16px; color: #9a3b3b; font-size: 12.5px; background: #fdf1f1; border-top: 1px solid #f3d7d7; }
.mermaid-render-error .mermaid-retry { min-height: 44px; margin-left: 6px; padding: 0 16px; color: #9a3b3b; font: inherit; font-weight: 700; border: 1px solid #e3b4b4; border-radius: 8px; background: #fff; cursor: pointer; }
.mermaid-render-error .mermaid-retry:hover { background: #fbe7e7; }
.mermaid-render-error .mermaid-retry:focus-visible { outline: 2px solid #9a3b3b; outline-offset: 2px; }
.mermaid-diagram:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) { --mermaid-viewport-height: calc(100dvh - 46px); --mermaid-fit-height: calc(100dvh - 118px); position: fixed; z-index: 600; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; margin: 0; border: 0; border-radius: 0; background: #fff !important; overflow: hidden; }
.mermaid-diagram:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .mermaid-render { min-height: var(--mermaid-viewport-height); max-height: var(--mermaid-viewport-height); padding: clamp(18px, 4vw, 56px); }
.mermaid-diagram:is(:fullscreen, :-webkit-full-screen, .fullscreen-active) .fullscreen-toggle::before { content: '\00D7'; font-size: 17px; line-height: 1; }
@keyframes mermaid-skeleton { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .mermaid-render[data-mermaid-pending]::before { animation: none; } }
@media (max-width: 640px) {
    .mermaid-diagram { width: 100%; max-width: 100%; margin-inline: 0; border-radius: 9px; }
    .mermaid-diagram figcaption { padding: 5px 7px; }
    .mermaid-render { min-height: 150px; padding: 14px 10px; }
    .mermaid-diagram .icon-button { padding-inline: 7px; font-size: 10px; }
}