.btn,.file-input,.upload-area{cursor:pointer}.ad-slot,.progress-text,.summary-item,.tool-header,.upload-area{text-align:center}.image-compressor-container{max-width:1200px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;color:#333;line-height:1.6}.tool-header{margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid #eaeaea}.tool-title{font-size:2.5rem;color:#2c3e50;margin-bottom:10px;font-weight:700}.tool-description{font-size:1.1rem;color:#666;max-width:800px;margin:0 auto}.ad-slot{margin:25px 0}.ad-slot-bottom,.ad-slot-top{min-height:90px;display:flex;align-items:center;justify-content:center}.ad-slot-sidebar{min-height:250px;width:300px;margin-left:30px}.ad-placeholder{background:linear-gradient(135deg,#f5f7fa 0,#c3cfe2 100%);border:2px dashed #a0aec0;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#718096;font-weight:500}.ad-slot-bottom .ad-placeholder,.ad-slot-top .ad-placeholder{width:728px;height:90px}.ad-slot-sidebar .ad-placeholder{width:300px;height:250px}.compressor-interface{background:#fff;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.08);padding:30px;margin-bottom:30px}.upload-section{display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:30px}.upload-area{flex:1;min-width:300px;border:3px dashed #4299e1;border-radius:12px;padding:40px 20px;transition:.3s;background:#f7fafc;position:relative;overflow:hidden}.upload-area:hover{background:#ebf8ff;border-color:#3182ce;transform:translateY(-2px);box-shadow:0 8px 25px rgba(66,153,225,.15)}.upload-area.drag-over{background:#e6fffa;border-color:#38b2ac;border-style:solid}.upload-icon{color:#4299e1;margin-bottom:20px}.upload-title{font-size:1.5rem;color:#2d3748;margin-bottom:8px}.upload-subtitle{color:#718096;margin-bottom:15px}.upload-formats{font-size:.9rem;color:#a0aec0;font-weight:500}.file-input{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0}.section-title{font-size:1.4rem;color:#2d3748;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #e2e8f0}.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px;margin-bottom:30px}.option-item{background:#f8fafc;padding:20px;border-radius:8px;border-left:4px solid #4299e1}.option-item label{display:block;margin-bottom:10px;font-weight:600;color:#4a5568}.quality-slider{width:100%;height:8px;border-radius:4px;background:#e2e8f0;outline:0;-webkit-appearance:none}.quality-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#4299e1;cursor:pointer;border:3px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,.2)}.dimension-input,.format-select{width:100%;padding:12px 15px;border:1px solid #e2e8f0;border-radius:6px;font-size:1rem;background:#fff;transition:border-color .3s}.dimension-input:focus,.format-select:focus{outline:0;border-color:#4299e1;box-shadow:0 0 0 3px rgba(66,153,225,.15)}.option-hint{font-size:.85rem;color:#718096;margin-top:8px;font-style:italic}.action-buttons{display:flex;gap:15px;justify-content:center}.btn{padding:14px 28px;border:none;border-radius:8px;font-size:1rem;font-weight:600;transition:.3s;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background:linear-gradient(135deg,#4299e1 0,#3182ce 100%);color:#fff}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#3182ce 0,#2c5282 100%);transform:translateY(-2px);box-shadow:0 6px 15px rgba(49,130,206,.3)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:#e2e8f0;color:#4a5568}.btn-secondary:hover{background:#cbd5e0;transform:translateY(-2px)}.progress-section{background:#f7fafc;border-radius:10px;padding:25px;margin:25px 0;border:1px solid #e2e8f0}.progress-container{margin-bottom:20px}.progress-bar{height:12px;background:#e2e8f0;border-radius:6px;overflow:hidden;margin-bottom:10px}.progress-fill{height:100%;background:linear-gradient(90deg,#48bb78 0,#38b2ac 100%);border-radius:6px;width:0%;transition:width .3s}.progress-text{font-weight:600;color:#2d3748;font-size:1.1rem}.progress-details{display:flex;justify-content:space-around;flex-wrap:wrap;gap:15px}.detail-item{display:flex;flex-direction:column;align-items:center;padding:10px 20px;background:#fff;border-radius:8px;min-width:150px}.detail-label{font-size:.9rem;color:#718096;margin-bottom:5px}.detail-value{font-weight:600;color:#2d3748;font-size:1.1rem}.results-section{background:#f0fff4;border-radius:10px;padding:25px;margin:25px 0;border:1px solid #c6f6d5}.results-summary{display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px;margin-bottom:30px;padding:20px;background:#fff;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.05)}.summary-item{min-width:150px}.summary-label{display:block;font-size:.95rem;color:#718096;margin-bottom:5px}.summary-value{font-size:1.4rem;font-weight:700;color:#2d3748}.savings{color:#48bb78}.images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:25px;margin-bottom:30px}.image-card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,.08);transition:transform .3s}.image-card:hover{transform:translateY(-5px)}.image-preview{width:100%;height:180px;object-fit:cover;border-bottom:1px solid #e2e8f0}.image-info{padding:15px}.image-name{font-weight:600;color:#2d3748;margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.image-stats{display:flex;justify-content:space-between;font-size:.9rem}.image-original{color:#718096}.image-compressed{color:#48bb78;font-weight:600}.image-actions{display:flex;gap:10px;margin-top:15px}.btn-small{padding:8px 15px;font-size:.9rem;flex:1}.btn-success{background:#48bb78;color:#fff}.btn-success:hover{background:#38a169}.results-actions{display:flex;gap:15px;justify-content:center;margin-top:25px}.info-section{background:#f7fafc;border-radius:12px;padding:30px;margin-top:40px}.info-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}.info-item h4{color:#2d3748;margin-bottom:15px;font-size:1.2rem}.info-item li,.info-item p{color:#4a5568;line-height:1.7}.info-item ul{padding-left:20px}.info-item li{margin-bottom:8px}@media (max-width:1024px){.upload-section{flex-direction:column}.ad-slot-sidebar{width:100%;margin-left:0;margin-top:25px}.ad-slot-sidebar .ad-placeholder{width:100%;max-width:300px;margin:0 auto}}@media (max-width:768px){.image-compressor-container{padding:15px}.tool-title{font-size:2rem}.compressor-interface{padding:20px}.images-grid,.options-grid{grid-template-columns:1fr}.action-buttons,.results-actions{flex-direction:column}.btn{width:100%;margin-bottom:10px}.ad-slot-bottom .ad-placeholder,.ad-slot-top .ad-placeholder{width:100%;max-width:728px}}@media (max-width:480px){.tool-title{font-size:1.7rem}.upload-area{padding:30px 15px}.upload-title{font-size:1.3rem}.section-title{font-size:1.2rem}.progress-details{flex-direction:column;align-items:center}.detail-item{width:100%;max-width:250px}}.error-message,.success-message{padding:15px;border-radius:8px;margin:15px 0}@keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}}.loading{animation:1.5s infinite pulse}.error-message{background:#fed7d7;color:#9b2c2c;border-left:4px solid #e53e3e}.success-message{background:#c6f6d5;color:#22543d;border-left:4px solid #48bb78}