:root { color-scheme: light; font-family: system-ui, sans-serif; color: #172033; background: #f5f7fb; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem max(1rem, calc((100% - 72rem) / 2)); background: #172033; color: white; }
header a, header .link { color: white; }
.brand { font-size: 1.15rem; font-weight: 700; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
main { max-width: 72rem; margin: 0 auto; padding: 2rem 1rem 4rem; }
.narrow, form:not(.inline) { max-width: 34rem; }
label { display: grid; gap: .35rem; margin: 1rem 0; font-weight: 650; }
input, textarea, select { width: 100%; padding: .7rem; border: 1px solid #9aa5b7; border-radius: .35rem; font: inherit; background: white; }
textarea { min-height: 10rem; resize: vertical; }
button, .button { display: inline-block; border: 0; border-radius: .35rem; padding: .7rem 1rem; background: #185abd; color: white; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.secondary { background: #596579; }
.danger { background: #a42424; }
.link { padding: 0; background: none; text-decoration: underline; font-weight: 400; }
.inline { display: inline; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.actions label { margin: 0; }
.actions select { min-width: 7rem; }
.actions button { align-self: end; }
.flash { max-width: 50rem; padding: .8rem 1rem; border-left: .3rem solid #24713b; background: #e8f5eb; }
.flash.error { border-color: #a42424; background: #faeaea; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(17rem,1fr)); gap: 1rem; padding: 0; list-style: none; }
.card { background: white; border: 1px solid #d5dbe5; border-radius: .5rem; padding: 1rem; overflow-wrap: anywhere; }
.thumbnail { display: block; max-width: 320px; width: 100%; height: auto; margin: .7rem 0; }
table { width: 100%; border-collapse: collapse; background: white; }
th, td { padding: .7rem; border: 1px solid #d5dbe5; text-align: left; vertical-align: top; }
.pagination { margin-top: 1.5rem; }
.list-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 1rem; width: 100%; margin-top: 1rem; }
.list-footer .pagination { grid-column: 1; margin-top: 0; }
form.page-size-form { grid-column: 2; display: flex; align-items: end; justify-self: end; gap: .4rem; width: max-content; max-width: none; margin: 0; }
.page-size-form label { display: flex; align-items: center; gap: .4rem; margin: 0; white-space: nowrap; }
.page-size-form input[type="number"] { width: 12ch; padding: .35rem .2rem; }
.page-size-form button { padding: .35rem .55rem; font-weight: 600; }
.muted { color: #596579; }
@media (max-width: 48rem) { header { align-items: flex-start; flex-direction: column; } table { display: block; overflow-x: auto; } .list-footer { grid-template-columns: 1fr; } .list-footer .pagination, form.page-size-form { grid-column: 1; } }