body.app-page-loading {
    overflow: hidden;
}

html[data-page-loader-skip-once="true"] body.app-page-loading {
    overflow: auto;
}

.app-page-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: var(--ui-text, #111827);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

body.app-page-loading .app-page-loader {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

html[data-page-loader-skip-once="true"] .app-page-loader,
.app-page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-page-loader__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ui-bg, #f5f7fb) 92%, transparent);
}

.app-page-loader__panel {
    position: relative;
    z-index: 2;
    width: min(360px, 100%);
    padding: 1rem;
    border: 1px solid var(--ui-border, #e5e7eb);
    border-radius: var(--ui-radius, 8px);
    background: var(--ui-surface, #fff);
    box-shadow: var(--ui-shadow, 0 1px 2px rgba(15, 23, 42, 0.04));
}

.app-page-loader__panel::before {
    display: none;
}

.app-page-loader__crest {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 0.75rem;
}

.app-page-loader__orbit,
.app-page-loader__orbit::after {
    display: none;
}

.app-page-loader__seal {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid color-mix(in srgb, var(--bs-primary) 22%, var(--ui-border, #e5e7eb));
    border-radius: var(--ui-radius-sm, 6px);
    background: color-mix(in srgb, var(--bs-primary) 8%, var(--ui-surface, #fff));
    color: var(--bs-primary);
}

.app-page-loader__monogram {
    position: relative;
    z-index: 2;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0;
}

.app-page-loader__copy {
    min-width: 0;
}

.app-page-loader__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--bs-primary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.app-page-loader__eyebrow::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.app-page-loader__title {
    margin-top: 0.18rem;
    color: var(--ui-heading, #0f172a);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}

.app-page-loader__text {
    margin-top: 0.2rem;
    color: var(--ui-muted, #6b7280);
    font-size: 0.8rem;
    line-height: 1.45;
}

.app-page-loader__progress {
    margin-top: 0.9rem;
}

.app-page-loader__progress-track,
.app-page-loader__progress-bar {
    height: 4px;
    border-radius: 999px;
}

.app-page-loader__progress-track {
    overflow: hidden;
    background: var(--ui-surface-muted, #f8fafc);
    border: 1px solid var(--ui-border, #e5e7eb);
}

.app-page-loader__progress-bar {
    width: 38%;
    background: var(--bs-primary);
    animation: appPageLoaderProgress 1.2s ease-in-out infinite;
}

@keyframes appPageLoaderProgress {
    0% {
        transform: translateX(-110%);
    }

    100% {
        transform: translateX(300%);
    }
}

[data-bs-theme="dark"] .app-page-loader__backdrop {
    background: color-mix(in srgb, var(--ui-bg, #0b1120) 92%, transparent);
}

[data-bs-theme="dark"] .app-page-loader__panel {
    background: var(--ui-surface, #111827);
    border-color: var(--ui-border, #273244);
    box-shadow: none;
}

[data-bs-theme="dark"] .app-page-loader__seal,
[data-bs-theme="dark"] .app-page-loader__progress-track {
    background: var(--ui-surface-muted, #0f172a);
    border-color: var(--ui-border, #273244);
}