:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
body { margin: 0; padding: 0 1rem 2rem; }
.site-header { padding: 1rem 0; font-weight: bold; }
.auth-form { max-width: 360px; margin: 2rem auto; display: flex; flex-direction: column; gap: 0.75rem; }
.auth-form label { display: flex; flex-direction: column; gap: 0.25rem; }
.form-error { color: #c0392b; }
.form-success { color: #1e8449; }

.inline-form { display: inline; }

.badge-list { list-style: none; padding: 0; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.badge-earned {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: #1e8449;
  color: #fff;
  font-weight: bold;
}
.badge-earned::before { content: '✓ '; }
.badge-locked {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: #d0d0d0;
  color: #6b6b6b;
  opacity: 0.6;
}