.cn-social-admin-preview {
    --cn-admin-preview-accent: #177b63;
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 22px);
    width: 100%;
    max-width: 680px;
    min-width: 0;
    padding: clamp(18px, 3vw, 26px);
    border: 1px solid #dce8e3;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(17, 55, 45, .08);
    color: #12261f;
    box-sizing: border-box;
}

.cn-social-admin-preview *,
.cn-social-admin-preview *::before,
.cn-social-admin-preview *::after { box-sizing: border-box; }

.cn-social-admin-preview__avatar-link { flex: 0 0 auto; border-radius: 50%; }

.cn-social-admin-preview__avatar {
    display: block;
    width: clamp(76px, 10vw, 104px) !important;
    height: clamp(76px, 10vw, 104px) !important;
    max-width: 104px !important;
    aspect-ratio: 1;
    border: 4px solid #fff;
    border-radius: 50% !important;
    object-fit: cover;
    box-shadow: 0 0 0 2px #dce8e3;
}

.cn-social-admin-preview__content { min-width: 0; }
.cn-social-admin-preview__identity { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.cn-social-admin-preview__name {
    color: #10241d;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-decoration: none;
}
.cn-social-admin-preview__name:hover,
.cn-social-admin-preview__name:focus-visible { color: var(--cn-admin-preview-accent); }
.cn-social-admin-preview__headline { margin: 7px 0 0; color: #667a73; font-size: 1rem; line-height: 1.55; overflow-wrap: anywhere; }
.cn-social-admin-preview__badges { display: inline-flex; align-items: center; gap: 4px; }
.cn-social-admin-preview .cn-social-user-badge {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    cursor: help;
}
.cn-social-admin-preview .cn-social-user-badge img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain; }
.cn-social-admin-preview .cn-social-user-badge[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 20;
    left: 50%;
    bottom: calc(100% + 10px);
    width: max-content;
    max-width: min(300px, 80vw);
    padding: 9px 11px;
    border-radius: 9px;
    background: #17372e;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.cn-social-admin-preview .cn-social-user-badge[data-tooltip]:hover::after,
.cn-social-admin-preview .cn-social-user-badge[data-tooltip]:focus::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

@media (max-width: 520px) {
    .cn-social-admin-preview { align-items: flex-start; padding: 17px; border-radius: 16px; }
    .cn-social-admin-preview__avatar { width: 72px !important; height: 72px !important; }
    .cn-social-admin-preview .cn-social-user-badge[data-tooltip]::after { position: fixed; right: 14px; bottom: 18px; left: 14px; width: auto; max-width: none; transform: translateY(4px); }
    .cn-social-admin-preview .cn-social-user-badge[data-tooltip]:hover::after,
    .cn-social-admin-preview .cn-social-user-badge[data-tooltip]:focus::after { transform: none; }
}