:root {
  --bg: #fbfbfa;
  --fg: #1d1d1b;
  --muted: #6c6c68;
  --line: #e4e4e0;
  --card: #ffffff;
  --accent: #2f5d50;
  --ok: #2f6f3e;
  --warn: #9a6a12;
  --bad: #a03027;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --fg: #e9e9e6;
    --muted: #9a9a95;
    --line: #2e3036;
    --card: #1e2024;
    --accent: #8fc7b4;
    --ok: #7fc490;
    --warn: #d8ae5a;
    --bad: #e08a80;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

a { color: var(--accent); }

.bar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.bar .brand { font-weight: 650; text-decoration: none; color: var(--fg); }
.bar nav { display: flex; gap: 16px; flex: 1; }
.bar nav a { text-decoration: none; color: var(--muted); }
.bar nav a:hover { color: var(--fg); }

.logout button {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 12px;
  color: var(--muted);
  cursor: pointer;
}

main { max-width: 960px; margin: 0 auto; padding: 24px; }

h1 { font-size: 22px; font-weight: 620; margin: 0 0 16px; }
h2 { font-size: 18px; font-weight: 600; margin: 0 0 12px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 18px;
  align-items: end;
}

label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }

input {
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
}

button[type="submit"] {
  font: inherit;
  background: var(--accent);
  color: var(--bg);
  border: 0;
  border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
}

table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { font-weight: 600; color: var(--muted); font-size: 13px; }
td:last-child, th:last-child { text-align: right; }

.muted { color: var(--muted); }
.error { color: var(--bad); }
.verdict { margin: 12px 0 0; font-weight: 600; }
.verdict.ok { color: var(--ok); }
.verdict.below_target { color: var(--warn); }
.verdict.loss { color: var(--bad); }

.centered { display: grid; place-items: center; min-height: 100vh; }
.login { width: min(340px, 92vw); display: flex; flex-direction: column; gap: 12px; }
.login h1 { margin: 0 0 4px; }