.avatar-art { width:42.24px; height:42.24px; image-rendering:pixelated; vertical-align:middle; flex:none; }
#headerAvatar .avatar-art { width:32px; height:32px; }
#modalAvatar .avatar-art { width:64px; height:64px; }
.avatar-art.dir-avatar,.avatar-art.chat-avatar { width:32px; height:32px; }
.avatar-picker-box { max-height:90dvh; overflow:auto; }
.avatar-editor { display:grid; grid-template-columns:180px minmax(0,1fr); gap:24px; padding-top:18px; }
.avatar-editor-preview { text-align:center; background:#eee9dc; border-radius:12px; padding:15px 10px; align-self:start; }
#appearancePreview .avatar-art { width:128px; height:128px; }
.avatar-directions { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:10px 0; }
.avatar-directions button { font-size:11px; padding:6px 3px; border:1px solid #b8bdb6; background:white; border-radius:6px; cursor:pointer; }
.avatar-directions button[aria-pressed=true] { background:#d4ecdb; border-color:#478662; }
.avatar-editor-preview small { font-size:11px; color:#59615c; }
#appearanceForm { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#appearanceForm label { display:flex; flex-direction:column; gap:6px; font-size:12px; color:#384a40; }
#appearanceForm select { width:100%; min-width:0; padding:9px; border:1px solid #b8bdb6; border-radius:7px; background:white; }
#appearanceForm .glasses-option { flex-direction:row; align-items:center; }
.avatar-editor-count { grid-column:1/-1; font-size:11px; color:#6a746d; padding:2px 0; }
.avatar-editor-save { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; font-size:12px; }
.avatar-editor-save button { padding:10px 14px; border-radius:8px; cursor:pointer; }
@media(max-width:580px){.avatar-editor{grid-template-columns:1fr}.avatar-editor-preview{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}#appearancePreview .avatar-art{width:96px;height:96px}}