.login { min-height: 100dvh; box-sizing: border-box; display: grid; align-content: center; justify-items: center; gap: 18px;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.tag { text-align: center; }
.box { width: min(100%, 380px); box-sizing: border-box; padding: 22px; display: grid; gap: 14px; }
.box form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field input { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; font-size: 16px;
  background: color-mix(in srgb, #000 calc(var(--epsa-opacity-surface-input) * 100%), transparent);
  border: 1px solid color-mix(in srgb, #fff calc(var(--epsa-opacity-surface-ring) * 100%), transparent); }
.field input:focus { border-color: var(--epsa-accent); outline: none; }
.or { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--epsa-muted); font-size: var(--epsa-font-size-small); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, #fff 10%, transparent); }
.who { margin: 0; overflow-wrap: anywhere; }
.keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--epsa-muted); font-size: var(--epsa-font-size-small); }
.keys li { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.keys button { all: unset; cursor: pointer; text-decoration: underline; }
.msg { min-height: 1.4em; margin: 0; text-align: center; color: var(--epsa-muted); }
.msg.err { color: var(--epsa-color-status-danger-text); }