.profile-info { margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; } .profile-info-item { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; background: none; border-radius: 0; padding: 0; box-shadow: none; transition: none; } .profile-info-item i { font-size: 1.3rem; color: var(--primary-color); margin-right: 0.2rem; } .profile-info-label { font-weight: 600; color: #222; margin-right: 0.3rem; } .profile-info-value { color: var(--text-color-dark); font-weight: 400; } .profile-info-value span { display: block; } .profile-container { position: relative; } .avatar { width: 160px; height: 160px; border-radius: var(--border-radius-large); background: linear-gradient(135deg, var(--secondary-color) 0%, var(--tertiary-color) 100%); display: flex; align-items: center; justify-content: center; color: var(--text-color); position: relative; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.2); } .avatar::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%); } .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--border-radius-large); } @media (max-width: 768px) { .avatar { width: 140px; height: 140px; margin: 0 auto; font-size: 40px; } } @media (max-width: 480px) { .avatar { width: 120px; height: 120px; font-size: 32px; } }