.username-hero{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;margin:16px auto 0;padding:12px 16px;border:1px solid #ffffff30;border-radius:14px;color:#e7efff;font-size:13px;max-width:520px}
.username-hero[hidden]{display:none}.username-hero small{flex-basis:100%;color:#bacdf1;font-size:12px}.username-hero strong{overflow-wrap:anywhere}
.username-hero-button{background:#fff;color:#17336f;border:0;border-radius:8px;padding:8px 12px;font-weight:700;cursor:pointer}.username-ranking-setting{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:16px 0;font-size:14px}
.username-dialog{box-sizing:border-box;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid #c8d5ed;border-radius:20px;padding:28px;color:#172b4d;background:#fff;box-shadow:0 24px 90px #071a4760;text-align:left}
.username-dialog::backdrop{background:#07152d99;backdrop-filter:blur(3px)}.username-dialog form{margin:0}.username-dialog h2{font-size:25px;line-height:1.2;margin:10px 0 12px;color:inherit}.username-dialog p{line-height:1.55;margin:10px 0 18px;font-size:14px;color:inherit}.username-eyebrow{font-size:11px;letter-spacing:.12em;font-weight:800;color:#315fba}
.username-preview{padding:14px 16px;border-radius:12px;background:#edf3ff;margin-bottom:20px}.username-preview span{display:block;font-size:12px;color:#516789}.username-preview strong{display:block;margin-top:5px;overflow-wrap:anywhere;font-size:19px}.username-dialog label{display:block;font-weight:700;font-size:14px;margin-bottom:8px}.username-dialog input{box-sizing:border-box;width:100%;min-width:0;border:1px solid #9daecc;border-radius:10px;padding:12px;font:inherit;font-size:16px;background:#fff;color:#172b4d}.username-dialog small{display:block;font-size:12px;line-height:1.5;color:#516789;margin-top:8px}.username-dialog #codenameStatus{min-height:22px;margin:12px 0;font-size:13px}.username-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.username-actions button{padding:11px 16px;border-radius:10px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}.username-save{background:#173d97;border:1px solid #173d97;color:white}.username-secondary{background:transparent;color:inherit;border:1px solid #bbc9df}.username-actions button:disabled{opacity:.6;cursor:wait}.username-default-note{text-align:center;margin-top:16px!important}.username-dialog :focus-visible,.username-hero-button:focus-visible{outline:3px solid #f49a38;outline-offset:3px}
body.dark-mode .username-dialog{background:#132243;color:#edf3ff;border-color:#344b73}body.dark-mode .username-preview{background:#20365e}body.dark-mode .username-dialog small,body.dark-mode .username-preview span{color:#bfcee7}body.dark-mode .username-eyebrow{color:#9cbdff}
@media(max-width:420px){.username-dialog{padding:22px}.username-dialog h2{font-size:22px}.username-actions button{flex:1}.username-hero{margin-top:12px;padding:12px}}
.profile-current-avatar{display:inline-flex;width:42px;height:42px;flex:0 0 42px;border-radius:50%;overflow:hidden}.profile-current-avatar svg,.profile-preview-avatar svg{width:100%;height:100%}
.profile-preview-avatar{display:block;width:64px;height:64px;margin-bottom:10px;border-radius:50%;overflow:hidden}
.profile-avatar-fieldset{padding:0;margin:22px 0 16px;border:0}.profile-avatar-fieldset legend{font-size:14px;font-weight:700;margin-bottom:10px}.profile-avatar-choices{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.profile-avatar-choice{border:3px solid transparent;background:transparent;border-radius:50%;padding:2px;cursor:pointer;aspect-ratio:1;min-width:0}.profile-avatar-choice svg{display:block;width:100%;height:100%;border-radius:50%}.profile-avatar-choice[aria-pressed="true"]{border-color:#315fba;box-shadow:0 0 0 2px #fff}.profile-avatar-choice:focus-visible{outline:3px solid #f49a38;outline-offset:3px}.profile-avatar-choice:disabled{opacity:.65;cursor:wait}
body.dark-mode .profile-avatar-choice[aria-pressed="true"]{border-color:#9cbdff;box-shadow:0 0 0 2px #132243}
.profile-avatar-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px}.profile-avatar-tools label{font-size:12px;margin:0}.profile-avatar-tools select,.profile-avatar-tools button{border:1px solid #9daecc;border-radius:8px;background:transparent;color:inherit;padding:8px;font:inherit;font-size:13px}.profile-avatar-tools button{margin-left:auto;cursor:pointer}.profile-avatar-choice[hidden]{display:none}body.dark-mode .profile-avatar-tools select option{background:#132243;color:#edf3ff}