:root {
  --pico-font-size: 100%;
  --jh-ok: #2e8b57;
  --jh-warn: #c47f00;
  --jh-err: #c0392b;
  --jh-info: #3b7dd8;
}
body { padding-bottom: env(safe-area-inset-bottom); }
.container { max-width: 1100px; }
.topbar nav { padding: 0.25rem 0; }
.topbar nav ul:first-of-type { margin-left: 0; }
.topbar nav ul:last-of-type { margin-right: 0; }
.topbar .brand { text-decoration: none; }
.topbar a.active { text-decoration: underline; }
form.inline { display: inline; margin: 0; }
button.small, a[role=button].small, .small { font-size: 0.85rem; }
button.small, a[role=button].small { padding: 0.35rem 0.7rem; }
button.link { background: none; border: 0; padding: 0; color: var(--pico-primary); text-decoration: underline; cursor: pointer; font-size: inherit; }
.muted { color: var(--pico-muted-color); }
.narrow { max-width: 480px; margin: 2rem auto; }
.crumbs { font-size: 0.9rem; margin-bottom: 0.5rem; }
.page-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.25rem; }
.page-head h1 { margin: 0; font-size: 1.5rem; }
.flash { padding: 0.6rem 0.9rem; border-radius: var(--pico-border-radius); margin: 0.5rem 0 1rem; }
.flash.ok { background: rgba(46,139,87,.15); border: 1px solid var(--jh-ok); }
.flash.err { background: rgba(192,57,43,.15); border: 1px solid var(--jh-err); }

.badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; background: #666; vertical-align: middle; }
.status-online, .state-done { background: var(--jh-ok); }
.status-busy, .state-running, .state-assigned { background: var(--jh-info); }
.status-offline, .state-cancelled { background: #666; }
.state-queued { background: var(--jh-warn); }
.state-failed { background: var(--jh-err); }

.cards { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 1rem; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.card { display: block; padding: 0.9rem 1rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); text-decoration: none; color: inherit; background: var(--pico-card-background-color); }
.card:hover { border-color: var(--pico-primary); }
.card-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.card-title { font-size: 1.05rem; }
.add-worker summary { width: auto; display: inline-block; }

.controls h2, section h2 { font-size: 1.15rem; margin-bottom: 0.75rem; }
.controls textarea { min-height: 7rem; }
.controls .grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .controls .grid { grid-template-columns: 1fr 1fr; } }
.controls .grid.three { grid-template-columns: 1fr; }
@media (min-width: 640px) { .controls .grid.three { grid-template-columns: 1fr 1fr 1fr; } }
input[type=file] { padding: 0.4rem; }
.file-slot { display: block; margin-bottom: 1rem; }
.file-slot img.pick-preview { max-height: 160px; border-radius: var(--pico-border-radius); margin-top: 0.4rem; display: none; }

.job-list { list-style: none; padding: 0; margin: 0; }
.job-row { border-top: 1px solid var(--pico-muted-border-color); }
.job-link { display: flex; gap: 0.75rem; align-items: center; padding: 0.6rem 0; text-decoration: none; color: inherit; }
.thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; flex: 0 0 56px; background: #222; }
.thumb.placeholder { display: inline-block; }
.job-main { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.job-summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.progress-wrap { margin: 0.5rem 0 1rem; }
.progress-wrap progress { margin-bottom: 0.25rem; }
.preview { max-width: 100%; border-radius: var(--pico-border-radius); margin-top: 0.5rem; }
.summary { white-space: pre-wrap; }
pre.spec, pre.token { white-space: pre-wrap; word-break: break-all; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
.actions form { margin: 0; }
.danger-zone { margin-top: 2rem; }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery.compact { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 640px) { .gallery.compact { grid-template-columns: repeat(6, 1fr); } }
.tile { margin: 0; position: relative; }
.tile img, .tile video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; display: block; background: #111; }
.gallery.compact .tile img { aspect-ratio: auto; }
.tile figcaption { margin-top: 0.25rem; }
.tile-select { position: absolute; top: 6px; left: 6px; z-index: 2; margin: 0; }
.tile-select input { width: 1.4rem; height: 1.4rem; margin: 0; }
.tile-audio { display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1; font-size: 2rem; background: #222; border-radius: 8px; }
.bulk-bar { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.pager { display: flex; gap: 0.5rem; margin: 1rem 0; }
dialog article { max-width: 95vw; width: auto; }
dialog [data-lightbox-body] img, dialog [data-lightbox-body] video { max-width: 90vw; max-height: 70vh; display: block; margin: 0 auto; }
.text-output pre { white-space: pre-wrap; }
.preset-pick select { margin: 0; width: auto; min-width: 12rem; }
.keep-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.keep-row input[type=checkbox] { margin: 0; }
.kept-thumb { height: 56px; width: 56px; object-fit: cover; border-radius: 6px; }
.actions.compact { margin: 0.5rem 0 0; }
.batch-thumb { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: var(--pico-muted-color); }
.batch-tile img.dim { opacity: 0.45; }
.weight-row { display: block; margin-top: 0.3rem; }
.weight-row span { display: block; font-size: 0.85rem; color: var(--pico-muted-color); }
.weight-row input[type=range] { margin: 0; }