.png-converter-container{max-width:800px;margin:0 auto;padding:2rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}.png-converter-container h1{text-align:center;margin-bottom:2rem;color:#333}.png-converter-container .converter-card{background-color:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);padding:2rem;margin-bottom:2rem}.png-converter-container .file-input-section{margin-bottom:1.5rem;text-align:center}.png-converter-container .file-input{display:none}.png-converter-container .file-input-label{display:inline-block;padding:.75rem 1.5rem;background-color:#f0f0f0;border:2px dashed #ccc;border-radius:4px;cursor:pointer;font-size:1rem;transition:all .2s ease;color:#555;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.png-converter-container .file-input-label:hover{background-color:#e8e8e8;border-color:#aaa}.png-converter-container .options-section{background-color:#f9f9f9;border-radius:6px;padding:1.25rem;margin-bottom:1.5rem}.png-converter-container .quality-control{margin-bottom:1.25rem}.png-converter-container .quality-control label{display:block;margin-bottom:.5rem;font-weight:500}.png-converter-container .quality-slider{width:100%;height:8px;-webkit-appearance:none;appearance:none;background:#e0e0e0;outline:none;border-radius:4px}.png-converter-container .quality-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#4a90e2;cursor:pointer}.png-converter-container .quality-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#4a90e2;cursor:pointer}.png-converter-container .output-name{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.png-converter-container .output-name label{font-weight:500;margin-right:.5rem}.png-converter-container .output-name .filename-input{flex:1;padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:.9rem}.png-converter-container .output-name .file-extension{font-weight:500;color:#666}.png-converter-container .button-group{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.png-converter-container button{padding:.75rem 1.5rem;border:none;border-radius:4px;cursor:pointer;font-weight:500;font-size:1rem;transition:background-color .2s ease}.png-converter-container button:disabled{opacity:.6;cursor:not-allowed}.png-converter-container .convert-button{background-color:#4a90e2;color:#fff}.png-converter-container .convert-button:hover:not(:disabled){background-color:#3a7bc8}.png-converter-container .download-button{background-color:#4caf50;color:#fff}.png-converter-container .download-button:hover{background-color:#3d9140}.png-converter-container .reset-button{background-color:#f0f0f0;color:#333}.png-converter-container .reset-button:hover{background-color:#e0e0e0}.png-converter-container .preview-section{margin-top:1.5rem}.png-converter-container .preview-section .preview-container h3{margin-bottom:.75rem;color:#444}.png-converter-container .preview-section .preview-image{max-width:100%;max-height:400px;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.1);display:block;margin:0 auto}@media(max-width:600px){.png-converter-container{padding:1rem}.png-converter-container .converter-card{padding:1.25rem}.png-converter-container .button-group{flex-direction:column}.png-converter-container .button-group button{width:100%}}