.katomu-avatar,
.profile-avatar-wrap,
.profile-settings-avatar,
.partner-profile-avatar {
    --katomu-avatar-size: 68px;
    --katomu-avatar-accent: var(--profile-custom-accent, var(--brand-solid));
    --katomu-avatar-accent-end: var(--profile-custom-accent-end, var(--brand-hover));
    --katomu-avatar-ring: color-mix(in srgb, var(--katomu-avatar-accent) 30%, color-mix(in srgb, var(--white) 14%, transparent));
    --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: var(--white);
    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:
        var(--shadow-md);
    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:not([data-profile-frame]):hover .katomu-avatar__face,
.profile-avatar-wrap:not([data-profile-frame]):hover .profile-avatar,
.profile-avatar-wrap:not([data-profile-frame]):hover .katomu-avatar__img,
.profile-avatar-wrap:not([data-profile-frame]):hover .profile-avatar-img,
.katomu-avatar:not([data-profile-frame])[data-avatar-hover="tilt"]:hover .katomu-avatar__face,
.katomu-avatar:not([data-profile-frame])[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: var(--shadow-md);
    opacity: 0.32;
    pointer-events: none;
    transition: opacity var(--duration, 0.2s) ease;
}

.partner-profile-avatar-glow {
    inset: -4px;
    box-shadow: var(--shadow-md);
    opacity: 0.36;
}

.pp-avatar-wrap .partner-profile-avatar-glow {
    inset: -3px;
    box-shadow: var(--shadow-md);
    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 color-mix(in srgb, var(--white) 15%, transparent);
    box-shadow: var(--shadow-md);
    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: color-mix(in srgb, var(--black) 55%, transparent);
    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: var(--white);
    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: var(--white);
    stroke-width: 2;
    flex-shrink: 0;
}

.profile-avatar-spinner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--black) 65%, transparent);
    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 color-mix(in srgb, var(--white) 20%, transparent);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: none;
}

@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: var(--brand-solid);
    border: 2px solid var(--surface, var(--neutral-1));
    color: var(--white);
    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: var(--brand-solid);
    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: 0;
    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: none;
    mask-image: radial-gradient(circle at 50% calc(50% + var(--katomu-avatar-opening-y)), transparent 0 35%, #000 39%);
}

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: color-mix(in srgb, var(--black) 5%, transparent);
    box-shadow:
        var(--shadow-md);
}

body.light .katomu-avatar__glow,
body.light .profile-avatar-glow,
body.light .partner-profile-avatar-glow {
    opacity: 0.25;
    box-shadow: var(--shadow-md);
}

body.light .profile-avatar-delete-btn {
    border-color: var(--white);
}

/* Keep the frame inside the avatar slot. Mask the inner artwork so the portrait
   can fill most of the slot without hiding the outer ornament. */
[data-profile-frame] {
    --katomu-avatar-opening-size: 78%;
    --katomu-avatar-opening-y: 0%;
}

[data-profile-frame="frame-01"] { --katomu-avatar-opening-y: 6%; }
[data-profile-frame="frame-02"] { --katomu-avatar-opening-y: 3%; }
[data-profile-frame="frame-03"] { --katomu-avatar-opening-y: 8%; }
[data-profile-frame="frame-04"] { --katomu-avatar-opening-y: 4%; }
[data-profile-frame="frame-05"] { --katomu-avatar-opening-y: 5%; }
[data-profile-frame="frame-06"] { --katomu-avatar-opening-y: -1%; }
[data-profile-frame="frame-07"] { --katomu-avatar-opening-y: 2%; }
[data-profile-frame="frame-08"] { --katomu-avatar-opening-y: 2%; }
[data-profile-frame="frame-09"] { --katomu-avatar-opening-y: 6%; }
[data-profile-frame="frame-10"] { --katomu-avatar-opening-y: 4%; }
[data-profile-frame="frame-11"] { --katomu-avatar-opening-y: 8%; }
[data-profile-frame="frame-12"] { --katomu-avatar-opening-y: -1%; }
[data-profile-frame="frame-13"] { --katomu-avatar-opening-y: 1%; }
[data-profile-frame="frame-14"] { --katomu-avatar-opening-y: 2%; }

[data-profile-frame] > :is(
    .katomu-avatar__face,
    .profile-avatar,
    .katomu-avatar__img,
    .profile-avatar-img,
    .profile-settings-avatar-img,
    .profile-avatar-upload-hint,
    .profile-avatar-spinner
) {
    position: absolute;
    inset: auto;
    left: 50%;
    top: calc(50% + var(--katomu-avatar-opening-y));
    width: var(--katomu-avatar-opening-size);
    height: var(--katomu-avatar-opening-size);
    border: 0;
    box-shadow: none;
    transform: translate(-50%, -50%);
    transition: filter var(--duration, 0.2s) ease;
}

[data-profile-frame] > .profile-avatar-delete-btn {
    z-index: 8;
}