.bg-box{
  margin-top: 14px;
  background:#f8fbff;
  border:1px solid #e8eefc;
  padding:14px;
  border-radius:14px;
}

.bg-upload{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-bottom: 12px;
}

.bg-status{
  width:100%;
  margin:6px 0 0;
  font-size: 14px;
  color:#4b5a7a;
}

.bg-preview-wrap{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:16px;
  align-items:start;
}

@media(max-width:980px){
  .bg-preview-wrap{
    grid-template-columns: 1fr;
  }
}

.bg-preview{
  background:#fff;
  border-radius:14px;
  border:1px solid #e8eefc;
  padding:14px;
}

.checkerboard{
  width:100%;
  min-height:260px;
  border-radius:12px;
  border:1px solid #e8eefc;

  background-image:
    linear-gradient(45deg, #e9eefb 25%, transparent 25%),
    linear-gradient(-45deg, #e9eefb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e9eefb 75%),
    linear-gradient(-45deg, transparent 75%, #e9eefb 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0px;

  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}

.checkerboard img{
  max-width:100%;
  max-height:520px;
  display:none;
  border-radius:12px;
}

.bg-tools{
  background:#fff;
  border:1px solid #e8eefc;
  border-radius:14px;
  padding:14px;
}

.bg-color-row{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font-size:14px;
}

.bg-meta{
  margin-top:12px;
  color:#4b5a7a;
  font-size:14px;
  line-height:1.5;
}