.pp-avatar-upload{position:relative;display:inline-block}.pp-avatar-upload__preview{width:6rem;height:6rem;border-radius:var(--pp-radius-full);overflow:hidden;background-color:var(--pp-color-bg-tertiary);border:3px solid var(--pp-color-bg);box-shadow:var(--pp-shadow-sm)}.pp-avatar-upload__preview img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.pp-avatar-upload__btn{position:absolute;bottom:0;right:0;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background-color:var(--pp-color-primary-500);color:#fff;border:2px solid var(--pp-color-bg);border-radius:var(--pp-radius-full);cursor:pointer;transition:background-color var(--pp-duration-150) var(--pp-ease-in-out)}.pp-avatar-upload__btn:hover{background-color:var(--pp-color-primary-600)}.pp-avatar-upload__input{position:absolute;opacity:0;width:0;height:0}.pp-cover-upload{position:relative;width:100%;aspect-ratio:3 / 1;background-color:var(--pp-color-bg-tertiary);border-radius:var(--pp-radius-xl);overflow:hidden}.pp-cover-upload img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.pp-cover-upload__overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background-color:#0000;transition:background-color var(--pp-duration-200) var(--pp-ease-in-out)}.pp-cover-upload:hover .pp-cover-upload__overlay{background-color:#0000004d}.pp-cover-upload.is-repositioning .pp-cover-upload__overlay{display:none}.pp-cover-upload__btn,.pp-cover-upload__reposition-btn{display:flex;align-items:center;gap:var(--pp-space-2);padding:var(--pp-space-2) var(--pp-space-4);background-color:#0009;color:#fff;border:none;border-radius:var(--pp-radius-md);font-size:var(--pp-text-sm);font-weight:var(--pp-font-medium);cursor:pointer;opacity:0;transition:opacity var(--pp-duration-200) var(--pp-ease-in-out)}.pp-cover-upload:hover .pp-cover-upload__btn,.pp-cover-upload:hover .pp-cover-upload__reposition-btn{opacity:1}.pp-cover-upload.is-repositioning .pp-cover-upload__btn,.pp-cover-upload.is-repositioning .pp-cover-upload__reposition-btn{display:none}.pp-cover-upload__input{position:absolute;opacity:0;width:0;height:0}.pp-cover-upload__reposition-actions{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:flex-end;justify-content:space-between;padding:var(--pp-space-4);background:linear-gradient(to top,rgb(0 0 0 / .6) 0%,transparent 40%);pointer-events:none;z-index:10}.pp-cover-upload.is-repositioning .pp-cover-upload__reposition-actions{display:flex}.pp-cover-upload__reposition-actions>*{pointer-events:auto}.pp-cover-upload__reposition-text{color:#fff;font-size:var(--pp-text-sm);font-weight:var(--pp-font-medium);display:flex;align-items:center;gap:var(--pp-space-2);text-shadow:0 1px 2px rgb(0 0 0 / .8)}.pp-cover-upload__reposition-btns{display:flex;gap:var(--pp-space-2)}.pp-cover-upload .cropper-view-box{outline:none}.pp-cover-upload .cropper-dashed,.pp-cover-upload .cropper-center,.pp-cover-upload .cropper-point{display:none}.pp-cropper-modal .pp-modal__body{padding:0;display:flex;align-items:center;justify-content:center;background-color:var(--pp-color-neutral-900);min-height:20rem}.pp-cropper-modal .pp-modal__body img{max-width:100%;max-height:60vh;display:block}.pp-cropper-modal .pp-modal__footer{justify-content:space-between}.pp-cropper-tools{display:flex;gap:var(--pp-space-2)}