* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }
    body {
      background: #f5f7fa;
      padding: 20px;
    }
   
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
    }
    .title {
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }
    .btn {
      padding: 8px 16px;
      border: none;
      border-radius: 6px;
      background: #409eff;
      color: white;
      cursor: pointer;
      font-size: 14px;
      transition: 0.2s;
    }
    .btn:hover {
      opacity: 0.9;
    }
    .btn-danger {
      background: #f56c6c;
    }
    .album-create {
      margin-bottom: 20px;
      display: flex;
      gap: 10px;
    }
    #albumName {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      outline: none;
    }
    .upload-area {
      border: 2px dashed #409eff;
      border-radius: 10px;
      padding: 40px 20px;
      text-align: center;
      background: white;
      margin-bottom: 20px;
      cursor: pointer;
    }
    .upload-area.drag-over {
      background: #ecf5ff;
      border-color: #66b1ff;
    }
    .statistic {
      background: white;
      padding: 15px;
      border-radius: 10px;
      margin-bottom: 20px;
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
    }
    .stat-item {
      font-size: 14px;
      color: #666;
    }
    .album-list {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }
    .album-item {
      width: 150px;
      height: 150px;
      background: white;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .album-item.active {
      border: 2px solid #409eff;
    }
    .upload-list {
      width: 100%;
      background: white;
      border-radius: 10px;
      padding: 15px;
    }
    .upload-item {
      display: flex;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid #eee;
      gap: 10px;
    }
    .pic-list{
      display: flex;
      flex-wrap: wrap;
      background: white;
      border-radius: 10px;
      padding: 0px 15px;
      overflow: auto;
    }
    .pic-item {
      width: 100px;
      flex-direction: column;
      margin: 10px;
    }
    .upload-item:last-child {
      border-bottom: none;
    }
    .file-info {
      flex: 1;
      min-width: 0;
    }
    .file-name {
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .progress-bar {
      height: 6px;
      background: #eee;
      border-radius: 3px;
      margin-top: 5px;
      overflow: hidden;
    }
    .progress {
      height: 100%;
      background: #409eff;
      width: 0%;
      transition: width 0.2s;
    }
    .progress.error {
      background: #f56c6c;
    }
    .progress.success {
      background: #67c23a;
    }
    .action-btns {
      display: flex;
      gap: 5px;
    }
    .preview-img {
      width: 40px;
      height: 40px;
      object-fit: cover;
      border-radius: 4px;
    }
    .preview-img01 {
      width: 100px;
      height: 100px;
      object-fit: cover;
      border-radius: 4px;
    }
    .avatarIcon{
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    /* 新增：等待状态样式 */
    .progress.waiting {
      background: #909399;
    }