.avatar-gear-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(86px,1fr)); gap:8px; margin:12px 0 16px; }
.avatar-gear-pick { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:96px; padding:8px; border:2px solid transparent; border-radius:12px; background:var(--ui-surface-alt,#153337); color:var(--ui-text,#e5f4ef); font:11px 'Segoe UI',sans-serif; cursor:pointer; }
.avatar-gear-pick[aria-pressed="true"] { border-color:var(--ui-accent,#68d7be); background:var(--ui-surface,#204347); }
.avatar-gear-pick:focus-visible { outline:2px solid #68d7be; outline-offset:2px; }
.avatar-gear-pick:disabled { opacity:0.6; cursor:wait; }
.avatar-gear-thumb { display:block; width:56px; height:56px; background-size:800% 500%; background-repeat:no-repeat; font-size:36px; line-height:56px; }
#avatarV2Picker { flex-wrap:wrap; gap:8px; justify-content:center; max-height:340px; overflow:auto; }
#avatarV2Picker button[data-avatar] { flex:0 0 96px; min-height:106px; padding:8px!important; display:flex; flex-direction:column; align-items:center; gap:4px; border:2px solid transparent; border-radius:12px; background:var(--ui-surface-alt); color:var(--ui-text); cursor:pointer; }
#avatarV2Picker button[data-avatar][aria-pressed="true"] { border-color:var(--ui-accent,#68d7be)!important; }
.avatar-v2-character-thumb { display:block; width:64px; height:64px; background-size:800% 700%; background-repeat:no-repeat; }
.avatar-picker-tabs { display:flex; justify-content:center; gap:6px; width:fit-content; max-width:100%; margin:0 auto 16px; padding:4px; border:1px solid var(--ui-border-accent); border-radius:12px; background:var(--ui-surface-alt); }
.avatar-picker-tabs .ui-btn { min-width:116px; min-height:44px; gap:9px; padding:8px 16px; border-radius:8px; font-size:14px; font-weight:600; color:var(--ui-text); }
.avatar-picker-tabs .ui-btn:hover { background:rgba(var(--ui-accent-rgb),0.10); transform:none; box-shadow:none; }
.avatar-picker-tabs .ui-btn[aria-selected="true"] { border-color:var(--ui-accent); background:rgba(var(--ui-accent-rgb),0.18); color:var(--ui-text-bright); }
.avatar-picker-tabs .ui-btn:focus-visible { outline:2px solid var(--ui-accent); outline-offset:2px; }
#avatarCharactersPanel[hidden], #avatarGearPanel[hidden] { display:none; }
#avatarCharactersPanel, #avatarGearPanel { max-height:340px; overflow:auto; scrollbar-gutter:stable; }
#avatarCharactersPanel #avatarV2Picker { max-height:none; overflow:visible; margin-bottom:0!important; }
#avatarV2Preview { margin-bottom:16px; }
/* The kind row: one segmented track, equal cells — five choices that
   answer one question, not five loose buttons. */
#avatarKindRow { display:flex; gap:2px; padding:2px; border-radius:9px; background:rgba(0,0,0,0.22); }
#avatarKindRow button { flex:1 1 0; min-width:0; padding-left:4px; padding-right:4px; border-color:transparent; background:none; }
#avatarKindRow button[aria-pressed="true"] { border-color:var(--ui-accent); background:var(--ui-surface-alt); color:var(--ui-text); }
#avatarV2Preview .avatar-settings-preview { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:12px; padding:8px; border:1px solid var(--ui-border); border-radius:12px; background:var(--ui-surface-alt); color:var(--ui-text); }
#avatarV2Preview canvas { display:block; width:100%; height:auto; min-width:0; max-width:200px; justify-self:center; }
#avatarV2Preview .avatar-preview-controls { display:flex; flex-direction:column; gap:20px; min-width:0; padding-right:8px; }
#avatarV2Preview label { display:flex; flex-direction:column; align-items:stretch; gap:8px; margin:0; font-size:12px; color:var(--ui-text-muted); }
#avatarV2Preview input[type="range"] { display:block; width:100%; min-width:0; margin:0; padding:0; accent-color:var(--ui-accent); cursor:pointer; }
#avatarV2Preview input:disabled { opacity:.4; cursor:default; }
#avatarV2Preview input:focus-visible { outline:2px solid var(--ui-accent); outline-offset:4px; }
#avatarV2Preview .avatar-preview-note { color:var(--ui-text-muted); font-size:11px; }
#avatarV2Preview .avatar-preview-note:empty { display:none; }
#avatarV2Picker button[data-avatar]:disabled { opacity:.6; cursor:wait; }

.avatar-neckwear-thumb { display:flex; align-items:center; justify-content:center; width:100%; height:48px; font-size:26px; }
.avatar-neckwear-thumb img { width:76px; max-width:100%; height:46px; object-fit:contain; }