.signoff-body { padding: 18px; }
.signoff-preview { border: 1px solid #e1d8ca; padding: 16px; border-radius: 10px; background: #fcfaf7; }
.signoff-preview h3 { margin: 5px 0 14px; font-size: 22px; }
.signoff-preview dl { margin: 0; display: grid; gap: 8px; }
.signoff-preview dl>div { display: grid; grid-template-columns: 120px 1fr; gap: 10px; }
.signoff-preview dt { color: #786e61; }
.signoff-preview dd { margin: 0; overflow-wrap: anywhere; }
.signoff-trip { border-top: 1px solid #e1d8ca; padding-top: 8px; margin-top: 12px; }
.signoff-trip p { margin: 4px 0; }
.signoff-signatures { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.signoff-signatures section { min-width: 0; }
.signoff-signatures label { display: block; font-size: 12px; }
.signoff-signatures input { width: 100%; padding: 10px; border: 1px solid #d8cfc2; border-radius: 7px; margin: 5px 0 10px; }
.signoff-signatures canvas { display: block; width: 100%; height: 135px; border: 1px dashed #82776a; background: #fff; border-radius: 9px; touch-action: none; }
.signoff-signatures button { margin-top: 6px; padding: 8px; font-size: 12px; }
.signoff-signatures h3 { font-size: 16px; margin: 0 0 10px; }
#jobSignoffDriver { min-height: 62px; margin: 0; padding-top: 15px; font-weight: 700; }
.signoff-confirm { display: flex; gap: 10px; align-items: flex-start; margin-top: 20px; padding: 14px; border-radius: 9px; background: #fff0d4; }
.signoff-confirm input { width: 22px; height: 22px; flex-shrink: 0; }
.signoff-hint,.signoff-copy small { color: #776c60; font-size: 12px; display: block; }
#jobSignoffFeedback { color: #a02f25; padding: 12px; background: #ffefeb; border-radius: 8px; }
.signoff-copy { padding: 16px; }
.signoff-download { display: inline-block; background: #38724d; color: white; border-radius: 8px; padding: 11px 15px; font-weight: 800; text-decoration: none; margin: 0 6px 10px 0; }
@media(max-width:650px) { .signoff-signatures { grid-template-columns: 1fr; gap: 22px; } #jobSignoffDriver { min-height: 0; margin-bottom: 10px; padding: 0; } .signoff-preview dl>div { grid-template-columns: 95px 1fr; } #jobSignoffModal .mobile-dialog-actions { flex-direction: column-reverse; } }
.workflow-steps { flex-wrap: wrap; }
@media(max-width:520px) { .workflow-steps li { flex: 1 1 calc(50% - 8px); } }