*{-webkit-box-sizing:border-box;box-sizing:border-box}body{margin:0;padding:0;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;background-color:#fff}#container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;padding:20px;background-color:#f5f5f5;border-radius:15px;-webkit-box-shadow:0 4px 12px rgba(0,0,0,0.1);box-shadow:0 4px 12px rgba(0,0,0,0.1);width:90%;max-width:900px;margin:40px auto}#container h1{color:#004aad;font-size:26px;margin-bottom:20px}.upload-area{position:relative;width:100%;padding:40px;text-align:center;border:2px dashed #004aad;border-radius:12px;background-color:#fff;cursor:pointer;-webkit-transition:background-color 0.3s ease;transition:background-color 0.3s ease}.upload-area:hover{background-color:#fff}.upload-area input[type="file"]{display:none}.upload-area .upload-label{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;cursor:pointer}.upload-area .upload-label .upload-icon{font-size:48px;margin-bottom:15px}.upload-area .upload-label .upload-text{font-size:18px;color:#004aad;font-weight:500}.color-options{margin-top:20px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:15px}.color-options .color-btn{width:45px;height:45px;border:none;border-radius:50%;cursor:pointer;outline:none;-webkit-transition:-webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;transition:-webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;transition:transform 0.3s ease, box-shadow 0.3s ease;transition:transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease}.color-options .color-btn.active{-webkit-box-shadow:0 0 15px rgba(0,0,0,0.3);box-shadow:0 0 15px rgba(0,0,0,0.3);-webkit-transform:scale(1.1);transform:scale(1.1)}.color-options .color-btn:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}.previews{margin-top:25px;display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:15px;width:100%}.previews .preview-item{position:relative;background-color:#fafafa;border:1px solid #e0e0e0;border-radius:8px;padding:15px;text-align:center;-webkit-transition:-webkit-transform 0.3s ease;transition:-webkit-transform 0.3s ease;transition:transform 0.3s ease;transition:transform 0.3s ease, -webkit-transform 0.3s ease}.previews .preview-item:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}.previews .preview-item img{max-width:100%;height:auto;border-radius:8px}.previews .preview-item .download-link{display:block;margin-top:10px;color:#004aad;text-decoration:none;font-size:14px;font-weight:bold;-webkit-transition:color 0.3s ease;transition:color 0.3s ease}.previews .preview-item .download-link::after{content:" ⬇";font-size:16px}.previews .preview-item .download-link:hover{color:#002961}.previews .preview-item .close-btn{position:absolute;top:8px;right:8px;background-color:#ff5f5f;color:#fff;border:none;border-radius:50%;width:25px;height:25px;font-size:14px;cursor:pointer;-webkit-transition:background-color 0.3s ease;transition:background-color 0.3s ease}.previews .preview-item .close-btn:hover{background-color:#ff2c2c}#controls{margin-top:30px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;max-width:500px}#controls button{padding:12px 25px;background-color:#fff;border:1px solid #d3d3d3;border-radius:8px;cursor:pointer;font-size:16px;color:#004aad;font-weight:500;-webkit-transition:background-color 0.3s ease, -webkit-transform 0.2s ease;transition:background-color 0.3s ease, -webkit-transform 0.2s ease;transition:background-color 0.3s ease, transform 0.2s ease;transition:background-color 0.3s ease, transform 0.2s ease, -webkit-transform 0.2s ease}#controls button:hover{background-color:#e5e5e5;-webkit-transform:translateY(-2px);transform:translateY(-2px)}#controls button:disabled{background-color:#fff;cursor:not-allowed;color:#999;border-color:#999}#controls button::after{content:" ➔";font-size:18px}#controls #downloadAll{background-color:#cb6ce6;color:#fff}#controls #downloadAll:hover{background-color:#bc40df}canvas{display:none}