/* Phase 60 — live username availability */
.uc { position: relative; }
.uc__box { position: relative; }
.uc__at { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 1.15rem; pointer-events: none; }
.uc__box input.uc__input { padding-left: 34px; }
.uc__msg { margin: 6px 16px 0; font-size: .9rem; line-height: 1.3; color: var(--text-secondary); }
[data-uc-wrap].is-bad .uc__msg { color: #f4212e; }
[data-uc-wrap].is-ok .uc__msg { color: #00ba7c; }
[data-uc-wrap].is-bad input { border-color: #f4212e !important; box-shadow: 0 0 0 1px #f4212e !important; }
[data-uc-wrap].is-ok input { border-color: #00ba7c !important; box-shadow: 0 0 0 1px #00ba7c !important; }
.uc__sugs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 16px 0; }
.uc__sug { border: 1px solid var(--border-color); background: transparent; color: var(--color-accent); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .95rem; cursor: pointer; }
.uc__sug:hover { background: var(--bg-hover, rgba(29,155,240,.1)); }
.uc__sug::before { content: "@"; opacity: .7; }
/* sign-up page (plain field) */
.field [data-uc-wrap] .uc__msg, .field.uc .uc__msg { margin: 6px 0 0; }
.field .uc__sugs { margin: 8px 0 0; }
.field [data-uc-wrap].is-bad .input { border-color: #f4212e; }
.field [data-uc-wrap].is-ok .input { border-color: #00ba7c; }
.uc__current { display: block; margin: 24px 16px 0; padding: 14px 16px; border-radius: 6px; background: rgba(120,120,120,.12); color: var(--text-secondary); font-size: 1.1rem; }
.uc__current small { display: block; font-size: .8rem; margin-bottom: 2px; }