:root { font: 16px/1.5 system-ui, sans-serif; color: #211d19; background: #f6f2ed; }
body { margin: 0; }
header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: #493225; color: white; }
main { max-width: 64rem; margin: 2rem auto; padding: 0 1rem; }
.panel, article { background: white; border: 1px solid #d9cec5; border-radius: .75rem; padding: 1rem; margin-bottom: 1rem; }
button { min-height: 2.75rem; border: 0; border-radius: .5rem; padding: .6rem 1rem; font: inherit; cursor: pointer; background: #6c4732; color: white; }
button.secondary { background: #ded5ce; color: #211d19; }
button.danger { background: #9d271f; }
button:disabled { opacity: .55; cursor: wait; }
nav { display: flex; gap: .5rem; margin-bottom: 1rem; }
.meta { color: #655b54; font-size: .9rem; overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.error { border-color: #9d271f; color: #761d17; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.content-preview { display: block; max-width: min(100%, 32rem); max-height: 24rem; object-fit: contain; border-radius: .5rem; }