:root {
  --fg: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --bg: #f9fafb;
  --primary: #2563eb;
  --primary-fg: #ffffff;
  --danger: #dc2626;
  --ok: #059669;
  --bad: #b91c1c;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; color: var(--fg); background: var(--bg); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.topnav {
  display: flex; align-items: center;
  background: #1f2937; color: #fff;
  padding: 0 1.25rem;
}
.topnav-brand a { color: #fff; font-weight: 600; padding: 1rem 0; }
.topnav ul { list-style: none; display: flex; gap: 1rem; margin: 0 0 0 2rem; padding: 0; }
.topnav ul a { color: #d1d5db; padding: 1rem 0; display: inline-block; }
.topnav ul a:hover { color: #fff; text-decoration: none; }
.topnav-user { margin-left: auto; display: flex; align-items: center; gap: .75rem; color: #d1d5db; font-size: .9rem; }
.topnav-user .link-btn { background: none; border: 0; color: #d1d5db; cursor: pointer; padding: 0; }
.topnav-user .link-btn:hover { color: #fff; text-decoration: underline; }

.container { max-width: 72rem; margin: 1.5rem auto; padding: 0 1.25rem; }

h1 { margin-top: 0; font-size: 1.5rem; }
h2 { margin-top: 2rem; font-size: 1.15rem; border-bottom: 1px solid var(--border); padding-bottom: .25rem; }
h3 { font-size: 1rem; margin-top: 1.5rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; }

table.data { width: 100%; border-collapse: collapse; margin-top: .5rem; background: #fff; }
table.data th, table.data td { padding: .5rem .75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.data thead th { background: #f3f4f6; font-weight: 600; }
table.data tbody tr:hover { background: #f9fafb; }

form label { display: block; margin: .75rem 0; }
form label input[type=text], form label input[type=email], form label input[type=password], form label textarea, form label select {
  width: 100%; max-width: 28rem; padding: .5rem .65rem; border: 1px solid #d1d5db; border-radius: .25rem; font: inherit;
}
button, .btn {
  background: var(--primary); color: var(--primary-fg);
  border: 0; padding: .55rem 1rem; border-radius: .25rem; cursor: pointer; font: inherit;
  display: inline-block;
}
button:hover, .btn:hover { background: #1d4ed8; text-decoration: none; }
button.danger { background: var(--danger); }
button.danger:hover { background: #991b1b; }

.flash { padding: .75rem 1rem; border-radius: .25rem; margin-bottom: 1rem; }
.flash-ok { background: #d1fae5; color: #065f46; }
.flash-error { background: #fee2e2; color: #991b1b; }

.login-card { max-width: 22rem; margin: 4rem auto; padding: 2rem; background: #fff; border: 1px solid var(--border); border-radius: .5rem; }
.login-card h1 { text-align: center; margin-top: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.stat { background: #fff; border: 1px solid var(--border); border-radius: .5rem; padding: 1rem; text-align: center; }
.stat-n { font-size: 2rem; font-weight: 700; }
.stat-l { color: var(--muted); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 1rem 0 2rem; }
@media (max-width: 700px) { .grid-2 { grid-template-columns: 1fr; } }

dl.kv { display: grid; grid-template-columns: 10rem 1fr; gap: .25rem .75rem; }
dl.kv dt { color: var(--muted); }

.badge { display: inline-block; padding: .15rem .5rem; border-radius: .25rem; background: #e5e7eb; color: #374151; font-size: .8rem; }
.badge-ok { background: #d1fae5; color: #065f46; }
.badge-bad { background: #fee2e2; color: #991b1b; }

.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
.cmd-form { background: #fff; padding: 1rem; border: 1px solid var(--border); border-radius: .5rem; }

.footer { text-align: center; color: var(--muted); padding: 2rem 1rem; }

.pager { margin: 1rem 0; display: flex; gap: 1rem; }