.mg-app .mg-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--mg-space-2); min-height: var(--mg-control-height); min-width: var(--mg-control-height); padding: var(--mg-space-2) var(--mg-space-4); margin: 0; border: 1px solid transparent; border-radius: var(--mg-radius-md); font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1.25; white-space: normal; text-align: center; vertical-align: middle; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.mg-app .mg-button--primary { background: var(--mg-color-primary); color: var(--mg-surface); border-color: var(--mg-color-primary); }
.mg-app .mg-button--primary:hover,
.mg-app .mg-button--primary:active { background: var(--mg-color-primary-strong); color: var(--mg-surface); border-color: var(--mg-color-primary-strong); }
.mg-app .mg-button--secondary { background: var(--mg-surface-alt); color: var(--mg-color-primary-strong); border-color: var(--mg-border); }
.mg-app .mg-button--outline { background: var(--mg-surface); color: var(--mg-color-primary-strong); border-color: var(--mg-color-primary-strong); }
.mg-app .mg-button--secondary:hover,
.mg-app .mg-button--outline:hover { background: var(--mg-surface-alt); color: var(--mg-color-primary-strong); border-color: var(--mg-color-primary-strong); }
.mg-app .mg-button--danger { color: var(--mg-danger); background: var(--mg-danger-surface); border-color: var(--mg-danger); }
.mg-app .mg-button--danger:hover { color: var(--mg-surface); background: var(--mg-danger); }
.mg-app .mg-button--link { color: var(--mg-color-primary-strong); background: transparent; text-decoration: underline; }
.mg-app .mg-button--link:hover { color: var(--mg-color-primary); background: var(--mg-surface-alt); }
.mg-app .mg-button:disabled,
.mg-app .mg-button[aria-disabled="true"] { background: var(--mg-surface-alt); border-color: var(--mg-border); color: var(--mg-text-muted); opacity: 1; cursor: not-allowed; }
.mg-app .mg-button[aria-busy="true"] { cursor: progress; }
.mg-app .mg-button[aria-busy="true"]::before { content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--mg-radius-pill); animation: mg-spin .8s linear infinite; }
.mg-app :is(.mg-button,.mg-input,.mg-select,.mg-nav-link,.mg-menu-toggle):focus-visible { outline: 2px solid var(--mg-surface); outline-offset: 0; box-shadow: var(--mg-shadow-focus); }
.mg-app .mg-access-fields { padding-top: var(--mg-space-5); padding-bottom: var(--mg-space-4); }
.mg-app .mg-field { margin-bottom: var(--mg-space-5); }
.mg-app .mg-label { display: block; font-size: .875rem; font-weight: 600; color: var(--mg-text); margin-bottom: var(--mg-space-2); }
.mg-app .mg-input,
.mg-app .mg-select { font-family: inherit; font-size: 1rem; line-height: 1.5; min-height: var(--mg-control-height); height: auto; padding: var(--mg-space-2) var(--mg-space-3); color: var(--mg-text); background: var(--mg-surface); border: 1px solid var(--mg-control-border); border-radius: var(--mg-radius-md); width: 100%; }
.mg-app .mg-input::placeholder { color: var(--mg-text-muted); opacity: 1; }
.mg-app .mg-input:focus,
.mg-app .mg-select:focus { border-color: var(--mg-color-primary); }
.mg-app .mg-input:disabled { background: var(--mg-surface-alt); color: var(--mg-text-muted); }
.mg-app .mg-input[aria-invalid="true"],
.mg-app .mg-input.is-invalid { border-color: var(--mg-danger); }
.mg-app .mg-help { font-size: .875rem; line-height: 1.5; color: var(--mg-info); background: var(--mg-info-surface); border-radius: var(--mg-radius-md); overflow-wrap: anywhere; }
.mg-app .mg-help:empty { display: none; }
.mg-app .mg-error { font-size: .875rem; color: var(--mg-danger); }
.mg-app .mg-access-panel { border: 0; border-radius: var(--mg-radius-lg); box-shadow: none; margin: 0; }
.mg-app .mg-access-panel > .card-body { padding: var(--mg-space-4) 0; background: transparent; }
.mg-app .mg-access-heading { font-weight: 600; padding: 0 0 var(--mg-space-5); color: var(--mg-color-primary-strong); }
.mg-app .mg-access-panel .input-group-text { color: var(--mg-text-muted); background: var(--mg-surface-alt); border-color: var(--mg-control-border); border-radius: 0 var(--mg-radius-md) var(--mg-radius-md) 0; }
.mg-app .mg-otp { font-size: 1.25rem; text-align: center; letter-spacing: .2em; max-width: 100%; margin-inline: auto; }
.mg-app .mg-access-fields .mg-button { margin-top: var(--mg-space-2); }
.mg-app #logins-part > .mg-button,
.mg-app #logins-partAncestry > .mg-button { margin: var(--mg-space-2); }
@keyframes mg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mg-app .mg-button { transition: none; }
  .mg-app .mg-button[aria-busy="true"]::before { animation: none; }
}