.viewer-wrap[aria-busy="true"] #preview { opacity: 0; pointer-events: none; }
#preview { transition: opacity .25s ease; }
.viewer-loading { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 24px 24px 24px 340px; pointer-events: none; background: #10172230; }
.viewer-loading-card { width: min(300px, 100%); text-align: center; padding: 30px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-panel); color: var(--text-primary); box-shadow: 0 16px 48px #0002; }
.viewer-loading-card strong { display: block; font-size: 15px; font-weight: 600; }
.viewer-loading-card p { margin: 9px 0 0; font-size: 12px; line-height: 1.7; color: var(--text-secondary); }
.viewer-loading-orbit { position: relative; display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto 22px; color: var(--accent); }
.viewer-loading-orbit span { font-size: 28px; }
.viewer-loading-orbit::before { content: ''; position: absolute; inset: 0; border: 2px solid var(--line); border-top-color: var(--accent); border-right-color: var(--accent); border-radius: 50%; animation: viewer-loading-spin 1.2s linear infinite; }
.viewer-loading[data-state="error"] .viewer-loading-orbit::before { animation: none; border-color: var(--line); }
#retryViewerLoad { pointer-events: auto; margin-top: 18px; padding: 9px 18px; border-radius: 8px; }
@keyframes viewer-loading-spin { to { transform: rotate(360deg); } }
@media (max-width: 700px) { .viewer-loading { padding: 130px 20px 20px; } .viewer-loading-card { padding: 20px; } .viewer-loading-orbit { margin-bottom: 14px; } }
@media (prefers-reduced-motion: reduce) { .viewer-loading-orbit::before { animation: none; } #preview { transition: none; } }