.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--avatar-bg,#e1e5e9);color:var(--avatar-color,#6b7280);font-weight:600;transition:all .2s ease;aspect-ratio:1;flex-shrink:0;box-sizing:border-box;--avatar-bg:#e1e5e9;--avatar-color:#6b7280;--status-online:#10b981;--status-offline:#9ca3af;--bg-primary:#ffffff}.avatar.avatar-tiny{width:18px;height:18px;font-size:10px}.avatar.avatar-small{width:32px;height:32px;font-size:12px}.avatar.avatar-medium{width:40px;height:40px;font-size:14px}.avatar.avatar-large{width:48px;height:48px;font-size:16px}.avatar.avatar-xl{width:64px!important;height:64px!important;font-size:20px;min-width:64px!important;min-height:64px!important;max-width:64px!important;max-height:64px!important;aspect-ratio:1!important}.avatar.avatar-2xl{width:80px;height:80px;font-size:24px}.avatar .avatar-image{object-fit:cover;aspect-ratio:1;flex-shrink:0;display:block;max-width:100%;max-height:100%}.avatar .avatar-fallback,.avatar .avatar-image{width:100%;height:100%;border-radius:50%;overflow:hidden}.avatar .avatar-fallback{display:flex;align-items:center;justify-content:center;background:var(--avatar-bg,#e1e5e9);color:var(--avatar-color,#6b7280);font-weight:600;text-transform:uppercase;font-size:inherit;min-width:1em;min-height:1em}.avatar .avatar-fallback.hidden{display:none!important}.avatar .status-indicator{position:absolute;bottom:2px;right:2px;width:12px;height:12px;border-radius:50%;border:2px solid var(--bg-primary,#ffffff);z-index:10;pointer-events:none}.avatar .status-indicator.online{background:var(--status-online,#10b981)}.avatar .status-indicator.offline{background:var(--status-offline,#9ca3af)}.avatar.avatar-small .status-indicator{width:8px;height:8px;bottom:1px;right:1px}.avatar.avatar-2xl .status-indicator,.avatar.avatar-large .status-indicator,.avatar.avatar-xl .status-indicator{width:14px;height:14px;bottom:3px;right:3px}.avatar[role=button]{cursor:pointer}.avatar[role=button]:hover{transform:scale(1.05);box-shadow:0 2px 8px rgba(0,0,0,.1)}.avatar[role=button]:focus{outline:2px solid var(--primary-color,#3b82f6);outline-offset:2px}.dark-theme .avatar{--avatar-bg:#374151;--avatar-color:#d1d5db}.dark-theme .avatar .status-indicator{border-color:var(--bg-primary,#1f2937)}.light-theme .avatar{--avatar-bg:#f3f4f6;--avatar-color:#6b7280}.light-theme .avatar .status-indicator{border-color:var(--bg-primary,#ffffff)}