.nv-topic-loading {
    position: fixed;
    inset: 0;
    z-index: 980;
    display: grid;
    place-items: center;
    padding: 24px;
    background: color-mix(in srgb, var(--nv-bg, #f4f8f8) 94%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.nv-topic-loading[hidden] { display: none; }

.nv-topic-loading__panel {
    width: min(440px, 100%);
    padding: 32px;
    border: 1px solid color-mix(in srgb, var(--nv-accent, #0aa39a) 28%, transparent);
    border-radius: 24px;
    background: color-mix(in srgb, var(--nv-surface, #fff) 96%, transparent);
    box-shadow: 0 24px 70px rgba(18, 44, 50, .12);
    text-align: center;
}

.nv-topic-loading__mark {
    width: 42px;
    height: 42px;
    margin: 0 auto 18px;
    border: 3px solid color-mix(in srgb, var(--nv-accent, #0aa39a) 20%, transparent);
    border-top-color: var(--nv-accent, #0aa39a);
    border-radius: 50%;
    animation: nv-topic-loading-spin .8s linear infinite;
}

.nv-topic-loading__title {
    margin: 0;
    color: var(--nv-text, #122a30);
    font-size: 20px;
    font-weight: 650;
}

.nv-topic-loading__message {
    margin: 10px 0 0;
    color: var(--nv-muted, #6f8388);
    font-size: 14px;
    line-height: 1.7;
}

.nv-topic-loading__retry {
    margin-top: 18px;
    padding: 10px 18px;
    border: 1px solid var(--nv-accent, #0aa39a);
    border-radius: 999px;
    background: transparent;
    color: var(--nv-accent, #0aa39a);
    font: inherit;
    cursor: pointer;
}

@keyframes nv-topic-loading-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .nv-topic-loading__mark { animation-duration: 1.8s; }
}