#app-loading-status {
    position: fixed;
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 2147483647;
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100% - 24px);
    padding: 8px 12px;
    border: 1px solid var(--mos-border, #D7E4E8);
    border-radius: 6px;
    background: var(--brand-surface, #FFFFFF);
    color: var(--mos-text, #12263A);
    font: 600 13px/1.4 system-ui, sans-serif;
    letter-spacing: 0;
    box-shadow: 0 2px 12px rgb(0 0 0 / 12%);
    pointer-events: none;
    box-sizing: border-box;
}
#app-loading-status[hidden] { display: none; }
#app-loading-status::before,
.is-app-loading::after {
    content: '';
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    flex-shrink: 0;
    animation: app-loading-spin .75s linear infinite;
}
html[data-app-loading]::after {
    content: '';
    position: fixed;
    inset: 0 0 auto;
    z-index: 2147483647;
    height: 3px;
    background: var(--brand-secondary, #21B6B7);
    transform-origin: left;
    animation: app-loading-progress 1.4s ease-in-out infinite;
    pointer-events: none;
}
.is-app-loading {
    position: relative !important;
    cursor: progress !important;
    color: transparent !important;
}
.is-app-loading > * { opacity: 0 !important; }
input.is-app-loading { color: var(--app-loading-ink, inherit) !important; opacity: .65; }
.is-app-loading::after {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    color: var(--app-loading-ink, var(--mos-text, #12263A));
}
@keyframes app-loading-spin { to { transform: rotate(360deg); } }
@keyframes app-loading-progress {
    0%, 100% { transform: scaleX(.25); }
    50% { transform: scaleX(.8); }
}
@media (prefers-reduced-motion: reduce) {
    #app-loading-status::before, .is-app-loading::after, html[data-app-loading]::after { animation: none; }
}