.sample-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; align-items: start; }
.sample-form, .sample-output { min-width: 0; }
.sample-form { display: grid; gap: 16px; padding: 28px; }
.sample-form label, .sample-editor { display: grid; gap: 7px; font-size: 14px; font-weight: 700; }
.sample-form p, .sample-output p, .sample-output li { font-size: 14px; line-height: 1.65; overflow-wrap: anywhere; }
.sample-form input, .sample-form textarea, .sample-form select, #sample-text { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--paper); color: var(--ink); font: inherit; }
.sample-form select { white-space: normal; }
.sample-form textarea, #sample-text { resize: vertical; }
.sample-form .sample-check { display: flex; align-items: flex-start; }
.sample-check input { width: 20px; height: 20px; flex: 0 0 20px; }
.sample-result { padding: 24px; margin-bottom: 24px; }
.sample-result ol { padding-left: 20px; }
#sample-text { font: 16px/1.6 Georgia, serif; min-height: 640px; margin-top: 8px; }
.sample-payments { min-width: 0; border: 1px solid var(--line); padding: 14px; border-radius: 8px; }
.sample-payment { display: grid; gap: 10px; padding-bottom: 18px; }
.sample-expenses table { width: 100%; border-collapse: collapse; }
.sample-expenses th, .sample-expenses td { padding: 8px 0; text-align: left; }
.sample-expenses th { width: 50%; }
.sample-expenses caption { text-align: left; font-weight: 700; }
.sample-layout .btn { white-space: normal; text-align: center; }
@media (max-width: 800px) { .sample-layout { grid-template-columns: minmax(0, 1fr); } .sample-form { padding: 20px; } #sample-text { min-height: 560px; } }