:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #10161f;
  color: #edf2f7;
}

* { box-sizing: border-box; }

body { margin: 0; background: linear-gradient(160deg, #161e2a 0, #10161f 48rem); }

main { width: min(100% - 32px, 1800px); margin: 0 auto; padding: 48px 0 72px; }

.hero { margin-bottom: 38px; }

.eyebrow {
  margin: 0 0 7px;
  color: #9fd4b1;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1, h2 { margin: 0; color: #fff; letter-spacing: -.035em; }
h1 { font-size: clamp(2.1rem, 6vw, 4.2rem); line-height: 1; }
h2 { font-size: 1.35rem; }
.collection-count, .total-note, .sort-status { color: #aebccc; }
.collection-count { margin: 12px 0 0; font-size: 1rem; }

.section-heading, .table-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.total-note { max-width: 410px; margin: 0; font-size: .82rem; line-height: 1.4; text-align: right; }

.totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  gap: 10px;
  margin: 16px 0 34px;
}

.total-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid #314056;
  border-radius: 10px;
  background: #192331;
}

.total-card strong { display: block; color: #fff; font-size: 1.13rem; overflow: hidden; text-overflow: ellipsis; }
.total-card span { display: block; margin-top: 4px; color: #9facba; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.total-card.primary { border-color: #4aa86e; background: #183527; }

.collection { padding: 22px; border: 1px solid #314056; border-radius: 14px; background: #151f2c; }
.search-label { display: grid; gap: 5px; color: #aebccc; font-size: .78rem; font-weight: 700; }
input { width: min(260px, 45vw); padding: 10px 12px; border: 1px solid #40516a; border-radius: 7px; background: #10161f; color: #fff; font: inherit; }
input:focus, .table-wrap:focus { outline: 2px solid #75c891; outline-offset: 2px; }
.sort-status { min-height: 1.2em; margin: 14px 0 9px; font-size: .82rem; }

.table-wrap { overflow: auto; border: 1px solid #2d3a4f; border-radius: 9px; }
table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: .84rem; }
th, td { padding: 11px 12px; border-bottom: 1px solid #28364a; text-align: right; white-space: nowrap; }
th { position: sticky; top: 0; z-index: 2; padding: 0; background: #223045; color: #d8e4f0; font-size: .72rem; letter-spacing: .02em; text-transform: uppercase; }
td { color: #dce5ee; }
tbody tr:hover td { background: #1c2a3b; }
tbody tr:last-child td, tfoot td { border-bottom: 0; }
.name, .set { text-align: left; }
.name { position: sticky; left: 0; z-index: 1; min-width: 220px; background: #151f2c; color: #fff; font-weight: 700; }
tbody tr:hover .name { background: #1c2a3b; }
th .name { z-index: 3; background: #223045; }
.set { color: #9fd4b1; font-weight: 700; }
.sort-button { width: 100%; min-height: 43px; padding: 10px 12px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-weight: 800; letter-spacing: inherit; text-align: inherit; text-transform: inherit; white-space: nowrap; }
.sort-button:hover, .sort-button:focus-visible { background: #30435e; outline: 0; }
.sort-button[aria-sort="ascending"]::after { content: " ▲"; color: #9fd4b1; }
.sort-button[aria-sort="descending"]::after { content: " ▼"; color: #9fd4b1; }
tfoot td { position: sticky; bottom: 0; z-index: 1; background: #0f1823; color: #fff; font-weight: 800; }
tfoot .name { background: #0f1823; }
.empty { padding: 30px; text-align: center; color: #aebccc; }

@media (max-width: 620px) {
  main { width: min(100% - 22px, 1800px); padding-top: 28px; }
  .section-heading, .table-toolbar { align-items: start; flex-direction: column; }
  .total-note { text-align: left; }
  .collection { padding: 14px; }
  input { width: 100%; }
  .search-label { width: 100%; }
}