html {
  color-scheme: light dark;
}
body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  background: var(--lb-color-bg);
  color: var(--lb-color-text);
  font: var(--lb-type-body);
}
main {
  padding: var(--lb-space-xl) var(--lb-space-md);
  max-width: 36rem;
}
h1 {
  font: var(--lb-type-title);
  display: grid;
  gap: var(--lb-space-xxs);
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  display: flex;
  justify-content: space-between;
  gap: var(--lb-space-lg);
  padding: var(--lb-space-sm) var(--lb-space-md);
  background: var(--lb-color-surface);
  border: 1px solid var(--lb-color-outline);
  border-radius: var(--lb-radius-md);
}
.phu {
  color: var(--lb-color-text-muted);
  font: var(--lb-type-body-small);
}
.nhan {
  font-weight: 600;
}
.tot {
  color: var(--lb-color-success-strong);
}
.loi {
  color: var(--lb-color-danger-strong);
}