.social-login { display: grid; gap: 10px; margin: 22px 0 12px; }
.social-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; box-sizing: border-box; padding: 12px 18px; border: 1px solid transparent; border-radius: 12px; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: filter .15s ease; }
.social-button-yandex { background: #fff; color: #141414; border-color: #ddd; }
.social-button-vk { background: #0077ff; color: #fff; }
.social-button:hover { filter: brightness(.93); }
.social-button:focus-visible { outline: 3px solid #7aaeff; outline-offset: 3px; }
.social-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; font-size: 18px; font-weight: 800; }
.social-button-yandex .social-mark { border-radius: 50%; background: #fc3f1d; color: #fff; }
.login-note.social-help { line-height: 1.55; font-size: 12px; color: var(--muted, #66778d); }
.social-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--muted, #66778d); font-size: 12px; }
.social-divider::before, .social-divider::after { content: ''; flex: 1; height: 1px; background: rgba(150,161,180,.3); }
.social-accounts { margin-top: 24px; }
.social-account { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(150,161,180,.2); }
.social-account small { display: block; margin-top: 6px; color: var(--muted, #66778d); }
.social-account form { margin: 0; }
.social-account .social-button { width: auto; }
@media (max-width: 520px) { .social-account { align-items: stretch; flex-direction: column; } .social-account .social-button { width: 100%; } }
@media (max-width: 760px) { .portal-nav, .portal-nav-right { flex-wrap: wrap; } .portal-nav-right { margin-left: 0; } }