.drop-zone{border:2px dashed var(--color-border);border-radius:var(--radius);padding:48px 24px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:24px}.drop-zone.drag-over,.drop-zone:hover{border-color:var(--color-primary);background:rgba(37,99,235,.05)}.drop-zone p{color:var(--color-text-secondary);font-size:.9375rem;margin-bottom:8px}.drop-zone .drop-hint{font-size:.75rem;color:var(--color-text-secondary)}.preview-container{display:flex;gap:24px;margin-bottom:24px;flex-wrap:wrap}.preview-box{flex:1;min-width:200px;text-align:center}.preview-box img{max-width:100%;max-height:100%;object-fit:contain;background:repeating-conic-gradient(#f0f0f0 0 25%,transparent 0 50%) 50% /16px 16px}@media (prefers-color-scheme:dark){.preview-box img{background:repeating-conic-gradient(#333 0 25%,transparent 0 50%) 50% /16px 16px}}.preview-box .file-info{font-size:.75rem;color:var(--color-text-secondary);margin-top:8px}.quality-slider{width:100%;margin:0 0 16px}.size-comparison{display:flex;gap:16px;margin:16px 0;flex-wrap:wrap}.size-box{flex:1;min-width:140px;background:var(--color-bg);border:1px solid var(--color-border);border-radius:8px;padding:16px;text-align:center}.size-box .size-value{font-size:1.25rem;font-weight:700}.size-box .size-label{font-size:.75rem;color:var(--color-text-secondary);margin-top:4px}.feature-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}.feature-badges span{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:600;border:1px solid var(--color-border);color:var(--color-text-secondary)}.ext-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.7rem;font-weight:700;background:var(--color-bg);color:var(--color-primary);margin-left:6px;letter-spacing:.5px;vertical-align:middle;border:1px solid var(--color-border)}.ext-badge:empty{display:none}.preview-img-area{height:260px;border:1px solid var(--color-border);border-radius:8px;overflow:hidden;background:var(--color-bg)}.preview-img-area,.preview-img-area .placeholder-box{display:flex;align-items:center;justify-content:center}.preview-img-area .placeholder-box{width:100%;height:100%;margin:0;padding:16px;border:none;background:transparent;text-align:center}.preview-img-area .placeholder-clickable{cursor:pointer}.preview-img-area:has(.placeholder-clickable):hover{border-color:var(--color-primary)}.ic-spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:ic-spin .8s linear infinite}.ic-spinner[hidden]{display:none}@keyframes ic-spin{to{transform:rotate(1turn)}}#btn-download.btn-primary{background:var(--color-primary-bg);display:block;width:100%;margin-left:0;margin-top:4px}#btn-download.btn-primary:hover{background:#1e40af}.btn-row .btn-secondary{border-radius:var(--radius-md);padding:12px 26px;font-size:1rem;font-weight:700}.dim-info{font-weight:400;color:var(--color-text-secondary);font-size:.8125rem}