Making Zen more Zen

### Describe the issue

Coming from CrowdIn, the Weblate translation inferface is a bit... cluttered. There's lacking visual hierarchy, and while I've found the Zen view to be useful, it wasn't super zen.

So I've muddled around a bit with some CSS and while I don't presently have the time to set up a local build to get acquainted with how Weblate is built and send a PR, I would like to provide you with the changes I made for your consideration. Someone who has contributed before will likely be able to adapt these changes into the CSS files fairly easily.

Before:

After:


Hopefully you agree it's a little more easy on the eyes with less borders, more spacing, and de-emphasizing some elements.

Would be nice to take it a bit further by expanding the status border on the left to the entire block, however I could not accomplish that with CSS alone due to the markup structure.

The custom CSS:

``` css
.zen-unit {
border-bottom: 1em solid #fff;
border-top: 1em solid #fff;
}
.zen-unit tr td {
border: none !important;;
}

/* Meta text/edit link */
.zen-unit tr:nth-child(1) td {
color: #777;
padding: 1.5rem 1.5rem 0 2.25rem;
font-size: 0.8em;
}

.zen-unit {
background: #fafafa;
border-radius: 4px;
overflow: hidden;
}
.zen-unit tr td:last-child {
padding-right: 1.5rem !important;
}
.zen-unit tr:last-child td {
padding-bottom: 1rem !important;
}
.zen-unit:first-child {
border-radius: 4px;
overflow: hidden;
}
.zen-unit:nth-child(2n) {
background: #fafafa;
}

.zen .translatetext {
background: transparent;
padding: 0 0 0 1.25rem;
}
.zen .translatetext .language {
display: none;
}
.zen .translatetext .form-group {
display: flex;
margin-bottom: 0;
}
.zen .translatetext .form-group .language {
padding-right: 1em;
padding-top: 0.25em
}
.zen .translatetext .form-group .list-group {
flex-grow: 1;
}
.zen .translatetext .form-group .list-group-item {
background: transparent;
border: 0;
padding: 0;
color: #1c252e;
}
.zen .translatetext .language {
display: none;
}
.zen .translator {
padding: 0.5rem 1.25rem;
}
.zen .translation-item > label {
font-weight: normal;
color: #777;
font-size: 0.8em;
padding: 0;
margin-top: 0.75rem;
margin-bottom: 0;
}
.zen .translation-item .translation-editor {
background: #fff;
color: #000;
padding: 1rem;
}

.zen .translator .form-group {
margin-bottom: 0;
margin-top: 0.5rem;
}
.zen .translator .checkbox label {
font-weight: normal;
}
.zen .btn-sidebar {
left: 48px;
}
```

### I already tried

- [X] I've read and searched [the documentation](https://docs.weblate.org/).
- [X] I've searched for similar issues in this repository.

### Steps to reproduce the behavior

Not applicable.

### Expected behavior

_No response_

### Screenshots

_No response_

### Exception traceback

_No response_

### How do you run Weblate?

weblate.org service

### Weblate versions

_No response_

### Weblate deploy checks

_No response_

### Additional context

_No response_