.tools-page { max-width: 980px; margin: 0 auto; }
.tools-page form { display: grid; gap: 1rem; }
.tools-page label { display: grid; gap: .4rem; }
.tools-page input, .tools-page select, .tools-page textarea { box-sizing: border-box; width: 100%; font: inherit; }
.tools-page input, .tools-page select { padding: .6rem; }
.tools-page button { justify-self: start; }
.tools-page pre, .tools-page output { white-space: pre-wrap; overflow-wrap: anywhere; }
.tools-page [role=status] { overflow-wrap: anywhere; }
.tools-page [hidden] { display: none !important; }
.tool-links { display: grid; gap: .6rem; }
.archive-search { grid-template-columns: 1fr auto; align-items: end; }
.archive-search .archive-options { grid-column: 1 / -1; display: flex; gap: 1rem; flex-wrap: wrap; }
.mod-list { display: grid; gap: 1rem; }
.mod-heading { display: flex; align-items: center; gap: .8rem; }
.mod-icon { width: 64px; height: 64px; object-fit: contain; flex: 0 0 64px; }
.mod-heading h2 { margin: 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.mod-description { white-space: pre-wrap; overflow-wrap: anywhere; }
.mod-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1rem 0; }
@media (max-width: 560px) { .archive-search { grid-template-columns: 1fr; } .mod-icon { width: 48px; height: 48px; flex-basis: 48px; } }