:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Noto Sans Thai,sans-serif;background:linear-gradient(135deg,#1a0b2e,#2d1b69);min-height:100vh;color:#e2e8f0;line-height:1.6;display:flex;flex-direction:column;align-items:center}.container{width:100%;max-width:1200px;margin:0 auto;padding:20px;display:flex;flex-direction:column;align-items:center}header{text-align:center;margin-bottom:40px;color:#fff;width:100%}header h1{font-size:2.5rem;font-weight:700;margin-bottom:10px;text-shadow:2px 2px 8px rgba(0,0,0,.5);background:linear-gradient(135deg,#fff,#c4b5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}header p{font-size:1.2rem;opacity:.9;color:#cbd5e0}.header-features{display:flex;justify-content:center;gap:30px;margin-top:20px;flex-wrap:wrap;width:100%}.feature-item{display:flex;align-items:center;gap:8px;background:#ffffff1a;padding:8px 16px;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(192,132,252,.3);color:#e2e8f0}.feature-icon{font-size:18px;color:#c4b5fd}.feature-item span:last-child{font-size:14px;font-weight:500}main{background:#1e0f37cc;border-radius:20px;box-shadow:0 20px 40px #0000004d;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(192,132,252,.2);width:100%}.form-container{padding:40px;width:100%}.form-section{margin-bottom:40px;padding-bottom:30px;border-bottom:2px solid rgba(192,132,252,.2);transition:all .3s ease;width:100%}.form-section:hover{border-bottom-color:#8b5cf6}.form-section:last-of-type{border-bottom:none}.form-section h2{font-size:1.5rem;font-weight:600;margin-bottom:20px;color:#c4b5fd}.form-group{margin-bottom:25px;width:100%}.form-group label{display:block;font-weight:500;margin-bottom:8px;color:#e2e8f0}.form-group input[type=text]{width:100%;padding:12px 16px;border:2px solid rgba(192,132,252,.3);border-radius:10px;font-size:16px;transition:all .3s ease;font-family:inherit;background:#2d1b6980;color:#e2e8f0}.form-group input[type=text]:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf633;background:#2d1b69cc}.form-group input[type=text]::placeholder{color:#a0aec0}.file-upload-wrapper{position:relative;width:100%}.file-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}.file-upload-area{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px;border:2px dashed rgba(192,132,252,.4);border-radius:10px;background:#2d1b694d;transition:all .3s ease;cursor:pointer;position:relative;z-index:1;width:100%}.file-upload-area:hover{border-color:#8b5cf6;background:#2d1b6980;transform:translateY(-1px)}.file-upload-area:has(.file-input:focus){border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf633}.file-upload-area.selected{border-color:#10b981;background:#10b9811a}.file-upload-area.selected:hover{border-color:#059669;background:#10b98126}.upload-icon{font-size:24px;color:#8b5cf6}.upload-text{font-weight:500;color:#e2e8f0;text-align:center}.file-info{font-size:12px;color:#a0aec0;text-align:center}.select-wrapper{position:relative;width:100%}.custom-select{width:100%;padding:12px 16px;border:2px solid rgba(192,132,252,.3);border-radius:10px;font-size:16px;transition:all .3s ease;font-family:inherit;background:#2d1b6980;appearance:none;cursor:pointer;color:#e2e8f0}.custom-select:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf633;background:#2d1b69cc}.select-arrow{position:absolute;right:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:#8b5cf6;font-size:12px;transition:transform .3s ease}.custom-select:focus+.select-arrow{transform:translateY(-50%) rotate(180deg)}.resolution-display{display:flex;align-items:center;gap:15px;width:100%}.resolution-badge{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;padding:8px 16px;border-radius:20px;font-weight:600;font-size:14px}.resolution-note{color:#a0aec0;font-size:14px}.skin-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px;margin-top:10px;width:100%}.part-checkbox{display:flex;align-items:center;gap:10px;padding:15px;border:2px solid rgba(192,132,252,.3);border-radius:12px;cursor:pointer;transition:all .3s ease;background:#2d1b694d}.part-checkbox:hover{border-color:#8b5cf6;background:#2d1b6980}.part-checkbox input[type=checkbox]{width:18px;height:18px;accent-color:#8b5cf6}.part-checkbox input[type=checkbox]:checked+.part-icon{transform:scale(1.1)}.part-icon{font-size:24px;transition:transform .3s ease;color:#c4b5fd}.checkbox-label{display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:500;padding:15px;border:2px solid rgba(192,132,252,.3);border-radius:12px;background:#2d1b694d;transition:all .3s ease;color:#e2e8f0;width:100%}.checkbox-label:hover{border-color:#8b5cf6;background:#2d1b6980}.checkbox-label input[type=checkbox]{width:20px;height:20px;accent-color:#8b5cf6}.upload-area{border:3px dashed rgba(192,132,252,.4);border-radius:15px;padding:20px;text-align:center;cursor:pointer;transition:all .3s ease;background:#2d1b694d;box-shadow:0 2px 8px #0003;width:100%}.upload-area:hover{border-color:#8b5cf6;background:#2d1b6980;transform:translateY(-2px);box-shadow:0 4px 12px #8b5cf633}.upload-area.dragover{border-color:#8b5cf6;background:#8b5cf61a;transform:scale(1.02)}.upload-icon{font-size:48px;margin-bottom:15px;color:#8b5cf6}.upload-content p{font-size:18px;font-weight:500;margin-bottom:8px;color:#e2e8f0}.upload-hint{font-size:14px;color:#a0aec0}.preview-container{text-align:center;margin-top:20px;padding:20px;background:#2d1b694d;border-radius:15px;border:2px solid rgba(192,132,252,.3);box-shadow:0 2px 8px #0003;transition:all .3s ease;width:100%}.preview-container:hover{border-color:#8b5cf6;box-shadow:0 4px 12px #8b5cf633}.preview-container h3{margin-bottom:15px;color:#c4b5fd}#skinPreview{max-width:100%;height:auto;border:2px solid rgba(192,132,252,.3);border-radius:10px;box-shadow:0 4px 12px #0000004d}.form-actions{display:flex;gap:15px;justify-content:center;margin-top:40px;padding-top:30px;border-top:2px solid rgba(192,132,252,.2);width:100%}.btn{padding:12px 24px;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:inherit;box-shadow:0 2px 4px #0000004d}.btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0006}.btn-primary{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;box-shadow:0 4px 15px #8b5cf666}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #8b5cf699}.btn-secondary{background:#2d1b6980;color:#e2e8f0;border:1px solid rgba(192,132,252,.3)}.btn-secondary:hover{background:#2d1b69b3;transform:translateY(-2px)}.btn-download{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 4px 15px #10b98166}.btn-download:hover{transform:translateY(-2px);box-shadow:0 6px 20px #10b98199}.btn-icon{font-size:18px}.result-container{background:#2d1b6980;padding:30px;border-radius:15px;border:2px solid rgba(192,132,252,.3);box-shadow:0 4px 12px #0000004d;transition:all .3s ease;width:100%}.result-container:hover{border-color:#8b5cf6;box-shadow:0 6px 16px #8b5cf64d}.result-container h2{text-align:center;color:#10b981;margin-bottom:30px;font-size:1.8rem}.download-section{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:800px;margin:0 auto;width:100%}.download-item{text-align:center;padding:25px;background:#1e0f37cc;border-radius:15px;box-shadow:0 4px 12px #0000004d;border:2px solid rgba(192,132,252,.3);transition:all .3s ease}.download-item:hover{border-color:#8b5cf6;transform:translateY(-2px);box-shadow:0 6px 16px #8b5cf64d}.download-item h3{margin-bottom:20px;color:#c4b5fd}.instructions{text-align:left;color:#e2e8f0}.instructions ol{padding-left:20px}.instructions li{margin-bottom:10px;color:#cbd5e0}.multi-skin-section{padding:20px;background:#2d1b694d;border-radius:15px;margin-top:30px;width:100%}.multi-skin-section h2{text-align:center;margin-bottom:20px;color:#c4b5fd}.skin-list{display:flex;flex-direction:column;gap:15px;margin-bottom:20px;width:100%}.skin-item{background:#1e0f37cc;padding:15px;border-radius:10px;border:2px solid rgba(192,132,252,.3);display:flex;justify-content:space-between;align-items:center;width:100%}.skin-info{display:flex;align-items:center;gap:10px}.skin-preview-thumb{width:64px;height:64px;border-radius:8px;border:2px solid rgba(192,132,252,.3);background:#2d1b6980;object-fit:contain}.icon-preview{max-width:64px;max-height:64px;margin-top:10px;border-radius:4px;display:none}.file-icon-upload-area.selected .icon-preview{display:block}.skin-details h4{margin:0;color:#e2e8f0}.skin-details p{margin:5px 0 0;font-size:14px;color:#a0aec0}.btn-add-skin{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;width:100%;justify-content:center}.btn-remove-skin{background:#ef444433;color:#fca5a5;padding:8px 12px;border:1px solid rgba(239,68,68,.3)}.uuid-display{background:linear-gradient(135deg,#667eea15,#764ba215);border:1px solid #667eea44;padding:20px;border-radius:12px;margin-bottom:20px;width:100%}.uuid-info h4{color:#667eea;margin-top:0;margin-bottom:15px}.uuid-item{margin-bottom:15px}.uuid-item strong{color:#e0e0e0;display:block;margin-bottom:8px}.uuid-code{color:#4db8ff;background:#1a1a2e;padding:12px;border-radius:6px;display:block;word-break:break-all;white-space:normal;font-family:Courier New,monospace;font-size:13px;line-height:1.6;border-left:3px solid #667eea}.btn-copy-uuid{background:#667eea;color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer;font-size:13px;transition:all .3s ease;margin-top:8px}.btn-copy-uuid:hover{background:#764ba2;transform:translateY(-2px);box-shadow:0 4px 8px #667eea66}.uuid-note{color:#999;font-size:13px;margin-top:15px;padding:10px;background:#667eea1a;border-radius:6px;border-left:3px solid #667eea}.usage-guide{background:linear-gradient(135deg,#2d1b69,#1a0b2e);color:#fff;padding:40px 20px;margin-top:40px;border-top:1px solid rgba(192,132,252,.3);border:1px solid rgba(192,132,252,.2);border-radius:15px;width:100%}.guide-container{max-width:1200px;margin:0 auto;width:100%}.guide-container h3{text-align:center;font-size:1.8rem;font-weight:600;margin-bottom:30px;text-shadow:2px 2px 4px rgba(0,0,0,.5);color:#c4b5fd}.guide-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;width:100%}.guide-section{background:#ffffff1a;padding:25px;border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(192,132,252,.3)}.guide-section h4{font-size:1.2rem;font-weight:600;margin-bottom:15px;color:#c4b5fd}.guide-section ul{list-style:none;padding:0}.guide-section li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px;line-height:1.5;color:#e2e8f0}.guide-section li:last-child{border-bottom:none}.guide-section li:before{content:"•";color:#8b5cf6;font-weight:700;margin-right:8px}@media(max-width:768px){.container{padding:10px}header h1{font-size:2rem}.form-container{padding:20px}.skin-parts{grid-template-columns:repeat(2,1fr)}.form-actions{flex-direction:column;gap:10px}.download-section{grid-template-columns:1fr;gap:20px}.upload-area{padding:15px}.header-features{gap:10px}.guide-sections{grid-template-columns:1fr;gap:20px}.resolution-display{flex-direction:column;align-items:flex-start;gap:10px}.skin-item{flex-direction:column;gap:15px;align-items:flex-start}.skin-info{width:100%}.btn{width:100%;justify-content:center}}@media(max-width:480px){.skin-parts{grid-template-columns:1fr}.resolution-display{flex-direction:column;align-items:flex-start;gap:10px}.guide-sections{grid-template-columns:1fr;gap:15px}.guide-container h3{font-size:1.5rem}.header-features{gap:8px}.feature-item{padding:6px 12px;font-size:12px}.file-upload-area{padding:12px}.upload-text{font-size:12px}.file-info{font-size:10px}.custom-select{font-size:14px;padding:10px 14px}.form-section h2{font-size:1.3rem}.btn{padding:10px 16px;font-size:14px}}@media(min-width:1024px){.container{padding:40px 20px}header h1{font-size:3rem}header p{font-size:1.3rem}.form-container{padding:50px}.skin-parts{grid-template-columns:repeat(4,1fr);gap:20px}#skinPreview{max-width:512px;margin:0 auto}.form-actions{gap:20px}.btn{padding:14px 28px;font-size:18px}.download-section{gap:40px}.download-item{padding:30px}.guide-sections{grid-template-columns:repeat(2,1fr);gap:40px}}@media(min-width:1440px){.container{max-width:1400px;padding:50px 40px}header h1{font-size:3.5rem}.form-container{padding:60px}}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:#1e0f3780}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#8b5cf6,#7c3aed);border-radius:6px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#7c3aed,#6d28d9)}.loading{position:relative;overflow:hidden}.loading:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(139,92,246,.3),transparent);animation:loading 1.5s infinite}@keyframes loading{0%{left:-100%}to{left:100%}}.success-animation{animation:successPulse .6s ease-in-out}@keyframes successPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.resolution-select{width:100%;padding:12px 16px;border:2px solid rgba(192,132,252,.3);border-radius:10px;font-size:16px;transition:all .3s ease;font-family:inherit;background:#2d1b6980;color:#e2e8f0}.resolution-select:focus{outline:none;border-color:#8b5cf6;box-shadow:0 0 0 3px #8b5cf633;background:#2d1b69cc}.license-button{position:fixed;bottom:20px;right:20px;background:#8b5cf6e6;color:#fff;border:none;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #8b5cf666;transition:all .3s ease;z-index:999;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.license-button:hover{background:#8b5cf6;transform:translateY(-2px);box-shadow:0 6px 16px #8b5cf699}.modal-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:linear-gradient(135deg,#2d1b69,#1a0b2e);border-radius:20px;max-width:700px;width:100%;max-height:90vh;overflow:hidden;box-shadow:0 20px 60px #00000080;border:2px solid rgba(192,132,252,.3);animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:25px 30px;border-bottom:2px solid rgba(192,132,252,.2);background:#2d1b6980}.modal-header h2{margin:0;color:#c4b5fd;font-size:1.5rem}.modal-close{background:#ef444433;color:#fca5a5;border:none;width:32px;height:32px;border-radius:50%;font-size:20px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.modal-close:hover{background:#ef444466;transform:rotate(90deg)}.modal-body{padding:30px;overflow-y:auto;max-height:calc(90vh - 200px);color:#e2e8f0}.modal-body section{margin-bottom:25px}.modal-body h3{color:#c4b5fd;font-size:1.2rem;margin-bottom:12px;border-left:4px solid #8b5cf6;padding-left:12px}.modal-body p{line-height:1.8;color:#cbd5e0;margin-bottom:12px}.modal-body ul{list-style:none;padding-left:0}.modal-body li{padding:8px 0 8px 24px;position:relative;line-height:1.6;color:#cbd5e0}.modal-body li:before{position:absolute;left:0}.modal-body strong{color:#c4b5fd}.modal-footer{margin-top:30px;padding-top:20px;border-top:1px solid rgba(192,132,252,.2);text-align:center}.modal-footer small{color:#a0aec0;line-height:1.6}.modal-actions{padding:20px}.modal-header h2{font-size:1.2rem}.modal-body{padding:20px}.modal-body h3{font-size:1.1rem}.skin-cropper-modal{max-width:95%;margin:10px}.skin-cropper-header,.skin-cropper-content{padding:20px}.btn-cropper{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s ease;box-shadow:0 4px 15px #f59e0b66}.header-top{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:10px}.skin-cropper-overlay{position:fixed;inset:0 0 0 20px;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}.close-button:hover{background:#ef44444d;transform:scale(1.1)}.btn-cropper{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;display:flex}.skin-cropper-overlay{position:fixed;inset:0;background:#000c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}.skin-cropper-modal{background:linear-gradient(135deg,#1a0b2e,#2d1b69);border-radius:20px;max-width:800px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #00000080;border:2px solid rgba(192,132,252,.3)}.skin-cropper-header{display:flex;justify-content:space-between;align-items:center;padding:25px 30px;border-bottom:2px solid rgba(192,132,252,.2)}.skin-cropper-header h2{color:#c4b5fd;font-size:1.8rem;margin:0;display:flex;align-items:center;gap:10px}.close-button{background:#ef444433;border:1px solid rgba(239,68,68,.3);color:#fca5a5;padding:8px;border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.close-button:hover{transform:scale(1.1)}.skin-cropper-content{padding:30px}.cropper-section{margin-bottom:30px}.cropper-section h3{color:#c4b5fd;margin-bottom:15px;font-size:1.3rem}.cropper-note{color:#a0aec0;font-size:14px;margin-bottom:15px}.part-selector-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px}.part-label{color:#e2e8f0;font-weight:500}.cropped-preview{display:flex;flex-direction:column;align-items:center;gap:15px}.preview-size{color:#a0aec0;font-size:14px;margin:0}.cropper-actions{display:flex;justify-content:center;margin-top:30px;padding-top:20px;border-top:2px solid rgba(192,132,252,.2)}.header-top{position:relative;display:flex;justify-content:center;align-items:center;width:100%;margin-bottom:10px}.btn-cropper{position:absolute;right:0;top:50%;transform:translateY(-50%);background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;padding:10px 20px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .3s ease;box-shadow:0 4px 15px #f59e0b66}.btn-cropper:hover{box-shadow:0 6px 20px #f59e0b99}@media(max-width:768px){.skin-cropper-modal{max-width:95%;margin:10px}.skin-cropper-header,.skin-cropper-content{padding:20px}.part-selector-grid{grid-template-columns:repeat(2,1fr)}.header-top{flex-direction:column;gap:15px}.btn-cropper{position:static;transform:none}}