#dropZone{width:600px;height:400px;border:2px dashed #ccc;border-radius:20px;font-family:Noto Sans TC,Source Han Sans,Microsoft JhengHei,PingFang TC,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";text-align:center;padding:20px;margin:20px 0;color:#666;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}#dropZone:hover,#dropZone:focus,#dropZone.dragover{border-color:#00a8ff;background-color:#f0f8ff;color:#00a8ff;outline:none}#dropZone.dragover{border-style:solid}#dropZone img{max-width:100%;max-height:100%;object-fit:contain}#dropZone .change-image-btn{background-color:#00a8ff;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-weight:700;margin-top:10px}#dropZone .change-image-btn:hover,#dropZone .change-image-btn:focus{background-color:#07c;outline:2px solid #004477}#dropZone.invalid{border-color:#dc3545;background-color:#fff8f8;border-style:solid;border-width:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.error{font-size:.9em;color:#dc3545;font-size:.875em;margin-top:.25rem}#dropZone:focus{outline:none;box-shadow:0 0 0 .25rem #0d6efd40;border-color:#86b7fe}#loadingOverlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1000}#loadingBox{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:20px;border-radius:5px;text-align:center}#progressBar{width:100%;height:20px;background-color:#f0f0f0;border-radius:10px;overflow:hidden}#progressBar div{height:100%;background-color:#4caf50;width:0;transition:width .5s}.hidden{display:none}.visible{display:block}