.accounts-login { max-width: 490px; margin-inline: auto; }
.accounts-login h2 { margin-bottom: .75rem; }
.accounts-login form, .accounts-login > .field:first-of-type { margin-top: 1rem; }
.accounts-signout { border-top: 1px solid var(--line); padding-top: .3rem; }
.accounts-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; }
.accounts-roles, .accounts-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: .65rem .9rem;
}
.accounts-roles { margin: 1rem 0; }
.accounts-roles > div { border: 1px solid var(--line); border-radius: 9px; padding: .65rem .8rem; }
.accounts-roles dt { font-weight: 700; }
.accounts-roles dd { margin: .2rem 0 0; color: var(--muted); font-size: .89rem; }
.accounts-hint { background: var(--accent-light); border-radius: 8px; padding: .65rem .8rem; }
.accounts-create { margin: 1rem 0 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.accounts-fields { margin-top: .5rem; }
.accounts-user { border: 1px solid var(--line); border-radius: 8px; padding: .65rem .8rem; margin: .55rem 0; }
.accounts-user summary { cursor: pointer; }
.accounts-user-state { color: var(--muted); font-size: .88rem; margin-left: .55rem; }
.accounts-user[open] summary { margin-bottom: .6rem; }
.accounts-email { overflow-wrap: anywhere; }