*{box-sizing:border-box;padding:0;margin:0}body,html{max-width:100vw;overflow-x:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#1a1a2e,#16213e 50%,#0f3460);min-height:100vh;color:#e5e7eb}.container{max-width:1200px;margin:0 auto;padding:2rem}.card{background:#1f2937;border-radius:12px;padding:2rem;box-shadow:0 10px 40px rgba(0,0,0,.5);margin-bottom:2rem;border:1px solid #374151}.title{font-size:2.5rem;font-weight:700;color:#fff;margin-bottom:.5rem;text-shadow:0 2px 10px rgba(0,0,0,.5)}.subtitle,.title{text-align:center}.subtitle{font-size:1.1rem;color:hsla(0,0%,100%,.8);margin-bottom:2rem}.section-title{font-size:1.5rem;font-weight:600;margin-bottom:1.5rem;color:#f3f4f6}.tabs{display:flex;gap:1rem;margin-bottom:2rem;border-bottom:2px solid #374151}.tab{padding:.75rem 1.5rem;background:none;font-size:1rem;font-weight:500;color:#9ca3af;cursor:pointer;border:none;border-bottom:3px solid transparent;transition:all .2s}.tab.active,.tab:hover{color:#818cf8}.tab.active{border-bottom-color:#818cf8}.form-group{margin-bottom:1.5rem}.label{display:block;font-weight:500;margin-bottom:.5rem;color:#e5e7eb}.input{width:100%;padding:.75rem;border:2px solid #374151;border-radius:8px;font-size:1rem;transition:border-color .2s;background:#111827;color:#e5e7eb}.input:focus{outline:none;border-color:#818cf8}.input::placeholder{color:#6b7280}.file-upload{border:2px dashed #4b5563;border-radius:8px;padding:3rem;text-align:center;cursor:pointer;transition:all .2s;background:#111827;position:relative;min-height:200px;display:flex;align-items:center;justify-content:center}.file-upload.has-preview{padding:1rem;cursor:default}.file-upload:hover:not(.has-preview){border-color:#818cf8;background:#1f2937}.file-upload.dragover{border-color:#818cf8;background:#312e81}.image-preview-container{width:100%;position:relative}.image-preview{max-width:100%;max-height:400px;border-radius:8px;object-fit:contain;display:block;margin:0 auto}.change-image-btn{margin-top:1rem;padding:.5rem 1rem;background:#374151;color:#e5e7eb;border:1px solid #4b5563;border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s}.change-image-btn:hover{background:#4b5563;border-color:#6b7280}.url-preview-container{margin-top:1rem;border:2px solid #374151;border-radius:8px;padding:1rem;background:#111827;display:flex;justify-content:center;align-items:center;min-height:200px}.url-preview{max-width:100%;max-height:400px;border-radius:8px;object-fit:contain}.file-input{display:none}.upload-icon{font-size:3rem;margin-bottom:1rem;color:#6b7280}.upload-text{font-size:1.1rem;color:#d1d5db;margin-bottom:.5rem}.upload-hint{font-size:.9rem;color:#9ca3af}.file-name{margin-top:1rem;padding:.75rem;background:#312e81;border-radius:6px;color:#a5b4fc;font-weight:500}.params-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:1rem;gap:1rem;margin-bottom:1.5rem}.param-group{display:flex;flex-direction:column}.param-label{font-size:.9rem;font-weight:500;margin-bottom:.25rem;color:#d1d5db}.param-input{padding:.5rem;border:2px solid #374151;border-radius:6px;font-size:.9rem;background:#111827;color:#e5e7eb}.param-input:focus{outline:none;border-color:#818cf8}.param-input::placeholder{color:#6b7280}.param-hint{font-size:.75rem;color:#9ca3af;margin-top:.25rem}.button{padding:.75rem 2rem;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .3s cubic-bezier(.68,-.55,.265,1.55);display:inline-flex;align-items:center;gap:.5rem;position:relative;overflow:hidden}.button:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:hsla(0,0%,100%,.1);transform:translate(-50%,-50%);transition:width .6s,height .6s}.button:active:before{width:300px;height:300px}.button-primary{background:linear-gradient(135deg,#1f2937,#111827);color:#e5e7eb;border:2px solid #374151;box-shadow:0 4px 6px rgba(0,0,0,.3)}.button-primary:hover{transform:scale(1.05) translateY(-2px);box-shadow:0 8px 16px rgba(0,0,0,.4);border-color:#4b5563}.button-primary:active{animation:jelly .5s cubic-bezier(.68,-.55,.265,1.55)}.button-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;animation:none}.button-secondary{background:linear-gradient(135deg,#1f2937,#111827);color:#e5e7eb;border:2px solid #374151;box-shadow:0 4px 6px rgba(0,0,0,.3)}.button-secondary:hover{transform:scale(1.05) translateY(-2px);box-shadow:0 8px 16px rgba(0,0,0,.4);border-color:#4b5563;background:linear-gradient(135deg,#374151,#1f2937)}.button-secondary:active{animation:jelly .5s cubic-bezier(.68,-.55,.265,1.55)}@keyframes jelly{0%{transform:scale(1)}25%{transform:scale(.9)}50%{transform:scale(1.08)}75%{transform:scale(.95)}to{transform:scale(1)}}.loading{display:inline-block;width:20px;height:20px;border-radius:50%;border:3px solid hsla(0,0%,100%,.3);border-top-color:#fff;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.preview-container{margin-top:2rem}.preview-title{font-size:1.2rem;font-weight:600;margin-bottom:1rem;color:#f3f4f6}.svg-preview-wrapper{border:2px solid #374151;border-radius:8px;padding:1rem;background:#1f2937;margin-bottom:1rem}.svg-preview{border-radius:6px;padding:2rem;overflow:auto;display:flex;justify-content:center;align-items:center;min-height:200px;box-shadow:inset 0 2px 4px rgba(0,0,0,.1)}.svg-preview,.svg-preview svg{background:#fff;max-width:100%}.svg-preview svg{height:auto;display:block}.error{background:#7f1d1d;color:#fca5a5;border-radius:8px;border:1px solid #991b1b}.error,.success{padding:1rem;margin-top:1rem}.success{background:#064e3b;color:#6ee7b7;border-radius:8px;border:1px solid #065f46}.actions{display:flex;gap:1rem;margin-top:1rem}@media (max-width:768px){.container{padding:1rem}.title{font-size:2rem}.card{padding:1.5rem}.params-grid{grid-template-columns:1fr}.tabs{flex-wrap:wrap}}