.compressor{width:100%}.upload-area{border-radius:var(--radius);text-align:center;cursor:pointer;border:2px dashed #ccc;flex-direction:column;justify-content:center;align-items:center;min-height:240px;padding:2rem;display:flex}.upload-title{font-size:1.2rem;font-weight:600}.upload-description{margin-top:.25rem}.upload-formats{margin-top:.75rem;font-size:.85rem}.image-workspace{margin-top:1.5rem}.preview-container{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.preview-box{min-width:0}.preview-box>span{margin-bottom:.5rem;font-weight:600;display:block}.preview-box img{object-fit:contain;border-radius:var(--radius);border:1px solid #ddd;width:100%;max-height:400px;display:block}.compression-controls{margin-top:1.5rem}.compression-controls label{margin-bottom:.5rem;display:block}#quality{width:100%;display:block}#quality:disabled{opacity:.5;cursor:not-allowed}.format-note{color:#8a5a00;border-radius:var(--radius);background:#fff8e6;border:1px solid #f0d896;margin:.5rem 0 0;padding:.6rem .8rem;font-size:.85rem}.file-info{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.5rem;display:grid}.file-info div{border-radius:var(--radius);border:1px solid #ddd;padding:1rem}.file-info span,.file-info strong{display:block}.file-info span{margin-bottom:.25rem;font-size:.85rem}.compressor-actions{flex-wrap:wrap;gap:.75rem;margin-top:1.5rem;display:flex}.compressor-actions button{font:inherit;border-radius:var(--radius);cursor:pointer;border:1px solid #ccc;padding:.7rem 1.2rem}.primary-button{font-weight:600}.secondary-button:disabled{opacity:.5;cursor:not-allowed}.compression-status{color:#444;min-height:1.5rem;margin-top:1rem;font-size:.9rem}@media (width<=600px){.preview-container,.file-info{grid-template-columns:1fr}.compressor-actions{flex-direction:column}.compressor-actions button{width:100%}}.preview-box img[hidden]{display:none}.upload-area.drag-over{border-style:solid;transform:scale(1.01)}.resize-control,.format-control,.quality-control{margin-top:1.25rem}.resize-control label,.format-control label,.quality-control label{margin-bottom:.5rem;display:block}.width-input{align-items:center;gap:.5rem;display:flex}.width-input input{width:100%;max-width:200px;font:inherit;border-radius:var(--radius);border:1px solid #ccc;padding:.7rem}.width-input span{font-size:.9rem}.tool-about{margin-top:var(--space-xl);padding-top:var(--space-lg);max-width:var(--content-width);border-top:1px solid #eee}.tool-about h2{margin-top:0}.tool-about h3{margin-top:var(--space-md)}.tool-about ul{padding-left:1.25rem}.tool-about li{margin-bottom:.5rem}.tool-about details{border-radius:var(--radius);border:1px solid #ddd;margin-top:.75rem;padding:.75rem 1rem}.tool-about summary{cursor:pointer;font-weight:600}.tool-about details p{margin:.5rem 0 0}