:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: #111417;
  color: #e8ecef;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #111417; }
button, input { font: inherit; }

.shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 32px 0 56px;
}

.topbar, .toolbar, .section-title, .list-row, .login-form {
  display: flex;
  align-items: center;
}

.topbar { justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.eyebrow { font-size: 12px; letter-spacing: 0.18em; color: #7f8a93; }
h1 { margin: 6px 0 0; font-size: clamp(24px, 4vw, 38px); }
h2 { margin: 0; font-size: 17px; }

.panel {
  border: 1px solid #2c343a;
  background: #171c20;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 18px;
}

.login-panel { max-width: 620px; }
.login-panel p { color: #909aa2; }
.login-form { gap: 10px; }
.login-form input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid #374149;
  border-radius: 7px;
  background: #101417;
  color: #e8ecef;
}

button {
  border: 1px solid #4b6577;
  border-radius: 7px;
  padding: 10px 14px;
  background: #263d4c;
  color: #f0f4f6;
  cursor: pointer;
}
button:hover { filter: brightness(1.12); }
button.secondary { background: #1d2327; border-color: #3a434a; }

.toolbar { justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.status { color: #aab4bb; }
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.card { min-height: 132px; }
.metric { font-size: 22px; font-weight: 650; margin: 18px 0 8px; }
.muted { color: #8f9aa2; }
.good { color: #8fc49b; }
.bad, .error { color: #d68f8f; }
.error { margin-top: 12px; }

.section-title { justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.badge {
  min-width: 30px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #232a2f;
  text-align: center;
  color: #aeb8bf;
}
.list { border-top: 1px solid #2a3238; }
.list-row { justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid #242b30; }
.list-row code { overflow-wrap: anywhere; color: #cbd5da; }
.list.empty { color: #7f8990; padding-top: 14px; }
.hidden { display: none !important; }

@media (max-width: 820px) {
  .cards { grid-template-columns: 1fr; gap: 0; }
  .shell { width: min(100% - 24px, 1180px); padding-top: 20px; }
  .topbar { align-items: flex-start; }
  .login-form { align-items: stretch; flex-direction: column; }
  .list-row { align-items: flex-start; flex-direction: column; gap: 5px; }
}