/* Styles for displaying loaders as scoped containers or viewport-centered page spinners. */
.app-loader {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 60;
    background: rgba(8, 21, 39, 0.45);
    backdrop-filter: blur(1.5px);
}
.app-loader--scoped {
    position: absolute;
    border-radius: inherit;
}
.app-loader.active {
    display: flex;
}

.app-loader-badge {
    position: relative;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
}
.app-loader-ring {
    position: absolute;
    inset: 0;
    border: 3px solid rgba(169, 189, 212, 0.16);
    border-top-color: var(--accent, #ffb054);
    border-radius: 50%;
    animation: lc-spin 0.8s linear infinite;
}
.app-loader-icon {
    font-size: 22px;
    line-height: 1;
    color: var(--accent, #ffb054);
    animation: lc-icon-pop 0.35s var(--lc-ease, ease);
}

@keyframes lc-spin { to { transform: rotate(360deg); } }
@keyframes lc-icon-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .app-loader-ring { animation-duration: 1.6s; }
    .app-loader-icon { animation: none; }
}