:root { --fg: #1d2330; --muted: #677084; --line: #d8dce4; --bg: #fff; --accent: #2457c5; --err: #b3261e; --ok: #1e7a3c; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, sans-serif; color: var(--fg); background: var(--bg); }
main { padding: 16px 24px; max-width: 1200px; }
body.narrow main { max-width: 420px; margin: 40px auto; }
nav { display: flex; gap: 16px; align-items: center; padding: 10px 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
nav .spacer { flex: 1; }
nav form { margin: 0; }
a { color: var(--accent); }
h1 { font-size: 20px; } h2 { font-size: 16px; margin-top: 28px; }
label { display: block; margin: 10px 0; }
label input, label select, label textarea { display: block; width: 100%; max-width: 420px; margin-top: 4px; }
label.inline { display: inline-block; margin-right: 12px; }
label.inline input { display: inline; width: auto; }
input, select, textarea, button { font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: 4px; }
button { background: var(--accent); color: #fff; border-color: var(--accent); cursor: pointer; }
button.link { background: none; color: var(--accent); border: none; padding: 0; text-decoration: underline; }
button.danger { background: var(--err); border-color: var(--err); }
table { border-collapse: collapse; width: 100%; margin: 8px 0; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
td form { display: inline; margin: 0; }
pre { white-space: pre-wrap; word-break: break-all; margin: 0; font-size: 12px; }
.muted { color: var(--muted); } .error { color: var(--err); } .ok { color: var(--ok); }
.flash { padding: 8px 12px; background: #eef3ff; border: 1px solid var(--line); border-radius: 4px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.row label { margin: 4px 0; }
.row label input, .row label select { width: auto; }