.proposal-to-payment { display: grid; gap: 18px; }
.proposal-to-payment-current { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 28px; border: 1px solid rgba(8, 126, 106, 0.3); border-radius: 8px; background: linear-gradient(135deg, #effbf6 0%, #d7f2e7 55%, #f8fcfa 100%); box-shadow: 0 12px 30px rgba(8, 126, 106, 0.08); }
.proposal-to-payment-kicker, .proposal-to-payment-tool > span { display: block; color: #087e6a; font: 800 0.72rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; }
.proposal-to-payment-tool > span { display: flex; align-items: center; gap: 6px; }
.proposal-to-payment-unread { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #c43832; color: #ffffff; font: 800 0.68rem/1 var(--font-body); }
.proposal-to-payment-current h3, .proposal-to-payment-tool h3 { margin: 9px 0 0; color: var(--text-deep); font-family: var(--font-heading); }
.proposal-to-payment-current p, .proposal-to-payment-tool p { margin: 9px 0 0; color: var(--text-soft); line-height: 1.55; }
.proposal-to-payment-current p { max-width: 680px; }
.proposal-to-payment-current .btn-main { min-width: 140px; box-shadow: 0 10px 22px rgba(8, 126, 106, 0.16); }
.proposal-to-payment-progress { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; max-width: 420px; margin-top: 18px; color: #356357; font-size: 0.76rem; }
.proposal-to-payment-progress strong { color: var(--text-deep); font-size: 0.8rem; }
.proposal-to-payment-progress > div { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 3px; background: rgba(8, 126, 106, 0.15); }
.proposal-to-payment-progress i { display: block; height: 100%; border-radius: inherit; background: #087e6a; }
.proposal-to-payment-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 12px; border: 1px solid #dce4e0; border-radius: 8px; background: #f2f5f3; }
.proposal-to-payment-tool { display: flex; min-height: 208px; flex-direction: column; align-items: flex-start; padding: 20px; border: 1px solid #d6dedb; border-radius: 8px; background: #f8f9f8; }
.proposal-to-payment-tool.is-available { border-color: rgba(8, 126, 106, 0.3); background: #eaf8f1; box-shadow: 0 8px 18px rgba(8, 126, 106, 0.06); }
.proposal-to-payment-tool.is-locked > span { color: #6f7d77; }
.proposal-to-payment-tool.is-locked h3 { color: #48534e; }
.proposal-to-payment-tool.is-locked p { color: #77827d; }
.proposal-to-payment-tool.is-locked button { border-color: #d5dcda; background: #f5f6f5; color: #7b8580; }
.proposal-to-payment-tool button { min-height: 34px; margin-top: auto; padding: 7px 10px; border: 1px solid #087e6a; border-radius: 4px; background: rgba(255, 255, 255, 0.82); color: #087e6a; font: 800 0.76rem/1 var(--font-body); }
.proposal-to-payment-tool button:disabled { border-color: rgba(8, 126, 106, 0.14); background: rgba(255, 255, 255, 0.56); color: #718079; cursor: default; }
.proposal-to-payment-note { margin: 0; color: #58736a; font-size: 0.8rem; line-height: 1.45; }
.documents-agreement-action { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 16px; border: 1px solid rgba(8, 126, 106, 0.24); border-radius: 8px; background: #f8fcfa; }
.documents-agreement-action h3, .documents-agreement-action p { margin: 0; }
.documents-agreement-action h3 { color: var(--text-deep); font: 800 0.95rem/1.3 var(--font-body); }
.documents-agreement-action p { margin-top: 4px; color: #58736a; font-size: 0.82rem; line-height: 1.45; }
.documents-agreement-action .btn-main { flex: 0 0 auto; }
.agreement-acceptance { display: grid; gap: 14px; padding: 20px; border: 1px solid rgba(8, 126, 106, 0.24); border-radius: 8px; background: #f8fcfa; }
.agreement-acceptance-check { display: flex; align-items: flex-start; gap: 10px; color: var(--text-deep); font-size: 0.9rem; line-height: 1.45; }
.agreement-acceptance-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #087e6a; flex: 0 0 auto; }
.agreement-acceptance .btn-main { justify-self: start; }
.agreement-acceptance-status, .agreement-acceptance-receipt { margin: 0; color: #58736a; font-size: 0.82rem; line-height: 1.45; }
@media (max-width: 760px) { .proposal-to-payment-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .proposal-to-payment-current { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 20px; } .proposal-to-payment-current .btn-main, .documents-agreement-action .btn-main { width: 100%; } .proposal-to-payment-tool { min-height: 180px; padding: 18px; } .documents-agreement-action { align-items: stretch; flex-direction: column; } }
@media (max-width: 520px) { .proposal-to-payment-tools { grid-template-columns: minmax(0, 1fr); gap: 12px; } }