:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f4f7f7;
  color: #172729;
}

* { box-sizing: border-box; }
body { margin: 0; }
main { margin: 0 auto; max-width: 1280px; padding: 28px 22px 48px; }
.page-heading { align-items: flex-end; display: flex; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.eyebrow { color: #547277; font-size: .72rem; letter-spacing: .08em; margin: 0; }
h1 { font-size: 2.4rem; margin: 7px 0 0; }
h2 { font-size: 1.08rem; margin: 0; }
.freshness { color: #547277; display: flex; flex-direction: column; font-size: .82rem; gap: 5px; text-align: right; }
.panel { background: #fff; border: 1px solid #dbe6e7; margin-bottom: 18px; }
.panel-heading { border-bottom: 1px solid #e6eeee; padding: 15px 18px; }
.table-wrap { overflow-x: auto; padding: 0 18px 16px; }
table { border-collapse: collapse; min-width: 620px; width: 100%; }
th, td { border-bottom: 1px solid #edf2f2; padding: 11px 10px; text-align: left; white-space: nowrap; }
th { color: #547277; font-size: .75rem; font-weight: 600; }
td { font-size: .88rem; }
.muted { color: #6b7f82; font-size: .82rem; }
.resource-pool-status { margin: 0; padding: 0 18px 16px; }
.error { background: #fff2f0; border: 1px solid #efc7c1; color: #a53d31; margin: 0 0 18px; padding: 12px 14px; }

@media (max-width: 640px) {
  main { padding: 20px 14px 36px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .freshness { text-align: left; }
  h1 { font-size: 1.8rem; }
  .table-wrap { padding-left: 12px; padding-right: 12px; }
}