body { font: 15px/1.4 system-ui, sans-serif; margin: 0; color: #222; background: #fafafa; }
header, footer { display: flex; justify-content: space-between; align-items: center; padding: 0.6em 1.2em; background: #1f2d3d; color: #eee; }
footer { font-size: 0.85em; color: #aab; }
header .brand { color: #fff; text-decoration: none; font-weight: bold; font-size: 1.2em; }
header form { margin: 0; }
main { max-width: 70em; margin: 1.5em auto; padding: 0 1.2em; }
h1 { margin-top: 0; }
h2 { margin-top: 1.6em; border-bottom: 1px solid #ddd; padding-bottom: 0.2em; }
h2 small { font-weight: normal; font-size: 0.6em; color: #888; margin-left: 0.6em; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 0.35em 0.6em; border-bottom: 1px solid #e3e3e3; vertical-align: top; }
th { color: #666; font-weight: normal; font-size: 0.9em; }
code { background: #eef; padding: 0.1em 0.3em; }
button { font: inherit; padding: 0.25em 0.7em; cursor: pointer; }
.error { color: #b00; }
.state-running, .status-live { color: #080; }
.state-crashed, .status-failed { color: #b00; }
.state-restarting, .state-starting, .status-building, .status-starting { color: #b60; }
.status-superseded { color: #888; }
.masked { font-family: monospace; }
#logs { background: #111; color: #ddd; padding: 0.8em; height: 24em; overflow-y: auto; font-size: 0.85em; white-space: pre-wrap; }
#logs .stderr { color: #f99; }
#logs .wherry { color: #ff9; }