.cosmetic-editor{border-top:1px solid var(--line);padding-top:22px;margin-top:8px}
.cosmetic-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cosmetic-choice{display:flex;min-width:0;flex-direction:column;align-items:center;gap:8px;padding:12px 8px!important;font-size:12px!important;background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--line)!important}
.cosmetic-choice[aria-pressed=true]{border-color:var(--teal)!important;box-shadow:inset 0 0 0 2px var(--teal);background:var(--teal-soft)!important}
.cosmetic-choice:hover{border-color:var(--line-strong)!important;transform:translateY(-2px)}
.cosmetic-choice[aria-pressed=true]:hover{border-color:var(--teal)!important}
.cosmetic-preview{display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none;box-shadow:0 2px 8px var(--shadow);font:700 25px var(--font-body);background:var(--plum-soft);color:var(--plum)}
.cosmetic-preview img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-preview{width:70px;height:70px;border-radius:50%}
.sleeve-preview{width:59px;height:86px;border-radius:5px;background:linear-gradient(135deg,#453447,#21172c);border:3px solid #e8d9c7;color:#e8d9c7}
.classic-sleeve-emblem{font-size:32px;line-height:1}
.cosmetic-editor input[type=file]{width:100%;min-width:0;font-size:12px}
.cosmetic-editor .row{flex-wrap:wrap}
@media(max-width:420px){.cosmetic-choices{gap:7px}.cosmetic-choice{font-size:11px!important}.avatar-preview{width:58px;height:58px}}
@media(prefers-reduced-motion:reduce){.cosmetic-choice:hover{transform:none}}