.microsoft-login-wrap { margin-top: 1rem; display: grid; gap: .8rem; }
.microsoft-login-separator { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; color: var(--slate-500); font-size: .78rem; }
.microsoft-login-separator::before, .microsoft-login-separator::after { content: ""; height: 1px; background: #dce7ef; }
.microsoft-login-button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 48px; text-decoration: none; }
.microsoft-login-mark { display: grid; grid-template-columns: repeat(2, 7px); grid-template-rows: repeat(2, 7px); gap: 2px; width: 16px; height: 16px; flex: 0 0 auto; }
.microsoft-login-mark span { display: block; background: currentColor; }
.microsoft-login-hint { margin: 0; color: var(--slate-600); font-size: .76rem; line-height: 1.45; text-align: center; }
@media (max-width: 520px) { .microsoft-login-button { width: 100%; } }
.microsoft-organization-card { max-width: 560px; }
.microsoft-organization-form { display: grid; gap: 1rem; }
.microsoft-organization-form label { display: grid; gap: .45rem; }
.microsoft-organization-form input { width: 100%; }
.microsoft-connection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.microsoft-connection-grid .form-wide { grid-column: 1 / -1; }
.microsoft-secret-state { display: inline-flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.microsoft-sso-url { overflow-wrap: anywhere; }
@media (max-width: 720px) { .microsoft-connection-grid { grid-template-columns: 1fr; } .microsoft-connection-grid .form-wide { grid-column: auto; } }