* { box-sizing: border-box; }
body {
  margin: 0;
  font: 16px/1.45 "Segoe UI", sans-serif;
  color: #1c1f26;
  background: #f3f4f6;
}
header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-end;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #e2e4e8;
}
header strong { margin-bottom: 6px; }
nav { display: flex; flex-wrap: wrap; gap: 16px 24px; flex: 1; }
.group { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.cap { width: 100%; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #5c6573; }
nav a { color: #3a4150; text-decoration: none; padding: 4px 0; }
nav a.on { color: #0b57d0; font-weight: 650; }
form.bar { margin: 0; display: flex; align-items: center; }
input::placeholder, textarea::placeholder { color: #8b93a1; }
button.presence { background: #fff; color: #1c1f26; border-color: #cfd3da; }
button.presence.on { background: #0d6b3a; border-color: #0d6b3a; color: #fff; }
main { padding: 16px; max-width: 880px; }
.lead { margin: 0 0 16px; color: #3a4150; }
fieldset { border: 1px solid #e2e4e8; background: #fff; margin: 0 0 16px; padding: 12px; }
legend { padding: 0 6px; font-weight: 650; }
.hint { color: #5c6573; font-size: 0.85rem; }
.badge { color: #5c6573; font-weight: 400; font-size: 0.8rem; }
details { background: #fff; border: 1px solid #e2e4e8; padding: 12px; margin: 0 0 16px; }
summary { cursor: pointer; font-weight: 650; }
details form { margin-top: 12px; }
body.guest main { max-width: 420px; margin: 8vh auto; background: #fff; border: 1px solid #e2e4e8; padding: 20px; }
h1 { font-size: 1.35rem; margin: 0 0 12px; }
h2 { font-size: 1.05rem; margin: 20px 0 8px; }
form { display: grid; gap: 8px; margin: 0 0 16px; }
label { display: grid; gap: 4px; font-size: 0.92rem; }
input, textarea, select, button {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid #cfd3da;
  background: #fff;
  color: inherit;
}
textarea { min-height: 88px; resize: vertical; }
button { width: fit-content; cursor: pointer; background: #0b57d0; color: #fff; border-color: #0b57d0; }
button.quiet { background: #fff; color: #1c1f26; border-color: #cfd3da; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.cards a {
  display: block;
  background: #fff;
  border: 1px solid #e2e4e8;
  padding: 12px;
  text-decoration: none;
  color: inherit;
}
.cards strong { display: block; font-size: 1.4rem; }
.list { display: grid; gap: 8px; }
.item { background: #fff; border: 1px solid #e2e4e8; padding: 12px; }
.item form { margin: 8px 0 0; }
.muted { color: #5c6573; }
.error { background: #fde8e8; border: 1px solid #f2b8b8; padding: 8px 10px; }
.ok { color: #0d6b3a; }
dl { display: grid; grid-template-columns: 12rem 1fr; gap: 6px 12px; }
@media (max-width: 640px) {
  dl { grid-template-columns: 1fr; }
  header form { margin-left: auto; }
}