.user-photo-editor{display:grid;gap:20px;max-width:800px;color:var(--ink,#242044)}.user-photo-editor h2{margin:0;font-size:21px}.user-photo-intro{margin:0;color:var(--muted,#716c87);line-height:1.6}.user-photo-current{display:flex;gap:20px;align-items:center}.user-photo-avatar{width:96px;height:96px;flex:none;border-radius:50%;object-fit:cover;background:#eeebfa;color:#24195c;display:grid;place-items:center;overflow:hidden;font-size:28px;font-weight:700}.user-photo-current-actions{display:flex;gap:10px;flex-wrap:wrap}.user-photo-editor input[type=file]{max-width:100%;font:inherit}.user-photo-crop{display:grid;grid-template-columns:minmax(200px,320px) minmax(180px,1fr);gap:24px;align-items:start}.user-photo-crop canvas{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;background:#eeeaf8;border:1px solid #ddd6ed;touch-action:none;cursor:grab}.user-photo-crop canvas:active{cursor:grabbing}.user-photo-crop canvas:focus-visible{outline:3px solid #8e7abf;outline-offset:4px}.user-photo-controls{display:grid;gap:16px}.user-photo-controls label{display:grid;gap:6px;font-weight:600;font-size:13px}.user-photo-controls input[type=range]{width:100%;margin:0;accent-color:#22165e;min-height:30px}.user-photo-controls p,.user-photo-status{font-size:13px;line-height:1.6;margin:0}.user-photo-actions{display:flex;gap:10px;flex-wrap:wrap}.user-photo-editor [hidden]{display:none!important}.user-photo-editor button{min-height:40px}.user-photo-status[data-error=true]{color:#a12b3e}.user-photo-status{color:var(--muted,#716c87)}.avatar img[data-user-photo]{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
@media(max-width:600px){.user-photo-crop{grid-template-columns:1fr}.user-photo-crop canvas{max-width:300px;margin:auto}.user-photo-current{gap:14px}.user-photo-avatar{width:78px;height:78px}.user-photo-current-actions{flex-direction:column;align-items:flex-start}}
.user-photo-avatar img[data-user-photo]{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}