.social-row .soc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
    color: rgba(255, 255, 255, .72);
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
}
.social-row .soc:hover {
    color: #fff;
    background: var(--c-accent);
    border-color: var(--c-accent);
    transform: translateY(-3px);
}
.social-row .soc:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}
html.social-qr-open { overflow: hidden; }
.social-qr-dialog {
    box-sizing: border-box;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 34px 24px 28px;
    overflow-y: auto;
    border: 1px solid rgba(31, 48, 60, .1);
    border-radius: 20px;
    color: var(--c-ink, #20303d);
    background: #fff;
    text-align: center;
    box-shadow: 0 20px 80px rgba(0, 0, 0, .2);
}
.social-qr-dialog::backdrop { background: rgba(16, 28, 38, .58); }
.social-qr-close {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #64717b;
    background: transparent;
    font: 28px/1 Arial, sans-serif;
    cursor: pointer;
}
.social-qr-close:hover { background: #f3f4f5; }
.social-qr-close:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -4px; }
.social-qr-brand { margin: 0 0 6px; color: #7c858b; font-size: 12px; letter-spacing: .12em; }
.social-qr-dialog h2 { margin: 0 0 22px; font-size: 24px; font-weight: 500; }
.social-qr-frame {
    display: grid;
    place-items: center;
    width: min(256px, 100%);
    aspect-ratio: 1;
    margin: 0 auto;
    padding: 8px;
    border: 1px solid #eceff1;
    border-radius: 12px;
    background: #fff;
}
.social-qr-image { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.social-qr-empty { margin: 0; color: #8a9298; font-size: 14px; }
.social-qr-dialog [hidden] { display: none; }
.social-qr-hint { margin: 18px 0 0; color: #727d84; font-size: 13px; line-height: 1.7; }
@media (prefers-reduced-motion: reduce) {
    .social-row .soc { transition: none; }
}