.member-avatar-button { position:relative; padding:0; flex-shrink:0; }
.member-avatar-button > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.member-avatar-button:focus-visible { outline:3px solid #f5c26b; outline-offset:3px; }
.member-avatar-edit { position:absolute; right:0; bottom:0; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:white; color:var(--primary); }
.member-avatar-edit svg { width:12px; height:12px; }
.member-avatar-dialog { padding:0; width:min(480px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); border:1px solid #dce4df; border-radius:8px; color:var(--text); background:white; }
.member-avatar-dialog[open] { display:flex; flex-direction:column; }
.member-avatar-dialog::backdrop { background:#0005; }
.member-avatar-dialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); flex-shrink:0; }
.member-avatar-dialog h2 { margin:0; font-size:17px; }
.member-avatar-dialog [data-close] { width:36px; height:36px; display:grid; place-items:center; }
.member-avatar-tabs { display:flex; margin:14px 16px 0; background:#f0f4f2; padding:3px; border-radius:6px; flex-shrink:0; }
.member-avatar-tabs button { flex:1; padding:8px; border-radius:4px; color:#6c7a71; }
.member-avatar-tabs [aria-selected=true] { background:var(--primary); color:white; }
.member-avatar-body { padding:16px; min-height:0; overflow:auto; }
.member-avatar-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:repeat(3,60px); gap:8px; }
.member-avatar-choice { position:relative; display:flex; align-items:center; justify-content:center; min-width:0; height:60px; padding:4px; border:2px solid transparent; border-radius:6px; background:#f4f7f5; }
.member-avatar-choice img { width:40px; height:40px; max-width:100%; object-fit:cover; object-position:50% 42%; border-radius:50%; }
.member-avatar-choice[aria-pressed=true] { border-color:var(--primary); background:#e2f0e7; }
.member-avatar-choice:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
.member-avatar-status { margin:10px 0 0; font-size:13px; color:var(--text-2); overflow-wrap:anywhere; }
.member-avatar-status:empty { display:none; }
.member-avatar-status button { margin-left:8px; color:var(--primary); text-decoration:underline; }
.member-avatar-pages { display:flex; align-items:center; justify-content:center; gap:20px; padding:0 16px 14px; flex-shrink:0; }
.member-avatar-pages button { width:40px; height:40px; display:grid; place-items:center; border:1px solid #dce4df; border-radius:6px; }
.member-avatar-pages [data-page] { width:56px; text-align:center; font-size:13px; color:var(--text-2); }
.member-avatar-dialog footer { display:flex; justify-content:flex-end; gap:10px; padding:14px 16px; border-top:1px solid var(--line); flex-shrink:0; }
.member-avatar-dialog footer button { padding:9px 18px; border:1px solid #d5dfd8; border-radius:6px; }
.member-avatar-dialog [data-save] { background:var(--primary); color:white; border-color:var(--primary); }
.member-avatar-dialog button:disabled { opacity:.45; cursor:default; }
@media(max-width:400px) { .member-avatar-grid { grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(4,60px); } }