:root{--popup-backdrop:rgba(0,0,0,.5)}
.pop-overlay{position:fixed;inset:0;background:var(--popup-backdrop);display:none;align-items:center;justify-content:center;z-index:1040}
.pop-overlay.show{display:flex}
.pop-modal{background:#fff;max-width:640px;width:calc(100% - 32px);border-radius:14px;box-shadow:0 20px 40px rgba(0,0,0,.2);overflow:hidden}
.pop-header{padding:12px 16px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between}
.pop-body{padding:16px}
.pop-close{background:transparent;border:0;font-size:22px;line-height:1;cursor:pointer}

/* Banner */
.pop-banner{position:fixed;left:0;right:0;background:#111827;color:#fff;padding:12px 16px;display:none;z-index:1035}
.pop-banner.show{display:block}
.pop-banner.bottom{bottom:0}
.pop-banner.top{top:0}

/* Toast */
.pop-toast{position:fixed;max-width:360px;background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:0 10px 24px rgba(0,0,0,.15);padding:12px;display:none;z-index:1035}
.pop-toast.show{display:block}
.pop-toast.bottom-right{right:16px;bottom:16px}
.pop-toast.bottom-left{left:16px;bottom:16px}
.pop-toast.top-right{right:16px;top:16px}
.pop-toast.top-left{left:16px;top:16px}

/* Animations (basic) */
.pop-anim-fade{animation:pop-fade .22s ease-out}
@keyframes pop-fade{from{opacity:.01;transform:translateY(6px)}to{opacity:1;transform:none}}