.swd-profile-avatar { position:relative; display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:0 0 42px; overflow:hidden; border-radius:50%; background:#e4edf5; color:#25597c; font-family:'Poppins',Arial,sans-serif; font-weight:600; font-size:14px; vertical-align:middle; }
.swd-profile-avatar img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
.swd-profile-avatar--large { width:80px; height:80px; flex-basis:80px; font-size:26px; box-shadow:0 0 0 4px #fff,0 0 0 5px #d9e3ec; }
.swd-profile-person { display:inline-flex; align-items:center; gap:10px; min-width:0; }
.swd-profile-person .swd-profile-avatar { flex-shrink:0; }
.swd-photo-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; }
.swd-photo-help { font-size:.8rem; color:#65758a; margin:8px 0 0; max-width:36rem; }
.swd-photo-editor { text-align:left; }
.swd-photo-canvas { display:block; width:min(100%,320px); height:auto; aspect-ratio:1; margin:0 auto 16px; border-radius:50%; background:#e7edf3; touch-action:none; cursor:grab; box-shadow:0 0 0 4px #e4eaf0; }
.swd-photo-canvas:active { cursor:grabbing; }
.swd-photo-editor label { display:block; font-size:.88rem; margin:10px 0 4px; }
.swd-photo-editor input[type=range] { display:block; width:100%; accent-color:#287bb4; }
.swd-photo-editor .swd-photo-tools { display:flex; justify-content:center; gap:8px; margin-top:16px; }
.swd-photo-editor p { color:#65758a; font-size:.85rem; }
@media(max-width:575px) { .swd-profile-avatar--large { width:64px; height:64px; flex-basis:64px; font-size:22px; } .swd-photo-controls .btn { font-size:.8rem; } }