body { font-family: system-ui, sans-serif; margin: 0; color: #222; line-height: 1.5; background: #fff; }
nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; align-items: center; padding: .75rem 1.5rem; border-bottom: 1px solid #ddd; background: #f6f6f6; }
nav a { color: #222; text-decoration: none; }
nav a:hover { text-decoration: underline; }
main { max-width: 72rem; margin: 0 auto; padding: 1.5rem; }
h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 .5rem; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: .35rem .6rem; border-bottom: 1px solid #e3e3e3; text-align: left; white-space: nowrap; }
th { font-weight: 600; border-bottom: 2px solid #ccc; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.scroll { overflow-x: auto; }
form.inline { display: inline; }
input[type=text], input[type=password] { font: inherit; padding: .3rem .5rem; border: 1px solid #aaa; border-radius: 3px; }
input.short { width: 6rem; }
button { font: inherit; padding: .3rem .8rem; border: 1px solid #888; border-radius: 3px; background: #f3f3f3; cursor: pointer; }
button:hover { background: #e6e6e6; }
button.link { border: none; background: none; padding: 0; color: #222; }
button.link:hover { text-decoration: underline; background: none; }
button.danger { border-color: #a33; color: #a33; }
.flash { padding: .6rem .8rem; background: #fff6d6; border: 1px solid #e5d28a; }
.box { border: 1px solid #ddd; padding: .8rem 1rem; margin: .5rem 0 1rem; }
.box.danger { border-color: #d9a0a0; }
.muted { color: #666; }
.state-running { color: #256029; }
.state-other { color: #a33; }
.secret { font-family: ui-monospace, monospace; font-size: 1.1rem; background: #f3f3f3; padding: .1rem .4rem; }
pre { background: #f6f6f6; padding: .8rem; overflow-x: auto; }
label { display: block; margin: .4rem 0; }
.login { max-width: 22rem; margin: 4rem auto; }
.qr svg { width: 16rem; height: auto; background: #fff; }