* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #0f1115;
  color: #e6e7eb;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.5rem;
  background: #15181f;
  border-bottom: 1px solid #2a2e38;
}
.brand { font-weight: 700; }
.navlinks { display: flex; gap: 1rem; margin-left: 1rem; }
.navlinks a { color: #9aa0aa; text-decoration: none; padding: 0.25rem 0.5rem; border-radius: 4px; }
.navlinks a:hover { background: #2a2e38; color: #e6e7eb; }
.who { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }

.page { padding: 1.5rem; max-width: 1200px; margin: 0 auto; }
h1, h2 { margin-top: 0; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.card {
  background: #1a1d25;
  border: 1px solid #2a2e38;
  border-radius: 6px;
  padding: 1rem;
}
.card .label { font-size: 0.85rem; color: #9aa0aa; text-transform: uppercase; }
.card .value { font-size: 1.75rem; font-weight: 600; }
.card.alert .value { color: #ffba3a; }

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
th, td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid #2a2e38; }
th { color: #9aa0aa; font-weight: 600; }
tr:hover td { background: #1a1d25; }

form.stack { display: flex; flex-direction: column; gap: 0.75rem; max-width: 360px; }
form.stack label { display: flex; flex-direction: column; gap: 0.25rem; }
input[type=text], input[type=email], input[type=password], textarea, select {
  background: #15181f;
  border: 1px solid #2a2e38;
  color: #e6e7eb;
  padding: 0.5rem;
  border-radius: 4px;
  font: inherit;
}
button {
  background: #3b82f6;
  border: 0;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
}
button:hover { background: #2563eb; }
button.secondary { background: #2a2e38; }

.notice { padding: 0.75rem; border-radius: 4px; margin-bottom: 1rem; }
.notice.error { background: #3b1d1d; border: 1px solid #6e2c2c; color: #ffb3b3; }
.notice.ok { background: #1d3b25; border: 1px solid #2c6e3a; color: #b3ffb3; }
.notice.warn { background: #3b341d; border: 1px solid #6e5a2c; color: #ffe9b3; }

.muted { color: #9aa0aa; font-size: 0.85rem; }
.tag { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 4px; background: #2a2e38; font-size: 0.75rem; }
.tag.warn { background: #6e5a2c; color: #ffe9b3; }
.tag.bad { background: #6e2c2c; color: #ffb3b3; }
.tag.ok { background: #2c6e3a; color: #b3ffb3; }