.document-tool { margin: 1.5rem 0; padding: 1.25rem; border: 2px solid #24635a; border-radius: 12px; background: #f5faf8; }
.document-tool h3 { margin-top: 0; }
.document-tool p { line-height: 1.7; }
.tool-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tool-fields label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; }
.tool-fields label.tool-wide { grid-column: 1 / -1; }
.tool-fields input, .tool-fields textarea, .tool-fields select, .tool-results textarea { box-sizing: border-box; width: 100%; padding: 9px; border: 1px solid #71817b; border-radius: 5px; background: #fff; color: #172824; font: inherit; }
.tool-fields textarea { min-height: 78px; }
.tool-fields .tool-check { flex-direction: row; align-items: center; font-weight: 400; }
.tool-fields .tool-check input { width: auto; }
.tool-fields .tool-invalid { border: 2px solid #b42318; }
.tool-fields :focus-visible, .document-tool button:focus-visible, .tool-results textarea:focus-visible { outline: 3px solid #145ca8; outline-offset: 2px; }
.document-tool button { margin: 12px 0; padding: 9px 16px; border: 0; border-radius: 6px; background: #17574f; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.document-tool button:hover { background: #0d403a; }
.tool-status { min-height: 1.5em; font-weight: 600; }
.tool-results section { margin-top: 16px; }
.tool-results textarea { min-height: 230px; white-space: pre-wrap; line-height: 1.6; }
.template-example { white-space: pre-wrap; padding: 1rem; border-left: 4px solid #24635a; background: #f6f8f7; line-height: 1.7; overflow-wrap: anywhere; }
@media (max-width: 620px) { .tool-fields { grid-template-columns: 1fr; } .document-tool { padding: 1rem; } }
@media print { .document-tool { display: none; } }