:root { --pico-font-size: 100%; }
.topbar { border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1.5rem; }
.topbar nav { padding-block: .25rem; }
.brand { text-decoration: none; }
main.container { padding-bottom: 3rem; }
.narrow { max-width: 28rem; margin: 3rem auto; }
.muted, tr.muted td { color: var(--pico-muted-color); }
.pre-line { white-space: pre-line; }
.req { color: var(--pico-del-color); }
small.error { color: var(--pico-del-color); }
small.help { color: var(--pico-muted-color); display: block; margin-top: -.5rem; margin-bottom: var(--pico-spacing); }
form.inline { margin: 0; }
button.link { background: none; border: 0; padding: 0; color: inherit; margin: 0; width: auto; }
button.small { padding: .2rem .6rem; font-size: .85rem; margin: 0; width: auto; }
button.danger { --pico-color: var(--pico-del-color); border-color: var(--pico-del-color); color: var(--pico-del-color); }

.flash { padding: .75rem 1rem; border-radius: var(--pico-border-radius); margin-bottom: 1rem; border-left: 4px solid; }
.flash-info { background: #e8f1fb; border-color: #2f6fb3; color: #183b61; }
.flash-success { background: #e7f6ec; border-color: #2e8b57; color: #17462c; }
.flash-error { background: #fdecec; border-color: #c0392b; color: #6b1c14; }

.badge { display: inline-block; padding: .1rem .55rem; border-radius: 1rem; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.badge-queued { background: #eef0f3; color: #4a5462; }
.badge-running { background: #e3efff; color: #1d5bbf; }
.badge-succeeded { background: #e2f5e9; color: #1f7a45; }
.badge-failed, .badge-timeout { background: #fde7e7; color: #b42318; }
.badge-cancelled { background: #fff1db; color: #9a5b00; }

.category { margin-top: 1rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.card { display: flex; flex-direction: column; margin: 0; }
.card p { flex: 1; color: var(--pico-muted-color); }
.card footer { display: flex; gap: .5rem; flex-wrap: wrap; }
.card footer [role=button] { padding: .4rem .9rem; }

.page-head, .job-head, .log-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.job-head h2 { margin-bottom: .25rem; }
.actions form { margin: 0; }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: start; }
.filters > * { width: auto; flex: 1 1 10rem; margin-bottom: .5rem; }
.filters button { flex: 0 0 auto; }
.pager { display: flex; gap: 1rem; justify-content: center; align-items: center; }
.row-actions { display: flex; gap: .4rem; }
.row-actions form { margin: 0; }

dl.meta { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 1rem 0 0; }
dl.meta dt { color: var(--pico-muted-color); }
dl.meta dd { margin: 0; word-break: break-word; }
ul.files { list-style: none; padding: 0; }
ul.files li { list-style: none; padding: .25rem 0; }

pre.log { max-height: 32rem; overflow: auto; white-space: pre-wrap; word-break: break-all; font-size: .8rem; line-height: 1.45; padding: 1rem; background: #0f1720; color: #d7e0ea; margin: 0; }
.log-head h3 { margin: 0; }
.autoscroll { font-size: .85rem; margin: 0; }
#job-progress { margin-top: 1rem; }
#job-progress progress { margin-bottom: .25rem; }

.settings-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .75rem 1rem; margin-bottom: 1.25rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); background: var(--pico-card-sectioning-background-color); }
.settings-card [role=button] { padding: .35rem .8rem; font-size: .9rem; }
section.setting { margin-bottom: 2rem; }
section.setting h3 { margin-bottom: .25rem; }
.list-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .4rem .75rem; margin-bottom: .5rem; }
.list-row { display: flex; gap: .35rem; align-items: center; }
.list-row input { margin: 0; padding: .35rem .6rem; height: auto; }
.table-editor td { padding: .25rem .4rem; }
.table-editor input, .table-editor select { margin: 0; padding: .35rem .6rem; height: auto; min-width: 7rem; }
.editor-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.form-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.form-actions > * { width: auto; }