:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033;
  background: #f5f7fb;
  font-size: 14px;
}

* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 1500px; margin: 0 auto; padding: 24px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
h1 { margin: 0 0 4px; font-size: 24px; }
p { margin: 0; }
button, input, select { font: inherit; }
button {
  border: 1px solid #b9c2d4;
  border-radius: 7px;
  padding: 8px 13px;
  background: #fff;
  color: inherit;
  cursor: pointer;
}
button:hover { border-color: #596780; }
input, select {
  min-width: 0;
  border: 1px solid #c9d0dc;
  border-radius: 6px;
  padding: 7px 9px;
  background: #fff;
  color: inherit;
}
.key-form {
  max-width: 520px;
  margin: 80px auto;
  padding: 24px;
  border: 1px solid #d6dce7;
  border-radius: 10px;
  background: #fff;
}
.key-form > div { display: flex; gap: 8px; margin: 8px 0; }
.key-form input { flex: 1; }
.key-form p, #updated { color: #637087; }
.message {
  padding: 12px;
  margin: 12px 0;
  border: 1px solid #d78888;
  border-radius: 7px;
  color: #8a2424;
  background: #fff3f3;
}
.summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.metric {
  min-width: 110px;
  padding: 10px 12px;
  border: 1px solid #d6dce7;
  border-radius: 8px;
  background: #fff;
}
.metric strong { display: block; font-size: 20px; }
.metric span { color: #637087; }
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px 14px;
  margin-bottom: 12px;
}
.filters label:not(.check) { display: grid; gap: 4px; }
.check { display: flex; align-items: center; gap: 6px; padding-bottom: 7px; }
.check input { margin: 0; }
.table-wrap { overflow-x: auto; border: 1px solid #d6dce7; border-radius: 8px; background: #fff; }
table { width: 100%; border-collapse: collapse; min-width: 1080px; }
th, td { padding: 9px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid #e4e8ef; }
th { position: sticky; top: 0; background: #eef2f8; color: #4a566a; font-size: 12px; text-transform: uppercase; }
tr:last-child td { border-bottom: 0; }
tr.attention { background: #fffaf4; }
.project-name { font-weight: 650; }
.namespace, .muted { color: #6a768a; font-size: 12px; }
.status {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 8px;
  background: #e6eaf1;
  font-weight: 650;
  white-space: nowrap;
}
.status-success { color: #17613a; background: #def4e7; }
.status-failed, .status-inaccessible { color: #912b2b; background: #fde3e3; }
.status-running, .status-pending, .status-preparing, .status-waiting_for_resource { color: #805b00; background: #fff0bf; }
.links { display: flex; flex-wrap: wrap; gap: 7px; }
a { color: #245fb5; }
.error-button { padding: 4px 7px; font-size: 12px; }
.error-row td { padding: 0 10px 12px; background: #fffaf4; }
pre {
  max-height: 360px;
  overflow: auto;
  margin: 0;
  padding: 12px;
  border-radius: 6px;
  color: #e7ebf3;
  background: #19202b;
  white-space: pre-wrap;
  word-break: break-word;
}
.empty { padding: 30px; text-align: center; color: #637087; }
.stale { color: #9a4b00 !important; font-weight: 650; }

@media (max-width: 700px) {
  main { padding: 14px; }
  header { align-items: flex-start; }
  .filters { display: grid; grid-template-columns: 1fr 1fr; }
  .filters label:not(.check) { width: 100%; }
  .filters input, .filters select { width: 100%; }
  .key-form { margin: 40px auto; }
}

@media (prefers-color-scheme: dark) {
  :root { color: #e6e9ef; background: #11151c; }
  button, input, select, .key-form, .metric, .table-wrap { color: inherit; background: #1a202a; border-color: #394352; }
  th { color: #bfc7d3; background: #232b37; }
  th, td { border-color: #303948; }
  tr.attention, .error-row td { background: #272218; }
  .message { color: #ffb4b4; background: #321d22; border-color: #7c3d47; }
  a { color: #82b5ff; }
}