:root { --border: #e5e7eb; --muted: #6b7280; --primary: #2563eb; }
body { margin: 0; font: 15px/1.5 system-ui, sans-serif; color: #1f2937; background: #f3f4f6; }
header { display: flex; gap: 2rem; align-items: center; padding: .75rem 1.5rem; background: #111827; color: #fff; }
header nav { display: flex; gap: 1.25rem; align-items: center; }
header a, header .link { color: #d1d5db; text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }
header a:hover, header .link:hover { color: #fff; }
main { max-width: 64rem; margin: 1.5rem auto; padding: 0 1rem; }
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); }
th, td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--border); font-size: .9rem; }
.box { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; display: grid; gap: .75rem; margin-bottom: 1rem; }
.narrow { max-width: 22rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
label { display: grid; gap: .25rem; font-weight: 600; font-size: .85rem; }
label.check { display: flex; gap: .5rem; font-weight: 400; }
input, select, textarea { font: inherit; padding: .45rem .6rem; border: 1px solid #d1d5db; border-radius: 6px; }
button, .button { justify-self: start; padding: .5rem 1rem; background: var(--primary); color: #fff; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
.actions { margin: 0 0 1rem; }
.error { color: #b91c1c; } .ok { color: #15803d; } .muted { color: var(--muted); font-size: .85rem; }
code.big { font-size: 1.2rem; letter-spacing: .05em; }