.compact-card{margin-bottom:1rem}.compact-card .card-header{font-size:.95rem}.image-preview{width:100%;height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:#f9f9f9;border:1px solid var(--border-color);border-radius:var(--border-radius)}.image-preview-large{width:100%;height:400px;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:#f9f9f9;border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:0 2px 10px rgba(0,0,0,.1);transition:all .3s ease;position:relative}.image-preview-compact{width:100%;height:400px;max-height:70vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:#f9f9f9;border:1px solid var(--border-color);border-radius:var(--border-radius);box-shadow:0 1px 5px rgba(0,0,0,.1);transition:all .3s ease;position:relative}.image-preview img,.image-preview-compact img,.image-preview-large img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .3s ease}.image-preview-large:hover img{transform:scale(1.02)}.image-stats-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:auto;min-width:150px;max-width:90%;justify-content:space-around;text-align:center;background-color:rgba(0,0,0,.5);border-radius:8px;color:#fff;padding:12px 15px;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 2px 10px rgba(0,0,0,.2);transition:all .3s ease;z-index:5}.image-preview-large:hover .image-stats-overlay{background-color:rgba(0,0,0,.75);transform:translate(-50%,-50%) scale(1.05)}.overlay-stat{font-size:1.2rem}.overlay-value{font-weight:700;font-size:1.3rem;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.overlay-badge{font-weight:700;color:#4caf50;font-size:1.3rem;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.image-info{font-size:.9rem}.stat-item{padding:.8rem;transition:all .3s ease}.stat-label{color:#666;font-size:.8rem;text-transform:uppercase;letter-spacing:.05rem;margin-bottom:.3rem}.stat-value{font-size:1.1rem;font-weight:600;color:#333}.reduction-badge{background-color:#28a745;color:#fff;padding:.2rem .6rem;border-radius:1rem;font-size:.9rem;display:inline-block}.format-badge{background-color:#f8f9fa;border:1px solid #ddd;padding:.2rem .5rem;border-radius:.3rem;font-size:.85rem;color:#555;display:inline-block}#file-input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}#file-input+label{display:inline-block;padding:.75rem 1.5rem;background-color:var(--primary-color);color:#fff;border-radius:var(--border-radius);cursor:pointer;font-weight:600;text-transform:uppercase;font-size:.875rem;letter-spacing:.5px;transition:var(--transition)}#file-input+label:hover{background-color:var(--secondary-color)}.card{box-shadow:var(--box-shadow);margin-bottom:2rem;border:none;border-radius:var(--border-radius)}.card-header{background-color:#fff;font-weight:600;border-bottom:1px solid var(--border-color);padding:1rem}.btn{padding:.75rem 1.5rem;border-radius:var(--border-radius);font-weight:600;transition:var(--transition)}.btn-primary{background-color:var(--primary-color);border-color:var(--primary-color)}.btn-primary:hover{background-color:var(--secondary-color);border-color:var(--secondary-color)}.form-range::-webkit-slider-thumb{background:var(--primary-color)}.form-range::-moz-range-thumb{background:var(--primary-color)}.form-range::-ms-thumb{background:var(--primary-color)}.stat-item:hover{background-color:rgba(0,0,0,.02);border-radius:var(--border-radius)}.reduction-badge.high{background-color:#28a745}.reduction-badge.medium{background-color:#17a2b8}.reduction-badge.low{background-color:#ffc107}.reduction-badge.none{background-color:#6c757d}.format-label{font-size:1rem;font-weight:600;color:#555}.format-selection .btn-group{margin-bottom:1rem}.format-selection .btn{min-width:100px;transition:all .2s ease}.format-selection .btn.active{background-color:var(--primary-color);color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transform:translateY(-2px)}#download-format{font-weight:700;letter-spacing:.5px}.format-badge.jpeg,.format-badge.jpg{background-color:#e3f2fd;color:#0d47a1;border-color:#bbdefb}.format-badge.webp{background-color:#ede7f6;color:#4527a0;border-color:#d1c4e9}.image-stats{background-color:#f9f9f9;border-radius:var(--border-radius);padding:1rem;margin-top:1.5rem;box-shadow:inset 0 0 5px rgba(0,0,0,.05)}@media screen and (max-width:768px){.image-preview{height:200px}.image-preview-large{height:300px}#download-btn,#download-jpg-btn,#download-webp-btn{width:100%}.format-option.disabled{opacity:.6;cursor:not-allowed}.image-stats-overlay{padding:10px;min-width:150px;max-width:90%}.overlay-stat{font-size:.9rem}.overlay-badge,.overlay-value{font-size:1rem}@media (max-width:576px){.image-stats-overlay{padding:8px;min-width:120px}.overlay-stat{font-size:.8rem}.overlay-badge,.overlay-value{font-size:.9rem}.image-preview-compact{height:300px}}@media (min-width:1200px){.image-preview-compact{max-height:65vh}.optimize-content-wrapper{max-width:1000px;margin:0 auto}}@media (min-width:1500px){.image-preview-compact{max-height:60vh}}}