.blocked,
.app.hidden,
.hidden {
  display: none !important;
}

body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 1rem 1.25rem 2rem;
  line-height: 1.5;
  max-width: 52rem;
}

.nav a {
  color: #1a5fb4;
}

.header h1 {
  margin-bottom: 0.25rem;
}

.lede {
  color: #444;
}

.panel label {
  display: block;
  margin: 0.75rem 0;
}

.panel input,
.panel select {
  display: block;
  width: 100%;
  max-width: 40rem;
  margin-top: 0.25rem;
  padding: 0.4rem 0.5rem;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.btn {
  padding: 0.45rem 0.85rem;
  border: 1px solid #bbb;
  border-radius: 6px;
  background: #f6f6f6;
  cursor: pointer;
}

.btn--primary {
  background: #1a5fb4;
  color: #fff;
  border-color: #1a5fb4;
}

.status {
  min-height: 1.25rem;
}

.status--ok {
  color: #067d17;
}

.status--err {
  color: #c01c28;
}

.command {
  background: #111;
  color: #eee;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  overflow-x: auto;
  white-space: pre-wrap;
}