:root {
  --ink: #001E3C;
  --ink-soft: #4a5b70;
  --line: #d9e0e8;
  --accent: #FC845A;
  --page: #f6f8fa;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--page);
  line-height: 1.5;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: var(--ink);
  color: #fff;
}

.bar h1 { font-size: 1.05rem; margin: 0; font-weight: 600; }

.version {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

main { max-width: 820px; margin: 0 auto; padding: 20px 16px 48px; }

.lede { color: var(--ink-soft); margin-top: 0; }

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
tfoot td { font-weight: 600; border-bottom: 0; background: #fbfcfd; }

.chip {
  display: inline-block;
  font-size: 0.76rem;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  white-space: nowrap;
}

.chip.ready { background: #eef3f8; }
.chip.packing { background: #fff; }
.chip.hold { background: #fff0e9; border-color: var(--accent); color: #9c3f16; }

.note { color: var(--ink-soft); font-size: 0.88rem; }

@media (max-width: 560px) {
  th:nth-child(2), td:nth-child(2) { display: none; }
  main { padding: 16px 12px 40px; }
}