:root {
  color-scheme: light;
  font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
  color: #18211d;
  background: #f4f6f5;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; letter-spacing: 0; }
.topbar {
  min-height: 76px; padding: 15px max(24px, calc((100vw - 1440px) / 2));
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; background: #173b31; border-bottom: 4px solid #dfb343;
}
h1 { margin: 0; font-size: 22px; letter-spacing: 0; }
.topbar p { margin: 5px 0 0; color: #cbd9d3; font-size: 13px; }
main { max-width: 1440px; margin: 0 auto; padding: 22px 24px 40px; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid #d9dfdc; }
.metrics div { padding: 14px 18px 18px; border-left: 3px solid #2b8064; }
.metrics span { display: block; color: #66736d; font-size: 13px; }
.metrics strong { display: block; margin-top: 5px; font-size: 26px; }
.toolbar {
  display: grid; grid-template-columns: 180px 180px 150px 150px minmax(220px, 1fr) auto auto;
  gap: 10px; align-items: end; padding: 20px 0 14px;
}
.toolbar label { color: #59655f; font-size: 12px; }
.toolbar input, .toolbar select {
  width: 100%; height: 38px; margin-top: 5px; padding: 0 10px;
  color: #18211d; background: #fff; border: 1px solid #c9d1cd; border-radius: 4px;
}
.checkbox { display: flex; align-items: center; height: 38px; gap: 7px; white-space: nowrap; }
.toolbar .checkbox input { width: 16px; height: 16px; margin: 0; }
.button {
  min-height: 38px; padding: 0 16px; color: #fff; background: #2b8064;
  border: 1px solid #2b8064; border-radius: 4px; cursor: pointer;
}
.button.secondary { color: #35423c; background: #fff; border-color: #b9c3be; }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid #d9dfdc; border-radius: 6px; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #e5e9e7; vertical-align: top; }
th { color: #5d6963; background: #eef2f0; font-size: 12px; font-weight: 600; }
td { font-size: 13px; overflow-wrap: anywhere; }
th:nth-child(1) { width: 150px; } th:nth-child(2) { width: 140px; }
th:nth-child(3) { width: 190px; } th:nth-child(4), th:nth-child(5) { width: 140px; }
th:nth-child(6) { width: 72px; } th:nth-child(7) { width: 130px; }
.muted { color: #78837d; }
.unread td:first-child { box-shadow: inset 3px 0 #dfb343; }
.row-actions { display: flex; gap: 6px; }
.small-button { padding: 5px 8px; color: #1e5f4b; background: #fff; border: 1px solid #9eb8ad; border-radius: 4px; cursor: pointer; }
.empty { padding: 48px; text-align: center; color: #78837d; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 16px; }
.icon-button { width: 38px; height: 38px; background: #fff; border: 1px solid #b9c3be; border-radius: 4px; cursor: pointer; }
.icon-button:disabled { opacity: .4; cursor: default; }
#toast { position: fixed; right: 22px; bottom: 22px; padding: 10px 14px; color: #fff; background: #26332e; border-radius: 4px; opacity: 0; pointer-events: none; transition: opacity .15s; }
#toast.visible { opacity: 1; }
@media (max-width: 980px) {
  .toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .topbar, main { padding-left: 14px; padding-right: 14px; }
  .metrics strong { font-size: 21px; }
  .toolbar { grid-template-columns: 1fr; }
  .search { grid-column: auto; }
  .table-wrap { border-left: 0; border-right: 0; border-radius: 0; }
}