:root { --fg: #1d2125; --muted: #5c6670; --line: #d7dce0; --bg: #f7f8f9; --accent: #1f5f8b; --ok: #1e7b34; --bad: #b42318; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); background: var(--bg); }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: .6rem 1rem; background: #fff; border-bottom: 1px solid var(--line); }
.brand { font-weight: 600; }
nav { display: flex; flex-wrap: wrap; gap: .9rem; flex: 1; }
nav a { color: var(--accent); text-decoration: none; }
nav a:hover { text-decoration: underline; }
main { max-width: 72rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.4rem; } h2 { font-size: 1.15rem; margin-top: 2rem; } h3 { font-size: 1rem; }
table { width: 100%; border-collapse: collapse; background: #fff; margin: .5rem 0; }
th, td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
dt { color: var(--muted); }
dd { margin: 0; }
form.narrow { display: grid; gap: .8rem; max-width: 28rem; }
form.inline { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
label { display: grid; gap: .2rem; }
input, textarea, button { font: inherit; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 4px; }
textarea { min-height: 4rem; }
button { background: var(--accent); color: #fff; border-color: var(--accent); cursor: pointer; }
button.danger { background: var(--bad); border-color: var(--bad); }
.logout button { background: transparent; color: var(--accent); }
.buttons { display: flex; gap: .6rem; }
.ok { color: var(--ok); font-weight: 600; }
.bad { color: var(--bad); font-weight: 600; }
.error { color: var(--bad); background: #fdecea; padding: .5rem .75rem; border-radius: 4px; }
.notice { background: #e8f1f8; padding: .5rem .75rem; border-radius: 4px; }
.hint { color: var(--muted); font-size: .9rem; }
.pager { display: flex; gap: 1rem; }
code { font-size: .9em; }
@media (max-width: 40rem) { table { font-size: .85rem; } }