* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1f2937;
  background: #f5f7fa;
}
.topbar {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 24px;
  background: #0f5132;
  color: #fff;
}
.topbar .brand { font-weight: 700; font-size: 18px; }
.topbar nav a {
  color: #d1fae5;
  text-decoration: none;
  margin-right: 14px;
  font-size: 14px;
}
.topbar nav a:hover { color: #fff; }
.container { max-width: 1100px; margin: 24px auto; padding: 0 24px; }
h1 { margin: 0 0 16px; }
h2 { margin: 32px 0 12px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.card {
  background: #fff;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.card-label { color: #6b7280; font-size: 13px; }
.card-value { font-size: 28px; font-weight: 700; margin-top: 4px; }
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; }
th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #e5e7eb; font-size: 14px; }
th { background: #f3f4f6; color: #374151; font-weight: 600; }
.empty { color: #6b7280; }