/* Meoww PA's sign-in pieces (biometric unlock, 2FA code) inside the AppCloudly glass card. login.js shows/hides
   the sections by id, so only their look changes here. */
.acl-card .subtitle { color: #a9b8d6; font-size: 14px; margin: 0 0 18px; }
.acl-card .field { margin: 0 0 14px; }
.acl-card .error-text { color: #ff8b9c; font-size: 13.5px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 107, 125, .1); border: 1px solid rgba(255, 107, 125, .35); }
.acl-card .biometric-btn {
  width: 100%; height: 52px; border-radius: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 650 15px var(--acl-body); color: var(--acl-ink);
  background: color-mix(in srgb, var(--acl-acc) 16%, rgba(8, 16, 34, .7)); border: 1px solid color-mix(in srgb, var(--acl-acc) 55%, transparent);
  box-shadow: 0 0 30px -10px var(--acl-acc); transition: transform .2s var(--acl-ease), box-shadow .25s var(--acl-ease);
}
.acl-card .biometric-btn:hover { transform: translateY(-1px); box-shadow: 0 0 40px -8px var(--acl-acc); }
.acl-card .auth-divider { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: var(--acl-muted); font-family: var(--acl-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.acl-card .auth-divider::before, .acl-card .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--acl-line); }
.acl-card .totp-input { text-align: center; font-family: var(--acl-mono) !important; font-size: 26px !important; letter-spacing: .5em; height: 58px !important; }
.acl-card .muted { color: #a9b8d6; }
.acl-card .auth-footer-note { margin-top: 18px; font-size: 12px; color: #6f80a0; text-align: center; }
.acl-card .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.acl-card .acl-center { text-align: center; }
.acl-badge img { border-radius: 6px; }