/* M20 U8: passkey controls (login, re-auth, /account) and the mobile install hint. Separate from
   nocturne.css on purpose (no shared hunk); tokens come from nocturne.css. */
.passkey-box { margin-top: var(--s5); text-align: center; }
.passkey-box[hidden], .passkey-add[hidden], .install-hint[hidden] { display: none; }
.passkey-or { display: flex; align-items: center; gap: var(--s3); margin: 0 0 var(--s3); font-size: 13px; color: var(--muted); }
.passkey-or::before, .passkey-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.passkey-box .btn { width: 100%; min-height: 44px; font-size: 15px; }
.passkey-hint { margin: var(--s2) 0 0; font-size: 12px; color: var(--muted); }
.passkey-message { min-height: 1.4em; margin: var(--s2) 0 0; font-size: 13px; color: var(--text-2); }
.passkey-section .table td.passkey-manage { white-space: normal; }
.passkey-manage { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.passkey-rename { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.passkey-rename input[type="text"] { min-height: 36px; min-width: 0; max-width: 14em; }
.passkey-add { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); }
.passkey-add .btn { min-height: 44px; }

.install-hint {
  position: fixed; left: var(--s3); right: var(--s3); bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px)); z-index: 40;
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface, var(--bg));
  color: var(--text); font-size: 13px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.install-hint [data-install-text] { flex: 1; }
.install-hint .btn { min-height: 40px; }
@media (min-width: 821px) { .install-hint { display: none; } }