:root {
  color-scheme: light;
  --ink: #17211b;
  --muted: #68736c;
  --accent: #146c43;
  --accent-dark: #0b4f30;
  --paper: #fffefa;
  --line: #dfe5df;
  --wash: #f3f6f2;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: #edf2ed;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
.container { width: min(96vw, 1680px); margin: 0 auto; padding: 48px 0 36px; }
header { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 24px; }
.eyebrow { margin: 0 0 4px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(32px, 4vw, 52px); font-weight: 600; }
.subtitle { margin: 7px 0 0; color: var(--muted); }
.search { width: min(520px, 100%); }
.search label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; }
.search-row { display: flex; gap: 8px; }
input, select, button, .reset { border-radius: 7px; font: inherit; }
input[type="search"] { min-width: 0; flex: 1; padding: 11px 13px; border: 1px solid #b9c4bc; background: var(--paper); }
input:focus, select:focus { outline: 3px solid #b9dbc9; border-color: var(--accent); }
button { padding: 11px 22px; border: 0; color: white; background: var(--accent); font-weight: 700; cursor: pointer; }
button:hover { background: var(--accent-dark); }
.reset { align-content: center; padding: 0 7px; color: var(--muted); }
.table-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: 0 14px 40px rgb(23 33 27 / 7%); }
.table-scroll { overflow: auto; max-height: calc(100vh - 270px); }
table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
th, td { max-width: 240px; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; text-align: left; }
th { position: sticky; top: 0; z-index: 2; color: #405047; background: #eef3ee; font-size: 12px; letter-spacing: .02em; }
.sort-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: inherit; text-decoration: none; }
.sort-link:hover { color: var(--accent); }
.sort-arrow { color: #819087; font-size: 13px; }
th[aria-sort="ascending"] .sort-arrow, th[aria-sort="descending"] .sort-arrow { color: var(--accent); }
th:first-child, td:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); }
th:first-child { z-index: 3; background: #eef3ee; }
tbody tr:hover td { background: #f5f8f4; }
.empty { padding: 56px; color: var(--muted); text-align: center; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 20px; color: var(--muted); font-size: 14px; }
.page-links { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.pagination a, .pagination strong { min-width: 34px; padding: 8px 10px; border-radius: 6px; color: var(--accent-dark); text-align: center; text-decoration: none; }
.pagination a:hover { background: #dae5db; }
.pagination strong { color: white; background: var(--accent); }
.pagination select { margin-left: 5px; padding: 7px 9px; border: 1px solid #b9c4bc; background: var(--paper); }

@media (max-width: 760px) {
  .container { width: 94vw; padding-top: 25px; }
  header { align-items: stretch; flex-direction: column; gap: 22px; }
  .table-scroll { max-height: calc(100vh - 310px); }
  .pagination { align-items: flex-start; flex-direction: column; }
}