.webp-converter-container{max-width:1200px;margin:0 auto;padding:2rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;color:#333}.webp-converter-container *{box-sizing:border-box}.webp-converter-container .converter-header{text-align:center;margin-bottom:2rem}.webp-converter-container .converter-header h1{font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(90deg,#4776e6,#8e54e9);-webkit-background-clip:text;-webkit-text-fill-color:rgba(0,0,0,0);background-clip:text}.webp-converter-container .converter-header p{font-size:1.2rem;color:#666}.webp-converter-container .converter-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;margin-bottom:3rem}.webp-converter-container .drop-zone{width:100%;max-width:600px;min-height:300px;border:2px dashed #ccc;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:2rem;transition:all .3s ease;position:relative}.webp-converter-container .drop-zone.dragging{border-color:#4776e6;background-color:rgba(71,118,230,.05)}.webp-converter-container .drop-zone.has-file{border-style:solid;border-color:#4776e6}.webp-converter-container .drop-zone .file-input{display:none}.webp-converter-container .upload-prompt{display:flex;flex-direction:column;align-items:center;text-align:center}.webp-converter-container .upload-prompt .upload-icon{margin-bottom:1rem;color:#666}.webp-converter-container .upload-prompt .drag-text{font-size:1.2rem;font-weight:500;margin-bottom:.5rem}.webp-converter-container .upload-prompt .or-text{margin:.5rem 0;color:#888}.webp-converter-container .upload-prompt .file-limit{margin-top:1rem;font-size:.9rem;color:#999}.webp-converter-container .browse-button{background-color:#4776e6;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:4px;font-size:1rem;cursor:pointer;transition:background-color .3s ease}.webp-converter-container .browse-button:hover{background-color:#3a67d7}.webp-converter-container .file-info{display:flex;flex-direction:column;align-items:center;width:100%}.webp-converter-container .file-info .file-preview{margin-bottom:1rem;max-width:100%;overflow:hidden}.webp-converter-container .file-info .file-preview .preview-image{max-width:100%;max-height:200px;border-radius:4px;object-fit:contain}.webp-converter-container .file-info .file-details{text-align:center}.webp-converter-container .file-info .file-details .file-name{font-weight:500;margin-bottom:.25rem;word-break:break-all}.webp-converter-container .file-info .file-details .file-size{color:#888;font-size:.9rem}.webp-converter-container .error-message{background-color:#ffebee;border-left:4px solid #ef5350;padding:.75rem 1rem;border-radius:4px;margin:1rem 0;width:100%;max-width:600px}.webp-converter-container .error-message p{margin:0;color:#c62828}.webp-converter-container .action-buttons{display:flex;gap:1rem;margin-top:1rem}.webp-converter-container .action-buttons button{padding:.75rem 1.5rem;border-radius:4px;font-size:1rem;cursor:pointer;transition:all .3s ease;border:none}.webp-converter-container .action-buttons button:disabled{opacity:.6;cursor:not-allowed}.webp-converter-container .action-buttons .convert-button{background-color:#4caf50;color:#fff}.webp-converter-container .action-buttons .convert-button:hover:not(:disabled){background-color:#43a047}.webp-converter-container .action-buttons .reset-button{background-color:#f5f5f5;color:#333;border:1px solid #ddd}.webp-converter-container .action-buttons .reset-button:hover:not(:disabled){background-color:#e0e0e0}.webp-converter-container .result-container{width:100%;max-width:600px;margin-top:2rem;display:flex;flex-direction:column;align-items:center}.webp-converter-container .result-container h2{color:#4caf50;margin-bottom:1.5rem}.webp-converter-container .result-container .converted-preview{width:100%;margin-bottom:1.5rem;display:flex;justify-content:center}.webp-converter-container .result-container .converted-preview .converted-image{max-width:100%;max-height:300px;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.1);object-fit:contain}.webp-converter-container .result-container .download-section{text-align:center;width:100%}.webp-converter-container .result-container .download-section p{margin-bottom:1rem}.webp-converter-container .result-container .download-section .download-button{background-color:#8e54e9;color:#fff;padding:.75rem 1.5rem;border-radius:4px;font-size:1rem;cursor:pointer;border:none;transition:background-color .3s ease}.webp-converter-container .result-container .download-section .download-button:hover{background-color:#7b46d1}.webp-converter-container .converter-footer{margin-top:4rem;border-top:1px solid #eee;padding-top:2rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem}@media(max-width:768px){.webp-converter-container .converter-footer{grid-template-columns:1fr}}.webp-converter-container .converter-footer h3{margin-bottom:1rem;color:#555}.webp-converter-container .converter-footer ol,.webp-converter-container .converter-footer ul{padding-left:1.2rem}.webp-converter-container .converter-footer ol li,.webp-converter-container .converter-footer ul li{margin-bottom:.5rem;line-height:1.5}@media(max-width:768px){.webp-converter-container{padding:1rem}.webp-converter-container .converter-header h1{font-size:2rem}.webp-converter-container .drop-zone{min-height:200px;padding:1rem}.webp-converter-container .action-buttons{flex-direction:column;width:100%;max-width:600px}.webp-converter-container .action-buttons button{width:100%}}