.user-avatar { --avatar-size:44px; --avatar-color:var(--color-rose,#8e2856); --avatar-background:var(--color-pink-light,#fce6ee); position:relative; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:var(--avatar-size); height:var(--avatar-size); border-radius:50%; background:var(--avatar-background); color:var(--avatar-color); vertical-align:middle; }
.user-avatar__image,.user-avatar__icon,.user-avatar__initials { display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:inherit; }
.user-avatar__image { object-fit:cover; }
.user-avatar__icon { background:var(--avatar-background); color:var(--avatar-color); }
.user-avatar__icon > svg { width:65%; height:65%; }
.user-avatar__initials { font-size:calc(var(--avatar-size) * .32); font-weight:600; line-height:1; }
.user-avatar__badge { position:absolute; z-index:1; bottom:-1px; right:-2px; display:flex; align-items:center; justify-content:center; width:43%; height:43%; border:2px solid var(--app-surface,#fff); border-radius:50%; background:var(--avatar-background); color:var(--avatar-color); box-shadow:0 1px 4px #30223820; }
.user-avatar__badge > svg { width:76%; height:76%; }
.user-avatar [hidden] { display:none; }
.user-avatar--small { --avatar-size:32px; }
.user-avatar--large { --avatar-size:64px; }
.user-avatar--preview { --avatar-size:128px; }
.user-avatar--preview .user-avatar__badge { border-width:4px; }
.user-avatar-account-link { display:inline-flex; align-items:center; gap:.5rem; }
.avatar-editor { margin-top:32px; padding:28px; border:1px solid var(--color-line,#e6d4dc); border-radius:20px; background:var(--app-surface,#fff); color:var(--color-ink,#302238); }
.avatar-editor__heading { margin-bottom:28px; }
.avatar-editor__heading h2 { margin:10px 0; color:var(--color-rose,#8e2856); font-family:var(--font-display,Georgia,serif); font-size:30px; line-height:1.2; }
.avatar-editor__heading p { max-width:650px; margin:0; color:var(--color-muted,#7c6a76); font-size:13px; line-height:1.8; }
.avatar-editor__layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:32px; align-items:start; }
.avatar-editor__preview-panel { display:flex; flex-direction:column; align-items:center; padding:25px 18px; border:1px solid var(--color-line,#e6d4dc); border-radius:16px; background:var(--color-petal,#fff6f8); text-align:center; }
.avatar-editor__preview-label { margin-top:24px; font-size:12px; font-weight:600; }
.avatar-editor__preview-help,.avatar-editor__status { margin:8px 0 0; color:var(--color-muted,#7c6a76); font-size:11px; line-height:1.7; }
.avatar-editor__status { margin-top:18px; }
.avatar-editor__controls { display:grid; gap:24px; min-width:0; }
.avatar-editor__fieldset { min-width:0; margin:0; padding:0; border:0; }
.avatar-editor__fieldset legend { margin-bottom:13px; padding:0; font-size:13px; font-weight:600; }
.avatar-editor__fieldset legend > span { margin-left:8px; color:var(--color-muted,#7c6a76); font-size:11px; font-weight:400; }
.avatar-editor__modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.avatar-editor__mode { display:flex; align-items:flex-start; gap:9px; padding:13px 12px; border:1px solid var(--color-line,#e6d4dc); border-radius:12px; font-size:12px; cursor:pointer; }
.avatar-editor__mode > input { margin-top:3px; flex-shrink:0; accent-color:var(--color-rose,#8e2856); }
.avatar-editor__mode strong { display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:12px; font-weight:600; line-height:1.6; }
.avatar-editor__mode strong small { padding:1px 5px; border-radius:4px; background:var(--color-pink-light,#fce6ee); color:var(--color-rose,#8e2856); font-size:9px; font-weight:500; }
.avatar-editor__mode > span > span { display:block; margin-top:4px; color:var(--color-muted,#7c6a76); font-size:11px; line-height:1.6; }
.avatar-editor__mode:has(input:checked) { border-color:var(--color-rose,#8e2856); background:var(--color-petal,#fff6f8); }
.avatar-editor__mode:has(input:focus-visible),.avatar-editor__choice input:focus-visible + .avatar-editor__choice-content { outline:2px solid var(--color-rose,#8e2856); outline-offset:3px; }
.avatar-editor__upload { padding:18px; border:1px dashed var(--color-line,#e6d4dc); border-radius:12px; }
.avatar-editor__upload > label:first-child { display:block; margin-bottom:10px; font-size:12px; font-weight:600; }
.avatar-editor__upload input[type=file] { width:100%; min-width:0; color:var(--color-muted,#7c6a76); font-size:12px; }
.avatar-editor__upload input[type=file]::file-selector-button { margin-right:12px; padding:8px 12px; border:1px solid var(--color-line,#e6d4dc); border-radius:8px; background:var(--app-surface,#fff); color:var(--color-rose,#8e2856); font:inherit; cursor:pointer; }
.avatar-editor__upload > p,.avatar-editor__cause-help { margin:10px 0 0; color:var(--color-muted,#7c6a76); font-size:11px; line-height:1.7; }
.avatar-editor__cause-help { margin:0 0 14px; }
.avatar-editor__remove { display:flex; align-items:center; gap:9px; margin-top:14px; color:var(--color-muted,#7c6a76); font-size:11px; cursor:pointer; }
.avatar-editor__remove > input { accent-color:var(--color-rose,#8e2856); }
.avatar-editor__clear { margin-top:10px; color:var(--color-rose,#8e2856); font-size:11px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.avatar-editor__icons { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.avatar-editor__choice { position:relative; display:block; cursor:pointer; }
.avatar-editor__choice > input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.avatar-editor__choice-content { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:9px; min-height:102px; height:100%; padding:12px 6px; border:1px solid var(--color-line,#e6d4dc); border-radius:12px; background:var(--app-surface,#fff); text-align:center; }
.avatar-editor__choice-content > span:last-child { font-size:10px; line-height:1.4; }
.avatar-editor__choice input:checked + .avatar-editor__choice-content { border-color:var(--color-rose,#8e2856); box-shadow:inset 0 0 0 1px var(--color-rose,#8e2856); background:var(--color-petal,#fff6f8); }
.avatar-editor__choice:hover .avatar-editor__choice-content { border-color:var(--color-rose,#8e2856); }
.avatar-editor__symbol { display:flex; align-items:center; justify-content:center; width:42px; height:42px; flex-shrink:0; border-radius:50%; background:var(--color-petal,#fff6f8); color:var(--color-muted,#7c6a76); }
.avatar-editor__symbol > svg { width:28px; height:28px; }
.avatar-editor__error { margin:0; padding:10px 12px; border:1px solid #eac1c8; border-radius:8px; background:#fff3f4; color:#8a243a; font-size:12px; line-height:1.7; }
.avatar-editor__actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.avatar-editor__actions > span { max-width:330px; color:var(--color-muted,#7c6a76); font-size:11px; line-height:1.6; }
.avatar-editor [hidden] { display:none; }
@media (min-width:1200px) { .avatar-editor__icons { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media (max-width:800px) { .avatar-editor__layout { grid-template-columns:145px minmax(0,1fr); gap:20px; } .avatar-editor__preview-panel { padding:20px 10px; } .avatar-editor__preview-panel .user-avatar--preview { --avatar-size:104px; } .avatar-editor__modes { grid-template-columns:1fr; } .avatar-editor__icons { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:560px) { .avatar-editor { padding:22px 16px; } .avatar-editor__layout { grid-template-columns:1fr; } .avatar-editor__preview-panel { display:grid; grid-template-columns:104px minmax(0,1fr); gap:8px 20px; text-align:left; align-items:center; } .avatar-editor__preview-panel .user-avatar { grid-row:span 3; } .avatar-editor__preview-label,.avatar-editor__preview-help,.avatar-editor__status { margin:0; } .avatar-editor__icons { grid-template-columns:repeat(3,minmax(0,1fr)); } .avatar-editor__fieldset legend > span { display:block; margin:5px 0 0; } .avatar-editor__actions { align-items:flex-start; } }
@media (forced-colors:active) { .avatar-editor__choice input:checked + .avatar-editor__choice-content,.avatar-editor__mode:has(input:checked) { outline:2px solid Highlight; } }