.pdf-rotate-preview{
  display:grid;
  gap:12px;
  margin-top:22px;
  padding:20px;
  border:1px solid #dfe6f1;
  border-radius:14px;
  background:#f7f9fd;
}
.pdf-rotate-preview[hidden]{
  display:none !important;
}
.pdf-rotate-preview .pdf-preview-head input{
  width:76px;
  padding:8px;
}
.pdf-rotate-preview .pdf-preview-head span{
  color:#8492a7;
  font-weight:500;
  white-space:nowrap;
}
.pdf-rotate-state{
  width:fit-content;
  padding:7px 11px;
  border:1px solid #cfe0ff;
  border-radius:999px;
  background:#edf4ff;
  color:#315d9b;
  font-size:12px;
  font-weight:700;
}
.pdf-rotate-state.is-excluded{
  border-color:#e2e6ec;
  background:#f1f3f6;
  color:#69788c;
}
.pdf-rotate-state.is-invalid{
  border-color:#f2d2a2;
  background:#fff7e8;
  color:#9a6519;
}
#pdf-rotate-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:240px;
  max-height:640px;
  overflow:auto;
  padding:18px;
  border:1px solid #d9e1ed;
  border-radius:10px;
  background:#e9eef6;
  line-height:0;
  box-shadow:0 8px 24px #25375212;
}
#pdf-rotate-canvas{
  display:block;
  max-width:100%;
  height:auto;
  background:#fff;
  box-shadow:0 3px 14px #26374f24;
}
.pdf-rotate-preview>small{
  color:#7e8da3;
  line-height:1.6;
}
.pdf-rotate-preview.is-loading #pdf-rotate-stage:after{
  content:"正在生成预览…";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  background:#f4f7fbd9;
  color:#5f7088;
  font-size:13px;
  line-height:1.5;
}
@media(max-width:520px){
  .pdf-rotate-preview{
    padding:12px;
  }
  .pdf-rotate-preview .pdf-preview-head{
    align-items:flex-start;
    flex-direction:column;
  }
  #pdf-rotate-stage{
    min-height:180px;
    padding:10px;
  }
}