body { font-family: system-ui, sans-serif; margin: 0; color: #1f2933; background: #f5f7fa; }
.topbar { display: flex; gap: 1rem; align-items: center; padding: .75rem 1.5rem; background: #2f6f4f; }
.topbar a, .topbar button { color: #fff; }
.topbar nav { display: flex; gap: 1rem; margin-left: auto; align-items: center; }
.topbar form { margin: 0; }
.topbar button { background: none; border: 0; cursor: pointer; font: inherit; }
main { padding: 1.5rem; }
.card { background: #fff; border-radius: .5rem; padding: 1.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.narrow { max-width: 28rem; margin: 3rem auto; }
.errorlist { color: #b42318; }
.codes { font-family: ui-monospace, monospace; font-size: 1.1rem; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .5rem; border-bottom: 1px solid #e4e7eb; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.thumb { object-fit: cover; border-radius: .25rem; }
.gallery { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.gallery img { object-fit: contain; background: #fff; border: 1px solid #e4e7eb; }
.facts th { width: 14rem; color: #52606d; }
.notice { background: #fff4e5; border-left: 4px solid #f0b429; padding: .5rem 1rem; }
.badge.ok { display: inline-block; background: #e3f9e5; color: #1f7a33; padding: .25rem .75rem; border-radius: 1rem; }
.message { background: #e8f0fe; padding: .5rem 1rem; border-radius: .25rem; }
.message.error { background: #fde8e8; color: #b42318; }
.actions { display: flex; gap: 1rem; }
.pager { display: flex; gap: 1rem; margin-top: 1rem; }
.rich { line-height: 1.5; }
.field { margin-bottom: .75rem; }
.field input[type=text], .field input:not([type]), .field textarea, .field select { width: 100%; max-width: 40rem; }
trix-editor { display: block; min-height: 12rem; background: #fff; border: 1px solid #cbd2d9; padding: .5rem; }
trix-toolbar { display: block; }
trix-toolbar .trix-button-group--file-tools { display: none; }
.image-list { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; }
.image-list li { cursor: grab; background: #fff; border: 1px solid #e4e7eb; padding: .25rem; text-align: center; }
.image-list img { object-fit: contain; display: block; }
.depth-1 { padding-left: 1.5rem; } .depth-2 { padding-left: 3rem; } .depth-3 { padding-left: 4.5rem; }
.depth-4 { padding-left: 6rem; } .depth-5 { padding-left: 7.5rem; }
/* Trix's own default styles: Trix injects these as a <style> element, which the CSP blocks, so they live here. */
trix-editor:empty::before { content: attr(placeholder); color: graytext; cursor: text; pointer-events: none; white-space: pre-line; }
trix-editor a[contenteditable=false] { cursor: text; }
trix-editor img { max-width: 100%; height: auto; }
trix-toolbar { white-space: nowrap; }
trix-toolbar [data-trix-dialog] { display: none; }
trix-toolbar [data-trix-dialog][data-trix-active] { display: block; }
trix-toolbar [data-trix-dialog] [data-trix-validate]:invalid { background-color: #ffdddd; }