.page {
  min-height: 100vh;
  padding: 24px;
  background: #eef3f8;
}

.shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

.toolbar,
.banner,
.card,
.item {
  background: #ffffff;
  border: 1px solid #d8e2ee;
  border-radius: 8px;
}

.toolbar,
.banner,
.card {
  padding: 20px;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.toolbarTitle {
  display: grid;
  gap: 6px;
}

.toolbarTitle p,
.meta,
.subtle {
  color: #59708a;
}

.buttonRow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button,
.buttonSecondary {
  border: none;
  border-radius: 4px;
  padding: 12px 16px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.button {
  background: #0b6bcb;
  color: #ffffff;
}

.buttonSecondary {
  background: #edf5fc;
  color: #0a4f96;
  border: 1px solid #d3e2ef;
}

.card {
  display: grid;
  gap: 16px;
}

.header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.headerBlock {
  display: grid;
  gap: 6px;
}

.title {
  font-size: 28px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.stat {
  border: 1px solid #e1ebf4;
  border-radius: 8px;
  padding: 16px;
  background: #f8fbfd;
  display: grid;
  gap: 8px;
}

.stat strong {
  font-size: 28px;
}

.itemList {
  display: grid;
  gap: 16px;
}

.item {
  padding: 18px;
  display: grid;
  gap: 14px;
  break-inside: avoid;
  page-break-inside: avoid;
}

.itemTop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.itemTitle {
  display: grid;
  gap: 6px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  background: #dbeafe;
  color: #0a4f96;
}

.badge[data-status="success"] {
  background: #def5e8;
  color: #1f8f58;
}

.badge[data-status="failed"] {
  background: #fde2e5;
  color: #c43d4b;
}

.badge[data-status="partial"],
.badge[data-status="running"] {
  background: #fff1da;
  color: #d17b17;
}

.badge[data-status="not-run"] {
  background: #edf2f7;
  color: #59708a;
}

.summary {
  line-height: 1.7;
}

.metaGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.metaCell {
  border: 1px solid #e3ebf3;
  border-radius: 8px;
  background: #f8fbfd;
  padding: 12px 14px;
  display: grid;
  gap: 6px;
}

.metaCell span {
  color: #59708a;
  font-size: 12px;
}

.empty {
  padding: 18px;
  border: 1px dashed #c9d8e6;
  border-radius: 8px;
  background: #f9fbfd;
  color: #59708a;
}

.loadingWrap {
  min-height: 60vh;
  display: grid;
  place-items: center;
}

.loadingCard {
  width: min(420px, 100%);
  padding: 24px;
  border-radius: 8px;
  border: 1px solid #d8e2ee;
  background: rgba(255, 255, 255, 0.96);
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}

.spinner {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid rgba(11, 107, 203, 0.16);
  border-top-color: #0b6bcb;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media print {
  .page {
    padding: 0;
    background: #ffffff;
  }

  .toolbar {
    display: none !important;
  }

  .shell {
    width: 100%;
    gap: 12px;
  }

  .card,
  .item,
  .stat,
  .metaCell {
    box-shadow: none;
  }
}

@media (max-width: 960px) {
  .stats,
  .metaGrid {
    grid-template-columns: 1fr;
  }

  .toolbar,
  .header,
  .itemTop {
    flex-direction: column;
    align-items: stretch;
  }
}
