/* Login mit Steam und Discord, verknüpfte Konten (signin.js). Bewusst ohne Logos und Farben der Anbieter. */

.or { display:flex; align-items:center; gap:12px; margin:22px 0 14px; color:var(--muted); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--line); }
.sso { display:grid; gap:10px; }
.sso .btn { justify-content:center; }
.sso-msg:empty { display:none; }
.sso-msg { margin-top:10px; }

.conns-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px; margin-top:22px; }
.conn { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
.conn.on { border-color:rgba(63,182,122,.45); }
.conn-h { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.conn-h b { font-size:1rem; }
.conn p { margin:0; }
.conn p a { text-decoration:underline; text-underline-offset:2px; }
.conn .form-msg:empty { display:none; }

.conns { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.conn-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--line); border-radius:999px; font-size:.8rem; color:var(--muted); }
.conn-chip b { color:var(--fg); font-weight:600; }
.conn-chip:hover { border-color:var(--accent); color:var(--fg); }

@media (max-width:560px) {
  .conns-list { grid-template-columns:1fr; }
}