.username-onboarding{

    position:fixed;
    inset:0;
    z-index:100000;
    display:grid;
    place-items:center;
    padding:24px;
    background:rgba(2,11,22,.7);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

}

.username-onboarding-card{

    width:min(460px,100%);
    padding:clamp(32px,7vw,52px);
    border:1px solid rgba(142,218,255,.2);
    border-radius:24px;
    background:linear-gradient(145deg,rgba(10,37,62,.98),rgba(4,19,35,.98));
    box-shadow:0 30px 90px rgba(0,0,0,.55);
    animation:usernameOnboardingAppear .35s ease;

}

@keyframes usernameOnboardingAppear{

    from{ opacity:0; transform:translateY(18px) scale(.98); }
    to{ opacity:1; transform:none; }

}

.username-onboarding-eyebrow,
.username-onboarding-hint,
.username-onboarding-status{

    color:var(--text-muted);

}

.username-onboarding-eyebrow{

    margin-bottom:10px;
    font-size:.78rem;
    letter-spacing:.14em;
    text-transform:uppercase;

}

.username-onboarding-card h2{

    margin-bottom:12px;

}

.username-onboarding-card > p:not(.username-onboarding-eyebrow):not(.username-onboarding-hint):not(.username-onboarding-status){

    margin-bottom:28px;
    line-height:1.6;

}

.username-onboarding-card label{

    display:block;
    margin-bottom:8px;
    font-weight:700;

}

.username-onboarding-card input{

    width:100%;
    padding:14px 16px;
    border:1px solid rgba(142,218,255,.28);
    border-radius:12px;
    outline:none;
    background:rgba(0,0,0,.2);
    color:var(--text);
    font:inherit;

}

.username-onboarding-card input:focus{

    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(83,184,255,.18);

}

.username-onboarding-hint,
.username-onboarding-status{

    min-height:1.4em;
    margin-top:8px;
    font-size:.9rem;

}

.username-onboarding-status[data-status="success"]{ color:#8ce6be; }
.username-onboarding-status[data-status="error"]{ color:#ffadb8; }

.username-onboarding-card button{

    width:100%;
    margin-top:22px;
    padding:15px;
    border:0;
    border-radius:999px;
    background:var(--primary);
    color:#fff;
    font:inherit;
    cursor:pointer;

}

.username-onboarding-card button:disabled{

    cursor:wait;
    opacity:.65;

}