/* status-popup.css - status modal (copied from Block Coding UI.css) and the result popup */

/* status modal */
.status-modal{position:fixed;top:45%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#f0f4ff,#ffffff);padding:24px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:99997;width:280px;text-align:center;color:#1E1E1E;font-family:'M PLUS 1',sans-serif}
.status-modal.hidden{display:none}
.status-spinner{width:30px;height:30px;border:4px solid #ccc;border-top:4px solid #0078d7;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}
#statusModalMessage{font-size:16px;font-weight:500;margin:0 0 12px}
.status-modal-content button{padding:8px 16px;background-color:#0078d7;color:#fff;border:none;border-radius:6px;cursor:pointer;font-family:inherit;font-size:14px}

/* result popup: same look as Block Coding */
#uploadStatusPopup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:99998;display:none;align-items:center;min-width:360px;max-width:min(560px,94vw);height:80px;background:#fff;border-radius:40px;box-shadow:0 8px 30px rgba(0,0,0,.3);overflow:hidden;font-family:'M PLUS 1',sans-serif}
#uploadStatusPopup.show{display:flex;animation:resIn .22s ease}
.res-ico{flex:none;align-self:stretch;width:64px;display:grid;place-items:center;background:#3DBF63}
.res-ico i{width:34px;height:34px;border-radius:50%;border:2px solid #fff;background:#3DBF63;display:grid;place-items:center;color:#fff;font-style:normal;font-size:20px;font-weight:700;line-height:1}
#uploadStatusPopup.ok .res-ico i::before{content:"\2713"}
#uploadStatusPopup.err .res-ico{background:#E5484D}
#uploadStatusPopup.err .res-ico i{background:#E5484D}
#uploadStatusPopup.err .res-ico i::before{content:"\2715"}
#popupMessage{flex:1;padding:0 16px;font-size:18px;font-weight:700;line-height:1.3;color:#1E7D32}
#uploadStatusPopup.err #popupMessage{color:#C62828}
#popupCloseBtn{flex:none;width:30px;height:30px;margin-right:18px;border:1.5px solid #555;border-radius:50%;background:#fff;color:#333;font-size:14px;line-height:1;cursor:pointer}
#popupCloseBtn:hover{background:#eee}
@keyframes resIn{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}