@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}.avatar{position:relative}.avatar img{z-index:2;filter:brightness(1.1)}.avatar:after{position:absolute;content:"";width:100%;height:100%;transform:scale(1.1);transition:all .5s ease-in-out;border-radius:5px;z-index:1;background:conic-gradient(from var(--angle),var(--color-primary),var(--color-tertiary),var(--color-primary))}.avatar:hover:after{animation:backgroundRotation 1s linear infinite forwards;transform:scale(1.15)}@keyframes backgroundRotation{0%{--angle:0deg}to{--angle:360deg}}.user-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5);display:flex;justify-content:center;align-items:center;z-index:1000;cursor:pointer}.user-modal-overlay .user-modal-content{background-color:var(--color-card-background);border-radius:8px;padding:2rem;width:100%;max-width:400px;box-shadow:0 4px 12px rgba(0,0,0,.15);backdrop-filter:blur(2px)}.user-modal-overlay .user-modal-content h2{color:var(--color-primary);margin-bottom:1.5rem;text-align:center}.user-modal-overlay .auth-form{display:flex;flex-direction:column;gap:1rem}.user-modal-overlay .auth-form label{display:block;margin-bottom:.5rem;color:var(--color-text);font-size:.9rem}.user-modal-overlay .auth-form input{width:100%;padding:.75rem;border:1px solid var(--color-border);border-radius:4px;background-color:var(--color-editor-background);color:var(--color-text);transition:border-color .3s}.user-modal-overlay .auth-form input:focus{outline:none;border-color:var(--color-primary)}.user-modal-overlay .auth-form input.error{border-color:#ff4d4f}.user-modal-overlay .auth-form .error-message{color:#ff4d4f;font-size:.8rem;margin-top:.25rem;height:1rem}.user-modal-overlay .auth-form .validate-code-container{display:flex;gap:1rem;align-items:flex-end}.user-modal-overlay .auth-form .validate-code-container>div:first-child{flex:1}.user-modal-overlay .auth-form .validate-code-container .validate-code-image{width:100px;height:40px;background-size:cover;background-position:50%;cursor:pointer;border-radius:4px;border:1px solid var(--color-border)}.user-modal-overlay .auth-form .form-actions{display:flex;gap:1rem;margin-top:1.5rem}.user-modal-overlay .auth-form .form-actions button{flex:1;padding:.75rem;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:all .3s}.user-modal-overlay .auth-form .form-actions button:first-child{background-color:var(--color-primary);color:var(--color-text-light)}.user-modal-overlay .auth-form .form-actions button:first-child:hover{background-color:var(--color-primary-transparent)}.user-modal-overlay .auth-form .form-actions button:last-child{background-color:var(--color-secondary);color:var(--color-text)}.user-modal-overlay .auth-form .form-actions button:last-child:hover{background-color:var(--color-border)}.user-modal-overlay .auth-form .form-actions button:disabled{opacity:.7;cursor:not-allowed}.user-modal-overlay .toggle-auth-type{text-align:center;margin-top:1.5rem;color:var(--color-text-secondary)}.user-modal-overlay .toggle-auth-type button{background:none;border:none;color:var(--color-primary);cursor:pointer;font-weight:500;padding:0 .25rem}.user-modal-overlay .toggle-auth-type button:hover{text-decoration:underline}.user-modal-overlay .user-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.user-modal-overlay .user-modal-close{background:none;border:none;font-size:24px;cursor:pointer;padding:0 10px;color:#666}.user-modal-overlay .user-modal-close:hover{color:#333}