.katomu-avatar,
.profile-avatar-wrap,
.profile-settings-avatar,
.partner-profile-avatar {
    --katomu-avatar-size: 68px;
    --katomu-avatar-accent: var(--profile-custom-accent, var(--accent-color, var(--c-basic, #10b981)));
    --katomu-avatar-accent-end: var(--profile-custom-accent-end, var(--accent-gradient-end, #0f766e));
    --katomu-avatar-ring: color-mix(in srgb, var(--katomu-avatar-accent) 30%, rgba(255, 255, 255, 0.14));
    --katomu-avatar-soft-ring: color-mix(in srgb, var(--katomu-avatar-accent) 8%, transparent);
    --katomu-avatar-frame-image: var(--profile-avatar-frame-image);
    position: relative;
    width: var(--katomu-avatar-size);
    height: var(--katomu-avatar-size);
    flex-shrink: 0;
    border-radius: 50%;
    user-select: none;
    overflow: visible;
}

.profile-avatar-wrap {
    --katomu-avatar-size: 68px;
}

.profile-settings-avatar {
    --katomu-avatar-size: 58px;
}

.partner-profile-avatar {
    --katomu-avatar-size: 100px;
}

.pp-avatar-wrap .partner-profile-avatar {
    --katomu-avatar-size: 68px;
}

.katomu-avatar--enhanced.profile-settings-avatar,
.katomu-avatar--enhanced.partner-profile-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: inherit;
}

.katomu-avatar__face,
.profile-avatar,
.profile-settings-avatar:not(.katomu-avatar--enhanced),
.partner-profile-avatar:not(.katomu-avatar--enhanced) {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--katomu-avatar-accent) 0%, var(--katomu-avatar-accent-end) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 850;
    font-size: calc(var(--katomu-avatar-size) * 0.38);
    line-height: 1;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.24),
        0 0 0 4px var(--katomu-avatar-soft-ring);
    border: 2px solid var(--katomu-avatar-ring);
    position: relative;
    z-index: 2;
    transition:
        transform var(--duration, 0.2s) cubic-bezier(0.34, 1.56, 0.64, 1),
        filter var(--duration, 0.2s) ease;
}

.profile-settings-avatar:not(.katomu-avatar--enhanced),
.partner-profile-avatar:not(.katomu-avatar--enhanced) {
    display: inline-flex;
}

.partner-profile-avatar:not(.katomu-avatar--enhanced) {
    border-width: 3px;
}

.katomu-avatar__initial {
    position: relative;
    z-index: 2;
}

.profile-avatar-wrap:hover .katomu-avatar__face,
.profile-avatar-wrap:hover .profile-avatar,
.profile-avatar-wrap:hover .katomu-avatar__img,
.profile-avatar-wrap:hover .profile-avatar-img,
.katomu-avatar[data-avatar-hover="tilt"]:hover .katomu-avatar__face,
.katomu-avatar[data-avatar-hover="tilt"]:hover .katomu-avatar__img {
    transform: scale(1.06) rotate(3deg);
}

.katomu-avatar__glow,
.profile-avatar-glow,
.partner-profile-avatar-glow {
    position: absolute;
    inset: -3px;
    background: transparent;
    border-radius: 50%;
    z-index: 1;
    box-shadow: 0 0 12px 2px color-mix(in srgb, var(--katomu-avatar-accent) 42%, transparent);
    opacity: 0.32;
    pointer-events: none;
    transition: opacity var(--duration, 0.2s) ease;
}

.partner-profile-avatar-glow {
    inset: -4px;
    box-shadow: 0 0 14px 3px color-mix(in srgb, var(--katomu-avatar-accent) 42%, transparent);
    opacity: 0.36;
}

.pp-avatar-wrap .partner-profile-avatar-glow {
    inset: -3px;
    box-shadow: 0 0 12px 2px color-mix(in srgb, var(--katomu-avatar-accent) 42%, transparent);
    opacity: 0.32;
}

.partner-profile-avatar.katomu-avatar--enhanced + .partner-profile-avatar-glow {
    display: none;
}

.profile-avatar-wrap:hover .katomu-avatar__glow,
.profile-avatar-wrap:hover .profile-avatar-glow,
.katomu-avatar[data-avatar-hover="tilt"]:hover .katomu-avatar__glow {
    opacity: 0.55;
}

.katomu-avatar__img,
.profile-avatar-img,
.profile-settings-avatar-img,
.partner-profile-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    z-index: 3;
    border: 2px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
    display: block;
    transition:
        transform var(--duration, 0.2s) cubic-bezier(0.34, 1.56, 0.64, 1),
        filter var(--duration, 0.2s) ease;
}

.profile-avatar-wrap.avatar-uploadable:hover .katomu-avatar__img,
.profile-avatar-wrap.avatar-uploadable:hover .profile-avatar-img {
    filter: brightness(0.7);
}

.profile-avatar-upload-hint {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.22s ease;
    pointer-events: none;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

.profile-avatar-wrap.avatar-uploadable:hover .profile-avatar-upload-hint {
    opacity: 1;
}

.profile-avatar-upload-hint svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    stroke-width: 2;
    flex-shrink: 0;
}

.profile-avatar-spinner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.profile-avatar-spinner.is-active {
    opacity: 1;
    pointer-events: all;
}

.avatar-spinner-ring {
    width: 26px;
    height: 26px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: katomu-avatar-spin 0.7s linear infinite;
}

@keyframes katomu-avatar-spin {
    to { transform: rotate(360deg); }
}

.profile-avatar-delete-btn {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid var(--surface, #111827);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    opacity: 0;
    transform: scale(0.5);
    transition:
        opacity 0.18s ease,
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    line-height: 1;
    padding: 0;
}

.profile-avatar-wrap.has-avatar:hover .profile-avatar-delete-btn {
    opacity: 1;
    transform: scale(1);
}

.profile-avatar-delete-btn:hover {
    background: #dc2626;
    transform: scale(1.2) !important;
}

.profile-avatar-wrap.drag-over .katomu-avatar__face,
.profile-avatar-wrap.drag-over .profile-avatar,
.profile-avatar-wrap.drag-over .katomu-avatar__img,
.profile-avatar-wrap.drag-over .profile-avatar-img {
    outline: 2px dashed var(--katomu-avatar-accent);
    outline-offset: 3px;
    filter: brightness(0.65);
}

.katomu-avatar[data-profile-frame]::after,
.profile-avatar-wrap[data-profile-frame]::after,
.profile-settings-avatar[data-profile-frame]::after,
.partner-profile-avatar[data-profile-frame]::after {
    content: "";
    position: absolute;
    inset: -11%;
    border-radius: 50%;
    background-image: var(--katomu-avatar-frame-image, var(--profile-avatar-frame-image));
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 7;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--katomu-avatar-accent) 28%, transparent));
}

body.light .katomu-avatar__face,
body.light .profile-avatar,
body.light .profile-settings-avatar:not(.katomu-avatar--enhanced),
body.light .partner-profile-avatar:not(.katomu-avatar--enhanced) {
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow:
        0 3px 9px rgba(0, 0, 0, 0.07),
        0 0 0 4px color-mix(in srgb, var(--katomu-avatar-accent) 7%, transparent);
}

body.light .katomu-avatar__glow,
body.light .profile-avatar-glow,
body.light .partner-profile-avatar-glow {
    opacity: 0.25;
    box-shadow: 0 0 10px 2px color-mix(in srgb, var(--katomu-avatar-accent) 24%, transparent);
}

body.light .profile-avatar-delete-btn {
    border-color: #fff;
}