/* Shared blocking progress surface for authentication and onboarding flows. */
.flow-loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 5, 20, .84);
    backdrop-filter: blur(18px);
}
.flow-loading-overlay.active { display: flex; }
.flow-loading-modal {
    width: min(500px, calc(100vw - 30px));
    padding: 22px 24px 20px;
    border: 1px solid rgba(97, 215, 255, .24);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(25, 31, 72, .98), rgba(9, 14, 39, .98));
    box-shadow: 0 30px 100px rgba(0, 0, 0, .6), inset 0 0 50px rgba(100, 85, 255, .08);
    color: #f5f4ff;
    text-align: left;
}
.flow-loading-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #8e9aba;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .15em;
}
.flow-loading-header b { color: #63dcff; font-size: 10px; }
.flow-loading-reactor {
    position: relative;
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    margin: 22px auto 8px;
}
.flow-loading-orbit {
    position: absolute;
    width: 104px;
    height: 48px;
    border: 1px solid rgba(166, 108, 255, .48);
    border-radius: 50%;
    transform: rotate(-24deg);
    animation: flowOrbit 3.5s linear infinite;
}
.flow-loading-orbit.two {
    width: 74px;
    height: 108px;
    border-color: rgba(99, 220, 255, .34);
    transform: rotate(38deg);
    animation-direction: reverse;
}
.flow-loading-core {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid #63dcff;
    border-radius: 50%;
    background: #121b43;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 0 35px rgba(97, 215, 255, .4), inset 0 0 22px rgba(166, 108, 255, .3);
    animation: flowCore 2.2s ease-in-out infinite;
}
.flow-loading-scan {
    position: absolute;
    z-index: 3;
    width: 76px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #63dcff, transparent);
    box-shadow: 0 0 12px #63dcff;
    animation: flowScan 1.8s ease-in-out infinite;
}
.flow-loading-progress {
    margin-top: 10px;
    color: #d8c8ff;
    font-size: 18px;
    font-weight: 800;
    text-align: center;
}
.flow-loading-step { margin-top: 5px; color: #fff; font-size: 15px; font-weight: 800; text-align: center; }
.flow-loading-message { margin-top: 5px; color: #a3b0cf; font-size: 12px; line-height: 1.45; text-align: center; }
.flow-loading-meta { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 13px; color: #64dfb5; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.flow-loading-dot { width: 6px; height: 6px; border-radius: 50%; background: #54ddb0; box-shadow: 0 0 10px #54ddb0; }
.flow-loading-track { height: 7px; margin-top: 16px; overflow: hidden; border-radius: 999px; background: #111735; }
.flow-loading-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #63dcff, #a66cff, #ff679f); box-shadow: 0 0 15px rgba(166, 108, 255, .65); transition: width .55s ease; }
.flow-loading-terminal { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding: 10px 12px; border: 1px solid rgba(97, 215, 255, .14); border-radius: 9px; background: #080d22; color: #7186a9; font: 11px/1.35 Consolas, monospace; }
.flow-loading-terminal i { color: #63dcff; font-size: 16px; font-style: normal; }
@keyframes flowOrbit { to { transform: rotate(336deg); } }
@keyframes flowCore { 50% { transform: scale(1.06); box-shadow: 0 0 48px rgba(97, 215, 255, .62), inset 0 0 25px rgba(166, 108, 255, .4); } }
@keyframes flowScan { 0%, 100% { transform: translateY(-27px); opacity: 0; } 35%, 65% { opacity: .85; } 50% { transform: translateY(27px); } }
@media (max-width: 520px) {
    .flow-loading-modal { padding: 18px 16px 16px; }
    .flow-loading-header { font-size: 8px; }
    .flow-loading-step { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .flow-loading-orbit, .flow-loading-core, .flow-loading-scan { animation: none; }
}