/* Live username check (assets/common/js/username-check.js). Each state has its own background so
   the text keeps AA contrast on the light and the dark sign-up pages. */
.mm-uname { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 10px;
    border-radius: 8px; font-size: 14px; line-height: 1.4; }
/* The legacy dark theme sets `p, span, div { color: #cbd5e1 !important }` (dark-premium-design.css),
   so the state colours below need !important to keep their contrast. */
.mm-uname > span:not(.mm-uname__icon) { color: inherit !important; opacity: 1; }
.mm-uname:empty, .mm-uname--idle { display: none; }
.mm-uname__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 18px; height: 18px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; }
.mm-uname--available { background: #e5f6ee; color: #0f5132 !important; }
.mm-uname--available .mm-uname__icon { background: #146c43; }
.mm-uname--taken, .mm-uname--invalid { background: #fdecec; color: #7a2323 !important; }
.mm-uname--taken .mm-uname__icon, .mm-uname--invalid .mm-uname__icon { background: #8f2d2d; }
.mm-uname--checking { background: #eef1f4; color: #33404d !important; }
.mm-uname--checking .mm-uname__icon { border: 2px solid #9aa7b3; border-top-color: #33404d !important; background: transparent;
    animation: mm-uname-spin .8s linear infinite; }
.mm-uname--error { background: #fff4dc; color: #6b4608 !important; }
.mm-uname--error .mm-uname__icon { background: #8a5a10; }
.mm-uname__retry { min-height: 44px; padding: 0 12px; margin-left: auto; border: 1px solid currentColor; border-radius: 8px;
    background: transparent; color: inherit; font-weight: 600; }
@keyframes mm-uname-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mm-uname--checking .mm-uname__icon { animation: none; } }