// 星妈实验室发布页面样式
.xingmalabpublishpage {
  width: 750rpx;
  height: 1624rpx;
  left: 0rpx;
  top: 0rpx;
  position: absolute;
  
  .xingmalabpublishpagebg {
    width: 750rpx;
    height: 1624rpx;
    left: 0rpx;
    top: 0rpx;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  // 未选择状态
  .xingmalabpublishpagenosel {
    width: 750rpx;
    height: 1416rpx;
    left: 0rpx;
    top: 208rpx;
    position: absolute;
    
    .xingmalabpublishpagenoseltextplaceholder {
      width: 684rpx;
      height: 160rpx;
      left: 33rpx;
      top: 949rpx;
      position: absolute;
      font-size: 32rpx;
      line-height: 1.5;
      color: rgba(0, 0, 0, 1);
      border: none;
      background: transparent;
      resize: none;
      outline: none;
      
      &::placeholder {
        color: rgba(189, 191, 195, 1);
      }
    }
    
    .xingmalabpublishpagenoselbottomcon {
      width: 750rpx;
      height: 218rpx;
      left: 0rpx;
      top: 1198rpx;
      position: absolute;
      
      .xingmalabpublishpagenoselbottomconbg {
        width: 750rpx;
        height: 218rpx;
        left: 0rpx;
        top: 0rpx;
        position: absolute;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
      }
      
      .xingmalabpublishpagenoselbottomconbtn {
        width: 686rpx;
        height: 94rpx;
        left: 32rpx;
        top: 32rpx;
        position: absolute;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        
        transition: opacity 0.3s ease;
        
        &:hover {
          opacity: 0.8;
        }
      }
    }
    
    .xingmalabpublishpagenoselbtn {
      width: 686rpx;
      height: 912rpx;
      left: 32rpx;
      top: 0rpx;
      position: absolute;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      
      transition: opacity 0.3s ease;
      
      &:hover {
        opacity: 0.8;
      }
    }
  }
  
  // 主内容区域（整合未选择状态和选择状态）
  .xingmalabpublishpagenosel {
    // 选择状态下的文案输入框样式
    &:has(.xingmalabpublishpageselbottomcon) .xingmalabpublishpagenoseltextplaceholder {
      width: 684rpx;
      height: 160rpx;
      left: 33rpx;
      top: 949rpx;
      color: rgba(0, 0, 0, 1);
    }
    
    // 选择状态下的底部按钮区域
    .xingmalabpublishpageselbottomcon {
      width: 750rpx;
      height: 218rpx;
      left: 0rpx;
      top: 1198rpx;
      position: absolute;
      
      .xingmalabpublishpageselbottomconpublishbtnbg {
        width: 750rpx;
        height: 218rpx;
        left: 0rpx;
        top: 0rpx;
        position: absolute;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
      }
      
      .xingmalabpublishpageselbottomconpublishbtn {
        width: 686rpx;
        height: 94rpx;
        left: 32rpx;
        top: 32rpx;
        position: absolute;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        
        transition: opacity 0.3s ease;
        
        &:hover {
          opacity: 0.8;
        }
      }
    }
    
    // 已上传图片显示
    .xingmalabpublishpageselpic {
      width: 686rpx;
      height: 912rpx;
      left: 32rpx;
      top: 0rpx;
      position: absolute;
      object-fit: cover;
      border-radius: 16rpx;
    }
    
    .xingmalabpublishpageselcpver {
      width: 686rpx;
      height: 189rpx;
      left: 32rpx;
      top: 723rpx;
      position: absolute;
      opacity: 0.3;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
    
    .xingmalabpublishpageselretry {
      width: 270rpx;
      height: 76rpx;
      left: 240rpx;
      top: 804rpx;
      position: absolute;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      
      transition: opacity 0.3s ease;
      
      &:hover {
        opacity: 0.8;
      }
    }
  }
  
  // 成功状态
  .xingmalabpublishpagesuc {
    width: 750rpx;
    height: 1416rpx;
    left: 0rpx;
    top: 208rpx;
    position: absolute;
    
    .xingmalabpublishpagesucbottomconicon {
      width: 125rpx;
      height: 148rpx;
      left: 312rpx;
      top: 0rpx;
      position: absolute;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
    
    .xingmalabpublishpagesucbottomcon {
      width: 750rpx;
      height: 218rpx;
      left: 0rpx;
      top: 1195rpx;
      position: absolute;
      
      .xingmalabpublishpagesucbottomconbg {
        width: 750rpx;
        height: 218rpx;
        left: 0rpx;
        top: 0rpx;
        position: absolute;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
      }
      
      .xingmalabpublishpagesucbottomconbtn {
        width: 686rpx;
        height: 94rpx;
        left: 32rpx;
        top: 32rpx;
        position: absolute;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        
        transition: opacity 0.3s ease;
        
        &:hover {
          opacity: 0.8;
        }
      }
    }
    
    .xingmalabpublishpagesucdesc {
      width: 538rpx;
      height: 117rpx;
      left: 111rpx;
      top: 191rpx;
      position: absolute;
      font-size: 30rpx;
      color: rgba(29, 30, 37, 1);
      line-height: 1.5;
      text-align: center;
    }
    
    .xingmalabpublishpagesucpicbg {
      width: 576rpx;
      height: 812rpx;
      left: 87rpx;
      top: 341rpx;
      position: absolute;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
    }
    
    .xingmalabpublishpagesucpic {
      width: 534rpx;
      height: 708rpx;
      left: 108rpx;
      top: 356rpx;
      position: absolute;
      object-fit: cover;
      border-radius: 16rpx;
    }
    
    .xingmalabpublishpagesucnum {
      width: 222rpx;
      height: 25rpx;
      left: 271rpx;
      top: 1081rpx;
      position: absolute;
      font-size: 32rpx;
      line-height: 25rpx;
      color: rgba(178, 124, 30, 1);
      text-align: center;
    }
  }
}

// 确认发布弹窗样式
.confirm-popup {
  background: white;
  border-radius: 24rpx;
  padding: 40rpx;
  width: 600rpx;
  max-width: 90vw;
  
  .confirm-title {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 40rpx;
    color: #333;
  }
  
  .confirm-content {
    margin-bottom: 40rpx;
    
    .confirm-image {
      width: 100%;
      height: 300rpx;
      margin-bottom: 20rpx;
      border-radius: 16rpx;
      overflow: hidden;
      
      image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    
    .confirm-description {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
      text-align: center;
      padding: 20rpx;
      background-color: #f8f9fa;
      border-radius: 12rpx;
      min-height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  
  .confirm-actions {
    display: flex;
    gap: 20rpx;
    
    .confirm-btn {
      flex: 1;
      height: 80rpx;
      border-radius: 40rpx;
      font-size: 28rpx;
      border: none;
      
      transition: all 0.3s ease;
      
      &.cancel {
        background-color: #f0f0f0;
        color: #666;
        
        &:hover {
          background-color: #e0e0e0;
        }
      }
      
      &.confirm {
        background-color: #007aff;
        color: white;
        
        &:hover {
          background-color: #0056cc;
        }
      }
    }
  }
}

// 响应式适配
@media screen and (max-width: 750px) {
  .xingmalabpublishpage {
    width: 100vw;
    height: 100vh;
    
    .xingmalabpublishpagebg,
    .xingmalabpublishpagenosel,
    .xingmalabpublishpagesel,
    .xingmalabpublishpagesuc {
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
    }
    
    .collection-image-area,
    .collection-description-area {
      position: relative;
      left: auto;
      top: auto;
      margin: 20rpx auto;
      width: 90%;
    }
  }
}

// 动画效果
.xingmalabpublishpage {
  .xingmalabpublishpagenosel,
  .xingmalabpublishpagesel,
  .xingmalabpublishpagesuc {
    animation: fadeIn 0.5s ease-in-out;
  }
  
  .collection-image-area,
  .collection-description-area {
    animation: slideInUp 0.8s ease-out 0.3s both;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 上传状态样式
.upload-placeholder {
  &.uploading {
    opacity: 0.7;
    pointer-events: none;
  }
}

// 文案输入框焦点样式
.description-textarea {
  &:focus {
    box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.2);
  }
}
