:root {
  font-family: Inter, system-ui, sans-serif;
  color: #162e28;
  background: #eef3ef;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 34rem; margin: auto; padding: 2rem 1rem; }
header { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.5rem; }
header img { border-radius: .8rem; }
h1 { margin: 0; font-size: 1.55rem; }
h2, label { display: block; font-size: 1rem; font-weight: 700; margin: 0; }
p { margin: .4rem 0 0; color: #465d55; overflow-wrap: anywhere; }
p:empty { display: none; }
.panel { background: #fff; border: 1px solid #cddbd4; border-radius: 1rem; padding: 1.2rem; margin-bottom: .9rem; }
input, select, button {
  font: inherit;
  min-height: 2.9rem;
  border-radius: .6rem;
  padding: .65rem .85rem;
}
input, select { width: 100%; border: 1px solid #819990; margin-top: .55rem; background: #fff; color: inherit; }
button { background: #184b3d; color: white; border: 1px solid transparent; font-weight: 650; cursor: pointer; }
form button { width: 100%; margin-top: .75rem; }
.secondary { margin-left: auto; background: transparent; border-color: #819990; color: #184b3d; }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 3px solid #307a65; outline-offset: 2px; }
[hidden] { display: none !important; }
form label:not(:first-child), #register, #edit-photo { margin-top: .9rem; }
ul { list-style: none; margin: .8rem 0 0; padding: 0; }
li + li { margin-top: .4rem; }
li button { width: 100%; text-align: left; }
.pagination { display: flex; gap: .5rem; }
.pagination button { margin: .5rem 0 0; }
#portrait { display: block; object-fit: cover; border-radius: .65rem; margin-bottom: .85rem; }