.upload-icon{font-size:2rem;color:var(--color-primary);margin-bottom:.5rem}.drop-text{margin-bottom:.75rem;color:var(--color-slate-600)}.drop-hint{margin-top:.75rem}.supported-formats{font-size:.875rem;color:var(--color-slate-500)}.webp-spec,.tips-section ul,.bg-slate-50 ul{list-style:disc;padding-left:1.25rem;display:grid;gap:.375rem;font-size:.875rem;line-height:1.7;color:var(--color-slate-600)}.webp-quality{display:grid;gap:.5rem}.webp-quality input[type=range]{flex:1;max-width:420px}.quality-display{min-width:2.5rem;font-weight:700;font-size:1.125rem;color:var(--color-primary)}.quality-guide{color:var(--color-slate-500)}.setting-item{display:flex;flex-direction:column;gap:.375rem;padding:.75rem 1rem;border:1px solid var(--color-slate-200);border-radius:.5rem;background-color:#fff;cursor:pointer}.setting-item .setting-title{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9375rem}.setting-item small{color:var(--color-slate-500);line-height:1.6}.setting-item:has(input:disabled){opacity:.6;cursor:not-allowed}#statusMessage{white-space:pre-line}.webp-list{display:grid;gap:.75rem}.webp-item{display:flex;align-items:center;gap:1rem;padding:.75rem;border:1px solid var(--color-slate-200);border-radius:.5rem;background-color:#fff;flex-wrap:wrap}.webp-item .file-preview{width:64px;height:64px;-o-object-fit:contain;object-fit:contain;border-radius:.375rem;background-color:var(--color-slate-100);flex-shrink:0}.webp-item .file-details{flex:1;min-width:12rem;font-size:.875rem;color:var(--color-slate-600)}.webp-item .file-name{font-weight:600;color:var(--color-slate-800);word-break:break-all}.size-info{display:flex;flex-wrap:wrap;gap:.25rem .75rem;margin-top:.25rem}.size-change{font-weight:700}.size-change.is-smaller{color:var(--color-success-dark)}.size-change.is-larger{color:var(--color-error-dark)}.result-meta{margin-top:.25rem;font-size:.8125rem;color:var(--color-slate-500)}.result-actions{display:flex;gap:.5rem;flex-wrap:wrap}.webp-result-hint{font-size:.8125rem;color:var(--color-slate-500);line-height:1.6;margin-bottom:.75rem}.compare-viewer{max-height:70vh;overflow:auto;border:1px solid var(--color-slate-200);border-radius:.5rem;background-color:var(--color-slate-100);background-image:linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.compare-stage{--split: 50%;position:relative;margin:0 auto;max-width:100%;width:-moz-fit-content;width:fit-content;line-height:0}.compare-stage img{display:block;max-width:100%;height:auto}.compare-stage.is-actual-size{max-width:none}.compare-stage.is-actual-size img{max-width:none;width:100%}.compare-stage .compare-before{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;clip-path:inset(0 calc(100% - var(--split)) 0 0)}.compare-divider{position:absolute;top:0;bottom:0;left:var(--split);width:2px;margin-left:-1px;background-color:#fff;box-shadow:0 0 0 1px #00000059;pointer-events:none}.compare-label{position:absolute;top:.5rem;padding:.25rem .5rem;border-radius:.25rem;background-color:#0009;color:#fff;font-size:.75rem;line-height:1.4;pointer-events:none}.compare-label-before{left:.5rem}.compare-label-after{right:.5rem}.compare-slider-label input{width:200px}.support-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;font-weight:700}.browser-list{display:grid;gap:.375rem;font-size:.875rem}.browser-item{display:flex;align-items:center;gap:.5rem}.browser-item small{color:var(--color-slate-500)}.compare-slider-label{white-space:nowrap}.section-header{flex-wrap:wrap;gap:.5rem 1rem}.section-header .section-title{flex-shrink:0}.webp-quality input[type=range]:disabled{opacity:.45;cursor:not-allowed}