.image-converter-container{max-width:900px;padding:20px;background:#fefefe;text-align:center;margin:125px auto 0;display:block!important}h2{font-size:30px;color:#333;margin-bottom:10px}h1{font-weight:700}p{font-size:16px;color:#777;margin-top:0}.upload-area{border:2px dashed #575052;padding:40px;background-color:#f9f9f9;border-radius:8px;cursor:pointer;margin-bottom:20px}.upload-area h2{font-size:24px;color:#333}.image-settings-panel{margin-top:30px}.thumbnail-container{margin-bottom:20px}.thumbnail{width:100px;height:100px;object-fit:cover;border-radius:5px}.image-meta p{font-size:14px;color:#555}.settings-button{background-color:#575052;color:#fff;border:none;padding:8px 15px;cursor:pointer;border-radius:4px}.settings-button:hover{background-color:#4d4341}.popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000}.popup{background-color:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 10px #0003;width:500px;max-width:90%;display:flex;flex-direction:column;gap:20px}h3{font-size:1.5rem;margin-bottom:15px;text-align:center;color:#333}.background-options,.compression-options,.resize-options{display:flex;flex-direction:column}label{font-weight:700;color:#575052}input[type=range]{width:100%}input[type=color]{width:50px;height:30px}.popup-actions{display:flex;justify-content:space-between;gap:10px}.popup-actions button{background-color:#575052;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-weight:700;transition:background-color .3s ease}.popup-actions button:hover{background-color:#3d3a38}.popup-actions button:focus{outline:none}input[type=number]{width:100%;padding:8px;margin-top:5px}select{padding:8px;margin-bottom:22px}.output-format-select{padding:8px;margin-bottom:5px;border-radius:4px;border:1px solid #ccc}.format-dropdown{z-index:1}.format-list{background-color:#fff;padding:10px;box-shadow:0 0 10px #0000001a}.format-item{padding:8px;cursor:pointer}.format-item:hover{background-color:#f0f0f0}.thumbnail-container{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;border:1px solid #ddd;padding:10px;border-radius:5px}.image-meta{flex:1 1;margin-left:15px}.image-options{display:flex;align-items:center;gap:15px}.settings-container{display:flex;align-items:center;gap:10px}.output-format-select{padding:5px;font-size:14px}.convert-button{color:#fff;padding:8px 15px;border:none;border-radius:5px;cursor:pointer}.convert-button,.convert-button:hover{background-color:#575052}.compression-result{background:linear-gradient(180deg,#f9f9f9,#f9f9f9);border-radius:12px;padding:20px;box-shadow:0 4px 8px #0000001a;text-align:center;margin:20px auto}.result-title{font-size:1.5rem;font-weight:700;color:#343a40;margin-bottom:15px}.result-details{margin:20px 0;font-size:1rem;color:#495057}.result-detail-item{display:flex;justify-content:space-between;margin:10px 0;padding:10px 15px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}.detail-label{font-weight:700;color:#212529}.detail-value{font-size:1rem;color:#007bff}.compression-circle{margin:20px auto}.download-button{background-color:#007bff;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:background-color .3s ease-in-out}.download-button:hover{background-color:#0056b3}.compression-options select{width:100%;padding:8px;font-size:14px;border-radius:4px;border:1px solid #ddd;box-sizing:border-box}@media (max-width:767px){.compression-options select{font-size:14px;padding:10px}.compression-options{display:block;flex-direction:row}.image-options{flex-direction:row;display:block!important}}@media (min-width:768px) and (max-width:1024px){.compression-options select{font-size:16px;padding:12px}.compression-options{display:block;flex-direction:row}.image-options{flex-direction:row;display:block!important}}@media (min-width:1025px){.compression-options select{font-size:16px;padding:12px}}@keyframes celebration{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.5);opacity:1}to{transform:scale(1);opacity:0}}.celebration{display:inline-block;animation:celebration 1s ease-in-out;color:#ff9800;font-size:2rem;font-weight:700}