.monthly-payments-panel{margin:0 0 20px;border:1px solid rgba(94,148,255,.32);background:linear-gradient(120deg,rgba(34,75,136,.38),rgba(17,34,62,.7));backdrop-filter:blur(18px)}
.monthly-payments-panel .panel-head{gap:12px;flex-wrap:wrap}.monthly-payments-panel h3{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.monthly-payment-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-top:1px solid rgba(151,190,255,.15)}.monthly-payment-date{display:grid;justify-items:center;flex:0 0 78px;background:rgba(75,130,255,.12);border-radius:12px;padding:8px}.monthly-payment-date b{font-size:1.5rem}.monthly-payment-date span{font-size:.8rem;color:#c1d1e8}.monthly-payment-detail{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}.monthly-payment-detail strong{font-size:1rem;line-height:1.4}.monthly-payment-detail small{flex-basis:100%;color:#b5c9e5;font-size:.875rem}.monthly-payment-row .actions{flex-wrap:wrap;justify-content:flex-end}.monthly-payment-row.overdue .monthly-payment-date{background:rgba(239,68,68,.13);color:#ffadad}.monthly-payment-row.recorded .monthly-payment-date{background:rgba(34,197,94,.1);color:#8ee7b3}.monthly-payment-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:20px;flex-wrap:wrap}.monthly-payment-toolbar label{display:grid;gap:6px}.monthly-payment-toolbar span{font-size:.875rem;color:#b5c9e5}@media(max-width:620px){.monthly-payment-row{flex-wrap:wrap;gap:10px}.monthly-payment-row .actions{width:100%;justify-content:flex-start;padding-left:88px}.monthly-payment-date{flex-basis:70px}.monthly-payment-toolbar input{max-width:100%}}@media(prefers-reduced-motion:reduce){.monthly-payments-panel{scroll-behavior:auto}}
/* Readable, consistent payment cards and schedule statuses. */
.monthly-payments-panel{padding:24px 28px;margin:20px 0 24px;border-radius:20px}.monthly-payments-panel .panel-head{margin-bottom:0;align-items:center}.monthly-payments-panel .panel-head h3{font-size:1.35rem;line-height:1.45;margin:0 0 10px;color:#edf5ff}.monthly-payments-panel .panel-head .btn,.monthly-payment-row .actions .btn{font-size:1rem;min-height:44px;padding:11px 18px;border-radius:12px;font-weight:650}.monthly-payment-next{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;font-size:1rem;line-height:1.6;color:#cfddf2}.monthly-payment-next b{color:#ecf4ff;font-size:1.05rem}.monthly-next-label{color:#9fc3ff;background:#548eff1a;border:1px solid #74a4ff38;padding:5px 11px;border-radius:8px;font-size:.9rem;font-weight:600}.monthly-payment-row{padding:18px 16px;margin-top:12px;border:1px solid #8cafff24;border-radius:14px;background:linear-gradient(115deg,#548eff10,#548eff04);gap:20px}.monthly-payment-date{flex-basis:86px;padding:10px 8px}.monthly-payment-date b{font-size:1.65rem;line-height:1.3}.monthly-payment-date span{font-size:.875rem}.monthly-payment-detail{gap:10px 16px}.monthly-payment-detail strong{font-size:1.1rem;line-height:1.5}.monthly-payment-detail .badge,.monthly-payments-panel h3 .badge{display:inline-flex;align-items:center;justify-content:center;min-width:110px;min-height:36px;padding:7px 14px;font-size:.95rem;line-height:1.4;font-weight:650;border-radius:10px;white-space:nowrap;flex-shrink:0}.monthly-payment-detail small{font-size:1rem;line-height:1.5}.monthly-payments-modal .modal-head h2{font-size:1.45rem}.monthly-payments-modal .modal-body{padding:24px}.monthly-payment-toolbar label,.monthly-payment-toolbar span,.monthly-payment-toolbar input{font-size:1rem;line-height:1.5}.monthly-payment-toolbar input{min-height:44px}.monthly-payments-modal .modal-footer .btn{font-size:1rem;min-height:44px;padding:10px 20px}@media(max-width:620px){.monthly-payments-panel{padding:20px;margin:16px 0 20px}.monthly-payments-panel .panel-head{align-items:flex-start;gap:18px}.monthly-payments-panel .panel-head .btn{width:100%;justify-content:center}.monthly-payment-row{padding:14px 12px;gap:12px}.monthly-payment-date{flex-basis:70px}.monthly-payment-row .actions{padding-left:0}.monthly-payment-detail strong{flex-basis:100%;font-size:1rem}.monthly-payments-modal .modal-body{padding:16px}.monthly-payment-detail .badge{min-width:104px;font-size:.9rem}}
/* Compact monthly schedule, with readable labels and comfortable controls. */
#overlay .modal.monthly-payments-modal{width:min(900px,calc(100vw - 32px));max-width:900px;border-radius:18px}
.monthly-payments-modal .modal-head{padding:18px 22px}
.monthly-payments-modal .modal-head h2{font-size:1.2rem;line-height:1.35}
.monthly-payments-modal .modal-body{padding:18px 22px}
.monthly-payments-modal .monthly-payment-toolbar{margin-bottom:12px;gap:12px}
.monthly-payments-modal .monthly-payment-toolbar label,.monthly-payments-modal .monthly-payment-toolbar span,.monthly-payments-modal .monthly-payment-toolbar input{font-size:.875rem;line-height:1.4}
.monthly-payments-modal .monthly-payment-toolbar input{min-height:38px;padding:8px 10px}
.monthly-payments-modal .monthly-payment-row{padding:10px 12px;margin-top:8px;gap:14px;border-radius:11px;min-height:0}
.monthly-payments-modal .monthly-payment-date{flex:0 0 62px;padding:6px;border-radius:9px}
.monthly-payments-modal .monthly-payment-date b{font-size:1.25rem;line-height:1.25}
.monthly-payments-modal .monthly-payment-date span{font-size:.75rem;line-height:1.4}
.monthly-payments-modal .monthly-payment-detail{gap:6px 12px}
.monthly-payments-modal .monthly-payment-detail strong{font-size:1rem;line-height:1.4}
.monthly-payments-modal .monthly-payment-detail small{font-size:.875rem;line-height:1.4}
.monthly-payments-modal .monthly-payment-detail .badge{min-width:88px;min-height:28px;padding:4px 10px;font-size:.875rem;line-height:1.3;border-radius:7px}
.monthly-payments-modal .monthly-payment-row .actions .btn,.monthly-payments-modal .modal-footer .btn{font-size:.875rem;min-height:36px;padding:8px 12px;border-radius:9px}
.monthly-payments-modal .modal-footer{padding:12px 22px}
@media(max-width:620px){.monthly-payments-modal .modal-head,.monthly-payments-modal .modal-body{padding:16px}.monthly-payments-modal .monthly-payment-row{gap:10px}.monthly-payments-modal .monthly-payment-detail strong{flex-basis:100%}.monthly-payments-modal .monthly-payment-toolbar span{font-size:.8125rem}}