.interface.creator-info-interface {
    width: 100%;
    max-width: 360px;
    padding: 0;
    border-radius: 16px;
    text-align: center;
}

.creator-info-interface .close-button {
    z-index: 5;
}

.creator-info-header {
    position: relative;
    padding: 28px 24px 48px;
    background: radial-gradient(120% 160% at 15% -10%, #ffffff55 0%, transparent 55%), linear-gradient(135deg, #7b4fd6 0%, #c2359e 100%);
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.creator-info-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, #ffffff00, #ffffffcc, #ffffff00);
}

.creator-info-eyebrow {
    display: inline-block;
    margin: 0 0 10px;
    padding: 4px 11px;
    border-radius: 999px;
    background: #ffffff26;
    border: 1px solid #ffffff40;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.creator-info-name {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 2px #00000030;
}

.creator-info-avatar-wrap {
    position: relative;
    width: 108px;
    height: 108px;
    margin: -44px auto -16px;
    z-index: 3;
}

.creator-info-avatar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #f3c969 0%, #fff6da 15%, #f3c969 30%, #c9962f 50%, #f3c969 70%, #fff6da 85%, #f3c969 100%);
    box-shadow: 0 10px 22px -6px #00000070;
}

.creator-info-avatar-inner {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: #5d4a75;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.creator-info-avatar-base {
    width: 48px;
    height: 55px;
    background-position: 0 0;
    position: relative;
    transform: scale(2);
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.creator-info-avatar-base div {
    position: absolute;
    width: 48px;
    height: 55px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.creator-info-avatar-hair { z-index: 3; }
.creator-info-avatar-top { z-index: 2; }
.creator-info-avatar-bottom { z-index: 1; }

.creator-info-body {
    padding: 20px 26px 26px;
}

.creator-info-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 6px 14px 6px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #fff6da, #f3c969);
    box-shadow: 0 2px 6px -1px #c9962f66, inset 0 0 0 1px #c9962f55;
}

.creator-info-level-badge img {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    image-rendering: auto;
}

.creator-info-level-badge span {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #7a5410;
}

.creator-info-bio {
    margin: 6px 0 16px;
    font-size: 14px;
    line-height: 1.3em;
    color: #4a4458;
}

.creator-info-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: #7c7489;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.creator-info-divider::before,
.creator-info-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e4dff0, transparent);
}

.creator-info-channels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.creator-info-channel-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #7b4fd6, #c2359e);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .03em;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 6px 14px -6px #c2359e70;
    transition: transform .15s ease, box-shadow .15s ease;
}

.creator-info-channel-btn::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: #fff;
    -webkit-mask-image: url('../images/ui-elements/icon-link.png');
    mask-image: url('../images/ui-elements/icon-link.png');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.creator-info-channel-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 18px -6px #c2359e90;
}

.creator-info-footer-link {
    display: inline-block;
    margin-top: 18px;
    font-size: 10.5px;
    color: #b3acc4;
    letter-spacing: .02em;
    text-decoration: none;
}

.creator-info-footer-link:hover {
    color: #8d84a3;
}

@media (max-width: 480px) {
    .interface.creator-info-interface {
        max-width: min(360px, calc(100vw - 33px));
    }
}

@media (max-width: 360px) {
    .creator-info-header {
        padding: 13px 15px 36px;
    }

    .creator-info-name {
		font-size: 16px;
        margin-bottom: 11px;
    }

    .creator-info-avatar-wrap {
        width: 92px;
        height: 92px;
		margin-bottom: -12px;
    }

    .creator-info-avatar-base {
        transform: scale(1);
    }

    .creator-info-body {
		padding: 18px 16px 10px;
    }

    .creator-info-channels {
        gap: 8px;
    }

    .creator-info-channel-btn {
		padding: 7px 11px 8px;
        font-size: 10px;
        gap: 5px;
    }

	.creator-info-eyebrow {
		margin: 0 0 3px;
	}

	.creator-info-level-badge {
		padding: 4px 14px 4px 5px;
	}

	.creator-info-footer-link {
		margin-top: 15px;
	}
}