.install-plugin-container {
  padding: 16px;

  .install-plugin-alert {
    margin-bottom: 16px;
  }

  .upload-card {
    .ant-upload-drag {
      padding: 40px 20px;
      background: #fafafa;
      border: 2px dashed #d9d9d9;
      border-radius: 8px;
      transition: all 0.3s;

      &:hover {
        border-color: #1890ff;
        background: #e6f7ff;
      }
    }

    .ant-upload-drag-icon {
      margin-bottom: 16px;

      .anticon {
        font-size: 64px;
        color: #1890ff;
      }
    }

    .ant-upload-text {
      font-size: 16px;
      color: #333;
      margin-bottom: 8px;
    }

    .ant-upload-hint {
      font-size: 14px;
      color: #999;
    }
  }

  .upload-tips {
    margin-top: 24px;
    padding: 16px;
    background: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: 4px;

    h4 {
      margin-bottom: 12px;
      color: #d48806;
      font-size: 14px;
    }

    ul {
      margin: 0;
      padding-left: 20px;
      color: #666;

      li {
        padding: 4px 0;
        line-height: 1.6;
      }
    }
  }

  .install-result {
    margin-top: 24px;

    .result-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 12px;
      color: #333;
    }

    .result-list {
      .result-item {
        padding: 8px 12px;
        margin-bottom: 8px;
        background: #f5f5f5;
        border-radius: 4px;
        display: flex;
        align-items: center;
        gap: 8px;

        &.success {
          background: #f6ffed;
          border: 1px solid #b7eb8f;

          .anticon {
            color: #52c41a;
          }
        }

        &.error {
          background: #fff2f0;
          border: 1px solid #ffccc7;

          .anticon {
            color: #ff4d4f;
          }
        }

        .result-index {
          font-weight: 500;
          color: #666;
        }

        .result-msg {
          flex: 1;
        }
      }
    }
  }
}

// 暗色主题适配
.ant-layout-content[data-theme='dark'] {
  .install-plugin-container {
    .upload-card {
      .ant-upload-drag {
        background: #1f1f1f;
        border-color: #434343;

        &:hover {
          border-color: #177ddc;
          background: #111b26;
        }
      }

      .ant-upload-text {
        color: #d9d9d9;
      }

      .ant-upload-hint {
        color: #8c8c8c;
      }
    }

    .upload-tips {
      background: #2b2111;
      border-color: #594214;

      h4 {
        color: #d89614;
      }

      ul {
        color: #8c8c8c;
      }
    }

    .install-result {
      .result-title {
        color: #d9d9d9;
      }

      .result-list {
        .result-item {
          background: #262626;

          &.success {
            background: #162312;
            border-color: #274916;
          }

          &.error {
            background: #2a1215;
            border-color: #58181c;
          }

          .result-index {
            color: #8c8c8c;
          }
        }
      }
    }
  }
}
