.toast-viewport{position:fixed;z-index:3000;top:22px;right:22px;display:grid;width:min(420px,calc(100vw - 32px));gap:12px;pointer-events:none}
.app-toast{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 28px;align-items:start;gap:12px;overflow:hidden;padding:16px 16px 18px;border:1px solid #ffffff;background:#fff;border-radius:14px;box-shadow:0 18px 48px #14231c30;pointer-events:auto;animation:toast-enter .28s cubic-bezier(.2,.8,.2,1) both}
.app-toast-success{border-left:4px solid #16814b}
.app-toast-error{border-left:4px solid #d34242}
.app-toast-icon{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;font-size:1rem;font-weight:900}
.app-toast-success .app-toast-icon{background:#e3f5eb;color:#147a46}
.app-toast-error .app-toast-icon{background:#fff0ef;color:#c33838}
.app-toast-content{min-width:0;color:#26332e}
.app-toast-content>strong{display:block;font-size:.92rem;line-height:1.35}
.app-toast-content>p{margin:4px 0 0;color:#56635d;font-size:.86rem;line-height:1.45}
.app-toast-content ul{display:grid;gap:4px;margin:6px 0 0;padding-left:18px;color:#56635d;font-size:.84rem;line-height:1.4}
.app-toast-close{display:grid;width:28px;height:28px;place-items:center;padding:0;border:0;border-radius:7px;background:transparent;color:#748078;font-size:1.45rem;line-height:1;cursor:pointer}
.app-toast-close:hover{background:#f1f3f1;color:#24312b}
.app-toast-progress{position:absolute;right:0;bottom:0;left:0;height:3px;background:#dfe8e2;transform-origin:left;animation:toast-timeout 6s linear forwards}
.app-toast-error .app-toast-progress{background:#d34242}
.app-toast-success .app-toast-progress{background:#16814b}
.app-toast.is-leaving{animation:toast-exit .2s ease-in forwards}
@keyframes toast-enter{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:translateX(0)}}
@keyframes toast-exit{to{opacity:0;transform:translateX(24px)}}
@keyframes toast-timeout{to{transform:scaleX(0)}}
.mpesa-pay-button{display:flex;width:100%;min-height:52px;align-items:center;justify-content:center;gap:11px;padding:12px 18px;border:1px solid #067b3d;border-radius:10px;background:linear-gradient(135deg,#079447,#08733d);box-shadow:0 8px 18px #07854530;color:#fff;font-size:.98rem;font-weight:800;letter-spacing:.01em;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.mpesa-pay-button:hover{transform:translateY(-1px);background:linear-gradient(135deg,#078541,#065e34);box-shadow:0 11px 24px #07854542;color:#fff}
.mpesa-pay-button:focus-visible,.app-toast-close:focus-visible{outline:3px solid #f0b34d;outline-offset:3px}
.mpesa-pay-mark{flex:none;padding:5px 7px;border-radius:5px;background:#fff;color:#087a3f;font-size:.68rem;font-weight:900;letter-spacing:-.04em;line-height:1.2}
.mpesa-pay-arrow{margin-left:auto;font-size:1.15rem}
@media(max-width:600px){.toast-viewport{top:12px;right:12px;width:calc(100vw - 24px)}}
@media(prefers-reduced-motion:reduce){.app-toast,.app-toast-progress,.mpesa-pay-button{animation:none;transition:none}}