:root {
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  color: #182622;
  background: #f8f6f0;
  --green: #205a50;
  --line: #d4ddd2;
  --muted: #48564e;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: var(--green); }
button, input, select { font: inherit; }
button, input, select { min-height: 44px; border: 1px solid #94a79b; border-radius: .6rem; padding: .55rem .85rem; }
button { color: var(--green); background: #fdfcf8; cursor: pointer; }
button:disabled { cursor: default; opacity: .58; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.primary { color: white; border-color: var(--green); background: var(--green); }
.site-bar, .account { width: min(100% - 2rem, 1200px); margin-inline: auto; }
.site-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; padding-block: 1.2rem; border-bottom: 1px solid var(--line); }
.site-bar nav { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; }
.brand { font-size: 1.3rem; font-weight: 750; text-decoration: none; }
.site-bar form { margin: 0; }
.sign-in, .panel, .metrics article { border: 1px solid var(--line); border-radius: 1rem; background: #fffdfa; }
.sign-in { width: min(100% - 2rem, 440px); margin: clamp(2rem, 7vw, 6rem) auto; padding: clamp(1.35rem, 5vw, 2.2rem); }
h1 { margin: 0 0 .45rem; font-size: clamp(1.8rem, 4vw, 3rem); }
p { color: var(--muted); line-height: 1.65; }
.sign-in form { display: grid; gap: .65rem; margin-top: 1.5rem; }
.sign-in form p { margin: .15rem 0; }
.sign-in input { width: 100%; min-width: 0; }
.code-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; }
.secondary { margin-bottom: 0; }
.account { padding-block: clamp(1.5rem, 4vw, 3rem); }
.account .intro { margin-top: .25rem; }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem; margin-block: 1.6rem; }
.metrics article, .panel { padding: clamp(1rem, 2vw, 1.6rem); }
.metrics h2 { margin: 0; font-size: 1rem; }
.metrics .value { margin: .65rem 0 .25rem; color: var(--green); font-size: clamp(1.35rem,3vw,2.35rem); font-weight: 750; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.metrics p { margin: 0; }
.panel h2 { margin-top: 0; }
.filters { display: flex; align-items: end; flex-wrap: wrap; gap: .7rem; margin-bottom: 1.2rem; }
.filters label { display: grid; gap: .35rem; }
.table-wrap { overflow: auto; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { padding: .75rem; text-align: left; border-bottom: 1px solid var(--line); }
th { background: #e7eee5; white-space: nowrap; }
.status { background: #e7eee5; border-radius: 1rem; padding: .15rem .5rem; white-space: nowrap; }
.pending { background: #f9ebd2; }
@media (max-width: 700px) {
  .metrics { grid-template-columns: 1fr; }
}