/* ════════════════════════════════════════════════════════════════════
   VibeeCode — вход через внешние аккаунты: ряд кнопок на страницах
   входа/регистрации и список привязок в кабинете. Отдельный файл, а не
   styles.css: тот вшивается в лендинг целиком, и лишние правила там
   оплачивались бы LCP. Подключают login/register/oauth/dashboard и learn.
   ════════════════════════════════════════════════════════════════════ */

.auth-social { margin: 22px 0 6px; }
.auth-social-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    color: var(--muted-2);
    font-size: 12.5px;
    white-space: nowrap;
}
.auth-social-sep::before,
.auth-social-sep::after { content: ''; flex: 1; height: 1px; background: var(--border-soft); }

.auth-social-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.soc {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    border-radius: 13px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.03);
    color: var(--text);
    text-decoration: none;
    transition: transform .16s, border-color .16s, background .16s, box-shadow .16s;
}
.soc svg { width: 22px; height: 22px; display: block; }
.soc:hover,
.soc:focus-visible {
    transform: translateY(-1px);
    border-color: var(--accent);
    background: rgba(139,92,246,.09);
    box-shadow: 0 0 0 4px rgba(139,92,246,.12);
    outline: none;
}
.soc:active { transform: none; }

.auth-social-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted-2); }
.auth-social-note a { color: var(--muted); }
.auth-social-note a:hover { color: var(--text); }

/* ─────────────── Кабинет: пароль и привязки ─────────────── */
.oauth-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.oauth-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: rgba(255,255,255,.02);
}
.oauth-list li svg { width: 20px; height: 20px; flex: none; }
.oauth-list .oauth-name { flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; }
.oauth-list .oauth-name small {
    display: block;
    color: var(--muted-2);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.oauth-list form { margin: 0; }
.oauth-list .btn-sm { padding: 6px 12px; font-size: 12.5px; white-space: nowrap; }

.pass-form label { display: block; font-size: 13.5px; font-weight: 550; margin-bottom: 12px; color: var(--text); }
.pass-form input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 11px 13px;
    border-radius: 11px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.03);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.pass-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(139,92,246,.16); }

@media (max-width: 420px) {
    .auth-social-row { gap: 8px; }
    .soc { height: 42px; border-radius: 11px; }
}